@ngneers/controls 0.0.1-next.0 → 0.0.1-next.2

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

@@ -109,7 +109,7 @@ type SelectFilterFn<T extends object> = FilterFn<NgnItem<T>>;
  */
 declare class NgnSelect<V, Editable extends boolean = false, Multiple extends boolean = false> extends SelectTemplates<V, Editable, Multiple> {
     readonly isFieldControl = true;
-    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
         readonly class: "popover";
         readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
     }, {
@@ -123,7 +123,7 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
         }]>;
     }, {
         readonly class: "filter";
-        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
             readonly class: "input";
             readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
             readonly projected: true;
@@ -225,6 +225,9 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -282,6 +285,8 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -290,6 +295,18 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     private readonly _popover;
     private readonly _field;
@@ -374,7 +391,17 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
      * @default multiple()
      */
     readonly checkbox: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Text shown in the trigger when no value is selected.
+     * @default undefined
+     */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
     protected readonly maybeCallback: typeof maybeCallback;
+    /**
+     * Whether the control holds no value. Drives the empty status class and lets a
+     * wrapping {@link NgnInputField} float its label. See {@link value}.
+     */
+    readonly empty: Signal<boolean>;
     private readonly _listbox;
     private _userChangedEditableInput;
     protected get anchorElement(): HTMLElement;
@@ -402,7 +429,7 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
     protected onEditableChange(value: string | null): void;
     protected potentiallyBlurred(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSelect<any, any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSelect<any, any, any>, "ngn-select", never, { "popoverOptions": { "alias": "popoverOptions"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; "iconFilter": { "alias": "iconFilter"; "required": false; "isSignal": true; }; "iconDropdown": { "alias": "iconDropdown"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editableAutoFilter": { "alias": "editableAutoFilter"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "scrollToSelectedItemOnOpen": { "alias": "scrollToSelectedItemOnOpen"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; }, {}, ["_customEditableInput"], ["[ngnInput]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSelect<any, any, any>, "ngn-select", never, { "popoverOptions": { "alias": "popoverOptions"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; "iconFilter": { "alias": "iconFilter"; "required": false; "isSignal": true; }; "iconDropdown": { "alias": "iconDropdown"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "editableAutoFilter": { "alias": "editableAutoFilter"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "scrollToSelectedItemOnOpen": { "alias": "scrollToSelectedItemOnOpen"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, ["_customEditableInput"], ["[ngnInput]"], true, never>;
 }
 
 export { NgnSelect };

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

@@ -164,6 +164,9 @@ declare class NgnSnackbar extends SnackbarTemplates implements OnInit {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -221,6 +224,8 @@ declare class NgnSnackbar extends SnackbarTemplates implements OnInit {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -229,6 +234,18 @@ declare class NgnSnackbar extends SnackbarTemplates implements OnInit {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     private readonly _host;
     /** Heading text shown at the top of the snackbar. Overridden by {@link templateHeader}. */

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

@@ -276,6 +276,9 @@ declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -333,6 +336,8 @@ declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -341,6 +346,18 @@ declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     /**
      * The layout of the splitter.
@@ -443,13 +460,20 @@ declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
     private onStateLoad;
     private ensureValidState;
     private applyFromState;
+    /** Cached divider positions (percentage) measured post-layout; see the after-render effect in the constructor. */
+    private readonly _dividerValues;
     /**
      * The divider's current position as a percentage (0–100) of the total panel
      * content size, used for `aria-valuenow` on the `role="separator"` handle.
-     * Reads `gridTemplateSizes()` to stay reactive to resizes, then measures the
-     * rendered panel sizes on either side of the divider.
+     * Reads the cached value measured in the after-render phase.
      */
     protected dividerValueNow(index: number): number;
+    /**
+     * Measures each divider's position as a percentage (0–100) of the total panel
+     * content size. Reads `gridTemplateSizes()`, `elementSize()` and `dragContext()`
+     * as reactive triggers, then measures the rendered panel sizes.
+     */
+    private measureDividerValues;
     private getStepInPx;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSplitter, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSplitter, "ngn-splitter", never, { "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "panelOrder": { "alias": "panelOrder"; "required": false; "isSignal": true; }; "stateStorage": { "alias": "stateStorage"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "stateData": { "alias": "stateData"; "required": false; "isSignal": true; }; "calculatorType": { "alias": "calculatorType"; "required": false; "isSignal": true; }; "resizeMode": { "alias": "resizeMode"; "required": false; "isSignal": true; }; "lockSizes": { "alias": "lockSizes"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "panelOrder": "panelOrderChange"; "stateSaving": "stateSaving"; "stateLoading": "stateLoading"; }, ["panels"], ["*"], true, never>;

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

@@ -75,7 +75,7 @@ declare class NgnState extends NgnBase<'state'> {
         readonly projected: true;
     }, {
         readonly class: "input-field";
-        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
             readonly class: "input";
             readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
             readonly projected: true;
@@ -83,7 +83,7 @@ declare class NgnState extends NgnBase<'state'> {
         readonly projected: true;
     }]>>;
     protected readonly icon: _angular_core.Signal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
-    protected readonly defaultIcon: _angular_core.Signal<"accordion-collapse" | "accordion-expand" | "breadcrumb-separator" | "breadcrumb-overflow" | "calendar-trigger" | "calendar-previous-month" | "calendar-next-month" | "checkbox-checked" | "checkbox-indeterminate" | "chip-remove" | "dialog-close" | "drawer-close" | "dropdown-toggle" | "edit-confirm" | "filter-active" | "filter-inactive" | "filter-remove" | "hint-info" | "hint-success" | "hint-warning" | "hint-error" | "input-clear" | "menu-submenu" | "paginator-previous" | "paginator-next" | "search" | "sort-neutral" | "sort-ascending" | "sort-descending" | "spin-decrement" | "spin-increment" | "table-group-toggle" | "tabs-scroll-left" | "tabs-scroll-right" | "toast-close" | "snackbar-close" | "upload-trigger" | "upload-done" | "upload-failed" | "upload-retry" | "upload-cancel" | "upload-remove" | undefined>;
+    protected readonly defaultIcon: _angular_core.Signal<"accordion-collapse" | "accordion-expand" | "breadcrumb-separator" | "breadcrumb-overflow" | "calendar-trigger" | "calendar-previous-month" | "calendar-next-month" | "checkbox-checked" | "checkbox-indeterminate" | "chip-remove" | "dialog-close" | "drawer-close" | "dropdown-toggle" | "edit-confirm" | "filter-active" | "filter-inactive" | "filter-remove" | "hint-info" | "hint-success" | "hint-warning" | "hint-error" | "input-clear" | "menu-submenu" | "paginator-previous" | "paginator-next" | "rating-full" | "rating-empty" | "search" | "sort-neutral" | "sort-ascending" | "sort-descending" | "spin-decrement" | "spin-increment" | "stepper-completed" | "table-group-toggle" | "tabs-scroll-left" | "tabs-scroll-right" | "toast-close" | "snackbar-close" | "upload-trigger" | "upload-done" | "upload-failed" | "upload-retry" | "upload-cancel" | "upload-remove" | undefined>;
     /**
      * Accessible label for the current state: the explicit {@link label} input,
      * else a localized default for the applied kind. `undefined` when the

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

@@ -0,0 +1,68 @@
+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';
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+
+/**
+ * A single step within an `ngn-stepper`. Declares the step's header metadata and
+ * projects its content via `<ng-template #content>`.
+ * @category control
+ */
+declare class NgnStep extends NgnBase<'stepper'> {
+    protected readonly theme: null;
+    /** The step's header label. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Custom marker icon; when unset the 1-based step number is shown. */
+    readonly iconStep: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /** Marks the step optional (shown as a hint; skippable in linear mode). @default false */
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disables navigation to this step. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Renders the step's marker in an error state. @default false */
+    readonly error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the step is complete. The app sets this; in linear mode it gates
+     * forward navigation past this step. @default false
+     */
+    readonly completed: _angular_core.ModelSignal<boolean>;
+    readonly content: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnStep, "ngn-step", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "iconStep": { "alias": "iconStep"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "completed": { "alias": "completed"; "required": false; "isSignal": true; }; }, { "completed": "completedChange"; }, ["content"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnStepper extends NgnBase<'stepper'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"stepper", ["root", "header", "step", "marker", "marker-index", "marker-icon", "connector", "label", "optional", "content", "active", "completed", "error", "disabled"], readonly []>>;
+    protected readonly steps: _angular_core.Signal<readonly NgnStep[]>;
+    /** The header buttons' roving items, in step order (one per step; connectors are plain spans). */
+    private readonly _rovingItems;
+    /** The active step index (zero-based). @default 0 */
+    readonly active: _angular_core.ModelSignal<number>;
+    /** Gate forward navigation on prior steps being `completed`. @default false */
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Lazily render step content (forwarded to `ngn-defer`). @default true */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Keep opened step content in the DOM to preserve state (forwarded to `ngn-defer`). @default true */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Index of the first step that is not yet completed (the furthest reachable in linear mode).
+     * Optional steps are exempt — an incomplete optional step never blocks forward progress.
+     */
+    private readonly _firstIncomplete;
+    constructor();
+    /** Whether navigation to `index` is currently permitted. */
+    canGoTo(index: number): boolean;
+    goTo(index: number): void;
+    next(): void;
+    previous(): void;
+    protected onHeaderActivate(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnStepper, "ngn-stepper", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["steps"], never, true, never>;
+}
+
+export { NgnStep, NgnStepper };