@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1,118 @@
+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, 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';
+
+declare abstract class TabsTemplates extends NgnBase<'tabs'> {
+    private readonly _userHeaderLeftTemplate;
+    /**
+     * Set a custom template for the left side of the tabs header.
+     * Can also be set using an `<ng-template>` element with `#headerLeft` template reference variable.
+     */
+    readonly templateHeaderLeft: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly headerLeftTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    private readonly _userHeaderRightTemplate;
+    /**
+     * Set a custom template for the right side of the tabs header.
+     * Can also be set using an `<ng-template>` element with `#headerRight` template reference variable.
+     */
+    readonly templateHeaderRight: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly headerRightTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabsTemplates, never, never, { "templateHeaderLeft": { "alias": "templateHeaderLeft"; "required": false; "isSignal": true; }; "templateHeaderRight": { "alias": "templateHeaderRight"; "required": false; "isSignal": true; }; }, {}, ["_userHeaderLeftTemplate", "_userHeaderRightTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnTabs extends TabsTemplates implements AfterViewInit {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"tabs", ["root", "headers-container", "headers", "header", "header-active", "header-active-indicator", "scroll-left", "scroll-right", "content"], readonly []>>;
+    /**
+     * Whether to lazy load the tab contents when they become visible.
+     * @default false
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to cache the tab contents. Only applies to {@link lazy} loaded tabs.
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Get or set the active tab ID.
+     */
+    readonly activeTab: _angular_core.ModelSignal<string>;
+    /**
+     * Icon for the left scroll button.
+     */
+    readonly iconScrollLeft: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Icon for the right scroll button.
+     */
+    readonly iconScrollRight: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    protected readonly isFirstRender: _angular_core.WritableSignal<boolean>;
+    protected readonly elementId: string;
+    protected readonly indicatorWidth: _angular_core.WritableSignal<number>;
+    protected readonly indicatorLeft: _angular_core.WritableSignal<number>;
+    private readonly _tabs;
+    private readonly _tabList;
+    private readonly _tabListScrollDirective;
+    private readonly _tabListScroll;
+    private readonly _tabListSize;
+    private readonly _renderedTabHeaders;
+    private readonly _headerElements;
+    private readonly _headerSizes;
+    protected readonly headers: _angular_core.Signal<{
+        id: string;
+        template: _angular_core.TemplateRef<unknown> | undefined;
+    }[]>;
+    protected readonly contents: _angular_core.Signal<{
+        id: string;
+        template: _angular_core.TemplateRef<unknown> | undefined;
+    }[]>;
+    /**
+     * Inter-header gap (theme-defined — e.g. shade renders the header row as a padded tray with a
+     * `gap` between pills). Read from the resolved column-gap and re-evaluated whenever the list
+     * resizes or its header set changes (covers theme swaps). Included in the width math below so
+     * overflow detection isn't thrown off by the spacing between headers.
+     */
+    private readonly _platform;
+    private readonly _headerGap;
+    private readonly _totalTabsWidth;
+    protected readonly tabsOverflowingRight: _angular_core.Signal<boolean>;
+    protected readonly tabsOverflowingLeft: _angular_core.Signal<boolean>;
+    constructor();
+    ngAfterViewInit(): void;
+    protected selectTab(tabId: string): void;
+    protected handleTabKeyPress(event: KeyboardEvent, tabId: string): void;
+    private ensureTabHeaderIsScrolledIntoView;
+    private calculateHeaderSliceWidth;
+    private getCutOffTabHeaders;
+    protected scrollHeaders(direction: 'left' | 'right'): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnTabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnTabs, "ngn-tabs", never, { "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "iconScrollLeft": { "alias": "iconScrollLeft"; "required": false; "isSignal": true; }; "iconScrollRight": { "alias": "iconScrollRight"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["_tabs"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnTab extends NgnBase<'tabs'> {
+    protected readonly theme: null;
+    /**
+     * The unique identifier for the tab.
+     */
+    readonly tabId: _angular_core.InputSignal<string>;
+    /**
+     * Useful for accessing the {@link tabId} in a safe way, without worrying about timing.
+     */
+    readonly safeTabId: _angular_core.WritableSignal<string | null>;
+    readonly content: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    readonly header: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnTab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnTab, "ngn-tab", never, { "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, {}, ["content", "header"], never, true, never>;
+}
+
+export { NgnTab, NgnTabs };

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

@@ -0,0 +1,21 @@
+import * as i0 from '@angular/core';
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+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 NgnTag extends NgnBase<'tag'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"tag", ["root", "content", "icon", `kind-${string}`, `color-${string}`], readonly []>>;
+    /**
+     * Set an icon to display before the text.
+     */
+    readonly icon: i0.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgnTag, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgnTag, "ngn-tag", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { NgnTag };

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

@@ -0,0 +1,298 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, InjectionToken, Provider, Injector, OnInit } from '@angular/core';
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import { CustomColor, IconType } from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+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';
+
+type HeaderTemplateType = {
+    header?: string;
+    closable: boolean;
+    closeToast: () => void;
+};
+type ContentTemplateType = {
+    content?: string;
+};
+type NgnToastOptionsMeta = {
+    closable?: boolean;
+    color?: CustomColor;
+    icon?: IconType;
+    autoHide?: number | false;
+};
+type NgnToastOptions = NgnToastOptionsMeta & {
+    header?: string;
+    content?: string;
+    headerTemplate?: TemplateRef<HeaderTemplateType>;
+    contentTemplate?: TemplateRef<ContentTemplateType>;
+};
+type NgnToastRef = {
+    hide: () => void;
+};
+
+type NgnToastFeature = {
+    providers: Provider[];
+};
+declare const NGN_TOAST_USER_DEFAULTS: InjectionToken<NgnToastOptionsMeta>;
+declare function withToasts(defaultOptions?: NgnToastOptionsMeta): NgnToastFeature;
+
+declare class ToastCreator {
+    private readonly _manager;
+    constructor();
+    show(options: NgnToastOptions): NgnToastRef;
+}
+declare function injectToastCreator(injector?: Injector): ToastCreator;
+
+/**
+ * Template inputs for {@link NgnToast}, extracted into a dedicated base class so the
+ * component itself stays focused on behavior.
+ */
+declare abstract class ToastTemplates extends NgnBase<'toast'> {
+    /** Custom template for the toast body, rendered in place of the plain `content` string. */
+    readonly templateContent: _angular_core.InputSignal<TemplateRef<ContentTemplateType> | null | undefined>;
+    /** Custom template for the toast header, rendered in place of the plain `header` string. */
+    readonly templateHeader: _angular_core.InputSignal<TemplateRef<HeaderTemplateType> | null | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToastTemplates, never, never, { "templateContent": { "alias": "templateContent"; "required": false; "isSignal": true; }; "templateHeader": { "alias": "templateHeader"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnToast extends ToastTemplates implements OnInit {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"toast", ["root", "host", "anim-enter", "anim-leave", "defaultHeader", "defaultHeaderText", "defaultContent", `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;
+        };
+    }, "_">;
+    private readonly _host;
+    /** The toast header text. For richer markup use {@link templateHeader} instead. */
+    readonly header: _angular_core.InputSignal<string | undefined>;
+    /** The toast body text. For richer markup use {@link templateContent} instead. */
+    readonly content: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Politeness of the live region used to announce the toast to assistive tech.
+     * When omitted, it is derived from {@link color}: `error`/`warning` announce as
+     * `assertive` (mapped to `role="alert"`), everything else as `polite`
+     * (`role="status"`).
+     */
+    readonly ariaLive: _angular_core.InputSignal<"polite" | "assertive" | "off" | undefined>;
+    /** Resolved live-region politeness — explicit {@link ariaLive} input, else derived from color. */
+    protected readonly liveMode: _angular_core.Signal<"polite" | "assertive" | "off">;
+    /** Landmark role paired with {@link liveMode} — `alert` when assertive, else `status`. */
+    protected readonly role: _angular_core.Signal<"status" | "alert">;
+    /** Icon to display alongside the toast content. */
+    readonly icon: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /** Icon for the close button. */
+    readonly iconClose: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Whether the toast renders a close button and can be dismissed by the user
+     * (e.g. via the close button or `Escape`).
+     * @default false
+     */
+    readonly closable: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Time in milliseconds before the toast auto-hides, or `false` to disable
+     * auto-hiding. The timer pauses while the toast is hovered or focused.
+     * @default 5000
+     */
+    readonly autoHide: _angular_core.InputSignal<number | false | undefined>;
+    /** Emitted when the toast is dismissed, whether by the user or the auto-hide timer. */
+    readonly closeToast: _angular_core.OutputEmitterRef<void>;
+    private _closeTimeout?;
+    private _remaining;
+    private _startedAt;
+    private _hovered;
+    private _focused;
+    private _regionPaused;
+    /** Element that had focus before the user moved into the toast; focus returns here on close. */
+    private _returnFocus;
+    ngOnInit(): void;
+    private startHideTimer;
+    private pauseHideTimer;
+    /**
+     * Pause the auto-hide timer while the toast is hovered, focused (a WCAG 2.2.1
+     * requirement so keyboard and screen-reader users can read it), or while the
+     * whole region holds focus, resuming once none holds.
+     */
+    private updatePause;
+    protected close(): void;
+    /** Return focus to the pre-toast element when it is dismissed while focused within. */
+    private restoreFocus;
+    /** Move DOM focus to the toast root (used by the region's roving/hotkey navigation). */
+    focus(): void;
+    /** Freeze the timer because the notification region as a whole holds focus. */
+    regionPause(): void;
+    /** Release the region-level freeze; resumes unless still hovered/focused. */
+    regionResume(): void;
+    protected onEscape(): void;
+    protected mouseEnter(): void;
+    protected mouseLeave(): void;
+    protected focusEnter(event: FocusEvent): void;
+    protected focusLeave(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnToast, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnToast, "ngn-toast", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconClose": { "alias": "iconClose"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "autoHide": { "alias": "autoHide"; "required": false; "isSignal": true; }; }, { "closeToast": "closeToast"; }, never, never, true, never>;
+}
+
+export { NGN_TOAST_USER_DEFAULTS, NgnToast, injectToastCreator, withToasts };
+export type { ContentTemplateType, HeaderTemplateType, NgnToastFeature, NgnToastOptions, NgnToastOptionsMeta, NgnToastRef };

package/types/ngneers-controls-toggle-button.d.ts

@@ -0,0 +1,48 @@
+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_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ValueControlBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnToggleButton extends ValueControlBase<'toggleButton', boolean> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"toggle-button", ["root", "invalid", "button", "label", "active", "placeholder", "placeholder-active"], readonly []>>;
+    /**
+     * Optional labels for on and off states.
+     * If not provided, the {@link label} input will be used.
+     */
+    readonly labelOn: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional labels for on and off states.
+     * If not provided, the {@link label} input will be used.
+     */
+    readonly labelOff: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional icon for the button. Can be used instead of the label or in combination with it.
+     * If {@link iconOn} and {@link iconOff} are provided, they will take precedence over this input for their respective states.
+     */
+    readonly icon: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Optional icons for on and off states.
+     * If not provided, the {@link icon} input will be used.
+     */
+    readonly iconOn: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Optional icons for on and off states.
+     * If not provided, the {@link icon} input will be used.
+     */
+    readonly iconOff: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * If true, the button will always have the width of the longest possible content.
+     * @default false
+     */
+    readonly fixedWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnToggleButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnToggleButton, "ngn-toggle-button", never, { "labelOn": { "alias": "labelOn"; "required": false; "isSignal": true; }; "labelOff": { "alias": "labelOff"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconOn": { "alias": "iconOn"; "required": false; "isSignal": true; }; "iconOff": { "alias": "iconOff"; "required": false; "isSignal": true; }; "fixedWidth": { "alias": "fixedWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnToggleButton };