@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1,145 @@
+import { AllKeysOfUnion } from '@ngneers/controls/utils';
+import { IconType, CustomKind, CustomColor } from '@ngneers/controls-custom-types';
+import { NgnIconKey } from '@ngneers/controls/icon';
+import { TemplateRef } from '@angular/core';
+
+type NgnFilterDataType = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'custom' | 'list';
+type NgnFilterMatchMode = 'all' | 'any';
+type NgnFilterOperatorId = 'isEqual' | 'isNotEqual' | 'contains' | 'startsWith' | 'endsWith' | 'in' | 'isEmpty' | 'isNotEmpty' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'isTrue' | 'isFalse' | 'custom';
+type NgnFilterConditionConfig = {
+    operator: NgnFilterOperatorId;
+    rawValue: string | null;
+};
+type NgnFilterConfig = {
+    dataType: NgnFilterDataType;
+    matchMode: NgnFilterMatchMode;
+    conditions: readonly NgnFilterConditionConfig[];
+};
+type NgnFilterCondition = {
+    operator: NgnFilterOperatorId;
+    value: unknown;
+};
+type NgnFilterValueSelector<T> = (item: T) => unknown;
+declare function parseFilterRawValue(raw: string | null, dataType: NgnFilterDataType): unknown;
+declare function getActiveFilterConditions(config: NgnFilterConfig): readonly NgnFilterCondition[];
+declare function executeFilter<T>(data: readonly T[], config: NgnFilterConfig, selector?: NgnFilterValueSelector<T>): readonly T[];
+declare function executeMultiFilter<T extends object>(data: readonly T[], configs: {
+    [key in Extract<AllKeysOfUnion<T>, string>]?: NgnFilterConfig;
+}): readonly T[];
+
+type PredefinedStringMatchFunction = 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'fuzzy';
+declare function stringMatches(value: string, query: string, filterFn: PredefinedStringMatchFunction): boolean;
+
+type PredefinedFilterFunctions = PredefinedStringMatchFunction;
+type FilterConfigInternal<T extends object> = FilterConfig<T> & {
+    filterFieldsCallback: (item: T) => string | string[] | (() => string) | (() => string[]);
+    fieldItems?: keyof T;
+};
+type FilterConfig<T extends object> = {
+    splitWords?: boolean;
+    caseSensitive?: boolean;
+    filterFn?: FilterFn<T>;
+};
+type FilterFn<T extends object> = PredefinedFilterFunctions | ((value: string, item: T) => Promise<boolean> | boolean);
+declare function filterOptions<T extends object>(options: readonly T[], filterText: string, filterOptions: FilterConfigInternal<T>): Promise<readonly T[]>;
+
+type NgnActionItem = {
+    id: string;
+    label: string | (() => string);
+    icon?: IconType;
+    callback?: () => void;
+    disabled?: boolean;
+    testId?: string;
+    children?: NgnActionItem[];
+    route?: string | string[];
+};
+type NgnActionItemFlat<T> = Omit<T, 'children'>;
+
+type NgnActionButtonConfig<T = unknown> = {
+    label: string | (() => string);
+    value: T;
+    action?: (event: PointerEvent) => void;
+    icon?: IconType;
+    defaultIcon?: NgnIconKey;
+    kind?: CustomKind<'button'>;
+    color?: CustomColor;
+    disabled?: boolean;
+    testId?: string;
+};
+
+type NgnItem<T = any, V = any> = {
+    data?: T;
+    label: string | (() => string);
+    icon?: IconType;
+    value: V;
+    testId?: string;
+    disabled?: boolean;
+    items?: NgnItem<T, V>[];
+};
+type NgnItemFields<T, K extends keyof T> = {
+    label: keyof T;
+    value: K;
+    translate?: keyof T;
+    testId?: keyof T;
+    children?: keyof T;
+};
+type NgnItemValue<Item extends NgnItem> = Item extends {
+    items: readonly (infer A)[];
+} ? A extends NgnItem ? NgnItemValue<A> : never : Item extends {
+    value: infer T;
+} ? T : never;
+type NgnItemsValue<Items extends readonly NgnItem[]> = Items[number] extends infer A ? A extends NgnItem ? NgnItemValue<A> : never : never;
+declare function transformToNgnItem<T extends object, K extends keyof T>(item: T, fields: NgnItemFields<T, K>): NgnItem<T, T[K]>;
+declare function transformToNgnItemPrimitive<T extends string | number>(item: T): NgnItem<unknown, T>;
+declare function transformToNgnItems<Items extends readonly object[], K extends keyof Items[number]>(items: Items, fields: NgnItemFields<Items[number], K>): {
+    [P in keyof Items]: NgnItem<Items[P], K>;
+} & readonly NgnItem<Items[number], K>[];
+declare function mapToItems(items: readonly NgnItem[]): readonly NgnItem[];
+declare function flatItems(items: readonly NgnItem[]): NgnItem[];
+
+/**
+ * Item model for the tree control. Extends {@link NgnItem} and reuses its
+ * `items` field for child nodes. A node with a non-empty `items` array is a
+ * branch; otherwise it is a leaf.
+ */
+interface NgnTreeItem<T = any, V = any> extends NgnItem<T, V> {
+    /** Child nodes. */
+    items?: NgnTreeItem<T, V>[];
+    /**
+     * Whether this node participates in selection/checking. Default `true`.
+     * When `false`: no checkbox is rendered, the node is excluded from `value`,
+     * but a branch remains expandable and its children stay independently
+     * selectable.
+     */
+    selectable?: boolean;
+    /**
+     * Marks a branch whose children are loaded on demand. A lazy node renders as
+     * expandable before its children exist; on first expand the tree invokes the
+     * `loadChildren` callback (and emits `nodeExpand`).
+     */
+    lazy?: boolean;
+    /**
+     * Per-node template override. Takes precedence over the global item template.
+     */
+    template?: TemplateRef<{
+        $implicit: NgnTreeItem<T, V>;
+    }>;
+}
+/**
+ * The value of a single tree node, including branch values.
+ *
+ * Unlike {@link NgnItemValue} (which yields leaf values only), this unions a
+ * branch node's own `value` with the values of all its descendants — because
+ * in a tree a branch node can itself be selected/expanded.
+ */
+type NgnTreeItemValue<Item extends NgnTreeItem> = Item extends {
+    items: readonly (infer A)[];
+} ? A extends NgnTreeItem ? Item['value'] | NgnTreeItemValue<A> : Item['value'] : Item['value'];
+/**
+ * The union of every node value (branches and leaves) in a tree item list.
+ * This is the type-safe value space for selection, expansion, and highlight.
+ */
+type NgnTreeItemsValue<Items extends readonly NgnTreeItem[]> = Items[number] extends infer A ? A extends NgnTreeItem ? NgnTreeItemValue<A> : never : never;
+
+export { executeFilter, executeMultiFilter, filterOptions, flatItems, getActiveFilterConditions, mapToItems, parseFilterRawValue, stringMatches, transformToNgnItem, transformToNgnItemPrimitive, transformToNgnItems };
+export type { FilterConfig, FilterConfigInternal, FilterFn, NgnActionButtonConfig, NgnActionItem, NgnActionItemFlat, NgnFilterValueSelector, NgnItem, NgnItemFields, NgnItemValue, NgnItemsValue, NgnTreeItem, NgnTreeItemValue, NgnTreeItemsValue, PredefinedFilterFunctions, PredefinedStringMatchFunction };

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

@@ -0,0 +1,54 @@
+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 { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnAvatar extends NgnBase<'avatar'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly []>>;
+    /**
+     * The initials to display when no image is available.
+     * Max 4 characters.
+     */
+    readonly initials: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The background color of the avatar, if the initials are used.
+     */
+    readonly bgColor: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The image URL to display in the avatar.
+     */
+    readonly image: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The alt text for the image.
+     */
+    readonly alt: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The size of the avatar in pixels.
+     * @default 48
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    protected readonly imageLoadFailed: _angular_core.WritableSignal<boolean>;
+    protected readonly initialsLimited: _angular_core.Signal<string | undefined>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnAvatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnAvatar, "ngn-avatar", never, { "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnAvatarGroup extends NgnBase<'avatarGroup'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"avatar-group", ["root", `kind-${string}`], readonly [{
+        readonly class: "avatar";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly []>;
+        readonly projected: true;
+    }]>>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnAvatarGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnAvatarGroup, "ngn-avatar-group", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { NgnAvatar, NgnAvatarGroup };