MultiSelectAPIMixin

Exposes a public API for multiple selection on a list-like element

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 → methodssetState → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • publicly-visible selectedFlags and selectedItems get/set properties.
  • publicly-visible toggleSelectedFlag method.
  • selected-flags-changed event raised when the selectedFlags 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.

selectedItemFlags property

An array of boolean values indicating which items are selected.

Type: Array.

selecteditemflagschange event

Raised when the selectedItemFlags property changes.

selectedItems property

An array containing the subset of items which are currently selected.

Type: Array.

toggleSelectedFlag(index, toggle) method

Toggles the indicated value in the selectedItemFlags array.

Parameters:

  • index: numberthe position the selectedItemFlags array
  • toggle: booleanif present, the flag will be set to this boolean value; if omitted, the flag will be toggled