@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-api-ng.mjs

@@ -0,0 +1,959 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, provideAppInitializer, inject, ElementRef, computed, signal, afterRenderEffect, DestroyRef, Injector, runInInjectionContext, effect, PLATFORM_ID, DOCUMENT, Injectable, untracked, REQUEST, input, Directive } from '@angular/core';
+import { registerCustomLanguages, I18n } from '@ngneers/controls/i18n';
+import { Logger, deepCopy, toggleClass } from '@ngneers/controls/utils';
+import { isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { signalWithPrevious, NgnGlobal } from '@ngneers/controls/utils-ng';
+import { Subject, fromEvent, skip } from 'rxjs';
+import { getClassName, applyTheme, applyGlobalStyles } from '@ngneers/controls-themes';
+import { globalStyles } from '@ngneers/controls-themes/base/global';
+
+const NGN_CONFIG = new InjectionToken('NGN_CONFIG');
+const defaultNgnConfig = {
+    logLevel: 'info',
+    disableAnimations: false,
+    theme: {
+        preset: null,
+        lazyLoaded: false,
+        styleScope: null,
+        cssLayer: 'ngn-controls',
+        namePrefix: 'ngn-',
+    },
+    defaults: {
+        stateStorage: 'session',
+        splitter: {
+            stateStorage: 'session',
+        },
+        tooltip: {
+            placement: 'bottom',
+            offset: 4,
+            showDelay: '0.5s',
+            hideDelay: '0.1s',
+            showArrow: true,
+            showOnHover: true,
+            showOnFocus: true,
+            hideOnTooltipHover: false,
+            hideOnClick: true,
+            autoAriaMode: 'description',
+        },
+    },
+};
+function provideNgnConfig(config) {
+    return [
+        {
+            provide: NGN_CONFIG,
+            useValue: {
+                logLevel: config?.logLevel ?? defaultNgnConfig.logLevel,
+                customTranslations: config?.customTranslations,
+                disableAnimations: config?.disableAnimations ?? defaultNgnConfig.disableAnimations,
+                theme: {
+                    preset: config?.theme?.preset ?? defaultNgnConfig.theme.preset,
+                    lazyLoaded: config?.theme?.lazyLoaded ?? defaultNgnConfig.theme.lazyLoaded,
+                    styleScope: config?.theme?.styleScope ?? defaultNgnConfig.theme.styleScope,
+                    cssLayer: config?.theme?.cssLayer === undefined
+                        ? defaultNgnConfig.theme.cssLayer
+                        : config?.theme?.cssLayer,
+                    namePrefix: config?.theme?.namePrefix ?? defaultNgnConfig.theme.namePrefix,
+                },
+                defaults: {
+                    stateStorage: config?.defaults?.stateStorage ?? defaultNgnConfig.defaults.stateStorage,
+                    splitter: {
+                        stateStorage: config?.defaults?.splitter?.stateStorage ??
+                            config?.defaults?.stateStorage ??
+                            defaultNgnConfig.defaults.splitter.stateStorage,
+                    },
+                    tooltip: {
+                        placement: config?.defaults?.tooltip?.placement ?? defaultNgnConfig.defaults.tooltip.placement,
+                        offset: config?.defaults?.tooltip?.offset ?? defaultNgnConfig.defaults.tooltip.offset,
+                        showDelay: config?.defaults?.tooltip?.showDelay ?? defaultNgnConfig.defaults.tooltip.showDelay,
+                        hideDelay: config?.defaults?.tooltip?.hideDelay ?? defaultNgnConfig.defaults.tooltip.hideDelay,
+                        showArrow: config?.defaults?.tooltip?.showArrow ?? defaultNgnConfig.defaults.tooltip.showArrow,
+                        showOnHover: config?.defaults?.tooltip?.showOnHover ??
+                            defaultNgnConfig.defaults.tooltip.showOnHover,
+                        showOnFocus: config?.defaults?.tooltip?.showOnFocus ??
+                            defaultNgnConfig.defaults.tooltip.showOnFocus,
+                        hideOnTooltipHover: config?.defaults?.tooltip?.hideOnTooltipHover ??
+                            defaultNgnConfig.defaults.tooltip.hideOnTooltipHover,
+                        hideOnClick: config?.defaults?.tooltip?.hideOnClick ??
+                            defaultNgnConfig.defaults.tooltip.hideOnClick,
+                        autoAriaMode: config?.defaults?.tooltip?.autoAriaMode ??
+                            defaultNgnConfig.defaults.tooltip.autoAriaMode,
+                    },
+                },
+            },
+        },
+        provideAppInitializer(() => {
+            const config = inject(NGN_CONFIG);
+            if (config?.customTranslations) {
+                registerCustomLanguages(config.customTranslations);
+            }
+            Logger.logLevel = config.logLevel ?? Logger.logLevel;
+        }),
+    ];
+}
+
+function toPopoverCloseBy(closeBy) {
+    switch (closeBy) {
+        case 'any':
+            return 'auto';
+        case 'escape':
+        case 'none':
+            return 'manual';
+    }
+}
+function toModalCloseBy(closeBy) {
+    switch (closeBy) {
+        case 'any':
+            return 'any';
+        case 'escape':
+            return 'closerequest';
+        case 'none':
+            return 'none';
+    }
+}
+
+function getElement(el) {
+    const rawElement = typeof el === 'function' ? el() : el;
+    const element = rawElement instanceof ElementRef ? rawElement.nativeElement : rawElement;
+    return element;
+}
+function elementSizeSignal(element, active) {
+    const val = elementsSizesSignalInt(element, active);
+    return computed(() => val()[0] ?? { width: 0, height: 0 });
+}
+function elementsSizesSignal(element, active) {
+    return elementsSizesSignalInt(element, active);
+}
+function elementsSizesSignalInt(element, active) {
+    const sizeSignal = signal([], { ...(ngDevMode ? { debugName: "sizeSignal" } : /* istanbul ignore next */ {}), equal: (a, b) => JSON.stringify(a) === JSON.stringify(b) });
+    let elements;
+    afterRenderEffect(() => {
+        resizeObserver.disconnect();
+        if (active && !active()) {
+            return;
+        }
+        const rawElement = typeof element === 'function' ? element() : element;
+        const arrayElement = Array.isArray(rawElement) ? rawElement : rawElement ? [rawElement] : [];
+        elements = arrayElement.map(el => (el instanceof ElementRef ? el.nativeElement : el));
+        if (!elements.length) {
+            return;
+        }
+        sizeSignal.set(elements.map(el => {
+            const rect = el.getBoundingClientRect();
+            return {
+                width: rect.width,
+                height: rect.height,
+            };
+        }));
+        elements.forEach(el => {
+            resizeObserver.observe(el, { box: 'border-box' });
+        });
+    });
+    const destroyRef = inject(DestroyRef);
+    if (typeof ResizeObserver === 'undefined') {
+        return sizeSignal; // ResizeObserver is not supported, return initial size
+    }
+    const resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+            const index = elements.findIndex(el => el === entry.target);
+            sizeSignal.update(s => {
+                const copy = deepCopy(s);
+                const borderBoxSize = entry.borderBoxSize[0];
+                if (!borderBoxSize) {
+                    return s;
+                }
+                copy[index] = {
+                    width: borderBoxSize.inlineSize,
+                    height: borderBoxSize.blockSize,
+                };
+                return copy;
+            });
+        });
+    });
+    destroyRef.onDestroy(() => {
+        resizeObserver.disconnect();
+    });
+    return sizeSignal;
+}
+const ABORT_SIGNAL_SYMBOL = Symbol('AbortSignal');
+/**
+ * @todo use dom event functions directly and remove this function
+ * @deprecated use dom event functions instead
+ */
+function abortSignalOnDestroy(options) {
+    const destroyRef = options?.injector?.get(DestroyRef) ?? inject(DestroyRef);
+    if (ABORT_SIGNAL_SYMBOL in destroyRef) {
+        return destroyRef[ABORT_SIGNAL_SYMBOL];
+    }
+    const abortController = new AbortController();
+    destroyRef.onDestroy(() => {
+        abortController.abort();
+    });
+    destroyRef[ABORT_SIGNAL_SYMBOL] = abortController.signal;
+    return abortController.signal;
+}
+/**
+ * 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.
+ */
+function domEventObservable(element, eventName, injector) {
+    const inj = injector ?? inject(Injector);
+    const result = new Subject();
+    const destroyRef = inj.get(DestroyRef);
+    let subscription;
+    runInInjectionContext(inj, () => {
+        afterRenderEffect(() => {
+            subscription?.unsubscribe();
+            const el = getElement(element);
+            if (!el) {
+                return;
+            }
+            subscription = fromEvent(el, eventName)
+                .pipe(takeUntilDestroyed(destroyRef))
+                .subscribe(e => result.next(e));
+        });
+    });
+    return result.asObservable().pipe(takeUntilDestroyed(destroyRef));
+}
+/**
+ * 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.
+ */
+function domEventSignal(element, eventName, injector) {
+    const inj = injector ?? inject(Injector);
+    const res = runInInjectionContext(inj, () => {
+        const sig = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sig" }] : /* istanbul ignore next */ []));
+        domEventObservable(element, eventName, inj).subscribe(value => {
+            sig.set(value);
+        });
+        return sig;
+    });
+    return res;
+}
+/**
+ * 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.
+ * @param options Optional addEventListener options (e.g. `{ capture: true }`).
+ */
+function domEventHandler(element, eventName, handler, injector, options) {
+    const inj = injector ?? inject(Injector);
+    const destroyRef = inj.get(DestroyRef);
+    runInInjectionContext(inj, () => {
+        const destroyed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "destroyed" }] : /* istanbul ignore next */ []));
+        destroyRef.onDestroy(() => {
+            destroyed.set(true);
+        });
+        const elSig = computed(() => (destroyed() ? null : getElement(element)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elSig" }] : /* istanbul ignore next */ []));
+        const elSigWithPrev = signalWithPrevious(elSig);
+        effect(() => {
+            const element = elSigWithPrev();
+            const previousElement = element.previous;
+            if (previousElement) {
+                previousElement.removeEventListener(eventName, handler, options);
+            }
+            if (element.current) {
+                element.current.addEventListener(eventName, handler, options);
+            }
+        });
+    });
+}
+
+class Platform {
+    _deviceType = signal('desktop', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_deviceType" }] : /* istanbul ignore next */ []));
+    _prefersColorScheme = signal('light', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_prefersColorScheme" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    windowSize = this.isBrowser
+        ? elementSizeSignal(document.body)
+        : signal({ width: 0, height: 0 });
+    width = computed(() => this.windowSize().width, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => this.windowSize().height, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    prefersColorScheme = this._prefersColorScheme;
+    constructor() {
+        const doc = inject(DOCUMENT);
+        const destroyRef = inject(DestroyRef);
+        const win = doc.defaultView;
+        if (!win || typeof win.matchMedia !== 'function') {
+            return;
+        }
+        // color scheme detection (before device-type early returns)
+        const colorMql = win.matchMedia('(prefers-color-scheme: dark)');
+        this._prefersColorScheme.set(colorMql.matches ? 'dark' : 'light');
+        const onColorChange = (e) => this._prefersColorScheme.set(e.matches ? 'dark' : 'light');
+        colorMql.addEventListener('change', onColorChange);
+        destroyRef.onDestroy(() => colorMql.removeEventListener('change', onColorChange));
+        // device type
+        const hasMouse = win.matchMedia('(any-hover: hover)').matches;
+        if (hasMouse) {
+            this._deviceType.set('desktop');
+            return;
+        }
+        const isSmallScreen = win.matchMedia('(max-width: 768px)').matches || win.matchMedia('(max-height: 768px)').matches;
+        if (isSmallScreen) {
+            this._deviceType.set('mobile');
+        }
+        else {
+            this._deviceType.set('tablet');
+        }
+    }
+    isTouchDevice = computed(() => {
+        return this._deviceType() === 'mobile' || this._deviceType() === 'tablet';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouchDevice" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Platform, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Platform });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Platform, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/** Storage key shared by ColorSchemeService and colorSchemeInitScript. */
+const COLOR_SCHEME_STORAGE_KEY = 'ngn-color-scheme';
+const COLOR_SCHEME_STORAGE = new InjectionToken('COLOR_SCHEME_STORAGE');
+/** All valid {@link ColorScheme} values; used to validate values read from storage. */
+const COLOR_SCHEME_VALUES = ['light', 'dark', 'system'];
+/** Cycling order for the UI button; reorder here without affecting storage validation. */
+const CYCLE = ['light', 'dark', 'system'];
+class ColorSchemeService {
+    _platform = inject(Platform);
+    _storage = inject(COLOR_SCHEME_STORAGE);
+    // Must be declared after _platform and _storage: readInitial() reads both.
+    _preference = signal(this.readInitial(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_preference" }] : /* istanbul ignore next */ []));
+    preference = this._preference;
+    resolved = computed(() => {
+        const pref = this._preference();
+        return pref === 'system' ? this._platform.prefersColorScheme() : pref;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    isDark = computed(() => this.resolved() === 'dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        // Use the real browser document, not inject(DOCUMENT), so the dark class lands
+        // on the actual <html> element (matches the theme's :root scope; the SSR mock is a different object).
+        const doc = document;
+        effect(() => {
+            toggleClass(doc.documentElement, 'dark', this.isDark());
+        });
+        effect(() => {
+            this._storage.set(this._preference());
+        });
+    }
+    set(pref) {
+        this._preference.set(pref);
+    }
+    cycle() {
+        const i = CYCLE.indexOf(this._preference());
+        this._preference.set(CYCLE[(i + 1) % CYCLE.length] ?? 'system');
+    }
+    readInitial() {
+        if (!this._platform.isBrowser) {
+            return 'system';
+        }
+        const stored = this._storage.get();
+        return stored && COLOR_SCHEME_VALUES.includes(stored) ? stored : 'system';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorSchemeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorSchemeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+function webStorage(kind) {
+    return {
+        get() {
+            try {
+                const store = kind === 'local' ? localStorage : sessionStorage;
+                const v = store.getItem(COLOR_SCHEME_STORAGE_KEY);
+                return v && COLOR_SCHEME_VALUES.includes(v) ? v : null;
+            }
+            catch {
+                return null;
+            }
+        },
+        set(value) {
+            try {
+                const store = kind === 'local' ? localStorage : sessionStorage;
+                store.setItem(COLOR_SCHEME_STORAGE_KEY, value);
+            }
+            catch {
+                // ignore (private mode / blocked storage)
+            }
+        },
+    };
+}
+function resolveStorage(option) {
+    if (option === 'session')
+        return webStorage('session');
+    if (option === 'local' || option === undefined)
+        return webStorage('local');
+    return option;
+}
+function colorSchemeInitScript(options) {
+    const store = options?.storage === 'session' ? 'sessionStorage' : 'localStorage';
+    return (`(function(){try{` +
+        `var k='${COLOR_SCHEME_STORAGE_KEY}';` +
+        `var s=${store}.getItem(k);` +
+        `var sys=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';` +
+        `var m=(s==='light'||s==='dark')?s:sys;` +
+        `if(m==='dark')document.documentElement.classList.add('dark');` +
+        `}catch(e){}})();`);
+}
+function withAutoColorScheme(options) {
+    return {
+        providers: [
+            ColorSchemeService,
+            { provide: COLOR_SCHEME_STORAGE, useValue: resolveStorage(options?.storage) },
+            // Sole purpose: eagerly instantiate the service so its constructor effects run.
+            provideAppInitializer(() => {
+                inject(ColorSchemeService);
+            }),
+        ],
+    };
+}
+
+function setComponentInput(componentRef, inputName, value) {
+    componentRef.setInput(inputName, value);
+}
+
+function themeTemplateToTemplateInfo(config, template, options) {
+    return {
+        scope: template.scope,
+        class: (className) => getClassName(config.theme.namePrefix, template.scope, className, options?.unstyled?.()),
+        classes: (classes) => {
+            let result = '';
+            for (const className in classes) {
+                if (classes[className]) {
+                    if (result)
+                        result += ' ';
+                    result += getClassName(config.theme.namePrefix, template.scope, className, options?.unstyled?.());
+                }
+            }
+            return result;
+        },
+    };
+}
+function injectThemeTemplate(template, options) {
+    const config = options?.injector?.get(NGN_CONFIG) ?? inject(NGN_CONFIG);
+    const themeService = options?.injector?.get(ThemeService) ?? inject(ThemeService);
+    themeService.loadScope(template.scope);
+    return themeTemplateToTemplateInfo(config, template, { unstyled: options?.unstyled });
+}
+function injectTheme(controlName, options) {
+    const themeService = options?.injector?.get(ThemeService) ?? inject(ThemeService);
+    const theme = themeService.activeTheme();
+    if (!theme) {
+        throw new Error(`No active theme is set. Cannot inject theme for control "${controlName}". Please provide a theme in the configuration or set lazyLoaded to true if you plan to load themes dynamically.`);
+    }
+    const template = theme.parts.find(part => part.scope === controlName)?.controlTemplate;
+    if (!template) {
+        throw new Error(`The active theme "${theme.name}" does not contain a template for control "${controlName}".`);
+    }
+    return template;
+}
+function getAppliedClasses(klass, themeTemplateInfo) {
+    function suffixes() {
+        if (typeof klass === 'string') {
+            return [klass];
+        }
+        else if (typeof klass === 'object' && klass !== null) {
+            return Object.entries(klass)
+                .filter(([_, value]) => (typeof value === 'function' ? value() : value))
+                .map(([key, _]) => key);
+        }
+        return [];
+    }
+    const classes = suffixes().map(suffix => ({
+        class: themeTemplateInfo.class(suffix),
+        name: suffix,
+    }));
+    return classes;
+}
+class ThemeService {
+    _config = inject(NGN_CONFIG);
+    _loadedScopes = new Set();
+    _document = inject(DOCUMENT);
+    activeTheme = signal(this._config.theme?.preset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this._config.theme?.preset && !this._config.theme?.lazyLoaded) {
+            console.warn('No active theme found. Please provide a theme in the configuration or set lazyLoaded to true if you plan to load themes dynamically.');
+        }
+        if (this._config.disableAnimations) {
+            const style = this._document.createElement('style');
+            style.setAttribute('ngn-style', '');
+            // we set the durations instead of setting animation/transition to none,
+            // so that the animation starts/ends are still applied & the events are still fired
+            style.innerHTML = `.ngn-control, .ngn-control * {
+        animation-duration: 0s !important;
+        transition-duration: 0s !important;
+      }`;
+            this._document.head.appendChild(style);
+            Logger.debug('Animations have been disabled via configuration.');
+        }
+        toObservable(this.activeTheme)
+            .pipe(takeUntilDestroyed(), skip(1))
+            .subscribe(this.onThemeChange.bind(this));
+    }
+    loadScope(scope) {
+        if (this._loadedScopes.has(scope)) {
+            Logger.debug(`Theme scope "${scope}" is already loaded.`);
+            return;
+        }
+        const activeTheme = untracked(() => this.activeTheme());
+        if (!activeTheme) {
+            Logger.debug(`No active theme set. Cannot load theme scope "${scope}". Scope will be loaded when the theme is set.`);
+            return;
+        }
+        else {
+            Logger.debug(`Loading theme scope "${scope}" for active theme "${activeTheme.name}".`);
+            this.applyTheme(activeTheme, [scope]);
+        }
+        this._loadedScopes.add(scope);
+    }
+    ngOnDestroy() {
+        Logger.debug('ThemeService is being destroyed. Unloading all theme scopes...');
+        this.unloadAllScopes();
+        this._loadedScopes.clear();
+    }
+    onThemeChange(newTheme) {
+        if (!newTheme) {
+            Logger.warn('The active theme has been set to null.');
+            this.unloadAllScopes();
+            return;
+        }
+        Logger.debug(`Active theme changed to "${newTheme.name}". Reloading scopes...`);
+        this.unloadAllScopes();
+        this._loadedScopes.forEach(scope => {
+            Logger.debug(`Reloading theme scope "${scope}" for active theme "${newTheme.name}".`);
+            this.applyTheme(newTheme, [scope]);
+        });
+    }
+    unloadAllScopes() {
+        this._document.head.querySelectorAll('style[ngn-style][data-theme-scope]').forEach(el => {
+            el.remove();
+        });
+    }
+    applyTheme(theme, scopes) {
+        applyTheme(theme, scopes, {
+            document: this._document,
+            layer: this._config.theme.cssLayer ?? undefined,
+            styleScope: this._config.theme.styleScope ?? undefined,
+            namePrefix: this._config.theme.namePrefix,
+        });
+        applyGlobalStyles(globalStyles, {
+            document: this._document,
+            layer: this._config.theme.cssLayer ?? undefined,
+            styleScope: this._config.theme.styleScope ?? undefined,
+            namePrefix: this._config.theme.namePrefix,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Reactively reads the currently active theme (which may be switched at runtime via
+ * `ThemeService`), falling back to the configured preset. Reading it inside a `computed`
+ * tracks `ThemeService.activeTheme`, so derived kind/color lists update on a theme switch.
+ */
+function injectActiveTheme() {
+    const themeService = inject(ThemeService, { optional: true });
+    const config = inject(NGN_CONFIG);
+    // Only fall back to the configured preset when there is no `ThemeService`. When the service is
+    // present, `activeTheme()` — including its valid `null` (cleared) state — is authoritative and
+    // must be preserved rather than reintroducing the preset.
+    return computed(() => (themeService ? themeService.activeTheme() : config.theme.preset));
+}
+/**
+ * Retrieves the available kinds for a given control from the active theme, as a reactive signal
+ * that updates when the active theme changes. Does **not** return custom kinds defined by the
+ * user in `NgnCustomTypes`.
+ * @param controlName The name of the control to get kinds for.
+ * @returns A signal of the available kinds for the specified control.
+ */
+function injectThemeControlKinds(controlName) {
+    const activeTheme = injectActiveTheme();
+    return computed(() => (activeTheme()?.meta.kinds?.[controlName] ?? []));
+}
+/**
+ * Retrieves the available colors from the active theme, as a reactive signal that updates when
+ * the active theme changes. Does **not** return custom colors defined by the user in
+ * `NgnCustomTypes`.
+ * @returns A signal of the available colors.
+ */
+function injectThemeColors(controlName) {
+    const activeTheme = injectActiveTheme();
+    return computed(() => {
+        const theme = activeTheme();
+        if (controlName) {
+            const classNames = theme?.parts.find(x => x.scope === controlName)?.controlTemplate
+                ?.classNames;
+            if (!classNames?.includes('color-*')) {
+                return [];
+            }
+        }
+        return (theme?.meta.colors ?? []);
+    });
+}
+
+let floatingPromise;
+let floating;
+function loadFloating() {
+    if (!floatingPromise) {
+        floatingPromise = import('@floating-ui/dom').then(m => (floating = m));
+    }
+    return floatingPromise;
+}
+/**
+ * Snap a coordinate to the device-pixel grid. floating-ui returns subpixel
+ * coordinates; setting them raw puts the floating element (and its arrow) on
+ * fractional boundaries, producing blurry, non-deterministic anti-aliasing.
+ * Rounding by DPR keeps rendering crisp and stable. Matches floating-ui's own
+ * `roundByDPR` guidance.
+ */
+function roundByDpr(el, value) {
+    const dpr = el.ownerDocument.defaultView?.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+}
+function filterNonNullishKeys(obj) {
+    return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null));
+}
+function mergeWithDefaults(options) {
+    return {
+        placement: 'bottom',
+        flip: true,
+        resize: true,
+        shift: true,
+        offset: 4,
+        stopped: false,
+        ...filterNonNullishKeys(options),
+    };
+}
+function positionElement(anchor, floatingEl, options = {}) {
+    options = mergeWithDefaults(options);
+    function run(fui) {
+        const { computePosition, flip, offset, shift, size } = fui;
+        const referenceElement = toReferenceElement(anchor);
+        const flipMiddleware = options.flip
+            ? flip(options.shift ? { crossAxis: 'alignment', fallbackAxisSideDirection: 'end' } : undefined)
+            : undefined;
+        const shiftMiddleware = options.shift ? shift() : undefined;
+        if (options.sizeConstraints) {
+            if (options.sizeConstraints.width || options.sizeConstraints.maxWidth) {
+                const refWidth = referenceElement.getBoundingClientRect().width;
+                if (options.sizeConstraints.width) {
+                    if (typeof options.sizeConstraints.width === 'string') {
+                        floatingEl.style.width = options.sizeConstraints.width;
+                    }
+                    else {
+                        const widthConstraints = options.sizeConstraints.width * refWidth;
+                        floatingEl.style.width = `min(100%, ${widthConstraints}px)`;
+                    }
+                }
+                if (options.sizeConstraints.maxWidth) {
+                    if (typeof options.sizeConstraints.maxWidth === 'string') {
+                        floatingEl.style.maxWidth = options.sizeConstraints.maxWidth;
+                    }
+                    else {
+                        const maxWidthConstraints = options.sizeConstraints.maxWidth * refWidth;
+                        floatingEl.style.maxWidth = `min(100%, ${maxWidthConstraints}px)`;
+                    }
+                }
+            }
+            if (options.sizeConstraints.height || options.sizeConstraints.maxHeight) {
+                if (options.sizeConstraints.height) {
+                    floatingEl.style.height = options.sizeConstraints.height;
+                }
+                if (options.sizeConstraints.maxHeight) {
+                    floatingEl.style.maxHeight = options.sizeConstraints.maxHeight;
+                }
+            }
+            if (options.sizeConstraints.minWidth) {
+                floatingEl.style.minWidth = options.sizeConstraints.minWidth;
+            }
+        }
+        void computePosition(referenceElement, floatingEl, {
+            placement: options.placement,
+            strategy: options.strategy,
+            middleware: [
+                options.offset ? offset(options.offset) : undefined,
+                options.resize
+                    ? size({
+                        apply({ availableHeight }) {
+                            const maxHeightConstraint = options.sizeConstraints?.maxHeight;
+                            const maxHeightInPx = maxHeightConstraint?.replace(/px$/, '');
+                            const maxHeight = maxHeightInPx
+                                ? Math.min(availableHeight, parseInt(maxHeightInPx))
+                                : availableHeight;
+                            if (options.hasShrinkableContent) {
+                                Object.assign(floatingEl.style, {
+                                    height: `${maxHeight - 1}px`,
+                                });
+                            }
+                        },
+                    })
+                    : undefined,
+                ...(options.placement?.includes('-')
+                    ? [flipMiddleware, shiftMiddleware]
+                    : [shiftMiddleware, flipMiddleware]),
+                ...(options.middleware || []),
+            ].filter(Boolean),
+        }).then(pos => {
+            if (!options.disableSettingStyles) {
+                const flipped = pos.middlewareData.flip?.index;
+                const flippedToLREnd = flipped &&
+                    (pos.placement.startsWith('left-') || pos.placement.startsWith('right-')) &&
+                    pos.placement.endsWith('-end');
+                const flippedToTop = flipped && pos.placement.startsWith('top');
+                Object.assign(floatingEl.style, {
+                    left: `${roundByDpr(floatingEl, pos.x)}px`,
+                    top: `${roundByDpr(floatingEl, pos.y)}px`,
+                    justifyContent: flippedToLREnd || flippedToTop ? 'flex-end' : 'flex-start',
+                });
+            }
+            options.onPositionChange?.(pos);
+        });
+    }
+    if (floating) {
+        run(floating);
+    }
+    else {
+        void loadFloating().then(run);
+    }
+}
+function toReferenceElement(anchor) {
+    const referenceElement = anchor instanceof HTMLElement
+        ? anchor
+        : {
+            getBoundingClientRect: () => ({
+                x: anchor.x,
+                y: anchor.y,
+                width: 1,
+                height: 1,
+                top: anchor.y,
+                right: anchor.x + 1,
+                bottom: anchor.y + 1,
+                left: anchor.x,
+            }),
+        };
+    return referenceElement;
+}
+function autoPositionElement(anchor, floatingEl, options = {}) {
+    options = mergeWithDefaults(options);
+    // Prefetch the floating-ui chunk as soon as a tooltip/popover directive instantiates
+    // so the first open does not flash. This is a download trigger only — it does not start.
+    void loadFloating();
+    let cleanup;
+    let started = false; // intent: should be running
+    const destroyRef = options.injector?.get(DestroyRef) ?? inject(DestroyRef);
+    function startAutoUpdate(fui) {
+        // Defensive: a previous start may have already assigned a live cleanup
+        // (e.g. two rapid start() calls sharing the cached load promise).
+        cleanup?.();
+        cleanup = fui.autoUpdate(toReferenceElement(anchor), floatingEl, () => {
+            positionElement(anchor, floatingEl, options);
+        });
+    }
+    destroyRef.onDestroy(() => {
+        started = false;
+        cleanup?.();
+        cleanup = undefined;
+    });
+    return {
+        start: () => {
+            started = true;
+            if (floating) {
+                // Atomic teardown+reinstall, matching the original synchronous behavior.
+                startAutoUpdate(floating);
+            }
+            else {
+                cleanup?.();
+                cleanup = undefined;
+                void loadFloating().then(fui => {
+                    if (!started) {
+                        return; // a stop()/destroy landed during load — bail, no leak
+                    }
+                    startAutoUpdate(fui);
+                });
+            }
+        },
+        stop: () => {
+            started = false;
+            cleanup?.();
+            cleanup = undefined;
+        },
+        isRunning: () => started,
+    };
+}
+function splitPlacement(placement) {
+    return placement.split('-');
+}
+
+function provideNgnControls(config, ...features) {
+    return [
+        NgnGlobal,
+        ThemeService,
+        I18n,
+        Platform,
+        provideNgnConfig(config),
+        ...features.map(f => f.providers).flat(),
+    ];
+}
+
+/** One year, in seconds — used as the cookie `max-age`. */
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+class NgnStorage {
+    _store;
+    _set;
+    set(key, value) {
+        untracked(() => {
+            const newVal = {
+                ...this._store(),
+                [key]: value,
+            };
+            this._store.set(newVal);
+            this._set(newVal);
+        });
+    }
+    get(key) {
+        return this._store()[key];
+    }
+    /**
+     * NOTE: must be constructed within an injection context — the built-in kinds
+     * read the platform (`PLATFORM_ID`) to stay SSR-safe, and the `cookie` kind
+     * additionally reads `DOCUMENT` / the SSR `REQUEST`.
+     */
+    constructor(key, kind, initialValue) {
+        this._store = signal(initialValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_store" }] : /* istanbul ignore next */ []));
+        // Custom adapter — the caller fully controls persistence.
+        if (typeof kind === 'object') {
+            this._store.set(kind.initialize() ?? initialValue);
+            this._set = kind.update;
+            return;
+        }
+        const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        // Cookies are the only kind readable during SSR (from the request headers).
+        if (kind === 'cookie') {
+            const doc = inject(DOCUMENT);
+            const cookieString = isBrowser
+                ? doc.cookie
+                : (inject(REQUEST, { optional: true })?.headers.get('cookie') ?? '');
+            this._store.set(this._parse(key, readCookie(cookieString, key), initialValue));
+            // Writes only happen in the browser; the server render is read-only.
+            this._set = isBrowser
+                ? value => {
+                    const encoded = encodeURIComponent(JSON.stringify(value ?? {}));
+                    const secure = doc.location?.protocol === 'https:' ? ';secure' : '';
+                    doc.cookie = `${encodeURIComponent(key)}=${encoded};path=/;max-age=${COOKIE_MAX_AGE};samesite=lax${secure}`;
+                }
+                : () => {
+                    /* no-op on the server */
+                };
+            return;
+        }
+        // localstorage / sessionstorage are browser-only; no-op (keep the initial
+        // value) during SSR so the render doesn't crash.
+        if (!isBrowser) {
+            this._set = () => {
+                /* no-op on the server */
+            };
+            return;
+        }
+        const storage = kind === 'localstorage' ? localStorage : sessionStorage;
+        this._store.set(this._parse(key, storage.getItem(key), initialValue));
+        this._set = (value) => storage.setItem(key, JSON.stringify(value ?? {}));
+    }
+    /** Parse persisted JSON, falling back to the caller's initial value. */
+    _parse(key, raw, fallback) {
+        if (!raw) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch (error) {
+            Logger.warn(`Could not parse stored value for key ${key}`, error);
+            return fallback;
+        }
+    }
+}
+/** Read a single cookie value from a `Cookie` header / `document.cookie` string. */
+function readCookie(cookieString, key) {
+    const name = encodeURIComponent(key);
+    for (const part of cookieString.split(';')) {
+        const separator = part.indexOf('=');
+        if (separator === -1) {
+            continue;
+        }
+        if (part.slice(0, separator).trim() === name) {
+            return decodeURIComponent(part.slice(separator + 1));
+        }
+    }
+    return null;
+}
+
+class NgnTemplate {
+    ngnTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnTemplate" }] : /* istanbul ignore next */ []));
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTemplate, isStandalone: true, selector: "ng-template[ngnTemplate]", inputs: { ngnTemplate: { classPropertyName: "ngnTemplate", publicName: "ngnTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngnTemplate]',
+                }]
+        }], propDecorators: { ngnTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTemplate", required: true }] }] } });
+/**
+ * A noop with return type T.
+ * This function is used to define typed properties to use in a template.
+ */
+function templateTypesFn() {
+    return {};
+}
+/**
+ * A noop with return type `{ $implicit: Implicit } & Named`.
+ * This function is used to define a typed property to use in a template.
+ */
+function templateTypeFn() {
+    return {};
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLOR_SCHEME_STORAGE, COLOR_SCHEME_STORAGE_KEY, COLOR_SCHEME_VALUES, ColorSchemeService, NGN_CONFIG, NgnStorage, NgnTemplate, Platform, ThemeService, abortSignalOnDestroy, autoPositionElement, colorSchemeInitScript, defaultNgnConfig, domEventHandler, domEventObservable, domEventSignal, elementSizeSignal, elementsSizesSignal, getAppliedClasses, injectTheme, injectThemeColors, injectThemeControlKinds, injectThemeTemplate, positionElement, provideNgnConfig, provideNgnControls, roundByDpr, setComponentInput, splitPlacement, templateTypeFn, templateTypesFn, themeTemplateToTemplateInfo, toModalCloseBy, toPopoverCloseBy, withAutoColorScheme };
+//# sourceMappingURL=ngneers-controls-api-ng.mjs.map