@ngneers/controls 0.0.1-next.0

package/types/ngneers-controls-select.d.ts

@@ -0,0 +1,409 @@
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnItem, FilterConfig, FilterFn, FilterConfigInternal } from '@ngneers/controls/api';
+import { PopoverOptions } from '@ngneers/controls/popover';
+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][]`.
+ * * If `editable` is true, the value is a `string`.
+ * * If neither is true, the value is the item's value type `T[K]`.
+ */
+type ValueType<V, Editable extends boolean, Multiple extends boolean> = InputGeneric<Multiple, false> extends true ? V[] : InputGeneric<Editable, false> extends true ? string : V;
+declare abstract class SelectTemplates<V, Editable extends boolean, Multiple extends boolean> extends ValueControlBase<'select', ValueType<V, Editable, Multiple> | null> {
+    private readonly _defaultItemTemplate;
+    private readonly _userItemTemplate;
+    /**
+     * Set a custom template for an item of the select control.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<{
+        $implicit: NgnItem<unknown, V> | undefined;
+    }> | null>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: NgnItem<unknown, V> | undefined;
+    }>>;
+    private readonly _defaultSelectedItemTemplate;
+    private readonly _userSelectedItemTemplate;
+    /**
+     * Set a custom template for the selected item of the select control.
+     * Can also be set using an `<ng-template>` element with `#selectedItem` template reference variable.
+     */
+    readonly templateSelectedItem: _angular_core.InputSignal<TemplateRef<{
+        $implicit: NgnItem<unknown, V> | undefined;
+    }> | null>;
+    protected readonly selectedItemTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: NgnItem<unknown, V> | undefined;
+    }>>;
+    private readonly _defaultSelectedItemsTemplate;
+    private readonly _userSelectedItemsTemplate;
+    /**
+     * Set a custom template for the selected items of the select control if {@link multiple} is `true`.
+     * Can also be set using an `<ng-template>` element with `#selectedItems` template reference variable.
+     */
+    readonly templateSelectedItems: _angular_core.InputSignal<TemplateRef<{
+        $implicit: NgnItem<unknown, V>[];
+    }> | null>;
+    protected readonly selectedItemsTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: NgnItem<unknown, V>[];
+    }>>;
+    private readonly _defaultGroupTemplate;
+    private readonly _userGroupTemplate;
+    /**
+     * Set a custom template for a group in the select control.
+     * Can also be set using an `<ng-template>` element with `#group` template reference variable.
+     */
+    readonly templateGroup: _angular_core.InputSignal<TemplateRef<{
+        $implicit: NgnItem<unknown, V> | undefined;
+    }> | null>;
+    protected readonly groupTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: NgnItem<unknown, V> | undefined;
+    }>>;
+    private readonly _userNoItemsTemplate;
+    /**
+     * Set a custom template for the no items state of the select control.
+     * Can also be set using an `<ng-template>` element with `#noItems` template reference variable.
+     */
+    readonly templateNoItems: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly noItemsTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    /**
+     * Types for the dialog templates.
+     */
+    readonly templateTypes: {
+        item: {
+            $implicit: NgnItem<unknown, V> | undefined;
+        };
+        selectedItems: {
+            $implicit: NgnItem<unknown, V>[];
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: NgnItem<unknown, V> | undefined;
+            }>;
+            selectedItems: Partial<{
+                $implicit: NgnItem<unknown, V>[];
+            }>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectTemplates<any, any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SelectTemplates<any, any, any>, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateSelectedItem": { "alias": "templateSelectedItem"; "required": false; "isSignal": true; }; "templateSelectedItems": { "alias": "templateSelectedItems"; "required": false; "isSignal": true; }; "templateGroup": { "alias": "templateGroup"; "required": false; "isSignal": true; }; "templateNoItems": { "alias": "templateNoItems"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userSelectedItemTemplate", "_userSelectedItemsTemplate", "_userGroupTemplate", "_userNoItemsTemplate"], never, true, never>;
+}
+
+type _SelectFilterOptions = {
+    clearFilterOnClose?: boolean;
+};
+type SelectFilterOptions<T extends object> = _SelectFilterOptions & FilterConfig<T>;
+type SelectFilterOptionsInternal<T extends object> = _SelectFilterOptions & FilterConfigInternal<T>;
+type SelectFilterFn<T extends object> = FilterFn<NgnItem<T>>;
+
+/**
+ * @category control
+ */
+declare class NgnSelect<V, Editable extends boolean = false, Multiple extends boolean = false> extends SelectTemplates<V, Editable, Multiple> {
+    readonly isFieldControl = true;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+        readonly class: "popover";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "list-box";
+        readonly template: _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 []>;
+        }]>;
+    }, {
+        readonly class: "filter";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>>;
+    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;
+        };
+    }, "_">;
+    private readonly _popover;
+    private readonly _field;
+    private readonly _customEditableInput;
+    private _customEditableSub?;
+    /**
+     * Options for the popover.
+     */
+    readonly popoverOptions: _angular_core.InputSignal<PopoverOptions>;
+    protected readonly appliedPopoverOptions: Signal<PopoverOptions>;
+    /**
+     * The available options to choose from. They can either be
+     * * A list of {@link NgnItem} objects
+     * * A list of plain objects. You'll have to provide a {@link fields} input to specify how to map the plain objects to {@link NgnItem} objects.
+     */
+    readonly options: _angular_core.InputSignal<readonly NgnItem<unknown, V>[]>;
+    /**
+     * Accepts a boolean value that determines whether the filter is enabled.
+     * Alternatively, you can provide `SelectFilterOptions` to customize the filter behavior.
+     * @default `false`
+     */
+    readonly filter: _angular_core.InputSignal<boolean | SelectFilterOptions<NgnItem<unknown, V>>>;
+    /**
+     * Manually set the filter text.
+     */
+    readonly filterText: _angular_core.InputSignal<string | null>;
+    /**
+     * The icon to display in the filter input.
+     */
+    readonly iconFilter: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * The icon to display in the dropdown.
+     */
+    readonly iconDropdown: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Whether the select is virtualized.
+     * @default `false`
+     */
+    readonly virtual: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When {@link virtual} is enabled, this property defines the height of each item in the list.
+     */
+    readonly itemHeight: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Enable this to allow the user to type in a value that is not in the list.
+     * When enabled, the value of the control becomes the label of a selected item or the typed value.
+     *
+     * Cannot be used with
+     * * {@link multiple} selection
+     * * {@link filter} without also setting {@link editableAutoFilter} to `false`
+     *
+     * @default `false`
+     */
+    readonly editable: _angular_core.InputSignal<Editable | undefined>;
+    /**
+     * Whether to automatically filter the options based on the user's input in the {@link editable} input.
+     * @default `true`
+     */
+    readonly editableAutoFilter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable this to allow the user to select multiple values.
+     * When enabled, the value of the control becomes an array of selected items.
+     *
+     * This is only applicable when {@link editable} is `false`.
+     * @default `false`
+     */
+    readonly multiple: _angular_core.InputSignal<Multiple | undefined>;
+    /**
+     * Whether to scroll to the selected item when the dropdown is opened.
+     * @default `true`
+     */
+    readonly scrollToSelectedItemOnOpen: _angular_core.InputSignal<boolean | ScrollLogicalPosition>;
+    /**
+     * Tabindex for the select control.
+     * @default `0`
+     */
+    readonly tabindex: _angular_core.InputSignal<number>;
+    /**
+     * 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>;
+    protected readonly maybeCallback: typeof maybeCallback;
+    private readonly _listbox;
+    private _userChangedEditableInput;
+    protected get anchorElement(): HTMLElement;
+    protected readonly filterTextInternal: _angular_core.WritableSignal<string | null>;
+    protected readonly currentHighlightedValue: _angular_core.WritableSignal<V | null>;
+    protected readonly valueStr: Signal<(ValueType<V, Editable, Multiple> & string) | null>;
+    protected readonly valueArray: Signal<(ValueType<V, Editable, Multiple> & any[]) | NonNullable<ValueType<V, Editable, Multiple>>[]>;
+    protected readonly appliedFilter: Signal<FilterConfig<NgnItem> | boolean>;
+    private readonly _flatOptions;
+    protected readonly selectedItems: Signal<(NgnItem<any, any> | undefined)[]>;
+    protected readonly selectedItemsValues: Signal<any[]>;
+    constructor();
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onPopoverClosed(): void;
+    protected onSelect(value: ValueType<V, false, Multiple> | null): void;
+    protected onItemClicked(): void;
+    /**
+     * Shows the select dropdown.
+     */
+    show(): void;
+    /**
+     * Hides the select dropdown.
+     */
+    hide(): void;
+    protected onEditableChange(value: string | null): void;
+    protected potentiallyBlurred(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSelect<any, any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSelect<any, any, any>, "ngn-select", never, { "popoverOptions": { "alias": "popoverOptions"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; "iconFilter": { "alias": "iconFilter"; "required": false; "isSignal": true; }; "iconDropdown": { "alias": "iconDropdown"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editableAutoFilter": { "alias": "editableAutoFilter"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "scrollToSelectedItemOnOpen": { "alias": "scrollToSelectedItemOnOpen"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; }, {}, ["_customEditableInput"], ["[ngnInput]"], true, never>;
+}
+
+export { NgnSelect };
+export type { SelectFilterFn, SelectFilterOptions, SelectFilterOptionsInternal };

package/types/ngneers-controls-slider.d.ts

@@ -0,0 +1,57 @@
+import * as _angular_core from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ValueControlBase } from '@ngneers/controls/base';
+import { NgnDragInfo } from '@ngneers/controls/directives';
+
+/**
+ * @category control
+ */
+declare class NgnSlider extends ValueControlBase<'slider', number> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"slider", ["root", "horizontal", "vertical", "track", "thumb", "fill", "invalid"], readonly []>>;
+    private readonly _track;
+    /**
+     * The minimum value of the slider.
+     * @default 0
+     */
+    readonly min: _angular_core.InputSignal<number>;
+    /**
+     * Whether the slider is oriented vertically instead of horizontally.
+     * @default false
+     */
+    readonly vertical: _angular_core.InputSignal<boolean>;
+    /**
+     * The maximum value of the slider.
+     * @default 100
+     */
+    readonly max: _angular_core.InputSignal<number>;
+    /**
+     * The increment between selectable values.
+     * @default 1
+     */
+    readonly step: _angular_core.InputSignal<number>;
+    /**
+     * The value text representation for accessibility.
+     * If both {@link valueText} and {@link valueTextFn} are provided, {@link valueText} takes precedence.
+     */
+    readonly valueText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * A function that generates the value text representation for accessibility.
+     * If both {@link valueText} and {@link valueTextFn} are provided, {@link valueText} takes precedence.
+     */
+    readonly valueTextFn: _angular_core.InputSignal<((value: number) => string) | undefined>;
+    protected readonly left: _angular_core.Signal<number>;
+    constructor();
+    protected readonly valueTextValue: _angular_core.Signal<string | null>;
+    protected onDragged(delta: NgnDragInfo): void;
+    private dragToPosition;
+    private clampValue;
+    protected onDragEnd(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected thumbClicked(event: PointerEvent): void;
+    protected trackClicked(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSlider, "ngn-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "valueTextFn": { "alias": "valueTextFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnSlider };