@ngneers/controls 0.0.1-pre1 → 0.0.1-pre3

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

@@ -0,0 +1,668 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, provideAppInitializer, inject, ElementRef, computed, signal, afterRenderEffect, DestroyRef, Injector, runInInjectionContext, effect, PLATFORM_ID, DOCUMENT, Injectable, untracked, input, Directive } from '@angular/core';
+import { registerCustomLanguages, I18n } from '@ngneers/controls/i18n';
+import { Logger, deepCopy } from '@ngneers/controls/utils';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { signalWithPrevious, NgnGlobal } from '@ngneers/controls/utils-ng';
+import { Subject, fromEvent, skip } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
+import { flip, shift, computePosition, offset, size, autoUpdate } from '@floating-ui/dom';
+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,
+        },
+    },
+};
+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,
+                    },
+                },
+            },
+        },
+        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 setComponentInput(componentRef, inputName, value) {
+    componentRef.setInput(inputName, value);
+}
+
+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" } : {}), 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');
+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, ...(ngDevMode ? [{ debugName: "sig" }] : []));
+        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.
+ */
+function domEventHandler(element, eventName, handler, injector) {
+    const inj = injector ?? inject(Injector);
+    const destroyRef = inj.get(DestroyRef);
+    runInInjectionContext(inj, () => {
+        const destroyed = signal(false, ...(ngDevMode ? [{ debugName: "destroyed" }] : []));
+        destroyRef.onDestroy(() => {
+            destroyed.set(true);
+        });
+        const elSig = computed(() => (destroyed() ? null : getElement(element)), ...(ngDevMode ? [{ debugName: "elSig" }] : []));
+        const elSigWithPrev = signalWithPrevious(elSig);
+        effect(() => {
+            const element = elSigWithPrev();
+            const previousElement = element.previous;
+            if (previousElement) {
+                previousElement.removeEventListener(eventName, handler);
+            }
+            if (element.current) {
+                element.current.addEventListener(eventName, handler);
+            }
+        });
+    });
+}
+
+/**
+ * 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)
+ */
+function injectThemeControlKinds(controlName) {
+    const val = inject(NGN_CONFIG).theme.preset?.meta.kinds?.[controlName] ?? [];
+    return val;
+}
+/**
+ * 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)
+ */
+function injectThemeColors(controlName) {
+    const theme = inject(NGN_CONFIG).theme;
+    if (controlName) {
+        const classNames = theme.preset?.parts.find(x => x.scope === controlName)?.controlTemplate
+            ?.classNames;
+        const hasColor = classNames?.includes('color-*');
+        if (!hasColor) {
+            return [];
+        }
+    }
+    const val = theme.preset?.meta.colors ?? [];
+    return val;
+}
+
+class Platform {
+    _deviceType = signal('desktop', ...(ngDevMode ? [{ debugName: "_deviceType" }] : []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    windowSize = this.isBrowser
+        ? elementSizeSignal(document.body)
+        : signal({ width: 0, height: 0 });
+    width = computed(() => this.windowSize().width, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = computed(() => this.windowSize().height, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    constructor() {
+        const doc = inject(DOCUMENT);
+        const win = doc.defaultView;
+        if (!win) {
+            return;
+        }
+        if (typeof win.matchMedia !== 'function') {
+            return;
+        }
+        const hasMouse = win.matchMedia('(any-hover: hover)').matches;
+        if (hasMouse) {
+            this._deviceType.set('desktop');
+            return;
+        }
+        const isSmallScreen = window.matchMedia('(max-width: 768px)').matches ||
+            window.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';
+    }, ...(ngDevMode ? [{ debugName: "isTouchDevice" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Platform, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Platform });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Platform, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+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);
+    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;
+        }
+    }
+    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: `${pos.x}px`,
+                top: `${pos.y}px`,
+                justifyContent: flippedToLREnd || flippedToTop ? 'flex-end' : 'flex-start',
+            });
+        }
+        options.onPositionChange?.(pos);
+    });
+}
+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);
+    let cleanup;
+    const destroyRef = options.injector?.get(DestroyRef) ?? inject(DestroyRef);
+    function startAutoUpdate() {
+        cleanup = autoUpdate(toReferenceElement(anchor), floatingEl, () => {
+            positionElement(anchor, floatingEl, options);
+        });
+        return cleanup;
+    }
+    destroyRef.onDestroy(() => {
+        cleanup?.();
+        cleanup = undefined;
+    });
+    return {
+        start: () => {
+            cleanup?.();
+            startAutoUpdate();
+        },
+        stop: () => {
+            cleanup?.();
+            cleanup = undefined;
+        },
+        isRunning: () => !!cleanup,
+    };
+}
+function splitPlacement(placement) {
+    return placement.split('-');
+}
+
+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, ...(ngDevMode ? [{ debugName: "activeTheme" }] : []));
+    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._loadedScopes.forEach(scope => {
+            Logger.debug(`Reloading theme scope "${scope}" for active theme "${newTheme.name}".`);
+            this.applyTheme(newTheme, [scope]);
+        });
+    }
+    unloadAllScopes() {
+        Logger.warn('Unloading all theme scopes is not implemented yet. This is a placeholder method.');
+    }
+    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: "21.1.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+function provideNgnControls(config, ...features) {
+    return [
+        NgnGlobal,
+        ThemeService,
+        I18n,
+        Platform,
+        provideNgnConfig(config),
+        ...features.map(f => f.providers).flat(),
+    ];
+}
+
+class NgnTemplate {
+    ngnTemplate = input.required(...(ngDevMode ? [{ debugName: "ngnTemplate" }] : []));
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: "21.1.0", 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 { 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 };
+//# sourceMappingURL=ngneers-controls-api-ng.mjs.map