Link copied!

Action List API

This component features render debouncing. You may have to wait for the next browser tick after rendering in your integration/E2E tests.

API Reference e-actionlist

HTML Attributes API

Name Description Type Required Default value
items Set actionlist items. The content could also contain HTML code.
The content passed is not sanitized, you have to sanitize it in the application code to avoid XSS attacks.
 array * []
loading Shows a spinner instead of the content or the empty state boolean false
disable-min-width Sets the min-width style of the component to 0 boolean false
always-show-search Show search input even if there's not more then 8 options boolean false
always-show-active Show active item indicatior (aka. secondary focus state) even if the component is not in focus boolean false
search-hidden If true, search will never appear boolean false
empty-state-text String shown when the list is empty and no search keyword,
set it to empty string to hide the empty state text		 string false
selection-disabled Makes all the actionlist items unselectable but they throw change event on click boolean false
height Defines component fixed height. It can be any CSS unit (px, % etc.) string auto
max-height Defines component maximum height. It can be any CSS unit (px, % etc.) string auto
auto-focus Focuses the search input, when it becomes visible boolean false
multiple Actionlist handle multiple selection boolean false
selection-max Limit the number of selectable options. The value must be greater than 0. number
spacing The spacing of elements in the actionlist (outer padding) "cozy" or "none" "cozy"
item-limit Sets the maximum number of items (options) in the actionlist. Exceeding the limit hides items over the limit, makes them only show up by searching. number 1000

*: An example of an items property value: 

[
  { type: 'item', content: 'simple item 1 <e-icon icon="warning" size="small" color="inherit"></e-icon>', value: 'item1' },
  { type: 'group', label: 'group 1', items: [
    { type: 'item', content: 'item 1', value: 'group1item1' }
  ] },
  { type: 'group', label: 'group 2', items: [
    { type: 'item', content: 'item 1', value: 'group2item1', color: 'chart-01' },
    { type: 'item', content: 'item 2', value: 'group2item1', selected: true, color: 'chart-02' },
    { type: 'item', content: 'item 3', value: 'group2item1', color: 'chart-03' }
  ] }
]

JavaScript API

Name Type Description Arguments
isFirstItemActive Returns whether the first visible item is active (has secondary focus)
isLastItemActive Returns whether the last visible item is active (has secondary focus)
selectedItems Returns the currently selected items
moveActiveItem(direction) Moves the active item (secondary focus) in the specified direction direction 'next' | 'previous' | 'first' | 'last'
toggleActiveItem() Activates the currently active item as if it was clicked

Events

Event Description Returns
change Fires on item selection change. 
{
    detail: {
        value: 'value'
    }
}
If it is a multiple actionlist: 
{
    detail: {
        value: ['value1', 'value2']
    }
}
search Fires on search input. 
{
    detail: {
        value: 'search-input-value'
    }
}
hoverchange Fires on hover with mouse on item changes. Get the actionlist item or null when leave an item. 
{
    detail: {
        item: null | {
          uuid: 'string',
          value: 'string',
          content: 'string',
          color: 'string'
          selected: boolean,
          active: boolean,
          disabled: boolean,
        }
    }
}
activechange Fires on active with keyboard on item changes. Get the actionlist item or null when leave an item. 
{
    detail: {
        item: null | {
          uuid: 'string',
          value: 'string',
          content: 'string',
          color: 'string'
          selected: boolean,
          active: boolean,
          disabled: boolean,
        }
    }
}

API Reference e-actionlist-item

HTML Attributes API

Name Description Type Required Default value
value Defines the value of the item string text inside the element
selected Defines the selected value in actionlist boolean false
disabled Defines the disabled state of the item boolean false
color The main (text and checkbox) color of the item string

API Reference e-actionlist-group

HTML Attributes API

Name Description Type Required Default value
label Defines the group label string ""