@nospamproxy/core
    Preparing search index...

    Class DropdownControl<T>

    A standard single selection dropdown.

    Items can be bound via the items property or provided by binding an async get-items function.

    // example.ts
    import { DropdownItem } from "@nospamproxy/core";

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

    <!-- example.html -->
    <dropdown-control selected.bind="selected" items.bind="items"></dropdown-control>

    Type Parameters

    • T = unknown

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    action disabled ea filterItems getItems? i18n items labelId? labelText? limit resource? rows search selected selectionSignal signaler sort stateChangedEvent type width

    Accessors

    computedItems isSearchEnabled

    Methods

    attached binding computeItems getDisplayText hide refreshItems selectedChanged unbinding

    Constructors

    Properties

    action: (id: T) => void = ...
    disabled: boolean = false

    Set if the dropdown is disabled.

    ea: IEventAggregator = ...
    filterItems: (search: string, id: T, value: string) => boolean = ...
    getItems?: GetDropdownItemsFn<T> = undefined

    An optional function to asynchronously get items to show in the dropdown.

    • When search is enabled, the search text is passed to this function.
    • When search is disabled, the search text can be ignored.
    import { DropdownItem } from "@nospamproxy/core";

    class Example {
      private getItems = async (search: string, limit: number): DropdownItem[] => {
        return [
          { id: 0, value: "Foo" },
          { id: 1, value: "Bar" },
          { id: 2, value: "Bar" },
        ].filter(item => item.value.toLowerCase().includes(search.toLowerCase()));
      };
    }

    <dropdown-control get-items.bind="getItems" search="auto"></dropdown-control>
    i18n: I18N = ...
    items: DropdownItem<T>[] = []

    An array of available items.

    labelId?: string
    labelText?: string
    limit: number = 25

    The maximum number of items to show at the same time when using getItems.

    Note, that limit + 1 is passed to the getItems function to check if there are more items.

    resource?: string

    Resource prefix to use for display texts in the dropdown.

    The following keys are optional:

    • name - The display name that is shown in the dropdown button.
    • none - The text that is shown in the dropdown button if no item is selected.

    The following keys are required when the dropdown is searchable:

    • type, type_plural - The display name to use for the item type such as "domain/domains" or "user/users".
    <dropdown-control items.bind="items" search="auto" resource="example.r.dropdown."></dropdown-control>

    // example.r.json:
    {
      "dropdown": {
        "name": "Domain",
        "none": "Select domain",
        "type": "domain",
        "type_plural": "domains"
      }
    }
    rows: number | undefined = undefined

    The maximum number of item rows to show before enable scrolling.

    By default this is limited to 5 rows if search is enabled and 15 if search is disabled.

    search: number | boolean | "auto" = false

    Set if search is enabled.

    • If 'auto', search is enabled if a getItems function is bound or if there are at least 5 items available.
    • If true/false, search is always enabled/disabled.
    • If a number is bound, search is enabled if there is at least this number of items available.
    false
    selected: T | undefined = undefined

    The currently selected item id.

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

    selectionSignal: string = ...

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

    signaler: ISignaler = ...
    sort: boolean = true

    True to display items in alphabetical order.

    stateChangedEvent: string | null = null

    An event channel that the dropdown content subscribes to to get notified when the popout state changes. The popout instance must be passed as the first argument.

    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[]

    • get isSearchEnabled(): boolean

      Returns boolean

    Methods

    • Parameters

      • _initiator: IHydratedController

      Returns void | Promise<void>

    • Parameters

      • initiator: IHydratedController
      • parent: IHydratedController | null

      Returns void

    • Returns void

    • Get the current display text of the dropdown button.

      Returns string

    • Returns void

    • Returns void

    • Parameters

      • initiator: IHydratedController
      • parent: IHydratedController | null

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods