@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1,465 @@
+import * as _angular_core from '@angular/core';
+import { Signal, EmbeddedViewRef, OnDestroy } from '@angular/core';
+import * as _ngneers_controls_splitter from '@ngneers/controls/splitter';
+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';
+import { NgnStateStorage } from '@ngneers/controls/utils-ng';
+
+/**
+ * @category control
+ */
+declare class NgnSplitterPanel extends NgnBase<'splitter'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"splitter", ["root", "horizontal", "vertical", "panel", "divider", "divider-handle", "dragging", "divider-dragging", `kind-${string}`], readonly []>>;
+    private readonly _fallbackAreaName;
+    /**
+     * The name of the panel, used to identify it in the persisted splitter state and in {@link NgnSplitter.panelOrder}.
+     * If nullish, a generated fallback name is used.
+     */
+    readonly name: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * The size of the panel along the splitter's layout axis. Accepts `fr` or `px` units.
+     * @default 1fr
+     */
+    readonly size: _angular_core.ModelSignal<`${number}px` | `${number}fr`>;
+    /**
+     * The minimum size the panel can be resized to.
+     * @default 0px
+     */
+    readonly minSize: _angular_core.ModelSignal<`${number}px` | `${number}%`>;
+    /**
+     * The maximum size the panel can be resized to.
+     * @default 100%
+     */
+    readonly maxSize: _angular_core.ModelSignal<`${number}px` | `${number}%`>;
+    /**
+     * Sets the `aria-label` for the panel region.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * Sets the `aria-labelledby` for the panel region.
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | null | undefined>;
+    protected readonly gridArea: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSplitterPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSplitterPanel, "ngn-splitter-panel", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; "minSize": "minSizeChange"; "maxSize": "maxSizeChange"; }, never, ["*"], true, never>;
+}
+
+type SplitterPanelSizeUnit = 'px' | 'fr';
+type SplitterPanelSize<U extends SplitterPanelSizeUnit = SplitterPanelSizeUnit> = `${number}${U}`;
+type SplitterPanelSizeLimitUnit = 'px' | '%';
+type SplitterPanelSizeLimit<U extends SplitterPanelSizeLimitUnit = SplitterPanelSizeLimitUnit> = `${number}${U}`;
+type SplitterLayout = 'horizontal' | 'vertical';
+/** Splitter supports adjacent and proportional resize modes (not push). */
+type SplitterResizeMode = 'adjacent' | 'proportional';
+type _SplitterState = {
+    layout?: SplitterLayout;
+    panelOrder?: string[] | null;
+    panelSizes?: Record<string, SplitterPanelSize> | null;
+};
+type SplitterStateData = keyof _SplitterState;
+type SplitterState = _SplitterState & {
+    [key: string]: unknown;
+};
+
+/**
+ * Type interface for the {@link SplitterCalculator} interface.
+ */
+interface SplitterCalculatorType {
+    new (splitter: NgnSplitter): SplitterCalculator;
+}
+/**
+ * Represents a calculator for the {@link NgnSplitter} component, handling panel sizes, drag events, and min/max size constraints.
+ * This interface defines the methods and properties required for managing the splitter's layout and behavior.
+ */
+interface SplitterCalculator {
+    /**
+     * Signal that provides the ordered list of panels in the splitter.
+     */
+    orderedPanels: Signal<readonly NgnSplitterPanel[]>;
+    /**
+     * Signal that provides the grid template sizes for the splitter (to use in `grid-template-rows` or `grid-template-columns` CSS properties).
+     */
+    gridTemplateSizes: Signal<string>;
+    /**
+     * Signal that provides the grid template areas for the splitter (to use in `grid-template-areas` CSS property).
+     */
+    gridTemplateAreas: Signal<string | null>;
+    /**
+     * Signal that provides the current drag context. Returns `null` if no drag is in progress.
+     */
+    dragContext: Signal<SplitterDragContext | null>;
+    /**
+     * Signal that provides the minimum size of the splitter, calculated based on the panels' min sizes and dividers.
+     */
+    minSize: Signal<string>;
+    /**
+     * Signal that provides the maximum size of the splitter, calculated based on the panels' max sizes and dividers.
+     */
+    maxSize: Signal<string>;
+    /**
+     * Starts a drag operation for the specified divider index.
+     * @param index The index of the divider to start dragging.
+     * @param event The pointer event that initiated the drag.
+     */
+    startDrag(index: number, event: PointerEvent): void;
+    /**
+     * Handles the drag operation for the specified divider index.
+     * @param index The index of the divider being dragged.
+     * @param event The pointer event that is being processed during the drag.
+     */
+    drag(index: number, event: PointerEvent): void;
+    /**
+     * Ends the drag operation for the specified divider index.
+     * @param index The index of the divider being dragged.
+     * @param event The pointer event that ended the drag.
+     * @param isCancel Whether the drag operation was cancelled. If true, the panel sizes will be reset to their original values.
+     */
+    endDrag(index: number, event: PointerEvent, isCancel: boolean): void;
+    /**
+     * Moves the divider at the specified index by the given pixel delta.
+     * @param index The index of the divider to move.
+     * @param pxDelta The pixel delta to move the divider by. Positive values move the divider to the right (or down), negative values move it to the left (or up).
+     */
+    moveDivider(index: number, pxDelta: number): void;
+}
+/**
+ * Represents the context of a drag operation in the splitter.
+ */
+type SplitterDragContext = {
+    /**
+     * The index of the divider being dragged.
+     */
+    dividerIndex: number;
+    /**
+     * The ID of the pointer that initiated the drag operation.
+     */
+    pointerId: number;
+    /**
+     * The starting position of the pointer when the drag operation started, in pixels.
+     */
+    startPosition: number;
+};
+/**
+ * Default implementation of the {@link SplitterCalculator} interface.
+ * Delegates all resize math to the generic {@link ResizeEngine}.
+ */
+declare class DefaultSplitterCalculator implements SplitterCalculator {
+    protected readonly panels: Signal<readonly NgnSplitterPanel[]>;
+    protected readonly dividers: Signal<readonly EmbeddedViewRef<unknown>[]>;
+    protected readonly panelOrder: Signal<readonly string[] | null | undefined>;
+    protected readonly layout: Signal<SplitterLayout>;
+    protected readonly splitterSize: Signal<number>;
+    private readonly _engine;
+    constructor(splitter: NgnSplitter);
+    readonly orderedPanels: Signal<readonly NgnSplitterPanel[]>;
+    readonly gridTemplateSizes: Signal<string>;
+    readonly gridTemplateAreas: Signal<string | null>;
+    readonly minSize: Signal<string>;
+    readonly maxSize: Signal<string>;
+    readonly dragContext: _angular_core.WritableSignal<SplitterDragContext | null>;
+    protected readonly dividerSizes: Signal<number[]>;
+    startDrag(index: number, event: PointerEvent): void;
+    drag(index: number, event: PointerEvent): void;
+    endDrag(index: number, event: PointerEvent, isCancel: boolean): void;
+    moveDivider(index: number, pxDelta: number): void;
+    /**
+     * Ensures all panels respect their min/max size constraints.
+     * Delegates to the underlying {@link ResizeEngine}.
+     */
+    ensureMinMaxSizes(): void;
+    /** @internal — used by tests to seed panel sizes into the engine. */
+    setPanelSize(panel: NgnSplitterPanel, size: string): void;
+}
+
+/**
+ * @category control
+ */
+declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
+    private readonly _viewContainer;
+    private readonly _config;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"splitter", ["root", "horizontal", "vertical", "panel", "divider", "divider-handle", "dragging", "divider-dragging", `kind-${string}`], readonly []>>;
+    protected readonly translations: _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;
+        };
+    }, "_">;
+    /**
+     * The layout of the splitter.
+     */
+    readonly layout: _angular_core.ModelSignal<SplitterLayout>;
+    /**
+     * A array of panel names that defines the order of panels.
+     * If nullish, the order is determined by the order the panels are defined in the template.
+     */
+    readonly panelOrder: _angular_core.ModelSignal<string[] | null | undefined>;
+    /**
+     * The storage to use for saving the splitter state.
+     * @default `session`
+     */
+    readonly stateStorage: _angular_core.InputSignal<NgnStateStorage>;
+    /**
+     * The key to use for saving the splitter state.
+     * If nullish, the state will not be saved.
+     */
+    readonly stateKey: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * The type of data to save in the splitter state.
+     * @default `['layout', 'panelOrder', 'panelSizes']`
+     */
+    readonly stateData: _angular_core.InputSignal<readonly (keyof {
+        layout?: SplitterLayout;
+        panelOrder?: string[] | null;
+        panelSizes?: Record<string, _ngneers_controls_splitter.SplitterPanelSize> | null;
+    })[]>;
+    /**
+     * The type of calculator to use for the splitter.
+     * @default `DefaultSplitterCalculator`
+     */
+    readonly calculatorType: _angular_core.InputSignal<SplitterCalculatorType>;
+    /**
+     * The resize distribution mode for the splitter.
+     * - `'adjacent'`: Only the panels adjacent to the divider are resized.
+     * - `'proportional'`: The deficit is distributed proportionally across all panels on the other side.
+     * @default adjacent
+     */
+    readonly resizeMode: _angular_core.InputSignal<SplitterResizeMode>;
+    /**
+     * Whether to lock affected panels to fixed `px` values after a resize completes.
+     * When `true`, panels whose size changed are converted from their original unit to `px`.
+     * When `false`, panels keep their original units (`fr`, `px`).
+     * @default false
+     */
+    readonly lockSizes: _angular_core.InputSignal<boolean>;
+    /**
+     * The step size for moving the dividers using the keyboard.
+     * This can be a pixel value (e.g., '5px') or a percentage value (e.g., '5%').
+     * If a percentage is used, it will be calculated based on the size of the splitter element.
+     * @default '5px'
+     */
+    readonly step: _angular_core.InputSignal<`${number}px` | `${number}%`>;
+    /**
+     * Event emitted when the splitter state is being saved.
+     * This can be used to modify the state before it is saved.
+     */
+    readonly stateSaving: _angular_core.OutputEmitterRef<SplitterState>;
+    /**
+     * Event emitted when the splitter state is loaded.
+     * This can be used to modify the state before it is applied or to perform actions based on the loaded state.
+     */
+    readonly stateLoading: _angular_core.OutputEmitterRef<SplitterState>;
+    protected readonly dividerTemplateType: {
+        index: number;
+    };
+    private readonly _dividerTemplate;
+    /**
+     * The current dividers in the splitter.
+     */
+    readonly dividers: _angular_core.WritableSignal<EmbeddedViewRef<{
+        index: number;
+    }>[]>;
+    /**
+     * The current panels in the splitter.
+     */
+    readonly panels: _angular_core.Signal<readonly NgnSplitterPanel[]>;
+    /**
+     * The current size of the splitter element.
+     */
+    readonly elementSize: _angular_core.Signal<_ngneers_controls_api_ng.Size>;
+    /**
+     * A value indicating whether the splitter is currently being dragged.
+     */
+    readonly isDragging: _angular_core.Signal<boolean>;
+    protected readonly calculator: _angular_core.Signal<_ngneers_controls_splitter.SplitterCalculator>;
+    constructor();
+    ngOnDestroy(): void;
+    protected onHandlePointerDown(index: number, event: PointerEvent): void;
+    protected onHandlePointerMove(index: number, event: PointerEvent): void;
+    protected onHandlePointerUp(index: number, event: PointerEvent): void;
+    protected onHandlePointerCancel(index: number, event: PointerEvent): void;
+    protected onHandleKeyDown(index: number, event: KeyboardEvent): void;
+    private updateDividers;
+    private createDivider;
+    private moveDividerBefore;
+    private computeState;
+    private onStateLoad;
+    private ensureValidState;
+    private applyFromState;
+    /**
+     * 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.
+     */
+    protected dividerValueNow(index: number): number;
+    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>;
+}
+
+declare class NgnSplitterModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSplitterModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgnSplitterModule, never, [typeof NgnSplitter, typeof NgnSplitterPanel], [typeof NgnSplitter, typeof NgnSplitterPanel]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgnSplitterModule>;
+}
+
+export { DefaultSplitterCalculator, NgnSplitter, NgnSplitterModule, NgnSplitterPanel };
+export type { SplitterCalculator, SplitterCalculatorType, SplitterDragContext, SplitterLayout, SplitterPanelSize, SplitterPanelSizeLimit, SplitterPanelSizeLimitUnit, SplitterPanelSizeUnit, SplitterResizeMode, SplitterState, SplitterStateData };

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

@@ -0,0 +1,102 @@
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+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 { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnState extends NgnBase<'state'> {
+    private readonly i18n;
+    /**
+     * Whether the indicator is rendered and occupies layout space.
+     * @default true
+     */
+    readonly visible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the indicator should replace sibling button content while visible.
+     * @default false
+     */
+    readonly replaceContent: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicator size in px.
+     * @default 16
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    /**
+     * Optional spinner stroke thickness. Passed through to ngn-spinner for loading state.
+     */
+    readonly thickness: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Visually-hidden text announced to assistive tech in place of the kind's
+     * default label. Use it to convey app-specific meaning (e.g. `"Saving…"`
+     * instead of `"Loading"`). When unset, a localized label is derived from the
+     * applied {@link kind}.
+     */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Politeness of the live region used to announce the state to assistive tech.
+     * When omitted, it is derived from the applied {@link kind}: `error`/`warning`
+     * announce as `assertive` (mapped to `role="alert"`), everything else as
+     * `polite` (`role="status"`).
+     */
+    readonly ariaLive: _angular_core.InputSignal<"polite" | "assertive" | "off" | undefined>;
+    /**
+     * Icon shown when the applied kind is `cancelled`.
+     * @category inputs
+     */
+    readonly iconCancelled: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Icon shown when the applied kind is `success`.
+     * @category inputs
+     */
+    readonly iconSuccess: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Icon shown when the applied kind is `warning`.
+     * @category inputs
+     */
+    readonly iconWarning: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Icon shown when the applied kind is `error`.
+     * @category inputs
+     */
+    readonly iconError: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"state", ["root", "visible", "replace-content", "indicator", "sr-only", `kind-${string}`], readonly [{
+        readonly class: "icon";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"icon", ["root", "default"], readonly []>;
+    }, {
+        readonly class: "spinner";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"spinner", ["root", "circle", "svg", `color-${string}`, "centered"], readonly []>;
+    }, {
+        readonly class: "button";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+        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 class: "input";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+        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>;
+    /**
+     * Accessible label for the current state: the explicit {@link label} input,
+     * else a localized default for the applied kind. `undefined` when the
+     * indicator is hidden or no known kind is applied — the host then carries no
+     * live region.
+     */
+    protected readonly resolvedLabel: _angular_core.Signal<string | undefined>;
+    /** Resolved live-region politeness — explicit input, else derived from kind. */
+    protected readonly liveMode: _angular_core.Signal<"polite" | "assertive" | "off" | null>;
+    /** Landmark role paired with {@link liveMode} — `alert` when assertive, else `status`. */
+    protected readonly role: _angular_core.Signal<"status" | "alert" | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnState, "ngn-state", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "replaceContent": { "alias": "replaceContent"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; "iconCancelled": { "alias": "iconCancelled"; "required": false; "isSignal": true; }; "iconSuccess": { "alias": "iconSuccess"; "required": false; "isSignal": true; }; "iconWarning": { "alias": "iconWarning"; "required": false; "isSignal": true; }; "iconError": { "alias": "iconError"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnState };

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

@@ -0,0 +1,18 @@
+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';
+import * as i0 from '@angular/core';
+
+/**
+ * @category control
+ */
+declare class NgnSwitch extends ValueControlBase<'switch', boolean> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"switch", ["root", "input", "track", "track-checked", "thumb", "invalid"], readonly []>>;
+    protected changed(event: Event): void;
+    protected onClick(event: Event): void;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgnSwitch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgnSwitch, "ngn-switch", never, {}, {}, never, never, true, never>;
+}
+
+export { NgnSwitch };