@ngneers/controls 0.0.1-pre1 → 0.0.1-pre3

package/types/ngneers-controls-input-field.d.ts

@@ -0,0 +1,159 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } 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 { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnInputField extends NgnBase<'inputField'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            selectYear: 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;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            clear: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: 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;
+        };
+        drawer: {
+            close: string;
+        };
+    }, "_">;
+    private readonly _parentInputfield;
+    protected readonly hasParentInputfield: boolean;
+    /**
+     * Label for the input field
+     * @default null
+     */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /**
+     * Sets the `aria-labelledby` attribute on the input element
+     * @default null
+     */
+    readonly labelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * The kind of label presentation
+     * @todo add link to custom kind documentation subsection label
+     * @default undefined
+     */
+    readonly labelKind: _angular_core.InputSignal<unknown>;
+    /**
+     * ID for the input element
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /**
+     * Show clear button
+     * @default false
+     */
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Custom icon for the clear button. Use with `showClearButton`.
+     */
+    readonly iconClearButton: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Tabindex for the input field itself.
+     * When another focusable (input) element is present inside the input field, this should be set to -1.
+     * @default -1
+     */
+    readonly tabindex: _angular_core.InputSignal<number>;
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Explicitly apply readonly state styling
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Explicitly apply disabled state styling
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly _ngnInput;
+    constructor();
+    protected clicked(event: MouseEvent): void;
+    protected clearButtonClicked(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnInputField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnInputField, "ngn-input-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "labelKind": { "alias": "labelKind"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "iconClearButton": { "alias": "iconClearButton"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["_ngnInput"], ["input, textarea", "*"], true, never>;
+}
+
+declare const INPUT_FIELD: InjectionToken<NgnInputField>;
+
+export { INPUT_FIELD, NgnInputField };

package/types/ngneers-controls-input-mask.d.ts

@@ -0,0 +1,83 @@
+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 { NgnBase } from '@ngneers/controls/base';
+
+type InputMaskCfgEntry = {
+    placeholder: string;
+    accepts: RegExp;
+    default: string;
+};
+type InputMaskCfg = (InputMaskCfgEntry | string)[];
+
+/**
+ * @category control
+ */
+declare class NgnInputMask extends NgnBase<'inputMask'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input-mask", ["root", "mask", "mask-placeholder", "mask-text"], readonly [_ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>, _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    /**
+     * The mask to apply to the input. Can be a predefined mask key, a custom mask configuration, or a string pattern.
+     */
+    readonly mask: _angular_core.InputSignal<string | InputMaskCfg | null>;
+    private readonly _ngnInput;
+    private readonly _inputElement;
+    constructor();
+    private readonly _maskHelper;
+    protected onInput(event: Event): void;
+    protected readonly currentInputValue: _angular_core.WritableSignal<string>;
+    private readonly _mask;
+    protected readonly maskWatermark: _angular_core.Signal<string | null>;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onBeforeInput(event: Event): void;
+    private _updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnInputMask, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnInputMask, "ngn-input-mask", never, { "mask": { "alias": "mask"; "required": false; "isSignal": true; }; }, {}, ["_ngnInput"], ["*"], true, never>;
+}
+
+declare const MASKS: {
+    readonly time: [{
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "H";
+    }, {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "H";
+    }, ":", {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "M";
+    }, {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "M";
+    }];
+    readonly timeSeconds: [{
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "H";
+    }, {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "H";
+    }, ":", {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "M";
+    }, {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "M";
+    }, ":", {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "S";
+    }, {
+        readonly accepts: RegExp;
+        readonly default: "0";
+        readonly placeholder: "S";
+    }];
+};
+
+export { MASKS, NgnInputMask };
+export type { InputMaskCfg, InputMaskCfgEntry };

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

@@ -0,0 +1,27 @@
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import * as _angular_core from '@angular/core';
+import { AfterViewInit } from '@angular/core';
+import { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnInput extends NgnBase<'input'> implements AfterViewInit {
+    protected readonly hasParentInputfield: _angular_core.WritableSignal<boolean>;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    protected readonly inputFieldTheme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate>;
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly value: _angular_core.ModelSignal<string | null>;
+    private readonly _input;
+    ngAfterViewInit(): void;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnInput, "input[ngnInput], textarea[ngnInput]", never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { NgnInput };

package/types/ngneers-controls-item-view.d.ts

@@ -0,0 +1,211 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, AfterViewInit } from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+import { IconType } from '@ngneers/controls-custom-types';
+
+type OverflowStrategy = 'start' | 'end' | 'center' | 'aroundIndex';
+
+type ItemOverflowLocation = 'start' | 'end' | 'center';
+type OverflowOrderEntry = {
+    index: number;
+    location: ItemOverflowLocation;
+};
+type OverflowOrder = readonly OverflowOrderEntry[];
+
+declare abstract class ItemViewTemplates<T> extends NgnBase<'itemView'> {
+    /**
+     * The template to be used for rendering each item in the item view.
+     * Can also be set using the `item` content child.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<Partial<{
+        $implicit: T;
+        index: number;
+        last: boolean;
+        first: boolean;
+    }>> | null>;
+    private readonly _userItemTemplate;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<Partial<{
+        $implicit: T;
+        index: number;
+        last: boolean;
+        first: boolean;
+    }>> | null>;
+    private readonly _defaultSeparatorTemplate;
+    private readonly _userSeparatorTemplate;
+    /**
+     * Set a custom template for the separators of the breadcrumb.
+     * Can also be set using an `<ng-template>` element with `#separator` template reference variable.
+     */
+    readonly templateSeparator: _angular_core.InputSignal<TemplateRef<{
+        $implicit: {
+            icon?: IconType;
+            character?: string;
+        };
+    }> | null>;
+    protected readonly separatorTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: {
+            icon?: IconType;
+            character?: string;
+        };
+    }>>;
+    private readonly _defaultOverflowItemTemplate;
+    private readonly _userOverflowItemTemplate;
+    /**
+     * Set a custom template for the overflow item.
+     * Can also be set using an `<ng-template>` element with `#overflow` template reference variable.
+     */
+    readonly templateOverflow: _angular_core.InputSignal<TemplateRef<{
+        $implicit: {
+            totalCount: number;
+            overflowCount: number;
+            overflowItems: T[];
+        };
+    }> | null>;
+    protected readonly overflowTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: {
+            totalCount: number;
+            overflowCount: number;
+            overflowItems: T[];
+        };
+    }>>;
+    /**
+     * Template types for the item-view.
+     * Can be used with the {@link NgnTemplate} directive for type safe ng-templates.
+     */
+    readonly templateTypes: {
+        item: {
+            $implicit: T;
+            index: number;
+            last: boolean;
+            first: boolean;
+        };
+        separator: {
+            $implicit: {
+                icon?: IconType;
+                character?: string;
+            };
+        };
+        overflow: {
+            $implicit: {
+                totalCount: number;
+                overflowCount: number;
+                overflowItems: T[];
+            };
+        };
+    } & {
+        $implicit: {
+            item: Partial<{
+                $implicit: T;
+                index: number;
+                last: boolean;
+                first: boolean;
+            }>;
+            separator: Partial<{
+                $implicit: {
+                    icon?: IconType;
+                    character?: string;
+                };
+            }>;
+            overflow: Partial<{
+                $implicit: {
+                    totalCount: number;
+                    overflowCount: number;
+                    overflowItems: T[];
+                };
+            }>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemViewTemplates<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ItemViewTemplates<any>, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateSeparator": { "alias": "templateSeparator"; "required": false; "isSignal": true; }; "templateOverflow": { "alias": "templateOverflow"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userSeparatorTemplate", "_userOverflowItemTemplate"], never, true, never>;
+}
+
+type RenderItem<T> = {
+    id: string | number;
+    kind: 'visibleItem';
+    item: T;
+} | {
+    id: string | number;
+    kind: 'overflowItem';
+    location: ItemOverflowLocation;
+    item: T;
+} | {
+    id: string;
+    kind: 'overflowIndicator';
+    visible: boolean;
+    items: T[];
+    hasSeparator: boolean;
+};
+/**
+ * @category control
+ */
+declare class NgnItemView<T extends object, IdField extends keyof T> extends ItemViewTemplates<T> implements AfterViewInit {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    /**
+     * The key of the id property in the item object. This is used to track items in the template.
+     */
+    readonly idField: _angular_core.InputSignal<IdField>;
+    /**
+     * The items to be displayed in the item view.
+     * This is a required input and should be an array of items of type {@link T}.
+     */
+    readonly items: _angular_core.InputSignal<readonly T[]>;
+    /**
+     * A separator string (character) to be displayed between items. Set `true` for `,` or provide a custom string.
+     */
+    readonly separator: _angular_core.InputSignal<string | true | undefined>;
+    /**
+     * A separator icon to be displayed between items.
+     */
+    readonly iconItemSeparator: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Strategy to use when there are more items than can be displayed in the available space.
+     * The value determines where the items should start to overflow.
+     * @default 'end'
+     */
+    readonly overflowStrategy: _angular_core.InputSignal<OverflowStrategy>;
+    /**
+     * The amount of items to keep visible after or before overflowing, depending on the {@link overflowStrategy}.
+     * @default 0
+     */
+    readonly overflowStrategyFreezeCount: _angular_core.InputSignal<number>;
+    /**
+     * Index of the item to be used as the overflow indicator when using the 'aroundIndex' overflow strategy.
+     * This input is only relevant when the {@link overflowStrategy} is set to 'aroundIndex'.
+     * @default 0
+     */
+    readonly overflowStrategyIndex: _angular_core.InputSignal<number>;
+    /**
+     * Set this to `true` for greatly improving performance when all items have the same width.
+     * Especially true for large lists of items.
+     *
+     * ⚠️ This reduces the accessibility of the control as screen
+     * readers will not be able to determine the number of hidden items and keyboard users cannot directly
+     * navigate to them. Use this only for potentially very large lists (with items of identical width) where users will not
+     * need to access overflowed items directly.
+     * @default false
+     */
+    readonly sameWidthItems: _angular_core.InputSignal<boolean>;
+    private readonly _themeGap;
+    private readonly _isBrowser;
+    protected readonly separatorChar: _angular_core.Signal<string | undefined>;
+    private readonly _enableSizeMeasuring;
+    private readonly _renderedItemRefs;
+    private readonly _firstItemRef;
+    private readonly _firstItemWidth;
+    private readonly _renderedItemSizes;
+    private readonly _renderedItemWidths;
+    private readonly _containerSize;
+    private readonly _overflowItemRef;
+    private readonly _overflowItemSize;
+    protected readonly itemOverflowCheckOrder: _angular_core.Signal<OverflowOrder>;
+    protected readonly renderedItems: _angular_core.Signal<RenderItem<T>[]>;
+    protected readonly maxWidth: _angular_core.Signal<number>;
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnItemView<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnItemView<any, any>, "ngn-item-view", never, { "idField": { "alias": "idField"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "iconItemSeparator": { "alias": "iconItemSeparator"; "required": false; "isSignal": true; }; "overflowStrategy": { "alias": "overflowStrategy"; "required": false; "isSignal": true; }; "overflowStrategyFreezeCount": { "alias": "overflowStrategyFreezeCount"; "required": false; "isSignal": true; }; "overflowStrategyIndex": { "alias": "overflowStrategyIndex"; "required": false; "isSignal": true; }; "sameWidthItems": { "alias": "sameWidthItems"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnItemView };
+export type { OverflowStrategy };