@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1,98 @@
+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 { NgnBase } from '@ngneers/controls/base';
+
+type ContentTemplateType = {
+    $implicit: {
+        close: () => void;
+    };
+};
+
+declare abstract class InplaceTemplates extends NgnBase<'inplace'> {
+    private readonly _userDisplayTemplate;
+    /**
+     * Set a custom template for the display.
+     * Can also be set using an `<ng-template>` element with `#display` template reference variable.
+     */
+    readonly templateDisplay: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly displayTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    /**
+     * Context for the display template.
+     */
+    readonly templateDisplayContext: _angular_core.InputSignal<unknown>;
+    private readonly _userContentTemplate;
+    /**
+     * Set a custom template for the content.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    readonly templateContent: _angular_core.InputSignal<TemplateRef<ContentTemplateType> | null>;
+    protected readonly contentTemplate: _angular_core.Signal<TemplateRef<ContentTemplateType> | null>;
+    /**
+     * Context for the content template.
+     */
+    readonly templateContentContext: _angular_core.InputSignal<unknown>;
+    /**
+     * Types for the inplace templates.
+     */
+    readonly templateTypes: {
+        /**
+         * Type of the template variable for the content template.
+         */
+        content: ContentTemplateType;
+    } & {
+        $implicit: {
+            content: Partial<ContentTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InplaceTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InplaceTemplates, never, never, { "templateDisplay": { "alias": "templateDisplay"; "required": false; "isSignal": true; }; "templateDisplayContext": { "alias": "templateDisplayContext"; "required": false; "isSignal": true; }; "templateContent": { "alias": "templateContent"; "required": false; "isSignal": true; }; "templateContentContext": { "alias": "templateContentContext"; "required": false; "isSignal": true; }; }, {}, ["_userDisplayTemplate", "_userContentTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnInplace extends InplaceTemplates {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"inplace", ["root", "content", "display", "disabled"], readonly []>>;
+    protected readonly closeContent: () => void;
+    private readonly _displayTrigger;
+    private readonly _contentRef;
+    constructor();
+    /**
+     * Controls the visibility of the content.
+     */
+    readonly contentVisible: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the content is loaded lazily.
+     * @default true
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the content is cached when closed.
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Explicitly apply disabled state styling
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Switches to the content view.
+     */
+    switchToContent(): void;
+    /**
+     * Switches to the display view.
+     */
+    switchToDisplay(): void;
+    /**
+     * Toggles between the display and content views.
+     */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnInplace, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnInplace, "ngn-inplace", never, { "contentVisible": { "alias": "contentVisible"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "contentVisible": "contentVisibleChange"; }, never, never, true, never>;
+}
+
+export { NgnInplace };
+export type { ContentTemplateType };

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

@@ -0,0 +1,248 @@
+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 * 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 [{
+        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;
+        };
+    }, "_">;
+    /**
+     * 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. Defaults to a generated id.
+     */
+    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 {@link showClearButton}.
+     * @default undefined
+     */
+    readonly iconClearButton: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | 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 _projectedControls;
+    /**
+     * The projected primary control (input, mask, calendar, …), used to delegate
+     * pointer focus, clearing and stepping. Auxiliary controls inside the field
+     * (buttons, icons, spin buttons, …) are skipped via `isFieldControl`, so
+     * their placement/order never shadows the actual input.
+     */
+    readonly control: _angular_core.Signal<NgnBase<never> | undefined>;
+    /** The primary control's element when it is a native input/textarea. */
+    private readonly _inputElement;
+    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; }; }, {}, ["_projectedControls"], ["input, textarea", "*"], true, never>;
+}
+
+export { NgnInputField };

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

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+import { 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';
+
+/**
+ * @category control
+ */
+declare class NgnInput extends NgnBase<'input'> implements AfterViewInit {
+    readonly isFieldControl = true;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>>;
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The current value of the input, kept in sync with the native element in both directions.
+     * @default ''
+     */
+    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]", ["ngnInput"], { "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,215 @@
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import { IconType } from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+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';
+
+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 between items.
+     * 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 []>>;
+    /**
+     * 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<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | 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.
+     *
+     * Only the first item is measured and its width is assumed for all others, instead
+     * of measuring every rendered item. The rendered structure is unchanged — overflowed
+     * items are still emitted as `role="listitem"` and the overflow indicator still shows
+     * the hidden count — so accessibility is unaffected. The tradeoff is correctness:
+     * if items are *not* actually the same width, the visible/overflow split will be wrong.
+     * @default false
+     */
+    readonly sameWidthItems: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    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>[]>;
+    /** Full content width as `px`; `null` until measured (respects sameWidthItems optimization). */
+    protected readonly contentWidthPx: _angular_core.Signal<string | null>;
+    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 };