@nospamproxy/core
    Preparing search index...

    Class MultiSelectDropdown<T>

    A standard multi select dropdown.

    import { DropdownItem } from "@nospamproxy/core";

    class Example {
      selected = new Set<number>();

      items: DropdownItem[] = {
        { id: 0, t: "example.t0" },
        { id: 1, t: "example.t1" },
      };
    }

    <!--  -->
    <multi-select-dropdown selected.bind="selected" items.bind="items"></multi-select-dropdown>

    Type Parameters

    • T = unknown

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    allText? allTextKey? disabled ea emptyText? emptyTextKey? i18n items labelId? labelText? name? nameKey? replaceSelected selected? selectionSignal signaler sort type width

    Accessors

    computedItems

    Methods

    binding computeItems deselect deselectAll getDisplayText getToggleCallback isSelected select selectAll toggle unbinding

    Constructors

    Properties

    allText?: string

    The display text that is used when all items are selected.

    allTextKey?: string
    disabled: boolean = false

    Set if the dropdown is disabled.

    ea: IEventAggregator = ...
    emptyText?: string

    The display text that is used when no items are selected.

    emptyTextKey?: string
    i18n: I18N = ...
    items: DropdownItem<T>[] = []

    An array of available items.

    labelId?: string

    Properties for the accessibility.

    labelText?: string
    name?: string

    The name to display before the selected options.

    nameKey?: string
    replaceSelected: boolean = false

    If true, the selected binding is replaced with a new array every time the user changes the selection.

    selected?: T[] | Set<T> = []

    An array or set of selected item ids.

    This will be modified in-place when the selection is changed by the user or via the view model api.

    If in-place modification can not be used for some reason, use replaceSelected to disable this behavior.

    selectionSignal: string = ...

    A signal that can be used by extending classes when the selected items have changed.

    signaler: ISignaler = ...
    sort: boolean = false

    True to display items in alphabetical order.

    type: DropdownType = 'input'

    Set how the dropdown button looks.

    'input'
    width: string = ''

    Set a fixed width for the dropdown container.

    <dropdown-control items.bind="items" width="30rem"></dropdown-control>

    Accessors

    • get computedItems(): readonly ComputedItem[]

      An array of items as they are currently displayed.

      Returns readonly ComputedItem[]

    Methods

    • Parameters

      • _initiator: IHydratedController
      • _parent: IHydratedController | null

      Returns void

    • Returns void

    • Deselect an item by id.

      Parameters

      • id: T

        The item id.

      Returns void

    • Deselect all items.

      Returns void

    • Get the current display text of the dropdown button.

      Returns string

    • Parameters

      • id: T

      Returns (select: boolean) => void

    • Check if an item with the specified id is currently selected.

      Parameters

      • id: T

        The item id.

      Returns boolean

      True if the item is selected.

    • Select an item by id.

      Parameters

      • id: T

        The item id.

      Returns void

    • Select all items.

      Returns void

    • Select or deselect an item by id.

      Parameters

      • id: T

        The item id.

      • Optionalselect: boolean

        True to select, false to deselect or undefined to toggle.

      Returns void

    • Parameters

      • _initiator: IHydratedController
      • _parent: IHydratedController | null

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods