@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1,202 @@
+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 NgnChip extends NgnBase<'chip'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"chip", ["root", "closable", "actionable", "content", "close-button", "close-icon", `color-${string}`], readonly []>>;
+    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;
+        };
+    }, "_">;
+    /**
+     * Set whether the chip can be closed (removed).
+     * @default false
+     */
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Set whether the chip is actionable (can be clicked).
+     * @default false
+     */
+    readonly actionable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Set a custom icon for the close button.
+     */
+    readonly iconClose: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Emitted when the chip is closed (removed).
+     */
+    readonly closed: _angular_core.OutputEmitterRef<Event>;
+    /**
+     * Emitted when the chip is clicked.
+     */
+    readonly clicked: _angular_core.OutputEmitterRef<Event>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnChip, "ngn-chip", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "actionable": { "alias": "actionable"; "required": false; "isSignal": true; }; "iconClose": { "alias": "iconClose"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+export { NgnChip };

package/types/ngneers-controls-default-icons.d.ts

@@ -0,0 +1,5 @@
+import { NgnFeature } from '@ngneers/controls/api/ng';
+
+declare function withDefaultIcons(): NgnFeature;
+
+export { withDefaultIcons };

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

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnDefer<T> extends NgnBase<null> {
+    protected readonly theme: null;
+    /**
+     * Template to render lazily. When omitted, the projected content
+     * (`ng-content`) is rendered instead.
+     */
+    readonly lazyContent: _angular_core.InputSignal<TemplateRef<T> | null | undefined>;
+    /**
+     * Context object passed to {@link lazyContent} when it is rendered.
+     * @default null
+     */
+    readonly lazyContentContext: _angular_core.InputSignal<T | null>;
+    /**
+     * Whether the deferred content is currently open (shown).
+     * @default false
+     */
+    readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to defer rendering until first opened. When `false`, the content is
+     * rendered immediately regardless of {@link open}.
+     * @default true
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to keep the content rendered after it has been opened once, rather
+     * than tearing it down when {@link open} becomes `false`.
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the host is visually hidden (but kept in the DOM) while closed.
+     * @default true
+     */
+    readonly hiddenOnClosed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly hasBeenOpened: _angular_core.WritableSignal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnDefer<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnDefer<any>, "ngn-defer", never, { "lazyContent": { "alias": "lazyContent"; "required": false; "isSignal": true; }; "lazyContentContext": { "alias": "lazyContentContext"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; "hiddenOnClosed": { "alias": "hiddenOnClosed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { NgnDefer };

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

@@ -0,0 +1,399 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Type, Injector } from '@angular/core';
+import { Observable } from 'rxjs';
+import { NgnActionButtonConfig } from '@ngneers/controls/api';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import { CloseBy, Openable } from '@ngneers/controls/api/ng';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+
+declare abstract class PromptDialogBase<D, ButtonValues> {
+    /**
+     * Injected by the hosting dialog to resolve the prompt. Carries the button value that
+     * triggered the prompt and the callback used to report the result back to the dialog.
+     * You typically do not set this yourself; call `fulfilPrompt` from your subclass instead.
+     */
+    readonly ngnPromptDialogResolveFn: _angular_core.InputSignal<{
+        fn: (value: D | null) => void;
+        button: ButtonValues;
+    } | undefined>;
+    constructor();
+    protected fulfilPrompt(data?: D): void;
+    protected abstract onDialogButtonClicked(button: ButtonValues): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PromptDialogBase<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PromptDialogBase<any, any>, "ng-component", never, { "ngnPromptDialogResolveFn": { "alias": "ngnPromptDialogResolveFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type DialogSize = {
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    height?: string;
+};
+type DialogConfig<T, Buttons extends NgnActionButtonConfig<T extends PromptDialogBase<any, infer B> ? B : unknown>[]> = {
+    title?: string;
+    size?: DialogSize;
+    modal?: boolean;
+    closeBy?: CloseBy;
+    footerButtons?: Buttons;
+    content?: string | TemplateRef<unknown> | Type<T>;
+    movable?: boolean;
+    resizable?: boolean;
+};
+
+type DialogHandle<T, Buttons extends NgnActionButtonConfig<T extends PromptDialogBase<any, infer B> ? B : unknown>[]> = {
+    close: () => void;
+    updateConfig: (config: Partial<DialogConfig<T, Buttons>>) => void;
+    buttonClicked: Observable<Buttons[number]['value'] | null>;
+};
+type PromptDialogHandle<T, Buttons extends NgnActionButtonConfig<T extends PromptDialogBase<any, infer B> ? B : unknown>[]> = {
+    close: () => void;
+    updateConfig: (config: Partial<DialogConfig<T, Buttons>>) => void;
+    result: Promise<{
+        value: T extends PromptDialogBase<infer D, Buttons> ? D : never | null;
+        button: Buttons[number]['value'] | null;
+    }>;
+};
+declare function createDialog<T, Buttons extends NgnActionButtonConfig<T extends PromptDialogBase<any, infer B> ? B : unknown>[]>(injector: Injector, config: DialogConfig<T, Buttons>): T extends PromptDialogBase<any, any> ? PromptDialogHandle<T, Buttons> : DialogHandle<T, Buttons>;
+
+declare abstract class DialogTemplates<T> extends NgnBase<'dialog'> {
+    private readonly _userContentTemplate;
+    /**
+     * The content of the dialog.
+     * Can be a string, a component type, or a template reference.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    readonly content: _angular_core.InputSignal<string | TemplateRef<unknown> | Type<T> | null>;
+    protected readonly contentTemplate: _angular_core.Signal<string | TemplateRef<unknown> | Type<T> | null>;
+    private readonly _defaultHeaderTemplate;
+    private readonly _userHeaderTemplate;
+    /**
+     * Set a custom template for the header of the dialog.
+     * Can also be set using an `<ng-template>` element with `#header` template reference variable.
+     */
+    readonly templateHeader: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly headerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    private readonly _defaultFooterTemplate;
+    private readonly _userFooterTemplate;
+    /**
+     * Set a custom template for the footer of the dialog.
+     * Can also be set using an `<ng-template>` element with `#footer` template reference variable.
+     */
+    readonly templateFooter: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly footerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * Types for the dialog templates.
+     */
+    readonly templateTypes: {
+        header: {
+            headerId: string;
+            title: string | null;
+        };
+    } & {
+        $implicit: {
+            header: Partial<{
+                headerId: string;
+                title: string | null;
+            }>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogTemplates<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogTemplates<any>, never, never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "templateHeader": { "alias": "templateHeader"; "required": false; "isSignal": true; }; "templateFooter": { "alias": "templateFooter"; "required": false; "isSignal": true; }; }, {}, ["_userContentTemplate", "_userHeaderTemplate", "_userFooterTemplate"], never, true, never>;
+}
+
+type TypedContent = {
+    template?: TemplateRef<unknown>;
+    string?: string;
+    component?: Type<unknown>;
+};
+/**
+ * @category control
+ */
+declare class NgnDialog<T, Buttons extends NgnActionButtonConfig<T extends PromptDialogBase<any, infer B> ? B : unknown>[]> extends DialogTemplates<T> implements Openable {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"dialog", ["root", "modal", "header", "default-header", "content", "footer", "default-footer", "close-button"], readonly [{
+        readonly class: "movable";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"movable", ["root", "movable", "moved", "drag-handle-grab", "drag-handle-grabbing"], 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;
+        };
+    }, "_">;
+    protected readonly headerId: string;
+    private readonly _dialogElement;
+    /**
+     * Shows or hides the dialog.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     * @default true
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * When `true`, the content will be loaded lazily when the dialog is opened for the first time.
+     * Only applies when using a template for the content.
+     * @default false
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When {@link lazy} is `true`, setting this to `true` will cache the content after the first load.
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When `true`, the dialog will be shown as a modal dialog making the background content non-interactable.
+     * @default false
+     */
+    readonly modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When `true`, the dialog will automatically receive focus when opened.
+     * @default modal()
+     */
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    /**
+     * The title of the dialog. Displayed in the default header template.
+     */
+    readonly title: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * Determines how the dialog can be closed by the user.
+     * - `'any'` - The dialog can be closed by clicking outside the dialog or pressing the Escape key.
+     * - `'escape'` - The dialog can only be closed by pressing the Escape key.
+     * - `'none'` - The dialog cannot be closed by user interaction. It can only be closed programmatically.
+     * @default 'any'
+     */
+    readonly closeBy: _angular_core.InputSignal<CloseBy>;
+    /**
+     * The size of the dialog. You can set any CSS size value (e.g. `300px`, `50%`, `auto`, `min-content`, etc.) for each property.
+     */
+    readonly size: _angular_core.InputSignal<DialogSize>;
+    /**
+     * Action buttons to be displayed in the footer of the dialog.
+     */
+    readonly footerButtons: _angular_core.InputSignal<Buttons | undefined>;
+    /**
+     * Whether the dialog is movable by dragging its header.
+     * @default false
+     */
+    readonly movable: _angular_core.InputSignal<boolean | "" | null | undefined>;
+    /**
+     * Whether the dialog is resizable.
+     * @default false
+     */
+    readonly resizable: _angular_core.InputSignal<boolean | "" | null | undefined>;
+    /**
+     * The result of the dialog, which is the `value` of the button that was clicked to close the dialog or null.
+     */
+    readonly buttonClicked: _angular_core.OutputEmitterRef<Buttons[number]["value"] | null>;
+    /**
+     * Emits when the dialog has fully closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when a prompt dialog resolves. Carries the value produced by the prompt content
+     * and the {@link footerButtons} value that triggered it, or `null` for both when cancelled.
+     */
+    readonly promptResult: _angular_core.OutputEmitterRef<{
+        value: (T extends PromptDialogBase<infer D, Buttons[number]["value"]> ? D : never) | null;
+        button: Buttons[number]["value"] | null;
+    }>;
+    private readonly _latestClickedButtonValue;
+    protected readonly contentComponentInputs: _angular_core.Signal<{
+        ngnPromptDialogResolveFn?: undefined;
+    } | {
+        ngnPromptDialogResolveFn: {
+            button: Buttons[number]["value"];
+            fn: (result: T extends PromptDialogBase<infer D, Buttons[number]["value"]> ? D : never) => void;
+        };
+    }>;
+    /**
+     * How a modal dialog can be closed by the user.
+     */
+    protected readonly modalClosedBy: _angular_core.Signal<"any" | "none" | "closerequest">;
+    /**
+     * How a popover dialog can be closed by the user.
+     */
+    protected readonly popoverClosedBy: _angular_core.Signal<"auto" | "manual">;
+    protected readonly isFullyClosed: _angular_core.WritableSignal<boolean>;
+    protected readonly typedContent: _angular_core.Signal<TypedContent>;
+    constructor();
+    /**
+     * Different cancel handlers for different event types. Required for modal and popover dialogs.
+     */
+    protected onCancel(event?: ToggleEvent | KeyboardEvent): void;
+    private setStateToClosed;
+    private cancelPrompt;
+    protected closeWithButton(): void;
+    /**
+     * Opens the dialog. Alternatively, you can also set the `open` input to `true`.
+     */
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    protected singleButtonTypeFix(button: unknown): Buttons[number];
+    protected buttonClick(button: Buttons[number]['value']): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnDialog<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnDialog<any, any>, "ngn-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closeBy": { "alias": "closeBy"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "movable": { "alias": "movable"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "buttonClicked": "buttonClicked"; "closed": "closed"; "promptResult": "promptResult"; }, never, ["*"], true, never>;
+}
+
+export { NgnDialog, PromptDialogBase, createDialog };
+export type { DialogConfig, DialogHandle, DialogSize, PromptDialogHandle };