import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, computed, Injectable, inject, ElementRef, input, effect, Directive, model, booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, HostListener, Output, untracked, ViewContainerRef, TemplateRef, createComponent, Renderer2, EnvironmentInjector, Injector, ContentChildren, viewChild, forwardRef, NgZone, InjectionToken, output, viewChildren, HostBinding, DestroyRef, Input, contentChild, ContentChild, NgModule, runInInjectionContext, provideExperimentalZonelessChangeDetection, reflectComponentType, linkedSignal, contentChildren } from '@angular/core';
import * as i1$3 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR, FormGroupDirective, isFormGroup, isFormArray, NgControl, NG_VALIDATORS } from '@angular/forms';
import { v5, NIL, v4 } from 'uuid';
import { TonalPalette, argbFromRgb } from '@material/material-color-utilities';
import { hex, hsl } from 'color-convert';
import { memoize, clamp, capitalize, flow, size } from 'lodash-es';
import stringify from 'safe-stable-stringify';
import { BroadcastChannel } from 'broadcast-channel';
import { Subject, fromEvent, map, filter, BehaviorSubject, combineLatest, merge, switchMap, distinctUntilChanged, timer, startWith, tap, shareReplay, of, NEVER, defer, repeat, take, throwError } from 'rxjs';
import * as i2 from '@angular/cdk/drag-drop';
import { DragDropModule, CdkDrag } from '@angular/cdk/drag-drop';
import * as i3 from '@angular/cdk/portal';
import { TemplatePortal, PortalModule, DomPortal } from '@angular/cdk/portal';
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1$1 from '@angular/router';
import { Router, NavigationStart, ActivatedRoute, RouterModule, NavigationEnd } from '@angular/router';
import { filter as filter$1, map as map$1 } from 'rxjs/operators';
import { extractAllColors, getIcon, normalizeClassNames, removeInlineStyles, fullWidth, fullHeight, NxIconEnum } from 'nx-icons';
import { isSameDay } from 'date-fns';
import * as i1$2 from 'nx-shared';
import { NxThemeAttributeDirective, writeOnlySignal, ariaComputed, connectedPosition, scrollItemIntoView, clickedInside } from 'nx-shared';
import { createCustomElement } from '@angular/elements';
import { createApplication } from '@angular/platform-browser';
import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
import * as i2$1 from '@angular/cdk/overlay';
import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const getStoryBookWindow = () => document?.querySelector('iframe[data-is-storybook=true]')?.contentWindow;
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const dispatch = (event) => getStoryBookWindow()?.dispatchEvent(event);

const brandKey = v5('thick-client-brand', NIL);
const brandBgKey = v5('thick-client-brand-bg', NIL);
const vmsApiEnabled = v5('vms-api-enabled', NIL);
const isVmsApiEnabled = () => {
    const enabled = 
    // @ts-expect-error - Custom flag to check if integration
    !!window?.isVmsApiEnabled || window.localStorage.getItem(vmsApiEnabled) === 'true';
    window.localStorage.setItem(vmsApiEnabled, enabled ? 'true' : 'false');
    return enabled;
};
const getInitialBranding = () => {
    const brand = '#2FA2DB';
    const brandBg = '#2FA2DB';
    if (!isVmsApiEnabled()) {
        return {
            brand,
            brandBg,
        };
    }
    const brandThickClient = localStorage.getItem(brandKey);
    const brandBgThickCLient = localStorage.getItem(brandBgKey);
    return {
        brand: brandThickClient && isHexString(brandThickClient) ? brandThickClient : brand,
        brandBg: brandBgThickCLient && isHexString(brandBgThickCLient) ? brandBgThickCLient : brandBg,
    };
};
const updateInitialBranding = (branding) => {
    localStorage.setItem(brandKey, branding.brand);
    localStorage.setItem(brandBgKey, branding.brandBg);
};

const brandColors = ['brand', 'brandBg'];
const additionalColors = [
    'additionalPink',
    'additionalPurple',
    'additionalDeepPurple',
    'additionalIndigo',
    'additionalLightBlue',
    'additionalCyan',
    'additionalTeal',
    'additionalLightGreen',
    'additionalLime',
    'additionalAmber',
    'additionalOrange',
    'additionalDeepOrange',
];
const attentionColors = [
    'attentionErrorRed',
    'attentionWarningYellow',
    'attentionInfoBlue',
    'attentionSuccessGreen',
];
const contrastColors = [
    'contrastBlue',
    'contrastYellow',
    'contrastOrange',
    'contrastGreen',
    'contrastDeepPurple',
    'contrastPink',
    'contrastCyan',
    'contrastPurple',
];
const themeColors = [
    ...brandColors,
    ...additionalColors,
    ...attentionColors,
    ...contrastColors,
];
const generatedThemeColors = ['core'];
const initialShade = { key: 'initial', value: 'initial' };
const stepCount = 100 / 3;
const generateShades = (every = 1) => {
    const step = (100 / stepCount) * every;
    const generate = (type) => Array(18)
        .fill(0)
        .map((_, index) => {
        const current = index + 1;
        const offset = Math.floor(current / every) * step;
        const value = (type === 'light' ? 0 + offset : 100 - offset);
        return {
            key: `${type}${current}`,
            value,
        };
    });
    return [...generate('light'), ...generate('dark').reverse(), initialShade];
};
const shades = generateShades();
const highContrastShades = generateShades(7);
const colorsWithoutShade = [];
const isThemeColorWithoutShade = (color) => colorsWithoutShade.includes(color);
const opacityMap = {
    1: 5,
    2: 10,
    3: 15,
    4: 20,
    5: 25,
    6: 30,
    7: 35,
    8: 40,
    9: 45,
    10: 50,
    11: 55,
    12: 60,
    13: 65,
    14: 70,
    15: 75,
    16: 80,
    17: 85,
    18: 90,
    19: 95,
    20: 100,
};
const isHexString = (hex) => !Array.isArray(hex) && /^#[0-9A-F]{6}$/i.test(hex);
const isHexStrings = (hex) => Array.isArray(hex) && hex.every(isHexString);
const shadeDelimiter = '_shade_';
const opacityDelimiter = '_opacity_';
/**
 * Eventually add loader
 */
const initialTheme = {
    ...getInitialBranding(),
    additionalPink: '#EC407A',
    additionalPurple: '#AB47BC',
    additionalDeepPurple: '#7E57C2',
    additionalIndigo: '#5C6BC0',
    additionalLightBlue: '#29B6F6',
    additionalCyan: '#26C6DA',
    additionalTeal: '#26A69A',
    additionalLightGreen: '#9CCC65',
    additionalLime: '#D4E157',
    additionalAmber: '#FFCA28',
    additionalOrange: '#FFA726',
    additionalDeepOrange: '#FF7043',
    attentionErrorRed: ['#EF5350', '#C62828'],
    attentionWarningYellow: ['#FFCA28', '#FF8F00'],
    attentionInfoBlue: ['#42A5F5', '#1565C0'],
    attentionSuccessGreen: ['#4CAF50', '#2E7D32'],
    contrastBlue: '#536DFE',
    contrastYellow: '#FFFF00',
    contrastOrange: '#FFAB40',
    contrastGreen: '#B2FF59',
    contrastDeepPurple: '#7C4DFF',
    contrastPink: '#FF4081',
    contrastCyan: '#18FFFF',
    contrastPurple: '#E040FB',
};
const initialOptions = {
    offset: 0,
    inverse: isVmsApiEnabled(),
    matchClientTheme: true,
    highContrast: false,
    coreSaturation: 20,
    backgroundLuminosity: 15,
    useHct: false,
};

const hash = (...args) => stringify(args);
function generateCssVariableName(baseColor, shadeOrOpacity = 'initial', opacity = 20) {
    const noShade = isThemeColorWithoutShade(baseColor);
    const shade = noShade ? 'initial' : shadeOrOpacity;
    if (noShade) {
        return `${baseColor}_shade_initial_opacity_${opacity}`;
    }
    return `${baseColor}_shade_${shade}_opacity_${opacity}`;
}
function mathRound2Dec(num) {
    return Math.round(num * 100) / 100;
}
const generateHslaString = memoize((hue, saturation, lightness, alpha = 100) => {
    const values = `${mathRound2Dec(hue)}, ${mathRound2Dec(saturation)}%, ${mathRound2Dec(lightness)}%, ${alpha / 100}`;
    return `hsla(${values})`;
}, hash);
const getHexStringFromTheme = (colorConfig, inverse = false) => {
    if (isHexStrings(colorConfig)) {
        return colorConfig[inverse ? 0 : 1];
    }
    else {
        return colorConfig;
    }
};
const extractBaseHexColor = memoize((theme, colorVariable, options) => {
    const baseColor = colorVariable.split('_')[0];
    return hex.hsl
        .raw(getHexStringFromTheme(theme[baseColor], options?.inverse))
        .map(value => mathRound2Dec(value));
}, hash);
const extractShade = memoize((colorVariable, inverse, highContrast) => {
    let shadeFromVariable = colorVariable.split('_shade_')[1]?.split('_')?.[0];
    if (inverse && shadeFromVariable !== 'initial') {
        const replaceOrder = shadeFromVariable.includes('dark')
            ? ['dark', 'light']
            : ['light', 'dark'];
        shadeFromVariable = shadeFromVariable.replace(replaceOrder[0], replaceOrder[1]);
    }
    const parsedShade = (highContrast ? highContrastShades : shades).find(({ key }) => key === shadeFromVariable)?.value ?? 51;
    return parsedShade;
}, hash);
const getTonalPaletteInstance = memoize((hexColor) => {
    return TonalPalette.fromInt(argbFromRgb(...hex.rgb(hexColor)));
});
const extractOpacity = memoize((colorVariable) => {
    const opacity = parseInt(colorVariable.split('_opacity_')[1] || '100');
    const parsedOpacity = opacityMap[opacity] || 100;
    return parsedOpacity;
}, hash);
const hctToHsl = memoize((palette) => {
    return hex.hsl(`#${palette.toInt().toString(16).slice(2).toUpperCase()}`);
});
const generateHslaStringUsingHct = memoize((color, luminosity, opacity = 100) => {
    const palette = getTonalPaletteInstance(color).getHct(luminosity);
    return generateHslaString(...hctToHsl(palette), opacity);
}, hash);
const generateHslaStringFromTheme = memoize((theme, colorVariable, options) => {
    const { offset = 0, inverse = false, highContrast = false, ignoreInverseForOffset = false, } = options;
    const [hue, saturation, baseLuminosity] = extractBaseHexColor(theme, colorVariable, options);
    const applyOffset = (luminosity) => {
        if (offset && luminosity) {
            if (inverse && !ignoreInverseForOffset) {
                luminosity += offset;
            }
            else {
                luminosity -= offset;
            }
        }
        return clamp(luminosity, 0, 100);
    };
    const extractedLuminosity = extractShade(colorVariable, inverse, highContrast);
    const luminosity = extractedLuminosity === 'initial' ? baseLuminosity : applyOffset(extractedLuminosity);
    const opacity = extractOpacity(colorVariable);
    const baseColor = colorVariable.split('_')[0];
    const useInitial = colorVariable.split('_shade_')[1]?.split('_')?.[0] === 'initial';
    if (options.useHct && !useInitial) {
        return generateHslaStringUsingHct(getHexStringFromTheme(theme[baseColor], inverse), luminosity, opacity);
    }
    return generateHslaString(hue, saturation, luminosity, opacity);
}, hash);
const applyCoreSaturation = memoize((base, options) => {
    const { coreSaturation = 15 } = options;
    const [hue, saturation] = hex.hsl(base);
    return hsl.hex([hue, Math.min(coreSaturation, saturation), 50]);
}, hash);
const withGeneratedColors = memoize((initialTheme, options) => {
    return {
        ...initialTheme,
        core: applyCoreSaturation(getHexStringFromTheme(initialTheme.brandBg), options),
    };
}, hash);
class ColorGenerator {
    constructor() {
        this.createTheme = memoize(({ theme, options }) => {
            const target = {};
            return new Proxy(target, {
                get(target, colorCode) {
                    if (!(colorCode in target)) {
                        target[colorCode] = generateHslaStringFromTheme(theme, colorCode, options || {});
                    }
                    const value = Reflect.get(target, colorCode);
                    return value;
                },
            });
        }, hash);
    }
}

const background = generateCssVariableName('core', 'dark1');
const textColor = generateCssVariableName('core', 'light2');
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const scrollbarColorHandle = (darkMode = false) => generateCssVariableName('core', darkMode ? 'dark5' : 'dark7');
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const scrollbarColorTrack = (darkMode = false) => generateCssVariableName('core', darkMode ? 'dark3' : 'dark5');

const defineCustomEventFactory = (eventName) => (detail) => new CustomEvent(eventName, { detail });
const themeUpdatedEventName = 'nx-components:theme:updated';
const createThemeUpdateEvent = defineCustomEventFactory(themeUpdatedEventName);
const themePatchEventName = 'nx-components:theme:patch';
const createThemePatchEvent = defineCustomEventFactory(themePatchEventName);
const themeResetEventName = 'nx-components:theme:reset';
const createThemeResetEvent = defineCustomEventFactory(themeResetEventName);
const baseColorStorybookEventName = 'nx-components:storybook:set-base';
const createColorStorybookEvent = (color) => new CustomEvent(baseColorStorybookEventName, { detail: color });
const colorGroupStorybookEventName = 'nx-components:storybook:set-group';
const createColorGroupStorybookEvent = (group) => new CustomEvent(colorGroupStorybookEventName, { detail: group });
const createComponentVariablesEventName = 'nx-components:component:variables';
const createComponentVariablesEvent = (detail) => new CustomEvent(createComponentVariablesEventName, { detail });
const toggleSecondaryMenuEventName = 'nx-components:layout:toggleSecondaryMenu';
const toggleSecondaryMenuEvent = (open) => new CustomEvent(toggleSecondaryMenuEventName, { detail: open });
const toggleModalEventName = 'nx-components:layout:toggleModal';
const toggleModalEvent = (open, width, collapsible = true) => new CustomEvent(toggleModalEventName, { detail: { open, width, collapsible } });

/**
 * The two way theme sync channel is a broadcast channel that can be used to sync the theme
 * between tabs from the same origin.
 *
 * It implements the ThemeProvider and ThemeConsumer interfaces.
 *
 * Whenever postMessage is called on an instance of TwoWayThemeSyncChannel, the theme will be
 * broadcasted to all other tabs that are listening to the same channel.
 */
class TwoWayThemeSyncChannel extends BroadcastChannel {
    async postMessage(theme) {
        super.postMessage({ initiator: this.windowId, theme });
    }
    constructor() {
        super(v5('nx-theme-sync', NIL));
        this.themeUpdate$ = new Subject();
        this.theme$ = this.themeUpdate$.asObservable();
        this.windowId = v4();
        this.onmessage = (event) => {
            if (!event.data) {
                return;
            }
            const { initiator, theme } = event.data;
            if (initiator !== this.windowId) {
                this.themeUpdate$.next(theme);
            }
        };
    }
}
/**
 * The parent theme consumer listens for theme updates from the parent window.
 *
 * It implements the ThemeConsumer interface.
 *
 * It's used to keep styling synced for embedded iframes.
 */
class ParentThemeConsumer {
    constructor() {
        this.theme$ = fromEvent(window, 'message').pipe(map(event => event?.data?.theme), filter(Boolean));
    }
}
/**
 * The iframe theme provider is used to provide the theme to iframes within the current window.
 *
 * It implements the ThemeProvider interface.
 *
 * It is used to provide the latest theme to iframes within the current window.
 */
class IframeThemeProvider {
    getIframes() {
        const iframes = new Set(document.querySelectorAll('iframe'));
        iframes.forEach(iframe => {
            iframe.style.border = 'none';
            if (!iframe.classList.contains('nx-skip-opacity')) {
                iframe.style.opacity = '0';
            }
            iframe.style.transition = 'opacity 0.25s ease-out';
            const opacityHandler = [
                () => {
                    iframe.style.opacity = '1';
                },
                { once: true },
            ];
            iframe.addEventListener('load', ...opacityHandler);
            iframe.addEventListener('error', ...opacityHandler);
        });
        return iframes;
    }
    postMessage(theme) {
        this.themeUpdater$.next(theme);
    }
    constructor(theme) {
        this.iframes$ = new BehaviorSubject(this.getIframes());
        this.themeUpdater$ = new BehaviorSubject(theme);
        /**
         * Factory function to create an updater function that will send the theme update message
         * to the iframe when it loads.
         *
         * @param iframe The iframe to which the theme update message will be sent.
         * @returns updater function that will send the theme update message to the iframe.
         */
        const themeUpdateMessageFactory = (iframe) => {
            const updater = () => iframe.contentWindow?.postMessage({ theme: this.themeUpdater$.value }, '*');
            updater();
            return updater;
        };
        combineLatest([this.themeUpdater$, this.iframes$]).subscribe(([_, iframes]) => iframes.forEach(iframe => iframe.addEventListener('load', themeUpdateMessageFactory(iframe))));
        const isIframe = (node) => node instanceof HTMLIFrameElement;
        new MutationObserver(mutations => {
            const hasChanges = mutations
                .filter(({ type }) => type === 'childList')
                .flatMap(mutation => [...mutation.addedNodes, ...mutation.removedNodes].filter(isIframe)).length;
            if (hasChanges) {
                this.iframes$.next(this.getIframes());
            }
        }).observe(document.body, { childList: true, subtree: true });
    }
}
class NxThemeProviderService {
    updateThemeOptions(options) {
        this.theme.update(({ theme, options: initialOptions = {} }) => {
            return {
                theme,
                options: {
                    ...initialOptions,
                    ...options,
                },
            };
        });
        this.notify();
    }
    updateThemeColor(colorNameOrThemePartial, colorValue) {
        const updatedValues = typeof colorNameOrThemePartial === 'string'
            ? { [colorNameOrThemePartial]: colorValue }
            : colorNameOrThemePartial;
        this.theme.update(({ theme, options = {} }) => {
            return {
                theme: {
                    ...theme,
                    ...updatedValues,
                },
                options,
            };
        });
        this.notify();
    }
    toggleTheme(inverse) {
        this.theme.update(({ theme, options = {} }) => {
            inverse = inverse ?? !options?.inverse;
            return {
                theme,
                options: {
                    ...options,
                    inverse,
                },
            };
        });
        this.notify();
    }
    getColorsWithThemeOverride(options) {
        const { theme, options: baseOptions = {} } = this.currentTheme();
        options = {
            ...baseOptions,
            ...options,
        };
        return this.colorGenerator.createTheme({
            theme: withGeneratedColors(theme, options),
            options,
        });
    }
    notify() {
        window.dispatchEvent(createThemeUpdateEvent(this.theme()));
        if (window.IS_STORYBOOK) {
            this.updateStorybookBackground();
        }
        this.iframeThemeProvider.postMessage(this.currentTheme());
        this.twoWaySyncChannel.postMessage(this.currentTheme());
    }
    setBackgroundColors() {
        const updatedColors = this.colors();
        const isDarkMode = !!this.theme().options?.inverse;
        document.body.style.setProperty('background', updatedColors[background]);
        document.body.style.setProperty('color', updatedColors[textColor]);
        document.documentElement.style.setProperty('scrollbar-color', `${updatedColors[scrollbarColorHandle(isDarkMode)]} ${updatedColors[scrollbarColorTrack(isDarkMode)]}`);
        document.documentElement.style.setProperty('scrollbar-width', 'thin');
    }
    updateStorybookBackground() {
        const updatedColors = this.colors();
        document.body.style.setProperty('background', updatedColors[background]);
        document.body.style.setProperty('color', updatedColors[textColor]);
        document.querySelectorAll('.docs-story').forEach(element => {
            element.style.setProperty('background', updatedColors[background]);
            element.style.setProperty('color', updatedColors[textColor]);
        });
    }
    constructor() {
        this.colorGenerator = new ColorGenerator();
        // Should brand color be synced if within integration
        this.syncWithClient$ = new BehaviorSubject(!!initialOptions.matchClientTheme);
        this.theme = new Proxy(signal({
            theme: initialTheme,
            options: initialOptions,
        }), {
            get: (target, prop) => {
                const initial = Reflect.get(target, prop);
                if (typeof initial === 'function') {
                    if (['update', 'set'].includes(prop)) {
                        return (value) => {
                            const result = initial.apply(target, [value]);
                            const currentValue = target();
                            this.syncWithClient$.next(!!currentValue.options?.matchClientTheme);
                            return result;
                        };
                    }
                }
                return initial;
            },
        });
        this.currentTheme = computed(() => {
            const { theme: initialTheme, options = {} } = this.theme();
            const theme = withGeneratedColors(initialTheme, options);
            return { theme, options };
        });
        this.colors = computed(() => this.colorGenerator.createTheme(this.currentTheme()));
        this.twoWaySyncChannel = new TwoWayThemeSyncChannel();
        this.iframeThemeProvider = new IframeThemeProvider(this.currentTheme());
        this.parentThemeConsumer = new ParentThemeConsumer();
        window.nxThemeProvider ??= this;
        if (window.IS_STORYBOOK) {
            const themeAttribute = 'storybook-theme';
            const updateThemeFromStoryBookDataAttribute = (resetInitial = false) => {
                const updatedValue = document.body.parentElement.getAttribute(themeAttribute);
                if (updatedValue) {
                    const darkMode = updatedValue.includes('dark');
                    const gray = updatedValue.includes('gray');
                    const highContrast = updatedValue.includes('high-contrast');
                    const options = {
                        ...initialOptions,
                        offset: gray ? 10 : 0,
                        inverse: darkMode,
                        highContrast,
                        coreSaturation: 20,
                        backgroundLuminosity: 15,
                        useHct: false,
                    };
                    if (resetInitial) {
                        this.theme.set({ theme: initialTheme, options });
                    }
                    else {
                        this.theme.update(({ theme }) => ({
                            theme,
                            options,
                        }));
                    }
                    this.notify();
                }
            };
            new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    if (mutation.type === 'attributes' &&
                        mutation.attributeName === themeAttribute) {
                        updateThemeFromStoryBookDataAttribute();
                    }
                });
            }).observe(document.body.parentElement, { attributes: true });
            window.addEventListener(themeResetEventName, () => {
                updateThemeFromStoryBookDataAttribute(true);
            });
        }
        this.notify();
        window.addEventListener(themePatchEventName, ({ detail }) => {
            const currentTheme = this.theme();
            const { theme: themePatch = currentTheme.theme, options: optionsPatch = currentTheme.options, } = detail;
            const theme = {
                ...currentTheme.theme,
                ...themePatch,
            };
            const options = {
                ...currentTheme.options,
                ...optionsPatch,
            };
            this.theme.set({ theme, options });
            this.notify();
        });
        merge(this.parentThemeConsumer.theme$, this.twoWaySyncChannel.theme$).subscribe(theme => {
            this.theme.set(theme);
            this.updateStorybookBackground();
        });
        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
        const getVms = async () => {
            // @ts-expect-error - Custom Object
            while (!window?.vms) {
                await new Promise(resolve => setTimeout(resolve, 100));
            }
            // @ts-expect-error - Custom Object
            return window.vms;
        };
        const fetchBranding = async (cloudHost) => {
            // TODO: Add fetch from instance once endpoint is added
            return {
                brand: '#FF6C00',
                brandBg: '#2FA2DB',
            };
        };
        this.syncWithClient$
            .pipe(filter(syncWithClient => 
        // @ts-expect-error - Custom flag to check if integration
        syncWithClient && !!window?.isVmsApiEnabled), switchMap(async () => {
            try {
                const cloudHostKey = v5('cloud-host', NIL);
                const existingCloudHost = localStorage.getItem(cloudHostKey);
                const vms = await getVms();
                const cloudHost = await vms.auth.cloudHost();
                if (cloudHost) {
                    localStorage.setItem(cloudHostKey, cloudHost);
                }
                return cloudHost || existingCloudHost;
            }
            catch (e) {
                console.error('Error getting cloud host', e);
            }
            return '';
        }), distinctUntilChanged(), filter(Boolean), switchMap(cloudHost => fetchBranding(cloudHost)))
            .subscribe(updatedTheme => {
            updateInitialBranding(updatedTheme);
            this.updateThemeColor(updatedTheme);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxThemeProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxThemeProviderService, providedIn: 'platform' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxThemeProviderService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'platform',
                }]
        }], ctorParameters: () => [] });

const commonColors = {
    '--nxc-brand': generateCssVariableName('brand'),
    '--nxc-dark1': generateCssVariableName('core', 'dark1'),
    '--nxc-dark2': generateCssVariableName('core', 'dark2'),
    '--nxc-dark3': generateCssVariableName('core', 'dark3'),
    '--nxc-dark4': generateCssVariableName('core', 'dark4'),
    '--nxc-dark5': generateCssVariableName('core', 'dark5'),
    '--nxc-dark6': generateCssVariableName('core', 'dark6'),
    '--nxc-dark7': generateCssVariableName('core', 'dark7'),
    '--nxc-dark8': generateCssVariableName('core', 'dark8'),
    '--nxc-dark9': generateCssVariableName('core', 'dark9'),
    '--nxc-dark10': generateCssVariableName('core', 'dark10'),
    '--nxc-dark11': generateCssVariableName('core', 'dark11'),
    '--nxc-dark12': generateCssVariableName('core', 'dark12'),
    '--nxc-dark13': generateCssVariableName('core', 'dark13'),
    '--nxc-dark14': generateCssVariableName('core', 'dark14'),
    '--nxc-dark15': generateCssVariableName('core', 'dark15'),
    '--nxc-dark16': generateCssVariableName('core', 'dark16'),
    '--nxc-dark17': generateCssVariableName('core', 'dark17'),
    '--nxc-dark18': generateCssVariableName('core', 'dark18'),
    '--nxc-light1': generateCssVariableName('core', 'light1'),
    '--nxc-light2': generateCssVariableName('core', 'light2'),
    '--nxc-light3': generateCssVariableName('core', 'light3'),
    '--nxc-light4': generateCssVariableName('core', 'light4'),
    '--nxc-light5': generateCssVariableName('core', 'light5'),
    '--nxc-light6': generateCssVariableName('core', 'light6'),
    '--nxc-light7': generateCssVariableName('core', 'light7'),
    '--nxc-light8': generateCssVariableName('core', 'light8'),
    '--nxc-light9': generateCssVariableName('core', 'light9'),
    '--nxc-light10': generateCssVariableName('core', 'light10'),
    '--nxc-light11': generateCssVariableName('core', 'light11'),
    '--nxc-light12': generateCssVariableName('core', 'light12'),
    '--nxc-light13': generateCssVariableName('core', 'light13'),
    '--nxc-light14': generateCssVariableName('core', 'light14'),
    '--nxc-light15': generateCssVariableName('core', 'light15'),
    '--nxc-light16': generateCssVariableName('core', 'light16'),
    '--nxc-light17': generateCssVariableName('core', 'light17'),
    '--nxc-light18': generateCssVariableName('core', 'light18'),
    '--nxc-attention-red': generateCssVariableName('attentionErrorRed'),
    '--nxc-attention-yellow': generateCssVariableName('attentionWarningYellow'),
    '--nxc-attention-blue': generateCssVariableName('attentionInfoBlue'),
    '--nxc-attention-green': generateCssVariableName('attentionSuccessGreen'),
    '--nxc-contrast-blue': generateCssVariableName('contrastBlue'),
    '--nxc-contrast-yellow': generateCssVariableName('contrastYellow'),
    '--nxc-contrast-orange': generateCssVariableName('contrastOrange'),
    '--nxc-contrast-green': generateCssVariableName('contrastGreen'),
    '--nxc-contrast-deep-purple': generateCssVariableName('contrastDeepPurple'),
    '--nxc-contrast-pink': generateCssVariableName('contrastPink'),
    '--nxc-contrast-cyan': generateCssVariableName('contrastCyan'),
    '--nxc-contrast-purple': generateCssVariableName('contrastPurple'),
};

const fontColorsCommon = {
    '--font-color-medium': generateCssVariableName('core', 'light9'),
    '--font-color-regular': generateCssVariableName('core', 'light9'),
    '--font-color-light': generateCssVariableName('core', 'light12'),
    '--font-color-disabled': generateCssVariableName('core', 'light10'),
    '--font-color-error': generateCssVariableName('attentionErrorRed', 'initial'),
    '--font-color-brand': generateCssVariableName('brand', 'initial'),
};

const useNative = (color) => ['currentColor', 'initial'].includes(color);
class BaseComponent {
    constructor() {
        /**
         * The element reference is mostly used for handling theme updates.
         */
        this.elRef = inject(ElementRef);
        /**
         * The theme provider is a singleton used to unify the theme across the application.
         */
        this.themeProvider = inject(NxThemeProviderService);
        /**
         * @internal
         * Hide from storybook stories that don't use targetSurface.
         *
         * This is used to define a different target surface shade than the default.
         *
         * The default is 1 which is usually used on dark1 surfaces and maybe up to dark3 surfaces.
         *
         * If you're placing on a lighter surface like light5 you can set the target surface to 5.
         *
         * This will adjust the offset of core colors to be more appropriate for the target surface.
         */
        this.targetSurface = input(1);
        /**
         * The localShadeOffset is used to compute the offset of the core colors.
         *
         * Currently it's only computed from the target surface; we might add accounting for forced dark/light or inferred
         * target surface from the parents.
         */
        this.localShadeOffset = computed(() => {
            const targetShade = this.targetSurface();
            return (BaseComponent.ALLOWED_LOCAL_SHADE_OFFSETS.find(shade => shade >= targetShade - 1) ??
                BaseComponent.ALLOWED_LOCAL_SHADE_OFFSETS.at(-1));
        });
        /**
         * Example
         *
         * ```
         *   override variablesDeclaration = computed(() => {
         *       const isFunky = this.variant() === 'funky';
         *       return isFunky
         *           ? ({
         *                 '--example-background-color': 'danger',
         *                 '--example-text-color': 'warning',
         *             } as const)
         *           : ({
         *                 '--example-background-color': 'light',
         *                 '--example-text-color': 'dark',
         *             } as const);
         *   });
         * ```
         */
        this.variableColors = computed(() => ({}));
        /** Example
         * ```
         *   override fontVariables = computed(() => ({
         *      '--nxc-main-font-family': 'Roboto',
         *      '--nxc-main-font-generic': 'sans-serif',
         *      } as const));
         * ```
         */
        this.fontVariables = computed(() => ({}));
        // Add common colors here
        this.commonColors = { ...fontColorsCommon, ...commonColors };
        /**
         * The updateStyleEffect is used to set the css variables that are used within our design system.
         */
        this.updateStyleEffect = effect(() => {
            const colorVariablesDeclarations = {
                ...this.commonColors,
                ...this.variableColors(),
                currentColor: 'currentColor',
                initial: 'initial',
            };
            const themeOverride = this.themeOptionOverride?.();
            const themeColors = themeOverride
                ? this.themeProvider.getColorsWithThemeOverride(themeOverride)
                : this.themeProvider.colors();
            Object.entries(colorVariablesDeclarations).forEach(([variableName, colorName]) => {
                const baseVar = useNative(colorName)
                    ? colorName
                    : `${colorName.startsWith('--') ? colorName : `--${colorName}`}`;
                if (!useNative(colorName)) {
                    const parsedColor = themeColors[colorName];
                    this.setProperty(baseVar, parsedColor);
                    if (variableName === '--nxc-brand') {
                        const extractLuminosity = (color) => {
                            const luminosityRegex = /hsla\([^,]+,\s*[^,]+,\s*([^,]+),\s*[^)]+\)/;
                            const match = color.match(luminosityRegex);
                            const luminosity = match ? match[1].trim() : null;
                            return luminosity ? parseFloat(luminosity) : 0;
                        };
                        const brandLuminosity = extractLuminosity(parsedColor);
                        const light1 = themeColors[this.commonColors['--nxc-light1']];
                        const light1Luminosity = extractLuminosity(light1);
                        const dark1 = themeColors[this.commonColors['--nxc-dark1']];
                        const dark1Luminosity = extractLuminosity(dark1);
                        const getOffset = (luminosity) => {
                            const [min, max] = [luminosity, brandLuminosity].sort((a, b) => a - b);
                            return max - min;
                        };
                        const useLight = getOffset(light1Luminosity) > getOffset(dark1Luminosity);
                        const contrastColor = useLight ? light1 : dark1;
                        this.setProperty('--nxc-brand-contrast', contrastColor);
                    }
                }
                this.setProperty(variableName.startsWith('--') ? variableName : `--${variableName}`, useNative(colorName) ? colorName : `var(${baseVar})`);
            });
            // Theme option css variables
            const { options } = this.themeProvider.currentTheme();
            const offset = options.offset || 0;
            const inverse = options.inverse || false;
            const stepSize = (100 - offset * 2) / stepCount;
            const otherDeclarations = {
                '--step-size': `${stepSize.toPrecision(2)}%`,
                '--color-mix-base': inverse ? 'black' : 'white',
            };
            Object.entries(otherDeclarations).forEach(([variableName, variableValue]) => this.setProperty(variableName, variableValue));
            Object.entries(this.fontVariables()).forEach(([variableName, variableValue]) => this.setProperty(variableName, String(variableValue)));
            const localShadeOffset = this.localShadeOffset();
            const bases = ['--nxc-light', '--nxc-dark'];
            const shades = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
            const steps = [
                '--nxc-dark1',
                '--nxc-dark2',
                '--nxc-dark3',
                '--nxc-dark4',
                '--nxc-dark5',
                '--nxc-dark6',
                '--nxc-dark7',
                '--nxc-dark8',
                '--nxc-dark9',
                '--nxc-dark10',
                '--nxc-dark11',
                '--nxc-dark12',
                '--nxc-dark13',
                '--nxc-dark14',
                '--nxc-dark15',
                '--nxc-dark16',
                '--nxc-dark17',
                '--nxc-dark18',
                '--nxc-light18',
                '--nxc-light17',
                '--nxc-light16',
                '--nxc-light15',
                '--nxc-light14',
                '--nxc-light13',
                '--nxc-light12',
                '--nxc-light11',
                '--nxc-light10',
                '--nxc-light9',
                '--nxc-light8',
                '--nxc-light7',
                '--nxc-light6',
                '--nxc-light5',
                '--nxc-light4',
                '--nxc-light3',
                '--nxc-light2',
                '--nxc-light1',
            ];
            const invert = localShadeOffset > 0;
            const getOffsetShade = (initialShade) => {
                const themeSteps = options.inverse ? steps : steps.toReversed();
                const offsetIndex = themeSteps.indexOf(initialShade) +
                    (options.inverse ? localShadeOffset : -localShadeOffset);
                return offsetIndex < 0
                    ? themeSteps[0]
                    : themeSteps.at(offsetIndex) || themeSteps.at(-1);
            };
            const dark = invert ? '--nxc-dark' : '--nxc-light';
            const light = invert ? '--nxc-light' : '--nxc-dark';
            const mapping = shades.reduce((acc, shade) => ({
                ...acc,
                [`--nxc-light${shade}-offset`]: `var(${getOffsetShade(`${light}${shade}`)})`,
                [`--nxc-dark${shade}-offset`]: `var(${getOffsetShade(`${dark}${shade}`)})`,
            }), {});
            const mappingWithOffset = {
                '--nxc-local-shade-offset': localShadeOffset.toString(),
                ...mapping,
            };
            if (localShadeOffset) {
                Object.entries(mappingWithOffset).forEach(([variableName, variableValue]) => this.setProperty(variableName, variableValue, this.elRef.nativeElement));
            }
            else {
                Object.keys(mappingWithOffset).forEach(variableName => this.elRef.nativeElement.style.removeProperty(variableName));
            }
            /**
             * Custom behavior for storybook
             */
            if (window.IS_STORYBOOK &&
                window.currentStoryComponent && // If component property is not specified in meta
                this instanceof window.currentStoryComponent) {
                window.dispatchEvent(createComponentVariablesEvent(Object.fromEntries([
                    ...Object.entries(colorVariablesDeclarations).map(([key, value]) => [
                        key,
                        [value, useNative(value) ? value : themeColors[value]],
                    ]),
                    ...Object.entries(otherDeclarations).map(([key, value]) => [
                        key,
                        [value, 'transparent'],
                    ]),
                ])));
                /**
                 * This is used to add a label on the bottom right within storybook to show the target surface for the story.
                 */
                const backgroundLabel = (() => (updated) => {
                    const backgroundLabelId = 'story-book-background-label';
                    let existingLabel = document.getElementById(backgroundLabelId);
                    if (!existingLabel) {
                        existingLabel = document.createElement('div');
                        document.querySelector('nx-style-wrapper')?.appendChild(existingLabel);
                        existingLabel.id = backgroundLabelId;
                        existingLabel.style.position = 'fixed';
                        existingLabel.style.fontSize = '18px';
                        existingLabel.style.bottom = '8px';
                        existingLabel.style.right = '16px';
                    }
                    existingLabel.style.opacity = `${localShadeOffset ? 1 : 0.25}`;
                    existingLabel.innerText = `Target Surface: ${updated
                        .replace('core_shade_dark1_opacity_20', '--nxc-dark1')
                        .replace('var(', '')
                        .replace(')', '')}`;
                    return updated;
                })();
                if (localShadeOffset > 0) {
                    /**
                     * Updates the background color of the storybook to match the target surface.
                     *
                     * The currentStoryComponent is used to determine if the current component is the target for the story.
                     */
                    document.body.style.setProperty('background', backgroundLabel(mapping['--nxc-dark1-offset']));
                }
                else {
                    /**
                     * Resets the background color of the storybook to match the default if no target surface.
                     */
                    document.body.style.setProperty('background', backgroundLabel(background));
                }
            }
        });
        /**
         * Custom event bindings:
         *
         * It's had to keep the type signature when trying to augment the type signature of the native addEventListener
         * and removeEventListener methods. This makes it difficult to use within web components since events are not typed.
         *
         * The addNxEventListener and removeNxEventListener naming might be better anyways since it makes it clear that
         * these are custom events and not native events.
         *
         * These methods are being omitted from the public API of the component within nx-components but will have
         * web component specific comments when exported from nx-web-components.
         */
        /**
         * @ignore
         *
         * Internal method for web component to add event listeners.
         */
        this.addNxEventListener = this.elRef.nativeElement.addEventListener.bind(this.elRef.nativeElement);
        /**
         * @ignore
         *
         * Internal method for web component to remove event listeners.
         */
        this.removeNxEventListener = this.elRef.nativeElement.removeEventListener.bind(this.elRef.nativeElement);
        /**
         * @ignore
         *
         * Internal method for web component to dispatch events.
         */
        this.dispatchNxEvent = this.elRef.nativeElement.dispatchEvent.bind(this.elRef.nativeElement);
    }
    /**
     * Limits the local shade offset to a range of -10 to 10. There isn't a technical limitation for this but an artificial
     * limit because most components don't look good with a larger offset.
     */
    static { this.ALLOWED_LOCAL_SHADE_OFFSETS = [
        -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
    ]; }
    /**
     * This defaults to a style tag in the head of the document.
     *
     * Override this method to provide a custom target element.
     *
     * If you want to scope to the component then return the component element reference.
     *
     * If you want to scope to a custom target element then return that element reference.
     *
     * @param componentElement - The component that element reference that is trying to set the css variable
     * @returns The target element to apply styles
     */
    static { this.getRootStyleTarget = (componentElement) => {
        const createUniqueId = (identifier) => `${identifier}-${v5(identifier, NIL)}`;
        const styleTagId = createUniqueId('nx-component-style-tag');
        const existingStyleTag = document.querySelector(`style#${styleTagId}`);
        if (existingStyleTag) {
            return existingStyleTag;
        }
        const styleTag = document.createElement('style');
        styleTag.id = styleTagId;
        styleTag.appendChild(document.createTextNode(''));
        document.head.appendChild(styleTag);
        return styleTag;
    }; }
    /**
     * Handles setting the css variable on the target element.
     *
     * If the target element is a style tag then it will create a new rule in the stylesheet.
     * If the target element is not a style tag then it will set the css variable on the element.
     *
     * @param variableName - The css variable name to set
     * @param variableValue - The css variable value to set
     * @returns void
     */
    setProperty(variableName, variableValue, target = BaseComponent.getRootStyleTarget(this.elRef.nativeElement)) {
        if (target instanceof HTMLStyleElement) {
            // Access the stylesheet of the style element
            const sheet = target.sheet;
            if (!sheet) {
                return;
            }
            // Check for existing :root rule to add/update CSS variables
            let rootRule = null;
            for (let i = 0; i < sheet.cssRules.length; i++) {
                const rule = sheet.cssRules[i];
                if (rule.selectorText === ':root') {
                    rootRule = rule;
                    break;
                }
            }
            if (!rootRule) {
                // Create a new :root rule if it doesn't exist
                const ruleIndex = sheet.insertRule(':root {}', sheet.cssRules.length);
                rootRule = sheet.cssRules[ruleIndex];
            }
            // Set the CSS variable in the :root rule
            rootRule.style.setProperty(variableName, variableValue);
            return;
        }
        target.style.setProperty(variableName, variableValue);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: BaseComponent, isStandalone: true, inputs: { targetSurface: { classPropertyName: "targetSurface", publicName: "targetSurface", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: BaseComponent, decorators: [{
            type: Directive,
            args: [{ standalone: true }]
        }] });

/**
 * An example Component
 */
class NxExampleComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * A signal model example
         */
        this.testModel = model('testModel');
        this.useHct = input(false, { transform: booleanAttribute });
        this.coreSaturation = input(20);
        this.initialHct = this.themeProvider.currentTheme().options.useHct;
        this.initialCoreSaturation = this.themeProvider.currentTheme().options.coreSaturation;
        this.syncOptionOverridesEffect = effect(() => {
            if (window.location.href.endsWith('--docs')) {
                return;
            }
            const useHct = this.useHct();
            const coreSaturation = this.coreSaturation();
            dispatch(createThemePatchEvent({ options: { useHct, coreSaturation } }));
            return () => dispatch(createThemePatchEvent({
                options: {
                    useHct: this.initialHct,
                    coreSaturation: this.initialCoreSaturation,
                },
            }));
        });
        this.themeOptionOverride = computed(() => ({
            useHct: this.useHct(),
            coreSaturation: this.coreSaturation(),
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxExampleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxExampleComponent, isStandalone: true, selector: "nx-example", inputs: { testModel: { classPropertyName: "testModel", publicName: "testModel", isSignal: true, isRequired: false, transformFunction: null }, useHct: { classPropertyName: "useHct", publicName: "useHct", isSignal: true, isRequired: false, transformFunction: null }, coreSaturation: { classPropertyName: "coreSaturation", publicName: "coreSaturation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { testModel: "testModelChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\">\n    <h1>{{ testModel() + ' h1' }}</h1>\n    <h2>{{ testModel() + ' h2' }}</h2>\n    <h3>{{ testModel() + ' h3' }}</h3>\n    <h4>{{ testModel() + ' h4' }}</h4>\n    <h5>{{ testModel() + ' h5' }}</h5>\n    <h6>{{ testModel() + ' h6' }}</h6>\n    <p>{{ testModel() + ' p' }}</p>\n    <span>{{ testModel() + ' span' }}</span>\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}[disabled]{color:var(--font-color-disabled)}h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}a:visited{color:var(--font-color-regular)}.text-color-medium{color:var(--font-color-medium)}.text-color-regular{color:var(--font-color-regular)}.text-color-light{color:var(--font-color-light)}.text-color-disabled{color:var(--font-color-disabled)}.text-color-error{color:var(--font-color-error)}.text-color-brand{color:var(--font-color-brand)}.text-size-12px{font-size:12px;font-size:.75rem}.text-size-13px{font-size:13px;font-size:.8125rem}.text-size-14px{font-size:14px;font-size:.875rem}.text-size-16px{font-size:16px;font-size:1rem}.text-size-18px{font-size:18px;font-size:1.125rem}.text-size-20px{font-size:20px;font-size:1.25rem}.text-size-24px{font-size:24px;font-size:1.5rem}.text-size-32px{font-size:32px;font-size:2rem}.text-size-56px{font-size:56px;font-size:3.5rem}.text-family-base{font-size:base}.text-family-regular{font-size:regular}.text-family-medium{font-size:medium}.text-family-light{font-size:light}.text-family-bold{font-size:bold}.wrapper{padding:32px;background-color:var(--nxc-dark3-offset, var(--nxc-dark3));width:calc(100% - 144px);border:2px solid currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxExampleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-example', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\">\n    <h1>{{ testModel() + ' h1' }}</h1>\n    <h2>{{ testModel() + ' h2' }}</h2>\n    <h3>{{ testModel() + ' h3' }}</h3>\n    <h4>{{ testModel() + ' h4' }}</h4>\n    <h5>{{ testModel() + ' h5' }}</h5>\n    <h6>{{ testModel() + ' h6' }}</h6>\n    <p>{{ testModel() + ' p' }}</p>\n    <span>{{ testModel() + ' span' }}</span>\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}[disabled]{color:var(--font-color-disabled)}h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}a:visited{color:var(--font-color-regular)}.text-color-medium{color:var(--font-color-medium)}.text-color-regular{color:var(--font-color-regular)}.text-color-light{color:var(--font-color-light)}.text-color-disabled{color:var(--font-color-disabled)}.text-color-error{color:var(--font-color-error)}.text-color-brand{color:var(--font-color-brand)}.text-size-12px{font-size:12px;font-size:.75rem}.text-size-13px{font-size:13px;font-size:.8125rem}.text-size-14px{font-size:14px;font-size:.875rem}.text-size-16px{font-size:16px;font-size:1rem}.text-size-18px{font-size:18px;font-size:1.125rem}.text-size-20px{font-size:20px;font-size:1.25rem}.text-size-24px{font-size:24px;font-size:1.5rem}.text-size-32px{font-size:32px;font-size:2rem}.text-size-56px{font-size:56px;font-size:3.5rem}.text-family-base{font-size:base}.text-family-regular{font-size:regular}.text-family-medium{font-size:medium}.text-family-light{font-size:light}.text-family-bold{font-size:bold}.wrapper{padding:32px;background-color:var(--nxc-dark3-offset, var(--nxc-dark3));width:calc(100% - 144px);border:2px solid currentColor}\n"] }]
        }] });

class NxClickElsewhereDirective {
    constructor(_elementRef) {
        this._elementRef = _elementRef;
        this.nxClickElsewhere = new EventEmitter();
    }
    onMouseClick(targetElement) {
        if (targetElement.type === 'checkbox') {
            // special case for nx-checkbox component not being recognized as internal
            // for nx-multi-select
            return;
        }
        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.nxClickElsewhere.emit();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxClickElsewhereDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: NxClickElsewhereDirective, isStandalone: true, selector: "[nxClickElsewhere]", outputs: { nxClickElsewhere: "nxClickElsewhere" }, host: { listeners: { "document:click": "onMouseClick($event.target)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxClickElsewhereDirective, decorators: [{
            type: Directive,
            args: [{ selector: '[nxClickElsewhere]', standalone: true }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nxClickElsewhere: [{
                type: Output
            }], onMouseClick: [{
                type: HostListener,
                args: ['document:click', ['$event.target']]
            }] } });

class NxLayoutComponent extends BaseComponent {
    static { this.DEFAULT_SIZE = 336; }
    static { this.layoutTypes = ['cards', 'clamped', 'full', 'wrapper']; }
    static { this.columnSpans = ['-1', '4', '3']; }
    static { this.configureLayout = ({ clampSize = 1000000, center = false, viewIdentifier = '', }) => {
        if (NxLayoutComponent.rootLayout) {
            const rootLayout = NxLayoutComponent.rootLayout;
            return effect(cleanup => {
                rootLayout.clampedSize.set(clampSize);
                rootLayout.centered.set(center);
                rootLayout.viewIdentifier.set(viewIdentifier);
                return cleanup(() => {
                    rootLayout.clampedSize.set(1000000);
                    rootLayout.centered.set(false);
                    rootLayout.viewIdentifier.set('');
                });
            });
        }
        return undefined;
    }; }
    static { this.clampedSizes = [720, 1_024, 1_200, 1_440, 1_800, 1_000_000]; }
    ngAfterViewInit() {
        this.initializeEventListeners();
    }
    initializeEventListeners() {
        window.addEventListener(toggleSecondaryMenuEventName, ({ detail }) => {
            const openState = this.secondaryMenuModalOpen();
            if (detail !== openState) {
                this.secondaryMenuSize.set(this.previousSecondarySize);
                this.secondaryMenuModalOpen.update(open => !open);
            }
        });
        window.addEventListener(toggleModalEventName, ({ detail: { open, width, collapsible } }) => {
            const drawerOpen = this.drawerOpen();
            this.customModalWidth.set(width);
            this.collapsible.set(collapsible);
            if (open !== drawerOpen) {
                this.drawerOpen.set(!drawerOpen);
                this.modal.set(!drawerOpen);
            }
        });
    }
    constructor() {
        super();
        this.minColumnPx = input(216);
        this.overlayAsideOverride = input(false);
        this.asideOpen = model(false);
        this.hoverMenuOpen = model(false);
        this.secondaryMenuSize = model(NxLayoutComponent.DEFAULT_SIZE);
        this.drawerSize = model(NxLayoutComponent.DEFAULT_SIZE);
        this.notificationsSize = model(NxLayoutComponent.DEFAULT_SIZE);
        this.hoverMenuSize = model(NxLayoutComponent.DEFAULT_SIZE);
        this.drawerOpen = model(false);
        this.showProjectedSecondaryMenu = model(true);
        this.layoutType = model('cards');
        this.clampedSize = model(1000000);
        this.centered = model(false);
        this.modal = model(false);
        this.forceTop = input(false, { transform: booleanAttribute });
        this.secondaryMenuModalOpen = model(false);
        this.collapsible = model(true);
        this.asideResizable = model(true);
        // TODO: Add event type for configuring and resetting the view
        this.columnSpanMain = model('-1');
        this.resizing = model(false);
        this.viewIdentifier = model('');
        this.closeOnContentClick = model(true);
        this.isStoryBook = window.IS_STORYBOOK;
        this.width = signal(this.elRef.nativeElement.offsetWidth);
        this.overlayAside = computed(() => this.overlayAsideOverride() ||
            this.width() - this.clampedSecondaryMenuWidth()() < this.minColumnPx() * 2.5);
        this.showAsideOnGrid = computed(() => !this.overlayAside() && this.asideOpen());
        this.showTopMenu = computed(() => {
            const width = this.width();
            const minPadding = 96;
            const leftPanelSize = this.asideExpanded() ? this.clampedSecondaryMenuWidth()() : 0;
            const rightPanelSize = !this.secondaryMenuModalOpen() && (this.drawerOpen() || this.rightDrawerPortal())
                ? this.clampedRightPanelSize()()
                : 0;
            return (width < 648 ||
                width + minPadding <
                    leftPanelSize + rightPanelSize + Math.max(this.spaceForContent(), 432));
        });
        this.router = inject(Router);
        this.skipNextNotifier = new Subject();
        this.skipNext = toSignal(this.skipNextNotifier.pipe(switchMap(() => timer(100).pipe(map(() => false), startWith(true)))));
        this.navigateNotifier$ = combineLatest([
            toObservable(this.showTopMenu),
            toObservable(this.forceTop),
            toObservable(this.asideOpen),
        ]).pipe(map(([showTopMenu, forceTop, asideOpen]) => asideOpen && (showTopMenu || forceTop)), distinctUntilChanged(), filter(showTopMenu => showTopMenu), switchMap(() => this.router.events), filter((event) => {
            if (event instanceof NavigationStart) {
                const current = new URL(this.router.url, window.location.origin).pathname;
                const next = new URL(event.url, window.location.origin).pathname;
                return current !== next;
            }
            return false;
        }), tap(() => {
            if (this.skipNext()) {
                return;
            }
            this.asideOpen.set(false);
        }), shareReplay({ bufferSize: 1, refCount: true }));
        this.templateClasses = computed(() => ({
            centered: this.centered(),
            'top-menu': this.forceTop() || this.showTopMenu(),
            [this.layoutType()]: true,
        }));
        this.canFitBothPanels = computed(() => {
            const totalWidth = this.width();
            const leftPanelWidth = this.clampedSecondaryMenuWidth()();
            const rightPanelWidth = this.clampedRightPanelSize()();
            return totalWidth - leftPanelWidth - rightPanelWidth > this.spaceForContent();
        });
        this.asideExpanded = computed(() => this.asideOpen()
            ? this.canFitBothPanels() || (!this.drawerOpen() && !this.rightDrawerPortal())
            : this.secondaryMenuModalOpen());
        this.class = computed(() => {
            return {
                'overlay-aside': this.overlayAside(),
                'aside-open': this.asideExpanded() || this.secondaryMenuModalOpen(),
                'drawer-open': (this.drawerOpen() || this.rightDrawerPortal()) && !this.secondaryMenuModalOpen(),
                'show-modal-overlay': this.showModalOverlay(),
                'show-secondary-modal-overlay': this.secondaryMenuModalOpen(),
                'resizing-panel': this.resizing(),
                'can-fit-both-panels': this.canFitBothPanels(),
                ...this.templateClasses(),
            };
        });
        this.availableWidth = computed(() => {
            const gap = 48;
            const menuWidth = 72;
            return this.width() - menuWidth - gap;
        });
        this.spaceForContent = computed(() => {
            const gap = 48;
            const columnSize = this.minColumnPx() + gap;
            const availableColumns = this.availableWidth() / columnSize;
            const minContentColumns = clamp(availableColumns - 2, 1, 6);
            return Math.min(minContentColumns * columnSize, this.clampedSize());
        });
        this.maxPanelWidth = computed(() => {
            const availableForPanels = this.availableWidth() - this.spaceForContent();
            return availableForPanels / 2;
        });
        this.clampedSecondaryMenuWidth = computed(() => (singleOpen = false) => clamp(this.secondaryMenuSize(), 248, this.maxPanelWidth() * (singleOpen ? 1 : 2)));
        this.secondaryMenuOverlayWidth = computed(() => `${(() => {
            if (this.overlayAside()) {
                return clamp(this.secondaryMenuSize(), 248, this.width() - 144);
            }
            return this.clampedSecondaryMenuWidth()(!(!this.drawerOpen() || !this.canFitBothPanels()));
        })()}px`);
        this.clampedRightPanelSize = computed(() => (singleOpen = false) => clamp(this.drawerSize(), 248, this.maxPanelWidth() * (singleOpen ? 1 : 2)));
        this.drawerWidth = computed(() => this.customModalWidth() ||
            `${this.clampedRightPanelSize()(!(!this.asideExpanded() || !this.canFitBothPanels()))}px`);
        this.drawerWidthChange = toObservable(this.drawerWidth);
        this.notificationOffset = computed(() => (this.drawerOpen() ? this.drawerWidth() : '0px'));
        this.notificationsWidth = computed(() => `${clamp(this.notificationsSize(), 248, Math.max(648, this.width() / 2))}px`);
        this.secondaryMenuWidth = computed(() => {
            if ((this.showAsideOnGrid() || this.secondaryMenuModalOpen()) && !this.drawerOpen()) {
                return this.secondaryMenuOverlayWidth();
            }
            return '0px';
        });
        this.customModalWidth = signal(undefined);
        this.hoverMenuWidth = computed(() => `${this.hoverMenuSize()}px`);
        this.clampedWidth = computed(() => `${this.clampedSize()}px`);
        this.mockContent = computed(() => Array(this.layoutType() === 'cards' ? 100 : 20)
            .fill(0)
            .map((_, i) => `Content ${this.layoutType()} ${i + 1}`));
        this.mockMessages = signal(['Initial Message']);
        this.toggleOverlay = () => {
            if (this.secondaryMenuModalOpen()) {
                this.toggleSecondaryModal();
            }
            else {
                this.toggleDrawer();
            }
        };
        this.variableColors = computed(() => ({
            '--overlay-color': generateCssVariableName('core', 'dark1'),
            '--body-bg': generateCssVariableName('core', 'dark1'),
            '--menu-bg': generateCssVariableName('core', 'dark2'),
            '--hover-menu-bg': generateCssVariableName('core', 'dark3', 3),
            '--notification-bg': generateCssVariableName('brand', 'dark10', 10),
            '--menu-border': generateCssVariableName('core', 'dark5'),
        }));
        this.toggleMenu = () => {
            const drawerOpen = this.drawerOpen();
            const menuOpen = this.secondaryMenuModalOpen();
            const width = this.width();
            if (width < 648 && (drawerOpen || menuOpen)) {
                this.drawerOpen.set(false);
                this.secondaryMenuModalOpen.set(false);
                this.mockMessages.update(messages => [
                    ...messages,
                    `${menuOpen ? 'Menu' : 'Drawer'} is closed`,
                ]);
                return;
            }
            const menuShown = menuOpen && !drawerOpen;
            if (drawerOpen) {
                this.drawerOpen.set(false);
            }
            if (menuShown) {
                this.hoverMenuOpen.set(false);
            }
            this.secondaryMenuModalOpen.set(!menuShown);
            this.mockMessages.update(messages => [
                ...messages,
                `Menu is ${!menuShown ? 'open' : 'closed'}`,
            ]);
        };
        this.previousSecondarySize = 0;
        this.toggleSecondaryModal = (modalSize = NxLayoutComponent.DEFAULT_SIZE) => {
            this.secondaryMenuModalOpen.update(openState => {
                if (openState) {
                    this.secondaryMenuSize.set(this.previousSecondarySize);
                }
                else {
                    this.previousSecondarySize = untracked(this.secondaryMenuSize);
                    this.secondaryMenuSize.set(modalSize);
                }
                return !openState;
            });
        };
        this.toggleProjectedSecondaryMenu = () => {
            if (this.secondaryMenuModalOpen()) {
                return this.toggleSecondaryModal();
            }
            this.asideOpen.update(show => !show);
        };
        this.showModalOverlay = computed(() => this.modal() && this.drawerOpen() && this.width() > 648);
        this.toggleDrawer = (modal = false) => {
            const drawerOpen = this.drawerOpen();
            const asideOpen = this.asideOpen();
            this.modal.set(modal);
            if (drawerOpen && modal && !this.modal()) {
                this.mockMessages.update(messages => [
                    ...messages,
                    'Drawer was closed and modal was opened',
                ]);
                return;
            }
            this.drawerOpen.set(!drawerOpen);
            const newMessages = [`Drawer is ${this.drawerOpen() ? 'open' : 'closed'}`];
            if (asideOpen) {
                if (!drawerOpen) {
                    newMessages.push('Menu is open but hidden due to drawer, will reopen when drawer is closed');
                }
                else {
                    newMessages.push('Menu was hidden but is now visible again since drawer is closed');
                }
            }
            this.mockMessages.update(messages => [...messages, ...newMessages]);
        };
        this.toggleHoverMenu = (targetState) => {
            if (targetState !== undefined) {
                this.hoverMenuOpen.set(targetState);
                return;
            }
            this.hoverMenuOpen.update(openState => !openState);
        };
        this.removeMessage = (index) => {
            this.mockMessages.update(messages => [...messages].filter((_, i) => i !== index));
        };
        this.autoHideEffect = effect(() => {
            if (!this.isStoryBook) {
                return;
            }
            const removeInterval = setInterval(() => this.removeMessage(0), 5000);
            return () => clearInterval(removeInterval);
        });
        this.resizeSecondaryMenu = (event) => {
            this.resizing.set(true);
            const size = event.pointerPosition.x - 96;
            const drawerOpen = this.drawerOpen() || this.rightDrawerPortal();
            const rightDrawerSize = this.clampedRightPanelSize()(!drawerOpen);
            const maxPanelWidth = this.maxPanelWidth();
            const unusedRightSpace = drawerOpen ? maxPanelWidth - rightDrawerSize : maxPanelWidth;
            const maxAvailableWidth = drawerOpen ? maxPanelWidth + unusedRightSpace : Infinity;
            this.secondaryMenuSize.set(Math.min(size, maxAvailableWidth));
            const viewIdentifies = this.getViewIdentifier();
            if (viewIdentifies) {
                this.sizeHistory.left.set(viewIdentifies, this.secondaryMenuSize());
            }
        };
        this.resizeDrawer = (event) => {
            this.resizing.set(true);
            const size = window.innerWidth - event.pointerPosition.x;
            const leftPanelOpen = this.asideExpanded();
            const secondaryMenuSize = this.clampedSecondaryMenuWidth()(!leftPanelOpen);
            const maxPanelWidth = this.maxPanelWidth();
            const unusedLeftSpace = leftPanelOpen ? maxPanelWidth - secondaryMenuSize : maxPanelWidth;
            const maxAvailableWidth = leftPanelOpen ? maxPanelWidth + unusedLeftSpace : Infinity;
            this.drawerSize.set(Math.min(size, maxAvailableWidth));
            const viewIdentifier = this.getViewIdentifier();
            if (viewIdentifier) {
                this.sizeHistory.right.set(viewIdentifier, this.drawerSize());
            }
        };
        this.secondaryMenuPortal = signal(null);
        this.rightDrawerPortal = signal(null);
        this.viewContainerRef = inject(ViewContainerRef);
        this.sizeHistory = {
            left: new Map(),
            right: new Map(),
        };
        this.activatedRoute = inject(ActivatedRoute);
        this.firstComponent = (snapshot = this.activatedRoute.snapshot.firstChild) => {
            if (!snapshot) {
                return null;
            }
            if (snapshot.component) {
                return snapshot.component;
            }
            if (snapshot.firstChild) {
                return this.firstComponent(snapshot.firstChild);
            }
            return null;
        };
        this.getViewIdentifier = () => {
            const viewIdentifier = this.viewIdentifier();
            if (viewIdentifier) {
                return viewIdentifier;
            }
            const firstComponent = this.firstComponent();
            if (firstComponent) {
                return firstComponent.name;
            }
            return '';
        };
        this.useSecondaryMenu = (template, collapsible = true, rightPanel = false, resizable = true, size = NxLayoutComponent.DEFAULT_SIZE) => {
            const portalSignal = rightPanel ? this.rightDrawerPortal : this.secondaryMenuPortal;
            const sizeSignal = rightPanel ? this.drawerSize : this.secondaryMenuSize;
            const sizeHistory = rightPanel ? this.sizeHistory.right : this.sizeHistory.left;
            portalSignal.set(new TemplatePortal(template, this.viewContainerRef));
            const topMenu = this.forceTop() || this.showTopMenu();
            const viewIdentifier = this.getViewIdentifier();
            const asideOpen = rightPanel ? untracked(this.asideOpen) : false;
            if (!rightPanel) {
                this.collapsible.set(collapsible);
            }
            this.asideOpen.update(open => !topMenu && (open || !rightPanel));
            untracked(() => this.asideResizable.set(resizable));
            const previousSize = viewIdentifier ? sizeHistory.get(viewIdentifier) : null;
            sizeSignal.set(previousSize || size);
            const initialSize = untracked(sizeSignal);
            return () => {
                portalSignal.set(null);
                this.asideOpen.set(asideOpen);
                sizeSignal.set(initialSize);
                this.asideResizable.set(true);
            };
        };
        NxLayoutComponent.rootLayout ||= this;
        fromEvent(window, 'resize')
            .pipe(switchMap(() => merge(of(true), timer(100).pipe(map(() => false)))), startWith(true))
            .subscribe(resizing => {
            this.resizing.set(resizing);
            this.width.set(window.document.body.offsetWidth);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxLayoutComponent, isStandalone: true, selector: "nx-layout", inputs: { minColumnPx: { classPropertyName: "minColumnPx", publicName: "minColumnPx", isSignal: true, isRequired: false, transformFunction: null }, overlayAsideOverride: { classPropertyName: "overlayAsideOverride", publicName: "overlayAsideOverride", isSignal: true, isRequired: false, transformFunction: null }, asideOpen: { classPropertyName: "asideOpen", publicName: "asideOpen", isSignal: true, isRequired: false, transformFunction: null }, hoverMenuOpen: { classPropertyName: "hoverMenuOpen", publicName: "hoverMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, secondaryMenuSize: { classPropertyName: "secondaryMenuSize", publicName: "secondaryMenuSize", isSignal: true, isRequired: false, transformFunction: null }, drawerSize: { classPropertyName: "drawerSize", publicName: "drawerSize", isSignal: true, isRequired: false, transformFunction: null }, notificationsSize: { classPropertyName: "notificationsSize", publicName: "notificationsSize", isSignal: true, isRequired: false, transformFunction: null }, hoverMenuSize: { classPropertyName: "hoverMenuSize", publicName: "hoverMenuSize", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, showProjectedSecondaryMenu: { classPropertyName: "showProjectedSecondaryMenu", publicName: "showProjectedSecondaryMenu", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layoutType", isSignal: true, isRequired: false, transformFunction: null }, clampedSize: { classPropertyName: "clampedSize", publicName: "clampedSize", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, forceTop: { classPropertyName: "forceTop", publicName: "forceTop", isSignal: true, isRequired: false, transformFunction: null }, secondaryMenuModalOpen: { classPropertyName: "secondaryMenuModalOpen", publicName: "secondaryMenuModalOpen", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, asideResizable: { classPropertyName: "asideResizable", publicName: "asideResizable", isSignal: true, isRequired: false, transformFunction: null }, columnSpanMain: { classPropertyName: "columnSpanMain", publicName: "columnSpanMain", isSignal: true, isRequired: false, transformFunction: null }, resizing: { classPropertyName: "resizing", publicName: "resizing", isSignal: true, isRequired: false, transformFunction: null }, viewIdentifier: { classPropertyName: "viewIdentifier", publicName: "viewIdentifier", isSignal: true, isRequired: false, transformFunction: null }, closeOnContentClick: { classPropertyName: "closeOnContentClick", publicName: "closeOnContentClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { asideOpen: "asideOpenChange", hoverMenuOpen: "hoverMenuOpenChange", secondaryMenuSize: "secondaryMenuSizeChange", drawerSize: "drawerSizeChange", notificationsSize: "notificationsSizeChange", hoverMenuSize: "hoverMenuSizeChange", drawerOpen: "drawerOpenChange", showProjectedSecondaryMenu: "showProjectedSecondaryMenuChange", layoutType: "layoutTypeChange", clampedSize: "clampedSizeChange", centered: "centeredChange", modal: "modalChange", secondaryMenuModalOpen: "secondaryMenuModalOpenChange", collapsible: "collapsibleChange", asideResizable: "asideResizableChange", columnSpanMain: "columnSpanMainChange", resizing: "resizingChange", viewIdentifier: "viewIdentifierChange", closeOnContentClick: "closeOnContentClickChange", drawerWidthChange: "drawerWidthChange" }, host: { properties: { "class": "this.class()", "style.--secondary-menu-width": "this.secondaryMenuWidth()", "style.--drawer-width": "this.drawerWidth()", "style.--notifications-width": "this.notificationsWidth()", "style.--notification-offset": "this.notificationOffset()", "style.--secondary-menu-overlay-width": "this.secondaryMenuOverlayWidth()", "style.--min-column-size": "this.minColumnPx() + \"px\"", "style.--clamped-size": "this.clampedWidth()", "style.--hover-menu-size": "this.hoverMenuWidth()", "style.--column-span-main": "this.columnSpanMain()" } }, usesInheritance: true, ngImport: i0, template: "<header [ngClass]=\"templateClasses()\">\n    <ng-content select=\"ng-container[header]\">\n        <ng-content select=\"ng-container[menu]\">\n            <div\n                class=\"example-menu\"\n                (click)=\"toggleSecondaryModal()\"\n            >\n                Menu\n            </div>\n        </ng-content>\n        @if (!secondaryMenuModalOpen() && (forceTop() || showTopMenu()) && secondaryMenuPortal()) {\n            <div\n                class=\"toggle-drawer\"\n                (click)=\"toggleProjectedSecondaryMenu()\"\n            >\n                {{ asideOpen() ? 'Hide' : 'Show' }}\n            </div>\n        }\n    </ng-content>\n</header>\n<main\n    [ngClass]=\"templateClasses()\"\n    #mainSection\n>\n    <ng-template #mainContent>\n        <ng-content select=\"ng-container[main]\">\n            @if (isStoryBook) {\n                <div\n                    class=\"example-content solid\"\n                    (click)=\"toggleDrawer()\"\n                >\n                    Toggle Drawer\n                </div>\n                <div\n                    class=\"example-content solid\"\n                    (click)=\"toggleDrawer(true)\"\n                >\n                    Toggle Modal\n                </div>\n                @for (tile of mockContent(); track tile) {\n                    <div class=\"example-content\">{{ tile }}</div>\n                }\n            }\n        </ng-content>\n    </ng-template>\n    @if (layoutType() === 'wrapper') {\n        <div class=\"wrapper\">\n            <ng-container *ngTemplateOutlet=\"mainContent\"></ng-container>\n        </div>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"mainContent\"></ng-container>\n    }\n\n    @if (collapsible()) {\n        @if (\n            !showTopMenu() && !forceTop() && overlayAside() && secondaryMenuPortal() && asideOpen()\n        ) {\n            <div\n                (click)=\"toggleProjectedSecondaryMenu()\"\n                class=\"collapse-toggle\"\n                [ngClass]=\"{ collapsed: asideOpen() }\"\n            >\n                <span>{{ '>' }}</span>\n            </div>\n        }\n    }\n</main>\n@if (collapsible()) {\n    @if (!showTopMenu() && !forceTop() && overlayAside() && secondaryMenuPortal() && !asideOpen()) {\n        <div\n            (click)=\"toggleProjectedSecondaryMenu()\"\n            class=\"collapse-toggle\"\n            [ngClass]=\"{ collapsed: asideOpen() }\"\n        >\n            <span>{{ '>' }}</span>\n        </div>\n    }\n}\n\n<div\n    class=\"drawer-wrapper\"\n    [ngClass]=\"templateClasses()\"\n>\n    @if (rightDrawerPortal(); as rightDrawerTemplate) {\n        <ng-template [cdkPortalOutlet]=\"rightDrawerTemplate\"></ng-template>\n    } @else {\n        <ng-content select=\"ng-container[drawer]\">\n            @if (isStoryBook) {\n                <div class=\"example-drawer\">{{ modal() ? 'Modal' : 'Drawer' }}</div>\n            }\n        </ng-content>\n    }\n    <div\n        class=\"resize-handle drawer\"\n        cdkDrag\n        (cdkDragReleased)=\"resizing.set(false)\"\n        (cdkDragMoved)=\"resizeDrawer($event)\"\n    ></div>\n</div>\n\n<section class=\"notifications\">\n    <ng-content select=\"ng-container[notifications]\">\n        @if (isStoryBook) {\n            @for (message of mockMessages(); track message; let index = $index) {\n                <div\n                    class=\"example-notification\"\n                    (click)=\"removeMessage(index)\"\n                >\n                    {{ message }}\n                </div>\n            }\n        }\n    </ng-content>\n</section>\n\n@if (asideExpanded() || secondaryMenuModalOpen()) {\n    <aside [ngClass]=\"templateClasses()\">\n        @if (secondaryMenuModalOpen()) {\n            <div\n                class=\"secondary-modal\"\n                (nxClickElsewhere)=\"closeOnContentClick() && secondaryMenuModalOpen.set(false)\"\n            >\n                <ng-content select=\"ng-container[secondaryMenuModal]\">\n                    @if (isStoryBook) {\n                        <div\n                            class=\"example-aside\"\n                            (click)=\"toggleHoverMenu()\"\n                        >\n                            Toggle hover menu\n                        </div>\n                    }\n                </ng-content>\n            </div>\n        }\n\n        <div [ngClass]=\"{ 'hidden-portal': secondaryMenuModalOpen() }\">\n            @if (secondaryMenuPortal(); as secondaryMenuPortal) {\n                <ng-template [cdkPortalOutlet]=\"secondaryMenuPortal\"></ng-template>\n            } @else if (isStoryBook) {\n                <div\n                    class=\"example-aside\"\n                    (click)=\"toggleHoverMenu()\"\n                >\n                    Toggle hover menu\n                </div>\n            }\n        </div>\n        @if (asideResizable() && !secondaryMenuModalOpen()) {\n            <div\n                class=\"resize-handle\"\n                cdkDrag\n                (cdkDragReleased)=\"resizing.set(false)\"\n                (cdkDragMoved)=\"resizeSecondaryMenu($event)\"\n            ></div>\n        }\n        @if (hoverMenuOpen()) {\n            <div\n                class=\"hover-menu\"\n                [ngClass]=\"templateClasses()\"\n            >\n                <ng-content select=\"ng-container[hoverMenu]\">\n                    @if (isStoryBook) {\n                        <div\n                            class=\"example-hover-menu\"\n                            (click)=\"toggleHoverMenu()\"\n                        >\n                            Toggle hover menu\n                        </div>\n                    }\n                </ng-content>\n            </div>\n        }\n    </aside>\n}\n\n<div\n    class=\"modal-overlay\"\n    (click)=\"toggleOverlay()\"\n></div>\n", styles: [":host{overflow:hidden;--gap: spacing.get-size(6);--default-menus-width: 336px;gap:24px;--menu-size: 72px;display:grid;grid-template-areas:\"header aside main drawer\";grid-template-columns:72px 0px 1fr 0px;grid-template-rows:1fr;grid-auto-flow:row;height:100vh;height:100dvh}:host,:host main{background-color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host:not(.resizing-panel){transition:.2s}:host main,:host aside,:host header,:host div.drawer-wrapper{transform:translateZ(0)}:host.aside-open:not(.overlay-aside){grid-template-columns:72px var(--secondary-menu-width) 1fr 0px}:host.drawer-open{grid-template-columns:72px 0px 1fr var(--drawer-width)}:host.drawer-open>main{padding-right:0}:host.drawer-open:not(.can-fit-both-panels) .collapse-toggle{display:none}:host.drawer-open.aside-open:not(.overlay-aside){grid-template-columns:72px var(--secondary-menu-width) 1fr var(--drawer-width)}:host aside{margin-left:-24px;max-width:calc(100vw - 144px);max-width:calc(100dvw - 144px)}:host aside>.secondary-modal{z-index:100;position:absolute;inset:0}:host main{padding:24px 24px 24px 0}:host.overlay-aside aside{grid-area:main;grid-row:1;grid-column:2;width:var(--secondary-menu-overlay-width)}:host .example-menu{writing-mode:vertical-lr;transform:rotate(180deg)}:host.top-menu{grid-template-rows:72px 1fr;grid-template-columns:100vw;padding:0;grid-template-areas:\"header\" \"main\"}:host.top-menu header{grid-column:1/-1;margin:0!important}:host.top-menu.overlay-aside>aside{margin:-24px -24px 0 0;padding:0;width:100%;max-width:100vw;max-width:100dvw}:host.top-menu.overlay-aside>aside .resize-handle{display:none}:host.top-menu.overlay-aside>.drawer-wrapper{margin:-24px -24px 0 0;padding:0;grid-area:content;width:100%;max-width:100vw;max-width:100dvw}:host.top-menu.overlay-aside>.drawer-wrapper .resize-handle{display:none}:host.top-menu main{margin:-24px 0 0!important;padding:24px 0 0!important}:host.top-menu .example-menu{writing-mode:initial;transform:none}:host.top-menu.overlay-aside aside{grid-row:2;grid-column:1}:host.top-menu.overlay-aside.drawer-open>.drawer-wrapper{grid-area:main;grid-row:2;grid-column:1}:host.top-menu .notifications{display:none}:host.top-menu .hover-menu{right:0;width:100vw;width:100dvw}:is(:host.overlay-aside.drawer-open,:host.overlay-aside.aside-open) .notifications{display:none}:host header{z-index:1;grid-area:header;display:grid}:host header:not(.top-menu){background-color:var(--menu-bg);border-right:1px solid var(--menu-border)}:host header.top-menu{background-color:var(--menu-bg);border-bottom:1px solid var(--menu-border)}:host header .example-menu{padding:16px}:host.drawer-open>main.clamped{--padding-right: var(--padding-left)}:host:not(.aside-open)>main.wrapper{margin-left:-48px}:host:not(.drawer-open)>main.wrapper{margin-right:-48px}:host main{gap:24px;grid-area:main;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--min-column-size),100%),1fr));grid-auto-rows:min-content;grid-auto-flow:row;overflow:auto}:host main.wrapper{margin:0 -24px}:host main .wrapper{grid-column:1/-1;min-height:100vh;min-height:100dvh;margin:-24px 0;display:grid;grid-template-columns:subgrid}:host main .wrapper ::ng-deep router-outlet{display:none}:host main .wrapper ::ng-deep>*:not(router-outlet){grid-column:1/var(--column-span-main, -1)}:host main.clamped,:host main.wrapper{--min-side-padding: 0px;--left-size: max(calc((100% - var(--clamped-size, 1024px)) / 2), var(--min-side-padding));--right-size: calc(var(--padding-left) + var(--default-padding));--default-padding: 24px;--padding-left: 0px;--padding-right: calc(var(--right-size) + var(--left-size));padding:var(--default-padding) var(--padding-right) var(--default-padding) var(--padding-left)}:host main.clamped.centered,:host main.wrapper.centered{--padding-left: var(--left-size);--padding-right: var(--right-size)}:host main.clamped.top-menu,:host main.wrapper.top-menu{--padding-right: var(--padding-left);--min-side-padding: 24px}:host main .example-content{padding:16px;border:2px solid var(--font-color-brand)}:host main .example-content.solid{background:var(--font-color-brand)}:host .notifications{padding:24px;gap:8px;display:grid;grid-template-columns:1fr;grid-auto-rows:min-content;position:fixed;overflow-y:scroll;top:0;right:var(--notification-offset);bottom:0;width:var(--notifications-width, var(--default-menus-width));pointer-events:none}:host .notifications *{pointer-events:auto}:host .notifications .example-notification{padding:16px 48px;background-color:var(--notification-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--menu-border);border-radius:8px;display:flex;justify-content:center;align-items:center}:host aside{background-color:var(--menu-bg);border-right:1px solid var(--menu-border);gap:24px;position:relative;grid-area:aside;display:grid;grid-auto-columns:100%;grid-template-rows:calc(100% - 36px)}:host aside .example-aside{padding:16px;grid-column:span 1;height:100%;opacity:.5}:host .example-aside,:host .example-content,:host .example-menu,:host .example-hover-menu{display:flex;justify-content:center;align-items:center}:host .modal-overlay{background-color:var(--hover-menu-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(2px) brightness(40%);backdrop-filter:blur(2px) brightness(40%);position:fixed;display:none;inset:0}:host.show-modal-overlay:not(.top-menu)>.modal-overlay{display:block;right:var(--drawer-width)}:host.show-secondary-modal-overlay:not(.top-menu)>.modal-overlay{grid-area:main;margin-left:-24px;margin-right:-24px;position:static;display:block}:host.show-secondary-modal-overlay:not(.top-menu).overlay-aside>.modal-overlay{margin-left:calc(var(--secondary-menu-overlay-width) - 48px)}.drawer-wrapper{background-color:var(--menu-bg);border-left:1px solid var(--menu-border);display:none;position:relative}.drawer-wrapper.top-menu{border:none}:host.drawer-open .drawer-wrapper{grid-area:drawer;display:block}.drawer-wrapper .example-drawer{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.resize-handle{cursor:ew-resize;position:absolute;top:0;bottom:0;width:6px}.resize-handle:not(.drawer){right:-3px}.resize-handle.drawer{left:-3px}.hover-menu{background-color:var(--hover-menu-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-right:1px solid var(--menu-border);position:absolute;top:0;bottom:0;right:calc(var(--hover-menu-size, var(--default-menus-width)) * -1);width:var(--hover-menu-size, var(--default-menus-width))}.hover-menu.top-menu{border:none}.hover-menu .example-hover-menu{height:100%}.hidden-portal{display:none!important}:host.overlay-aside .collapse-toggle.collapsed{left:calc(var(--secondary-menu-overlay-width) - 24px)}.collapse-toggle{--toggle-height: 48px;--toggle-width: calc(var(--toggle-height) / 3);--border-radius: var(--toggle-height) calc(var(--toggle-width) * 2);height:var(--toggle-height);background-color:var(--menu-bg);border:1px solid var(--menu-border);width:var(--toggle-width);position:fixed;top:calc(50% - var(--toggle-height) / 2);left:var(--menu-size);display:flex;justify-content:center;align-items:center;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-left-color:transparent;cursor:pointer}.collapse-toggle.collapsed{left:0}.collapse-toggle.collapsed>*{transform:scaleX(-1)}.toggle-drawer{position:fixed;top:0;right:0;bottom:0;padding:24px;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NxClickElsewhereDirective, selector: "[nxClickElsewhere]", outputs: ["nxClickElsewhere"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-layout', imports: [CommonModule, FormsModule, DragDropModule, PortalModule, NxClickElsewhereDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class]': 'this.class()',
                        '[style.--secondary-menu-width]': 'this.secondaryMenuWidth()',
                        '[style.--drawer-width]': 'this.drawerWidth()',
                        '[style.--notifications-width]': 'this.notificationsWidth()',
                        '[style.--notification-offset]': 'this.notificationOffset()',
                        '[style.--secondary-menu-overlay-width]': 'this.secondaryMenuOverlayWidth()',
                        '[style.--min-column-size]': 'this.minColumnPx() + "px"',
                        '[style.--clamped-size]': 'this.clampedWidth()',
                        '[style.--hover-menu-size]': 'this.hoverMenuWidth()',
                        '[style.--column-span-main]': 'this.columnSpanMain()',
                    }, template: "<header [ngClass]=\"templateClasses()\">\n    <ng-content select=\"ng-container[header]\">\n        <ng-content select=\"ng-container[menu]\">\n            <div\n                class=\"example-menu\"\n                (click)=\"toggleSecondaryModal()\"\n            >\n                Menu\n            </div>\n        </ng-content>\n        @if (!secondaryMenuModalOpen() && (forceTop() || showTopMenu()) && secondaryMenuPortal()) {\n            <div\n                class=\"toggle-drawer\"\n                (click)=\"toggleProjectedSecondaryMenu()\"\n            >\n                {{ asideOpen() ? 'Hide' : 'Show' }}\n            </div>\n        }\n    </ng-content>\n</header>\n<main\n    [ngClass]=\"templateClasses()\"\n    #mainSection\n>\n    <ng-template #mainContent>\n        <ng-content select=\"ng-container[main]\">\n            @if (isStoryBook) {\n                <div\n                    class=\"example-content solid\"\n                    (click)=\"toggleDrawer()\"\n                >\n                    Toggle Drawer\n                </div>\n                <div\n                    class=\"example-content solid\"\n                    (click)=\"toggleDrawer(true)\"\n                >\n                    Toggle Modal\n                </div>\n                @for (tile of mockContent(); track tile) {\n                    <div class=\"example-content\">{{ tile }}</div>\n                }\n            }\n        </ng-content>\n    </ng-template>\n    @if (layoutType() === 'wrapper') {\n        <div class=\"wrapper\">\n            <ng-container *ngTemplateOutlet=\"mainContent\"></ng-container>\n        </div>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"mainContent\"></ng-container>\n    }\n\n    @if (collapsible()) {\n        @if (\n            !showTopMenu() && !forceTop() && overlayAside() && secondaryMenuPortal() && asideOpen()\n        ) {\n            <div\n                (click)=\"toggleProjectedSecondaryMenu()\"\n                class=\"collapse-toggle\"\n                [ngClass]=\"{ collapsed: asideOpen() }\"\n            >\n                <span>{{ '>' }}</span>\n            </div>\n        }\n    }\n</main>\n@if (collapsible()) {\n    @if (!showTopMenu() && !forceTop() && overlayAside() && secondaryMenuPortal() && !asideOpen()) {\n        <div\n            (click)=\"toggleProjectedSecondaryMenu()\"\n            class=\"collapse-toggle\"\n            [ngClass]=\"{ collapsed: asideOpen() }\"\n        >\n            <span>{{ '>' }}</span>\n        </div>\n    }\n}\n\n<div\n    class=\"drawer-wrapper\"\n    [ngClass]=\"templateClasses()\"\n>\n    @if (rightDrawerPortal(); as rightDrawerTemplate) {\n        <ng-template [cdkPortalOutlet]=\"rightDrawerTemplate\"></ng-template>\n    } @else {\n        <ng-content select=\"ng-container[drawer]\">\n            @if (isStoryBook) {\n                <div class=\"example-drawer\">{{ modal() ? 'Modal' : 'Drawer' }}</div>\n            }\n        </ng-content>\n    }\n    <div\n        class=\"resize-handle drawer\"\n        cdkDrag\n        (cdkDragReleased)=\"resizing.set(false)\"\n        (cdkDragMoved)=\"resizeDrawer($event)\"\n    ></div>\n</div>\n\n<section class=\"notifications\">\n    <ng-content select=\"ng-container[notifications]\">\n        @if (isStoryBook) {\n            @for (message of mockMessages(); track message; let index = $index) {\n                <div\n                    class=\"example-notification\"\n                    (click)=\"removeMessage(index)\"\n                >\n                    {{ message }}\n                </div>\n            }\n        }\n    </ng-content>\n</section>\n\n@if (asideExpanded() || secondaryMenuModalOpen()) {\n    <aside [ngClass]=\"templateClasses()\">\n        @if (secondaryMenuModalOpen()) {\n            <div\n                class=\"secondary-modal\"\n                (nxClickElsewhere)=\"closeOnContentClick() && secondaryMenuModalOpen.set(false)\"\n            >\n                <ng-content select=\"ng-container[secondaryMenuModal]\">\n                    @if (isStoryBook) {\n                        <div\n                            class=\"example-aside\"\n                            (click)=\"toggleHoverMenu()\"\n                        >\n                            Toggle hover menu\n                        </div>\n                    }\n                </ng-content>\n            </div>\n        }\n\n        <div [ngClass]=\"{ 'hidden-portal': secondaryMenuModalOpen() }\">\n            @if (secondaryMenuPortal(); as secondaryMenuPortal) {\n                <ng-template [cdkPortalOutlet]=\"secondaryMenuPortal\"></ng-template>\n            } @else if (isStoryBook) {\n                <div\n                    class=\"example-aside\"\n                    (click)=\"toggleHoverMenu()\"\n                >\n                    Toggle hover menu\n                </div>\n            }\n        </div>\n        @if (asideResizable() && !secondaryMenuModalOpen()) {\n            <div\n                class=\"resize-handle\"\n                cdkDrag\n                (cdkDragReleased)=\"resizing.set(false)\"\n                (cdkDragMoved)=\"resizeSecondaryMenu($event)\"\n            ></div>\n        }\n        @if (hoverMenuOpen()) {\n            <div\n                class=\"hover-menu\"\n                [ngClass]=\"templateClasses()\"\n            >\n                <ng-content select=\"ng-container[hoverMenu]\">\n                    @if (isStoryBook) {\n                        <div\n                            class=\"example-hover-menu\"\n                            (click)=\"toggleHoverMenu()\"\n                        >\n                            Toggle hover menu\n                        </div>\n                    }\n                </ng-content>\n            </div>\n        }\n    </aside>\n}\n\n<div\n    class=\"modal-overlay\"\n    (click)=\"toggleOverlay()\"\n></div>\n", styles: [":host{overflow:hidden;--gap: spacing.get-size(6);--default-menus-width: 336px;gap:24px;--menu-size: 72px;display:grid;grid-template-areas:\"header aside main drawer\";grid-template-columns:72px 0px 1fr 0px;grid-template-rows:1fr;grid-auto-flow:row;height:100vh;height:100dvh}:host,:host main{background-color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host:not(.resizing-panel){transition:.2s}:host main,:host aside,:host header,:host div.drawer-wrapper{transform:translateZ(0)}:host.aside-open:not(.overlay-aside){grid-template-columns:72px var(--secondary-menu-width) 1fr 0px}:host.drawer-open{grid-template-columns:72px 0px 1fr var(--drawer-width)}:host.drawer-open>main{padding-right:0}:host.drawer-open:not(.can-fit-both-panels) .collapse-toggle{display:none}:host.drawer-open.aside-open:not(.overlay-aside){grid-template-columns:72px var(--secondary-menu-width) 1fr var(--drawer-width)}:host aside{margin-left:-24px;max-width:calc(100vw - 144px);max-width:calc(100dvw - 144px)}:host aside>.secondary-modal{z-index:100;position:absolute;inset:0}:host main{padding:24px 24px 24px 0}:host.overlay-aside aside{grid-area:main;grid-row:1;grid-column:2;width:var(--secondary-menu-overlay-width)}:host .example-menu{writing-mode:vertical-lr;transform:rotate(180deg)}:host.top-menu{grid-template-rows:72px 1fr;grid-template-columns:100vw;padding:0;grid-template-areas:\"header\" \"main\"}:host.top-menu header{grid-column:1/-1;margin:0!important}:host.top-menu.overlay-aside>aside{margin:-24px -24px 0 0;padding:0;width:100%;max-width:100vw;max-width:100dvw}:host.top-menu.overlay-aside>aside .resize-handle{display:none}:host.top-menu.overlay-aside>.drawer-wrapper{margin:-24px -24px 0 0;padding:0;grid-area:content;width:100%;max-width:100vw;max-width:100dvw}:host.top-menu.overlay-aside>.drawer-wrapper .resize-handle{display:none}:host.top-menu main{margin:-24px 0 0!important;padding:24px 0 0!important}:host.top-menu .example-menu{writing-mode:initial;transform:none}:host.top-menu.overlay-aside aside{grid-row:2;grid-column:1}:host.top-menu.overlay-aside.drawer-open>.drawer-wrapper{grid-area:main;grid-row:2;grid-column:1}:host.top-menu .notifications{display:none}:host.top-menu .hover-menu{right:0;width:100vw;width:100dvw}:is(:host.overlay-aside.drawer-open,:host.overlay-aside.aside-open) .notifications{display:none}:host header{z-index:1;grid-area:header;display:grid}:host header:not(.top-menu){background-color:var(--menu-bg);border-right:1px solid var(--menu-border)}:host header.top-menu{background-color:var(--menu-bg);border-bottom:1px solid var(--menu-border)}:host header .example-menu{padding:16px}:host.drawer-open>main.clamped{--padding-right: var(--padding-left)}:host:not(.aside-open)>main.wrapper{margin-left:-48px}:host:not(.drawer-open)>main.wrapper{margin-right:-48px}:host main{gap:24px;grid-area:main;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--min-column-size),100%),1fr));grid-auto-rows:min-content;grid-auto-flow:row;overflow:auto}:host main.wrapper{margin:0 -24px}:host main .wrapper{grid-column:1/-1;min-height:100vh;min-height:100dvh;margin:-24px 0;display:grid;grid-template-columns:subgrid}:host main .wrapper ::ng-deep router-outlet{display:none}:host main .wrapper ::ng-deep>*:not(router-outlet){grid-column:1/var(--column-span-main, -1)}:host main.clamped,:host main.wrapper{--min-side-padding: 0px;--left-size: max(calc((100% - var(--clamped-size, 1024px)) / 2), var(--min-side-padding));--right-size: calc(var(--padding-left) + var(--default-padding));--default-padding: 24px;--padding-left: 0px;--padding-right: calc(var(--right-size) + var(--left-size));padding:var(--default-padding) var(--padding-right) var(--default-padding) var(--padding-left)}:host main.clamped.centered,:host main.wrapper.centered{--padding-left: var(--left-size);--padding-right: var(--right-size)}:host main.clamped.top-menu,:host main.wrapper.top-menu{--padding-right: var(--padding-left);--min-side-padding: 24px}:host main .example-content{padding:16px;border:2px solid var(--font-color-brand)}:host main .example-content.solid{background:var(--font-color-brand)}:host .notifications{padding:24px;gap:8px;display:grid;grid-template-columns:1fr;grid-auto-rows:min-content;position:fixed;overflow-y:scroll;top:0;right:var(--notification-offset);bottom:0;width:var(--notifications-width, var(--default-menus-width));pointer-events:none}:host .notifications *{pointer-events:auto}:host .notifications .example-notification{padding:16px 48px;background-color:var(--notification-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--menu-border);border-radius:8px;display:flex;justify-content:center;align-items:center}:host aside{background-color:var(--menu-bg);border-right:1px solid var(--menu-border);gap:24px;position:relative;grid-area:aside;display:grid;grid-auto-columns:100%;grid-template-rows:calc(100% - 36px)}:host aside .example-aside{padding:16px;grid-column:span 1;height:100%;opacity:.5}:host .example-aside,:host .example-content,:host .example-menu,:host .example-hover-menu{display:flex;justify-content:center;align-items:center}:host .modal-overlay{background-color:var(--hover-menu-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(2px) brightness(40%);backdrop-filter:blur(2px) brightness(40%);position:fixed;display:none;inset:0}:host.show-modal-overlay:not(.top-menu)>.modal-overlay{display:block;right:var(--drawer-width)}:host.show-secondary-modal-overlay:not(.top-menu)>.modal-overlay{grid-area:main;margin-left:-24px;margin-right:-24px;position:static;display:block}:host.show-secondary-modal-overlay:not(.top-menu).overlay-aside>.modal-overlay{margin-left:calc(var(--secondary-menu-overlay-width) - 48px)}.drawer-wrapper{background-color:var(--menu-bg);border-left:1px solid var(--menu-border);display:none;position:relative}.drawer-wrapper.top-menu{border:none}:host.drawer-open .drawer-wrapper{grid-area:drawer;display:block}.drawer-wrapper .example-drawer{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.resize-handle{cursor:ew-resize;position:absolute;top:0;bottom:0;width:6px}.resize-handle:not(.drawer){right:-3px}.resize-handle.drawer{left:-3px}.hover-menu{background-color:var(--hover-menu-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-right:1px solid var(--menu-border);position:absolute;top:0;bottom:0;right:calc(var(--hover-menu-size, var(--default-menus-width)) * -1);width:var(--hover-menu-size, var(--default-menus-width))}.hover-menu.top-menu{border:none}.hover-menu .example-hover-menu{height:100%}.hidden-portal{display:none!important}:host.overlay-aside .collapse-toggle.collapsed{left:calc(var(--secondary-menu-overlay-width) - 24px)}.collapse-toggle{--toggle-height: 48px;--toggle-width: calc(var(--toggle-height) / 3);--border-radius: var(--toggle-height) calc(var(--toggle-width) * 2);height:var(--toggle-height);background-color:var(--menu-bg);border:1px solid var(--menu-border);width:var(--toggle-width);position:fixed;top:calc(50% - var(--toggle-height) / 2);left:var(--menu-size);display:flex;justify-content:center;align-items:center;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-left-color:transparent;cursor:pointer}.collapse-toggle.collapsed{left:0}.collapse-toggle.collapsed>*{transform:scaleX(-1)}.toggle-drawer{position:fixed;top:0;right:0;bottom:0;padding:24px;display:flex;justify-content:center;align-items:center}\n"] }]
        }], ctorParameters: () => [], propDecorators: { drawerWidthChange: [{
                type: Output
            }] } });

class NxApplyActionTargetDirective {
    constructor() {
        this.nxActionClassesTarget = input(true, { transform: booleanAttribute });
        this.elRef = inject(ElementRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxApplyActionTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxApplyActionTargetDirective, isStandalone: true, selector: "[nxActionClassesTarget]", inputs: { nxActionClassesTarget: { classPropertyName: "nxActionClassesTarget", publicName: "nxActionClassesTarget", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxApplyActionTargetDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxActionClassesTarget]',
                    standalone: true,
                }]
        }] });

const colorMapping = {
    // Mapped colors
    '#A5B7C0': generateCssVariableName('core', 'dark10'),
    '#fff': generateCssVariableName('core', 'dark1'),
    '#303F47': generateCssVariableName('core', 'light10'),
    '#698796': generateCssVariableName('core', 'dark16'),
    '#E1E7EA': generateCssVariableName('core', 'dark4'),
    '#FFCA28': generateCssVariableName('attentionWarningYellow', 'initial'),
    '#EF5350': generateCssVariableName('attentionErrorRed', 'initial'),
    '#53707F': generateCssVariableName('core', 'light17'),
    '#91A7B2': generateCssVariableName('core', 'dark12'),
    '#212A2F': generateCssVariableName('core', 'light7'),
    '#263137': generateCssVariableName('core', 'light8'),
    '#171C1F': generateCssVariableName('core', 'light5'),
    '#2FA2DB': generateCssVariableName('brand', 'initial'),
    '#CDD7DC': generateCssVariableName('core', 'dark5'),
    '#000': generateCssVariableName('core', 'light1'),
    '#000000': generateCssVariableName('core', 'light1'),
    '#4E6977': generateCssVariableName('core', 'light16'),
    '#42A5F5': generateCssVariableName('attentionInfoBlue', 'initial'),
    '#879FAB': generateCssVariableName('core', 'dark13'),
    '#AFBFC7': generateCssVariableName('core', 'dark9'),
    '#C3CFD5': generateCssVariableName('core', 'dark7'),
    white: generateCssVariableName('core', 'dark1'),
    '#F02C2C': generateCssVariableName('attentionErrorRed', 'dark18'),
    '#2B383F': generateCssVariableName('core', 'light9'),
    '#3F545F': generateCssVariableName('core', 'light13'),
    '#66BB6A': generateCssVariableName('attentionSuccessGreen', 'initial'),
    '#4CAF50': generateCssVariableName('attentionSuccessGreen', 'initial'),
    '#C22626': generateCssVariableName('attentionErrorRed', 'dark14'),
    '#3A4D57': generateCssVariableName('core', 'light12'),
    '#445B67': generateCssVariableName('core', 'light14'),
    '#587787': generateCssVariableName('core', 'light18'),
    '#A3B8C2': generateCssVariableName('core', 'light11'),
    '#F44336': generateCssVariableName('attentionErrorRed', 'light14'),
    '#7E9BA9': generateCssVariableName('core', 'light16'),
    '#0C1012': generateCssVariableName('core', 'dark2'),
    '#DAE2E7': generateCssVariableName('core', 'light4'),
    '#1E88E5': generateCssVariableName('attentionInfoBlue', 'dark16'),
    '#FFC107': generateCssVariableName('attentionWarningYellow', 'dark17'),
    // Can't find mapping
    '#E5E9EB': '#E5E9EB',
    '#4FC627': '#4FC627',
    '#B0BEC4': '#B0BEC4',
    '#7B929D': '#7B929D',
    '#D9D9D9': '#D9D9D9',
    '#8B8D8F': '#8B8D8F',
    '#BABABA': '#BABABA',
    '#EDB732': '#EDB732',
    // Doesn't need mapping
    none: 'none',
    'url(#a)': 'url(#a)',
    'url(#b)': 'url(#b)',
    'url(#c)': 'url(#c)',
    'url(#d)': 'url(#d)',
    'url(#nxicon-nxIconLoaders-a)': 'url(#nxicon-nxIconLoaders-a)',
    'url(#nxicon-nxIconStHvacFanStart-a)': 'url(#nxicon-nxIconStHvacFanStart-a)',
};
/**
 * The icons look like they were defined in light theme compared to most that were defined in dark theme.
 *
 * Skip normalizing for these icons.
 *
 * For comparison story we should change the theme to light for these.
 */
const skipNormalize = [
    'ZoomOut',
    'ZoomIn',
    'WsTilesFolder',
    'WsFolderOpenSelected',
    'WsFolderOpen',
    'WsFolderCloseSelected',
    'WsFolderClose',
    'Backward',
    'AddingDevicesPlaceholder',
    'ButtonIndicatorOff',
    'Calendar52X24',
    'Chart',
    'Forward',
    'Group64X64',
    'GroupDefault20X20',
    'GroupDefault64X64',
    'GroupLdap',
    'Hotspots',
    'IndicatorOff',
    'Initials',
    'LayoutCloudLocked',
    'LayoutExportedEncrypted',
    'LayoutShared',
    'LayoutsIntercom',
    'LayoutsShared',
    'LdapGroup',
    'Live52X24',
    'MainMenu',
    // 'Motion20X20',
    'NoLayouts',
    'Nolist',
    'Nomembers',
    'Noobjects',
    'NoOrganization',
    'NoPartner',
    'Noserver',
    'Noservices',
    'Nosettings',
    'Nosite',
    'Notfound',
    'Notification20X20',
    'Notification64X64',
    'NotificationNumber',
    'Nousers',
    'Object20X20',
    'Openfolder',
    'Organization64X64',
    'Organizations',
    'OrganizationShutdown',
    'OrganizationSuspended',
    'OtherSystems',
    'Pan',
    'PanAndTilt',
    'Partner20X20',
    'Partner64X64',
    'Paste',
    'Pause20X20Variant1',
    'Pause32X32',
    'Play32X32',
    'Report',
    'RewindBackward',
    'RewindForward',
    'Searchbyip',
    'Sound64X64',
    'StepBackward',
    'StepForward',
    'Sync',
    // 'Thumbnails',
    'Tilt',
    'TimePlaceholder',
    'User64X64',
    'UserAlert',
    'UserCloud20X20',
    'UserCloud64X64',
    'UserLdap20X20',
    'UserLdap64X64',
    'UserOrganization64X64',
    'UserOwner',
    'UserTemp20X20',
    'UserTemp64X64',
    'VideowallServerPlaceholder',
    'VideowallWebpagePlaceholder',
    // 'VirtualCamera',
];
/**
 * These don't seem to have proper layer classes or some have fill url which
 * we need to figure out how to handle.
 *
 * Either these won't be themed or we need to have the svg updated for these.
 */
const alwaysUseInlineStyles = [
    'AccountBox',
    'AllEvents',
    'Article',
    'Capslock',
    'CapslockText',
    'Calendar20X20Variant2',
    'Certificate90X124',
    'ConnectToCloud54X32',
    'ConnectToServer54X32',
    'CursorCross',
    'CursorMove',
    'Deny',
    'Loaders',
    'NoFavorites128X128',
    'NoHidden128X128',
    'NoSystemsFound128X128',
    'NxConnectPlaceholder240X240',
    'PanelLeft',
    'PanelPin',
    'PanelRight',
    'PtzPromoAdvanced',
    'PtzPromoDrag',
    'PtzPromoKeys',
    'PtzPromoOld',
    'PtzPromoScroll',
    'PtzPromoShowAgain',
    'PtzPromoTracking',
    'Settings39X78',
    'StHeateroff',
    'StHvacFanStart',
];
const getColor = (color, colors, selectorName, iconName) => {
    const normalize = (color) => {
        if (!skipNormalize.includes(iconName) &&
            selectorName === 'primary' &&
            color.includes('core') &&
            color.includes('dark')) {
            return color.replace('dark', 'light');
        }
        return color;
    };
    const mappedColor = colorMapping[color];
    const normalizedColor = normalize(mappedColor);
    if (isHexString(normalizedColor)) {
        return normalizedColor;
    }
    return colors[normalizedColor] || mappedColor;
};
const extractSvgColors = ({ data, name }, colors) => {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = data;
    const keys = ['primary', 'secondary', 'third'];
    const extracted = keys.reduce((acc, selectorName) => {
        const fill = [...tempElement.querySelectorAll(`.${capitalize(selectorName)}`)].map(el => el.getAttribute('fill'))[0];
        const stroke = [...tempElement.querySelectorAll(`.${capitalize(selectorName)}`)].map(el => el.getAttribute('stroke'))[0];
        return fill || stroke
            ? {
                ...acc,
                [selectorName]: {
                    fill: fill ? getColor(fill, colors, selectorName, name) : null,
                    stroke: stroke ? getColor(stroke, colors, selectorName, name) : null,
                },
            }
            : acc;
    }, {});
    return Object.keys(extracted || {}).length ? extracted : undefined;
};
/**
 * Most likely will only be used internally
 */
class NxIconComponent extends BaseComponent {
    static { this.ensureStyleMapping = memoize(async () => {
        const allColors = await extractAllColors();
        const missingColors = allColors.filter(color => !colorMapping[color]);
        return missingColors;
    }); }
    constructor() {
        super();
        /**
         * Name or reference to icon definition.
         */
        this.icon = input.required();
        /**
         * Preserve inline styles from svg (won't remove fill/stroke).
         *
         * Mostly for internal testing.
         */
        this.preserveInline = input(false, { transform: booleanAttribute });
        /**
         * Preserve size (sizing styles applied to the nx-icon component won't be applied to svg).
         *
         * Probably mostly for testing, not sure if there are a lot of cases where we want to use the
         * size defined in the svg.
         */
        this.preserveSize = input(false, { transform: booleanAttribute });
        /**
         * Override the color defined within the icon.
         */
        this.colorOverrides = input();
        /**
         * Use Current Color for primary stroke/fill.
         */
        this.useCurrentColor = input(false, { transform: booleanAttribute });
        this.resolvedIcon = toSignal(toObservable(this.icon).pipe(switchMap(async (iconOrName) => {
            if (typeof iconOrName === 'string') {
                return getIcon(iconOrName);
            }
            return iconOrName;
        })));
        this.iconWithTransforms = computed(() => {
            const resolvedIcon = this.resolvedIcon();
            if (resolvedIcon) {
                const transforms = [normalizeClassNames];
                if (!this.preserveInline() && !alwaysUseInlineStyles.includes(resolvedIcon.name)) {
                    transforms.push(removeInlineStyles);
                }
                if (!this.preserveSize()) {
                    transforms.push(fullWidth, fullHeight);
                }
                const withTransforms = flow(transforms);
                return withTransforms(resolvedIcon.data);
            }
            return false;
        });
        this.updateStoryBookThemeEffect = effect(() => {
            const icon = this.resolvedIcon();
            if (window.IS_STORYBOOK &&
                !this.preserveInline() &&
                icon &&
                window.parent.location.href.includes('--compare-against-initial')) {
                this.themeProvider.toggleTheme(!skipNormalize.includes(icon.name));
            }
        });
        this.updateIconEffect = effect(() => {
            const transformed = this.iconWithTransforms();
            if (transformed) {
                this.elRef.nativeElement.innerHTML = transformed;
            }
        });
        this.declareClassesEffect = effect(() => {
            const resolvedIcon = this.resolvedIcon();
            if (resolvedIcon) {
                const colors = this.themeProvider.colors();
                const useCurrentColor = this.useCurrentColor();
                const primaryDefault = colors[generateCssVariableName('core', 'light10')];
                const secondaryDefault = colors[generateCssVariableName('attentionErrorRed', 'initial')];
                const thirdDefault = colors[generateCssVariableName('brand', 'initial')];
                const defaults = {
                    primary: { fill: primaryDefault, stroke: primaryDefault },
                    secondary: { fill: secondaryDefault, stroke: secondaryDefault },
                    third: { fill: thirdDefault, stroke: thirdDefault },
                };
                const extracted = extractSvgColors(resolvedIcon, colors);
                // console.info({ extracted: this.colorOverrides() });
                const merged = {
                    ...defaults,
                    ...extracted,
                    ...this.colorOverrides(),
                };
                Object.entries(merged).forEach(([key, color]) => {
                    const { fill, stroke } = useCurrentColor && key === 'primary'
                        ? {
                            fill: 'currentColor',
                            stroke: 'currentColor',
                        }
                        : color;
                    if (fill) {
                        this.elRef.nativeElement.style.setProperty(`--svg-${key}-fill`, fill);
                    }
                    if (stroke) {
                        this.elRef.nativeElement.style.setProperty(`--svg-${key}-stroke`, stroke);
                    }
                });
            }
        });
        if (window.IS_STORYBOOK) {
            NxIconComponent.ensureStyleMapping().then(missingColors => {
                if (missingColors.length) {
                    alert(`Missing colors: ${missingColors.join(', ')}`);
                    console.info({
                        missingColors: Object.fromEntries(missingColors.map(color => [color, color])),
                    });
                }
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxIconComponent, isStandalone: true, selector: "nx-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, preserveInline: { classPropertyName: "preserveInline", publicName: "preserveInline", isSignal: true, isRequired: false, transformFunction: null }, preserveSize: { classPropertyName: "preserveSize", publicName: "preserveSize", isSignal: true, isRequired: false, transformFunction: null }, colorOverrides: { classPropertyName: "colorOverrides", publicName: "colorOverrides", isSignal: true, isRequired: false, transformFunction: null }, useCurrentColor: { classPropertyName: "useCurrentColor", publicName: "useCurrentColor", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: NxApplyActionTargetDirective, inputs: ["nxActionClassesTarget", "nxActionClassesTarget"] }], ngImport: i0, template: "", styles: [":host{display:inline-flex}:host ::ng-deep .Primary,:host ::ng-deep .Primary *:not(.Secondary):not(.Third){color:inherit}:host ::ng-deep .Primary[apply-fill],:host ::ng-deep .Primary *:not(.Secondary):not(.Third)[apply-fill]{fill:var(--svg-primary-fill-override, var(--svg-primary-fill))}:host ::ng-deep .Primary[apply-stroke],:host ::ng-deep .Primary *:not(.Secondary):not(.Third)[apply-stroke]{stroke:var(--svg-primary-stroke-override, var(--svg-primary-stroke))}:host ::ng-deep .Secondary,:host ::ng-deep .Secondary *:not(.Primary):not(.Third){color:inherit}:host ::ng-deep .Secondary[apply-fill],:host ::ng-deep .Secondary *:not(.Primary):not(.Third)[apply-fill]{fill:var(--svg-secondary-fill-override, var(--svg-secondary-fill))}:host ::ng-deep .Secondary[apply-stroke],:host ::ng-deep .Secondary *:not(.Primary):not(.Third)[apply-stroke]{stroke:var(--svg-secondary-stroke-override, var(--svg-secondary-stroke))}:host ::ng-deep .Third,:host ::ng-deep .Third *:not(.Primary):not(.Secondary){color:inherit}:host ::ng-deep .Third[apply-fill],:host ::ng-deep .Third *:not(.Primary):not(.Secondary)[apply-fill]{fill:var(--svg-third-fill-override, var(--svg-third-fill))}:host ::ng-deep .Third[apply-stroke],:host ::ng-deep .Third *:not(.Primary):not(.Secondary)[apply-stroke]{stroke:var(--svg-third-stroke-override, var(--svg-third-stroke))}:host{height:100%;width:max-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-icon', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: NxApplyActionTargetDirective,
                            inputs: ['nxActionClassesTarget'],
                        },
                    ], template: "", styles: [":host{display:inline-flex}:host ::ng-deep .Primary,:host ::ng-deep .Primary *:not(.Secondary):not(.Third){color:inherit}:host ::ng-deep .Primary[apply-fill],:host ::ng-deep .Primary *:not(.Secondary):not(.Third)[apply-fill]{fill:var(--svg-primary-fill-override, var(--svg-primary-fill))}:host ::ng-deep .Primary[apply-stroke],:host ::ng-deep .Primary *:not(.Secondary):not(.Third)[apply-stroke]{stroke:var(--svg-primary-stroke-override, var(--svg-primary-stroke))}:host ::ng-deep .Secondary,:host ::ng-deep .Secondary *:not(.Primary):not(.Third){color:inherit}:host ::ng-deep .Secondary[apply-fill],:host ::ng-deep .Secondary *:not(.Primary):not(.Third)[apply-fill]{fill:var(--svg-secondary-fill-override, var(--svg-secondary-fill))}:host ::ng-deep .Secondary[apply-stroke],:host ::ng-deep .Secondary *:not(.Primary):not(.Third)[apply-stroke]{stroke:var(--svg-secondary-stroke-override, var(--svg-secondary-stroke))}:host ::ng-deep .Third,:host ::ng-deep .Third *:not(.Primary):not(.Secondary){color:inherit}:host ::ng-deep .Third[apply-fill],:host ::ng-deep .Third *:not(.Primary):not(.Secondary)[apply-fill]{fill:var(--svg-third-fill-override, var(--svg-third-fill))}:host ::ng-deep .Third[apply-stroke],:host ::ng-deep .Third *:not(.Primary):not(.Secondary)[apply-stroke]{stroke:var(--svg-third-stroke-override, var(--svg-third-stroke))}:host{height:100%;width:max-content}\n"] }]
        }], ctorParameters: () => [] });

class NxNavMenuLinkComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.active = input(false, { transform: booleanAttribute });
        this.item = input.required();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNavMenuLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxNavMenuLinkComponent, isStandalone: true, selector: "nx-nav-menu-link", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<a\n    [class.active-item]=\"active()\"\n    [title]=\"item().name\"\n    [routerLink]=\"item().link\"\n>\n    <nx-icon\n        class=\"icon\"\n        [icon]=\"item().icon\"\n        [preserveInline]=\"true\"\n    ></nx-icon>\n</a>\n", styles: [":host{--base-menu-width: 72px;--border-width: 2px;--menu-item-width: 68;--menu-item-height: 56;--menu-item-corner-size: 16}:host::ng-deep path{fill:var(--nxc-light10-offset, var(--nxc-light10))}:host::ng-deep a:hover:not(.active-item) path{fill:var(--nxc-light4-offset, var(--nxc-light4))}:host::ng-deep a.active-item:not(.popup-item) path{fill:var(--nxc-brand)}a{width:calc(var(--menu-item-width) * 1px);height:calc(var(--menu-item-height) * 1px);position:relative;display:flex;justify-content:center;align-items:center;padding-right:1px;border-left:var(--border-width) solid transparent}a.active-item:not(.popup-item){background-image:linear-gradient(to right,hsl(from var(--nxc-brand) h s l/.1),transparent);border-left:var(--border-width) solid var(--nxc-brand)}a.active-item.popup-item{background:var(--nxc-dark3-offset, var(--nxc-dark3));z-index:2}a.popup-item:hover:not(.active-item):after{--corner-start-x: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-width))) * 100% );--corner-start-y: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-height))) * 100% );content:\"\";position:absolute;inset:0;background:var(--nxc-dark6-offset, var(--nxc-dark6));clip-path:polygon(var(--corner-start-x) 100%,100% 100%,100% var(--corner-start-y))}a:hover:not(.active-item){background:var(--nxc-dark3-offset, var(--nxc-dark3))}a .icon{height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNavMenuLinkComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-nav-menu-link', imports: [CommonModule, RouterModule, NxIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    [class.active-item]=\"active()\"\n    [title]=\"item().name\"\n    [routerLink]=\"item().link\"\n>\n    <nx-icon\n        class=\"icon\"\n        [icon]=\"item().icon\"\n        [preserveInline]=\"true\"\n    ></nx-icon>\n</a>\n", styles: [":host{--base-menu-width: 72px;--border-width: 2px;--menu-item-width: 68;--menu-item-height: 56;--menu-item-corner-size: 16}:host::ng-deep path{fill:var(--nxc-light10-offset, var(--nxc-light10))}:host::ng-deep a:hover:not(.active-item) path{fill:var(--nxc-light4-offset, var(--nxc-light4))}:host::ng-deep a.active-item:not(.popup-item) path{fill:var(--nxc-brand)}a{width:calc(var(--menu-item-width) * 1px);height:calc(var(--menu-item-height) * 1px);position:relative;display:flex;justify-content:center;align-items:center;padding-right:1px;border-left:var(--border-width) solid transparent}a.active-item:not(.popup-item){background-image:linear-gradient(to right,hsl(from var(--nxc-brand) h s l/.1),transparent);border-left:var(--border-width) solid var(--nxc-brand)}a.active-item.popup-item{background:var(--nxc-dark3-offset, var(--nxc-dark3));z-index:2}a.popup-item:hover:not(.active-item):after{--corner-start-x: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-width))) * 100% );--corner-start-y: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-height))) * 100% );content:\"\";position:absolute;inset:0;background:var(--nxc-dark6-offset, var(--nxc-dark6));clip-path:polygon(var(--corner-start-x) 100%,100% 100%,100% var(--corner-start-y))}a:hover:not(.active-item){background:var(--nxc-dark3-offset, var(--nxc-dark3))}a .icon{height:24px}\n"] }]
        }] });

class NxAccountInfoComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.accountItem = { id: 'account', icon: NxIconEnum.ACCOUNT_BOX, name: '', link: '' };
        this.accountInfo = input();
        this.active = input(false, {
            transform: booleanAttribute,
        });
        this.hasInfo = computed(() => {
            const { avatar, name } = this.accountInfo() || {};
            return avatar || name;
        });
        this.initials = computed(() => {
            const { name } = this.accountInfo() || {};
            if (!name) {
                return '';
            }
            const [first, last] = name.split(' ') || [];
            return first[0] + (last ? last[0] : '');
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxAccountInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxAccountInfoComponent, isStandalone: true, selector: "nx-account-info", inputs: { accountInfo: { classPropertyName: "accountInfo", publicName: "accountInfo", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "active()" } }, usesInheritance: true, ngImport: i0, template: "@if (!hasInfo()) {\n    <nx-nav-menu-link\n        [style.--menu-item-height]=\"80\"\n        [active]=\"active()\"\n        [item]=\"accountItem\"\n    />\n} @else if (accountInfo()?.avatar) {\n    <img\n        class=\"avatar\"\n        [src]=\"accountInfo()?.avatar\"\n    />\n} @else {\n    <div class=\"avatar\">\n        {{ initials() }}\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{--border-width: 2px;display:flex;justify-content:center;align-items:center;height:80px;width:68px;padding-right:var(--border-width);border-left:var(--border-width) solid transparent;cursor:pointer}:host.active{background-image:linear-gradient(to right,hsl(from var(--nxc-brand) h s l/.1),transparent);border-left:var(--border-width) solid var(--nxc-brand)}:host:not(.active) .avatar:hover{border:1.5px solid var(--nxc-light11-offset, var(--nxc-light11))}.avatar{font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);color:var(--nxc-dark1-offset, var(--nxc-dark1));background:var(--nxc-brand);border-radius:200px;text-align:center;line-height:40px;height:40px;width:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxNavMenuLinkComponent, selector: "nx-nav-menu-link", inputs: ["active", "item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxAccountInfoComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-account-info', imports: [CommonModule, NxNavMenuLinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class.active]': 'active()',
                    }, template: "@if (!hasInfo()) {\n    <nx-nav-menu-link\n        [style.--menu-item-height]=\"80\"\n        [active]=\"active()\"\n        [item]=\"accountItem\"\n    />\n} @else if (accountInfo()?.avatar) {\n    <img\n        class=\"avatar\"\n        [src]=\"accountInfo()?.avatar\"\n    />\n} @else {\n    <div class=\"avatar\">\n        {{ initials() }}\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{--border-width: 2px;display:flex;justify-content:center;align-items:center;height:80px;width:68px;padding-right:var(--border-width);border-left:var(--border-width) solid transparent;cursor:pointer}:host.active{background-image:linear-gradient(to right,hsl(from var(--nxc-brand) h s l/.1),transparent);border-left:var(--border-width) solid var(--nxc-brand)}:host:not(.active) .avatar:hover{border:1.5px solid var(--nxc-light11-offset, var(--nxc-light11))}.avatar{font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);color:var(--nxc-dark1-offset, var(--nxc-dark1));background:var(--nxc-brand);border-radius:200px;text-align:center;line-height:40px;height:40px;width:40px}\n"] }]
        }] });

class NxNavMenuSubMenuComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.active = input(false, { transform: booleanAttribute });
        this.item = input.required();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNavMenuSubMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxNavMenuSubMenuComponent, isStandalone: true, selector: "nx-nav-menu-submenu", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<a\n    class=\"popup-item\"\n    [class.active-item]=\"active()\"\n    [title]=\"item().name\"\n>\n    <nx-icon\n        class=\"icon\"\n        [icon]=\"item().icon\"\n        [preserveInline]=\"true\"\n    ></nx-icon>\n</a>\n", styles: [":host{--base-menu-width: 72px;--border-width: 2px;--menu-item-width: 68;--menu-item-height: 56;--menu-item-corner-size: 16}:host::ng-deep path{fill:var(--nxc-light10-offset, var(--nxc-light10))}:host::ng-deep a:hover:not(.active-item) path{fill:var(--nxc-light4-offset, var(--nxc-light4))}:host::ng-deep a.active-item:not(.popup-item) path{fill:var(--nxc-brand)}a{width:calc(var(--menu-item-width) * 1px);height:calc(var(--menu-item-height) * 1px);position:relative;display:flex;justify-content:center;align-items:center;padding-right:1px;border-left:var(--border-width) solid transparent}a.active-item:not(.popup-item){background-image:linear-gradient(to right,hsl(from var(--nxc-brand) h s l/.1),transparent);border-left:var(--border-width) solid var(--nxc-brand)}a.active-item.popup-item{background:var(--nxc-dark3-offset, var(--nxc-dark3));z-index:2}a.popup-item:hover:not(.active-item):after{--corner-start-x: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-width))) * 100% );--corner-start-y: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-height))) * 100% );content:\"\";position:absolute;inset:0;background:var(--nxc-dark6-offset, var(--nxc-dark6));clip-path:polygon(var(--corner-start-x) 100%,100% 100%,100% var(--corner-start-y))}a:hover:not(.active-item){background:var(--nxc-dark3-offset, var(--nxc-dark3))}a .icon{height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNavMenuSubMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-nav-menu-submenu', imports: [CommonModule, NxIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    class=\"popup-item\"\n    [class.active-item]=\"active()\"\n    [title]=\"item().name\"\n>\n    <nx-icon\n        class=\"icon\"\n        [icon]=\"item().icon\"\n        [preserveInline]=\"true\"\n    ></nx-icon>\n</a>\n", styles: [":host{--base-menu-width: 72px;--border-width: 2px;--menu-item-width: 68;--menu-item-height: 56;--menu-item-corner-size: 16}:host::ng-deep path{fill:var(--nxc-light10-offset, var(--nxc-light10))}:host::ng-deep a:hover:not(.active-item) path{fill:var(--nxc-light4-offset, var(--nxc-light4))}:host::ng-deep a.active-item:not(.popup-item) path{fill:var(--nxc-brand)}a{width:calc(var(--menu-item-width) * 1px);height:calc(var(--menu-item-height) * 1px);position:relative;display:flex;justify-content:center;align-items:center;padding-right:1px;border-left:var(--border-width) solid transparent}a.active-item:not(.popup-item){background-image:linear-gradient(to right,hsl(from var(--nxc-brand) h s l/.1),transparent);border-left:var(--border-width) solid var(--nxc-brand)}a.active-item.popup-item{background:var(--nxc-dark3-offset, var(--nxc-dark3));z-index:2}a.popup-item:hover:not(.active-item):after{--corner-start-x: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-width))) * 100% );--corner-start-y: calc( calc(1 - calc(var(--menu-item-corner-size) / var(--menu-item-height))) * 100% );content:\"\";position:absolute;inset:0;background:var(--nxc-dark6-offset, var(--nxc-dark6));clip-path:polygon(var(--corner-start-x) 100%,100% 100%,100% var(--corner-start-y))}a:hover:not(.active-item){background:var(--nxc-dark3-offset, var(--nxc-dark3))}a .icon{height:24px}\n"] }]
        }] });

class NxMenuComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.homeButton = {
            id: 'home',
            name: 'Home',
            icon: NxIconEnum.ARROW_BACK,
            link: '/home',
        };
        this.activeMatchOptions = {
            matrixParams: 'ignored',
            queryParams: 'ignored',
            paths: 'subset',
            fragment: 'ignored',
        };
        this.eleRef = inject(ElementRef);
        this.router = inject(Router);
        this.accountInfo = input();
        this.showHomeButton = input(false);
        this.dynamicMenu = input([]);
        this.fixedMenu = input([]);
        this.activeNode = model();
        this.activeUrl = toSignal(this.router.events.pipe(filter$1(event => event instanceof NavigationEnd), map$1(event => event.url)), { initialValue: this.router.url, rejectErrors: true });
        this.activeL2 = computed(() => {
            // Used to trigger the computed when the route changes;
            this.activeUrl();
            const dynamicMenu = this.dynamicMenu();
            const fixedMenu = this.fixedMenu();
            const activeNode = this.activeNode();
            if (activeNode) {
                return activeNode;
            }
            for (const menuItem of dynamicMenu) {
                if ('link' in menuItem &&
                    this.router.isActive(menuItem.link, this.activeMatchOptions)) {
                    return menuItem;
                }
            }
            for (const menuItem of fixedMenu) {
                if ('link' in menuItem &&
                    this.router.isActive(menuItem.link, this.activeMatchOptions)) {
                    return menuItem;
                }
            }
            return undefined;
        });
        this.activeL2HasSubMenu = computed(() => {
            const activeL2 = this.activeL2();
            return activeL2 && 'subMenu' in activeL2;
        });
    }
    closeMenuOnClientAway(element) {
        if (element?.target && !this.eleRef.nativeElement.contains(element.target)) {
            this.activeNode.set(undefined);
        }
    }
    castMenuItemLink(item) {
        return item;
    }
    castMenuItemSubMenu(item) {
        return item;
    }
    itemHasLink(item) {
        return 'link' in item;
    }
    togglePopupMenu(ref) {
        const activeNote = this.activeNode();
        if (activeNote === ref) {
            ref = undefined;
        }
        this.activeNode.set(ref);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxMenuComponent, isStandalone: true, selector: "nx-menu", inputs: { accountInfo: { classPropertyName: "accountInfo", publicName: "accountInfo", isSignal: true, isRequired: false, transformFunction: null }, showHomeButton: { classPropertyName: "showHomeButton", publicName: "showHomeButton", isSignal: true, isRequired: false, transformFunction: null }, dynamicMenu: { classPropertyName: "dynamicMenu", publicName: "dynamicMenu", isSignal: true, isRequired: false, transformFunction: null }, fixedMenu: { classPropertyName: "fixedMenu", publicName: "fixedMenu", isSignal: true, isRequired: false, transformFunction: null }, activeNode: { classPropertyName: "activeNode", publicName: "activeNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeNode: "activeNodeChange" }, host: { listeners: { "document:click": "closeMenuOnClientAway($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"l1-menu\">\n    <div>\n        <nx-account-info\n            [accountInfo]=\"accountInfo()\"\n            (click)=\"togglePopupMenu()\"\n            [routerLink]=\"accountInfo() ? '/account' : '/authorize'\"\n            [active]=\"\n                !activeL2() && activeUrl().includes(accountInfo() ? '/account' : '/authorize')\n            \"\n        />\n        <div class=\"dynamic-menu\">\n            @if (showHomeButton()) {\n                <nx-nav-menu-link\n                    class=\"home-btn\"\n                    [item]=\"homeButton\"\n                ></nx-nav-menu-link>\n            }\n            @for (item of dynamicMenu(); track item.name) {\n                @if (itemHasLink(item)) {\n                    <nx-nav-menu-link\n                        [item]=\"castMenuItemLink(item)\"\n                        [active]=\"activeL2() === item\"\n                        (click)=\"togglePopupMenu()\"\n                    />\n                } @else {\n                    <nx-nav-menu-submenu\n                        [item]=\"castMenuItemSubMenu(item)\"\n                        [active]=\"activeL2() === item\"\n                        (click)=\"togglePopupMenu(item)\"\n                    />\n                }\n            }\n        </div>\n    </div>\n    <div class=\"fixed-menu\">\n        @for (item of fixedMenu(); track item.name) {\n            @if (itemHasLink(item)) {\n                <nx-nav-menu-link\n                    [item]=\"castMenuItemLink(item)\"\n                    [active]=\"activeL2() === item\"\n                    (click)=\"togglePopupMenu()\"\n                />\n            } @else {\n                <nx-nav-menu-submenu\n                    [item]=\"castMenuItemSubMenu(item)\"\n                    [active]=\"activeL2() === item\"\n                    (click)=\"togglePopupMenu(item)\"\n                />\n            }\n        }\n    </div>\n</div>\n@if (activeL2HasSubMenu()) {\n    <div class=\"backdrop\"></div>\n    <div class=\"l2-panel\">\n        <ng-content></ng-content>\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}[disabled]{color:var(--font-color-disabled)}h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}a:visited{color:var(--font-color-regular)}.text-color-medium{color:var(--font-color-medium)}.text-color-regular{color:var(--font-color-regular)}.text-color-light{color:var(--font-color-light)}.text-color-disabled{color:var(--font-color-disabled)}.text-color-error{color:var(--font-color-error)}.text-color-brand{color:var(--font-color-brand)}.text-size-12px{font-size:12px;font-size:.75rem}.text-size-13px{font-size:13px;font-size:.8125rem}.text-size-14px{font-size:14px;font-size:.875rem}.text-size-16px{font-size:16px;font-size:1rem}.text-size-18px{font-size:18px;font-size:1.125rem}.text-size-20px{font-size:20px;font-size:1.25rem}.text-size-24px{font-size:24px;font-size:1.5rem}.text-size-32px{font-size:32px;font-size:2rem}.text-size-56px{font-size:56px;font-size:3.5rem}.text-family-base{font-size:base}.text-family-regular{font-size:regular}.text-family-medium{font-size:medium}.text-family-light{font-size:light}.text-family-bold{font-size:bold}:host{--base-menu-width: 72px;display:flex;flex-direction:row;width:var(--base-menu-width);position:relative}.l1-menu{display:flex;flex-direction:column;justify-content:space-between;background:var(--nxc-dark2-offset, var(--nxc-dark2));width:72px;height:100dvh;box-sizing:border-box;border-right:1px solid var(--nxc-dark5-offset, var(--nxc-dark5))}.avatar{height:80px}.fixed-menu:not(:empty){border-top:1px solid var(--nxc-dark5-offset, var(--nxc-dark5));padding-bottom:24px}.l2-panel{position:absolute;left:var(--base-menu-width);z-index:1;display:flex;justify-content:center;height:100dvh;width:336px;background:var(--nxc-dark3-offset, var(--nxc-dark3))}:host ::ng-deep .home-btn>a{background:var(--nxc-dark3-offset, var(--nxc-dark3));border:1px solid var(--nxc-dark5-offset, var(--nxc-dark5));border-left:1px solid transparent;border-right:1px solid transparent}:host ::ng-deep .home-btn>a:hover path{fill:var(--nxc-light10-offset, var(--nxc-light10))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NxAccountInfoComponent, selector: "nx-account-info", inputs: ["accountInfo", "active"] }, { kind: "component", type: NxNavMenuLinkComponent, selector: "nx-nav-menu-link", inputs: ["active", "item"] }, { kind: "component", type: NxNavMenuSubMenuComponent, selector: "nx-nav-menu-submenu", inputs: ["active", "item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-menu', imports: [
                        CommonModule,
                        RouterModule,
                        NxAccountInfoComponent,
                        NxNavMenuLinkComponent,
                        NxNavMenuSubMenuComponent,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"l1-menu\">\n    <div>\n        <nx-account-info\n            [accountInfo]=\"accountInfo()\"\n            (click)=\"togglePopupMenu()\"\n            [routerLink]=\"accountInfo() ? '/account' : '/authorize'\"\n            [active]=\"\n                !activeL2() && activeUrl().includes(accountInfo() ? '/account' : '/authorize')\n            \"\n        />\n        <div class=\"dynamic-menu\">\n            @if (showHomeButton()) {\n                <nx-nav-menu-link\n                    class=\"home-btn\"\n                    [item]=\"homeButton\"\n                ></nx-nav-menu-link>\n            }\n            @for (item of dynamicMenu(); track item.name) {\n                @if (itemHasLink(item)) {\n                    <nx-nav-menu-link\n                        [item]=\"castMenuItemLink(item)\"\n                        [active]=\"activeL2() === item\"\n                        (click)=\"togglePopupMenu()\"\n                    />\n                } @else {\n                    <nx-nav-menu-submenu\n                        [item]=\"castMenuItemSubMenu(item)\"\n                        [active]=\"activeL2() === item\"\n                        (click)=\"togglePopupMenu(item)\"\n                    />\n                }\n            }\n        </div>\n    </div>\n    <div class=\"fixed-menu\">\n        @for (item of fixedMenu(); track item.name) {\n            @if (itemHasLink(item)) {\n                <nx-nav-menu-link\n                    [item]=\"castMenuItemLink(item)\"\n                    [active]=\"activeL2() === item\"\n                    (click)=\"togglePopupMenu()\"\n                />\n            } @else {\n                <nx-nav-menu-submenu\n                    [item]=\"castMenuItemSubMenu(item)\"\n                    [active]=\"activeL2() === item\"\n                    (click)=\"togglePopupMenu(item)\"\n                />\n            }\n        }\n    </div>\n</div>\n@if (activeL2HasSubMenu()) {\n    <div class=\"backdrop\"></div>\n    <div class=\"l2-panel\">\n        <ng-content></ng-content>\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}[disabled]{color:var(--font-color-disabled)}h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}a:visited{color:var(--font-color-regular)}.text-color-medium{color:var(--font-color-medium)}.text-color-regular{color:var(--font-color-regular)}.text-color-light{color:var(--font-color-light)}.text-color-disabled{color:var(--font-color-disabled)}.text-color-error{color:var(--font-color-error)}.text-color-brand{color:var(--font-color-brand)}.text-size-12px{font-size:12px;font-size:.75rem}.text-size-13px{font-size:13px;font-size:.8125rem}.text-size-14px{font-size:14px;font-size:.875rem}.text-size-16px{font-size:16px;font-size:1rem}.text-size-18px{font-size:18px;font-size:1.125rem}.text-size-20px{font-size:20px;font-size:1.25rem}.text-size-24px{font-size:24px;font-size:1.5rem}.text-size-32px{font-size:32px;font-size:2rem}.text-size-56px{font-size:56px;font-size:3.5rem}.text-family-base{font-size:base}.text-family-regular{font-size:regular}.text-family-medium{font-size:medium}.text-family-light{font-size:light}.text-family-bold{font-size:bold}:host{--base-menu-width: 72px;display:flex;flex-direction:row;width:var(--base-menu-width);position:relative}.l1-menu{display:flex;flex-direction:column;justify-content:space-between;background:var(--nxc-dark2-offset, var(--nxc-dark2));width:72px;height:100dvh;box-sizing:border-box;border-right:1px solid var(--nxc-dark5-offset, var(--nxc-dark5))}.avatar{height:80px}.fixed-menu:not(:empty){border-top:1px solid var(--nxc-dark5-offset, var(--nxc-dark5));padding-bottom:24px}.l2-panel{position:absolute;left:var(--base-menu-width);z-index:1;display:flex;justify-content:center;height:100dvh;width:336px;background:var(--nxc-dark3-offset, var(--nxc-dark3))}:host ::ng-deep .home-btn>a{background:var(--nxc-dark3-offset, var(--nxc-dark3));border:1px solid var(--nxc-dark5-offset, var(--nxc-dark5));border-left:1px solid transparent;border-right:1px solid transparent}:host ::ng-deep .home-btn>a:hover path{fill:var(--nxc-light10-offset, var(--nxc-light10))}\n"] }]
        }], propDecorators: { closeMenuOnClientAway: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

/**
 * Structural directive to project content into the secondary menu.
 *
 * collapsible is true by default, meaning that the secondary menu will be collapsible.
 *
 * Example without condition:
 *
 * ```html
 * <component-or-element *nxMenuProjection></component-or-element>
 * ```
 *
 * Example with condition:
 *
 * ```html
 * <component-or-element *nxMenuProjection="isProjected"></component-or-element>
 * ```
 *
 * Example with collapsible condition:
 *
 * ```html
 * <component-or-element *nxMenuProjection="isProjected; collapsible: isCollapsible"></component-or-element>
 * ```
 */
class NxMenuProjectionDirective {
    constructor() {
        this.templateRef = inject(TemplateRef);
        this.viewContainer = inject(ViewContainerRef);
        this.nxMenuProjection = input(true, { transform: booleanAttribute });
        this.nxMenuProjectionRightPanel = input(false);
        this.nxMenuProjectionCollapsible = input(true);
        this.nxMenuProjectionResizable = input(true);
        this.nxMenuProjectionAutoNavigateSecondaryOnMobile = input(true);
        this.updateProjection = effect(onCleanup => {
            const condition = this.nxMenuProjection();
            const collapsible = this.nxMenuProjectionCollapsible();
            const nxMenuProjectionRightPanel = this.nxMenuProjectionRightPanel();
            const resizable = this.nxMenuProjectionResizable();
            const autoNavigateSecondaryOnMobile = this.nxMenuProjectionAutoNavigateSecondaryOnMobile();
            if (NxLayoutComponent.rootLayout && condition) {
                this.viewContainer.clear();
                const cleanup = NxLayoutComponent.rootLayout.useSecondaryMenu(this.templateRef, collapsible, nxMenuProjectionRightPanel, resizable);
                const autoNavigateSubscription = (autoNavigateSecondaryOnMobile
                    ? NxLayoutComponent.rootLayout.navigateNotifier$
                    : NEVER).subscribe();
                return onCleanup(() => {
                    autoNavigateSubscription.unsubscribe();
                    cleanup();
                });
            }
            else {
                this.viewContainer.createEmbeddedView(this.templateRef);
            }
            return () => { };
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxMenuProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxMenuProjectionDirective, isStandalone: true, selector: "[nxMenuProjection]", inputs: { nxMenuProjection: { classPropertyName: "nxMenuProjection", publicName: "nxMenuProjection", isSignal: true, isRequired: false, transformFunction: null }, nxMenuProjectionRightPanel: { classPropertyName: "nxMenuProjectionRightPanel", publicName: "nxMenuProjectionRightPanel", isSignal: true, isRequired: false, transformFunction: null }, nxMenuProjectionCollapsible: { classPropertyName: "nxMenuProjectionCollapsible", publicName: "nxMenuProjectionCollapsible", isSignal: true, isRequired: false, transformFunction: null }, nxMenuProjectionResizable: { classPropertyName: "nxMenuProjectionResizable", publicName: "nxMenuProjectionResizable", isSignal: true, isRequired: false, transformFunction: null }, nxMenuProjectionAutoNavigateSecondaryOnMobile: { classPropertyName: "nxMenuProjectionAutoNavigateSecondaryOnMobile", publicName: "nxMenuProjectionAutoNavigateSecondaryOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxMenuProjectionDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[nxMenuProjection]',
                }]
        }] });

const isNode = (node) => node instanceof Node;
const isTextNode = (node) => isNode(node) && node.nodeType === Node.TEXT_NODE;
const isCommentNode = (node) => isNode(node) && node.nodeType === Node.COMMENT_NODE;
/**
 * Abstract structural directive to replace content with loading indicator.
 *
 * Concrete classes must implement the abstract properties `isSwapped` and `swappedStateComponent`.
 *
 * The isSwapped property must be a signal that emits a boolean value. Most commonly this will be the
 * input mapped to the selector for the directive.
 *
 * The swappedStateComponent property must be a reference to the component class that should be rendered
 * when isSwapped is true.
 *
 * The componentInputs property must be a signal that emits an object with the inputs that should be passed
 * to the swappedStateComponent when it is rendered. Implementation is optional within concrete classes and
 * would normally be a computed signal that maps the directive's inputs to the component's inputs.
 *
 * Example concrete class:
 *
 * ```typescript
 *     @Directive({
 *         selector: '[nxLoadingSpinner]',
 *         standalone: true,
 *     })
 *     export class NxLoadingSpinnerDirective extends NxLoadingDirective {
 *         isSwapped = input(false, { transform: booleanAttribute, alias: 'nxLoadingSpinner });
 *         swappedStateComponent = signal(NxSpinnerComponent);
 *     }
 * ```
 *
 * Example usage (note that the directive is used as a structural directive):
 *
 * ```html
 * <component-or-element *nxLoadingSpinner="isLoading"></component-or-element>
 * ```
 */
class NxSwappedAbstractBaseDirective {
    constructor() {
        /**
         * Signal that emits an object with the inputs that should be passed to the swappedStateComponent
         */
        this.componentInputs = signal({});
        /**
         * Handles the rendering of the view based on the isSwapped signal.
         *
         * When the isSwapped signal emits true the children of the current element are hidden and the
         * loader is rendered. This prevents any layout shifts that would occur if the loader was rendered.
         *
         * When the isSwapped signal emits false the loader is removed and the children are shown again.
         *
         * The view is re-rendered whenever the isSwapped signal emits a new value so applied styles used
         * by the directive are not persisted on the host element.
         */
        this.renderView = effect(onCleanup => {
            const viewRef = this._viewContainer.createEmbeddedView(this._templateRef);
            const componentRef = (() => {
                const isSwapped = this.isSwapped();
                const componentInputs = this.componentInputs();
                if (isSwapped) {
                    const rootNode = viewRef.rootNodes[0];
                    if (getComputedStyle(rootNode).position === 'static') {
                        this._renderer.setStyle(rootNode, 'position', 'relative');
                    }
                    for (const child of rootNode.childNodes) {
                        if (isTextNode(child)) {
                            child.textContent = '';
                        }
                        else if (isCommentNode(child)) {
                            continue;
                        }
                        else if (isNode(child)) {
                            this._renderer.setStyle(child, 'visibility', 'hidden');
                        }
                    }
                    const componentRef = createComponent(this.swappedStateComponent(), {
                        environmentInjector: this._environmentInjector,
                        elementInjector: this._injector,
                        hostElement: rootNode,
                    });
                    console.info('componentInputs:', componentInputs);
                    Object.entries(componentInputs).forEach(args => componentRef.setInput(...args));
                    // Need to figure out how to insert within rootNOde
                    this._viewContainer.insert(componentRef.hostView);
                    return componentRef;
                }
                return null;
            })();
            return onCleanup(() => {
                viewRef.destroy();
                componentRef?.destroy();
            });
        });
        this._templateRef = inject(TemplateRef);
        this._viewContainer = inject(ViewContainerRef);
        this._renderer = inject(Renderer2);
        this._environmentInjector = inject(EnvironmentInjector);
        this._injector = inject(Injector);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSwappedAbstractBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: NxSwappedAbstractBaseDirective, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSwappedAbstractBaseDirective, decorators: [{
            type: Directive
        }] });

/**
 * Internal component to be used by the `*nxTemplatePlaceholder` directive to render a template
 * as a placeholder.
 */
class NxTemplateWrapperComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.templateRef = input();
        this.context = input();
        this.logEffect = effect(() => {
            const context = this.context();
            console.info('nxTemplatePlaceholderContext:', context);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxTemplateWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxTemplateWrapperComponent, isStandalone: true, selector: "nx-template-wrapper", inputs: { templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `@if (templateRef(); as templateRef) {
        <ng-container *ngTemplateOutlet="templateRef; context: context()"></ng-container>
    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxTemplateWrapperComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nx-template-wrapper',
                    imports: [CommonModule],
                    template: `@if (templateRef(); as templateRef) {
        <ng-container *ngTemplateOutlet="templateRef; context: context()"></ng-container>
    }`,
                }]
        }] });

/**
 * A structural directive that replaces the content with a placeholder from template.
 *
 * Example:
 *
 * ```html
 * <ng-template #thePlaceholder> ... </ng-template>
 * <div *nxTemplatePlaceholder="showPlaceholder; templateRef: thePlaceholder">...</div>
 * ```
 */
class NxTemplatePlaceholderDirective extends NxSwappedAbstractBaseDirective {
    constructor() {
        super(...arguments);
        /**
         * A structural directive that replaces the content with a placeholder from template.
         *
         * A template reference must be provided to the directive.
         *
         * Example:
         *
         * ```html
         * <ng-template #thePlaceholder> ... </ng-template>
         * <div *nxTemplatePlaceholder="showPlaceholder; templateRef: thePlaceholder">...</div>
         */
        this.isSwapped = input(false, {
            transform: booleanAttribute,
            alias: 'nxTemplatePlaceholder',
        });
        /**
         * The template reference to be used as a placeholder.
         *
         * This is the template that will be rendered when the `isLoading` input is `true`.
         *
         * Context can additionally be provided to the template via context input.
         *
         * Example with context:
         *
         * ```html
         * <ng-template #thePlaceholder let-data="data"> ... </ng-template>
         * <div *nxTemplatePlaceholder="showPlaceholder; templateRef: thePlaceholder; context: { data: someData }">...</div>
         * ```
         */
        this.nxTemplatePlaceholderTemplateRef = input.required();
        /**
         * The context to be for the template passed as the templateRef.
         */
        this.nxTemplatePlaceholderContext = input({});
        this.swappedStateComponent = signal(NxTemplateWrapperComponent);
        this.componentInputs = computed(() => ({
            context: this.nxTemplatePlaceholderContext(),
            templateRef: this.nxTemplatePlaceholderTemplateRef(),
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxTemplatePlaceholderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxTemplatePlaceholderDirective, isStandalone: true, selector: "[nxTemplatePlaceholder]", inputs: { isSwapped: { classPropertyName: "isSwapped", publicName: "nxTemplatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, nxTemplatePlaceholderTemplateRef: { classPropertyName: "nxTemplatePlaceholderTemplateRef", publicName: "nxTemplatePlaceholderTemplateRef", isSignal: true, isRequired: true, transformFunction: null }, nxTemplatePlaceholderContext: { classPropertyName: "nxTemplatePlaceholderContext", publicName: "nxTemplatePlaceholderContext", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxTemplatePlaceholderDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxTemplatePlaceholder]',
                    standalone: true,
                }]
        }] });

/**
 * Internal component to be used by the `*nxLoadingSkeleton` directive to render a loading skeleton.
 *
 * The animation duration and delay are set to 2s and 500ms respectively but can be overridden by
 * updating the static properties `syncAnimationDuration` and `syncAnimationDelay`.
 *
 * The animations are synchronized across all instances of this component using the `sync$` observable
 * observable which handles animation start and end based on the `syncAnimationDuration` and
 * `syncAnimationDelay` configuration.
 */
class LoadingSkeletonComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * Used to bind the sync-animation class to the host element.
         */
        this.syncAnimation = toSignal(LoadingSkeletonComponent.sync$);
    }
    /**
     * The configurable duration of the sync animation in milliseconds.
     */
    static { this.syncAnimationDuration = 1_500; }
    /**
     * The configurable delay between sync animations in milliseconds.
     */
    static { this.syncAnimationDelay = 250; }
    /**
     * An observable used to add and remove the sync-animation class to keep synced.
     *
     * This is used to ensure that classes are added and removed at the correct time.
     */
    static { this.sync$ = defer(() => timer(LoadingSkeletonComponent.syncAnimationDuration).pipe(map(() => false), startWith(true))).pipe(repeat({ delay: LoadingSkeletonComponent.syncAnimationDelay }), shareReplay({ bufferSize: 1, refCount: true })); }
    /**
     * Used to bind the sync-animation-duration CSS variable to the host element.
     */
    get syncAnimationDuration() {
        return `${LoadingSkeletonComponent.syncAnimationDuration}ms`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: LoadingSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: LoadingSkeletonComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class.sync-animation": "syncAnimation()", "style.--sync-animation-duration": "syncAnimationDuration" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n", "@property --position{syntax: \"<length-percentage>\"; initial-value: calc(0% - 60px) ; inherits: false;}@keyframes positionUpdate{0%{--position: calc(0% - 60px) }to{--position: calc(100% + 144px) }}:host:after{content:\"\";display:block;position:absolute;inset:0;background:var(--nxc-dark2) linear-gradient(to right,var(--nxc-dark2) calc(var(--position) - 144px),var(--nxc-dark3) calc(var(--position) - 48px),var(--nxc-dark6) calc(var(--position) + 48px),var(--nxc-dark2) calc(var(--position) + 60px));background-attachment:fixed}:host.sync-animation:after{animation:var(--sync-animation-duration, 2s) ease-in positionUpdate}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: LoadingSkeletonComponent, decorators: [{
            type: Component,
            args: [{ template: ``, standalone: true, host: {
                        '[class.sync-animation]': 'syncAnimation()',
                        '[style.--sync-animation-duration]': 'syncAnimationDuration',
                    }, styles: [":host{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n", "@property --position{syntax: \"<length-percentage>\"; initial-value: calc(0% - 60px) ; inherits: false;}@keyframes positionUpdate{0%{--position: calc(0% - 60px) }to{--position: calc(100% + 144px) }}:host:after{content:\"\";display:block;position:absolute;inset:0;background:var(--nxc-dark2) linear-gradient(to right,var(--nxc-dark2) calc(var(--position) - 144px),var(--nxc-dark3) calc(var(--position) - 48px),var(--nxc-dark6) calc(var(--position) + 48px),var(--nxc-dark2) calc(var(--position) + 60px));background-attachment:fixed}:host.sync-animation:after{animation:var(--sync-animation-duration, 2s) ease-in positionUpdate}\n"] }]
        }] });

/**
 * A structural directive that shows a replaces the content with a loading skeleton when the passed
 * value is true.
 *
 * Example:
 *
 * ```html
 * <div *nxLoadingSkeleton="isLoading">...</div>
 * ```
 */
class NxLoadingSkeletonDirective extends NxSwappedAbstractBaseDirective {
    constructor() {
        super(...arguments);
        /**
         * Shows loading skeleton when true.
         */
        this.isSwapped = input(false, { alias: 'nxLoadingSkeleton' });
        this.swappedStateComponent = signal(LoadingSkeletonComponent);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLoadingSkeletonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxLoadingSkeletonDirective, isStandalone: true, selector: "[nxLoadingSkeleton]", inputs: { isSwapped: { classPropertyName: "isSwapped", publicName: "nxLoadingSkeleton", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLoadingSkeletonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxLoadingSkeleton]',
                    standalone: true,
                }]
        }] });

/**
 * Internal component to be used by the `*nxLoadingSpinner` directive to render a loading spinner.
 *
 * The static syncAnimationDuration property is configurable to sync the rotation time of the spinners.
 *
 * The icon size is set to 64px by default but can be overridden by updating the iconSize property.
 */
class LoadingSpinnerComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * Loading icon size in pixels.
         */
        this.iconSize = input(`64px`, { transform: (val) => `${val}px` });
        /**
         * The outlineRatio for the the spinner icon border thickness.
         *
         * This is the used to get a fraction of the icon size to create the border.
         *
         * Example if the icon size is 60px and the outline ratio is 6, the border size will be 10px.
         */
        this.outlineRatio = input(LoadingSpinnerComponent.outlineRatioDefault);
        /**
         * The border size of the spinner icon.
         *
         * This is calculated based on the icon size and the outline ratio.
         */
        this.borderSize = computed(() => {
            const min = 2;
            const iconSize = parseInt(this.iconSize());
            const clampedRatio = Math.min(Math.max(this.outlineRatio() || LoadingSpinnerComponent.outlineRatioDefault, min), iconSize);
            return `${iconSize / clampedRatio}px`;
        });
        /**
         * Used to bind the sync-animation class to the host element.
         */
        this.syncAnimation = toSignal(LoadingSpinnerComponent.sync$);
    }
    static { this.outlineRatioDefault = 6; }
    /**
     * The configurable duration of the sync animation in milliseconds.
     */
    static { this.syncAnimationDuration = 4_000; }
    /**
     * Used to bind the sync-animation-duration CSS variable to the host element.
     */
    get syncAnimationDuration() {
        return `${LoadingSpinnerComponent.syncAnimationDuration}ms`;
    }
    /**
     * An observable used to add and remove the sync-animation class to keep synced.
     *
     * This is used to ensure that classes are added and removed at the correct time.
     */
    static { this.sync$ = defer(() => timer(LoadingSpinnerComponent.syncAnimationDuration).pipe(map(() => false), startWith(true))).pipe(repeat({ delay: 0 }), shareReplay({ bufferSize: 1, refCount: true })); }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: LoadingSpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: LoadingSpinnerComponent, isStandalone: true, selector: "ng-component", inputs: { iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, outlineRatio: { classPropertyName: "outlineRatio", publicName: "outlineRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--sync-animation-duration": "syncAnimationDuration", "style.--icon-size": "iconSize()", "style.--border-size": "borderSize()", "class.sync-animation": "syncAnimation()" } }, usesInheritance: true, ngImport: i0, template: `<span class="loading-spinner">Loading...</span>`, isInline: true, styles: [":host{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n", "@keyframes nx-spin{0%{transform:rotate(0);opacity:1}50%{opacity:.9}to{transform:rotate(360deg);opacity:1}}@property --sync-animation-duration{syntax: \"<time>\"; initial-value: 2s; inherits: true;}@property --icon-size{syntax: \"<length>\"; initial-value: 64px; inherits: true;}@property --border-size{syntax: \"<length>\"; initial-value: 16px; inherits: true;}@property --spinner-color{syntax: \"<color>\"; initial-value: var(--nxc-dark16); inherits: true;}:host.sync-animation>.loading-spinner{animation:nx-spin var(--sync-animation-duration) linear infinite}:host>.loading-spinner{--spinner-color: var(--nxc-dark16);display:block;width:var(--icon-size);height:var(--icon-size);aspect-ratio:1/1;color:transparent;cursor:wait}:host>.loading-spinner:before{content:\"\";position:absolute;inset:0;border-radius:100%;padding:var(--border-size);background:conic-gradient(from 0deg at 50% var(--border-size),transparent 45deg,var(--spinner-color) 270deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;transition:opacity .25s ease-out;opacity:1}@starting-style{:host>.loading-spinner:before{opacity:0}}:host>.loading-spinner:after{transition:opacity 1s ease-out;content:\"\";background:var(--spinner-color);position:absolute;top:0;left:calc(50% - var(--border-size) / 2);width:var(--border-size);height:var(--border-size);border-radius:100%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
            type: Component,
            args: [{ template: `<span class="loading-spinner">Loading...</span>`, standalone: true, host: {
                        '[style.--sync-animation-duration]': 'syncAnimationDuration',
                        '[style.--icon-size]': 'iconSize()',
                        '[style.--border-size]': 'borderSize()',
                        '[class.sync-animation]': 'syncAnimation()',
                    }, styles: [":host{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n", "@keyframes nx-spin{0%{transform:rotate(0);opacity:1}50%{opacity:.9}to{transform:rotate(360deg);opacity:1}}@property --sync-animation-duration{syntax: \"<time>\"; initial-value: 2s; inherits: true;}@property --icon-size{syntax: \"<length>\"; initial-value: 64px; inherits: true;}@property --border-size{syntax: \"<length>\"; initial-value: 16px; inherits: true;}@property --spinner-color{syntax: \"<color>\"; initial-value: var(--nxc-dark16); inherits: true;}:host.sync-animation>.loading-spinner{animation:nx-spin var(--sync-animation-duration) linear infinite}:host>.loading-spinner{--spinner-color: var(--nxc-dark16);display:block;width:var(--icon-size);height:var(--icon-size);aspect-ratio:1/1;color:transparent;cursor:wait}:host>.loading-spinner:before{content:\"\";position:absolute;inset:0;border-radius:100%;padding:var(--border-size);background:conic-gradient(from 0deg at 50% var(--border-size),transparent 45deg,var(--spinner-color) 270deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;transition:opacity .25s ease-out;opacity:1}@starting-style{:host>.loading-spinner:before{opacity:0}}:host>.loading-spinner:after{transition:opacity 1s ease-out;content:\"\";background:var(--spinner-color);position:absolute;top:0;left:calc(50% - var(--border-size) / 2);width:var(--border-size);height:var(--border-size);border-radius:100%}\n"] }]
        }] });

/**
 * A structural directive that shows a replaces the content with a loading spinner when the passed
 * value is true.
 *
 * The default icon size is 64px but can be overridden by providing `iconSize` to the context.
 *
 * Example (Basic):
 *
 * ```html
 * <div *nxLoadingSpinner="isLoading">...</div>
 * ```
 *
 * Example (With custom icon size):
 *
 * ```html
 * <div *nxLoadingSpinner="isLoading; iconSize: 32">...</div>
 * ```
 */
class NxLoadingSpinnerDirective extends NxSwappedAbstractBaseDirective {
    constructor() {
        super(...arguments);
        /**
         * Shows loading spinner when true.
         */
        this.isSwapped = input(false, {
            transform: booleanAttribute,
            alias: 'nxLoadingSpinner',
        });
        /**
         * Size of the loading spinner in pixels.
         */
        this.nxLoadingSpinnerIconSize = input(64);
        /**
         * The outlineRatio for the the spinner icon border thickness.
         *
         * This is the used to get a fraction of the icon size to create the border.
         *
         * Example if the icon size is 60px and the outline ratio is 6, the border size will be 10px.
         */
        this.nxLoadingSpinnerOutlineRatio = input(6);
        this.swappedStateComponent = signal(LoadingSpinnerComponent);
        this.componentInputs = computed(() => {
            const iconSize = this.nxLoadingSpinnerIconSize();
            const outlineRatio = this.nxLoadingSpinnerOutlineRatio();
            return { iconSize, outlineRatio };
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLoadingSpinnerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxLoadingSpinnerDirective, isStandalone: true, selector: "[nxLoadingSpinner]", inputs: { isSwapped: { classPropertyName: "isSwapped", publicName: "nxLoadingSpinner", isSignal: true, isRequired: false, transformFunction: null }, nxLoadingSpinnerIconSize: { classPropertyName: "nxLoadingSpinnerIconSize", publicName: "nxLoadingSpinnerIconSize", isSignal: true, isRequired: false, transformFunction: null }, nxLoadingSpinnerOutlineRatio: { classPropertyName: "nxLoadingSpinnerOutlineRatio", publicName: "nxLoadingSpinnerOutlineRatio", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLoadingSpinnerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxLoadingSpinner]',
                    standalone: true,
                }]
        }] });

class NxApplyActionParentDirective {
    constructor() {
        // Bind Hover
        this.hover = signal(false);
        this.nxActionClassesParent = input(false, { transform: booleanAttribute });
        this.nxActionClassesParentInherit = input(false, { transform: booleanAttribute });
        // Bind Focus
        this.focus = signal(false);
        // Bind Active
        this.active = signal(false);
        // Current classes
        this.classes = computed(() => ({
            nxHovered: this.hover(),
            nxFocused: this.focus(),
            nxActive: this.active(),
        }));
        // Propagate classes to children
        this.actionClassTargets = signal([]);
        this.bindToChildren = effect(cleanup => {
            const children = this.actionClassTargets();
            const cleanupFunctions = children.map(child => {
                const previousParent = child.parent;
                child.parent = this;
                return () => {
                    child.parent = previousParent;
                };
            });
            return cleanup(() => cleanupFunctions.forEach(fn => fn()));
        });
        this.propagateClasses = effect(cleanup => {
            const classes = this.classes();
            // const nxActionClassesParentInherit = this.nxActionClassesParentInherit();
            const elements = this.actionClassTargets().map(target => target.elRef.nativeElement);
            elements.forEach(element => {
                Object.entries(classes).forEach(([className, value]) => {
                    console.info({ className, value, element });
                    if (value) {
                        element.classList.add(className);
                    }
                    else {
                        element.classList.remove(className);
                    }
                });
            });
            return cleanup(() => {
                elements.forEach(el => {
                    Object.keys(classes).forEach(className => el.classList.remove(className));
                });
            });
        });
    }
    onMouseEnter() {
        this.hover.set(true);
    }
    onMouseLeave() {
        this.hover.set(false);
        this.active.set(false);
    }
    onFocus() {
        this.focus.set(true);
    }
    onBlur() {
        this.focus.set(false);
    }
    onMouseDown() {
        this.active.set(true);
    }
    onMouseUp() {
        this.active.set(false);
    }
    set actionClassTargetsQuerySetter(query) {
        this.actionClassTargets.set(query.toArray());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxApplyActionParentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxApplyActionParentDirective, isStandalone: true, selector: "[nxActionClassesParent], [nxActionClassesParentInherit], nx-action-classes-parent", inputs: { nxActionClassesParent: { classPropertyName: "nxActionClassesParent", publicName: "nxActionClassesParent", isSignal: true, isRequired: false, transformFunction: null }, nxActionClassesParentInherit: { classPropertyName: "nxActionClassesParentInherit", publicName: "nxActionClassesParentInherit", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, queries: [{ propertyName: "actionClassTargetsQuerySetter", predicate: NxApplyActionTargetDirective, descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxApplyActionParentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxActionClassesParent], [nxActionClassesParentInherit], nx-action-classes-parent',
                    standalone: true,
                }]
        }], propDecorators: { onMouseEnter: [{
                type: HostListener,
                args: ['mouseenter']
            }], onMouseLeave: [{
                type: HostListener,
                args: ['mouseleave']
            }], onFocus: [{
                type: HostListener,
                args: ['focus']
            }], onBlur: [{
                type: HostListener,
                args: ['blur']
            }], onMouseDown: [{
                type: HostListener,
                args: ['mousedown']
            }], onMouseUp: [{
                type: HostListener,
                args: ['mouseup']
            }], actionClassTargetsQuerySetter: [{
                type: ContentChildren,
                args: [NxApplyActionTargetDirective, {
                        descendants: true,
                    }]
            }] } });

/**
 * A base setting slider component that can be used to create custom sliders.
 *
 * See the @see {@link NxPlaybackSliderComponent} for an example of how to wrap this component
 * or look at storybook jsdoc comments for descriptions of overridable properties.
 */
class NxSettingSliderComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * The value of the slider.
         */
        this.value = model(0);
        /**
         * The last value of the slider before it was toggled.
         */
        this.lastValue = model(0);
        /**
         * The primary icon of the slider.
         */
        this.primaryIcon = input(NxIconEnum.AUDIO_ON);
        /**
         * The value of the slider when toggled.
         */
        this.toggledValue = input(0);
        /**
         * The icon of the slider when toggled.
         */
        this.toggledIcon = input(NxIconEnum.AUDIO_OFF);
        /**
         * The color of the slider when toggled.
         */
        this.toggledColor = input(generateCssVariableName('attentionErrorRed'));
        /**
         * The friendly name of the value.
         */
        this.toFriendlyName = input((value) => `${value}%`);
        /**
         * Whether the slider is currently being dragged.
         */
        this.dragging = model(false);
        /**
         * The function to convert the value to a selection range.
         *
         * Normally from 0 to 100, but can be overridden to map values between any two points.
         */
        this.toSelectionRange = input((value) => {
            const clamped = this.clampValue()(value);
            return {
                start: 0,
                end: clamped,
                handle: clamped,
            };
        });
        /**
         * The function to clamp the value to a valid range.
         */
        this.clampValue = input((value) => {
            if (value < 0) {
                return 0;
            }
            else if (value > 100) {
                return 100;
            }
            return Math.round(value);
        });
        /**
         * For when we potentially move the slider to a popover.
         */
        this.showPopover = input(false, { transform: booleanAttribute });
        /**
         * The value from the slider mapped to a friendly name.
         */
        this.valueName = computed(() => this.toFriendlyName()(this.value()));
        /**
         * Whether the slider is toggled.
         */
        this.itToggled = computed(() => this.value() === this.toggledValue());
        /**
         * Currently displayed icon.
         */
        this.icon = computed(() => (this.itToggled() ? this.toggledIcon() : this.primaryIcon()));
        /**
         * The value of the selection range after clamping and mapping the raw value.
         */
        this.selectionRange = computed(() => this.toSelectionRange()(this.clampValue()(this.value())));
        /**
         * The start of the selection range.
         */
        this.selectionStart = computed(() => `${this.selectionRange().start}%`);
        /**
         * The end of the selection range.
         */
        this.selectionEnd = computed(() => `${100 - this.selectionRange().end}%`);
        /**
         * The handle location for modifying the selection range.
         */
        this.selectionHandle = computed(() => `${100 - this.selectionRange().handle}%`);
        /**
         * Whether the slider is expanded showing slider or collapsed just allowing toggle.
         */
        this.opened = signal(false);
        /**
         * The slider ref used for getting actual sizes of the wrapper.
         */
        this.sliderWrapper = viewChild('sliderWrapper');
        this.variableColors = computed(() => ({
            '--iconColor': this.itToggled()
                ? this.toggledColor()
                : commonColors['--nxc-light10'],
        }));
        /**
         * The current color of the icon.
         */
        this.iconColor = computed(() => this.variableColors()['--iconColor']);
        /**
         * Handles the clamping of the raw value.
         */
        this.clampValueEffect = effect(() => {
            const value = this.value();
            const clampValueFunction = this.clampValue();
            const clampedValue = clampValueFunction(value);
            if (value !== clampedValue) {
                this.value.set(clampedValue);
            }
        });
        /**
         * Handles toggling if the slider is collapsed or expanded.
         */
        this.toggleOpened = (state) => {
            this.opened.update(currentState => state ?? !currentState);
        };
        /**
         * Handles updating the position by clicking on the slider.
         */
        this.setPosition = (event) => {
            const element = event.target;
            if (!element || element.classList.contains('handle')) {
                return;
            }
            const x = event.offsetX;
            const pixelsPerPercent = this.getWidth() / 100;
            this.value.set(x / pixelsPerPercent);
        };
        this.getWidth = () => {
            const nativeElement = this.sliderWrapper().nativeElement;
            const style = getComputedStyle(nativeElement);
            const sidePadding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
            return nativeElement.clientWidth - sidePadding;
        };
        /**
         * The start position of the drag.
         */
        this.dragStartPosition = 0;
        /**
         * Handles the start of dragging the slider
         */
        this.startDrag = () => {
            this.dragStartPosition = this.value();
            this.dragging.set(true);
        };
        /**
         * Handles the end of dragging the slider.
         */
        this.endDrag = () => {
            this.dragging.set(false);
        };
        /**
         * Handles dragging the slider.
         */
        this.handleDrag = (event) => {
            const x = event.distance.x;
            const pixelsPerPercent = this.getWidth() / 100;
            const percentageChange = x / pixelsPerPercent;
            this.value.set(this.dragStartPosition + percentageChange);
        };
        /**
         * Updates saving the last value when toggling.
         */
        this.updateLastValue = effect(() => {
            const value = this.value();
            if (value !== this.toggledValue()) {
                this.lastValue.set(value);
            }
        });
        /**
         * Toggles between the primary and toggled values.
         */
        this.handleToggle = () => {
            if (!this.itToggled()) {
                this.value.set(this.toggledValue());
            }
            else {
                this.value.set(this.lastValue());
            }
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSettingSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxSettingSliderComponent, isStandalone: true, selector: "nx-setting-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lastValue: { classPropertyName: "lastValue", publicName: "lastValue", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, toggledValue: { classPropertyName: "toggledValue", publicName: "toggledValue", isSignal: true, isRequired: false, transformFunction: null }, toggledIcon: { classPropertyName: "toggledIcon", publicName: "toggledIcon", isSignal: true, isRequired: false, transformFunction: null }, toggledColor: { classPropertyName: "toggledColor", publicName: "toggledColor", isSignal: true, isRequired: false, transformFunction: null }, toFriendlyName: { classPropertyName: "toFriendlyName", publicName: "toFriendlyName", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, toSelectionRange: { classPropertyName: "toSelectionRange", publicName: "toSelectionRange", isSignal: true, isRequired: false, transformFunction: null }, clampValue: { classPropertyName: "clampValue", publicName: "clampValue", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", lastValue: "lastValueChange", dragging: "draggingChange" }, host: { properties: { "style.--selectionStart": "selectionStart()", "style.--selectionEnd": "selectionEnd()", "style.--selectionHandle": "selectionHandle()" } }, viewQueries: [{ propertyName: "sliderWrapper", first: true, predicate: ["sliderWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<nx-icon\n    [icon]=\"icon()\"\n    (click)=\"handleToggle()\"\n    useCurrentColor\n/>\n<span (click)=\"toggleOpened()\">{{ valueName() }}</span>\n@if (opened() && !showPopover()) {\n    <div\n        #sliderWrapper\n        class=\"slider-wrapper\"\n    >\n        <div\n            class=\"slider\"\n            [ngClass]=\"{ dragging: dragging() }\"\n            (click)=\"setPosition($event)\"\n        >\n            <div\n                class=\"handle\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                (cdkDragStarted)=\"startDrag()\"\n                (cdkDragEnded)=\"endDrag()\"\n                (cdkDragMoved)=\"handleDrag($event)\"\n            ></div>\n        </div>\n    </div>\n    <nx-icon\n        class=\"close-section\"\n        icon=\"Close16X16\"\n        useCurrentColor\n        (click)=\"toggleOpened(false)\"\n    />\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-size:12px;line-height:15.6px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-light10-offset, var(--nxc-light10));-webkit-user-select:none;user-select:none;display:inline-flex;border-radius:6px}@property --selectionEnd{:host {syntax: \"<length>\"; inherits: false; initial-value: 0;}}@property --selectionHandle{:host {syntax: \"<length>\"; inherits: false; initial-value: 0;}}:host:hover:not([disabled]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6%))}}:host>*{height:18px;padding:7px 11px;place-content:center;text-align:center}:host>*:not(.slider-wrapper){background:var(--nxc-dark6-offset, var(--nxc-dark6));cursor:pointer}:host>*:not(.slider-wrapper):hover:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):active:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host>*:not(.slider-wrapper):hover:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host>*:not(.slider-wrapper):active:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3%))}}:host:has(>:first-child:hover),:host:has(>:nth-child(2):hover){--divider-color: transparent}:host>.close-section{padding:7px 0;width:32px}:host>:first-child{line-height:8px;padding:7px;min-width:34px;border-radius:6px 0 0 6px;position:relative;color:var(--iconColor)}:host>:first-child:after{content:\"\";position:absolute;display:block;top:7px;bottom:7px;right:-.5px;left:calc(100% - .5px);background:var(--divider-color, var(--nxc-dark8-offset, var(--nxc-dark8)))}:host :nth-child(2){padding:7px;min-width:34px}:host>:last-child{border-radius:0 6px 6px 0}:host .slider-wrapper{background:var(--nxc-dark6-offset, var(--nxc-dark6));width:98px;transition:width .3s ease-out}@starting-style{:host .slider-wrapper{width:0px}}:host .slider{cursor:pointer;height:2px;padding:2px 0;background:var(--nxc-dark6-offset, var(--nxc-dark6));position:relative;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .slider:before{content:\"\";position:absolute;display:block;border-radius:100px;background:var(--nxc-dark8-offset, var(--nxc-dark8));inset:2px 0}:host .slider:after{content:\"\";position:absolute;display:block;top:2px;bottom:2px;border-radius:100px;background:var(--nxc-light4-offset, var(--nxc-light4));right:var(--selectionEnd, 0);left:var(--selectionStart, 0)}:host .slider:not(.dragging):after,:host .slider:not(.dragging) .handle{transition:ease-out .3s}:host .slider .handle{cursor:grab;height:14px;width:14px;position:absolute;top:calc(50% - 7px);right:calc(var(--selectionHandle, 0) - 7px);background:var(--nxc-light4-offset, var(--nxc-light4));border-radius:100px;z-index:3;transform:none!important}:host .slider .handle:after{content:\"\";position:absolute;display:block;inset:2px;background:var(--nxc-dark6-offset, var(--nxc-dark6));border-radius:100px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSettingSliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-setting-slider', imports: [CommonModule, NxIconComponent, CdkDrag], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[style.--selectionStart]': 'selectionStart()',
                        '[style.--selectionEnd]': 'selectionEnd()',
                        '[style.--selectionHandle]': 'selectionHandle()',
                    }, template: "<nx-icon\n    [icon]=\"icon()\"\n    (click)=\"handleToggle()\"\n    useCurrentColor\n/>\n<span (click)=\"toggleOpened()\">{{ valueName() }}</span>\n@if (opened() && !showPopover()) {\n    <div\n        #sliderWrapper\n        class=\"slider-wrapper\"\n    >\n        <div\n            class=\"slider\"\n            [ngClass]=\"{ dragging: dragging() }\"\n            (click)=\"setPosition($event)\"\n        >\n            <div\n                class=\"handle\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                (cdkDragStarted)=\"startDrag()\"\n                (cdkDragEnded)=\"endDrag()\"\n                (cdkDragMoved)=\"handleDrag($event)\"\n            ></div>\n        </div>\n    </div>\n    <nx-icon\n        class=\"close-section\"\n        icon=\"Close16X16\"\n        useCurrentColor\n        (click)=\"toggleOpened(false)\"\n    />\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-size:12px;line-height:15.6px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-light10-offset, var(--nxc-light10));-webkit-user-select:none;user-select:none;display:inline-flex;border-radius:6px}@property --selectionEnd{:host {syntax: \"<length>\"; inherits: false; initial-value: 0;}}@property --selectionHandle{:host {syntax: \"<length>\"; inherits: false; initial-value: 0;}}:host:hover:not([disabled]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6%))}}:host>*{height:18px;padding:7px 11px;place-content:center;text-align:center}:host>*:not(.slider-wrapper){background:var(--nxc-dark6-offset, var(--nxc-dark6));cursor:pointer}:host>*:not(.slider-wrapper):hover:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):active:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host>*:not(.slider-wrapper):hover:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host>*:not(.slider-wrapper):active:not([disabled]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3%))}}:host:has(>:first-child:hover),:host:has(>:nth-child(2):hover){--divider-color: transparent}:host>.close-section{padding:7px 0;width:32px}:host>:first-child{line-height:8px;padding:7px;min-width:34px;border-radius:6px 0 0 6px;position:relative;color:var(--iconColor)}:host>:first-child:after{content:\"\";position:absolute;display:block;top:7px;bottom:7px;right:-.5px;left:calc(100% - .5px);background:var(--divider-color, var(--nxc-dark8-offset, var(--nxc-dark8)))}:host :nth-child(2){padding:7px;min-width:34px}:host>:last-child{border-radius:0 6px 6px 0}:host .slider-wrapper{background:var(--nxc-dark6-offset, var(--nxc-dark6));width:98px;transition:width .3s ease-out}@starting-style{:host .slider-wrapper{width:0px}}:host .slider{cursor:pointer;height:2px;padding:2px 0;background:var(--nxc-dark6-offset, var(--nxc-dark6));position:relative;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .slider:before{content:\"\";position:absolute;display:block;border-radius:100px;background:var(--nxc-dark8-offset, var(--nxc-dark8));inset:2px 0}:host .slider:after{content:\"\";position:absolute;display:block;top:2px;bottom:2px;border-radius:100px;background:var(--nxc-light4-offset, var(--nxc-light4));right:var(--selectionEnd, 0);left:var(--selectionStart, 0)}:host .slider:not(.dragging):after,:host .slider:not(.dragging) .handle{transition:ease-out .3s}:host .slider .handle{cursor:grab;height:14px;width:14px;position:absolute;top:calc(50% - 7px);right:calc(var(--selectionHandle, 0) - 7px);background:var(--nxc-light4-offset, var(--nxc-light4));border-radius:100px;z-index:3;transform:none!important}:host .slider .handle:after{content:\"\";position:absolute;display:block;inset:2px;background:var(--nxc-dark6-offset, var(--nxc-dark6));border-radius:100px}\n"] }]
        }] });

/**
 * A base control value accessor directive that can be used to create custom form controls.
 *
 * The class is an abstract class where the model type is inferred from how the extending
 * class implements the `value` property.
 */
class BaseControlValueAccessor extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * The disabled state of the control.
         *
         * should be a linked signal after those are available
         */
        this.isDisabled = signal(false);
        /**
         * Syncs updates to the control value with the change and touch events.
         */
        this.notifyChangeEffect = effect(() => {
            const value = this.value();
            this.onChange(value);
            this.onTouched(value);
        });
    }
    /**
     * The change event of the control.
     */
    onChange(_) { }
    /**
     * The touch event of the control.
     */
    onTouched(_) { }
    /**
     * Write a value to the control.
     */
    writeValue(value) {
        this.value.set(value);
    }
    /**
     * Register the change event handler function.
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * Register the touch event handler function.
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Updates the inner disabled state of the control.
     */
    setDisabledState(isDisabled) {
        this.isDisabled.set(isDisabled);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: BaseControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: BaseControlValueAccessor, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: BaseControlValueAccessor, decorators: [{
            type: Directive
        }] });

/**
 * A volume slider component.
 *
 * Clamps the volume value between 0 and 100.
 *
 * Can be used with form controls or by binding to the `value` model.
 */
class NxVolumeSliderComponent extends BaseControlValueAccessor {
    constructor() {
        super(...arguments);
        /**
         * The current value of the volume slider.
         */
        this.value = model(0);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxVolumeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxVolumeSliderComponent, isStandalone: true, selector: "nx-volume-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxVolumeSliderComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: '<nx-setting-slider [(value)]="value"/>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxSettingSliderComponent, selector: "nx-setting-slider", inputs: ["value", "lastValue", "primaryIcon", "toggledValue", "toggledIcon", "toggledColor", "toFriendlyName", "dragging", "toSelectionRange", "clampValue", "showPopover"], outputs: ["valueChange", "lastValueChange", "draggingChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxVolumeSliderComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nx-volume-slider',
                    imports: [CommonModule, NxSettingSliderComponent],
                    template: '<nx-setting-slider [(value)]="value"/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxVolumeSliderComponent),
                            multi: true,
                        },
                    ],
                }]
        }] });

const playbackRates = [-16, -8, -4, -2, -1, 0, 1, 2, 4, 8, 16];
const getMappedValue = (value) => {
    const numberOptions = playbackRates.length;
    const pixelsBetweenOptions = 100 / (numberOptions - 1);
    return playbackRates[Math.floor(value / pixelsBetweenOptions)] ?? 0;
};
const fromMappedValue = (value) => {
    const index = playbackRates.findIndex((current, index) => value <= current || index === playbackRates.length - 1);
    return Math.round((100 / (playbackRates.length - 1)) * index);
};
const getTagName = () => inject(ElementRef).nativeElement.tagName.toLowerCase();
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const getPlayBackSliderValue = (value) => {
    if (value < 1) {
        return NxIconEnum.BACKWARD;
    }
    else if (value > 1) {
        return NxIconEnum.FORWARD;
    }
    return NxIconEnum.PAUSE_20_X_20_VARIANT_2;
};

/**
 * A playback rate slider component.
 *
 * Currently hardcoded to allow playback rates of `-1, 0, 1, 2, 4, 8`.
 *
 * Can be used with form controls or by binding to the `value` model.
 *
 * Can be used as `nx-playback-slider` or `nx-playback-toggle-slider`.
 *
 * The `nx-playback-slider` will show the icon as the current playback state.
 *
 * The `nx-playback-toggle-slider` will show the icon as the playback state if you toggled.
 */
class NxPlaybackSliderComponent extends BaseControlValueAccessor {
    constructor() {
        super(...arguments);
        /**
         * Used to determine if slider icons should be inverse when toggled.
         */
        this.isToggleSlider = getTagName() === 'nx-playback-toggle-slider';
        /**
         * The current playback rate.
         *
         * @default 1
         */
        this.value = model(1);
        this.toggledValue = fromMappedValue(0);
        this.toggledColor = commonColors['--nxc-light10'];
        this.toFriendlyName = (value) => `${getMappedValue(value)}x`;
        this.mappedValue = computed(() => fromMappedValue(this.value()));
        this.currentIcon = computed(() => {
            if (this.isToggleSlider) {
                return NxIconEnum.PAUSE_20_X_20_VARIANT_2;
            }
            return getPlayBackSliderValue(this.value());
        });
        this.lastValue = signal(0);
        this.toggledIcon = computed(() => {
            if (this.isToggleSlider) {
                return getPlayBackSliderValue(getMappedValue(this.lastValue()));
            }
            return NxIconEnum.PAUSE_20_X_20_VARIANT_2;
        });
        this.toSelectionRange = (value) => {
            const baseline = this.toggledValue;
            const start = Math.min(baseline, value);
            const end = Math.max(baseline, value);
            return {
                start,
                end,
                handle: value,
            };
        };
        this.clampValue = (value) => fromMappedValue(getMappedValue(value));
        this.updateValue = (value) => {
            this.value.set(getMappedValue(value));
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxPlaybackSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxPlaybackSliderComponent, isStandalone: true, selector: "nx-playback-slider, nx-playback-toggle-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxPlaybackSliderComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<nx-setting-slider\n    [value]=\"mappedValue()\"\n    (valueChange)=\"updateValue($event)\"\n    [toggledValue]=\"toggledValue\"\n    [primaryIcon]=\"currentIcon()\"\n    [toggledIcon]=\"toggledIcon()\"\n    [toggledColor]=\"toggledColor\"\n    [toFriendlyName]=\"toFriendlyName\"\n    [toSelectionRange]=\"toSelectionRange\"\n    (lastValueChange)=\"lastValue.set($event)\"\n    [clampValue]=\"clampValue\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxSettingSliderComponent, selector: "nx-setting-slider", inputs: ["value", "lastValue", "primaryIcon", "toggledValue", "toggledIcon", "toggledColor", "toFriendlyName", "dragging", "toSelectionRange", "clampValue", "showPopover"], outputs: ["valueChange", "lastValueChange", "draggingChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxPlaybackSliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-playback-slider, nx-playback-toggle-slider', imports: [CommonModule, NxSettingSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxPlaybackSliderComponent),
                            multi: true,
                        },
                    ], template: "<nx-setting-slider\n    [value]=\"mappedValue()\"\n    (valueChange)=\"updateValue($event)\"\n    [toggledValue]=\"toggledValue\"\n    [primaryIcon]=\"currentIcon()\"\n    [toggledIcon]=\"toggledIcon()\"\n    [toggledColor]=\"toggledColor\"\n    [toFriendlyName]=\"toFriendlyName\"\n    [toSelectionRange]=\"toSelectionRange\"\n    (lastValueChange)=\"lastValue.set($event)\"\n    [clampValue]=\"clampValue\"\n/>\n" }]
        }] });

/* eslint-disable nx/only-export-injectable */
var ButtonSize;
(function (ButtonSize) {
    ButtonSize["SMALL"] = "small";
    ButtonSize["LARGE"] = "large";
})(ButtonSize || (ButtonSize = {}));
var ButtonVariant;
(function (ButtonVariant) {
    ButtonVariant["BRAND"] = "brand";
    ButtonVariant["OUTLINE"] = "outline";
    ButtonVariant["SECONDARY"] = "secondary";
    ButtonVariant["TEXT"] = "text";
    ButtonVariant["BRAND_TEXT"] = "brandText";
})(ButtonVariant || (ButtonVariant = {}));
var ButtonLightness;
(function (ButtonLightness) {
    ButtonLightness["HIGH"] = "high";
    ButtonLightness["MEDIUM"] = "medium";
    ButtonLightness["LOW"] = "low";
})(ButtonLightness || (ButtonLightness = {}));
class NxButtonBase extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * Whether the button should be disabled.
         * @default false
         * @example
         * <nx-button disabled></nx-button>
         */
        this.disabled = input(false, { transform: booleanAttribute });
        this._getDisabled = () => (this.disabled() ? true : null);
        /**
         * The size of the button.
         * @default 'small'
         * @example
         * <nx-button size="large"></nx-button>
         */
        this.size = input('small');
        /**
         * The variant of the button that defines the overall look.
         * @default 'brand'
         * @example
         * <nx-button variant="outline"></nx-button>
         */
        this.variant = input('brand');
        /**
         * The lightness of the button. Only applies to the outline and secondary variants.
         * @default 'high'
         * @example
         * <nx-button lightness="medium"></nx-button>
         */
        this.lightness = input('high');
        /**
         * Whether the button is selected. Only applies to the secondary variant.
         * @default false
         * @example
         * <nx-button [selected]="isSelected()"></nx-button>
         */
        this.selected = input(false, { transform: booleanAttribute });
        this.classes = computed(() => {
            return `${this.size()} ${this.variant()} ${this.lightness()}`;
        });
    }
    // Check if the button is an icon only button and add the appropriate class
    ngAfterViewInit() {
        const buttonHasText = !!this.elRef.nativeElement.textContent?.trim();
        if (!buttonHasText) {
            this.elRef.nativeElement.classList.add('icon-only');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxButtonBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxButtonBase, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, lightness: { classPropertyName: "lightness", publicName: "lightness", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxButtonBase, decorators: [{
            type: Directive
        }] });
/**
 * Anchor button base.
 */
class NxAnchorBase extends NxButtonBase {
    constructor() {
        super(...arguments);
        this._ngZone = inject(NgZone);
        // This is needed because anchor tags disable doesn't prevent the click event
        this._haltDisabledEvents = (event) => {
            // A disabled button shouldn't apply any actions
            if (this.disabled()) {
                event.preventDefault();
                event.stopImmediatePropagation();
            }
        };
    }
    ngOnInit() {
        this._ngZone.runOutsideAngular(() => {
            this.elRef.nativeElement.addEventListener('click', this._haltDisabledEvents);
        });
    }
    ngOnDestroy() {
        this.elRef.nativeElement.removeEventListener('click', this._haltDisabledEvents);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxAnchorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: NxAnchorBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxAnchorBase, decorators: [{
            type: Directive
        }] });

/* eslint-disable nx/only-export-injectable */
/** Shared host configuration for all buttons */
const NX_BUTTON_HOST = {
    '[attr.disabled]': '_getDisabled()',
    '[class]': 'classes()',
    '[class.selected]': 'selected()',
};
/** Shared host configuration for buttons using the `<a>` tag. */
const NX_ANCHOR_HOST = {
    ...NX_BUTTON_HOST,
};
class NxButtonComponent extends NxButtonBase {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxButtonComponent, isStandalone: true, selector: "button[nx-button]", host: { properties: { "attr.disabled": "_getDisabled()", "class": "classes()", "class.selected": "selected()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{cursor:pointer;border-radius:6px;justify-content:center;display:flex;gap:4px;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;flex-shrink:0;border:solid 1px transparent;--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--color)}:host.small{height:32px;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:5px 7px}:host.small.icon-only{padding:5px;min-width:unset}:host.large{height:40px;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:7px 11px}:host.large.icon-only{padding:7px;min-width:unset}:host.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}:host.secondary:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.secondary:not(.selected).high{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary:not(.selected).medium{--background: var(--nxc-dark6-offset, var(--nxc-dark6))}:host.secondary:not(.selected).low{--background: var(--nxc-dark4-offset, var(--nxc-dark4))}:host.secondary.selected{border-style:solid;border-width:1px;border-color:var(--nxc-dark15-offset, var(--nxc-dark15));--color: var(--nxc-light4-offset, var(--nxc-light4))}:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}:host.secondary.selected.high{--background: var(--nxc-dark12-offset, var(--nxc-dark12))}:host.secondary.selected.medium{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary.selected.low{--background: var(--nxc-dark7-offset, var(--nxc-dark7))}:host.outline{background:none;border-style:solid;border-width:1px;--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.outline.high{border-color:var(--nxc-dark9-offset, var(--nxc-dark9))}:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3%))}}:host.outline.low{border-color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3%))}}:host.text{--color: var(--nxc-light10-offset, var(--nxc-light10));background:none;min-width:auto}:host.brand-text{--color: var(--nxc-brand);background:none;min-width:auto}:host.secondary,:host.brand{background:var(--background)}:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3%))}}:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3%))}}:host[disabled]{opacity:.3;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[nx-button]', host: {
                        /** _getDisabled
                         * Should include host bindings from  @see {@link NX_BUTTON_HOST}
                         * Compodoc has issues statically analyzing the host property when reference is used so we
                         * have to duplicate it here.
                         */
                        '[attr.disabled]': '_getDisabled()',
                        '[class]': 'classes()',
                        '[class.selected]': 'selected()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{cursor:pointer;border-radius:6px;justify-content:center;display:flex;gap:4px;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;flex-shrink:0;border:solid 1px transparent;--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--color)}:host.small{height:32px;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:5px 7px}:host.small.icon-only{padding:5px;min-width:unset}:host.large{height:40px;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:7px 11px}:host.large.icon-only{padding:7px;min-width:unset}:host.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}:host.secondary:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.secondary:not(.selected).high{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary:not(.selected).medium{--background: var(--nxc-dark6-offset, var(--nxc-dark6))}:host.secondary:not(.selected).low{--background: var(--nxc-dark4-offset, var(--nxc-dark4))}:host.secondary.selected{border-style:solid;border-width:1px;border-color:var(--nxc-dark15-offset, var(--nxc-dark15));--color: var(--nxc-light4-offset, var(--nxc-light4))}:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}:host.secondary.selected.high{--background: var(--nxc-dark12-offset, var(--nxc-dark12))}:host.secondary.selected.medium{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary.selected.low{--background: var(--nxc-dark7-offset, var(--nxc-dark7))}:host.outline{background:none;border-style:solid;border-width:1px;--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.outline.high{border-color:var(--nxc-dark9-offset, var(--nxc-dark9))}:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3%))}}:host.outline.low{border-color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3%))}}:host.text{--color: var(--nxc-light10-offset, var(--nxc-light10));background:none;min-width:auto}:host.brand-text{--color: var(--nxc-brand);background:none;min-width:auto}:host.secondary,:host.brand{background:var(--background)}:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3%))}}:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3%))}}:host[disabled]{opacity:.3;cursor:default}\n"] }]
        }] });
class NxAnchorComponent extends NxAnchorBase {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxAnchorComponent, isStandalone: true, selector: "a[nx-button]", host: { properties: { "attr.disabled": "_getDisabled()", "class": "classes()", "class.selected": "selected()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{cursor:pointer;border-radius:6px;justify-content:center;display:flex;gap:4px;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;flex-shrink:0;border:solid 1px transparent;--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--color)}:host.small{height:32px;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:5px 7px}:host.small.icon-only{padding:5px;min-width:unset}:host.large{height:40px;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:7px 11px}:host.large.icon-only{padding:7px;min-width:unset}:host.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}:host.secondary:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.secondary:not(.selected).high{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary:not(.selected).medium{--background: var(--nxc-dark6-offset, var(--nxc-dark6))}:host.secondary:not(.selected).low{--background: var(--nxc-dark4-offset, var(--nxc-dark4))}:host.secondary.selected{border-style:solid;border-width:1px;border-color:var(--nxc-dark15-offset, var(--nxc-dark15));--color: var(--nxc-light4-offset, var(--nxc-light4))}:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}:host.secondary.selected.high{--background: var(--nxc-dark12-offset, var(--nxc-dark12))}:host.secondary.selected.medium{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary.selected.low{--background: var(--nxc-dark7-offset, var(--nxc-dark7))}:host.outline{background:none;border-style:solid;border-width:1px;--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.outline.high{border-color:var(--nxc-dark9-offset, var(--nxc-dark9))}:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3%))}}:host.outline.low{border-color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3%))}}:host.text{--color: var(--nxc-light10-offset, var(--nxc-light10));background:none;min-width:auto}:host.brand-text{--color: var(--nxc-brand);background:none;min-width:auto}:host.secondary,:host.brand{background:var(--background)}:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3%))}}:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3%))}}:host[disabled]{opacity:.3;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxAnchorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'a[nx-button]', host: {
                        /**
                         * Should include host bindings from @see {@link NX_ANCHOR_HOST}
                         * Compodoc has issues statically analyzing the host property when reference is used so we
                         * have to duplicate it here.
                         */
                        '[attr.disabled]': '_getDisabled()',
                        '[class]': 'classes()',
                        '[class.selected]': 'selected()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{cursor:pointer;border-radius:6px;justify-content:center;display:flex;gap:4px;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;flex-shrink:0;border:solid 1px transparent;--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--color)}:host.small{height:32px;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:5px 7px}:host.small.icon-only{padding:5px;min-width:unset}:host.large{height:40px;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);padding:7px 11px}:host.large.icon-only{padding:7px;min-width:unset}:host.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}:host.secondary:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.secondary:not(.selected).high{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary:not(.selected).medium{--background: var(--nxc-dark6-offset, var(--nxc-dark6))}:host.secondary:not(.selected).low{--background: var(--nxc-dark4-offset, var(--nxc-dark4))}:host.secondary.selected{border-style:solid;border-width:1px;border-color:var(--nxc-dark15-offset, var(--nxc-dark15));--color: var(--nxc-light4-offset, var(--nxc-light4))}:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary.selected:hover:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6%))}:host.secondary.selected:active:not([disabled]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}:host.secondary.selected.high{--background: var(--nxc-dark12-offset, var(--nxc-dark12))}:host.secondary.selected.medium{--background: var(--nxc-dark9-offset, var(--nxc-dark9))}:host.secondary.selected.low{--background: var(--nxc-dark7-offset, var(--nxc-dark7))}:host.outline{background:none;border-style:solid;border-width:1px;--color: var(--nxc-light10-offset, var(--nxc-light10))}:host.outline.high{border-color:var(--nxc-dark9-offset, var(--nxc-dark9))}:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.high:hover:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l + 6%))}:host.outline.high:active:not([disabled]){border-color:hsl(from var(--nxc-dark9-offset, var(--nxc-dark9)) h s calc(l - 3%))}}:host.outline.low{border-color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.outline.low:hover:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:focus-visible:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6%))}:host.outline.low:active:not([disabled]){border-color:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l - 3%))}}:host.text{--color: var(--nxc-light10-offset, var(--nxc-light10));background:none;min-width:auto}:host.brand-text{--color: var(--nxc-brand);background:none;min-width:auto}:host.secondary,:host.brand{background:var(--background)}:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.secondary:hover:not([disabled]),:host.brand:hover:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:focus-visible:not([disabled]),:host.brand:focus-visible:not([disabled]){background:hsl(from var(--background) h s calc(l + 6%))}:host.secondary:active:not([disabled]),:host.brand:active:not([disabled]){background:hsl(from var(--background) h s calc(l - 3%))}}:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:focus-visible:not([disabled]){color:hsl(from var(--color) h s calc(l + 6%))}:host:active:not([disabled]){color:hsl(from var(--color) h s calc(l - 3%))}}:host[disabled]{opacity:.3;cursor:default}\n"] }]
        }] });

// TODO: We can use a library for this or use the Intl.Locale.getWeekInfo method/polyfill
function weekStart(region, language) {
    const regionSat = 'AEAFBHDJDZEGIQIRJOKWLYOMQASDSY'.match(/../g);
    const regionSun = 'AGARASAUBDBRBSBTBWBZCACNCODMDOETGTGUHKHNIDILINJMJPKEKHKRLAMHMMMOMTMXMZNINPPAPEPHPKPRPTPYSASGSVTHTTTWUMUSVEVIWSYEZAZW'.match(/../g);
    const languageSat = ['ar', 'arq', 'arz', 'fa'];
    const languageSun = 'amasbndzengnguhehiidjajvkmknkolomhmlmrmtmyneomorpapssdsmsnsutatethtnurzhzu'.match(/../g);
    return region
        ? regionSun.includes(region)
            ? 'sun'
            : regionSat.includes(region)
                ? 'sat'
                : 'mon'
        : languageSun.includes(language)
            ? 'sun'
            : languageSat.includes(language)
                ? 'sat'
                : 'mon';
}
function weekStartLocale(locale) {
    const localeToUse = locale === 'default' ? navigator.language : locale;
    const parts = localeToUse.match(/^([a-z]{2,3})(?:-([a-z]{3})(?=$|-))?(?:-([a-z]{4})(?=$|-))?(?:-([a-z]{2}|\d{3})(?=$|-))?/i);
    return weekStart(parts[4], parts[1]);
}
function weekStartToOffsetMap(weekStart) {
    return {
        sun: 0,
        mon: 1,
        sat: 6,
    }[weekStart];
}
class NxCalendarComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.locale = input('default');
        this.dateRangeEnabled = input(true);
        this.showHours = input(false);
        this.currentView = signal('days');
        // This date is an easy representation of what month or year the view is currently showing. It's easier to store as a Date
        this.dateCurrentlyViewed = signal(new Date());
        this.carouselHeading = computed(() => {
            const [dateCurrentlyViewed, currentView] = [this.dateCurrentlyViewed(), this.currentView()];
            if (currentView === 'months') {
                return dateCurrentlyViewed.toLocaleString(this.locale(), { year: 'numeric' });
            }
            return dateCurrentlyViewed.toLocaleString(this.locale(), {
                month: 'long',
                year: 'numeric',
            });
        });
        /*
         * Return an array of days representing the days of the week for the current view
         * The array is 42 items (days) long representing 6 weeks
         * The numbers will be incremented from 1 to 28/29/30/31 for the days of the month
         * But the array will count backward and forward passed the 1 and 31 to fill the empty spots from previous and next months
         * Example: [-3, -2, -1, 0(last day of previous month), 1(first day of the month), 2, etc... 31, 32, 33, 34]
         */
        this.daysOfTheMonth = computed(() => {
            if (this.currentView() === 'months') {
                return [];
            }
            const isDateWithinRange = ({ start, end, value, }) => {
                if (start === undefined || end === undefined) {
                    return false;
                }
                return start < value && value < end;
            };
            const dateCurrentlyViewed = this.dateCurrentlyViewed();
            const selectedDays = this.selectedDays();
            const hoveredDay = this.hoveredDay();
            const result = new Array(42);
            const year = dateCurrentlyViewed.getFullYear();
            const month = dateCurrentlyViewed.getMonth();
            const lastDayOfTheMonth = new Date(year, month + 1, 0);
            const firstDayOfTheMonth = new Date(year, month, 1);
            const lastDayOfPreviousMonth = new Date(year, month, 0).getDate();
            const weekStartOffset = weekStartToOffsetMap(weekStartLocale(this.locale()));
            for (let i = 1; i < 43; i++) {
                const day = i -
                    firstDayOfTheMonth.getDay() +
                    weekStartOffset -
                    (firstDayOfTheMonth.getDay() < weekStartOffset ? 7 : 0);
                let date;
                let outsideCurrentMonth;
                if (day <= 0) {
                    // Days from the previous month
                    date = new Date(year, month - 1, lastDayOfPreviousMonth + day);
                    outsideCurrentMonth = true;
                }
                else if (day > lastDayOfTheMonth.getDate()) {
                    // Days from the next month
                    date = new Date(year, month + 1, day - lastDayOfTheMonth.getDate());
                    outsideCurrentMonth = true;
                }
                else {
                    // Days from the current month
                    date = new Date(year, month, day);
                    outsideCurrentMonth = false;
                }
                // Set the date's selected state based off selected and hovered days
                let selection = 'none';
                if (selectedDays) {
                    if (selectedDays.end && !isSameDay(selectedDays.start, selectedDays.end)) {
                        if (isSameDay(date, selectedDays.start)) {
                            selection = 'start';
                        }
                        else if (isSameDay(date, selectedDays.end)) {
                            selection = 'end';
                        }
                        else if (isDateWithinRange({
                            start: selectedDays.start,
                            end: selectedDays.end,
                            value: date,
                        })) {
                            selection = 'middle';
                        }
                    }
                    else if (isSameDay(date, selectedDays.start)) {
                        if (hoveredDay && date < hoveredDay) {
                            selection = 'start';
                        }
                        else {
                            selection = 'single';
                        }
                    }
                    else if (isDateWithinRange({ start: selectedDays.start, end: hoveredDay, value: date })) {
                        selection = 'middle';
                    }
                }
                result[i - 1] = {
                    date,
                    outsideCurrentMonth,
                    isToday: isSameDay(date, new Date()),
                    selection,
                    archive: false,
                };
            }
            return result;
        });
        this.hoursDisabled = computed(() => {
            const selectedDays = this.selectedDays();
            return (!selectedDays ||
                (!!selectedDays.end && !isSameDay(selectedDays.start, selectedDays.end)));
        });
        this.hoursOfTheDay = computed(() => {
            if (!this.showHours()) {
                return [];
            }
            const isHourWithinRange = ({ start, end, value, }) => {
                if (start === undefined || end === undefined) {
                    return false;
                }
                return value >= start && value <= end;
            };
            const { start, end } = this.selectedHours();
            const hoveredHour = this.hoveredHour();
            const dateRangeEnabled = this.dateRangeEnabled();
            const result = new Array(24);
            for (let hour = 0; hour < 24; hour++) {
                let selection = 'none';
                if (this.hoursDisabled()) {
                    selection = 'none';
                }
                else if (start === hour) {
                    if (end) {
                        selection = 'start';
                    }
                    else {
                        selection = 'single';
                    }
                }
                else if (end === hour) {
                    selection = 'end';
                }
                else if (dateRangeEnabled &&
                    (isHourWithinRange({ start, end, value: hour }) ||
                        (end === undefined &&
                            isHourWithinRange({ start, end: hoveredHour?.hour, value: hour })))) {
                    // Middle state is for when the hour is between the start and end of the currently selected range, or between the start of the range and the hovered hour
                    selection = 'middle';
                }
                // Display should be either 13:00 or 01 PM depending on the locale
                const date = new Date(2023, 0, 1, hour);
                const display = Intl.DateTimeFormat(this.locale(), {
                    hour: 'numeric',
                }).resolvedOptions().hour12
                    ? date.toLocaleString(this.locale(), { hour: '2-digit' })
                    : hour.toString().padStart(2, '0') + ':00';
                result[hour] = {
                    hour,
                    selection,
                    display,
                };
            }
            return result;
        });
        this.daysOfTheWeekNames = [];
        this.allMonths = [];
        this.hoveredHour = signal(undefined);
        this.hoveredDay = signal(undefined);
        this.selectedDays = signal(undefined);
        this.selectedHours = signal({
            start: undefined,
            end: undefined,
        });
        this.dateRange = signal(undefined);
        this.onChange = () => { };
        this.onTouched = () => { };
    }
    ngOnInit() {
        const weekStartOffset = weekStartToOffsetMap(weekStartLocale(this.locale()));
        this.daysOfTheWeekNames = Array.from({ length: 7 }, (_, i) => {
            // The date here doesn't matter just need a known date to go off of
            const date = new Date(2023, 0, i + 1 + weekStartOffset); // 2023-01-01 is a Sunday
            return date.toLocaleString(this.locale(), { weekday: 'short' });
        });
        // Javascript only supports the Gregorian calendar and therefor always has 12 months
        this.allMonths = Array.from({ length: 12 }, (_, i) => {
            const date = new Date(2023, i, 1);
            return date.toLocaleString(this.locale(), { month: 'short' });
        });
    }
    handleMouseEnterHour(hour) {
        if (this.hoursDisabled()) {
            return;
        }
        this.hoveredHour.set(hour);
    }
    handleMouseLeaveHour() {
        this.hoveredHour.set(undefined);
    }
    handleMouseEnterDay(day) {
        if (this.dateRangeEnabled()) {
            this.hoveredDay.set(day);
        }
    }
    handleMouseLeaveDay() {
        if (this.dateRangeEnabled()) {
            this.hoveredDay.set(undefined);
        }
    }
    handleArrowClick(change) {
        this.onTouched();
        const [dateCurrentlyViewed, currentView] = [this.dateCurrentlyViewed(), this.currentView()];
        if (currentView === 'months') {
            this.dateCurrentlyViewed.set(new Date(dateCurrentlyViewed.getFullYear() + change, dateCurrentlyViewed.getMonth()));
        }
        else {
            this.dateCurrentlyViewed.set(new Date(dateCurrentlyViewed.getFullYear(), dateCurrentlyViewed.getMonth() + change));
        }
    }
    handleHeaderClick() {
        this.onTouched();
        this.currentView.set(this.currentView() === 'days' ? 'months' : 'days');
    }
    handleMonthClick(month) {
        this.onTouched();
        const dateCurrentlyViewed = this.dateCurrentlyViewed();
        this.dateCurrentlyViewed.set(new Date(dateCurrentlyViewed.getFullYear(), month));
        this.currentView.set('days');
    }
    handleDayClick(day) {
        this.onTouched();
        const selectedDays = this.selectedDays();
        // If only start is set and user clicks start date, unselect everything
        if (selectedDays && !selectedDays.end && isSameDay(selectedDays.start, day)) {
            this.updateSelectedDates(undefined);
            // Setting hoveredDay to undefined prevents a hard to reproduce bug where days hovered looks wrong
            this.hoveredDay.set(undefined);
            return;
        }
        // If range is not set or end is set or day is before start, reset range
        if (!selectedDays ||
            selectedDays.end ||
            day < selectedDays.start ||
            !this.dateRangeEnabled()) {
            this.updateSelectedDates({ start: day, end: undefined });
            return;
        }
        // Set the end date to last ms of the day
        day.setHours(23, 59, 59, 999);
        this.updateSelectedDates({ start: selectedDays.start, end: day });
    }
    updateSelectedDates(newSelectedValue) {
        this.selectedDays.set(newSelectedValue);
    }
    handleDoneClick() {
        this.onTouched();
        const selectedDays = this.selectedDays();
        const selectedHours = this.selectedHours();
        if (!selectedDays) {
            return;
        }
        if (this.dateRangeEnabled()) {
            const start = new Date(selectedDays.start);
            if (selectedDays.end) {
                start.setHours(0);
                // Hour selection only enabled when a single day is selected
                const end = new Date(selectedDays.end);
                end.setHours(23, 59, 59, 999);
                this.dateRange.set({
                    start,
                    end,
                });
            }
            else {
                start.setHours(selectedHours.start ?? 0);
                const end = new Date(selectedDays.start);
                end.setHours(selectedHours.end ?? selectedHours.start ?? 23, 59, 59, 999);
                this.dateRange.set({
                    start,
                    end,
                });
            }
        }
        else {
            const start = new Date(selectedDays.start);
            start.setHours(selectedHours.start ?? 0);
            this.dateRange.set({
                start,
                end: undefined,
            });
        }
        this.onChange(this.dateRange());
    }
    handleHourClick(hour) {
        const selectedDays = this.selectedDays();
        if (this.hoursDisabled() || !selectedDays) {
            return;
        }
        const dateRangeEnabled = this.dateRangeEnabled();
        this.selectedHours.update(({ start, end }) => {
            // If start isn't set then start a new range
            // If start is set and the new hour is before the start then reset the range
            if (!dateRangeEnabled || start === undefined || start > hour.hour) {
                return { start: hour.hour, end: undefined };
            }
            // If end isn't set then set the end
            if (!end) {
                return { start, end: hour.hour };
            }
            // If the user clicks the start hour again then reset the range
            if (start === hour.hour) {
                return { start: undefined, end: undefined };
            }
            // Anything else should reset the range with the new hour being the start
            return { start: hour.hour, end: undefined };
        });
    }
    writeValue(obj) {
        this.dateRange.set(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxCalendarComponent, isStandalone: true, selector: "nx-calendar", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateRangeEnabled: { classPropertyName: "dateRangeEnabled", publicName: "dateRangeEnabled", isSignal: true, isRequired: false, transformFunction: null }, showHours: { classPropertyName: "showHours", publicName: "showHours", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.with-hour-selector": "showHours()" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxCalendarComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<div class=\"carousel-header\">\n    <button\n        class=\"carousel-header__button\"\n        (click)=\"handleArrowClick(-1)\"\n    >\n        <nx-icon\n            icon=\"ArrowLeft20X20\"\n            preserveSize\n            useCurrentColor\n        ></nx-icon>\n    </button>\n    <div\n        class=\"carousel-header__current-date\"\n        (click)=\"handleHeaderClick()\"\n    >\n        {{ carouselHeading() }}\n    </div>\n    <button\n        class=\"carousel-header__button\"\n        (click)=\"handleArrowClick(1)\"\n    >\n        <nx-icon\n            icon=\"ArrowRight20X20Variant1\"\n            preserveSize\n            useCurrentColor\n        ></nx-icon>\n    </button>\n</div>\n@if (currentView() === 'days') {\n    <div class=\"day-names\">\n        @for (name of daysOfTheWeekNames; track name) {\n            <div class=\"day-names__name\">{{ name }}</div>\n        }\n    </div>\n    <div class=\"days-of-the-month\">\n        @for (day of daysOfTheMonth(); track day.date + '' + day.outsideCurrentMonth) {\n            <!-- TODO: When we update to 18.1 we can use @let to make this cleaner -->\n            <button\n                type=\"button\"\n                class=\"button-override selectable-item\"\n                [class.selectable-item--dimmed]=\"day.outsideCurrentMonth\"\n                [class.selectable-item--today]=\"day.isToday\"\n                [class.selectable-item--selection]=\"day.selection !== 'none'\"\n                [class.selectable-item--selection-single]=\"day.selection === 'single'\"\n                [class.selectable-item--selection-start]=\"day.selection === 'start'\"\n                [class.selectable-item--selection-end]=\"day.selection === 'end'\"\n                [class.selectable-item--selection-middle]=\"day.selection === 'middle'\"\n                (click)=\"handleDayClick(day.date)\"\n                (mouseenter)=\"handleMouseEnterDay(day.date)\"\n                (mouseleave)=\"handleMouseLeaveDay()\"\n            >\n                {{ day.date.getDate() }}\n            </button>\n        }\n    </div>\n    @if (showHours()) {\n        <div class=\"hours-body\">\n            @for (hour of hoursOfTheDay(); track hour.hour) {\n                <button\n                    class=\"hour button-override selectable-item\"\n                    [class.selectable-item--disabled]=\"hoursDisabled()\"\n                    [class.selectable-item--selection]=\"hour.selection !== 'none'\"\n                    [class.selectable-item--selection-single]=\"hour.selection === 'single'\"\n                    [class.selectable-item--selection-start]=\"hour.selection === 'start'\"\n                    [class.selectable-item--selection-end]=\"hour.selection === 'end'\"\n                    [class.selectable-item--selection-middle]=\"hour.selection === 'middle'\"\n                    (click)=\"handleHourClick(hour)\"\n                    (mouseenter)=\"handleMouseEnterHour(hour)\"\n                    (mouseleave)=\"handleMouseLeaveHour()\"\n                >\n                    {{ hour.display }}\n                </button>\n            }\n        </div>\n    }\n    <button\n        class=\"done-button\"\n        (click)=\"handleDoneClick()\"\n        nx-button\n        variant=\"brand\"\n        size=\"large\"\n    >\n        Done\n    </button>\n} @else if (currentView() === 'months') {\n    <div class=\"months-body\">\n        @for (month of allMonths; track month) {\n            <button\n                class=\"months-body__month button-override\"\n                (click)=\"handleMonthClick($index)\"\n            >\n                {{ month }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{padding:12px 16px 16px;display:flex;flex-direction:column;background:var(--nxc-dark6-offset, var(--nxc-dark6));height:365px;box-sizing:border-box}:host.with-hour-selector{height:517px}:host .carousel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nxc-dark7-offset, var(--nxc-dark7));padding-bottom:10px;box-sizing:border-box}:host .carousel-header__button{background:none;border:none;color:var(--nxc-light10-offset, var(--nxc-light10));display:flex;align-content:center;flex-wrap:wrap;height:100%}:host .carousel-header__button:hover{cursor:pointer;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .carousel-header__button nx-icon{height:20px;width:20px}:host .carousel-header__current-date{color:var(--nxc-light10-offset, var(--nxc-light10));font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);text-align:center;cursor:pointer;padding:5px 10px;margin:-5px 0}:host .carousel-header__current-date:hover{cursor:pointer;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .day-names{display:grid;grid-template-columns:repeat(7,1fr);padding:2px 0;border-bottom:1px solid var(--nxc-dark7-offset, var(--nxc-dark7))}:host .day-names__name{color:var(--nxc-light15-offset, var(--nxc-light15));text-align:center;height:24px;align-content:center;font-size:10px;line-height:13px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);letter-spacing:.3px;text-transform:uppercase}:host .button-override{cursor:pointer;background:unset;border:unset}:host .selectable-item{border-radius:4px;color:var(--nxc-light10-offset, var(--nxc-light10));font-size:12px;line-height:15.6px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);text-align:center;align-content:center}:host .selectable-item--selection{color:var(--nxc-light4-offset, var(--nxc-light4));background:var(--nxc-dark9-offset, var(--nxc-dark9))}:host .selectable-item--selection-start{border-radius:4px 0 0 4px}:host .selectable-item--selection-end{border-radius:0 4px 4px 0}:host .selectable-item--selection-middle{background:var(--nxc-dark7-offset, var(--nxc-dark7));border-radius:0}:host .selectable-item--dimmed{color:var(--nxc-dark14-offset, var(--nxc-dark14))}:host .selectable-item--dimmed.day--selection{color:var(--nxc-light14-offset, var(--nxc-light14))}:host .selectable-item:hover,:host .selectable-item:focus-visible{background:var(--nxc-dark8-offset, var(--nxc-dark8))}:host .selectable-item:hover:not(:host .selectable-item:hover--today,:host .selectable-item:focus-visible--today),:host .selectable-item:focus-visible:not(:host .selectable-item:hover--today,:host .selectable-item:focus-visible--today){color:var(--nxc-light10-offset, var(--nxc-light10))}:host .selectable-item--today{color:var(--nxc-brand)}:host .selectable-item--disabled{opacity:.3;cursor:default}:host .days-of-the-month{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:2px 0px;padding:8px 0;height:100%}:host .hours-body{display:grid;grid-template-columns:repeat(6,1fr);gap:2px 0px;padding:8px 0;height:100%;border-top:solid 2px var(--nxc-dark7-offset, var(--nxc-dark7));height:auto}:host .hours-body .hour{height:32px}:host .months-body{display:grid;grid-template-columns:repeat(3,1fr);padding-top:8px;height:100%}:host .months-body__month{border-radius:6px;color:var(--nxc-light10-offset, var(--nxc-light10));font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);text-align:center;align-content:center}:host .months-body__month:hover,:host .months-body__month:focus-visible{color:var(--nxc-light10-offset, var(--nxc-light10));background:var(--nxc-dark8-offset, var(--nxc-dark8))}:host .months-body__month:active{color:var(--nxc-light4-offset, var(--nxc-light4));background:var(--nxc-dark9-offset, var(--nxc-dark9))}:host .done-button{padding-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }, { kind: "component", type: NxButtonComponent, selector: "button[nx-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxCalendarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-calendar', imports: [CommonModule, NxIconComponent, NxButtonComponent], host: {
                        '[class.with-hour-selector]': 'showHours()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxCalendarComponent),
                            multi: true,
                        },
                    ], template: "<div class=\"carousel-header\">\n    <button\n        class=\"carousel-header__button\"\n        (click)=\"handleArrowClick(-1)\"\n    >\n        <nx-icon\n            icon=\"ArrowLeft20X20\"\n            preserveSize\n            useCurrentColor\n        ></nx-icon>\n    </button>\n    <div\n        class=\"carousel-header__current-date\"\n        (click)=\"handleHeaderClick()\"\n    >\n        {{ carouselHeading() }}\n    </div>\n    <button\n        class=\"carousel-header__button\"\n        (click)=\"handleArrowClick(1)\"\n    >\n        <nx-icon\n            icon=\"ArrowRight20X20Variant1\"\n            preserveSize\n            useCurrentColor\n        ></nx-icon>\n    </button>\n</div>\n@if (currentView() === 'days') {\n    <div class=\"day-names\">\n        @for (name of daysOfTheWeekNames; track name) {\n            <div class=\"day-names__name\">{{ name }}</div>\n        }\n    </div>\n    <div class=\"days-of-the-month\">\n        @for (day of daysOfTheMonth(); track day.date + '' + day.outsideCurrentMonth) {\n            <!-- TODO: When we update to 18.1 we can use @let to make this cleaner -->\n            <button\n                type=\"button\"\n                class=\"button-override selectable-item\"\n                [class.selectable-item--dimmed]=\"day.outsideCurrentMonth\"\n                [class.selectable-item--today]=\"day.isToday\"\n                [class.selectable-item--selection]=\"day.selection !== 'none'\"\n                [class.selectable-item--selection-single]=\"day.selection === 'single'\"\n                [class.selectable-item--selection-start]=\"day.selection === 'start'\"\n                [class.selectable-item--selection-end]=\"day.selection === 'end'\"\n                [class.selectable-item--selection-middle]=\"day.selection === 'middle'\"\n                (click)=\"handleDayClick(day.date)\"\n                (mouseenter)=\"handleMouseEnterDay(day.date)\"\n                (mouseleave)=\"handleMouseLeaveDay()\"\n            >\n                {{ day.date.getDate() }}\n            </button>\n        }\n    </div>\n    @if (showHours()) {\n        <div class=\"hours-body\">\n            @for (hour of hoursOfTheDay(); track hour.hour) {\n                <button\n                    class=\"hour button-override selectable-item\"\n                    [class.selectable-item--disabled]=\"hoursDisabled()\"\n                    [class.selectable-item--selection]=\"hour.selection !== 'none'\"\n                    [class.selectable-item--selection-single]=\"hour.selection === 'single'\"\n                    [class.selectable-item--selection-start]=\"hour.selection === 'start'\"\n                    [class.selectable-item--selection-end]=\"hour.selection === 'end'\"\n                    [class.selectable-item--selection-middle]=\"hour.selection === 'middle'\"\n                    (click)=\"handleHourClick(hour)\"\n                    (mouseenter)=\"handleMouseEnterHour(hour)\"\n                    (mouseleave)=\"handleMouseLeaveHour()\"\n                >\n                    {{ hour.display }}\n                </button>\n            }\n        </div>\n    }\n    <button\n        class=\"done-button\"\n        (click)=\"handleDoneClick()\"\n        nx-button\n        variant=\"brand\"\n        size=\"large\"\n    >\n        Done\n    </button>\n} @else if (currentView() === 'months') {\n    <div class=\"months-body\">\n        @for (month of allMonths; track month) {\n            <button\n                class=\"months-body__month button-override\"\n                (click)=\"handleMonthClick($index)\"\n            >\n                {{ month }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{padding:12px 16px 16px;display:flex;flex-direction:column;background:var(--nxc-dark6-offset, var(--nxc-dark6));height:365px;box-sizing:border-box}:host.with-hour-selector{height:517px}:host .carousel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nxc-dark7-offset, var(--nxc-dark7));padding-bottom:10px;box-sizing:border-box}:host .carousel-header__button{background:none;border:none;color:var(--nxc-light10-offset, var(--nxc-light10));display:flex;align-content:center;flex-wrap:wrap;height:100%}:host .carousel-header__button:hover{cursor:pointer;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .carousel-header__button nx-icon{height:20px;width:20px}:host .carousel-header__current-date{color:var(--nxc-light10-offset, var(--nxc-light10));font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);text-align:center;cursor:pointer;padding:5px 10px;margin:-5px 0}:host .carousel-header__current-date:hover{cursor:pointer;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .day-names{display:grid;grid-template-columns:repeat(7,1fr);padding:2px 0;border-bottom:1px solid var(--nxc-dark7-offset, var(--nxc-dark7))}:host .day-names__name{color:var(--nxc-light15-offset, var(--nxc-light15));text-align:center;height:24px;align-content:center;font-size:10px;line-height:13px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);letter-spacing:.3px;text-transform:uppercase}:host .button-override{cursor:pointer;background:unset;border:unset}:host .selectable-item{border-radius:4px;color:var(--nxc-light10-offset, var(--nxc-light10));font-size:12px;line-height:15.6px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);text-align:center;align-content:center}:host .selectable-item--selection{color:var(--nxc-light4-offset, var(--nxc-light4));background:var(--nxc-dark9-offset, var(--nxc-dark9))}:host .selectable-item--selection-start{border-radius:4px 0 0 4px}:host .selectable-item--selection-end{border-radius:0 4px 4px 0}:host .selectable-item--selection-middle{background:var(--nxc-dark7-offset, var(--nxc-dark7));border-radius:0}:host .selectable-item--dimmed{color:var(--nxc-dark14-offset, var(--nxc-dark14))}:host .selectable-item--dimmed.day--selection{color:var(--nxc-light14-offset, var(--nxc-light14))}:host .selectable-item:hover,:host .selectable-item:focus-visible{background:var(--nxc-dark8-offset, var(--nxc-dark8))}:host .selectable-item:hover:not(:host .selectable-item:hover--today,:host .selectable-item:focus-visible--today),:host .selectable-item:focus-visible:not(:host .selectable-item:hover--today,:host .selectable-item:focus-visible--today){color:var(--nxc-light10-offset, var(--nxc-light10))}:host .selectable-item--today{color:var(--nxc-brand)}:host .selectable-item--disabled{opacity:.3;cursor:default}:host .days-of-the-month{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:2px 0px;padding:8px 0;height:100%}:host .hours-body{display:grid;grid-template-columns:repeat(6,1fr);gap:2px 0px;padding:8px 0;height:100%;border-top:solid 2px var(--nxc-dark7-offset, var(--nxc-dark7));height:auto}:host .hours-body .hour{height:32px}:host .months-body{display:grid;grid-template-columns:repeat(3,1fr);padding-top:8px;height:100%}:host .months-body__month{border-radius:6px;color:var(--nxc-light10-offset, var(--nxc-light10));font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);text-align:center;align-content:center}:host .months-body__month:hover,:host .months-body__month:focus-visible{color:var(--nxc-light10-offset, var(--nxc-light10));background:var(--nxc-dark8-offset, var(--nxc-dark8))}:host .months-body__month:active{color:var(--nxc-light4-offset, var(--nxc-light4));background:var(--nxc-dark9-offset, var(--nxc-dark9))}:host .done-button{padding-top:8px}\n"] }]
        }] });

const NX_NOTIFICATIONS_DEFAULT_DURATION_MS = new InjectionToken('Default duration in ms for notifications');
const NX_NOTIFICATIONS_DEFAULT_TYPE = new InjectionToken('Default type for notifications');

/** Notification component.
 *
 * Made for use inside NxNotificationsComponent, but can be used outside.
 */
class NxNotificationComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.host = inject(ElementRef);
        // eslint-disable-next-line @angular-eslint/no-output-rename
        this._closeOutput = output({ alias: 'close' });
        this.DEFAULT_DURATION = inject(NX_NOTIFICATIONS_DEFAULT_DURATION_MS, { optional: true }) ?? 7000;
        this.DEFAULT_TYPE = inject(NX_NOTIFICATIONS_DEFAULT_TYPE, { optional: true }) ?? 'info';
        this._ref = input.required({ alias: 'notification' });
        this.id = computed(() => this._ref().id);
        this.content = computed(() => this._ref().content);
        this.config = computed(() => this._ref().config);
        this.type = computed(() => this.config()?.type ?? this.DEFAULT_TYPE);
        this.href = computed(() => {
            const { details } = this.config();
            return details && 'href' in details ? details : null;
        });
        this.routerLink = computed(() => {
            const { details } = this.config();
            return details && 'routerLink' in details ? details : null;
        });
        this.duration = computed(() => this.config()?.duration ?? this.DEFAULT_DURATION);
        this.durationVar = computed(() => `${this.duration()}ms`);
        this._timeout = toObservable(this.duration)
            .pipe(take(1), switchMap(duration => (duration ? timer(duration) : NEVER)), takeUntilDestroyed())
            .subscribe(() => {
            this.close();
        });
        this.icon = computed(() => {
            return `${capitalize(this.type())}16X16`;
        });
        this.variableColors = signal({
            'warning-yellow': generateCssVariableName('attentionWarningYellow'),
            'error-red': generateCssVariableName('attentionErrorRed'),
            'bar-bg': generateCssVariableName('core', 'dark9'),
            'bar-highlight-bg': generateCssVariableName('core', 'dark15', 12),
        });
        this.close = () => {
            this._closeOutput.emit(this.id());
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxNotificationComponent, isStandalone: true, selector: "nx-notification", inputs: { _ref: { classPropertyName: "_ref", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { _closeOutput: "close" }, host: { properties: { "style.--bar-animation-duration": "durationVar()" } }, usesInheritance: true, ngImport: i0, template: "<button\n    data-testid=\"nx-notification__close-button\"\n    nx-button\n    variant=\"text\"\n    class=\"close-notification\"\n    (click)=\"close()\"\n>\n    <nx-icon\n        useCurrentColor\n        icon=\"CloseMedium\"\n    ></nx-icon>\n</button>\n<div class=\"icon-container\">\n    <nx-icon [icon]=\"icon()\"></nx-icon>\n</div>\n<div class=\"content\">\n    <p\n        class=\"content__text\"\n        [ngClass]=\"'content__text--' + type()\"\n    >\n        {{ content() }}\n    </p>\n    @if (config().details; as details) {\n        @if (href(); as href) {\n            <a\n                class=\"content__details\"\n                [href]=\"href.href\"\n                [target]=\"href.target\"\n            >\n                {{ details.label }}\n            </a>\n        }\n        @if (routerLink(); as link) {\n            <a\n                class=\"content__details\"\n                [routerLink]=\"link.routerLink\"\n                [target]=\"link.target\"\n                [queryParams]=\"link.queryParams\"\n                [fragment]=\"link.fragment\"\n                [queryParamsHandling]=\"link.queryParamsHandling\"\n                [state]=\"link.state\"\n                [info]=\"link.info\"\n                [relativeTo]=\"link.relativeTo\"\n                [preserveFragment]=\"link.preserveFragment\"\n                [skipLocationChange]=\"link.skipLocationChange\"\n                [replaceUrl]=\"link.replaceUrl\"\n            >\n                {{ details.label }}\n            </a>\n        }\n    }\n    @if (config().primaryAction || config().secondaryAction) {\n        <div class=\"content__actions\">\n            @if (config().primaryAction; as primary) {\n                <button\n                    nx-button\n                    variant=\"brand\"\n                    (click)=\"primary.action(close)\"\n                >\n                    {{ primary.label }}\n                </button>\n            }\n            @if (config().secondaryAction; as secondary) {\n                <button\n                    nx-button\n                    variant=\"outline\"\n                    (click)=\"secondary.action(close)\"\n                >\n                    {{ secondary.label }}\n                </button>\n            }\n        </div>\n    }\n</div>\n@if (duration()) {\n    <div class=\"timer-bar\">\n        <div class=\"timer-bar__highlight\"></div>\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{position:relative;background-color:var(--nxc-dark6-offset, var(--nxc-dark6));border:1px solid var(--nxc-dark9-offset, var(--nxc-dark9));padding:1.25rem;border-radius:6px;overflow:hidden;display:inline-flex;gap:.75rem}:host .close-notification{position:absolute;top:.75rem;right:.75rem;height:1.25rem;width:1.25rem;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .close-notification[nx-button]{padding:0}:host .close-notification nx-icon{height:1rem;width:1rem}:host .icon-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}:host .icon-container nx-icon{height:1.5rem;width:1.5rem}:host .content{width:13.75rem;padding-right:1rem}:host .content__text{margin:0;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-light4-offset, var(--nxc-light4));word-wrap:break-word}:host .content__text--attention{color:var(--nxc-attention-yellow)}:host .content__text--error{color:var(--nxc-attention-red)}:host .content__details{outline:none;border:none;border-radius:0;color:inherit;padding:0;background-color:transparent;text-decoration:underline;cursor:pointer;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-light4-offset, var(--nxc-light4));margin-top:.5rem}:host .content__details:hover,:host .content__details:focus-visible{text-decoration:none}:host .content__actions{margin-top:.75rem;display:flex;gap:.5rem}:host .timer-bar{position:absolute;bottom:0;left:0;right:0;height:.25rem;background-color:var(--bar-bg)}:host .timer-bar__highlight{height:100%;width:100%;background-color:var(--bar-highlight-bg);animation-duration:var(--bar-animation-duration);animation-name:bar-animation;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:center left}@keyframes bar-animation{0%{scale:1 1}to{scale:0 1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }, { kind: "component", type: NxButtonComponent, selector: "button[nx-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-notification', imports: [CommonModule, RouterModule, NxIconComponent, NxButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[style.--bar-animation-duration]': 'durationVar()',
                    }, template: "<button\n    data-testid=\"nx-notification__close-button\"\n    nx-button\n    variant=\"text\"\n    class=\"close-notification\"\n    (click)=\"close()\"\n>\n    <nx-icon\n        useCurrentColor\n        icon=\"CloseMedium\"\n    ></nx-icon>\n</button>\n<div class=\"icon-container\">\n    <nx-icon [icon]=\"icon()\"></nx-icon>\n</div>\n<div class=\"content\">\n    <p\n        class=\"content__text\"\n        [ngClass]=\"'content__text--' + type()\"\n    >\n        {{ content() }}\n    </p>\n    @if (config().details; as details) {\n        @if (href(); as href) {\n            <a\n                class=\"content__details\"\n                [href]=\"href.href\"\n                [target]=\"href.target\"\n            >\n                {{ details.label }}\n            </a>\n        }\n        @if (routerLink(); as link) {\n            <a\n                class=\"content__details\"\n                [routerLink]=\"link.routerLink\"\n                [target]=\"link.target\"\n                [queryParams]=\"link.queryParams\"\n                [fragment]=\"link.fragment\"\n                [queryParamsHandling]=\"link.queryParamsHandling\"\n                [state]=\"link.state\"\n                [info]=\"link.info\"\n                [relativeTo]=\"link.relativeTo\"\n                [preserveFragment]=\"link.preserveFragment\"\n                [skipLocationChange]=\"link.skipLocationChange\"\n                [replaceUrl]=\"link.replaceUrl\"\n            >\n                {{ details.label }}\n            </a>\n        }\n    }\n    @if (config().primaryAction || config().secondaryAction) {\n        <div class=\"content__actions\">\n            @if (config().primaryAction; as primary) {\n                <button\n                    nx-button\n                    variant=\"brand\"\n                    (click)=\"primary.action(close)\"\n                >\n                    {{ primary.label }}\n                </button>\n            }\n            @if (config().secondaryAction; as secondary) {\n                <button\n                    nx-button\n                    variant=\"outline\"\n                    (click)=\"secondary.action(close)\"\n                >\n                    {{ secondary.label }}\n                </button>\n            }\n        </div>\n    }\n</div>\n@if (duration()) {\n    <div class=\"timer-bar\">\n        <div class=\"timer-bar__highlight\"></div>\n    </div>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{position:relative;background-color:var(--nxc-dark6-offset, var(--nxc-dark6));border:1px solid var(--nxc-dark9-offset, var(--nxc-dark9));padding:1.25rem;border-radius:6px;overflow:hidden;display:inline-flex;gap:.75rem}:host .close-notification{position:absolute;top:.75rem;right:.75rem;height:1.25rem;width:1.25rem;color:var(--nxc-light4-offset, var(--nxc-light4))}:host .close-notification[nx-button]{padding:0}:host .close-notification nx-icon{height:1rem;width:1rem}:host .icon-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}:host .icon-container nx-icon{height:1.5rem;width:1.5rem}:host .content{width:13.75rem;padding-right:1rem}:host .content__text{margin:0;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-light4-offset, var(--nxc-light4));word-wrap:break-word}:host .content__text--attention{color:var(--nxc-attention-yellow)}:host .content__text--error{color:var(--nxc-attention-red)}:host .content__details{outline:none;border:none;border-radius:0;color:inherit;padding:0;background-color:transparent;text-decoration:underline;cursor:pointer;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-light4-offset, var(--nxc-light4));margin-top:.5rem}:host .content__details:hover,:host .content__details:focus-visible{text-decoration:none}:host .content__actions{margin-top:.75rem;display:flex;gap:.5rem}:host .timer-bar{position:absolute;bottom:0;left:0;right:0;height:.25rem;background-color:var(--bar-bg)}:host .timer-bar__highlight{height:100%;width:100%;background-color:var(--bar-highlight-bg);animation-duration:var(--bar-animation-duration);animation-name:bar-animation;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:center left}@keyframes bar-animation{0%{scale:1 1}to{scale:0 1}}\n"] }]
        }] });

/** Service for opening and closing notifications in `NxNotificationsComponent` */
class NxNotificationsService {
    constructor() {
        this._componentInstance = signal(null);
        this._notifications = signal([]);
        this._openError$ = new Subject();
        this._afterOpened$ = new Subject();
        this._closeError$ = new Subject();
        this._afterClosed$ = new Subject();
        this._open$ = new Subject();
        this._close$ = new Subject();
        /** For NxNotificationsComponent write access only */
        this.__internal = {
            instance: this._componentInstance,
            notifications: this._notifications,
            openError$: this._openError$,
            afterOpened$: this._afterOpened$,
            closeError$: this._closeError$,
            afterClosed$: this._afterClosed$,
            open$: this._open$,
            close$: this._close$,
        };
        /** Existing notifications */
        this.notifications = this._notifications.asReadonly();
        /** Emits after a notifications is opened */
        this.afterOpened$ = this._afterOpened$.asObservable();
        /** Emits after a notification is closed */
        this.afterClosed$ = this._afterClosed$.asObservable();
        /** Allow two cycles and some extra headroom */
        this.REPLAY_CLEANUP_DELAY_MS = parseFloat(NX_NOTIFICATIONS_ANIMATION_DURATION) * 1000 * 2.5;
    }
    /** Open a new notification.
     *
     * - Errors in method if NxNotificationsComponent not found
     * - Errors in return observable if notification with same id already exists or is already opening
     */
    open(content, config = {}) {
        if (!this._componentInstance()) {
            throw Error('NxNotificationsComponent not found');
        }
        const { id = crypto.randomUUID(), ...rest } = config;
        const ref = {
            id,
            content,
            config: rest,
        };
        const afterOpen$ = this._afterOpened$.pipe(filter(r => r === ref), shareReplay({ bufferSize: 1, refCount: true }));
        const openError$ = this._openError$.pipe(filter(err => err.ref === ref), shareReplay({ bufferSize: 1, refCount: true }));
        // Initial subscription to start recieving
        const afterOpenSubscription = afterOpen$.subscribe();
        const openErrorSubscription = openError$.subscribe();
        const replayCleanup = setTimeout(() => {
            if (!afterOpenSubscription.closed) {
                afterOpenSubscription.unsubscribe();
            }
            if (!openErrorSubscription.closed) {
                openErrorSubscription.unsubscribe();
            }
        }, this.REPLAY_CLEANUP_DELAY_MS);
        this._open$.next(ref);
        return merge(afterOpen$, openError$).pipe(take(1), tap(() => {
            // Reduce refCounts to zero to clean up replays
            afterOpenSubscription.unsubscribe();
            openErrorSubscription.unsubscribe();
            clearTimeout(replayCleanup);
        }), switchMap(value => ('error' in value ? throwError(() => value.error) : of(value))));
    }
    /** Close an existing notification.
     *
     * - Errors in method if NxNotificationsComponent not found
     * - Stops notification from opening if queued
     * - Has no effect if notification is already closing
     * - Errors in return observable if no notification with matching id is found
     */
    close(id) {
        if (!this._componentInstance()) {
            throw Error('NxNotificationsComponent not found');
        }
        const afterClose$ = this._afterClosed$.pipe(filter(id_ => id_ === id), shareReplay({ bufferSize: 1, refCount: true }));
        const closeError$ = this._closeError$.pipe(filter(err => err.id === id), shareReplay({ bufferSize: 1, refCount: true }));
        const afterCloseSubscription = afterClose$.subscribe();
        const closeErrorSubscription = closeError$.subscribe();
        const replayCleanup = setTimeout(() => {
            if (!afterCloseSubscription.closed) {
                afterCloseSubscription.unsubscribe();
            }
            if (!closeErrorSubscription.closed) {
                closeErrorSubscription.unsubscribe();
            }
        }, this.REPLAY_CLEANUP_DELAY_MS);
        this._close$.next(id);
        return merge(afterClose$, closeError$).pipe(take(1), tap(() => {
            afterCloseSubscription.unsubscribe();
            closeErrorSubscription.unsubscribe();
            clearTimeout(replayCleanup);
        }), switchMap(value => typeof value === 'object' ? throwError(() => value.error) : of(value)));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationsService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/* The strategy for enter/exit animations:
   1. Calculate the states elements will be in after insertion/removal
   2. Transition the elements to those states
   3. Simultaneously do the actual DOM modification and removal of transition states
   4. If there are notifications in queue, run again
*/
var TransitionStates;
(function (TransitionStates) {
    TransitionStates[TransitionStates["Idle"] = 0] = "Idle";
    TransitionStates[TransitionStates["Calculating"] = 1] = "Calculating";
    TransitionStates[TransitionStates["Animating"] = 2] = "Animating";
    TransitionStates[TransitionStates["Swapping"] = 3] = "Swapping";
    TransitionStates[TransitionStates["Cycling"] = 4] = "Cycling";
})(TransitionStates || (TransitionStates = {}));
const NX_NOTIFICATIONS_ANIMATION_DURATION = '0.5s';
/** Container component that manages notifications for the application */
class NxNotificationsComponent extends BaseComponent {
    constructor() {
        super();
        this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
        this.animationDuration = NX_NOTIFICATIONS_ANIMATION_DURATION;
        this.padding = this.rem;
        this.gap = 0.5 * this.rem;
        this.notificationsService = inject(NxNotificationsService);
        this.notifications = this.notificationsService.__internal.notifications;
        this.TransitionStates = TransitionStates;
        this.openQueue = [];
        this._openSubscription = this.notificationsService.__internal.open$
            .pipe(takeUntilDestroyed())
            .subscribe(ref => {
            if (this.notifications().find(n => n.id === ref.id) ||
                this.openQueue.find(n => n.id === ref.id) ||
                this.openingNotifications().find(n => n.id === ref.id)) {
                this.notificationsService.__internal.openError$.next({
                    ref,
                    error: 'Notification with id already exists',
                });
                return;
            }
            if (this.openingState() === TransitionStates.Idle) {
                this.openingNotifications.set([ref]);
                this.openingState.set(TransitionStates.Calculating);
            }
            else {
                this.openQueue.push(ref);
            }
        });
        this.openingNotifications = signal([]);
        this.openingIds = computed(() => new Set(this.openingNotifications().map(o => o.id)));
        this.afterOpen = [];
        this.enterContainer = viewChild.required('notificationEnterContainer');
        this.containerObserver = new ResizeObserver(([container]) => {
            const [borderBoxSize] = container.contentBoxSize;
            this.containerHeight.set(borderBoxSize.blockSize);
        });
        this.containerHeight = signal(0);
        this._containerHeightEffect = effect(() => {
            this.containerObserver.observe(this.enterContainer().nativeElement);
        });
        this.enterTranslation = computed(() => {
            const containerHeight = this.containerHeight();
            return containerHeight ? containerHeight + this.gap + this.padding : 0;
        });
        this.openingState = signal(TransitionStates.Idle);
        this._openStateEffect = effect(() => {
            switch (this.openingState()) {
                case TransitionStates.Idle:
                    break;
                case TransitionStates.Calculating: {
                    /* Notifications being opened are invisible while a copy set
                        enters the screen from above and shifts existing notifications down  */
                    if (this.enterTranslation()) {
                        this.notifications.update((n) => {
                            return this.openingNotifications().slice().reverse().concat(n);
                        });
                        this.openingState.set(TransitionStates.Animating);
                    }
                    break;
                }
                case TransitionStates.Animating:
                    // Advanced on transition end
                    break;
                case TransitionStates.Swapping: {
                    if (!this.enterTranslation()) {
                        this.openingState.set(TransitionStates.Cycling);
                    }
                    break;
                }
                case TransitionStates.Cycling: {
                    this.afterOpen.forEach(n => {
                        this.notificationsService.__internal.afterOpened$.next(n);
                    });
                    this.afterOpen = [];
                    if (this.openQueue.length) {
                        const queue = this.openQueue.slice();
                        this.openQueue = [];
                        this.openingNotifications.set(queue);
                        this.openingState.set(TransitionStates.Calculating);
                    }
                    else {
                        this.openingState.set(TransitionStates.Idle);
                    }
                    break;
                }
            }
        });
        this.close$ = new Subject();
        this.closeQueue = [];
        this._closeSubscription = merge(this.close$, this.notificationsService.__internal.close$)
            .pipe(takeUntilDestroyed())
            .subscribe(id => {
            if (this.openQueue.find(n => n.id === id)) {
                this.openQueue = this.openQueue.filter(ref => ref.id !== id);
                return;
            }
            if (this.openingNotifications().find(n => n.id === id)) {
                this.notificationsService.__internal.afterOpened$
                    .pipe(filter(ref => ref.id === id), take(1))
                    .subscribe(ref => {
                    this.close$.next(ref.id);
                });
                return;
            }
            if (this.closingIds().has(id) || this.closeQueue.includes(id)) {
                return;
            }
            if (!this.notifications().find(n => n.id === id)) {
                this.notificationsService.__internal.closeError$.next({
                    id,
                    error: 'No notification with id found',
                });
                return;
            }
            if (this.closingState() === TransitionStates.Idle) {
                this.closingNotifications.set([id]);
                this.closingState.set(TransitionStates.Calculating);
            }
            else {
                this.closeQueue.push(id);
            }
        });
        this.closingNotifications = signal([]);
        this.closingIds = computed(() => new Set(this.closingNotifications()));
        this.afterClose = [];
        this.notificationComponents = viewChildren(NxNotificationComponent);
        this.topShifts = signal(new Map());
        this.closingState = signal(TransitionStates.Idle);
        this._closeStateEffect = effect(() => {
            switch (this.closingState()) {
                case TransitionStates.Idle:
                    break;
                case TransitionStates.Calculating: {
                    /* Notifications being closed are faded out,
                        and notifications under those are shifted up */
                    const [components, closingIds] = [this.notificationComponents(), this.closingIds()];
                    let topShift = 0;
                    const topShifts = new Map();
                    components.forEach(c => {
                        const id = c.id();
                        if (closingIds.has(id)) {
                            topShift -= c.host.nativeElement.offsetHeight + this.gap;
                            topShifts.set(id, 0);
                        }
                        else {
                            topShifts.set(id, topShift);
                        }
                    });
                    this.topShifts.set(topShifts);
                    this.closingState.set(TransitionStates.Animating);
                    break;
                }
                case TransitionStates.Animating:
                    // Advanced on transition end
                    break;
                case TransitionStates.Swapping: {
                    if (!this.topShifts().size) {
                        this.closingState.set(TransitionStates.Cycling);
                    }
                    break;
                }
                case TransitionStates.Cycling: {
                    this.afterClose.forEach(n => {
                        this.notificationsService.__internal.afterClosed$.next(n);
                    });
                    this.afterClose = [];
                    if (this.closeQueue.length) {
                        const queue = this.closeQueue.slice();
                        this.closeQueue = [];
                        // Extra cycle for animation states to reset
                        setTimeout(() => {
                            this.closingNotifications.set(queue);
                            this.closingState.set(TransitionStates.Calculating);
                        });
                    }
                    else {
                        this.closingState.set(TransitionStates.Idle);
                    }
                    break;
                }
            }
        });
        if (this.notificationsService.__internal.instance()) {
            throw Error('Only one instance of NxNotificationsComponent allowed');
        }
        else {
            this.notificationsService.__internal.instance.set(this);
        }
    }
    ngOnDestroy() {
        this.notificationsService.__internal.instance.set(null);
    }
    enterTransitionEnd() {
        this.afterOpen = this.openingNotifications().slice();
        this.openingNotifications.set([]);
        this.openingState.set(TransitionStates.Swapping);
    }
    closeTransitionEnd(event) {
        if (event.propertyName === 'opacity' &&
            this.closingState() === TransitionStates.Animating) {
            this.notifications.update((notifications) => notifications.filter(n => !this.closingIds().has(n.id)));
            this.afterClose = this.closingNotifications().slice();
            this.closingNotifications.set([]);
            this.topShifts.set(new Map());
            this.closingState.set(TransitionStates.Swapping);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxNotificationsComponent, isStandalone: true, selector: "nx-notifications", host: { properties: { "style.--padding": "padding", "style.--gap": "gap", "style.--animation-duration": "animationDuration", "style.transition": "openingState() === TransitionStates.Animating ? \"padding var(--animation-duration) ease-out\" : undefined", "style.padding-top.px": "openingState() === TransitionStates.Animating ? enterTranslation(): undefined" } }, viewQueries: [{ propertyName: "enterContainer", first: true, predicate: ["notificationEnterContainer"], descendants: true, isSignal: true }, { propertyName: "notificationComponents", predicate: NxNotificationComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #notificationEnterContainer\n    class=\"notification-enter-container\"\n    [ngStyle]=\"{\n        transition:\n            openingState() === TransitionStates.Animating\n                ? 'translate var(--animation-duration) ease-out'\n                : undefined,\n        translate: openingState() === TransitionStates.Animating ? '0 0' : '0 -100%',\n    }\"\n    (transitionend)=\"enterTransitionEnd()\"\n>\n    @for (notification of openingNotifications(); track notification.id) {\n        <nx-notification\n            data-testid=\"nx-notification--copy\"\n            [notification]=\"notification\"\n        ></nx-notification>\n        <!-- Don't allow closing until opened -->\n    }\n</div>\n@for (notification of notifications(); track notification.id) {\n    <nx-notification\n        data-testid=\"nx-notification--real\"\n        (close)=\"close$.next($event)\"\n        (transitionend)=\"closeTransitionEnd($event)\"\n        [notification]=\"notification\"\n        [class.exiting]=\"\n            closingState() === TransitionStates.Animating && closingIds().has(notification.id)\n        \"\n        [class.shifting]=\"\n            closingState() === TransitionStates.Animating && topShifts().get(notification.id)\n        \"\n        [ngStyle]=\"{\n            position: !openingIds().has(notification.id) ? 'relative' : 'absolute',\n            visibility: !openingIds().has(notification.id) ? undefined : 'hidden',\n            'top.px':\n                closingState() === TransitionStates.Animating\n                    ? (topShifts().get(notification.id) ?? 0)\n                    : 0,\n        }\"\n    ></nx-notification>\n}\n", styles: [":host{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:calc(var(--gap) * 1px);padding:calc(var(--padding) * 1px)}.notification-enter-container{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:calc(var(--gap) * 1px);padding:calc(var(--padding) * 1px);padding-bottom:0}nx-notification.exiting{transition:opacity var(--animation-duration) ease-out;opacity:0}nx-notification.shifting{transition:top var(--animation-duration) ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NxNotificationComponent, selector: "nx-notification", inputs: ["notification"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxNotificationsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-notifications', imports: [CommonModule, NxNotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[style.--padding]': 'padding',
                        '[style.--gap]': 'gap',
                        '[style.--animation-duration]': 'animationDuration',
                        '[style.transition]': 'openingState() === TransitionStates.Animating ? "padding var(--animation-duration) ease-out" : undefined',
                        '[style.padding-top.px]': 'openingState() === TransitionStates.Animating ? enterTranslation(): undefined',
                    }, template: "<div\n    #notificationEnterContainer\n    class=\"notification-enter-container\"\n    [ngStyle]=\"{\n        transition:\n            openingState() === TransitionStates.Animating\n                ? 'translate var(--animation-duration) ease-out'\n                : undefined,\n        translate: openingState() === TransitionStates.Animating ? '0 0' : '0 -100%',\n    }\"\n    (transitionend)=\"enterTransitionEnd()\"\n>\n    @for (notification of openingNotifications(); track notification.id) {\n        <nx-notification\n            data-testid=\"nx-notification--copy\"\n            [notification]=\"notification\"\n        ></nx-notification>\n        <!-- Don't allow closing until opened -->\n    }\n</div>\n@for (notification of notifications(); track notification.id) {\n    <nx-notification\n        data-testid=\"nx-notification--real\"\n        (close)=\"close$.next($event)\"\n        (transitionend)=\"closeTransitionEnd($event)\"\n        [notification]=\"notification\"\n        [class.exiting]=\"\n            closingState() === TransitionStates.Animating && closingIds().has(notification.id)\n        \"\n        [class.shifting]=\"\n            closingState() === TransitionStates.Animating && topShifts().get(notification.id)\n        \"\n        [ngStyle]=\"{\n            position: !openingIds().has(notification.id) ? 'relative' : 'absolute',\n            visibility: !openingIds().has(notification.id) ? undefined : 'hidden',\n            'top.px':\n                closingState() === TransitionStates.Animating\n                    ? (topShifts().get(notification.id) ?? 0)\n                    : 0,\n        }\"\n    ></nx-notification>\n}\n", styles: [":host{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:calc(var(--gap) * 1px);padding:calc(var(--padding) * 1px)}.notification-enter-container{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:calc(var(--gap) * 1px);padding:calc(var(--padding) * 1px);padding-bottom:0}nx-notification.exiting{transition:opacity var(--animation-duration) ease-out;opacity:0}nx-notification.shifting{transition:top var(--animation-duration) ease-in}\n"] }]
        }], ctorParameters: () => [] });

const NxSetFormStyleToken = new InjectionToken('');
function provideLegacyFormStyle() {
    return {
        provide: NxSetFormStyleToken,
        useValue: { useLegacyFormStyle: signal(true) },
    };
}
/** Applies cloud2/legacy styling to host component.
 *
 * For internal use with backwards compatible cloud 2.0 components.
 *
 * Checks upwards through injector heirarchy if legacy styling has been set,
 * otherwise defaults to cloud2 styling.
 */
// eslint-disable-next-line @angular-eslint/directive-selector
class __NxUseFormStyleDirective {
    constructor() {
        this.useLegacyFormStyle = signal(false).asReadonly();
        this._styleAttributeEffect = effect(() => {
            const useLegacyFormStyle = this.useLegacyFormStyle();
            const { nativeElement } = this.host;
            if (useLegacyFormStyle) {
                nativeElement.removeAttribute('nx-cloud2-form-style');
                nativeElement.setAttribute('nx-legacy-form-style', '');
            }
            else {
                nativeElement.removeAttribute('nx-legacy-form-style');
                nativeElement.setAttribute('nx-cloud2-form-style', '');
            }
        });
        this.host = inject(ElementRef);
        const setFormStyle = inject(NxSetFormStyleToken, { optional: true });
        if (setFormStyle) {
            this.useLegacyFormStyle = setFormStyle.useLegacyFormStyle;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: __NxUseFormStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: __NxUseFormStyleDirective, isStandalone: true, selector: "[__useFormStyle]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: __NxUseFormStyleDirective, decorators: [{
            type: Directive,
            args: [{ selector: '[__useFormStyle]', standalone: true }]
        }], ctorParameters: () => [] });

const NxControlMessagesToken = new InjectionToken('NxControlMessages');

const NxControlMessageToken = new InjectionToken('NxControlMessageComponent');

/** A message associated with a form field control. */
class NxControlMessageComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /** Identifier for the message.  */
        this.key = input.required();
        this.type = input('error');
        this.selected = computed(() => this.messagesContainer.state()?.key === this.key());
        this.host = inject(ElementRef);
        this.messagesContainer = inject(NxControlMessagesToken, {
            skipSelf: true,
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxControlMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxControlMessageComponent, isStandalone: true, selector: "nx-control-message", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nx-control-message--info": "type() === \"info\"", "class.nx-control-message--warn": "type() === \"warn\"", "class.nx-control-message--error": "type() === \"error\"" }, classAttribute: "nx-control-message" }, providers: [
            {
                provide: NxControlMessageToken,
                useExisting: forwardRef(() => NxControlMessageComponent),
            },
        ], usesInheritance: true, hostDirectives: [{ directive: i1$2.NxThemeAttributeDirective }, { directive: __NxUseFormStyleDirective }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host[nx-cloud2-form-style].nx-control-message--warn{color:var(--nxc-attention-yellow)}:host[nx-cloud2-form-style].nx-control-message--error{color:var(--nxc-attention-red)}:host[nx-legacy-form-style][data-theme=dark],[data-theme-override=dark]{--control-info-color: var(--light16)}:host[nx-legacy-form-style][data-theme=dark-gray],[data-theme-override=dark-gray]{--control-info-color: var(--light_gray_16)}:host[nx-legacy-form-style][data-theme=light-gray],[data-theme-override=light-gray]{--control-info-color: var(--light_gray_16)}:host[nx-legacy-form-style][data-theme=light],[data-theme-override=light]{--control-info-color: var(--light16)}:host[nx-legacy-form-style]{display:inline;font-family:var(--font-family-regular);font-size:var(--font-size-base);line-height:1.5}:host[nx-legacy-form-style].nx-control-message--info{color:var(--control-info-color)}:host[nx-legacy-form-style].nx-control-message--warn{color:var(--yellow-d1)}:host[nx-legacy-form-style].nx-control-message--error{color:var(--error-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxControlMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-control-message', imports: [CommonModule], providers: [
                        {
                            provide: NxControlMessageToken,
                            useExisting: forwardRef(() => NxControlMessageComponent),
                        },
                    ], host: {
                        class: 'nx-control-message',
                        '[class.nx-control-message--info]': 'type() === "info"',
                        '[class.nx-control-message--warn]': 'type() === "warn"',
                        '[class.nx-control-message--error]': 'type() === "error"',
                    }, hostDirectives: [NxThemeAttributeDirective, __NxUseFormStyleDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host[nx-cloud2-form-style].nx-control-message--warn{color:var(--nxc-attention-yellow)}:host[nx-cloud2-form-style].nx-control-message--error{color:var(--nxc-attention-red)}:host[nx-legacy-form-style][data-theme=dark],[data-theme-override=dark]{--control-info-color: var(--light16)}:host[nx-legacy-form-style][data-theme=dark-gray],[data-theme-override=dark-gray]{--control-info-color: var(--light_gray_16)}:host[nx-legacy-form-style][data-theme=light-gray],[data-theme-override=light-gray]{--control-info-color: var(--light_gray_16)}:host[nx-legacy-form-style][data-theme=light],[data-theme-override=light]{--control-info-color: var(--light16)}:host[nx-legacy-form-style]{display:inline;font-family:var(--font-family-regular);font-size:var(--font-size-base);line-height:1.5}:host[nx-legacy-form-style].nx-control-message--info{color:var(--control-info-color)}:host[nx-legacy-form-style].nx-control-message--warn{color:var(--yellow-d1)}:host[nx-legacy-form-style].nx-control-message--error{color:var(--error-label)}\n"] }]
        }] });

const NxFormFieldToken = new InjectionToken('NxFormField');

/** Container component to manage nx-control-message selection. */
class NxControlMessagesComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /** How many lines of space to preallocate.
         *
         * Should be the number of lines taken up by the tallest message. The
         * height of messages that don't require error data can be checked by
         * setting removing/overriding `overflow: hidden` on the host and
         * `visibility: hidden` on the sizing container in browser devtools.
         */
        this.spacingLines = input(1);
        /** For displaying text associated with select options */
        this.useValueState = input(false, { transform: booleanAttribute });
        /** Manual control of message selection.
         *
         * Like with errors, the key should match the `nx-control-message` key.
         */
        this.manualState = input(null, {
            alias: 'state',
            transform: s => (typeof s === 'string' ? { key: s } : s),
        });
        this.state = computed(() => this.manualState() ??
            this.nxFormField.errorState() ??
            (this.useValueState() ? this.nxFormField.valueState() : null));
        this.projectedMessages = signal([]);
        this.messages = computed(() => {
            const [projectedMessages] = [this.projectedMessages()];
            const messages = new Map();
            for (let i = 0; i < projectedMessages.length; i++) {
                const message = projectedMessages[i];
                messages.set(message.key(), message);
            }
            return messages;
        });
        this._selectedMessageEffect = effect(() => {
            const [messages, state] = [this.messages(), this.state()];
            const selectedMessage = untracked(this.selectedMessage);
            if (state) {
                const selected = messages.get(state.key);
                if (selected) {
                    if (selectedMessage && selectedMessage.element === selected.host.nativeElement) {
                        return;
                    }
                    if (selectedMessage?.isAttached) {
                        selectedMessage?.detach();
                    }
                    this.selectedMessage.set(new DomPortal(selected.host));
                    return;
                }
                else if (location.host.startsWith('localhost')) {
                    /* Potential pitfall: forgetting to add the message for an error */
                    console.warn('No message found for key', state.key);
                }
            }
            if (selectedMessage?.isAttached) {
                selectedMessage?.detach();
            }
            this.selectedMessage.set(undefined);
        });
        this.selectedMessage = signal(undefined);
        this.nxFormField = inject(NxFormFieldToken, { skipSelf: true });
        this.host = inject(ElementRef);
        this.width = signal(undefined);
    }
    get _spacingLines() {
        return this.spacingLines();
    }
    set _projectedMessages(messages) {
        this.projectedMessages.set(messages.toArray());
    }
    ngAfterViewInit() {
        this.width.set(this.host.nativeElement.offsetWidth);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxControlMessagesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxControlMessagesComponent, isStandalone: true, selector: "nx-control-messages", inputs: { spacingLines: { classPropertyName: "spacingLines", publicName: "spacingLines", isSignal: true, isRequired: false, transformFunction: null }, useValueState: { classPropertyName: "useValueState", publicName: "useValueState", isSignal: true, isRequired: false, transformFunction: null }, manualState: { classPropertyName: "manualState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--spacing-lines": "this._spacingLines" } }, providers: [
            {
                provide: NxControlMessagesToken,
                useExisting: forwardRef(() => NxControlMessagesComponent),
            },
        ], queries: [{ propertyName: "_projectedMessages", predicate: NxControlMessageToken }], usesInheritance: true, hostDirectives: [{ directive: __NxUseFormStyleDirective }], ngImport: i0, template: "<div\n    class=\"sizing-container\"\n    [ngStyle]=\"{ 'width.px': width() }\"\n>\n    <ng-content></ng-content>\n</div>\n<ng-template [cdkPortalOutlet]=\"selectedMessage()\"></ng-template>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{position:relative;display:block;overflow:hidden;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);min-height:calc(21px * var(--spacing-lines))}:host[nx-legacy-form-style]{position:relative;display:block;overflow:hidden;font-size:.8125rem;line-height:1.5;min-height:calc(1.5 * var(--font-size-base) * var(--spacing-lines))}.sizing-container{visibility:hidden;position:absolute;top:0;right:-.5rem;transform:translate(100%);display:flex;flex-direction:column;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxControlMessagesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-control-messages', standalone: true, imports: [CommonModule, PortalModule], providers: [
                        {
                            provide: NxControlMessagesToken,
                            useExisting: forwardRef(() => NxControlMessagesComponent),
                        },
                    ], hostDirectives: [__NxUseFormStyleDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"sizing-container\"\n    [ngStyle]=\"{ 'width.px': width() }\"\n>\n    <ng-content></ng-content>\n</div>\n<ng-template [cdkPortalOutlet]=\"selectedMessage()\"></ng-template>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{position:relative;display:block;overflow:hidden;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);min-height:calc(21px * var(--spacing-lines))}:host[nx-legacy-form-style]{position:relative;display:block;overflow:hidden;font-size:.8125rem;line-height:1.5;min-height:calc(1.5 * var(--font-size-base) * var(--spacing-lines))}.sizing-container{visibility:hidden;position:absolute;top:0;right:-.5rem;transform:translate(100%);display:flex;flex-direction:column;align-items:stretch;gap:.5rem}\n"] }]
        }], propDecorators: { _spacingLines: [{
                type: HostBinding,
                args: ['style.--spacing-lines']
            }], _projectedMessages: [{
                type: ContentChildren,
                args: [NxControlMessageToken]
            }] } });

/** Directive for tracking form state and changes.
 *
 * Apply to `<form>` elements with bound form groups.
 */
class NxFormObserverDirective {
    constructor() {
        this.initialValue = signal({});
        this.initialValue$ = toObservable(this.initialValue);
        this.initialFormValueChange = this.initialValue$;
        /** Function to use to compare individual form control values.
         *
         * Defaults to `===` strict equality.
         */
        this.compareFn = input(this.formGroupStrictEquality);
        this.formChanged = signal(false);
        this.formDisabled = signal(false);
        this._formFields = signal([]);
        this.formFields = writeOnlySignal(this._formFields);
        /** Whether any form fields within the form have a visible error. */
        this.hasErrorState = computed(() => this._formFields().some(ff => !!ff.errorState()));
        this.form = inject(FormGroupDirective, { host: true });
        this.destroyRef = inject(DestroyRef);
        // Replace in v18: https://angular.dev/api/forms/AbstractControl#events
        this.reset$ = new Subject();
    }
    /** Value to compare against for form changes and to revert to on reset.
     *
     * Defaults to the initial form value at `ngOnInit`.
     */
    set _initialFormValue(value) {
        this.initialValue.set(value);
    }
    /** Recursively check FormControl values for equality */
    formGroupStrictEquality(current, initial, formGroup) {
        return (size(current) === size(initial) &&
            Object.keys(current).every(k => {
                const currentControl = formGroup.controls[k];
                if (isFormGroup(currentControl)) {
                    const currentValue = current[k];
                    const initialValue = initial[k];
                    return this.formGroupStrictEquality(currentValue, initialValue, currentControl);
                }
                else if (isFormArray(currentControl)) {
                    const currentValue = current[k];
                    const initialValue = initial[k];
                    return (currentValue.length === initialValue.length &&
                        currentValue.every((_, i) => currentValue[i] === initialValue[i]));
                }
                else {
                    return current[k] === initial[k];
                }
            }));
    }
    ngOnInit() {
        if (!Object.keys(this.initialValue()).length) {
            this.initialValue.set(this.form.value);
        }
        combineLatest([this.form.valueChanges, this.initialValue$])
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(([value, initial]) => {
            this.formChanged.set(!this.compareFn()(value, initial, this.form.control));
        });
        this.form
            .statusChanges.pipe(takeUntilDestroyed(this.destroyRef), map(s => s === 'DISABLED'))
            .subscribe(disabled => {
            this.formDisabled.set(disabled);
        });
    }
    updateInitialValue() {
        this.initialValue.set(this.form.value);
    }
    reset() {
        this.form.resetForm(this.initialValue());
        this.reset$.next();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxFormObserverDirective, isStandalone: true, selector: "[nxFormObserver]", inputs: { _initialFormValue: { classPropertyName: "_initialFormValue", publicName: "initialFormValue", isSignal: false, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialFormValueChange: "initialFormValueChange" }, exportAs: ["nxFormObserver"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormObserverDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxFormObserver]',
                    exportAs: 'nxFormObserver',
                    standalone: true,
                }]
        }], propDecorators: { _initialFormValue: [{
                type: Input,
                args: [{ alias: 'initialFormValue' }]
            }], initialFormValueChange: [{
                type: Output
            }] } });

class NxLabelComponent extends BaseComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxLabelComponent, isStandalone: true, selector: "label[nx-label]", usesInheritance: true, hostDirectives: [{ directive: __NxUseFormStyleDirective }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline-block;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-dark15-offset, var(--nxc-dark15))}:host[nx-legacy-form-style]{display:inline-block;font-family:var(--font-family-regular);font-size:var(--font-size-base);color:var(--label-color-original)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'label[nx-label]', template: `<ng-content></ng-content>`, standalone: true, hostDirectives: [__NxUseFormStyleDirective], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline-block;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);color:var(--nxc-dark15-offset, var(--nxc-dark15))}:host[nx-legacy-form-style]{display:inline-block;font-family:var(--font-family-regular);font-size:var(--font-size-base);color:var(--label-color-original)}\n"] }]
        }] });

/** Base matches for a text input */
const NX_BASE_ERROR_MATCHES = {
    onChange: ['maxlength'],
    onBlur: ['pattern'],
    onSubmit: ['required'],
};
const NxDefaultErrorMatchToken = new InjectionToken('Default error matches for form fields');
/** Factory to produce error matcher functions.
 *
 * Defaults to the base set of matches for a text input. Multiple sets will be composed.
 *
 * Matching should follow the general pattern:
 * 1. Show errors that will not be resolved by further input immediately.
 *    This includes forbidden value and max length errors.
 * 2. Show errors that can be caused by incomplete user input on blur.
 *    This includes pattern and min length errors.
 * 3. Show required errors and errors that involve multiple inputs on submit.
 *    This includes unique value errors.
 */
function errorMatcherFactory(trigger, ...others) {
    const changeErrors = [];
    const blurErrors = [];
    const submitErrors = [];
    const triggers = [trigger].concat(others);
    for (const trigger of triggers) {
        const { onChange, onBlur, onSubmit } = trigger;
        if (onChange) {
            changeErrors.push(...onChange);
        }
        if (onBlur) {
            blurErrors.push(...onBlur);
        }
        if (onSubmit) {
            submitErrors.push(...onSubmit);
        }
    }
    return (control, form) => {
        if (!control.invalid) {
            return null;
        }
        const errors = control.errors;
        for (let i = 0; i < changeErrors.length; i++) {
            const key = changeErrors[i];
            const data = errors[key];
            if (data) {
                return { key, data };
            }
        }
        if (control.touched) {
            for (let i = 0; i < blurErrors.length; i++) {
                const key = blurErrors[i];
                const data = errors[key];
                if (data) {
                    return { key, data };
                }
            }
        }
        if (form.submitted) {
            for (let i = 0; i < submitErrors.length; i++) {
                const key = submitErrors[i];
                const data = errors[key];
                if (data) {
                    return { key, data };
                }
            }
        }
        /* Potential pitfall: forgetting to add the trigger for an error */
        if (location.host.startsWith('localhost')) {
            const notYetTouched = control.untouched && blurErrors.some(e => e in errors);
            const notYetSubmitted = !form.submitted && submitErrors.some(e => e in errors);
            if (!(notYetTouched || notYetSubmitted)) {
                console.warn('No matches found for errors', errors);
            }
        }
        return null;
    };
}

/** Directive to make an element compatible with the form field */
class NxFormFieldControlDirective {
    /** Max length for character counter in form field.
     *
     * Doesn't limit actual string value.
     *
     * Syncs with max lengths used in `NxValidators` if `auto` is used
     * AND `type` property is set on `<input />` element.
     */
    // maxLength = input<number | 'auto'>('auto', { alias: 'nxFormFieldMaxLength' });
    // Removing this for now
    constructor(host) {
        this.host = host;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: NxFormFieldControlDirective, isStandalone: true, selector: "[nxControl]", exportAs: ["nxControl"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldControlDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxControl]',
                    exportAs: 'nxControl',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

/** A component used to wrap a form control element and handle error states.
 *
 * Based on [Material form field](https://material.angular.io/components/form-field/overview).
 *
 * "field" refers to the `nx-form-field` container element, "control" refers to the
 * element that the field is wrapping, and "form control" refers to the `FormControl`
 * registered with the element.
 *
 * The field must be inside a reacive form.
 *
 * The field should be used with three child elements:
 * 1. `nx-label` for the control (optional, but usually used)
 * 2. The control with `NxControlDirective` (required)
 * 3. `nx-control-messages` for control state messages (optional)
 *
 * How validation works:
 * 1. Add validator functions to the form control. The `NxValidators` class contains
 *    sets for common use cases like email validation.
 * 2. Create an error matcher function for the control using `errorMatcherFactory` and
 *    pass it as an input to the field. This is what tells the field when to display
 *    specific errors. `NX_BASE_ERROR_MATCHES` contains the base matches for text inputs.
 * 3. Add messages to be displayed for errors with `nx-control-message` elements. The key input
 *    should match the error key. There are certain preset messages in `nx-control-messages`
 *    that cannot be overridden.
 */
class NxFormFieldComponent extends BaseComponent {
    set _label(label) {
        this.hasLabel.set(!!label);
    }
    set _messages(messages) {
        this.hasMessages.set(!!messages);
    }
    constructor() {
        super();
        this.defaultErrorMatches = inject(NxDefaultErrorMatchToken, { optional: true }) ?? NX_BASE_ERROR_MATCHES;
        /** A function for when to display errors.
         *
         * See `error-state-matcher.ts`.
         *
         * Defaults to the matches in `NX_BASE_ERROR_MATCHES`.
         */
        this.errorMatcher = input(errorMatcherFactory(this.defaultErrorMatches));
        this.hasLabel = signal(false);
        this.nxControlDirective = contentChild.required(NxFormFieldControlDirective);
        this.hasMessages = signal(false);
        this._valueState = signal(null);
        /** The current value for the control.
         *
         * Used for non-error control messages.
         */
        this.valueState = this._valueState.asReadonly();
        this._errorState = signal(null);
        /** The current validation error for the control */
        this.errorState = this._errorState.asReadonly();
        this._errorStateEffect = effect(() => {
            const nxControlDirective = this.nxControlDirective();
            const errorState = this._errorState();
            const { nativeElement } = nxControlDirective.host;
            if (errorState) {
                nativeElement.ariaInvalid = 'true';
            }
            else {
                nativeElement.ariaInvalid = 'false';
            }
            /* The field notifies the control for error state by setting aria-invalid
            on the host element. It's the control's responsibility to do it's
            own styling for error state */
        });
        this.destroyRef = inject(DestroyRef);
        this.formGroup = inject(FormGroupDirective, { skipSelf: true });
        this.formObserver = inject(NxFormObserverDirective, { skipSelf: true, optional: true });
        this.submitted = false;
        this.formObserver?.formFields.update(ff => ff.concat(this));
    }
    ngAfterContentInit() {
        if (this.ngControl.value) {
            this._valueState.set({ key: this.ngControl.value });
        }
        this.ngControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
            this._valueState.set(value ? { key: value } : null);
        });
        // `formGroup.submitted` is already true when `ngSubmit` emits
        merge(this.formGroup.ngSubmit.pipe(filter(_ => !this.submitted), tap(() => {
            this.submitted = true;
        })), this.ngControl.control.events.pipe(filter(e => 'touched' in e)), this.ngControl.statusChanges)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => {
            const errorState = this.errorMatcher()(this.ngControl, this.formGroup);
            this._errorState.set(errorState);
        });
        this.formObserver?.reset$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.submitted = false;
        });
    }
    ngOnDestroy() {
        this.formObserver?.formFields.update(ff => ff.filter((f) => f !== this));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxFormFieldComponent, isStandalone: true, selector: "nx-form-field", inputs: { errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatcher", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NxFormFieldToken,
                useExisting: forwardRef(() => NxFormFieldComponent),
            },
        ], queries: [{ propertyName: "nxControlDirective", first: true, predicate: NxFormFieldControlDirective, descendants: true, isSignal: true }, { propertyName: "_label", first: true, predicate: NxLabelComponent, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "_messages", first: true, predicate: NxControlMessagesToken, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1$2.NxThemeAttributeDirective }, { directive: __NxUseFormStyleDirective }], ngImport: i0, template: "@if (hasLabel()) {\n    <div class=\"label-container\">\n        <ng-content select=\"[nx-label]\"></ng-content>\n    </div>\n}\n<div class=\"input-container\"><ng-content></ng-content></div>\n@if (hasMessages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: [":host[nx-cloud2-form-style]{display:block}:host[nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-cloud2-form-style] .messages-container{margin-top:.25rem}:host[data-theme=dark],[data-theme-override=dark]{--character-count-color: var(--light16)}:host[data-theme=dark-gray],[data-theme-override=dark-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light-gray],[data-theme-override=light-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light],[data-theme-override=light]{--character-count-color: var(--light16)}:host[nx-legacy-form-style]{display:block}:host[nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-legacy-form-style] .messages-container{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-form-field', imports: [CommonModule], hostDirectives: [NxThemeAttributeDirective, __NxUseFormStyleDirective], providers: [
                        {
                            provide: NxFormFieldToken,
                            useExisting: forwardRef(() => NxFormFieldComponent),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasLabel()) {\n    <div class=\"label-container\">\n        <ng-content select=\"[nx-label]\"></ng-content>\n    </div>\n}\n<div class=\"input-container\"><ng-content></ng-content></div>\n@if (hasMessages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: [":host[nx-cloud2-form-style]{display:block}:host[nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-cloud2-form-style] .messages-container{margin-top:.25rem}:host[data-theme=dark],[data-theme-override=dark]{--character-count-color: var(--light16)}:host[data-theme=dark-gray],[data-theme-override=dark-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light-gray],[data-theme-override=light-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light],[data-theme-override=light]{--character-count-color: var(--light16)}:host[nx-legacy-form-style]{display:block}:host[nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-legacy-form-style] .messages-container{margin-top:.25rem}\n"] }]
        }], ctorParameters: () => [], propDecorators: { _label: [{
                type: ContentChild,
                args: [NxLabelComponent]
            }], ngControl: [{
                type: ContentChild,
                args: [NgControl]
            }], _messages: [{
                type: ContentChild,
                args: [NxControlMessagesToken]
            }] } });

const imports$2 = [
    NxFormFieldComponent,
    NxLabelComponent,
    NxControlMessagesComponent,
    NxControlMessageComponent,
];
class NxFormFieldModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldModule, imports: [NxFormFieldComponent,
            NxLabelComponent,
            NxControlMessagesComponent,
            NxControlMessageComponent], exports: [NxFormFieldComponent,
            NxLabelComponent,
            NxControlMessagesComponent,
            NxControlMessageComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldModule, imports: [NxFormFieldComponent,
            NxControlMessagesComponent,
            NxControlMessageComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxFormFieldModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$2,
                    exports: imports$2,
                }]
        }] });

class NxInputLikeComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.size = input('large');
        this.background = input('dark');
        // Creating array in [class] causes after view checked errors
        this.inputLikeClasses = computed(() => [
            'nx-input-like--' + this.size(),
            'nx-input-like--' + this.background(),
        ]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputLikeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: NxInputLikeComponent, isStandalone: true, inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "inputLikeClasses()" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputLikeComponent, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    host: {
                        '[class]': 'inputLikeClasses()',
                    },
                }]
        }] });

const NxInputMaskToken = new InjectionToken('Class to add to input for masking from analytics (e.g. fs-mask for Fullstory');
/** Native `<input>` element enhanced for form field.
 *
 * PITFALL: If you forget to import this in a component before using it the error will be
 * `ERROR TypeError: can't access property "host", this.nxControlDirective is undefined`
 * in the console and not a `'nx-input' is not a known element` error in the template.
 */
class NxInputComponent extends NxInputLikeComponent {
    constructor({ nativeElement }) {
        const maskToken = inject(NxInputMaskToken, { optional: true, skipSelf: true });
        super();
        if (maskToken) {
            nativeElement.classList.add(maskToken);
        }
        if (!nativeElement.type) {
            nativeElement.type = 'text';
        }
        else if (nativeElement.type === 'email') {
            nativeElement.autocomplete = 'email';
            nativeElement.spellcheck = false;
            nativeElement.name ||= 'email'; // This seems required for Firefox autocomplete
        }
        else if (nativeElement.type === 'tel') {
            nativeElement.autocomplete = 'tel';
            nativeElement.spellcheck = false;
        }
        else if (nativeElement.type === 'url') {
            nativeElement.spellcheck = false;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxInputComponent, isStandalone: true, selector: "input[nx-input]", usesInheritance: true, hostDirectives: [{ directive: NxFormFieldControlDirective }, { directive: __NxUseFormStyleDirective }], ngImport: i0, template: '', isInline: true, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{--input-color: var(--nxc-light4-offset, var(--nxc-light4));color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none;display:block;box-sizing:border-box;width:100%;caret-color:var(--input-color)}:host[nx-cloud2-form-style].nx-input-like--dark{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark3-offset, var(--nxc-dark3));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark5-offset, var(--nxc-dark5));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark8-offset, var(--nxc-dark8))}:host[nx-cloud2-form-style].nx-input-like--light{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark5-offset, var(--nxc-dark5));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark7-offset, var(--nxc-dark7));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark11-offset, var(--nxc-dark11))}:host[nx-cloud2-form-style].nx-input-like--large{padding:.4375rem .6875rem;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host[nx-cloud2-form-style].nx-input-like--small{padding:.28125rem .6875rem;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host[nx-cloud2-form-style]:hover{border-color:var(--border-color-hover)}:host[nx-cloud2-form-style]:active{border-color:hsl(from var(--border-color-hover) h s calc(l - 9))}:host[nx-cloud2-form-style][aria-invalid=true]{border-color:var(--nxc-attention-red)}:host[nx-cloud2-form-style][aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[nx-cloud2-form-style][aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3%))}}:host[nx-cloud2-form-style]:focus-visible{border-color:var(--nxc-brand)}:host[nx-cloud2-form-style]:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[nx-cloud2-form-style]:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3%))}}:host[nx-cloud2-form-style][aria-disabled=true],:host[nx-cloud2-form-style][aria-readonly=true]{cursor:default;color:var(--input-color-disabled);border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}:host[nx-cloud2-form-style]::placeholder{color:var(--placeholder-color)}:host[nx-cloud2-form-style]:disabled,:host[nx-cloud2-form-style]:read-only{cursor:default;color:var(--input-color-disabled);border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}:host[nx-cloud2-form-style]:autofill,:host[nx-cloud2-form-style]:-webkit-autofill{-webkit-text-fill-color:var(--input-color)!important;-webkit-box-shadow:0 0 0 2rem var(--background-color) inset!important}:host[nx-cloud2-form-style]:-internal-autofill-selected{background-color:var(--background-color)!important;color:var(--input-color)!important}:host[nx-legacy-form-style]{display:block;width:100%;height:2rem;font-size:.875rem;color:var(--input-color);background-color:var(--input-bg);border:1px solid var(--input-border-color);border-radius:2px;padding:.3125rem .625rem;caret-color:var(--input-color)}:host[nx-legacy-form-style]::placeholder{color:var(--input-color-placeholder);font-family:var(--font-family-regular);opacity:.7;font-size:.75rem}:host[nx-legacy-form-style]:autofill,:host[nx-legacy-form-style]:-webkit-autofill{-webkit-text-fill-color:var(--input-color)!important;-webkit-box-shadow:0 0 0 2rem var(--input-bg) inset!important}:host[nx-legacy-form-style]:-internal-autofill-selected{background-color:var(--input-bg)!important;color:var(--input-color)!important}:host[nx-legacy-form-style]:disabled,:host[nx-legacy-form-style]:read-only{opacity:.4;color:var(--input-disabled-color);border-color:var(--input-disabled-border-color);pointer-events:none}:host[nx-legacy-form-style]:focus{border-color:var(--input-focus-border-color);outline:1px solid var(--input-focus-border-color)}:host[nx-legacy-form-style][aria-invalid=true]:not(:focus){border-color:var(--input-error-border-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'input[nx-input]', template: '', imports: [], hostDirectives: [NxFormFieldControlDirective, __NxUseFormStyleDirective], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{--input-color: var(--nxc-light4-offset, var(--nxc-light4));color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none;display:block;box-sizing:border-box;width:100%;caret-color:var(--input-color)}:host[nx-cloud2-form-style].nx-input-like--dark{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark3-offset, var(--nxc-dark3));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark5-offset, var(--nxc-dark5));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark8-offset, var(--nxc-dark8))}:host[nx-cloud2-form-style].nx-input-like--light{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark5-offset, var(--nxc-dark5));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark7-offset, var(--nxc-dark7));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark11-offset, var(--nxc-dark11))}:host[nx-cloud2-form-style].nx-input-like--large{padding:.4375rem .6875rem;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host[nx-cloud2-form-style].nx-input-like--small{padding:.28125rem .6875rem;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host[nx-cloud2-form-style]:hover{border-color:var(--border-color-hover)}:host[nx-cloud2-form-style]:active{border-color:hsl(from var(--border-color-hover) h s calc(l - 9))}:host[nx-cloud2-form-style][aria-invalid=true]{border-color:var(--nxc-attention-red)}:host[nx-cloud2-form-style][aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[nx-cloud2-form-style][aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3%))}}:host[nx-cloud2-form-style]:focus-visible{border-color:var(--nxc-brand)}:host[nx-cloud2-form-style]:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[nx-cloud2-form-style]:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3%))}}:host[nx-cloud2-form-style][aria-disabled=true],:host[nx-cloud2-form-style][aria-readonly=true]{cursor:default;color:var(--input-color-disabled);border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}:host[nx-cloud2-form-style]::placeholder{color:var(--placeholder-color)}:host[nx-cloud2-form-style]:disabled,:host[nx-cloud2-form-style]:read-only{cursor:default;color:var(--input-color-disabled);border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}:host[nx-cloud2-form-style]:autofill,:host[nx-cloud2-form-style]:-webkit-autofill{-webkit-text-fill-color:var(--input-color)!important;-webkit-box-shadow:0 0 0 2rem var(--background-color) inset!important}:host[nx-cloud2-form-style]:-internal-autofill-selected{background-color:var(--background-color)!important;color:var(--input-color)!important}:host[nx-legacy-form-style]{display:block;width:100%;height:2rem;font-size:.875rem;color:var(--input-color);background-color:var(--input-bg);border:1px solid var(--input-border-color);border-radius:2px;padding:.3125rem .625rem;caret-color:var(--input-color)}:host[nx-legacy-form-style]::placeholder{color:var(--input-color-placeholder);font-family:var(--font-family-regular);opacity:.7;font-size:.75rem}:host[nx-legacy-form-style]:autofill,:host[nx-legacy-form-style]:-webkit-autofill{-webkit-text-fill-color:var(--input-color)!important;-webkit-box-shadow:0 0 0 2rem var(--input-bg) inset!important}:host[nx-legacy-form-style]:-internal-autofill-selected{background-color:var(--input-bg)!important;color:var(--input-color)!important}:host[nx-legacy-form-style]:disabled,:host[nx-legacy-form-style]:read-only{opacity:.4;color:var(--input-disabled-color);border-color:var(--input-disabled-border-color);pointer-events:none}:host[nx-legacy-form-style]:focus{border-color:var(--input-focus-border-color);outline:1px solid var(--input-focus-border-color)}:host[nx-legacy-form-style][aria-invalid=true]:not(:focus){border-color:var(--input-error-border-color)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

/** Form field for text inputs.
 *
 * Adds a button to clear the input.
 */
class NxInputFieldComponent extends NxFormFieldComponent {
    constructor() {
        super(...arguments);
        this.injector = inject(Injector);
        this.zeroLength = signal(true).asReadonly();
        this.disabled = signal(false).asReadonly();
        this.readonly = signal(false);
        this.inputObserver = new MutationObserver(records => {
            const readyonlyChange = records.find(r => r.attributeName === 'readonly');
            if (readyonlyChange) {
                this.readonly.set(readyonlyChange.target.hasAttribute('readonly'));
            }
        });
    }
    get control() {
        return this.ngControl.control;
    }
    ngAfterContentInit() {
        super.ngAfterContentInit();
        runInInjectionContext(this.injector, () => {
            this.zeroLength = toSignal(this.control.valueChanges.pipe(map(v => !v.length)), {
                initialValue: !this.control.value.length,
            });
            this.disabled = toSignal(this.control.statusChanges.pipe(map(s => s === 'DISABLED')), {
                initialValue: this.control.status === 'DISABLED',
            });
            const nativeElement = this.nxControlDirective().host.nativeElement;
            this.readonly.set(nativeElement.hasAttribute('readonly'));
            this.inputObserver.observe(nativeElement, { attributeFilter: ['readonly'] });
        });
    }
    clear() {
        this.control.setValue('');
        const nativeElement = this.nxControlDirective().host.nativeElement;
        if (document.activeElement !== nativeElement) {
            nativeElement.focus();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxInputFieldComponent, isStandalone: true, selector: "nx-input-field", providers: [
            {
                provide: NxFormFieldToken,
                useExisting: forwardRef(() => NxInputFieldComponent),
            },
        ], usesInheritance: true, ngImport: i0, template: "@if (hasLabel()) {\n    <div class=\"label-container\">\n        <ng-content select=\"[nx-label]\"></ng-content>\n    </div>\n}\n<div class=\"input-container\">\n    <ng-content></ng-content>\n    @if (!zeroLength() && !disabled() && !readonly()) {\n        <button\n            nx-button\n            variant=\"text\"\n            size=\"small\"\n            class=\"clear-button\"\n            (click)=\"clear()\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <nx-icon icon=\"Close16X16\"></nx-icon>\n        </button>\n    }\n</div>\n@if (hasMessages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: [":host[nx-cloud2-form-style]{display:block}:host[nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-cloud2-form-style] .messages-container{margin-top:.25rem}:host[data-theme=dark],[data-theme-override=dark]{--character-count-color: var(--light16)}:host[data-theme=dark-gray],[data-theme-override=dark-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light-gray],[data-theme-override=light-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light],[data-theme-override=light]{--character-count-color: var(--light16)}:host[nx-legacy-form-style]{display:block}:host[nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-legacy-form-style] .messages-container{margin-top:.25rem}.input-container{position:relative}.input-container [nx-button]{padding:0}.input-container .clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}.input-container .clear-button nx-icon{height:1rem;width:1rem}:host::ng-deep .input-container input[nx-input]{padding-right:2.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxButtonComponent, selector: "button[nx-button]" }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-input-field', standalone: true, imports: [CommonModule, NxButtonComponent, NxIconComponent], providers: [
                        {
                            provide: NxFormFieldToken,
                            useExisting: forwardRef(() => NxInputFieldComponent),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasLabel()) {\n    <div class=\"label-container\">\n        <ng-content select=\"[nx-label]\"></ng-content>\n    </div>\n}\n<div class=\"input-container\">\n    <ng-content></ng-content>\n    @if (!zeroLength() && !disabled() && !readonly()) {\n        <button\n            nx-button\n            variant=\"text\"\n            size=\"small\"\n            class=\"clear-button\"\n            (click)=\"clear()\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <nx-icon icon=\"Close16X16\"></nx-icon>\n        </button>\n    }\n</div>\n@if (hasMessages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: [":host[nx-cloud2-form-style]{display:block}:host[nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-cloud2-form-style] .messages-container{margin-top:.25rem}:host[data-theme=dark],[data-theme-override=dark]{--character-count-color: var(--light16)}:host[data-theme=dark-gray],[data-theme-override=dark-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light-gray],[data-theme-override=light-gray]{--character-count-color: var(--light_gray_16)}:host[data-theme=light],[data-theme-override=light]{--character-count-color: var(--light16)}:host[nx-legacy-form-style]{display:block}:host[nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}:host[nx-legacy-form-style] .messages-container{margin-top:.25rem}.input-container{position:relative}.input-container [nx-button]{padding:0}.input-container .clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}.input-container .clear-button nx-icon{height:1rem;width:1rem}:host::ng-deep .input-container input[nx-input]{padding-right:2.75rem}\n"] }]
        }] });

const imports$1 = [
    NxLabelComponent,
    NxInputFieldComponent,
    NxInputComponent,
    NxControlMessagesComponent,
    NxControlMessageComponent,
];
class NxInputFieldModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: NxInputFieldModule, imports: [NxLabelComponent,
            NxInputFieldComponent,
            NxInputComponent,
            NxControlMessagesComponent,
            NxControlMessageComponent], exports: [NxLabelComponent,
            NxInputFieldComponent,
            NxInputComponent,
            NxControlMessagesComponent,
            NxControlMessageComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputFieldModule, imports: [NxInputFieldComponent,
            NxControlMessagesComponent,
            NxControlMessageComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxInputFieldModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$1,
                    exports: imports$1,
                }]
        }] });

// Create an Angular application instance
const app = createApplication({
    providers: [provideExperimentalZonelessChangeDetection()],
});
/**
 * Registers Angular components as custom elements.
 *
 * This function takes one or more Angular component classes and registers them as custom elements.
 * It ensures that the components are standalone and have valid metadata before registration.
 * The custom element selectors are generated by replacing 'nx-' with 'nxe-' and ensuring they start with 'nxe-'.
 *
 * @param {Type<unknown>[]} ComponentClasses - An array of Angular component classes to be registered as custom elements.
 *
 * @example
 * // Import your Angular component
 * import { MyComponent } from './my-component';
 *
 * // Register the component as a custom element
 * registerAsCustomElement(MyComponent);
 *
 * @example
 * // Register multiple components as custom elements
 * import { MyComponent1 } from './my-component1';
 * import { MyComponent2 } from './my-component2';
 *
 * registerAsCustomElement(MyComponent1, MyComponent2);
 */
async function registerAsCustomElement(...ComponentClasses) {
    // Destructure the first component class and the remaining component classes
    const [next, ...RemainingComponentClasses] = ComponentClasses;
    const withCustomTag = (next) => typeof next === 'function';
    const isCustomTag = withCustomTag(next);
    const ComponentClass = isCustomTag ? next.component : next;
    // Reflect metadata of the component class
    const metadata = reflectComponentType(ComponentClass);
    if (!metadata) {
        console.error(`Could not find metadata for ${ComponentClass.name}. Please make sure that this is a valid component`);
        return;
    }
    else if (!metadata.isStandalone) {
        console.error(`Could not register ${ComponentClass.name} as a custom element because it is not standalone`);
        return;
    }
    // Generate the custom element selector by replacing 'nx-' with 'nxe-' and ensuring it starts with 'nxe-'
    const selectors = isCustomTag
        ? [next.tag]
        : metadata.selector
            .split(',')
            .map(s => s.trim())
            .filter(Boolean)
            .map(selector => selector.replace(/^nx-/, 'nxe-').replace(/^[^nxe-]/, 'nxe-' + selector));
    if (!selectors) {
        console.error(`Could not find selector for ${ComponentClass.name}`);
    }
    else {
        for (const customElementSelector of selectors) {
            if (customElements.get(customElementSelector)) {
                console.info('Custom element already registered:', customElementSelector);
            }
            else {
                // Create a custom element using the Angular component class and the application's injector
                const styleWrapperElement = createCustomElement(ComponentClass, {
                    injector: (await app).injector,
                });
                // Define the custom element with the generated selector
                customElements.define(customElementSelector, styleWrapperElement);
                console.info(`Registered ${ComponentClass.name} as custom element ${customElementSelector}`);
            }
        }
    }
    // Recursively register remaining component classes as custom elements
    if (RemainingComponentClasses.length) {
        registerAsCustomElement(...RemainingComponentClasses);
    }
    else {
        console.info('All custom elements registered');
    }
}
async function registerCustomElementsFromMapping(mapping) {
    await Promise.all(Object.entries(mapping).map(([tag, component]) => registerAsCustomElement({ tag, component })));
    return Object.keys(mapping).reduce((mapped, tagName) => ({
        ...mapped,
        [tagName]: document.createElement(tagName),
    }), {});
}

/**
 * NxStyleWrapperComponent
 *
 * This component is used as a web component to wrap otherwise content with default styles from the component library.
 *
 * @example
 * <nx-style-wrapper>
 *   <p>Your static content here</p>
 * </nx-style-wrapper>
 *
 * @remarks
 * This is generally expected to be used as a web component with the bundle being included as additional
 */
class NxStyleWrapperComponent {
    constructor() {
        this.themeProvider = inject(NxThemeProviderService);
        this.syncBackground = effect(() => this.themeProvider.setBackgroundColors());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxStyleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxStyleWrapperComponent, isStandalone: true, selector: "nx-style-wrapper", hostDirectives: [{ directive: BaseComponent }], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}[disabled]{color:var(--font-color-disabled)}h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}a:visited{color:var(--font-color-regular)}.text-color-medium{color:var(--font-color-medium)}.text-color-regular{color:var(--font-color-regular)}.text-color-light{color:var(--font-color-light)}.text-color-disabled{color:var(--font-color-disabled)}.text-color-error{color:var(--font-color-error)}.text-color-brand{color:var(--font-color-brand)}.text-size-12px{font-size:12px;font-size:.75rem}.text-size-13px{font-size:13px;font-size:.8125rem}.text-size-14px{font-size:14px;font-size:.875rem}.text-size-16px{font-size:16px;font-size:1rem}.text-size-18px{font-size:18px;font-size:1.125rem}.text-size-20px{font-size:20px;font-size:1.25rem}.text-size-24px{font-size:24px;font-size:1.5rem}.text-size-32px{font-size:32px;font-size:2rem}.text-size-56px{font-size:56px;font-size:3.5rem}.text-family-base{font-size:base}.text-family-regular{font-size:regular}.text-family-medium{font-size:medium}.text-family-light{font-size:light}.text-family-bold{font-size:bold}:host[static]{accent-color:var(--nxc-brand)}:host[static] ::ng-deep :host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}:host[static] ::ng-deep [disabled]{color:var(--font-color-disabled)}:host[static] ::ng-deep h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}:host[static] ::ng-deep h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}:host[static] ::ng-deep h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}:host[static] ::ng-deep h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}:host[static] ::ng-deep h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}:host[static] ::ng-deep h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}:host[static] ::ng-deep a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}:host[static] ::ng-deep a:visited{color:var(--font-color-regular)}:host[static] ::ng-deep .text-color-medium{color:var(--font-color-medium)}:host[static] ::ng-deep .text-color-regular{color:var(--font-color-regular)}:host[static] ::ng-deep .text-color-light{color:var(--font-color-light)}:host[static] ::ng-deep .text-color-disabled{color:var(--font-color-disabled)}:host[static] ::ng-deep .text-color-error{color:var(--font-color-error)}:host[static] ::ng-deep .text-color-brand{color:var(--font-color-brand)}:host[static] ::ng-deep .text-size-12px{font-size:12px;font-size:.75rem}:host[static] ::ng-deep .text-size-13px{font-size:13px;font-size:.8125rem}:host[static] ::ng-deep .text-size-14px{font-size:14px;font-size:.875rem}:host[static] ::ng-deep .text-size-16px{font-size:16px;font-size:1rem}:host[static] ::ng-deep .text-size-18px{font-size:18px;font-size:1.125rem}:host[static] ::ng-deep .text-size-20px{font-size:20px;font-size:1.25rem}:host[static] ::ng-deep .text-size-24px{font-size:24px;font-size:1.5rem}:host[static] ::ng-deep .text-size-32px{font-size:32px;font-size:2rem}:host[static] ::ng-deep .text-size-56px{font-size:56px;font-size:3.5rem}:host[static] ::ng-deep .text-family-base{font-size:base}:host[static] ::ng-deep .text-family-regular{font-size:regular}:host[static] ::ng-deep .text-family-medium{font-size:medium}:host[static] ::ng-deep .text-family-light{font-size:light}:host[static] ::ng-deep .text-family-bold{font-size:bold}:host[static] ::ng-deep:focus-visible{outline:2px var(--nxc-brand) solid}:host[static] ::ng-deep mark{background-color:var(--nxc-brand);color:var(--nxc-brand-contrast, var(--nxc-dark1));--mark-padding: 2px;padding:var(--mark-padding);margin:calc(var(--mark-padding) * -1)}:host[static] ::ng-deep input,:host[static] ::ng-deep button,:host[static] ::ng-deep select,:host[static] ::ng-deep textarea{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular);background-color:var(--nxc-dark1-offset, var(--nxc-dark1));border-radius:4px;border:1px solid var(--nxc-dark4-offset, var(--nxc-dark4));padding:4px}:host[static] ::ng-deep button{background-color:var(--nxc-brand);color:var(--nxc-brand-contrast, var(--nxc-dark1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxStyleWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-style-wrapper', template: ` <ng-content></ng-content> `, imports: [CommonModule], hostDirectives: [BaseComponent], styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}[disabled]{color:var(--font-color-disabled)}h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}a:visited{color:var(--font-color-regular)}.text-color-medium{color:var(--font-color-medium)}.text-color-regular{color:var(--font-color-regular)}.text-color-light{color:var(--font-color-light)}.text-color-disabled{color:var(--font-color-disabled)}.text-color-error{color:var(--font-color-error)}.text-color-brand{color:var(--font-color-brand)}.text-size-12px{font-size:12px;font-size:.75rem}.text-size-13px{font-size:13px;font-size:.8125rem}.text-size-14px{font-size:14px;font-size:.875rem}.text-size-16px{font-size:16px;font-size:1rem}.text-size-18px{font-size:18px;font-size:1.125rem}.text-size-20px{font-size:20px;font-size:1.25rem}.text-size-24px{font-size:24px;font-size:1.5rem}.text-size-32px{font-size:32px;font-size:2rem}.text-size-56px{font-size:56px;font-size:3.5rem}.text-family-base{font-size:base}.text-family-regular{font-size:regular}.text-family-medium{font-size:medium}.text-family-light{font-size:light}.text-family-bold{font-size:bold}:host[static]{accent-color:var(--nxc-brand)}:host[static] ::ng-deep :host{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular)}:host[static] ::ng-deep [disabled]{color:var(--font-color-disabled)}:host[static] ::ng-deep h1{font-family:var(--nxc-font-family);font-size:56px;font-size:3.5rem;color:var(--font-color-medium)}:host[static] ::ng-deep h2{font-family:var(--nxc-font-family);font-size:24px;font-size:1.5rem;color:var(--font-color-medium)}:host[static] ::ng-deep h3{font-family:var(--nxc-font-family);font-size:20px;font-size:1.25rem;color:var(--font-color-medium)}:host[static] ::ng-deep h4{font-family:var(--nxc-font-family);font-size:18px;font-size:1.125rem;color:var(--font-color-medium)}:host[static] ::ng-deep h5{font-family:var(--nxc-font-family);font-size:16px;font-size:1rem;color:var(--font-color-medium)}:host[static] ::ng-deep h6{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-medium)}:host[static] ::ng-deep a{color:var(--font-color-brand);text-decoration:underline;cursor:pointer}:host[static] ::ng-deep a:visited{color:var(--font-color-regular)}:host[static] ::ng-deep .text-color-medium{color:var(--font-color-medium)}:host[static] ::ng-deep .text-color-regular{color:var(--font-color-regular)}:host[static] ::ng-deep .text-color-light{color:var(--font-color-light)}:host[static] ::ng-deep .text-color-disabled{color:var(--font-color-disabled)}:host[static] ::ng-deep .text-color-error{color:var(--font-color-error)}:host[static] ::ng-deep .text-color-brand{color:var(--font-color-brand)}:host[static] ::ng-deep .text-size-12px{font-size:12px;font-size:.75rem}:host[static] ::ng-deep .text-size-13px{font-size:13px;font-size:.8125rem}:host[static] ::ng-deep .text-size-14px{font-size:14px;font-size:.875rem}:host[static] ::ng-deep .text-size-16px{font-size:16px;font-size:1rem}:host[static] ::ng-deep .text-size-18px{font-size:18px;font-size:1.125rem}:host[static] ::ng-deep .text-size-20px{font-size:20px;font-size:1.25rem}:host[static] ::ng-deep .text-size-24px{font-size:24px;font-size:1.5rem}:host[static] ::ng-deep .text-size-32px{font-size:32px;font-size:2rem}:host[static] ::ng-deep .text-size-56px{font-size:56px;font-size:3.5rem}:host[static] ::ng-deep .text-family-base{font-size:base}:host[static] ::ng-deep .text-family-regular{font-size:regular}:host[static] ::ng-deep .text-family-medium{font-size:medium}:host[static] ::ng-deep .text-family-light{font-size:light}:host[static] ::ng-deep .text-family-bold{font-size:bold}:host[static] ::ng-deep:focus-visible{outline:2px var(--nxc-brand) solid}:host[static] ::ng-deep mark{background-color:var(--nxc-brand);color:var(--nxc-brand-contrast, var(--nxc-dark1));--mark-padding: 2px;padding:var(--mark-padding);margin:calc(var(--mark-padding) * -1)}:host[static] ::ng-deep input,:host[static] ::ng-deep button,:host[static] ::ng-deep select,:host[static] ::ng-deep textarea{font-family:var(--nxc-font-family);font-size:14px;font-size:.875rem;color:var(--font-color-regular);background-color:var(--nxc-dark1-offset, var(--nxc-dark1));border-radius:4px;border:1px solid var(--nxc-dark4-offset, var(--nxc-dark4));padding:4px}:host[static] ::ng-deep button{background-color:var(--nxc-brand);color:var(--nxc-brand-contrast, var(--nxc-dark1))}\n"] }]
        }] });

/**
 * Register the NxStyleWrapperComponent as a custom element with the tag name `nxe-style-wrapper`.
 */
const registerStyleWrapper = () => registerAsCustomElement(NxStyleWrapperComponent);

class NxCheckboxComponent extends BaseControlValueAccessor {
    constructor() {
        super(...arguments);
        this.checkboxIcon = NxIconEnum.CHECK_20_X_20;
        this.value = model(false);
        this.required = input(false, { transform: booleanAttribute });
        /** tbd replace with linked signal */
        this.disabled = input(false, { transform: booleanAttribute });
        this.disabledEffect = effect(() => {
            const disabled = this.disabled();
            this.setDisabledState(disabled);
        });
    }
    validate(control) {
        if (this.value()) {
            return null;
        }
        return this.required() ? { required: true } : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxCheckboxComponent, isStandalone: true, selector: "nx-checkbox-v2", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxCheckboxComponent),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => NxCheckboxComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<label>\n    <div class=\"input-body\"></div>\n    <nx-icon\n        class=\"input-indicator\"\n        [icon]=\"checkboxIcon\"\n        preserveSize\n        useCurrentColor\n    ></nx-icon>\n    <input\n        type=\"checkbox\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n    />\n    <ng-content></ng-content>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{--text-color: var(--nxc-light10-offset, var(--nxc-light10));--text-color-hover: var(--nxc-light8-offset, var(--nxc-light8));--text-color-active: var(--nxc-light12-offset, var(--nxc-light12));--text-checked-color: var(--nxc-light4-offset, var(--nxc-light4));--text-checked-color-hover: var(--nxc-light2-offset, var(--nxc-light2));--text-checked-color-active: var(--nxc-light6-offset, var(--nxc-light6));--unchecked-body-color: var(--nxc-dark6-offset, var(--nxc-dark6));--unchecked-body-color-hover: var(--nxc-dark8-offset, var(--nxc-dark8));--unchecked-body-color-active: var(--nxc-dark5-offset, var(--nxc-dark5));--unchecked-border-color: var(--nxc-dark10-offset, var(--nxc-dark10));--unchecked-border-color-hover: var(--nxc-dark10-offset, var(--nxc-dark10));--unchecked-border-color-active: var(--nxc-dark7-offset, var(--nxc-dark7));--checked-indicator-color: #000000;--checked-color: var(--nxc-attention-green);--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 6) );--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3) );--invalid-color: var(--nxc-attention-red);--invalid-color-hover: hsl(from var(--invalid-color) h s calc(l + 6) );--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) );--focus-color: var(--nxc-light13-offset, var(--nxc-light13));--focus-color-checked: var(--nxc-light1-offset, var(--nxc-light1));--total-height: 24px;--vertical-margin: calc((var(--total-height) - var(--input-height)) / 2);--input-height: 20px;--input-width: 20px;--input-border-radius: 4px;display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 6%) )}}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}@supports (color: hsl(from red h s calc(l + 1%))){:host{--invalid-color-hover: hsl(from var(--invalid-color) h s calc(l + 6%) )}}@supports (color: hsl(from red h s calc(l + 1%))){:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3%) )}}:host,:host label,:host input{cursor:pointer}:host .input-body{transition:background-color .5s ease,border-color .5s ease;background-color:var(--unchecked-body-color);border-color:var(--unchecked-border-color)}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{background-color:var(--unchecked-body-color-hover);border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{background-color:var(--unchecked-body-color-active);border-color:var(--unchecked-border-color-active)}:host:active label{color:var(--text-color-active)}:host:focus-visible,:host input:focus-visible,:host label:focus-visible{outline:none}:host:has(input:focus-visible) .input-body{border-color:var(--focus-color)}:host:has(input:checked) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body{outline:1px hsla(from var(--focus-color-checked) h s l/.7) solid;outline-offset:-1px}:host:has(input:disabled){opacity:.3}:host:has(input:disabled),:host:has(input:disabled) label,:host:has(input:disabled) input{cursor:default}:host:has(input:disabled) .input-body,:host:has(input:disabled):hover .input-body,:host:has(input:disabled):active .input-body{background-color:var(--unchecked-body-color);border-color:var(--unchecked-border-color)}:host:has(input:disabled) label,:host:has(input:disabled):hover label,:host:has(input:disabled):active label{color:var(--text-color)}:host:has(input:disabled):has(input:checked) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):active:has(input:checked) label{color:var(--text-checked-color)}:host:has(input:invalid) .input-body{border-color:var(--invalid-color)}:host:has(input:invalid) label{color:var(--invalid-color)}:host:has(input:invalid):hover .input-body{border-color:var(--invalid-color-hover)}:host:has(input:invalid):hover label{color:var(--invalid-color-hover)}:host:has(input:invalid):active .input-body{border-color:var(--invalid-color-active)}:host:has(input:invalid):active label{color:var(--invalid-color-active)}:host:has(input:invalid):has(input:focus-visible) .input-body{border-color:var(--focus-color)}.input-body,input{margin:var(--vertical-margin) 0}.input-body{--border-width: 1px;position:absolute;left:0;width:calc(var(--input-width) - 2 * var(--border-width));height:calc(var(--input-height) - 2 * var(--border-width));border:var(--border-width) solid;border-radius:var(--input-border-radius)}input{display:inline-block;position:absolute;left:0;padding:0;opacity:0;width:var(--input-width);height:var(--input-height)}label{display:inline-block;position:relative;height:100%;padding-left:calc(var(--input-width) + 8px);font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);overflow-wrap:break-word;word-break:break-all}:host .input-indicator{transition:opacity .5s ease;opacity:0;color:var(--checked-indicator-color)}:host:has(input:checked) .input-indicator{opacity:1}.input-indicator{position:absolute;left:0;width:var(--input-width);height:var(--input-height);margin:var(--vertical-margin) 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxCheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-checkbox-v2', imports: [CommonModule, FormsModule, NxIconComponent], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxCheckboxComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => NxCheckboxComponent),
                            multi: true,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <div class=\"input-body\"></div>\n    <nx-icon\n        class=\"input-indicator\"\n        [icon]=\"checkboxIcon\"\n        preserveSize\n        useCurrentColor\n    ></nx-icon>\n    <input\n        type=\"checkbox\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n    />\n    <ng-content></ng-content>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{--text-color: var(--nxc-light10-offset, var(--nxc-light10));--text-color-hover: var(--nxc-light8-offset, var(--nxc-light8));--text-color-active: var(--nxc-light12-offset, var(--nxc-light12));--text-checked-color: var(--nxc-light4-offset, var(--nxc-light4));--text-checked-color-hover: var(--nxc-light2-offset, var(--nxc-light2));--text-checked-color-active: var(--nxc-light6-offset, var(--nxc-light6));--unchecked-body-color: var(--nxc-dark6-offset, var(--nxc-dark6));--unchecked-body-color-hover: var(--nxc-dark8-offset, var(--nxc-dark8));--unchecked-body-color-active: var(--nxc-dark5-offset, var(--nxc-dark5));--unchecked-border-color: var(--nxc-dark10-offset, var(--nxc-dark10));--unchecked-border-color-hover: var(--nxc-dark10-offset, var(--nxc-dark10));--unchecked-border-color-active: var(--nxc-dark7-offset, var(--nxc-dark7));--checked-indicator-color: #000000;--checked-color: var(--nxc-attention-green);--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 6) );--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3) );--invalid-color: var(--nxc-attention-red);--invalid-color-hover: hsl(from var(--invalid-color) h s calc(l + 6) );--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) );--focus-color: var(--nxc-light13-offset, var(--nxc-light13));--focus-color-checked: var(--nxc-light1-offset, var(--nxc-light1));--total-height: 24px;--vertical-margin: calc((var(--total-height) - var(--input-height)) / 2);--input-height: 20px;--input-width: 20px;--input-border-radius: 4px;display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 6%) )}}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}@supports (color: hsl(from red h s calc(l + 1%))){:host{--invalid-color-hover: hsl(from var(--invalid-color) h s calc(l + 6%) )}}@supports (color: hsl(from red h s calc(l + 1%))){:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3%) )}}:host,:host label,:host input{cursor:pointer}:host .input-body{transition:background-color .5s ease,border-color .5s ease;background-color:var(--unchecked-body-color);border-color:var(--unchecked-border-color)}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{background-color:var(--unchecked-body-color-hover);border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{background-color:var(--unchecked-body-color-active);border-color:var(--unchecked-border-color-active)}:host:active label{color:var(--text-color-active)}:host:focus-visible,:host input:focus-visible,:host label:focus-visible{outline:none}:host:has(input:focus-visible) .input-body{border-color:var(--focus-color)}:host:has(input:checked) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body{outline:1px hsla(from var(--focus-color-checked) h s l/.7) solid;outline-offset:-1px}:host:has(input:disabled){opacity:.3}:host:has(input:disabled),:host:has(input:disabled) label,:host:has(input:disabled) input{cursor:default}:host:has(input:disabled) .input-body,:host:has(input:disabled):hover .input-body,:host:has(input:disabled):active .input-body{background-color:var(--unchecked-body-color);border-color:var(--unchecked-border-color)}:host:has(input:disabled) label,:host:has(input:disabled):hover label,:host:has(input:disabled):active label{color:var(--text-color)}:host:has(input:disabled):has(input:checked) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):active:has(input:checked) label{color:var(--text-checked-color)}:host:has(input:invalid) .input-body{border-color:var(--invalid-color)}:host:has(input:invalid) label{color:var(--invalid-color)}:host:has(input:invalid):hover .input-body{border-color:var(--invalid-color-hover)}:host:has(input:invalid):hover label{color:var(--invalid-color-hover)}:host:has(input:invalid):active .input-body{border-color:var(--invalid-color-active)}:host:has(input:invalid):active label{color:var(--invalid-color-active)}:host:has(input:invalid):has(input:focus-visible) .input-body{border-color:var(--focus-color)}.input-body,input{margin:var(--vertical-margin) 0}.input-body{--border-width: 1px;position:absolute;left:0;width:calc(var(--input-width) - 2 * var(--border-width));height:calc(var(--input-height) - 2 * var(--border-width));border:var(--border-width) solid;border-radius:var(--input-border-radius)}input{display:inline-block;position:absolute;left:0;padding:0;opacity:0;width:var(--input-width);height:var(--input-height)}label{display:inline-block;position:relative;height:100%;padding-left:calc(var(--input-width) + 8px);font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);overflow-wrap:break-word;word-break:break-all}:host .input-indicator{transition:opacity .5s ease;opacity:0;color:var(--checked-indicator-color)}:host:has(input:checked) .input-indicator{opacity:1}.input-indicator{position:absolute;left:0;width:var(--input-width);height:var(--input-height);margin:var(--vertical-margin) 0}\n"] }]
        }] });

var BadgeType;
(function (BadgeType) {
    BadgeType["DEFAULT"] = "default";
    BadgeType["WARNING"] = "warning";
    BadgeType["DANGER"] = "danger";
    BadgeType["SUCCESS"] = "success";
})(BadgeType || (BadgeType = {}));
class NxStatusBadgeComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.badgeType = input('default');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxStatusBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: NxStatusBadgeComponent, isStandalone: true, selector: "nx-status-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "badgeType()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-size:12px;line-height:15.6px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);height:16px;width:fit-content;padding:2px 5px;border-radius:4px;color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host.default{background-color:var(--nxc-light10-offset, var(--nxc-light10))}:host.warning{background-color:var(--nxc-attention-yellow)}:host.danger{background-color:var(--nxc-attention-red)}:host.success{background-color:var(--nxc-attention-green)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxStatusBadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-status-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                        '[class]': 'badgeType()',
                    }, template: "<ng-content></ng-content>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{font-size:12px;line-height:15.6px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-medium-font-weight);height:16px;width:fit-content;padding:2px 5px;border-radius:4px;color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host.default{background-color:var(--nxc-light10-offset, var(--nxc-light10))}:host.warning{background-color:var(--nxc-attention-yellow)}:host.danger{background-color:var(--nxc-attention-red)}:host.success{background-color:var(--nxc-attention-green)}\n"] }]
        }] });

/** Active state for elements which prevent default on mousedown to keep focus elsewhere */
class NxPseudoActiveDirective {
    constructor() {
        this.active = signal(false);
    }
    onMouseDown(event) {
        if (event.button === 0) {
            // Only main button
            this.active.set(true);
        }
    }
    // Active state persists after mouse exit
    onMouseUp() {
        this.active.set(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxPseudoActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.3", type: NxPseudoActiveDirective, isStandalone: true, selector: "[nxPseudoActive]", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mouseup": "onMouseUp($event)" }, properties: { "class.nx-pseudo-active": "active()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxPseudoActiveDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxPseudoActive]',
                    host: {
                        '[class.nx-pseudo-active]': 'active()',
                        '(mousedown)': 'onMouseDown($event)',
                    },
                }]
        }], propDecorators: { onMouseUp: [{
                type: HostListener,
                args: ['window:mouseup', ['$event']]
            }] } });

const NxSelectToken = new InjectionToken('Injection token for select components');

/** Option component for select/multiselect */
class NxOptionComponent {
    constructor() {
        /** Value of the option */
        this.value = input.required();
        /** Text displayed in the trigger when the option is selected */
        this.labelInput = input('', { alias: 'label' });
        this.host = inject(ElementRef);
        this.textContent = signal('');
        this.label = computed(() => this.labelInput() || this.textContent());
        /** Disabled state */
        this.disabledInput = input(false, {
            alias: 'disabled',
            transform: booleanAttribute,
        });
        // eslint-disable-next-line @angular-eslint/no-output-rename
        this.disabledOutput = output({ alias: 'disabled' });
        this.disabledSignal = linkedSignal(() => this.disabledInput());
        this._disabledInputEffect = effect(() => {
            const disabled = this.disabledInput();
            untracked(() => {
                this.disabledSignal.set(disabled);
                this.disabledOutput.emit(disabled);
            });
        });
        this.ariaDisabled = ariaComputed(this.disabledSignal);
        this.active = signal(false);
        this.selectComponent = inject(NxSelectToken, { skipSelf: true });
        this.selected = computed(() => this.selectComponent.multiple
            ? this.selectComponent.selected().includes(this)
            : this.selectComponent.selected() === this);
        this._unselectEffect = effect(() => {
            const [disabled, selected] = [this.disabledSignal(), this.selected()];
            if (disabled && selected) {
                untracked(() => {
                    this.selectComponent.unselect(this);
                });
            }
        });
        this._disabledEffect = effect(() => {
            this.disabled = this.disabledSignal();
        });
        // Highlightable
        this.disabled = false;
    }
    ngAfterContentInit() {
        this.textContent.set(this.host.nativeElement.textContent ?? '');
    }
    select() {
        this.selectComponent.select(this);
    }
    setActiveStyles() {
        this.active.set(true);
    }
    setInactiveStyles() {
        this.active.set(false);
    }
    getLabel() {
        return this.label();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: NxOptionComponent, isStandalone: true, selector: "nx-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, labelInput: { classPropertyName: "labelInput", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabledOutput: "disabled" }, host: { attributes: { "role": "option" }, listeners: { "mousedown": "$event.preventDefault()", "click": "select()" }, properties: { "attr.aria-disabled": "ariaDisabled()", "class.nx-option--active": "active()", "class.nx-option--selected": "selected()", "class.nx-option--single": "!multiple" } }, hostDirectives: [{ directive: NxPseudoActiveDirective }], ngImport: i0, template: "<span><ng-content></ng-content></span>\n@if (selected()) {\n    <nx-icon\n        icon=\"Check20X20\"\n        preserveSize\n        useCurrentColor\n    ></nx-icon>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:.25rem 1rem}:host.nx-option--single{padding-inline-end:.625rem}:host span{font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}:host[aria-disabled=false]{cursor:pointer}:host[aria-disabled=false].nx-option--active,:host[aria-disabled=false]:hover{background-color:var(--nxc-brand);color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host[aria-disabled=false].nx-pseudo-active{background-color:hsl(from var(--nxc-brand) h s calc(l - 9))}:host[aria-disabled=true]{cursor:default;opacity:.3}:host[aria-disabled=true].nx-option--active{background-color:var(--nxc-brand)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-option', imports: [CommonModule, NxIconComponent], host: {
                        role: 'option',
                        '[attr.aria-disabled]': 'ariaDisabled()',
                        '[class.nx-option--active]': 'active()',
                        '[class.nx-option--selected]': 'selected()',
                        '[class.nx-option--single]': '!multiple',
                        '(mousedown)': '$event.preventDefault()',
                        '(click)': 'select()',
                    }, hostDirectives: [NxPseudoActiveDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span><ng-content></ng-content></span>\n@if (selected()) {\n    <nx-icon\n        icon=\"Check20X20\"\n        preserveSize\n        useCurrentColor\n    ></nx-icon>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:.25rem 1rem}:host.nx-option--single{padding-inline-end:.625rem}:host span{font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}:host[aria-disabled=false]{cursor:pointer}:host[aria-disabled=false].nx-option--active,:host[aria-disabled=false]:hover{background-color:var(--nxc-brand);color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host[aria-disabled=false].nx-pseudo-active{background-color:hsl(from var(--nxc-brand) h s calc(l - 9))}:host[aria-disabled=true]{cursor:default;opacity:.3}:host[aria-disabled=true].nx-option--active{background-color:var(--nxc-brand)}\n"] }]
        }] });

/** Stylized divider for `nx-option` */
class NxOptionDividerComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxOptionDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxOptionDividerComponent, isStandalone: true, selector: "hr[nx-option-divider]", ngImport: i0, template: '', isInline: true, styles: [":host{height:0;border:none;border-bottom:1px solid var(--nxc-dark12-offset, var(--nxc-dark12));margin:.375rem 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxOptionDividerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'hr[nx-option-divider]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{height:0;border:none;border-bottom:1px solid var(--nxc-dark12-offset, var(--nxc-dark12));margin:.375rem 1rem}\n"] }]
        }] });

/** Container component for select options.
 *
 * Required because the projected options are portalled to an overlay outside
 * the select host so we need a separate component to extend `BaseComponent`
 * for CSS variables.
 */
class NxOptionsContainerComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.host = inject(ElementRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxOptionsContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NxOptionsContainerComponent, isStandalone: true, selector: "nx-options-container", host: { attributes: { "role": "listbox" }, listeners: { "mousedown": "$event.preventDefault()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative;padding:6px 0;border-radius:6px;background-color:var(--nxc-dark10-offset, var(--nxc-dark10));max-height:calc((24px + .5rem)*7);overflow-y:auto;display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxOptionsContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-options-container', template: `<ng-content></ng-content>`, host: {
                        role: 'listbox',
                        '(mousedown)': '$event.preventDefault()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;padding:6px 0;border-radius:6px;background-color:var(--nxc-dark10-offset, var(--nxc-dark10));max-height:calc((24px + .5rem)*7);overflow-y:auto;display:block;width:100%}\n"] }]
        }] });

const NxSelectPlaceholderToken = new InjectionToken('Default placeholder for nx-select');

const NxSelectZeroOptionsPlaceholderToken = new InjectionToken('Default zero options placeholder for nx-select');

/** Component for selecting a value from a set of options */
class NxSelectComponent extends NxInputLikeComponent {
    constructor() {
        super(...arguments);
        this.multiple = false;
        this.defaultPlaceholderToken = inject(NxSelectPlaceholderToken, { optional: true }) ?? signal(null).asReadonly();
        this.defaultPlaceholder = typeof this.defaultPlaceholderToken === 'string'
            ? signal(this.defaultPlaceholderToken)
            : this.defaultPlaceholderToken;
        /** Text diplayed when no option is selected */
        this.placeholder = input();
        this.injector = inject(Injector);
        this.destroyRef = inject(DestroyRef);
        this.host = inject(ElementRef);
        this.onChange = (_) => { };
        this.onTouched = () => { };
        /** Disabled state */
        this.disabledInput = input(false, {
            alias: 'disabled',
            transform: booleanAttribute,
        });
        // eslint-disable-next-line @angular-eslint/no-output-rename
        this.disabledOutput = output({ alias: 'disabled' });
        this.cvaDisabled = signal(false);
        this.disabled = computed(() => this.cvaDisabled() || this.disabledInput() || this.zeroOptions());
        this._disabledInputEffect = effect(() => {
            const disabled = this.disabled();
            untracked(() => {
                this.disabledOutput.emit(disabled);
            });
        });
        this._closeOnDisableEffect = effect(() => {
            if (this.disabled()) {
                untracked(() => this.close());
            }
        });
        /** Value of the select */
        this.valueModel = model(null, { alias: 'value' });
        this._valueModelEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.valueModel();
            untracked(() => {
                this.writeValue(value);
            });
        });
        this.value = signal(null);
        this._valueEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.value();
            const overlayOpen = untracked(this.overlayOpen);
            const selected = untracked(this.selected);
            const options = untracked(this.options);
            const allowNullSelect = untracked(this.allowNullSelect);
            untracked(() => {
                const resetSelection = () => {
                    this.selected.set(undefined);
                    if (!overlayOpen) {
                        this.keyManager.setActiveItem(-1);
                    }
                };
                if (value !== null || allowNullSelect) {
                    if (!selected || selected.value !== value) {
                        const match = options.find(o => o.value() === value);
                        if (match) {
                            this.selected.set(match);
                            this.keyManager.setActiveItem(match);
                        }
                        else {
                            resetSelection();
                        }
                    }
                }
                else {
                    resetSelection();
                }
            });
        });
        /** Whether a value is required in a form */
        this.required = input(false, { transform: booleanAttribute });
        this.selected = signal(undefined);
        this.options = contentChildren(NxOptionComponent);
        this.zeroOptions = computed(() => !this.options().length);
        this._zeroOptionEffect = effect(() => {
            if (this.zeroOptions()) {
                this.close();
            }
        });
        this.defaultZeroOptionPlaceholderToken = inject(NxSelectZeroOptionsPlaceholderToken, { optional: true }) ??
            signal(null).asReadonly();
        this.defaultZeroOptionPlaceholder = typeof this.defaultZeroOptionPlaceholderToken === 'string'
            ? signal(this.defaultZeroOptionPlaceholderToken)
            : this.defaultZeroOptionPlaceholderToken;
        /** Text displayed when there are no options */
        this.zeroOptionsPlaceholder = input();
        this._optionsChangeEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const options = this.options();
            const selected = untracked(this.selected);
            const optionsContainer = untracked(this.optionsContainer);
            if (new Set(options.map(o => o.value)).size < options.length) {
                throw Error('Behavior is undefined with non-unique option values');
            }
            untracked(() => {
                if (!options.length) {
                    this.close();
                    this.writeValue(null);
                    return;
                }
                if (selected && !options.includes(selected)) {
                    this.writeValue(null);
                    return; // Active item will be reset in value effect
                }
                const { activeItem } = this.keyManager;
                if (activeItem) {
                    if (!options.includes(activeItem)) {
                        this.keyManager.setActiveItem(-1);
                    }
                    else if (optionsContainer) {
                        this.scrollOptionIntoView(activeItem);
                    }
                }
            });
        });
        this.ariaDisabled = ariaComputed(this.disabled);
        /** Allows options with `null` value to be selected instead of clearing the select */
        this.allowNullSelect = input(false, { transform: booleanAttribute });
        this.connectedOverlay = viewChild.required(CdkConnectedOverlay);
        this.overlayOpen = signal(false);
        this.ariaExpanded = ariaComputed(this.overlayOpen);
        this.overlayWidth = signal(0);
        this.overlayPositions = [
            connectedPosition({ originPoint: 'SW', overlayPoint: 'NW', offsetY: 8 }),
            connectedPosition({ originPoint: 'NW', overlayPoint: 'SW', offsetY: -8 }),
        ];
        this.optionsContainer = viewChild(NxOptionsContainerComponent);
        /** Compatibility hack for v19, previously effects fired after content init */
        this.afterContentInit = signal(false);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.cvaDisabled.set(isDisabled);
    }
    writeValue(value) {
        if (value !== this.value()) {
            this.value.set(value);
            this.valueModel.set(value);
            this.onChange(value);
        }
    }
    validate(control) {
        const nullValue = control.value === null && !this.allowNullSelect();
        return this.required() && nullValue ? { required: true } : null;
    }
    ngAfterContentInit() {
        this.keyManager = new ActiveDescendantKeyManager(this.options, this.injector)
            .withTypeAhead()
            .withHorizontalOrientation('ltr')
            .withHomeAndEnd()
            .withPageUpDown()
            .skipPredicate(option => {
            if (this.overlayOpen()) {
                return false;
            }
            else {
                return option.disabled || (option.value() === null && !this.allowNullSelect());
                /* Don't allow resetting from keyboard while closed
                since user might not know reset option is next/previous
                or might want to get to options on the other side */
            }
        });
        this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            if (this.overlayOpen()) {
                // When the active item is set while opening the container is not rendered yet
                if (this.optionsContainer()) {
                    if (this.keyManager.activeItem) {
                        this.scrollOptionIntoView(this.keyManager.activeItem);
                    }
                    else {
                        this.optionsContainer().host.nativeElement.scrollTop = 0;
                    }
                }
            }
            else {
                this.keyManager.activeItem?.select();
            }
        });
        this.afterContentInit.set(true);
    }
    ngOnDestroy() {
        this.keyManager.destroy();
    }
    onBlur() {
        this.close();
        this.keyManager.cancelTypeahead();
        this.onTouched();
    }
    onKeyDown(event) {
        if (this.disabled()) {
            if (event.key === 'Tab') {
                return; // Allow tabbing away on disabled after click
            }
            else {
                event.preventDefault();
                return;
            }
        }
        if (!this.overlayOpen()) {
            this.onClosedKeyDown(event);
        }
        else {
            this.onOpenKeyDown(event);
        }
    }
    onClosedKeyDown(event) {
        if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
            (event.key === ' ' && !this.keyManager.isTyping())) {
            event.preventDefault();
            this.open();
        }
        else {
            this.keyManager.onKeydown(event);
        }
    }
    onClick() {
        if (this.disabled()) {
            return;
        }
        if (this.overlayOpen()) {
            this.close();
        }
        else {
            this.open();
        }
    }
    open() {
        if (this.overlayOpen()) {
            return;
        }
        this.overlayWidth.set(this.host.nativeElement.offsetWidth);
        this.overlayOpen.set(true);
        this.keyManager.withVerticalOrientation();
        this.keyManager.withHorizontalOrientation(null);
        const selected = this.selected();
        /* Overlay has to be set to open before setting active item
        to avoid selecting the item on open */
        if (selected) {
            this.keyManager.setActiveItem(selected);
        }
        else {
            this.keyManager.setActiveItem(-1);
        }
        this.connectedOverlay()
            .positionChange.pipe(take(1))
            .subscribe(() => {
            if (this.keyManager.activeItem) {
                this.scrollOptionIntoView(this.keyManager.activeItem);
            }
        });
    }
    scrollOptionIntoView(option) {
        scrollItemIntoView(option.host.nativeElement, this.optionsContainer().host.nativeElement);
    }
    onOpenKeyDown(event) {
        if (event.key === 'Enter' || (event.key === ' ' && !this.keyManager.isTyping())) {
            if (this.keyManager.activeItem) {
                this.select(this.keyManager.activeItem);
            }
            else {
                this.close();
            }
        }
        else {
            this.keyManager.onKeydown(event);
        }
    }
    select(option) {
        if (option.disabledSignal()) {
            return;
        }
        const value = option.value();
        if (value !== null || this.allowNullSelect()) {
            this.selected.set(option);
            this.writeValue(value);
        }
        else {
            this.selected.set(undefined);
            this.writeValue(null);
        }
        this.close();
    }
    /** Called from option when it is disabled */
    unselect(_) {
        this.selected.set(undefined);
        this.writeValue(null);
    }
    onOverlayKeyDown(event) {
        // Esc detaches overlay, manually update internal state
        if (event.key === 'Escape') {
            event.preventDefault();
            this.close();
        }
    }
    onOutsideClick(event) {
        if (!clickedInside(event, this.host.nativeElement)) {
            this.close();
        }
    }
    close() {
        if (!this.overlayOpen()) {
            return;
        }
        this.overlayOpen.set(false);
        this.keyManager.cancelTypeahead();
        this.keyManager.withVerticalOrientation(false);
        this.keyManager.withHorizontalOrientation('ltr');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.3", type: NxSelectComponent, isStandalone: true, selector: "nx-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, zeroOptionsPlaceholder: { classPropertyName: "zeroOptionsPlaceholder", publicName: "zeroOptionsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowNullSelect: { classPropertyName: "allowNullSelect", publicName: "allowNullSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabledOutput: "disabled", valueModel: "valueChange" }, host: { attributes: { "role": "combobox" }, listeners: { "keydown": "onKeyDown($event)", "click": "onClick()", "blur": "onBlur($event)" }, properties: { "attr.aria-disabled": "ariaDisabled()", "attr.aria-expanded": "ariaExpanded()", "tabindex": "disabled() ? -1 : 0" } }, providers: [
            {
                provide: NxSelectToken,
                useExisting: forwardRef(() => NxSelectComponent),
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxSelectComponent),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => NxSelectComponent),
                multi: true,
            },
        ], queries: [{ propertyName: "options", predicate: NxOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: NxOptionsContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: NxFormFieldControlDirective }], ngImport: i0, template: "<span\n    class=\"nx-select__text\"\n    [class.nx-select__text--placeholder]=\"!selected()\"\n    >{{\n        zeroOptions()\n            ? (zeroOptionsPlaceholder() ?? defaultZeroOptionPlaceholder())\n            : (selected()?.label() ?? placeholder() ?? defaultPlaceholder())\n    }}</span\n>\n\n<div class=\"nx-select__icon\">\n    <nx-icon icon=\"ArrowDown20X20\"></nx-icon>\n</div>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"host\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    (overlayKeydown)=\"onOverlayKeyDown($event)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n    <nx-options-container>\n        <ng-content></ng-content>\n    </nx-options-container>\n</ng-template>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{--input-color: var(--nxc-light4-offset, var(--nxc-light4));color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none;cursor:pointer;display:flex;box-sizing:border-box;align-items:center;-webkit-user-select:none;user-select:none}:host.nx-input-like--dark{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark3-offset, var(--nxc-dark3));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark5-offset, var(--nxc-dark5));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark8-offset, var(--nxc-dark8))}:host.nx-input-like--light{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark5-offset, var(--nxc-dark5));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark7-offset, var(--nxc-dark7));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark11-offset, var(--nxc-dark11))}:host.nx-input-like--large{padding:.4375rem .6875rem;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host.nx-input-like--small{padding:.28125rem .6875rem;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host:hover{border-color:var(--border-color-hover)}:host:active{border-color:hsl(from var(--border-color-hover) h s calc(l - 9))}:host[aria-invalid=true]{border-color:var(--nxc-attention-red)}:host[aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3%))}}:host:focus-visible{border-color:var(--nxc-brand)}:host:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3%))}}:host[aria-disabled=true],:host[aria-readonly=true]{cursor:default;color:var(--input-color-disabled);border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}:host .nx-select__text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .nx-select__text--placeholder{color:var(--placeholder-color)}:host .nx-select__icon{display:flex;justify-content:center;align-items:center;height:1.25rem;width:1.25rem}:host[aria-disabled=true] nx-icon{opacity:.3}:host[aria-expanded=true]{border-color:var(--nxc-brand)}:host[aria-expanded=true]:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[aria-expanded=true]:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3%))}}:host[aria-expanded=true] nx-icon{transform:scaleY(-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: NxOptionsContainerComponent, selector: "nx-options-container" }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-select', imports: [CommonModule, OverlayModule, NxOptionsContainerComponent, NxIconComponent], providers: [
                        {
                            provide: NxSelectToken,
                            useExisting: forwardRef(() => NxSelectComponent),
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxSelectComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => NxSelectComponent),
                            multi: true,
                        },
                    ], host: {
                        role: 'combobox',
                        '[attr.aria-disabled]': 'ariaDisabled()',
                        '[attr.aria-expanded]': 'ariaExpanded()',
                        '[tabindex]': 'disabled() ? -1 : 0',
                        '(keydown)': 'onKeyDown($event)',
                        '(click)': 'onClick()',
                        '(blur)': 'onBlur($event)',
                    }, hostDirectives: [NxFormFieldControlDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    class=\"nx-select__text\"\n    [class.nx-select__text--placeholder]=\"!selected()\"\n    >{{\n        zeroOptions()\n            ? (zeroOptionsPlaceholder() ?? defaultZeroOptionPlaceholder())\n            : (selected()?.label() ?? placeholder() ?? defaultPlaceholder())\n    }}</span\n>\n\n<div class=\"nx-select__icon\">\n    <nx-icon icon=\"ArrowDown20X20\"></nx-icon>\n</div>\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"host\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    (overlayKeydown)=\"onOverlayKeyDown($event)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n    <nx-options-container>\n        <ng-content></ng-content>\n    </nx-options-container>\n</ng-template>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(../styles||file:./fonts/roboto-flex/roboto-flex-variable.woff2) format(\"woff2-variations\")}:host{--nxc-font-generic: var(--nxc-main-font-generic, Helvetica Neue, Helvetica, Arial);--nxc-font-family: var(--nxc-main-font-family, RobotoFlex), var(--nxc-font-generic), sans-serif;--nxc-regular-font-weight: var(--nxc-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-font-grade, 0);--nxc-font-width: var(--nxc-font-width, 100);--nxc-font-thick-stroke: var(--nxc-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-font-slant, 0);--nxc-font-rendering: var(--nxc-font-rendering, geometricPrecision)}:host{--input-color: var(--nxc-light4-offset, var(--nxc-light4));color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none;cursor:pointer;display:flex;box-sizing:border-box;align-items:center;-webkit-user-select:none;user-select:none}:host.nx-input-like--dark{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark3-offset, var(--nxc-dark3));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark5-offset, var(--nxc-dark5));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark8-offset, var(--nxc-dark8))}:host.nx-input-like--light{--input-color-disabled: var(--nxc-light10-offset, var(--nxc-light10));--background-color: var(--nxc-dark5-offset, var(--nxc-dark5));--background-color-disabled: hsla(from var(--background-color) h s l / .3);--border-color: var(--nxc-dark7-offset, var(--nxc-dark7));--border-color-hover: var(--nxc-dark15-offset, var(--nxc-dark15));--border-color-disabled: hsla(from var(--border-color) h s l / .3);--placeholder-color: var(--nxc-dark11-offset, var(--nxc-dark11))}:host.nx-input-like--large{padding:.4375rem .6875rem;font-size:16px;line-height:24px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host.nx-input-like--small{padding:.28125rem .6875rem;font-size:14px;line-height:21px;font-family:var(--nxc-font-family);font-optical-sizing:var(--nxc-font-optical-sizing);font-variation-settings:\"slnt\" var(--nxc-font-slant),\"GRAD\" var(--nxc-font-grade),\"XOPQ\" var(--nxc-font-thick-stroke),\"YOPQ\" var(--nxc-font-thin-stroke),\"wdth\" var(--nxc-font-width);text-rendering:var(--nxc-font-rendering);font-weight:var(--nxc-regular-font-weight)}:host:hover{border-color:var(--border-color-hover)}:host:active{border-color:hsl(from var(--border-color-hover) h s calc(l - 9))}:host[aria-invalid=true]{border-color:var(--nxc-attention-red)}:host[aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[aria-invalid=true]:active{border-color:hsl(from var(--nxc-attention-red) h s calc(l - 3%))}}:host:focus-visible{border-color:var(--nxc-brand)}:host:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:focus-visible:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3%))}}:host[aria-disabled=true],:host[aria-readonly=true]{cursor:default;color:var(--input-color-disabled);border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}:host .nx-select__text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .nx-select__text--placeholder{color:var(--placeholder-color)}:host .nx-select__icon{display:flex;justify-content:center;align-items:center;height:1.25rem;width:1.25rem}:host[aria-disabled=true] nx-icon{opacity:.3}:host[aria-expanded=true]{border-color:var(--nxc-brand)}:host[aria-expanded=true]:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host[aria-expanded=true]:active{border-color:hsl(from var(--nxc-brand) h s calc(l - 3%))}}:host[aria-expanded=true] nx-icon{transform:scaleY(-1)}\n"] }]
        }] });

const imports = [NxSelectComponent, NxOptionComponent, NxOptionDividerComponent];
class NxSelectModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: NxSelectModule, imports: [NxSelectComponent, NxOptionComponent, NxOptionDividerComponent], exports: [NxSelectComponent, NxOptionComponent, NxOptionDividerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSelectModule, imports: [NxSelectComponent, NxOptionComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NxSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    imports,
                    exports: imports,
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { BaseComponent, BaseControlValueAccessor, ColorGenerator, NX_ANCHOR_HOST, NX_BASE_ERROR_MATCHES, NX_BUTTON_HOST, NX_NOTIFICATIONS_DEFAULT_DURATION_MS, NX_NOTIFICATIONS_DEFAULT_TYPE, NxAnchorComponent, NxApplyActionParentDirective, NxApplyActionTargetDirective, NxButtonComponent, NxCalendarComponent, NxCheckboxComponent, NxControlMessageComponent, NxControlMessageToken, NxControlMessagesComponent, NxControlMessagesToken, NxExampleComponent, NxFormFieldComponent, NxFormFieldControlDirective, NxFormFieldModule, NxFormFieldToken, NxFormObserverDirective, NxIconComponent, NxInputComponent, NxInputFieldComponent, NxInputFieldModule, NxInputMaskToken, NxLabelComponent, NxLayoutComponent, NxLoadingSkeletonDirective, NxLoadingSpinnerDirective, NxMenuComponent, NxMenuProjectionDirective, NxNotificationsComponent, NxNotificationsService, NxOptionComponent, NxOptionDividerComponent, NxPlaybackSliderComponent, NxPseudoActiveDirective, NxSelectComponent, NxSelectModule, NxSelectPlaceholderToken, NxSelectZeroOptionsPlaceholderToken, NxSettingSliderComponent, NxStatusBadgeComponent, NxStyleWrapperComponent, NxSwappedAbstractBaseDirective, NxTemplatePlaceholderDirective, NxThemeProviderService, NxVolumeSliderComponent, __NxUseFormStyleDirective, additionalColors, attentionColors, brandColors, colorsWithoutShade, contrastColors, errorMatcherFactory, extractOpacity, generateCssVariableName, generateHslaString, generateHslaStringUsingHct, generateShades, generatedThemeColors, getHexStringFromTheme, getTonalPaletteInstance, hctToHsl, highContrastShades, initialOptions, initialShade, initialTheme, isHexString, isHexStrings, isThemeColorWithoutShade, opacityDelimiter, opacityMap, registerAsCustomElement, registerCustomElementsFromMapping, registerStyleWrapper, shadeDelimiter, shades, stepCount, themeColors, withGeneratedColors };
//# sourceMappingURL=networkoptix-nx-components.mjs.map
