@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/package.json

@@ -1,78 +1,213 @@
 {
   "name": "@ngneers/controls",
-  "version": "0.0.1-pre1",
+  "version": "0.0.1-pre2",
   "private": false,
   "dependencies": {
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "@ngneers/controls-custom-types": "^0.0.1-pre2"
   },
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "rxjs": "~7.8.0",
-    "@floating-ui/dom": "^1.7.1"
+    "@angular/common": "~21.1.0",
+    "@angular/compiler": "~21.1.0",
+    "@angular/core": "~21.1.0",
+    "@angular/forms": "~21.1.0",
+    "@angular/platform-browser": "~21.1.0",
+    "@angular/router": "~21.1.0",
+    "@floating-ui/dom": "^1.7.1",
+    "@ngneers/signal-translate": "^20.0.0",
+    "@ngneers/controls-themes": "^0.0.1-pre2",
+    "rxjs": "~7.8.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ngneers-controls.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/ngneers-controls.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/ngneers-controls.d.ts",
       "default": "./fesm2022/ngneers-controls.mjs"
     },
+    "./accordion": {
+      "types": "./types/ngneers-controls-accordion.d.ts",
+      "default": "./fesm2022/ngneers-controls-accordion.mjs"
+    },
     "./api": {
-      "types": "./api/index.d.ts",
+      "types": "./types/ngneers-controls-api.d.ts",
       "default": "./fesm2022/ngneers-controls-api.mjs"
     },
-    "./custom-types": {
-      "types": "./custom-types/index.d.ts",
-      "default": "./fesm2022/ngneers-controls-custom-types.mjs"
+    "./api/ng": {
+      "types": "./types/ngneers-controls-api-ng.d.ts",
+      "default": "./fesm2022/ngneers-controls-api-ng.mjs"
+    },
+    "./avatar": {
+      "types": "./types/ngneers-controls-avatar.d.ts",
+      "default": "./fesm2022/ngneers-controls-avatar.mjs"
+    },
+    "./base": {
+      "types": "./types/ngneers-controls-base.d.ts",
+      "default": "./fesm2022/ngneers-controls-base.mjs"
+    },
+    "./breadcrumb": {
+      "types": "./types/ngneers-controls-breadcrumb.d.ts",
+      "default": "./fesm2022/ngneers-controls-breadcrumb.mjs"
+    },
+    "./button": {
+      "types": "./types/ngneers-controls-button.d.ts",
+      "default": "./fesm2022/ngneers-controls-button.mjs"
+    },
+    "./button-group": {
+      "types": "./types/ngneers-controls-button-group.d.ts",
+      "default": "./fesm2022/ngneers-controls-button-group.mjs"
+    },
+    "./calendar": {
+      "types": "./types/ngneers-controls-calendar.d.ts",
+      "default": "./fesm2022/ngneers-controls-calendar.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/ngneers-controls-checkbox.d.ts",
+      "default": "./fesm2022/ngneers-controls-checkbox.mjs"
+    },
+    "./chip": {
+      "types": "./types/ngneers-controls-chip.d.ts",
+      "default": "./fesm2022/ngneers-controls-chip.mjs"
+    },
+    "./defer": {
+      "types": "./types/ngneers-controls-defer.d.ts",
+      "default": "./fesm2022/ngneers-controls-defer.mjs"
     },
     "./dialog": {
-      "types": "./dialog/index.d.ts",
+      "types": "./types/ngneers-controls-dialog.d.ts",
       "default": "./fesm2022/ngneers-controls-dialog.mjs"
     },
-    "./form-field": {
-      "types": "./form-field/index.d.ts",
-      "default": "./fesm2022/ngneers-controls-form-field.mjs"
+    "./directives": {
+      "types": "./types/ngneers-controls-directives.d.ts",
+      "default": "./fesm2022/ngneers-controls-directives.mjs"
+    },
+    "./drawer": {
+      "types": "./types/ngneers-controls-drawer.d.ts",
+      "default": "./fesm2022/ngneers-controls-drawer.mjs"
+    },
+    "./edit-inplace": {
+      "types": "./types/ngneers-controls-edit-inplace.d.ts",
+      "default": "./fesm2022/ngneers-controls-edit-inplace.mjs"
+    },
+    "./filter": {
+      "types": "./types/ngneers-controls-filter.d.ts",
+      "default": "./fesm2022/ngneers-controls-filter.mjs"
+    },
+    "./i18n": {
+      "types": "./types/ngneers-controls-i18n.d.ts",
+      "default": "./fesm2022/ngneers-controls-i18n.mjs"
     },
     "./icon": {
-      "types": "./icon/index.d.ts",
+      "types": "./types/ngneers-controls-icon.d.ts",
       "default": "./fesm2022/ngneers-controls-icon.mjs"
     },
+    "./inplace": {
+      "types": "./types/ngneers-controls-inplace.d.ts",
+      "default": "./fesm2022/ngneers-controls-inplace.mjs"
+    },
+    "./input": {
+      "types": "./types/ngneers-controls-input.d.ts",
+      "default": "./fesm2022/ngneers-controls-input.mjs"
+    },
+    "./input-field": {
+      "types": "./types/ngneers-controls-input-field.d.ts",
+      "default": "./fesm2022/ngneers-controls-input-field.mjs"
+    },
+    "./input-mask": {
+      "types": "./types/ngneers-controls-input-mask.d.ts",
+      "default": "./fesm2022/ngneers-controls-input-mask.mjs"
+    },
+    "./item-view": {
+      "types": "./types/ngneers-controls-item-view.d.ts",
+      "default": "./fesm2022/ngneers-controls-item-view.mjs"
+    },
     "./list-box": {
-      "types": "./list-box/index.d.ts",
+      "types": "./types/ngneers-controls-list-box.d.ts",
       "default": "./fesm2022/ngneers-controls-list-box.mjs"
     },
-    "./lazy-cacher": {
-      "types": "./lazy-cacher/index.d.ts",
-      "default": "./fesm2022/ngneers-controls-lazy-cacher.mjs"
+    "./menu": {
+      "types": "./types/ngneers-controls-menu.d.ts",
+      "default": "./fesm2022/ngneers-controls-menu.mjs"
+    },
+    "./message": {
+      "types": "./types/ngneers-controls-message.d.ts",
+      "default": "./fesm2022/ngneers-controls-message.mjs"
+    },
+    "./paginator": {
+      "types": "./types/ngneers-controls-paginator.d.ts",
+      "default": "./fesm2022/ngneers-controls-paginator.mjs"
     },
     "./popover": {
-      "types": "./popover/index.d.ts",
+      "types": "./types/ngneers-controls-popover.d.ts",
       "default": "./fesm2022/ngneers-controls-popover.mjs"
     },
+    "./progress": {
+      "types": "./types/ngneers-controls-progress.d.ts",
+      "default": "./fesm2022/ngneers-controls-progress.mjs"
+    },
     "./scroller": {
-      "types": "./scroller/index.d.ts",
+      "types": "./types/ngneers-controls-scroller.d.ts",
       "default": "./fesm2022/ngneers-controls-scroller.mjs"
     },
     "./select": {
-      "types": "./select/index.d.ts",
+      "types": "./types/ngneers-controls-select.d.ts",
       "default": "./fesm2022/ngneers-controls-select.mjs"
     },
-    "./text-field": {
-      "types": "./text-field/index.d.ts",
-      "default": "./fesm2022/ngneers-controls-text-field.mjs"
+    "./select-button": {
+      "types": "./types/ngneers-controls-select-button.d.ts",
+      "default": "./fesm2022/ngneers-controls-select-button.mjs"
+    },
+    "./slider": {
+      "types": "./types/ngneers-controls-slider.d.ts",
+      "default": "./fesm2022/ngneers-controls-slider.mjs"
+    },
+    "./spinner": {
+      "types": "./types/ngneers-controls-spinner.d.ts",
+      "default": "./fesm2022/ngneers-controls-spinner.mjs"
+    },
+    "./splitter": {
+      "types": "./types/ngneers-controls-splitter.d.ts",
+      "default": "./fesm2022/ngneers-controls-splitter.mjs"
+    },
+    "./switch": {
+      "types": "./types/ngneers-controls-switch.d.ts",
+      "default": "./fesm2022/ngneers-controls-switch.mjs"
+    },
+    "./table": {
+      "types": "./types/ngneers-controls-table.d.ts",
+      "default": "./fesm2022/ngneers-controls-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/ngneers-controls-tabs.d.ts",
+      "default": "./fesm2022/ngneers-controls-tabs.mjs"
+    },
+    "./tag": {
+      "types": "./types/ngneers-controls-tag.d.ts",
+      "default": "./fesm2022/ngneers-controls-tag.mjs"
+    },
+    "./toast": {
+      "types": "./types/ngneers-controls-toast.d.ts",
+      "default": "./fesm2022/ngneers-controls-toast.mjs"
+    },
+    "./toggle-button": {
+      "types": "./types/ngneers-controls-toggle-button.d.ts",
+      "default": "./fesm2022/ngneers-controls-toggle-button.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/ngneers-controls-tooltip.d.ts",
+      "default": "./fesm2022/ngneers-controls-tooltip.mjs"
     },
     "./utils": {
-      "types": "./utils/index.d.ts",
+      "types": "./types/ngneers-controls-utils.d.ts",
       "default": "./fesm2022/ngneers-controls-utils.mjs"
+    },
+    "./utils-ng": {
+      "types": "./types/ngneers-controls-utils-ng.d.ts",
+      "default": "./fesm2022/ngneers-controls-utils-ng.mjs"
     }
   }
 }

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

@@ -0,0 +1,114 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, ElementRef } 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 NgnAccordion extends NgnBase<'accordion'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"accordion", ["root"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether multiple panels can be expanded at once.
+     */
+    readonly iconExpanded: _angular_core.InputSignal<string | undefined>;
+    readonly iconCollapsed: _angular_core.InputSignal<string | undefined>;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly expandedPanels: _angular_core.ModelSignal<string[]>;
+    togglePanel(panelId: string): void;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnAccordion, "ngn-accordion", never, { "cache": { "alias": "cache"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "iconExpanded": { "alias": "iconExpanded"; "required": false; "isSignal": true; }; "iconCollapsed": { "alias": "iconCollapsed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "expandedPanels": { "alias": "expandedPanels"; "required": false; "isSignal": true; }; }, { "expandedPanels": "expandedPanelsChange"; }, never, ["*"], true, never>;
+}
+
+type HeaderTemplateType = {
+    $implicit: {
+        panelId: string;
+        text?: string;
+        expanded: boolean;
+    };
+};
+
+declare abstract class AccordionTemplates extends NgnBase<'accordionPanel'> {
+    private readonly _defaultHeaderTemplate;
+    private readonly _userHeaderTemplate;
+    /**
+     * Set a custom template for the header of the accordion panel.
+     * Can also be set using an `<ng-template>` element with `#header` template reference variable.
+     */
+    readonly templateHeader: _angular_core.InputSignal<TemplateRef<HeaderTemplateType> | null>;
+    protected readonly headerTemplate: _angular_core.Signal<TemplateRef<HeaderTemplateType>>;
+    private readonly _userContentTemplate;
+    /**
+     * The required template for the content of the accordion panel.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    readonly templateContent: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    /**
+     * Types for the dialog templates.
+     */
+    readonly templateTypes: {
+        header: HeaderTemplateType;
+    } & {
+        $implicit: {
+            header: Partial<HeaderTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTemplates, never, never, { "templateHeader": { "alias": "templateHeader"; "required": false; "isSignal": true; }; "templateContent": { "alias": "templateContent"; "required": false; "isSignal": true; }; }, {}, ["_userHeaderTemplate", "_userContentTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnAccordionPanel extends AccordionTemplates {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"accordion-panel", ["root", "header", "header-disabled", "header-text", "content-expander", "content-expander-collapsed", "content"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    private readonly _accordionControl;
+    /**
+     * The unique identifier for the accordion panel.
+     * @default generateElementId()
+     */
+    readonly panelId: _angular_core.InputSignal<string>;
+    /**
+     * Whether to lazily load the content of the panel when expanded.
+     * @default false
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean | null, unknown>;
+    /**
+     * Whether to cache the content of the panel when {@link lazy} is enabled and the panel is closed.
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean | null, unknown>;
+    /**
+     * The header text for the accordion panel.
+     */
+    readonly header: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the accordion panel is disabled. Disabling will prevent user interaction,
+     * but not automatically close the panel if it was already expanded, or is expanded programatically.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly iconExpanded: _angular_core.Signal<string>;
+    protected readonly iconCollapsed: _angular_core.Signal<string>;
+    protected readonly _contentViewChild: _angular_core.Signal<ElementRef<HTMLElement>>;
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    protected readonly headerId: _angular_core.Signal<string>;
+    protected readonly contentId: _angular_core.Signal<string>;
+    protected readonly afterTransitionExpanded: _angular_core.WritableSignal<boolean>;
+    protected readonly lazyInt: _angular_core.Signal<boolean>;
+    protected readonly cacheInt: _angular_core.Signal<boolean>;
+    constructor();
+    /**
+     * Toggles the expanded state of the accordion panel.
+     */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnAccordionPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnAccordionPanel, "ngn-accordion-panel", never, { "panelId": { "alias": "panelId"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { NgnAccordion, NgnAccordionPanel };

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

@@ -0,0 +1,291 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Provider, ModelSignal, OutputEmitterRef, ComponentRef, InputSignal, InputSignalWithTransform, Signal, ElementRef, Injector, OnDestroy } from '@angular/core';
+import { Translations } from '@ngneers/controls/i18n';
+import { TimeSpan, LogLevel, DeepPartial } from '@ngneers/controls/utils';
+import { Placement, Strategy, Middleware, ComputePositionReturn, Side, Alignment } from '@floating-ui/dom';
+import { NgnStateStorage } from '@ngneers/controls/utils-ng';
+import { Theme, StyleScope, ControlName, ThemeClasses, ThemeTemplate, ControlTemplate } from '@ngneers/controls-themes';
+import { Observable } from 'rxjs';
+import { CustomKind, CustomColor } from '@ngneers/controls-custom-types';
+
+type TooltipOptions = {
+    /**
+     * The placement of the tooltip relative to the anchor element.
+     * @default bottom
+     */
+    readonly placement: Placement;
+    /**
+     * The offset in Pixels of the tooltip from the anchor element.
+     * @default 4
+     */
+    readonly offset: number;
+    /**
+     * The delay before the tooltip is shown. If a number is provided, it is interpreted as milliseconds.
+     * @default '0.5s'
+     */
+    readonly showDelay: TimeSpan;
+    /**
+     * The delay before the tooltip is hidden. If a number is provided, it is interpreted as milliseconds.
+     * @default '0.1s'
+     */
+    readonly hideDelay: TimeSpan;
+    /**
+     * Whether to show an arrow pointing to the anchor element. `""` is equivalent to `true`.
+     * @default true
+     */
+    readonly showArrow: boolean;
+    /**
+     * Shows the tooltip on hover.
+     * @default true
+     */
+    readonly showOnHover: boolean;
+    /**
+     * Shows the tooltip on focus.
+     * @default true
+     */
+    readonly showOnFocus: boolean;
+    /**
+     * Hides the tooltip (without delay) when the mouse hovers over the tooltip.
+     * @default false
+     */
+    readonly hideOnTooltipHover: boolean;
+    /**
+     * Hides the tooltip (without delay) when the user clicks on the tooltip.
+     * @default true
+     */
+    readonly hideOnClick: boolean;
+};
+
+declare const NGN_CONFIG: InjectionToken<NgnConfig>;
+type NgnConfig = {
+    readonly logLevel: LogLevel;
+    readonly customTranslations?: Record<string, () => Promise<Translations>>;
+    readonly disableAnimations: boolean;
+    readonly theme: {
+        readonly preset: Theme | null;
+        readonly lazyLoaded: boolean;
+        readonly styleScope: StyleScope | null;
+        readonly cssLayer: string | null;
+        readonly namePrefix: string;
+    };
+    readonly defaults: {
+        readonly stateStorage: NgnStateStorage;
+        readonly splitter: {
+            readonly stateStorage: NgnStateStorage;
+        };
+        readonly tooltip: TooltipOptions;
+    };
+};
+type NgnConfigInit = DeepPartial<NgnConfig, 'theme.preset.*' | 'theme.styleScope.*' | 'customTranslations.*'>;
+declare const defaultNgnConfig: NgnConfig;
+declare function provideNgnConfig(config?: NgnConfigInit): Provider;
+
+type PopoverCloseBy = 'any' | 'none';
+type CloseBy = PopoverCloseBy | 'escape';
+declare function toPopoverCloseBy(closeBy: CloseBy): 'auto' | 'manual';
+declare function toModalCloseBy(closeBy: CloseBy): 'any' | 'closerequest' | 'none';
+interface Openable {
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    open: ModelSignal<boolean>;
+    closed: OutputEmitterRef<void>;
+}
+
+type ComponentFromRef<T extends ComponentRef<any>> = T extends ComponentRef<infer C> ? C : never;
+type InputsFromComponent<T> = {
+    [K in keyof T]: T[K] extends InputSignal<infer V> ? V : T[K] extends InputSignalWithTransform<infer V, infer _> ? V : never;
+};
+declare function setComponentInput<T extends ComponentRef<C>, C, Input extends InputsFromComponent<ComponentFromRef<T>>, I extends keyof Input & string>(componentRef: T, inputName: I, value: Input[I]): void;
+
+type Size = {
+    width: number;
+    height: number;
+};
+type ElementArray = Signal<ReadonlyArray<HTMLElement | ElementRef<HTMLElement>>> | ReadonlyArray<HTMLElement | ElementRef<HTMLElement>>;
+type ElementSingle = Signal<HTMLElement | ElementRef<HTMLElement> | undefined> | HTMLElement | Document | ElementRef<HTMLElement>;
+declare function elementSizeSignal(element: ElementSingle, active?: Signal<boolean>): Signal<Size>;
+declare function elementsSizesSignal(element: ElementArray, active?: Signal<boolean>): Signal<readonly Size[]>;
+declare function abortSignalOnDestroy(options?: {
+    injector?: Injector;
+}): AbortSignal;
+/**
+ * Creates an Observable that emits the latest event of the specified type from the given DOM element.
+ *
+ * ⚠️ Cannot be used to cancel or call preventDefault on the event, as the event is emitted after the event handler phase.
+ * @param element The target DOM element or ElementRef. Either can be provided directly or via a Signal.
+ * @param eventName The name of the event to listen for.
+ * @param injector Optional injector to use for lifecycle management. If not provided, the current injector is used.
+ * @returns An Observable that emits the latest event of the specified type. Does not complete until the injector is destroyed.
+ */
+declare function domEventObservable<EventName extends keyof GlobalEventHandlersEventMap>(element: ElementSingle, eventName: EventName, injector?: Injector): Observable<GlobalEventHandlersEventMap[EventName]>;
+/**
+ * Creates a Signal that emits the latest event of the specified type from the given DOM element.
+ *
+ * ⚠️ Cannot be used to cancel or call preventDefault on the event, as the event is emitted after the event handler phase.
+ * @param element The target DOM element or ElementRef. Either can be provided directly or via a Signal.
+ * @param eventName The name of the event to listen for.
+ * @param injector Optional injector to use for lifecycle management. If not provided, the current injector is used.
+ * @returns A Signal that emits the latest event of the specified type or null if no event has occurred.
+ */
+declare function domEventSignal<EventName extends keyof GlobalEventHandlersEventMap>(element: ElementSingle, eventName: EventName, injector?: Injector): Signal<GlobalEventHandlersEventMap[EventName] | null>;
+/**
+ * Attaches an event handler to a DOM element that is automatically removed when the injector is destroyed.
+ * @param element The target DOM element or ElementRef. Either can be provided directly or via a Signal.
+ * @param eventName The name of the event to listen for.
+ * @param handler The function to handle the event.
+ * @param injector Optional injector to use for lifecycle management. If not provided, the current injector is used.
+ */
+declare function domEventHandler<EventName extends keyof GlobalEventHandlersEventMap>(element: ElementSingle, eventName: EventName, handler: (event: GlobalEventHandlersEventMap[EventName]) => void, injector?: Injector): void;
+
+/**
+ * Retrieves the available kinds for a given control from the theme configuration.
+ * Does **not** return custom kinds defined by the user in `NgnCustomTypes`.
+ * @param controlName The name of the control to get kinds for.
+ * @returns A tuple of available kinds for the specified control.
+ * @todo make reactive (signal)
+ */
+declare function injectThemeControlKinds<T extends string>(controlName: T): CustomKind<T>[];
+/**
+ * Retrieves the available colors from the theme configuration.
+ * Does **not** return custom colors defined by the user in `NgnCustomTypes`.
+ * @returns A tuple of available colors.
+ * @todo make reactive (signal)
+ */
+declare function injectThemeColors(controlName?: string): CustomColor[];
+
+type DeviceType = 'mobile' | 'desktop' | 'tablet';
+declare class Platform {
+    private readonly _deviceType;
+    readonly isBrowser: boolean;
+    readonly windowSize: Signal<Size>;
+    readonly width: Signal<number>;
+    readonly height: Signal<number>;
+    constructor();
+    readonly isTouchDevice: Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Platform, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<Platform>;
+}
+
+type Point = {
+    x: number;
+    y: number;
+};
+type Anchor = HTMLElement | Point;
+type PositioningSizeConstraints = {
+    /**
+     * The minimum width of the floating element. When a string is provided, it is used as the CSS min-width value.
+     */
+    minWidth?: string;
+    /**
+     * The width of the floating element. When a number is provided, it is relative to the width of the reference element.
+     * When a string is provided, it is used as the CSS width value.
+     */
+    width?: number | string;
+    /**
+     * The maximum width of the floating element. When a number is provided, it is relative to the width of the reference element.
+     * When a string is provided, it is used as the CSS max-width value.
+     */
+    maxWidth?: number | string;
+    /**
+     * The height of the floating element. When a string is provided, it is used as the CSS height value.
+     */
+    height?: string;
+    /**
+     * The maximum height of the floating element. When a string is provided, it is used as the CSS max-height value.
+     */
+    maxHeight?: string;
+    /**
+     * The minimum height of the floating element. When a string is provided, it is used as the CSS min-height value.
+     */
+    minHeight?: string;
+};
+type PositioningOptions = {
+    injector?: Injector;
+    placement?: Placement;
+    flip?: boolean;
+    resize?: boolean;
+    shift?: boolean;
+    offset?: number;
+    stopped?: boolean;
+    sizeConstraints?: PositioningSizeConstraints;
+    strategy?: Strategy;
+    middleware?: Middleware[];
+    disableSettingStyles?: boolean;
+    hasShrinkableContent?: boolean;
+    onPositionChange?: (position: ComputePositionReturn) => void;
+};
+type AutoPositioningHandle = {
+    stop: () => void;
+    start: () => void;
+    isRunning: () => boolean;
+};
+declare function positionElement(anchor: Anchor, floatingEl: HTMLElement, options?: PositioningOptions): void;
+declare function autoPositionElement(anchor: Anchor, floatingEl: HTMLElement, options?: PositioningOptions): AutoPositioningHandle;
+declare function splitPlacement(placement: Placement): [Side, Alignment | undefined];
+
+type NgnFeature = {
+    providers: Provider[];
+};
+declare function provideNgnControls(config?: NgnConfigInit, ...features: NgnFeature[]): Provider[];
+
+declare class NgnTemplate<T> {
+    readonly ngnTemplate: i0.InputSignal<T>;
+    static ngTemplateContextGuard<T>(dir: NgnTemplate<T>, ctx: unknown): ctx is T;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgnTemplate<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgnTemplate<any>, "ng-template[ngnTemplate]", never, { "ngnTemplate": { "alias": "ngnTemplate"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * A noop with return type T.
+ * This function is used to define typed properties to use in a template.
+ */
+declare function templateTypesFn<T extends Record<string, Record<string, any>>>(): T & {
+    $implicit: { [K in keyof T]: Partial<T[K]>; };
+};
+/**
+ * A noop with return type `{ $implicit: Implicit } & Named`.
+ * This function is used to define a typed property to use in a template.
+ */
+declare function templateTypeFn<Implicit, Named extends Record<string, any> = object>(): ([Implicit] extends [undefined] ? unknown : {
+    $implicit: Implicit;
+}) & Named;
+
+type AppliedThemeClassCfg<T extends ControlName> = keyof ThemeClasses<ThemeTemplate[T]> | Partial<Record<keyof ThemeClasses<ThemeTemplate[T]>, boolean | (() => boolean)>>;
+type ControlTemplateInfo<T extends ControlTemplate<string, string[]>> = {
+    scope: string;
+    class: (className: T['classNames'][number]) => string;
+    classes: (classes: {
+        [K in T['classNames'][number]]?: boolean;
+    }) => string;
+};
+declare function themeTemplateToTemplateInfo<T extends ControlTemplate<string, string[]>>(config: NgnConfig, template: T, options?: {
+    unstyled?: () => boolean;
+}): ControlTemplateInfo<T>;
+declare function injectThemeTemplate<T extends ControlTemplate<string, string[]>>(template: T, options?: {
+    injector?: Injector;
+    unstyled?: () => boolean;
+}): ControlTemplateInfo<T>;
+declare function injectTheme<T extends ControlName>(controlName: T, options?: {
+    injector?: Injector;
+}): ControlTemplate<T, string[]>;
+declare function getAppliedClasses<T extends ControlName>(klass: AppliedThemeClassCfg<T>, themeTemplateInfo: Omit<ControlTemplateInfo<ControlTemplate<T, string[]>>, 'class' | 'classes'>): Array<{
+    class: string;
+    name: string;
+}>;
+declare class ThemeService implements OnDestroy {
+    private readonly _config;
+    private readonly _loadedScopes;
+    private readonly _document;
+    readonly activeTheme: i0.WritableSignal<Theme | null>;
+    constructor();
+    loadScope(scope: string): void;
+    ngOnDestroy(): void;
+    private onThemeChange;
+    private unloadAllScopes;
+    private applyTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+export { NGN_CONFIG, NgnTemplate, Platform, ThemeService, abortSignalOnDestroy, autoPositionElement, defaultNgnConfig, domEventHandler, domEventObservable, domEventSignal, elementSizeSignal, elementsSizesSignal, getAppliedClasses, injectTheme, injectThemeColors, injectThemeControlKinds, injectThemeTemplate, positionElement, provideNgnConfig, provideNgnControls, setComponentInput, splitPlacement, templateTypeFn, templateTypesFn, themeTemplateToTemplateInfo, toModalCloseBy, toPopoverCloseBy };
+export type { Anchor, AppliedThemeClassCfg, AutoPositioningHandle, CloseBy, ControlTemplateInfo, DeviceType, NgnConfig, NgnConfigInit, NgnFeature, Openable, Point, PopoverCloseBy, PositioningOptions, PositioningSizeConstraints, Size, TooltipOptions };