@ngneers/controls 0.0.1-pre1 → 0.0.1-pre3

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

@@ -0,0 +1,99 @@
+import { AllKeysOfUnion } from '@ngneers/controls/utils';
+import { IconType, CustomKind, CustomColor } from '@ngneers/controls-custom-types';
+import { DefaultIcon } from '@ngneers/controls/icon';
+
+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?: DefaultIcon;
+    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;
+    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[];
+
+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, PredefinedFilterFunctions, PredefinedStringMatchFunction };

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

@@ -0,0 +1,50 @@
+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 _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    /**
+     * 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 [_ngneers_controls_themes.ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnAvatarGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnAvatarGroup, "ngn-avatar-group", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { NgnAvatar, NgnAvatarGroup };

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

@@ -0,0 +1,166 @@
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ControlTemplate, ControlName as ControlName$1, ThemeTemplate as ThemeTemplate$1, ThemeClasses } from '@ngneers/controls-themes';
+import * as _angular_core from '@angular/core';
+import { ElementRef, Injector, InputSignal, Signal, InjectionToken, Type, Provider } from '@angular/core';
+import { ControlTemplateInfo, AppliedThemeClassCfg } from '@ngneers/controls/api/ng';
+import { CustomKind } from '@ngneers/controls-custom-types';
+import { ControlName, ThemeTemplate } from '@ngneers/controls-themes/templates';
+import { FormValueControl } from '@angular/forms/signals';
+
+declare const NGN_CONTROL: InjectionToken<NgnBase<never>>;
+type AnyNgnBase = NgnBaseSafe<any>;
+type NgnBaseSafe<T extends ControlName | null> = Omit<NgnBase<T>, 'kind' | 'appliedKind' | 'pt'>;
+type FullAnyNgnBase = Omit<NgnBase<any>, 'kind' | 'appliedKind' | 'pt'> & {
+    kind: InputSignal<CustomKind<any> | undefined>;
+    appliedKind: InputSignal<CustomKind<any> | undefined>;
+    pt: InputSignal<NgnPassthrough<any> | undefined>;
+};
+/**
+ * @internal
+ * Provides the control itself for dependency injection.
+ * @param control - The control class to provide.
+ * @returns A provider for the control itself.
+ */
+declare function provideSelf(control: Type<unknown>): Provider;
+declare abstract class NgnBase<T extends ControlName | null> {
+    protected abstract theme: ControlTemplateInfo<never> | null;
+    private readonly _defaultKind;
+    private readonly _defaultColor;
+    /**
+     * The element reference for the host element.
+     */
+    readonly element: ElementRef<HTMLElement>;
+    /**
+     * The injector for the component.
+     */
+    readonly injector: Injector;
+    /**
+     * If true, the control will not apply any theme styles.
+     * The base styles of the control will still be applied.
+     * @default false
+     */
+    readonly unstyled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Some controls support custom kinds for styling purposes.
+     * The available kinds depend on the control and the theme used.
+     *
+     * TODO: link to custom types documentation
+     */
+    readonly kind: InputSignal<CustomKind<T> | undefined>;
+    readonly color: InputSignal<unknown>;
+    readonly appliedKind: Signal<CustomKind<T> | undefined>;
+    readonly appliedColor: Signal<unknown>;
+    /**
+     * Custom passthrough attributes to apply to the control's theme classes and its dependencies.
+     * This allows for fine-grained customization of attributes, styles and more.
+     */
+    readonly pt: InputSignal<(T extends string ? NgnPassthrough<T> : never) | undefined>;
+    private readonly _childNgnControls;
+    private readonly _afterLeaveCbs;
+    constructor();
+    /**
+     * Prepares the after leave hook to be called when the control is destroyed
+     * and its leave animation has finished.
+     */
+    private prepareAfterLeaveHook;
+    private afterLeaveInternal;
+    /**
+     * Lifecycle hook that is called after the control has left (been removed from) the DOM.
+     * Can be overridden by subclasses to perform custom actions after the leave animation.
+     */
+    protected afterLeave(): void;
+    /**
+     * @internal
+     */
+    protected injectThemeTemplate<External extends boolean = false>(template: External extends true ? ControlTemplate : T extends string ? ThemeTemplate[T] : never, hostClass?: null extends T ? never : AppliedThemeClassCfg<T & string>): ControlTemplateInfo<External extends true ? ControlTemplate : T extends string ? ThemeTemplate[T] : never>;
+    /**
+     * Toggles the kind and color theme classes based on the current values of the kind and color inputs.
+     */
+    private initializeKindAndColorClasses;
+    /**
+     * Initializes automatic theme class toggling for a given prefix based on the provided string signal.
+     *
+     * ⚠️ Caution: This method assumes that the control's theme supports classes with the given prefix.
+     *
+     * ⚠️ Caution: Make sure the signal provides only string or nullish values.
+     *
+     * @param prefix The prefix for the theme class (e.g., 'kind' or 'color').
+     * @param signal The signal that provides the current string value for the theme class.
+     */
+    protected initializeAutoThemeClasses(prefix: string, signal: Signal<unknown | undefined>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnBase<any>, never, never, { "unstyled": { "alias": "unstyled"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "pt": { "alias": "pt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgnPt<T extends NgnBaseSafe<Name>, Name extends ControlName$1> {
+    readonly ptInt: _angular_core.InputSignal<T>;
+    readonly ptClass: _angular_core.InputSignal<AppliedThemeClassCfg<T extends NgnBaseSafe<infer A extends keyof _ngneers_controls_themes.ThemeTemplate | null> ? A extends null ? never : A : never>>;
+    private readonly _engine;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnPt<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnPt<any, any>, "[ptInt]", never, { "ptInt": { "alias": "ptInt"; "required": true; "isSignal": true; }; "ptClass": { "alias": "ptClass"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgnPtEngine<T extends NgnBaseSafe<Name>, Name extends ControlName$1> {
+    private readonly pt;
+    private readonly ptClass;
+    private readonly _elementRef;
+    private readonly classes;
+    private readonly _appliedPts;
+    constructor(pt: Signal<T> | T, ptClass: Signal<AppliedThemeClassCfg<T extends NgnBaseSafe<infer A> ? (A extends null ? never : A) : never>> | AppliedThemeClassCfg<T extends NgnBaseSafe<infer A> ? (A extends null ? never : A) : never>);
+    private setNewPtValues;
+    private removePreviousPtValues;
+}
+
+type PassthroughValue = {
+    $attributes?: Record<string, string>;
+    $styles?: Partial<CSSStyleDeclaration>;
+    $classes?: string | string[];
+};
+type ThemeClassToPassthrough<T> = {
+    [K in keyof T]?: T[K] extends string ? PassthroughValue : K extends `$${string}` ? ThemeClassToPassthrough<T[K]> : ThemeClassToPassthrough<T[K]> & PassthroughValue;
+};
+type NgnPassthrough<T extends ControlName$1> = T extends null ? never : ThemeTemplate$1[T] extends ControlTemplate ? ThemeClassToPassthrough<ThemeClasses<ThemeTemplate$1[T]>> & PassthroughValue : never;
+type AnyNgnPassthrough = NgnPassthrough<any>;
+
+declare function setNgnInstance(element: HTMLElement, instance: AnyNgnBase): void;
+declare function getNgnInstance(element: HTMLElement): FullAnyNgnBase;
+declare function getNearestNgnInstance<T extends Type<Omit<AnyNgnBase, 'kind'>>>(element: HTMLElement, kind?: T): InstanceType<T> | null;
+declare function getNearestNgnInstanceSig<T extends Type<AnyNgnBase>>(element: HTMLElement, kind?: T): Signal<InstanceType<T> | null>;
+
+declare abstract class ValueControlBase<C extends ControlName, T> extends NgnBase<C> implements FormValueControl<T> {
+    /**
+     * The label for the control.
+     */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /**
+     * Sets the `aria-labelledby` attribute on the control.
+     * @default null
+     */
+    readonly labelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * The ID for the control
+     * @default generateElementId()
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The value of the control.
+     */
+    readonly value: _angular_core.ModelSignal<T>;
+    /**
+     * Set the disabled state of the control.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    readonly dirty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ValueControlBase<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ValueControlBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+}
+
+export { NGN_CONTROL, NgnBase, NgnPt, NgnPtEngine, ValueControlBase, getNearestNgnInstance, getNearestNgnInstanceSig, getNgnInstance, provideSelf, setNgnInstance };
+export type { AnyNgnBase, AnyNgnPassthrough, FullAnyNgnBase, NgnBaseSafe, NgnPassthrough, PassthroughValue };

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

@@ -0,0 +1,86 @@
+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 { 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 = {
+    $implicit: BreadcrumbItem;
+};
+type SeparatorTemplateType = {
+    $implicit: {
+        icon: IconType;
+    };
+};
+type OverflowTemplateType = {
+    $implicit: {
+        icon: IconType;
+        overflowingItems: BreadcrumbItem[];
+    };
+};
+
+declare abstract class BreadcrumbTemplates extends NgnBase<'breadcrumb'> {
+    private readonly _defaultItemTemplate;
+    private readonly _userItemTemplate;
+    /**
+     * Set a custom template for an item.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<ItemTemplateType> | null>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<ItemTemplateType>>;
+    private readonly _defaultSeparatorTemplate;
+    private readonly _userSeparatorTemplate;
+    /**
+     * Set a custom template for a separator.
+     * Can also be set using an `<ng-template>` element with `#separator` template reference variable.
+     */
+    readonly templateSeparator: _angular_core.InputSignal<TemplateRef<SeparatorTemplateType> | null>;
+    protected readonly separatorTemplate: _angular_core.Signal<TemplateRef<SeparatorTemplateType>>;
+    private readonly _defaultOverflowTemplate;
+    private readonly _userOverflowTemplate;
+    /**
+     * Set a custom template for the overflowing items.
+     * Can also be set using an `<ng-template>` element with `#overflow` template reference variable.
+     */
+    readonly templateOverflow: _angular_core.InputSignal<TemplateRef<OverflowTemplateType> | null>;
+    protected readonly overflowTemplate: _angular_core.Signal<TemplateRef<OverflowTemplateType>>;
+    /**
+     * Types for the breadcrumb templates.
+     */
+    readonly templateTypes: {
+        /**
+         * Type of the template variable for the item template.
+         */
+        item: ItemTemplateType;
+        separator: SeparatorTemplateType;
+        overflow: OverflowTemplateType;
+    } & {
+        $implicit: {
+            item: Partial<ItemTemplateType>;
+            separator: Partial<SeparatorTemplateType>;
+            overflow: Partial<OverflowTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BreadcrumbTemplates, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateSeparator": { "alias": "templateSeparator"; "required": false; "isSignal": true; }; "templateOverflow": { "alias": "templateOverflow"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userSeparatorTemplate", "_userOverflowTemplate"], never, true, never>;
+}
+
+/**
+ * @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[]>[]>]>]>>;
+    readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    readonly iconItemSeparator: _angular_core.InputSignal<string | undefined>;
+    readonly iconOverflow: _angular_core.InputSignal<string | 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>;
+}
+
+export { NgnBreadcrumb };
+export type { BreadcrumbItem, ItemTemplateType, OverflowTemplateType, SeparatorTemplateType };

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

@@ -0,0 +1,30 @@
+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 NgnButtonGroup extends NgnBase<'buttonGroup'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"button-group", ["root", "vertical", "horizontal"], 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<"toggle-button", ["root", "invalid", "button", "label", "active", "placeholder", "placeholder-active"], readonly []>]>>;
+    private readonly _contentRef;
+    private readonly _content;
+    private readonly _parentSize;
+    private readonly _contentSizes;
+    private readonly _contentWidth;
+    /**
+     * Defines the orientation of the button group.
+     * - 'auto' - The orientation is determined based on the available space.
+     * - 'horizontal' - The buttons are arranged horizontally. (Default for `auto` if enough space)
+     * - 'vertical' - The buttons are arranged vertically.
+     * @default 'auto'
+     */
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal" | "auto">;
+    protected readonly appliedOrientation: _angular_core.Signal<"vertical" | "horizontal" | "auto">;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnButtonGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnButtonGroup, "ngn-button-group", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, ["_contentRef"], ["*"], true, never>;
+}
+
+export { NgnButtonGroup };

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

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { NgnBase } from '@ngneers/controls/base';
+import { maybeCallback } from '@ngneers/controls/utils';
+import { NgnActionButtonConfig } from '@ngneers/controls/api';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+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>;
+    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>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnButton extends NgnBase<'button'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    /**
+     * Whether the button is displayed inline.
+     * This will make the button height fit the current line height.
+     */
+    readonly inline: i0.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    protected afterLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgnButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgnButton, "button[ngnButton], a[ngnButton]", never, { "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnActionButton, NgnButton };