Overview
Purpose: Exposes a public API for multiple selection on a list-like element.
This mixin works in the middle of the Elix render pipeline:
events → methods ➞ setState → render DOM → post-render
Expects the component to provide:
selectedFlags
andselectedItems
state members, typically via ItemsMultiSelectMixin.
Provides the component with:
- publicly-visible
selectedFlags
andselectedItems
get/set properties. - publicly-visible
toggleSelectedFlag
method. selectedflagschange
event raised when theselectedFlags
member is updated.
Usage
import ItemsMultiSelectMixin from "elix/src/base/ItemsMultiSelectMixin.js";
import MultiSelectAPIMixin from "elix/src/base/MultiSelectAPIMixin.js";
class MyElement extends ItemsMultiSelectMixin(
MultiSelectAPIMixin(HTMLElement)
) {}
This mixin is generally used in conjunction with ItemsMultiSelectMixin, but the two mixins are provided separately to give you control over whether you want to publicly expose a multi-select API on your list-like component.
API
Used by classes MultiSelectListBox and PlainMultiSelectListBox.
selected Item Flags property
An array of boolean values indicating which items are selected.
Type: Array.
selecteditemflagschange event
Raised when the selectedItemFlags
property changes.
selected Items property
An array containing the subset of items which are currently selected.
Type: Array.
toggle Selected Flag(index, toggle) method
Toggles the indicated value in the selectedItemFlags
array.
Parameters:
- index:
number
– the position theselectedItemFlags
array - toggle:
boolean
– if present, the flag will be set to this boolean value; if omitted, the flag will be toggled