@ngneers/controls 0.0.1-pre5 → 0.0.1-pre7

package/types/ngneers-controls-api-resize.d.ts

@@ -0,0 +1,318 @@
+import * as _angular_core from '@angular/core';
+import { ModelSignal, Signal } from '@angular/core';
+
+type ResizeSizeUnit = 'px' | 'fr' | '%';
+type ResizeSize<U extends ResizeSizeUnit = ResizeSizeUnit> = `${number}${U}`;
+type ResizeLimitUnit = 'px' | '%';
+type ResizeLimit<U extends ResizeLimitUnit = ResizeLimitUnit> = `${number}${U}`;
+type ExpandedResizeSize = {
+    value: number;
+    unit: ResizeSizeUnit;
+};
+type ExpandedResizeLimit = {
+    value: number;
+    unit: ResizeLimitUnit;
+};
+/**
+ * How a resize delta is distributed across items.
+ * - `adjacent` — zero-sum transfer between the two items neighbouring the divider.
+ * - `proportional` — only the dragged item changes; other `fr`/`%` items redistribute via CSS grid.
+ * - `push` — only the dragged item changes; the container total grows/shrinks (requires unconstrained container).
+ */
+type ResizeDistributionMode = 'adjacent' | 'proportional' | 'push';
+/**
+ * A control-agnostic interface representing a resizable item (panel, column, etc.).
+ * Both splitter panels and table header cells implement this interface.
+ */
+interface ResizableItem {
+    /** The current size of the item (e.g. '100px', '1fr', '30%'). */
+    size: ModelSignal<ResizeSize>;
+    /** The minimum size constraint (e.g. '50px', '10%'). */
+    minSize: Signal<ResizeLimit>;
+    /** The maximum size constraint (e.g. '500px', '80%'). */
+    maxSize: Signal<ResizeLimit>;
+}
+interface ResizeEngineConfig {
+    /** The resizable items (panels, columns, etc.). */
+    items: Signal<readonly ResizableItem[]>;
+    /** The total container size in pixels along the resize axis. */
+    containerSize: Signal<number>;
+    /** The pixel sizes of gaps between items (dividers, gutters). */
+    gapSizes: Signal<readonly number[]>;
+    /** How deltas are distributed across items during a resize. */
+    distributionMode: Signal<ResizeDistributionMode>;
+    /** Whether the total size is constrained to the container. If false, push mode can grow the total. */
+    containerConstrained: Signal<boolean>;
+    /**
+     * Whether to convert affected items to fixed `px` values after a drag completes.
+     *
+     * - **`adjacent` / `push` modes**: when `true`, items whose size changed during the drag
+     *   are converted from their original unit (`fr`, `%`) to absolute `px`. When `false`,
+     *   items keep their original units.
+     * - **`proportional` mode**: when `true`, the resized column stays as `px` (locked).
+     *   When `false`, it is converted back to `fr` so it continues to flex with the container.
+     *   Other columns are never affected.
+     *
+     * @default false
+     */
+    lockSizes?: Signal<boolean>;
+    /**
+     * Absolute minimum size in pixels for any item, enforced as a floor even when
+     * a relative min-size (e.g. `5%`) resolves to a smaller value.
+     *
+     * Set to `0` to disable the floor (e.g. for splitter panels that have no inherent minimum).
+     *
+     * @default 0
+     */
+    minItemSizePx?: number;
+    /**
+     * Optional callback that returns the actual rendered px sizes of all items
+     * (e.g. via `getBoundingClientRect().width`). When provided, push-mode baking
+     * uses these DOM-measured values instead of JS-computed fr→px conversions,
+     * avoiding sub-pixel rounding mismatches with CSS Grid.
+     */
+    resolveItemSizes?: () => number[];
+}
+/** Snapshot of a single item's state at the start of a drag. */
+type ResizeDragContextItem = {
+    item: ResizableItem;
+    /** Parsed size at drag start (after any push-mode baking). */
+    startSize: ExpandedResizeSize;
+    /** Parsed min-size constraint. */
+    minSize: ExpandedResizeLimit;
+    /** Parsed max-size constraint. */
+    maxSize: ExpandedResizeLimit;
+};
+/** Full drag state captured at {@link ResizeEngine.startDrag}. */
+type ResizeDragContext = {
+    /** Index of the divider being dragged. */
+    dividerIndex: number;
+    /** Pointer position (px) when the drag started. */
+    startPosition: number;
+    /** Original sizes before push-mode baking. Used to revert on no-op clicks or cancellation. */
+    preBakeSizes: ResizeSize[];
+    /** Snapshots of all items at drag start. */
+    items: ResizeDragContextItem[];
+    /** Fraction conversion factors captured at drag start. */
+    fractionFactors: ResizeFractionFactors;
+    /** Percent-per-pixel ratio captured at drag start. */
+    percentPerPx: number;
+    /** Whether push-mode baking has been applied (deferred to first movement). */
+    baked: boolean;
+};
+type ResizeFractionFactors = {
+    /** Number of fraction units per pixel. */
+    frPerPx: number;
+    /** Number of pixels per fraction unit. */
+    pxPerFr: number;
+};
+
+/**
+ * A generic, control-agnostic resize engine for CSS grid layouts.
+ *
+ * Handles drag-based resizing of a list of {@link ResizableItem}s with support for:
+ * - **Size units**: `px`, `fr`, `%`
+ * - **Distribution modes**:
+ *   - `adjacent` — transfers space between the two items neighbouring the divider (zero-sum).
+ *   - `proportional` — only the dragged item changes to `px`; other items keep their `fr`/`%`
+ *     units and CSS grid redistributes the remaining space. Optionally locks the resized item
+ *     to `px` via {@link ResizeEngineConfig.lockSizes}.
+ *   - `push` — the dragged item grows/shrinks independently; the container total changes
+ *     (requires `containerConstrained = false`).
+ * - **Commit modes** (for `adjacent`/`push`): `preserve`, `bakeAll`, `bakeAffected`
+ * - **Min-size floor** ({@link ResizeEngineConfig.minItemSizePx}): an absolute `px` floor
+ *   enforced even when a relative min-size resolves smaller. In `proportional` mode, emitted
+ *   as CSS `minmax(floor, size)` so the grid natively prevents columns from shrinking below it.
+ *
+ * Consumers (splitter, table) provide items and configuration via signals.
+ * The engine outputs a ready-to-use `grid-template-columns`/`grid-template-rows` string
+ * via {@link gridTemplateSizes}.
+ */
+declare class ResizeEngine {
+    private readonly items;
+    private readonly containerSize;
+    private readonly gapSizes;
+    private readonly distributionMode;
+    private readonly containerConstrained;
+    private readonly lockSizes;
+    private readonly minItemSizePx;
+    private readonly resolveItemSizes?;
+    constructor(config: ResizeEngineConfig);
+    /** The active drag state, or `null` when idle. */
+    readonly dragContext: _angular_core.WritableSignal<ResizeDragContext | null>;
+    /** Whether a drag operation is currently in progress. */
+    readonly isDragging: Signal<boolean>;
+    /**
+     * Whether any completed (non-cancelled) drag has occurred in this engine's lifetime.
+     *
+     * Used by `push` mode to defer resolving `fr`/`%` → `px` until the first drag.
+     * Before the first drag, original units are preserved so CSS grid can distribute
+     * space without rounding-induced overflow.
+     */
+    readonly hasBeenResized: _angular_core.WritableSignal<boolean>;
+    /**
+     * CSS grid template string with item sizes interleaved with gap sizes.
+     *
+     * Example output: `"100px 4px minmax(50px, 2fr) 4px minmax(50px, 1fr)"`.
+     *
+     * **Output strategy per distribution mode:**
+     * - `adjacent` — resolves all sizes to `px`. CSS grid cannot constrain adjacent
+     *   resizing correctly with `fr` units.
+     * - `proportional` — keeps `fr`/`%` as-is, wrapped in `minmax(floor, size)` when
+     *   {@link minItemSizePx} > 0. This lets CSS grid redistribute remaining space
+     *   while enforcing the minimum floor natively. Locked (`px`) columns pass through.
+     * - `push` — keeps original units until the first completed drag, then resolves
+     *   everything to `px` so the total can exceed the container and trigger scrolling.
+     */
+    readonly gridTemplateSizes: Signal<string>;
+    /**
+     * The total gap size in pixels.
+     */
+    readonly totalGapSize: Signal<number>;
+    /**
+     * Aggregated item sizes by unit.
+     */
+    private readonly totalItemSizes;
+    /**
+     * Minimum total size of all items combined (as a CSS calc expression).
+     */
+    readonly minTotalSize: Signal<string>;
+    /**
+     * Maximum total size of all items combined (as a CSS calc expression).
+     */
+    readonly maxTotalSize: Signal<string>;
+    /**
+     * Begins a drag at the given divider. Original sizes are saved for reverting
+     * on no-op clicks or cancellation. In push mode, baking to `px` is deferred
+     * to the first {@link drag} call to avoid a visual shift on mousedown.
+     */
+    startDrag(dividerIndex: number, startPositionPx: number): void;
+    /** Updates item sizes during an active drag based on the current pointer position. */
+    drag(dividerIndex: number, currentPositionPx: number): void;
+    /**
+     * Ends a drag. If cancelled or no movement occurred, sizes revert to their
+     * pre-drag values (including undoing any push-mode baking). Otherwise,
+     * post-drag finalization runs (commit mode or proportional locking).
+     */
+    endDrag(dividerIndex: number, cancel: boolean): void;
+    /**
+     * Applies a single instantaneous move (e.g. keyboard step) at the given divider.
+     * Requires that the relevant items already have engine-calculated sizes.
+     */
+    moveDivider(dividerIndex: number, pxDelta: number): void;
+    /**
+     * Clamps all items to their min/max constraints, respecting {@link minItemSizePx}.
+     *
+     * Called automatically via `afterRenderEffect` when item sizes change externally
+     * or the container resizes. Skipped during an active drag (sizes are managed
+     * by the drag handler). For `fr`-sized items, clamping is done iteratively
+     * with redistribution to maintain total fraction balance.
+     */
+    ensureMinMaxSizes(): void;
+    /**
+     * Sets the item's size and marks it as engine-calculated via an internal symbol.
+     * This mark is used by {@link isItemSizeCalculated} to detect external size changes.
+     */
+    setItemSize(item: ResizableItem, size: ResizeSize): void;
+    /**
+     * Returns `true` if the item's current size matches the last value written by the engine.
+     * Returns `false` if the size was changed externally (e.g. by an input binding or state restore).
+     */
+    isItemSizeCalculated(item: ResizableItem): boolean;
+    /**
+     * Routes a px delta to the appropriate distribution strategy.
+     *
+     * For last-item edge resizing (dividerIndex === items.length - 1), the delta is
+     * remapped to the previous divider with negated direction. This allows the last
+     * column's handle in push mode to resize it directly.
+     */
+    private applyDelta;
+    /**
+     * Adjacent mode: transfers the delta between the two items neighbouring the divider.
+     *
+     * Grows the left item and shrinks the right item (or vice versa). When an item
+     * hits its min/max constraint, the unapplied remainder cascades to the next item
+     * in that direction. A second pass resolves any asymmetry between left and right.
+     * The total container width is always preserved (zero-sum).
+     */
+    private applyAdjacentDelta;
+    /**
+     * Proportional mode: only the item at `dividerIndex` changes size (set to absolute `px`).
+     * All other items keep their original units (`fr`, `%`), and CSS grid's `minmax(floor, size)`
+     * naturally redistributes the remaining space — columns with room shrink while those
+     * already at the floor stay put.
+     *
+     * Growth is capped so the total never overflows the container: each other `fr` column
+     * needs at least {@link minItemSizePx}, and locked `px` columns keep their size.
+     *
+     * After the drag ends, {@link applyProportionalLocking} determines whether the
+     * resized column stays as `px` (locked) or is converted back to `fr` (dynamic).
+     */
+    private applyProportionalDelta;
+    /**
+     * Push mode: only the dragged item changes size. All other items stay at their
+     * baked `px` values (set during {@link startDrag}). The container total changes,
+     * causing horizontal overflow/scrolling. Only valid when `containerConstrained` is `false`.
+     */
+    private applyPushDelta;
+    /**
+     * Post-drag finalization. Behaviour depends on {@link lockSizes} and the distribution mode.
+     *
+     * When `lockSizes` is `false`:
+     * - `adjacent` / `push` — no-op; items keep their original units.
+     * - `proportional` — the resized column is converted back to `fr` so it stays dynamic.
+     *
+     * When `lockSizes` is `true`:
+     * - `adjacent` / `push` — items whose size changed are converted to absolute `px`.
+     * - `proportional` — no-op; the resized column is already `px` from the drag.
+     */
+    private finalizeResize;
+    /**
+     * Converts the resized column back to `fr` after a proportional drag so it
+     * continues to flex with the container. Computes a new `fr` value that would
+     * resolve to the same pixel width given the current container and other `fr` columns.
+     */
+    private unlockProportionalColumn;
+    private createContextItem;
+    private getCurrentFractionFactors;
+    private getCurrentPercentPerPx;
+    /**
+     * Bakes all non-px items to absolute px values. Used by push mode on first drag movement.
+     * Prefers DOM-measured sizes (via {@link resolveItemSizes}) over JS-computed conversions
+     * to avoid sub-pixel mismatches with CSS Grid's internal track sizing.
+     */
+    private bakeAllItemsToPx;
+    /**
+     * Writes computed px deltas back to items, converting to each item's original unit.
+     */
+    private commitItemDeltas;
+    /**
+     * Builds a CSS `calc()` expression summing all items' min or max limits.
+     * Items already in `px` contribute their current size; `fr`/`%` items contribute
+     * their `minSize`/`maxSize` limit. Used by {@link minTotalSize} and {@link maxTotalSize}.
+     */
+    private computeLimitTotalSize;
+}
+
+declare function isResizeSize(value: unknown): value is ResizeSize;
+declare function getResizeSizeUnit(value: ResizeSize): ResizeSizeUnit;
+declare function getResizeSizeValue(value: ResizeSize): number;
+declare function expandResizeSize(value: ResizeSize): ExpandedResizeSize;
+declare function collapseResizeSize(size: ExpandedResizeSize): ResizeSize;
+declare function isResizeLimit(value: unknown): value is ResizeLimit;
+declare function getResizeLimitUnit(value: ResizeLimit): ResizeLimitUnit;
+declare function getResizeLimitValue(value: ResizeLimit): number;
+declare function getResizeLimitInPx(value: ResizeLimit, containerSize: number): number;
+declare function expandResizeLimit(value: ResizeLimit): ExpandedResizeLimit;
+declare function collapseResizeLimit(size: ExpandedResizeLimit): ResizeLimit;
+/**
+ * Resolves a size to its pixel equivalent given the current fraction factors and container size.
+ */
+declare function resolveSizeToPx(size: ExpandedResizeSize, pxPerFr: number, containerSize: number): number;
+/**
+ * Converts a pixel delta to the appropriate value delta for the given unit.
+ */
+declare function pxDeltaToUnitDelta(pxDelta: number, unit: ResizeSizeUnit, frPerPx: number, percentPerPx: number): number;
+
+export { ResizeEngine, collapseResizeLimit, collapseResizeSize, expandResizeLimit, expandResizeSize, getResizeLimitInPx, getResizeLimitUnit, getResizeLimitValue, getResizeSizeUnit, getResizeSizeValue, isResizeLimit, isResizeSize, pxDeltaToUnitDelta, resolveSizeToPx };
+export type { ExpandedResizeLimit, ExpandedResizeSize, ResizableItem, ResizeDistributionMode, ResizeDragContext, ResizeDragContextItem, ResizeEngineConfig, ResizeFractionFactors, ResizeLimit, ResizeLimitUnit, ResizeSize, ResizeSizeUnit };

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

@@ -1,6 +1,6 @@
 import { AllKeysOfUnion } from '@ngneers/controls/utils';
 import { IconType, CustomKind, CustomColor } from '@ngneers/controls-custom-types';
-import { DefaultIcon } from '@ngneers/controls/icon';
+import { NgnIconKey } from '@ngneers/controls/icon';
 
 type NgnFilterDataType = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'custom' | 'list';
 type NgnFilterMatchMode = 'all' | 'any';
@@ -59,7 +59,7 @@ type NgnActionButtonConfig<T = unknown> = {
     value: T;
     action?: (event: PointerEvent) => void;
     icon?: IconType;
-    defaultIcon?: DefaultIcon;
+    defaultIcon?: NgnIconKey;
     kind?: CustomKind<'button'>;
     color?: CustomColor;
     disabled?: boolean;

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

@@ -63,6 +63,14 @@ declare abstract class NgnBase<T extends ControlName | null> {
      * and its leave animation has finished.
      */
     private prepareAfterLeaveHook;
+    private static _leaveQueue;
+    private static _leaveRafScheduled;
+    private static _enqueueLeaveCheck;
+    private static _processLeaveQueue;
+    /**
+     * Recursively searches for a leave animation on the element and its parents.
+     */
+    private static _findLeaveAnimation;
     private afterLeaveInternal;
     /**
      * Lifecycle hook that is called after the control has left (been removed from) the DOM.

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

@@ -1,3 +1,6 @@
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import { IconType } from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
@@ -5,7 +8,6 @@ import * as _ngneers_controls_themes from '@ngneers/controls-themes';
 import { maybeCallback } from '@ngneers/controls/utils';
 import { NgnBase } from '@ngneers/controls/base';
 import { NgnActionItemFlat, NgnActionItem } from '@ngneers/controls/api';
-import { IconType } from '@ngneers/controls-custom-types';
 
 type BreadcrumbItem = NgnActionItemFlat<NgnActionItem>;
 type ItemTemplateType = {
@@ -73,10 +75,10 @@ declare abstract class BreadcrumbTemplates extends NgnBase<'breadcrumb'> {
  * @category control
  */
 declare class NgnBreadcrumb extends BreadcrumbTemplates {
-    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"breadcrumb", ["root", "item", "item-clickable", "separator", "overflow"], readonly [_ngneers_controls_themes.ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"menu", ["root", "submenu", "popover", "item", "item-opened", "icon-children", "separator"], readonly [_ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>]>>;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"breadcrumb", ["root", "item", "item-clickable", "separator", "overflow"], readonly [_ngneers_controls_themes.ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"menu", ["root", "submenu", "popover", "item", "item-opened", "icon-children", "separator"], readonly [_ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>]>>;
     readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
-    readonly iconItemSeparator: _angular_core.InputSignal<string | undefined>;
-    readonly iconOverflow: _angular_core.InputSignal<string | undefined>;
+    readonly iconItemSeparator: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    readonly iconOverflow: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
     protected readonly maybeCallback: typeof maybeCallback;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnBreadcrumb, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnBreadcrumb, "ngn-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "iconItemSeparator": { "alias": "iconItemSeparator"; "required": false; "isSignal": true; }; "iconOverflow": { "alias": "iconOverflow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

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

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { NgnBase } from '@ngneers/controls/base';
 import { maybeCallback } from '@ngneers/controls/utils';
 import { NgnActionButtonConfig } from '@ngneers/controls/api';
@@ -7,12 +7,17 @@ import * as _ngneers_controls_themes from '@ngneers/controls-themes';
 
 declare class NgnActionButton<T> extends NgnBase<null> {
     protected readonly theme: null;
-    readonly config: i0.InputSignal<NgnActionButtonConfig<T>>;
-    readonly clicked: i0.OutputEmitterRef<T>;
+    readonly config: _angular_core.InputSignal<NgnActionButtonConfig<T>>;
+    /**
+     * Whether the inner button is displayed inline (line-height sized).
+     * @default false
+     */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly clicked: _angular_core.OutputEmitterRef<T>;
     protected readonly maybeCallback: typeof maybeCallback;
     protected click(event: PointerEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgnActionButton<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgnActionButton<any>, "ngn-action-button", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnActionButton<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnActionButton<any>, "ngn-action-button", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 /**
@@ -24,11 +29,11 @@ declare class NgnButton extends NgnBase<'button'> {
      * Whether the button is displayed inline.
      * This will make the button height fit the current line height.
      */
-    readonly inline: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
     protected afterLeave(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgnButton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgnButton, "button[ngnButton], a[ngnButton]", ["ngnButton"], { "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnButton, "button[ngnButton], a[ngnButton]", ["ngnButton"], { "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgnActionButton, NgnButton };

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

@@ -203,10 +203,14 @@ declare class NgnCalendar extends CalendarTemplates {
             addCondition: string;
             removeCondition: string;
             clear: string;
+            apply: string;
+            cancel: string;
             matchModeLabel: string;
             match: {
                 all: string;
                 any: string;
+                and: string;
+                or: string;
             };
             selected: string;
             conditions: string;
@@ -242,7 +246,7 @@ declare class NgnCalendar extends CalendarTemplates {
             close: string;
         };
     }, "_">;
-    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"calendar", ["root", "inline", "input", "input-field", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "current-month", "current-year", "time", "next", "previous"], readonly [_ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter", "filter-icon", "list-box", "list-box-empty"], readonly [_ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "scroller", "item-selected", "item-highlighted"], readonly [_ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>, _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>]>, _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>]>>;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"calendar", ["root", "inline", "input", "input-field", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "current-month", "current-year", "time", "next", "previous"], readonly [_ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter", "filter-icon", "list-box", "list-box-empty"], readonly [_ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "scroller", "item-selected", "item-highlighted"], readonly [_ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>, _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>]>, _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>, _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>]>>;
     protected readonly year: _angular_core.WritableSignal<number>;
     protected readonly month: _angular_core.WritableSignal<number>;
     protected readonly yearOptions: NgnItem[];

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

@@ -1,4 +1,6 @@
 import * as _angular_core 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 { ValueControlBase } from '@ngneers/controls/base';
@@ -9,19 +11,19 @@ type ValueType<Indeterminate extends boolean> = InputGeneric<Indeterminate, fals
  * @category control
  */
 declare class NgnCheckbox<Indeterminate extends boolean> extends ValueControlBase<'checkbox', ValueType<Indeterminate>> {
-    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
     /**
      * Set a custom icon for the checked state.
      */
-    readonly iconChecked: _angular_core.InputSignal<string | undefined>;
+    readonly iconChecked: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
     /**
      * Set a custom icon for the unchecked state.
      */
-    readonly iconUnchecked: _angular_core.InputSignal<string | undefined>;
+    readonly iconUnchecked: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
     /**
      * Set a custom icon for the indeterminate state.
      */
-    readonly iconIndeterminate: _angular_core.InputSignal<string | undefined>;
+    readonly iconIndeterminate: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
     /**
      * Set whether to allow the indeterminate state.
      * If `true`, this will change the {@link value} type to `boolean | null`.

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

@@ -1,3 +1,5 @@
+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';
@@ -21,7 +23,7 @@ declare class NgnChip extends NgnBase<'chip'> {
     /**
      * Set a custom icon for the close button.
      */
-    readonly iconClose: _angular_core.InputSignal<string | undefined>;
+    readonly iconClose: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
     /**
      * Emitted when the chip is closed (removed).
      */

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

@@ -0,0 +1,5 @@
+import { Provider } from '@angular/core';
+
+declare function provideNgnDefaultIcons(): Provider[];
+
+export { provideNgnDefaultIcons };

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

@@ -134,12 +134,18 @@ declare class NgnResizable {
 
 declare class NgnScrollAmount {
     private readonly _el;
+    /**
+     * Optional external scroll container. When set, scroll events and
+     * dimensions are tracked on this element instead of the host element.
+     */
+    readonly scrollContainer: _angular_core.InputSignal<HTMLElement | undefined>;
+    readonly scrollTarget: _angular_core.Signal<HTMLElement>;
     readonly scrollTop: _angular_core.WritableSignal<number>;
     readonly scrollLeft: _angular_core.WritableSignal<number>;
     private readonly _scrollEvent;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnScrollAmount, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollAmount, "[ngnScrollAmount]", never, {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollAmount, "[ngnScrollAmount]", never, { "scrollContainer": { "alias": "scrollContainer"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgnAutofocus, NgnDrag, NgnDragScroll, NgnMovable, NgnResizable, NgnScrollAmount };

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

@@ -1,3 +1,5 @@
+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 } from '@angular/core';
 import * as _ngneers_signal_translate from '@ngneers/signal-translate';
@@ -103,10 +105,14 @@ declare class NgnDrawer extends DrawerTemplates implements Openable {
             addCondition: string;
             removeCondition: string;
             clear: string;
+            apply: string;
+            cancel: string;
             matchModeLabel: string;
             match: {
                 all: string;
                 any: string;
+                and: string;
+                or: string;
             };
             selected: string;
             conditions: string;
@@ -180,7 +186,7 @@ declare class NgnDrawer extends DrawerTemplates implements Openable {
     /**
      * The icon to use for the close button in the default header template
      */
-    readonly iconClose: _angular_core.InputSignal<string | undefined>;
+    readonly iconClose: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
     /**
      * Lazy load the drawer content
      * @default false

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

@@ -107,10 +107,14 @@ declare class NgnEditInplace extends EditInplaceTemplates {
             addCondition: string;
             removeCondition: string;
             clear: string;
+            apply: string;
+            cancel: string;
             matchModeLabel: string;
             match: {
                 all: string;
                 any: string;
+                and: string;
+                or: string;
             };
             selected: string;
             conditions: string;