Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components List Tree

List Tree

 Overview API Examples Style Tokens

LmnListComponent

import { LmnListComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list lmn-list-presentation lmn-list-listbox lmn-list-sheet lmn-list-tablist lmn-list-tree lmn-list-navigation


Use lmn-list-tree selector to use this component as a tree list.

Properties

NameTypeDescription
activeItem
r
InputSignal<string | undefined>

The value of the active List Item. It is only applied to TABLIST and NAVIGATION Lists, and only if they are root Lists.

allowReordering
r
InputSignalWithTransform<boolean, unknown>

Whether to allow reordering (drag & drop) of the List Items.

changeActiveItem
r
OutputRef<LmnListChangeActiveItemEvent>

Emitted when the user attempts to change the active List Item. If a listener is attached to this Output, then it is necessary to send back a confirmation in the canActivate subject in order to let the List component know the change is allowed.

id
r
InputSignal<string | undefined>

The id of the List. If not passed, a serial unique id is generated and applied to the host.

nativeElement
r
HTMLElement
negative
r
InputSignalWithTransform<boolean, unknown>

Whether the List should be rendered with negative colors or not.

role
r
InputSignal<string | undefined>

Custom role. It is only applied when using the generic selector (FREE mode).

root
r
InputSignalWithTransform<boolean, unknown>

If set to true, the List is treated as a Root List, and not as a sub-list of any parent Lists.

For example, when we display a List containing a set of Items, each of which has some contextual actions revealed in a Popover, we want that List of actions to be unrelated from the parent List, both semantically and stylistically (i.e. indentation). By setting root=true on the Actions List, we start a new "stack" of Lists.

If no parent Lists are found in the DOM, then this Input is ignored.

selectionControlsPosition
r
InputSignal<LmnListSelectionControlsPosition | undefined>

Whether to show the selection controls on the start or end edge of the List Items.

selectionMode
r
InputSignal<LmnListSelectionMode>

The selection mode (none, radio, checkbox, toggle) for all the List Items included in the List. If the passed selection mode is not supported for the current type of List, it is coerced to "none".

Supported selection modes:

  • (FREE mode): none, radio, checkbox, toggle
  • (PRESENTATION mode): none, radio, checkbox, toggle
  • (LISTBOX mode): none, radio, checkbox, toggle (single/multiple selection is displayed as checkmarks)
  • (SHEET mode): none, radio, checkbox, toggle (single/multiple selection is displayed as checkmarks)
  • (TABLIST mode): none, toggle
  • (TREE mode): none, radio, checkbox, toggle
  • (NAVIGATION mode): none
showDividers
r
InputSignalWithTransform<boolean, unknown>

Whether to show the dividers between List Items.

Methods

requestToActivateItem()

Requests the activation of a List Item.

Notes

This method creates a Subject to check if activation can proceed and emits an event to activate the item.

Presentation
requestToActivateItem(activeItem: any): void;
Parameters
NameTypeDescription
activeItem
any
Returns
void

setFocusableItem()

Set one of the item as the focusable one, and optionally focus it.

It's necessary only on list:

  • listbox
  • sheet

On the following list the items are already always focusable:

  • tablist
  • tree

On the following list, the focus is not managed by the list itself but on the list item title

  • navigation
Presentation
setFocusableItem(index: number, focusItem: boolean = false): void;
Parameters
NameTypeDescription
index
number

@param index

focusItem
boolean

@param focusItem

Returns
void

LmnListService

import { LmnListService } from '@elemental/ui';
Decorators:@Injectable

Properties

NameTypeDescription
activeItem
r
Signal<any>

The value of the active List Item. It is only applied to Tablist and Navigation Lists, and only if they are root.

allowReordering
r
Signal<boolean>

Whether reordering the List Items in the current List is allowed. It is not inherited from the parent List.

id
r
Signal<string>

The ID of the List. It is not inherited from the parent List.

isRoot
r
Signal<boolean>

Whether the List is a Root List. If no #parentListService exists, then the List is a Root List regardless of the passed value.

listDepth
r
Signal<number>

Set the list depth.

mode
r
Signal<LmnListMode>

The List Mode. The getter function returns the validated List Mode (see documentation for the getListValidMode function).

negative
r
Signal<boolean>

Whether the List is negative. If not set, it is inherited from the parent List.

requestToActiveItem$
r
Observable<any>

An observable to request the activation of a specific List Item. Used to allow communication from the child List to Parent List.

role
r
Signal<string>

The List role. If a custom role is set, it is only applied when using the generic selector (FREE mode). Otherwise, the default role is applied.

selectionControlsPosition
r
Signal<LmnListSelectionControlsPosition>

Whether to show the selection controls on the start or end edge of the List Items. If not set, it is inherited from the parent List.

selectionMode
r
Signal<LmnListSelectionMode>

The current selection mode for the List. It is not inherited from the parent List. The getter function returns the validated List Selection Mode, basing on the List Mode.

showDividers
r
Signal<boolean>

Whether to show the dividers between List Items. If not set, it is inherited from the parent List.

Accessors

get formGroup

The form group directive associated with the List.

Presentation
get formGroup(): LmnFormGroupDirective<unknown>;
Type

LmnFormGroupDirective<unknown>

set formGroup

No documentation has been provided.

Presentation
set formGroup(value: LmnFormGroupDirective<unknown>);
Type

LmnFormGroupDirective<unknown>

Methods

requestToActivateItem()

No documentation has been provided.

Presentation
requestToActivateItem(activeItem: any): void;
Parameters
NameTypeDescription
activeItem
any
Returns
void

setActiveItem()

Set the active List Item value of the List.

Presentation
setActiveItem(activeItem: any): void;
Parameters
NameTypeDescription
activeItem
any

@param activeItem

Returns
void

setAllowReordering()

Set the allow reordering value of the List.

Presentation
setAllowReordering(allowReordering: boolean): void;
Parameters
NameTypeDescription
allowReordering
boolean

@param allowReordering

Returns
void

setId()

Set the ID of the List.

Presentation
setId(id: string): void;
Parameters
NameTypeDescription
id
string

@param id

Returns
void

setIsRoot()

Set the isRoot value of the List.

Presentation
setIsRoot(isRoot: boolean): void;
Parameters
NameTypeDescription
isRoot
boolean

@param isRoot

Returns
void

setMode()

Set the List Mode.

Presentation
setMode(mode: LmnListMode): void;
Parameters
NameTypeDescription
mode
LmnListMode

@param mode

Returns
void

setNegative()

Set the negative value of the List.

Presentation
setNegative(negative: boolean): void;
Parameters
NameTypeDescription
negative
boolean

@param negative

Returns
void

setRole()

The List depth. It is calculated basing on the value of isRoot:

  • If TRUE, the List depth is 0
  • If FALSE, the List depth is the parent List depth plus 1
Presentation
setRole(role: string): void;
Parameters
NameTypeDescription
role
string
Returns
void

setSelectionControlsPosition()

Set the selection controls position of the List.

Presentation
setSelectionControlsPosition(selectionControlsPosition: LmnListSelectionControlsPosition): void;
Parameters
NameTypeDescription
selectionControlsPosition
LmnListSelectionControlsPosition

@param selectionControlsPosition

Returns
void

setSelectionMode()

Set the selection mode of the List.

Presentation
setSelectionMode(selectionMode: LmnListSelectionMode): void;
Parameters
NameTypeDescription
selectionMode
LmnListSelectionMode

@param selectionMode

Returns
void

setShowDividers()

Set the show dividers value of the List.

Presentation
setShowDividers(showDividers: boolean): void;
Parameters
NameTypeDescription
showDividers
boolean

@param showDividers

Returns
void

updateListKeyManagerDefaultState()

Updates the default state of the ListKeyManager directive, in order for the first selected/active item to become the first to be focused the next time we enter the List.

Presentation
updateListKeyManagerDefaultState(): void;
Returns
void

LmnListItemComponent

import { LmnListItemComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item a[lmnListItem]

Properties

NameTypeDescription
listItemDirective
r
LmnListItemDirective
nativeElement
r
HTMLElement

Accessors

get trigger

No documentation has been provided.

Presentation
get trigger(): OutputEmitterRef<LmnListItemTriggerEvent>;
Type

OutputEmitterRef<LmnListItemTriggerEvent>

Methods

focus()

No documentation has been provided.

Presentation
focus(): void;
Returns
void

getTextContent()

No documentation has been provided.

Presentation
getTextContent(): string;
Returns
string

setParentListService()

No documentation has been provided.

Presentation
setParentListService(listService: LmnListService): void;
Parameters
NameTypeDescription
listService
LmnListService
Returns
void

LmnListItemTitleComponent

import { LmnListItemTitleComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item-title [lmnListItemTitle]

Properties

NameTypeDescription
nativeElement
r
HTMLElement

Methods

focus()

Focuses the title text element.

Presentation
focus(): void;
Returns
void

LmnListItemDescriptionComponent

import { LmnListItemDescriptionComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item-description [lmnListItemDescription]

Properties

NameTypeDescription
nativeElement
r
HTMLElement

LmnListItemSlotStartComponent

import { LmnListItemSlotStartComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item-slot-start [lmnListItemSlotStart]

LmnListItemSlotEndComponent

import { LmnListItemSlotEndComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item-slot-end [lmnListItemSlotEnd]

LmnListItemLinkDirective

import { LmnListItemLinkDirective } from '@elemental/ui';
Decorators:@Directive
Selectors:[lmnListItemLink]

Properties

NameTypeDescription
linkDisabled
r
InputSignalWithTransform<boolean, unknown>
linkDisabledDataAttr
r
Signal<"" | null>

LmnListItemGroupComponent

import { LmnListItemGroupComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item-group

Properties

NameTypeDescription
isRoot
r
Signal<boolean>
nativeElement
r
HTMLElement
negative
r
Signal<boolean>
showDividers
r
InputSignalWithTransform<boolean, unknown>

Whether to show the dividers between the List Items and below the Group title.

showTopDivider
r
Signal<boolean>

LmnListItemGroupTitleComponent

import { LmnListItemGroupTitleComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-list-item-group-title

Properties

NameTypeDescription
nativeElement
r
HTMLElement

LmnListItemGroupService

import { LmnListItemGroupService } from '@elemental/ui';
Decorators:@Injectable

Properties

NameTypeDescription
depth
r
Signal<number>
id
r
Signal<string>
isRoot
r
Signal<boolean>
negative
r
Signal<boolean>
showDividers
r
Signal<boolean>
showTopDivider
r
Signal<boolean>

Whether to show the divider on top of the List Item Group.

titleId
r
Signal<string>

Methods

setId()

The ID of the List Item. If not set, it is inherited from the parent List.

Presentation
setId(id: string): void;
Parameters
NameTypeDescription
id
string
Returns
void

setListService()

No documentation has been provided.

Presentation
setListService(listService: LmnListService | undefined): void;
Parameters
NameTypeDescription
listService
LmnListService | undefined
Returns
void

setShowDividers()

Whether to show the dividers between List Items. If not set, it is inherited from the parent List.

Presentation
setShowDividers(showDividers: boolean): void;
Parameters
NameTypeDescription
showDividers
boolean
Returns
void

Previous
List Tablist
Next
Menu