@finastra/list NPM

List

fds-list extends Material Web mwc-list-base, the package export three list items that can be used inside the fds-list:

See Material List for mor details.

npm i @finastra/list

import '@finastra/list';
...
<fds-list>
  <fds-list-item>Item 1</fds-list-item>
  <fds-list-item>Item 2</fds-list-item>
</fds-list>

Property	Modifiers	Type	Default
`activated`		`boolean`
`disabled`		`boolean`
`graphic`		`GraphicType`
`group`		`string \\| null`
`hasMeta`		`boolean`
`left`		`boolean`
`multipleGraphics`		`boolean`
`noninteractive`		`boolean`
`ripple`		`Promise<Ripple \\| null>`
`selected`		`boolean`
`styles`		`CSSResult[]`	"styles","controlStyle"
`tabindex`		`number`
`text`	readonly	`string`
`twoline`		`boolean`
`value`		`string`

Event	Type
`list-item-rendered`
`request-selected`	`RequestSelectedDetail`

Property	Modifiers	Type	Default
`activated`		`boolean`
`disabled`		`boolean`
`graphic`		`GraphicType`
`group`		`string \\| null`
`hasMeta`		`boolean`
`multipleGraphics`		`boolean`
`noninteractive`		`boolean`
`ripple`		`Promise<Ripple \\| null>`
`selected`		`boolean`
`styles`		`CSSResult[]`	"styles"
`tabindex`		`number`
`text`	readonly	`string`
`twoline`		`boolean`
`value`		`string`

Event	Type
`list-item-rendered`
`request-selected`	`RequestSelectedDetail`

Property	Attribute	Modifiers	Type	Default	Description
`activatable`	`activatable`		`boolean`	false	Sets activated attribute on selected items which provides a focus-persistent highlight.
`debouncedLayout`			`(updateItems?: boolean \\| undefined) => void \\| undefined`
`emptyMessage`			`string \\| undefined`
`index`		readonly	`MWCListIndex`
`innerAriaLabel`			`string \\| null`
`innerRole`			`string \\| null`
`itemRoles`			`string \\| null`
`items`		readonly	`ListItemBase[]`
`itemsReady`			`Promise<never[]>`
`layout`			`(updateItems?: boolean \\| undefined) => void`
`multi`	`multi`		`boolean`	false	When true, enables selection of multiple items.
`noninteractive`	`noninteractive`		`boolean`	false	Disables focus and pointer events for the list item.
`rootTabbable`			`boolean`
`selected`		readonly	`ListItemBase \\| ListItemBase[] \\| null`
`styles`			`CSSResult[]`	"styles"
`wrapFocus`			`boolean`

Method	Type
`blur`	`(): void`
`click`	`(): void`
`focus`	`(): void`
`focusItemAtIndex`	`(index: number): void`
`getFocusedItemIndex`	`(): number`
`layout`	`(updateItems?: boolean \\| undefined): void`
`renderPlaceholder`	`(): TemplateResult<1> \\| null`
`select`	`(index: MWCListIndex): void`
`toggle`	`(index: number, force?: boolean \\| undefined): void`

Name	Description
`default`	Content to display in the lists internal element.

Property	Type	Default	Description
`--fds-primary`	color	"#694ED6"	Color of the select item.
`--fds-secondary`	color	"#C137A2"	Color of the controls.

Property	Modifiers	Type	Default
`activated`		`boolean`
`disabled`		`boolean`
`graphic`		`GraphicType`
`group`		`string \\| null`
`hasMeta`		`boolean`
`left`		`boolean`
`multipleGraphics`		`boolean`
`noninteractive`		`boolean`
`ripple`		`Promise<Ripple \\| null>`
`selected`		`boolean`
`styles`		`CSSResult[]`	"styles","controlStyle"
`tabindex`		`number`
`text`	readonly	`string`
`twoline`		`boolean`
`value`		`string`