Components List Sheet

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-sheet selector to use this component as a sheet list.

Properties

Name	Type	Description
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

Name	Type	Description
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

Name	Type	Description
index	`number`	@param index
focusItem	`boolean`	@param focusItem

Returns

void

LmnListService

import { LmnListService } from '@elemental/ui';

Decorators: @Injectable

Properties

Name	Type	Description
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>`

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

Name	Type	Description
activeItem	`any`

Returns

void

setActiveItem()

Set the active List Item value of the List.

Presentation

setActiveItem(activeItem: any): void;

Parameters

Name	Type	Description
activeItem	`any`	@param activeItem

Returns

void

setAllowReordering()

Set the allow reordering value of the List.

Presentation

setAllowReordering(allowReordering: boolean): void;

Parameters

Name	Type	Description
allowReordering	`boolean`	@param allowReordering

Returns

void

setId()

Set the ID of the List.

Presentation

setId(id: string): void;

Parameters

Name	Type	Description
id	`string`	@param id

Returns

void

setIsRoot()

Set the isRoot value of the List.

Presentation

setIsRoot(isRoot: boolean): void;

Parameters

Name	Type	Description
isRoot	`boolean`	@param isRoot

Returns

void

setMode()

Set the List Mode.

Presentation

setMode(mode: LmnListMode): void;

Parameters

Name	Type	Description
mode	`LmnListMode`	@param mode

Returns

void

setNegative()

Set the negative value of the List.

Presentation

setNegative(negative: boolean): void;

Parameters

Name	Type	Description
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

Name	Type	Description
role	`string`

Returns

void

setSelectionControlsPosition()

Set the selection controls position of the List.

Presentation

setSelectionControlsPosition(selectionControlsPosition: LmnListSelectionControlsPosition): void;

Parameters

Name	Type	Description
selectionControlsPosition	`LmnListSelectionControlsPosition`	@param selectionControlsPosition

Returns

void

setSelectionMode()

Set the selection mode of the List.

Presentation

setSelectionMode(selectionMode: LmnListSelectionMode): void;

Parameters

Name	Type	Description
selectionMode	`LmnListSelectionMode`	@param selectionMode

Returns

void

setShowDividers()

Set the show dividers value of the List.

Presentation

setShowDividers(showDividers: boolean): void;

Parameters

Name	Type	Description
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

Name	Type	Description
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

Name	Type	Description
listService	`LmnListService`

Returns

void

LmnListItemTitleComponent

import { LmnListItemTitleComponent } from '@elemental/ui';

Decorators:	`@Component`
Selectors:	`lmn-list-item-title` `[lmnListItemTitle]`

Properties

Name	Type	Description
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

Name	Type	Description
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]`

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

LmnListItemLinkDirective

import { LmnListItemLinkDirective } from '@elemental/ui';

Decorators:	`@Directive`
Selectors:	`[lmnListItemLink]`

Properties

Name	Type	Description
linkDisabled r	`InputSignalWithTransform<boolean, unknown>`
linkDisabledDataAttr r	`Signal<"" \| null>`

LmnListItemGroupComponent

import { LmnListItemGroupComponent } from '@elemental/ui';

Decorators:	`@Component`
Selectors:	`lmn-list-item-group`

Properties

Name	Type	Description
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

Name	Type	Description
nativeElement r	`HTMLElement`

LmnListItemGroupService

import { LmnListItemGroupService } from '@elemental/ui';

Decorators: @Injectable

Properties

Name	Type	Description
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

Name	Type	Description
id	`string`

Returns

void

setListService()

No documentation has been provided.

Presentation

setListService(listService: LmnListService | undefined): void;

Parameters

Name	Type	Description
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

Name	Type	Description
showDividers	`boolean`

Returns

void

LmnListComponent

Properties

Methods

requestToActivateItem()

Notes

Presentation

Parameters

Returns

setFocusableItem()

Presentation

Parameters

Returns

LmnListService

Properties

Accessors

get formGroup

Presentation

Type

set formGroup

Presentation

Type

Methods

requestToActivateItem()

Presentation

Parameters

Returns

setActiveItem()

Presentation

Parameters

Returns

setAllowReordering()

Presentation

Parameters

Returns

setId()

Presentation

Parameters

Returns

setIsRoot()

Presentation

Parameters

Returns

setMode()

Presentation

Parameters

Returns

setNegative()

Presentation

Parameters

Returns

setRole()

Presentation

Parameters

Returns

setSelectionControlsPosition()

Presentation

Parameters

Returns

setSelectionMode()

Presentation

Parameters

Returns

setShowDividers()

Presentation

Parameters

Returns

updateListKeyManagerDefaultState()

Presentation

Returns

LmnListItemComponent

Properties

Accessors

get trigger

Presentation

Type

Methods

focus()

Presentation

Returns

getTextContent()