@ngneers/controls 0.0.1-next.0

package/types/ngneers-controls-list-box.d.ts

@@ -0,0 +1,334 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import { NgnItem, NgnItemsValue, FilterConfig } from '@ngneers/controls/api';
+import { InputGeneric, maybeCallback } from '@ngneers/controls/utils';
+import { ValueControlBase } from '@ngneers/controls/base';
+
+/**
+ * This type determines the value type for the select control.
+ * * If `multiple` is `true`, the value is an array of items: `T[K][]`.
+ * * Else it is the item's value type `T[K]`.
+ */
+type ValueType<Items extends readonly NgnItem[], Multiple extends boolean> = InputGeneric<Multiple, false> extends true ? NgnItemsValue<Items>[] : NgnItemsValue<Items>;
+declare abstract class ListBoxTemplates<Items extends readonly NgnItem[], Multiple extends boolean> extends ValueControlBase<'listBox', ValueType<Items, Multiple> | null> {
+    private readonly _defaultItemTemplate;
+    private readonly _userItemTemplate;
+    /**
+     * Set a custom template for an item of the list box.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }> | null>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }>>;
+    private readonly _defaultGroupTemplate;
+    private readonly _userGroupTemplate;
+    /**
+     * Set a custom template for a group in the list box.
+     * Can also be set using an `<ng-template>` element with `#group` template reference variable.
+     */
+    readonly templateGroup: _angular_core.InputSignal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }> | null>;
+    protected readonly groupTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: Items[number] | undefined;
+    }>>;
+    private readonly _defaultEmptyTemplate;
+    private readonly _userEmptyTemplate;
+    /**
+     * Set a custom template for the empty state in the list box.
+     * Can also be set using an `<ng-template>` element with `#empty` template reference variable.
+     */
+    readonly templateEmpty: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly emptyTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * Types for the dialog templates.
+     */
+    readonly templateTypes: {
+        item: {
+            $implicit: Items[number] | undefined;
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: Items[number] | undefined;
+            }>;
+        };
+    };
+    protected readonly templateTypesInternal: {
+        item: {
+            $implicit: Items[number] | undefined;
+            index: number;
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: Items[number] | undefined;
+                index: number;
+            }>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListBoxTemplates<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListBoxTemplates<any, any>, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateGroup": { "alias": "templateGroup"; "required": false; "isSignal": true; }; "templateEmpty": { "alias": "templateEmpty"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userGroupTemplate", "_userEmptyTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnListBox<Items extends readonly NgnItem[], Multiple extends boolean = false> extends ListBoxTemplates<Items, Multiple> {
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            input: string;
+            selectYear: string;
+            selectMonth: string;
+            previousMonth: string;
+            nextMonth: string;
+            weekdays: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            weekdaysShort: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            months: {
+                january: string;
+                february: string;
+                march: string;
+                april: string;
+                may: string;
+                june: string;
+                july: string;
+                august: string;
+                september: string;
+                october: string;
+                november: string;
+                december: string;
+            };
+        };
+        editInplace: {
+            placeholder: string;
+            confirm: string;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            operator: string;
+            value: string;
+            clear: string;
+            apply: string;
+            cancel: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: string;
+                and: string;
+                or: string;
+            };
+            selected: string;
+            conditions: string;
+            operators: {
+                isEqual: string;
+                isNotEqual: string;
+                contains: string;
+                startsWith: string;
+                endsWith: string;
+                in: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                after: string;
+                onOrAfter: string;
+                before: string;
+                onOrBefore: string;
+                isTrue: string;
+                isFalse: string;
+                custom: string;
+            };
+        };
+        splitter: {
+            handleLabel: string;
+        };
+        inputField: {
+            clearInput: string;
+        };
+        maskInput: {
+            roleDescription: string;
+            segmentRange: string;
+            optionSeparator: string;
+        };
+        drawer: {
+            close: string;
+        };
+        dialog: {
+            close: string;
+        };
+        chip: {
+            close: string;
+        };
+        breadcrumb: {
+            overflow: string;
+        };
+        toast: {
+            close: string;
+            region: string;
+        };
+        snackbar: {
+            close: string;
+            region: string;
+            severity: {
+                error: string;
+                warning: string;
+                success: string;
+                info: string;
+            };
+        };
+        upload: {
+            upload: string;
+            uploadNamed: string;
+            retryNamed: string;
+            cancelNamed: string;
+            removeNamed: string;
+            progressNamed: string;
+        };
+        select: {
+            filterOptions: string;
+        };
+        paginator: {
+            previousPage: string;
+            nextPage: string;
+        };
+        listBox: {
+            noItemsFound: string;
+        };
+        tree: {
+            noItemsFound: string;
+        };
+        table: {
+            selectAllRows: string;
+            selectRow: string;
+            sortedBy: string;
+            sortAscending: string;
+            sortDescending: string;
+            sortCleared: string;
+            selectedCount: string;
+            page: string;
+            resultCount: string;
+        };
+        state: {
+            loading: string;
+            success: string;
+            warning: string;
+            error: string;
+            cancelled: string;
+        };
+    }, "_">;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+        readonly class: "checkbox";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+    }, {
+        readonly class: "scroller";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+    }]>>;
+    private readonly _scroller;
+    /**
+     * The items to display in the list box.
+     */
+    readonly items: _angular_core.InputSignal<Items>;
+    /**
+     * Whether to scroll to the selected item when the list box is first rendered.
+     * Pass a `ScrollLogicalPosition` to control where the item lands in the viewport.
+     * @default false
+     */
+    readonly scrollToSelectedItemOnInit: _angular_core.InputSignal<boolean | ScrollLogicalPosition>;
+    /**
+     * Whether items can be selected by the user.
+     * @default false
+     */
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether hovering an item selects it.
+     * @default false
+     */
+    readonly selectOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the list box itself is focusable and participates in keyboard navigation.
+     * @default true
+     */
+    readonly focussable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the list is virtualized.
+     * @default false
+     */
+    readonly virtual: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When {@link virtual} is enabled, this defines the height of each item in the list.
+     */
+    readonly itemHeight: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Enable this to allow the user to select multiple values.
+     * When enabled, the value of the control becomes an array of selected items.
+     */
+    readonly multiple: _angular_core.InputSignal<Multiple | undefined>;
+    /**
+     * Whether to use a checkbox to indicate selection state.
+     *
+     * This option is true per default when {@link multiple} is `true`.
+     * @default multiple()
+     */
+    readonly checkbox: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Accepts a boolean value that determines whether the filter is enabled.
+     * Alternatively, you can provide `FilterConfig` to customize the filter behavior.
+     * @default `false`
+     */
+    readonly filter: _angular_core.InputSignal<boolean | FilterConfig<Items[number]>>;
+    /**
+     * Manually set the filter text.
+     */
+    readonly filterText: _angular_core.InputSignal<string | null>;
+    /**
+     * Emitted when an item is clicked, carrying the value of that item.
+     */
+    readonly itemClicked: _angular_core.OutputEmitterRef<NgnItemsValue<Items>>;
+    protected readonly maybeCallback: typeof maybeCallback;
+    readonly displayedItems: _angular_core.Signal<NgnItem<any, any>[]>;
+    protected readonly valueArray: _angular_core.Signal<NgnItemsValue<Items>[]>;
+    readonly currentHighlightedValue: _angular_core.WritableSignal<NgnItemsValue<Items> | null>;
+    protected readonly filteredItems: {
+        (): readonly NgnItem[];
+        isRunning: _angular_core.Signal<boolean>;
+        firstRunCompleted: _angular_core.Signal<boolean>;
+    };
+    private readonly _appliedFilterOptions;
+    protected readonly filterIsExecuting: _angular_core.Signal<boolean>;
+    protected readonly showCheckboxes: _angular_core.Signal<boolean>;
+    constructor();
+    onKeyDown(event: KeyboardEvent): void;
+    scrollToIndex(index: number): void;
+    protected onSelect(value: NgnItemsValue<Items>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnListBox<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnListBox<any, any>, "ngn-list-box", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "scrollToSelectedItemOnInit": { "alias": "scrollToSelectedItemOnInit"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectOnHover": { "alias": "selectOnHover"; "required": false; "isSignal": true; }; "focussable": { "alias": "focussable"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
+}
+
+export { NgnListBox };