import * as i0 from '@angular/core';
import { InjectionToken, signal, computed, Injectable, inject, ElementRef, input, effect, Directive, model, booleanAttribute, ChangeDetectionStrategy, Component, Injector, EventEmitter, HostListener, Output, untracked, ViewContainerRef, DestroyRef, output, TemplateRef, createComponent, Renderer2, EnvironmentInjector, ContentChildren, viewChild, forwardRef, NgZone, ViewEncapsulation, viewChildren, HostBinding, Input, contentChild, NgModule, runInInjectionContext, provideZonelessChangeDetection, reflectComponentType, contentChildren, Pipe } from '@angular/core';
import * as i1$3 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR, FormGroupDirective, isFormGroup, isFormArray, NgControl, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
import { hex, hsl } from 'color-convert';
import { v5, NIL, v4 } from 'uuid';
import { TonalPalette, argbFromRgb } from '@material/material-color-utilities';
import { memoize, clamp, capitalize, flow, size, toLower, escapeRegExp } 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, share, takeUntil, skip, throttleTime, skipWhile } from 'rxjs';
import * as i2 from '@angular/cdk/drag-drop';
import { DragDropModule, CdkDrag, moveItemInArray, CdkDropList, CdkDragHandle, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
import * as i3 from '@angular/cdk/portal';
import { TemplatePortal, PortalModule, ComponentPortal, DomPortal } from '@angular/cdk/portal';
import * as i1 from '@angular/common';
import { CommonModule, NgTemplateOutlet } from '@angular/common';
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1$1 from '@angular/router';
import { Router, NavigationStart, ActivatedRoute, RouterModule } from '@angular/router';
import { extractAllColors, getIcon, removeInlineStyles, removeHeight, removeWidth, fullHeightAutoWidth, NxIconEnum } from 'nx-icons';
import { isSameDay } from 'date-fns';
import * as i1$2 from 'nx-shared';
import { ariaComputed, NxThemeAttributeDirective, writeOnlySignal, markAllAsDirty, NxPasswordManagerDisableDirective, coerceSignal, 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';
import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
import { CdkStep, CdkStepperModule, CdkStepper } from '@angular/cdk/stepper';

// 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 isSvgFilterUrl = (color) => /url\(#.*?\)/.test(color);
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);
    }
}

/**
 * Injection token carrying a `Signal<ThemeMode>` provided by the nearest `nxThemeMode` directive
 * (on this node or an ancestor). The signal carries the *resolved* effective mode. Components read
 * it (optionally) to discover their effective mode lock; `BaseComponent` does this for theming.
 */
const NX_THEME_MODE = new InjectionToken('NX_THEME_MODE');

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';
            // Only apply opacity fade-in for iframes that don't have nx-skip-opacity class
            // This prevents interference with iframes that use View Transitions API
            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 };
        }, ...(ngDevMode ? [{ debugName: "currentTheme" }] : []));
        this.colors = computed(() => this.colorGenerator.createTheme(this.currentTheme()), ...(ngDevMode ? [{ debugName: "colors" }] : []));
        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);
            if (window.IS_STORYBOOK) {
                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: "20.1.6", ngImport: i0, type: NxThemeProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxThemeProviderService, providedIn: 'platform' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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);
        /**
         * Effective theme mode for this component, resolved by the nearest `nxThemeMode` ancestor
         * (or the directive on this same node). `protected` so subclasses can read the resolved
         * mode; not `skipSelf`, so a lock provided on this element is honored.
         */
        this.effectiveThemeMode = inject(NX_THEME_MODE, { optional: true });
        /**
         * @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, ...(ngDevMode ? [{ debugName: "targetSurface" }] : []));
        /**
         * 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));
        }, ...(ngDevMode ? [{ debugName: "localShadeOffset" }] : []));
        /**
         * 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(() => ({}), ...(ngDevMode ? [{ debugName: "variableColors" }] : []));
        /** Example
         * ```
         *   override fontVariables = computed(() => ({
         *      '--nxc-main-font-family': 'Roboto',
         *      '--nxc-main-font-generic': 'sans-serif',
         *      } as const));
         * ```
         */
        this.fontVariables = computed(() => ({}), ...(ngDevMode ? [{ debugName: "fontVariables" }] : []));
        // Add common colors here
        this.commonColors = { ...fontColorsCommon, ...commonColors };
        this.contrastColorsNeeded = [
            '--nxc-attention-red',
            '--nxc-attention-green',
            '--nxc-attention-yellow',
            '--nxc-attention-blue',
            '--nxc-brand',
        ];
        /**
         * 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',
            };
            // The nearest nxThemeMode directive (this node or an ancestor) has already resolved the
            // effective mode. 'light'/'dark' force that mode; 'global' falls through to the index.html
            // theme; 'inherit' (or no provider) is transparent.
            const resolvedMode = this.effectiveThemeMode?.() ?? 'inherit';
            const modeOverride = resolvedMode === 'light' || resolvedMode === 'dark'
                ? { inverse: resolvedMode === 'dark' }
                : undefined;
            // themeOptionOverride carries non-mode options; mode override wins for `inverse`.
            const localOptionOverride = this.themeOptionOverride?.();
            const themeOverride = localOptionOverride || modeOverride
                ? { ...localOptionOverride, ...modeOverride }
                : undefined;
            const themeColors = themeOverride
                ? this.themeProvider.getColorsWithThemeOverride(themeOverride)
                : this.themeProvider.colors();
            // Build the list of CSS custom property writes for color and mode-dependent vars.
            // Collected as tuples so we can apply them to a single target — the host element when
            // a lock is in effect, or the global `:root` style tag otherwise.
            const themeWrites = [];
            Object.entries(colorVariablesDeclarations).forEach(([variableName, colorName]) => {
                const baseVar = useNative(colorName)
                    ? colorName
                    : `${colorName.startsWith('--') ? colorName : `--${colorName}`}`;
                if (!useNative(colorName)) {
                    const parsedColor = themeColors[colorName];
                    themeWrites.push([baseVar, parsedColor]);
                    if (this.contrastColorsNeeded.includes(variableName)) {
                        const contrastColor = this.getContrastColor(parsedColor, themeColors);
                        themeWrites.push([`${variableName}-contrast`, contrastColor]);
                    }
                }
                themeWrites.push([
                    variableName.startsWith('--') ? variableName : `--${variableName}`,
                    useNative(colorName) ? colorName : `var(${baseVar})`,
                ]);
            });
            // Theme option css variables
            const { options } = this.themeProvider.currentTheme();
            const resolvedOptions = themeOverride ? { ...options, ...themeOverride } : options;
            const offset = resolvedOptions.offset || 0;
            const inverse = resolvedOptions.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]) => themeWrites.push([variableName, variableValue]));
            // Scope the writes when the component has an effective lock so the variables cascade
            // through this subtree only, not the whole page. When unlocked, write to the global
            // `:root` style tag and clear any stale host-scoped values from a previous lock.
            const isLocked = resolvedMode !== 'inherit';
            const writeTarget = isLocked ? this.elRef.nativeElement : undefined;
            themeWrites.forEach(([name, value]) => this.setProperty(name, value, writeTarget));
            if (!isLocked) {
                const hostStyle = this.elRef.nativeElement.style;
                themeWrites.forEach(([name]) => hostStyle.removeProperty(name));
            }
            Object.entries(this.fontVariables()).forEach(([variableName, variableValue]) => this.setProperty(variableName, String(variableValue)));
            const localShadeOffset = this.localShadeOffset();
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            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));
                }
            }
        }, ...(ngDevMode ? [{ debugName: "updateStyleEffect" }] : []));
        /**
         * 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);
    }
    getRelativeLuminance(hslaString) {
        const getHSLFromHslaString = (hslaString) => {
            const regex = /hsla\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/;
            const match = hslaString.match(regex);
            if (match) {
                const h = parseFloat(match[1]);
                const s = parseFloat(match[2]);
                const l = parseFloat(match[3]);
                return [h, s, l];
            }
            return [0, 0, 0];
        };
        // Extract individual HSL values from the HSLA string
        const [h, s, l] = getHSLFromHslaString(hslaString);
        // Convert HSL to RGB
        const rgb = hsl.rgb([h, s, l]);
        /**
         * Calculate relative luminance using this formula
         * https://www.w3.org/TR/WCAG20/#relativeluminancedef
         * First, normalize RGB values to the range [0, 1]
         * Then, apply the formula to calculate relative luminance.
         */
        const [r, g, b] = rgb.map((value) => {
            const normalized = value / 255;
            return normalized <= 0.03928
                ? normalized / 12.92
                : Math.pow((normalized + 0.055) / 1.055, 2.4);
        });
        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    }
    getContrastColor(backgroundColor, themeColors) {
        const light1 = themeColors[this.commonColors['--nxc-light1']];
        const dark1 = themeColors[this.commonColors['--nxc-dark1']];
        const backgroundLuma = this.getRelativeLuminance(backgroundColor);
        const light1Luma = this.getRelativeLuminance(light1);
        const dark1Luma = this.getRelativeLuminance(dark1);
        const light1ContrastRatio = light1Luma > backgroundLuma
            ? (light1Luma + 0.05) / (backgroundLuma + 0.05)
            : (backgroundLuma + 0.05) / (light1Luma + 0.05);
        const dark1ContrastRatio = dark1Luma > backgroundLuma
            ? (dark1Luma + 0.05) / (backgroundLuma + 0.05)
            : (backgroundLuma + 0.05) / (dark1Luma + 0.05);
        // Use the color with the highest contrast ratio
        const useLight = light1ContrastRatio > dark1ContrastRatio;
        const contrastColor = useLight ? light1 : dark1;
        return contrastColor;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", 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', ...(ngDevMode ? [{ debugName: "testModel" }] : []));
        this.useHct = input(false, ...(ngDevMode ? [{ debugName: "useHct", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.coreSaturation = input(20, ...(ngDevMode ? [{ debugName: "coreSaturation" }] : []));
        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,
                },
            }));
        }, ...(ngDevMode ? [{ debugName: "syncOptionOverridesEffect" }] : []));
        this.themeOptionOverride = computed(() => ({
            useHct: this.useHct(),
            coreSaturation: this.coreSaturation(),
        }), ...(ngDevMode ? [{ debugName: "themeOptionOverride" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxExampleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxExampleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-example', imports: [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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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"] }]
        }] });

/**
 * Locks an element (and its subtree) to a theme mode.
 *
 * This directive owns the `themeMode` input and the inheritance resolution. It walks the ancestor
 * chain (`skipSelf`) and **provides** the resolved `NX_THEME_MODE` signal for its own node and
 * descendants. Any descendant `BaseComponent` (e.g. `nx-icon`) inherits the same lock by consuming
 * this token. Once `BaseComponent` consumes the token without `skipSelf`, the element the directive
 * sits on is themed by the resolved mode too.
 */
class NxThemeModeDirective {
    constructor() {
        this.themeMode = input('inherit', ...(ngDevMode ? [{ debugName: "themeMode", alias: 'nxThemeMode' }] : [{ alias: 'nxThemeMode' }]));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxThemeModeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: NxThemeModeDirective, isStandalone: true, selector: "[nxThemeMode]", inputs: { themeMode: { classPropertyName: "themeMode", publicName: "nxThemeMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NX_THEME_MODE,
                useFactory: () => {
                    const injector = inject(Injector);
                    const ancestor = inject(NX_THEME_MODE, {
                        skipSelf: true,
                        optional: true,
                    });
                    return computed(() => {
                        const local = injector.get(NxThemeModeDirective).themeMode();
                        if (local !== 'inherit') {
                            return local;
                        }
                        return ancestor?.() ?? 'inherit';
                    });
                },
            },
        ], exportAs: ["selectedThemeMode"], hostDirectives: [{ directive: BaseComponent }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxThemeModeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxThemeMode]',
                    exportAs: 'selectedThemeMode',
                    hostDirectives: [BaseComponent],
                    providers: [
                        {
                            provide: NX_THEME_MODE,
                            useFactory: () => {
                                const injector = inject(Injector);
                                const ancestor = inject(NX_THEME_MODE, {
                                    skipSelf: true,
                                    optional: true,
                                });
                                return computed(() => {
                                    const local = injector.get(NxThemeModeDirective).themeMode();
                                    if (local !== 'inherit') {
                                        return local;
                                    }
                                    return ancestor?.() ?? 'inherit';
                                });
                            },
                        },
                    ],
                }]
        }] });

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: "20.1.6", ngImport: i0, type: NxClickElsewhereDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", 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: "20.1.6", 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']]
            }] } });

/**
 * Side Sheet sizing and configuration contract.
 *
 * A side sheet is a right-anchored panel shown in one of two display modes and three sizes — see
 * {@link SideSheetConfig}. This minimal version manages a single sheet at a time (push *or*
 * overlay); the multi-sheet stack and its width budget are layered on later.
 */
/** Sheet widths in pixels, keyed by size name. */
const SIDE_SHEET_SIZES = { small: 360, medium: 672, large: 1032 };

/**
 * Single source of truth shared between {@link NxSideSheetService} (which owns the side-sheet
 * business rules) and `nx-layout` (which renders the sheet — `push` into its grid, `overlay` over
 * its content area). Both collaborators inject this service and read/write its signals.
 *
 * This minimal version holds at most one sheet at a time; the multi-sheet stack is layered on later.
 */
class NxSideSheetRegistry {
    constructor() {
        this._sheet = signal(null, ...(ngDevMode ? [{ debugName: "_sheet" }] : []));
        /** The single registered sheet, or `null`. */
        this.sheet = this._sheet.asReadonly();
        /** The open sheet when it is in `push` mode, else `null`. */
        this.pushSheet = computed(() => {
            const sheet = this._sheet();
            return sheet?.open && sheet.mode === 'push' ? sheet : null;
        }, ...(ngDevMode ? [{ debugName: "pushSheet" }] : []));
        /** The open sheet when it is in `overlay` mode, else `null`. */
        this.overlaySheet = computed(() => {
            const sheet = this._sheet();
            return sheet?.open && sheet.mode === 'overlay' ? sheet : null;
        }, ...(ngDevMode ? [{ debugName: "overlaySheet" }] : []));
        /** Whether the open overlay sheet requests a dimming backdrop. */
        this.overlayBackdrop = computed(() => !!this.overlaySheet()?.hasBackdrop, ...(ngDevMode ? [{ debugName: "overlayBackdrop" }] : []));
        /**
         * Number of mounted `nx-layout` hosts rendering this registry's sheet. A sheet can only become
         * visible if a host is present, so {@link NxSideSheetService.open} guards on {@link hasHost}.
         */
        this._hostCount = signal(0, ...(ngDevMode ? [{ debugName: "_hostCount" }] : []));
        /** Whether an `nx-layout` host is mounted to render the sheet from this registry. */
        this.hasHost = computed(() => this._hostCount() > 0, ...(ngDevMode ? [{ debugName: "hasHost" }] : []));
    }
    /** Largest width a sheet may be resized to (the `large` preset). */
    static { this.MAX_WIDTH_PX = SIDE_SHEET_SIZES.large; }
    /** Smallest width a sheet may be resized to (the `small` preset). */
    static { this.MIN_WIDTH_PX = SIDE_SHEET_SIZES.small; }
    /** Called by `nx-layout` when it mounts; returns a disconnect fn to call on its destroy. */
    connectHost() {
        this._hostCount.update(count => count + 1);
        let disconnected = false;
        return () => {
            if (disconnected) {
                return;
            }
            disconnected = true;
            this._hostCount.update(count => count - 1);
        };
    }
    /** Register (or replace) the single sheet. */
    register(state) {
        this._sheet.set(state);
    }
    /** Patch the current sheet, if any. */
    update(patch) {
        this._sheet.update(sheet => (sheet ? { ...sheet, ...patch } : sheet));
    }
    /** Clear the current sheet. */
    remove() {
        this._sheet.set(null);
    }
    /**
     * Reflect a resized width in the live state, hard-clamped to `[small, large]` so a drag never
     * produces an out-of-range sheet.
     */
    setResizedWidth(px) {
        const clamped = clamp(px, NxSideSheetRegistry.MIN_WIDTH_PX, NxSideSheetRegistry.MAX_WIDTH_PX);
        this.update({ sizePx: clamped });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetRegistry }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetRegistry, decorators: [{
            type: Injectable
        }] });

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]; }
    /**
     * Minimum content width (px) the layout insists on for a given available width: N columns of
     * `minColumnPx` + gap, clamped to `[1, 6]` columns and the configured `clampedSize`. Pulled out
     * of {@link spaceForContent} so the fit test can evaluate the content floor for the *post-drawer*
     * width (a push drawer narrows the usable canvas like a smaller viewport).
     */
    contentFloorFor(availableWidth) {
        const gap = 48;
        const columnSize = this.minColumnPx() + gap;
        const availableColumns = availableWidth / columnSize;
        const minContentColumns = clamp(availableColumns - 2, 1, 6);
        return Math.min(minContentColumns * columnSize, this.clampedSize());
    }
    ngAfterViewInit() {
        this.initializeEventListeners();
    }
    initializeEventListeners() {
        if (this.newCloudMode()) {
            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);
            }
        });
    }
    resizeComplete(event) {
        event.source._dragRef.reset();
        this.resizing.set(false);
    }
    constructor() {
        super();
        this.minColumnPx = input(216, ...(ngDevMode ? [{ debugName: "minColumnPx" }] : []));
        this.overlayAsideOverride = input(false, ...(ngDevMode ? [{ debugName: "overlayAsideOverride" }] : []));
        this.newCloudMode = input(false, ...(ngDevMode ? [{ debugName: "newCloudMode", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.asideOpen = model(false, ...(ngDevMode ? [{ debugName: "asideOpen" }] : []));
        this.hoverMenuOpen = model(false, ...(ngDevMode ? [{ debugName: "hoverMenuOpen" }] : []));
        this.secondaryMenuSize = model(NxLayoutComponent.DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "secondaryMenuSize" }] : []));
        this.drawerSize = model(NxLayoutComponent.DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "drawerSize" }] : []));
        this.notificationsSize = model(NxLayoutComponent.DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "notificationsSize" }] : []));
        this.hoverMenuSize = model(NxLayoutComponent.DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "hoverMenuSize" }] : []));
        this.drawerOpen = model(false, ...(ngDevMode ? [{ debugName: "drawerOpen" }] : []));
        this.showProjectedSecondaryMenu = model(true, ...(ngDevMode ? [{ debugName: "showProjectedSecondaryMenu" }] : []));
        this.layoutType = model('cards', ...(ngDevMode ? [{ debugName: "layoutType" }] : []));
        this.clampedSize = model(1000000, ...(ngDevMode ? [{ debugName: "clampedSize" }] : []));
        this.centered = model(false, ...(ngDevMode ? [{ debugName: "centered" }] : []));
        this.modal = model(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
        this.forceTop = input(false, ...(ngDevMode ? [{ debugName: "forceTop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.secondaryMenuModalOpen = model(false, ...(ngDevMode ? [{ debugName: "secondaryMenuModalOpen" }] : []));
        this.collapsible = model(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
        this.asideResizable = model(true, ...(ngDevMode ? [{ debugName: "asideResizable" }] : []));
        // TODO: Add event type for configuring and resetting the view
        this.columnSpanMain = model('-1', ...(ngDevMode ? [{ debugName: "columnSpanMain" }] : []));
        this.resizing = model(false, ...(ngDevMode ? [{ debugName: "resizing" }] : []));
        this.viewIdentifier = model('', ...(ngDevMode ? [{ debugName: "viewIdentifier" }] : []));
        this.closeOnContentClick = model(true, ...(ngDevMode ? [{ debugName: "closeOnContentClick" }] : []));
        this.isStoryBook = window.IS_STORYBOOK;
        this.width = signal(this.elRef.nativeElement.offsetWidth, ...(ngDevMode ? [{ debugName: "width" }] : []));
        this.overlayAside = computed(() => this.overlayAsideOverride() ||
            this.width() - this.clampedSecondaryMenuWidth()() < this.minColumnPx() * 2.5, ...(ngDevMode ? [{ debugName: "overlayAside" }] : []));
        this.showAsideOnGrid = computed(() => !this.overlayAside() && this.asideOpen(), ...(ngDevMode ? [{ debugName: "showAsideOnGrid" }] : []));
        this.showTopMenu = computed(() => {
            const width = this.width();
            const minPadding = 96;
            const leftPanelSize = this.asideExpanded() ? this.clampedSecondaryMenuWidth()() : 0;
            const rightPanelSize = !this.secondaryMenuModalOpen() && this.rightDrawerActive()
                ? this.clampedRightPanelSize()()
                : 0;
            return (width < 648 ||
                width + minPadding <
                    leftPanelSize + rightPanelSize + Math.max(this.spaceForContent(), 432));
        }, ...(ngDevMode ? [{ debugName: "showTopMenu" }] : []));
        this.router = inject(Router);
        this.sideSheetRegistry = inject(NxSideSheetRegistry);
        /** The push side sheet `nx-layout` renders in its reserved column. */
        this.pushSheet = this.sideSheetRegistry.pushSheet;
        /** The overlay side sheet `nx-layout` floats over the content area. */
        this.overlaySheet = this.sideSheetRegistry.overlaySheet;
        /** Whether the open overlay sheet requests the dimming backdrop. */
        this.overlayBackdrop = this.sideSheetRegistry.overlayBackdrop;
        /**
         * Legacy single right drawer (set via `useSecondaryMenu`). Rendered only when no push side
         * sheet is present.
         */
        this.legacyDrawerPortal = computed(() => {
            const rightDrawerPortal = this.rightDrawerPortal();
            const pushSheet = this.pushSheet();
            return pushSheet ? null : rightDrawerPortal;
        }, ...(ngDevMode ? [{ debugName: "legacyDrawerPortal" }] : []));
        /** True when the right column holds content (push sheet, legacy drawer, or legacy `drawerOpen`). */
        this.rightDrawerActive = computed(() => {
            const drawerOpen = this.drawerOpen();
            const rightDrawerPortal = !!this.rightDrawerPortal();
            const pushSheet = !!this.pushSheet();
            return drawerOpen || rightDrawerPortal || pushSheet;
        }, ...(ngDevMode ? [{ debugName: "rightDrawerActive" }] : []));
        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,
        }), ...(ngDevMode ? [{ debugName: "templateClasses" }] : []));
        /**
         * Width (px) the right side actually reserves: the push side sheet's live `sizePx` — its preset
         * (`small`/`medium`/`large`) or drag-resized width, already clamped to `[small, large]` by the
         * registry — when a sheet is open, otherwise the legacy drawer width. Mirrors the push branch of
         * {@link drawerWidth} so the fit test counts the real panel instead of the legacy `drawerSize`.
         */
        this.rightPanelPx = computed(() => {
            const pushSheet = this.pushSheet();
            const clampedRightPanelSize = this.clampedRightPanelSize()();
            return pushSheet ? pushSheet.sizePx : clampedRightPanelSize;
        }, ...(ngDevMode ? [{ debugName: "rightPanelPx" }] : []));
        this.canFitBothPanels = computed(() => {
            const leftPanelWidth = this.clampedSecondaryMenuWidth()();
            const rightPanelWidth = this.rightPanelPx();
            // A push drawer narrows the usable canvas like a smaller viewport, so weigh the aside against
            // the content floor for the *post-drawer* width. Sizing that floor on the full width (then
            // also subtracting the drawer) double-counts the drawer's space and over-reserves content.
            const availableAfterDrawer = this.availableWidth() - rightPanelWidth;
            return availableAfterDrawer - leftPanelWidth > this.contentFloorFor(availableAfterDrawer);
        }, ...(ngDevMode ? [{ debugName: "canFitBothPanels" }] : []));
        this.asideExpanded = computed(() => {
            const asideOpen = this.asideOpen();
            const canFitBothPanels = this.canFitBothPanels();
            const rightDrawerActive = this.rightDrawerActive();
            const secondaryMenuModalOpen = this.secondaryMenuModalOpen();
            return asideOpen ? canFitBothPanels || !rightDrawerActive : secondaryMenuModalOpen;
        }, ...(ngDevMode ? [{ debugName: "asideExpanded" }] : []));
        this.class = computed(() => {
            return {
                'overlay-aside': this.overlayAside(),
                'aside-open': this.asideExpanded() || this.secondaryMenuModalOpen(),
                'drawer-open': this.rightDrawerActive() && !this.secondaryMenuModalOpen(),
                // Distinguishes the new push side sheet from the legacy right drawer so drawer-only CSS
                // (e.g. the clamped-content gutter reset) does not apply to push sheets.
                'push-open': !!this.pushSheet(),
                'show-modal-overlay': this.showModalOverlay(),
                'show-secondary-modal-overlay': this.secondaryMenuModalOpen(),
                'resizing-panel': this.resizing(),
                'can-fit-both-panels': this.canFitBothPanels(),
                ...this.templateClasses(),
            };
        }, ...(ngDevMode ? [{ debugName: "class" }] : []));
        this.availableWidth = computed(() => {
            const gap = 48;
            const menuWidth = 72;
            return this.width() - menuWidth - gap;
        }, ...(ngDevMode ? [{ debugName: "availableWidth" }] : []));
        this.spaceForContent = computed(() => this.contentFloorFor(this.availableWidth()), ...(ngDevMode ? [{ debugName: "spaceForContent" }] : []));
        this.maxPanelWidth = computed(() => {
            const availableForPanels = this.availableWidth() - this.spaceForContent();
            return availableForPanels / 2;
        }, ...(ngDevMode ? [{ debugName: "maxPanelWidth" }] : []));
        this.clampedSecondaryMenuWidth = computed(() => (singleOpen = false) => clamp(this.secondaryMenuSize(), 248, this.maxPanelWidth() * (singleOpen ? 1 : 2)), ...(ngDevMode ? [{ debugName: "clampedSecondaryMenuWidth" }] : []));
        this.secondaryMenuOverlayWidth = computed(() => `${(() => {
            if (this.overlayAside()) {
                return clamp(this.secondaryMenuSize(), 248, this.width() - 144);
            }
            return this.clampedSecondaryMenuWidth()(this.drawerOpen() && this.canFitBothPanels());
        })()}px`, ...(ngDevMode ? [{ debugName: "secondaryMenuOverlayWidth" }] : []));
        this.clampedRightPanelSize = computed(() => (singleOpen = false) => clamp(this.drawerSize(), 248, this.maxPanelWidth() * (singleOpen ? 1 : 2)), ...(ngDevMode ? [{ debugName: "clampedRightPanelSize" }] : []));
        this.drawerWidth = computed(() => {
            const pushSheet = this.pushSheet();
            if (pushSheet) {
                return `${pushSheet.sizePx}px`;
            }
            const customModalWidth = this.customModalWidth();
            const clampedRightPanelSize = this.clampedRightPanelSize();
            const asideExpanded = this.asideExpanded();
            const canFitBothPanels = this.canFitBothPanels();
            return customModalWidth || `${clampedRightPanelSize(asideExpanded && canFitBothPanels)}px`;
        }, ...(ngDevMode ? [{ debugName: "drawerWidth" }] : []));
        this.drawerWidthChange = toObservable(this.drawerWidth);
        this.notificationOffset = computed(() => (this.drawerOpen() ? this.drawerWidth() : '0px'), ...(ngDevMode ? [{ debugName: "notificationOffset" }] : []));
        this.notificationsWidth = computed(() => `${clamp(this.notificationsSize(), 248, Math.max(648, this.width() / 2))}px`, ...(ngDevMode ? [{ debugName: "notificationsWidth" }] : []));
        this.secondaryMenuWidth = computed(() => {
            if ((this.showAsideOnGrid() || this.secondaryMenuModalOpen()) && !this.drawerOpen()) {
                return this.secondaryMenuOverlayWidth();
            }
            return '0px';
        }, ...(ngDevMode ? [{ debugName: "secondaryMenuWidth" }] : []));
        this.customModalWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "customModalWidth" }] : []));
        this.hoverMenuWidth = computed(() => `${this.hoverMenuSize()}px`, ...(ngDevMode ? [{ debugName: "hoverMenuWidth" }] : []));
        this.clampedWidth = computed(() => `${this.clampedSize()}px`, ...(ngDevMode ? [{ debugName: "clampedWidth" }] : []));
        this.mockContent = computed(() => Array(this.layoutType() === 'cards' ? 100 : 20)
            .fill(0)
            .map((_, i) => `Content ${this.layoutType()} ${i + 1}`), ...(ngDevMode ? [{ debugName: "mockContent" }] : []));
        this.mockMessages = signal(['Initial Message'], ...(ngDevMode ? [{ debugName: "mockMessages" }] : []));
        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'),
        }), ...(ngDevMode ? [{ debugName: "variableColors" }] : []));
        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, ...(ngDevMode ? [{ debugName: "showModalOverlay" }] : []));
        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);
        }, ...(ngDevMode ? [{ debugName: "autoHideEffect" }] : []));
        this.resizeSecondaryMenu = (event) => {
            this.resizing.set(true);
            const size = event.pointerPosition.x - 96;
            const drawerOpen = this.rightDrawerActive();
            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());
            }
        };
        /**
         * Resize the side-sheet panel (push or overlay). The panel's right edge is fixed (the push
         * column is anchored right / the overlay is right-offset), so the new width is the distance from
         * that measured edge to the pointer. The registry clamps to `[small, large]`.
         */
        this.resizePanel = (event, panel) => {
            this.resizing.set(true);
            const width = panel.getBoundingClientRect().right - event.pointerPosition.x;
            this.sideSheetRegistry.setResizedWidth(width);
        };
        /** Legacy single right drawer (set via `useSecondaryMenu`); resizes the `drawerSize` model. */
        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, ...(ngDevMode ? [{ debugName: "secondaryMenuPortal" }] : []));
        this.rightDrawerPortal = signal(null, ...(ngDevMode ? [{ debugName: "rightDrawerPortal" }] : []));
        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 '';
        };
        /**
         * Projects a template into the secondary (left) menu, or — `rightPanel=true` — the legacy right
         * drawer.
         *
         * @deprecated Passing `rightPanel=true` is superseded by `NxSideSheetService.open({ mode: 'push' })`.
         * The `*nxMenuProjection` right-panel path now routes through the Side Sheet system; this branch
         * is kept only for backward compatibility and is still rendered by nx-layout as a fallback.
         */
        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;
        // Register as a side-sheet host so the service can detect that a renderer is mounted.
        inject(DestroyRef).onDestroy(this.sideSheetRegistry.connectHost());
        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: "20.1.6", ngImport: i0, type: NxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 }, newCloudMode: { classPropertyName: "newCloudMode", publicName: "newCloudMode", 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@if (pushSheet(); as sheet) {\n    <div\n        class=\"drawer-stack\"\n        [ngClass]=\"templateClasses()\"\n    >\n        <div\n            class=\"push-panel\"\n            [style.width.px]=\"sheet.sizePx\"\n            #pushPanel\n        >\n            <ng-template [cdkPortalOutlet]=\"sheet.portal\"></ng-template>\n            @if (sheet.resizable) {\n                <div\n                    class=\"resize-handle drawer\"\n                    cdkDrag\n                    (cdkDragReleased)=\"resizeComplete($event)\"\n                    (cdkDragMoved)=\"resizePanel($event, pushPanel)\"\n                ></div>\n            }\n        </div>\n    </div>\n}\n\n@if (!pushSheet() && legacyDrawerPortal(); as legacyDrawer) {\n    <div\n        class=\"drawer-wrapper\"\n        [ngClass]=\"templateClasses()\"\n    >\n        <ng-template [cdkPortalOutlet]=\"legacyDrawer\"></ng-template>\n        <div\n            class=\"resize-handle drawer\"\n            cdkDrag\n            (cdkDragReleased)=\"resizeComplete($event)\"\n            (cdkDragMoved)=\"resizeDrawer($event)\"\n        ></div>\n    </div>\n}\n\n@if (overlaySheet(); as overlay) {\n    <div\n        class=\"content-overlays\"\n        [class.has-backdrop]=\"overlayBackdrop()\"\n        [ngClass]=\"templateClasses()\"\n    >\n        <div\n            class=\"side-sheet-overlay\"\n            [style.right.px]=\"0\"\n            [style.width.px]=\"overlay.sizePx\"\n            #overlayPanel\n        >\n            <ng-template [cdkPortalOutlet]=\"overlay.portal\"></ng-template>\n            @if (overlay.resizable) {\n                <div\n                    class=\"resize-handle drawer\"\n                    cdkDrag\n                    (cdkDragReleased)=\"resizeComplete($event)\"\n                    (cdkDragMoved)=\"resizePanel($event, overlayPanel)\"\n                ></div>\n            }\n        </div>\n    </div>\n}\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{--gap: spacing.get-size(6);--default-menus-width: 336px;--menu-size: 72px;overflow:hidden;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,:host div.drawer-stack{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:not(.push-open)>main.wrapper,:host.drawer-open:not(.push-open)>main.clamped{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{width:var(--secondary-menu-width);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}: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:54px 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: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,:host.top-menu.overlay-aside>.drawer-stack{margin:0;padding:0;grid-area:content;width:100%;max-width:100vw;max-width:100dvw}:host.top-menu.overlay-aside>.drawer-wrapper .resize-handle,:host.top-menu.overlay-aside>.drawer-stack .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,:host.top-menu.overlay-aside.drawer-open>.drawer-stack{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}: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{grid-area:header;display:grid}:host header .example-menu{padding:16px}:host.drawer-open:not(.push-open)>main.clamped{--padding-right: var(--padding-left)}:host:not(.drawer-open)>main.wrapper{margin-right:-24px}: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{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));--default-padding: 24px;--padding-left: 0px;--padding-right: calc(var(--right-size) + var(--left-size))}: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.clamped,:host main.wrapper{padding:var(--default-padding) var(--padding-right) var(--default-padding) var(--padding-left)}: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)}.drawer-wrapper.top-menu{border:none}.drawer-wrapper{display:none;position:relative}:host.drawer-open .drawer-wrapper{grid-area:drawer;display:block}:host.top-menu.drawer-open .drawer-wrapper{grid-area:main}.drawer-wrapper .example-drawer{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.drawer-stack{grid-area:drawer;display:flex;flex-direction:row-reverse;min-width:0}.drawer-stack .push-panel{background-color:var(--menu-bg);border-left:1px solid var(--menu-border);position:relative;height:100%;flex:0 0 auto;overflow:hidden}.content-overlays{grid-area:main;position:relative;pointer-events:none;z-index:3}.content-overlays.has-backdrop:before{content:\"\";position:absolute;inset:0;background:#00000052;pointer-events:auto}.side-sheet-overlay{background-color:var(--menu-bg);border-left:1px solid var(--menu-border);position:absolute;top:0;bottom:0;pointer-events:auto}.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)}.hover-menu.top-menu{border:none}.hover-menu{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 .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: "20.1.6", 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@if (pushSheet(); as sheet) {\n    <div\n        class=\"drawer-stack\"\n        [ngClass]=\"templateClasses()\"\n    >\n        <div\n            class=\"push-panel\"\n            [style.width.px]=\"sheet.sizePx\"\n            #pushPanel\n        >\n            <ng-template [cdkPortalOutlet]=\"sheet.portal\"></ng-template>\n            @if (sheet.resizable) {\n                <div\n                    class=\"resize-handle drawer\"\n                    cdkDrag\n                    (cdkDragReleased)=\"resizeComplete($event)\"\n                    (cdkDragMoved)=\"resizePanel($event, pushPanel)\"\n                ></div>\n            }\n        </div>\n    </div>\n}\n\n@if (!pushSheet() && legacyDrawerPortal(); as legacyDrawer) {\n    <div\n        class=\"drawer-wrapper\"\n        [ngClass]=\"templateClasses()\"\n    >\n        <ng-template [cdkPortalOutlet]=\"legacyDrawer\"></ng-template>\n        <div\n            class=\"resize-handle drawer\"\n            cdkDrag\n            (cdkDragReleased)=\"resizeComplete($event)\"\n            (cdkDragMoved)=\"resizeDrawer($event)\"\n        ></div>\n    </div>\n}\n\n@if (overlaySheet(); as overlay) {\n    <div\n        class=\"content-overlays\"\n        [class.has-backdrop]=\"overlayBackdrop()\"\n        [ngClass]=\"templateClasses()\"\n    >\n        <div\n            class=\"side-sheet-overlay\"\n            [style.right.px]=\"0\"\n            [style.width.px]=\"overlay.sizePx\"\n            #overlayPanel\n        >\n            <ng-template [cdkPortalOutlet]=\"overlay.portal\"></ng-template>\n            @if (overlay.resizable) {\n                <div\n                    class=\"resize-handle drawer\"\n                    cdkDrag\n                    (cdkDragReleased)=\"resizeComplete($event)\"\n                    (cdkDragMoved)=\"resizePanel($event, overlayPanel)\"\n                ></div>\n            }\n        </div>\n    </div>\n}\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{--gap: spacing.get-size(6);--default-menus-width: 336px;--menu-size: 72px;overflow:hidden;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,:host div.drawer-stack{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:not(.push-open)>main.wrapper,:host.drawer-open:not(.push-open)>main.clamped{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{width:var(--secondary-menu-width);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}: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:54px 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: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,:host.top-menu.overlay-aside>.drawer-stack{margin:0;padding:0;grid-area:content;width:100%;max-width:100vw;max-width:100dvw}:host.top-menu.overlay-aside>.drawer-wrapper .resize-handle,:host.top-menu.overlay-aside>.drawer-stack .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,:host.top-menu.overlay-aside.drawer-open>.drawer-stack{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}: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{grid-area:header;display:grid}:host header .example-menu{padding:16px}:host.drawer-open:not(.push-open)>main.clamped{--padding-right: var(--padding-left)}:host:not(.drawer-open)>main.wrapper{margin-right:-24px}: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{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));--default-padding: 24px;--padding-left: 0px;--padding-right: calc(var(--right-size) + var(--left-size))}: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.clamped,:host main.wrapper{padding:var(--default-padding) var(--padding-right) var(--default-padding) var(--padding-left)}: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)}.drawer-wrapper.top-menu{border:none}.drawer-wrapper{display:none;position:relative}:host.drawer-open .drawer-wrapper{grid-area:drawer;display:block}:host.top-menu.drawer-open .drawer-wrapper{grid-area:main}.drawer-wrapper .example-drawer{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.drawer-stack{grid-area:drawer;display:flex;flex-direction:row-reverse;min-width:0}.drawer-stack .push-panel{background-color:var(--menu-bg);border-left:1px solid var(--menu-border);position:relative;height:100%;flex:0 0 auto;overflow:hidden}.content-overlays{grid-area:main;position:relative;pointer-events:none;z-index:3}.content-overlays.has-backdrop:before{content:\"\";position:absolute;inset:0;background:#00000052;pointer-events:auto}.side-sheet-overlay{background-color:var(--menu-bg);border-left:1px solid var(--menu-border);position:absolute;top:0;bottom:0;pointer-events:auto}.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)}.hover-menu.top-menu{border:none}.hover-menu{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 .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, ...(ngDevMode ? [{ debugName: "nxActionClassesTarget", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.elRef = inject(ElementRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxApplyActionTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", ngImport: i0, type: NxApplyActionTargetDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxActionClassesTarget]',
                    standalone: true,
                }]
        }] });

const LAYER_NAMES = ['primary', 'secondary', 'tertiary', 'quaternary', 'quinary'];
const colorMapping = {
    // Mapped colors
    '#000': generateCssVariableName('core', 'dark1'),
    '#111417': generateCssVariableName('core', 'dark2'),
    '#161B1D': generateCssVariableName('core', 'dark3'),
    '#171C1F': generateCssVariableName('core', 'dark5'),
    '#1A1E23': generateCssVariableName('core', 'dark6'),
    '#212A2F': generateCssVariableName('core', 'dark7'),
    '#263137': generateCssVariableName('core', 'dark8'),
    '#2B383F': generateCssVariableName('core', 'dark9'),
    '#303F47': generateCssVariableName('core', 'dark10'),
    '#3D4B5C': generateCssVariableName('core', 'dark11'),
    '#3A4D57': generateCssVariableName('core', 'dark11'),
    '#3F545F': generateCssVariableName('core', 'dark12'),
    '#49626E': generateCssVariableName('core', 'dark16'),
    '#4E6977': generateCssVariableName('core', 'dark16'),
    '#53707F': generateCssVariableName('core', 'dark17'),
    '#587787': generateCssVariableName('core', 'dark17'),
    '#698796': generateCssVariableName('core', 'light16'),
    '#758AA3': generateCssVariableName('core', 'light15'),
    '#7B8B9D': generateCssVariableName('core', 'light15'),
    '#7E92A9': generateCssVariableName('core', 'light15'),
    '#7B929D': generateCssVariableName('core', 'light15'),
    '#879FAB': generateCssVariableName('core', 'light13'),
    '#91A7B2': generateCssVariableName('core', 'light12'),
    '#A3B1C2': generateCssVariableName('core', 'light11'),
    '#A5B7C0': generateCssVariableName('core', 'light10'),
    '#AFBFC7': generateCssVariableName('core', 'light9'),
    '#BABABA': generateCssVariableName('core', 'light9'),
    '#B0B9C4': generateCssVariableName('core', 'light9'),
    '#C3CFD5': generateCssVariableName('core', 'light7'),
    '#CDD7DC': generateCssVariableName('core', 'light5'),
    '#D3D8DE': generateCssVariableName('core', 'light4'),
    '#D3DBDE': generateCssVariableName('core', 'light4'),
    '#DAE0E7': generateCssVariableName('core', 'light4'),
    '#E1E7EA': generateCssVariableName('core', 'light3'),
    '#E5E8EB': generateCssVariableName('core', 'light2'),
    '#F6F7F9': generateCssVariableName('core', 'light1'),
    '#fff': generateCssVariableName('core', 'light1'),
    '#42A5F5': generateCssVariableName('attentionInfoBlue', 'initial'),
    '#4CAF50': generateCssVariableName('attentionSuccessGreen', 'initial'),
    '#4FC627': generateCssVariableName('attentionSuccessGreen', 'initial'),
    '#44D926': generateCssVariableName('attentionSuccessGreen', 'initial'),
    '#EF5350': generateCssVariableName('attentionErrorRed', 'initial'),
    '#F02C2C': generateCssVariableName('attentionErrorRed', 'dark18'),
    '#FFCA28': generateCssVariableName('attentionWarningYellow', 'initial'),
    '#2FA2DB': generateCssVariableName('brand', 'initial'),
    '#259BD5': generateCssVariableName('brand', 'initial'),
    '#4E8ED9': generateCssVariableName('brand', 'initial', 18),
    '#0E243F': generateCssVariableName('brand', 'initial', 5),
    // Doesn't need mapping
    none: 'none',
    'url(#a)': 'url(#a)',
    'url(#b)': 'url(#b)',
    'url(#c)': 'url(#c)',
    'url(#d)': 'url(#d)',
};
/**
 * 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'];
/**
 * 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.
 */
/*
    'StHeateroff', 'StHeateron' were removed. Preserve inline can be used
    to have the default colors. of gray circle for StHeateroff and red circle for
    StHeateron

    PanelLeft, PanelPin, PanelRight have weird filter which sets secondary class
    for the background and makes it red.

    Aray can look like this and it should not, generally speaking.
    [
    'StHeateroff',
    'StHeateron',
    'PanelLeft',
    'PanelPin',
    'PanelRight',
    ]

    I decided to keep it empty as they are not used at the moment at all.
    No special treatment
*/
const alwaysUseInlineStyles = [];
const getColor = (color, colors, selectorName, iconName) => {
    /*
    const normalize = (color: string): keyof GeneratedTheme => {
        if (
            !skipNormalize.includes(iconName) &&
            selectorName === 'primary' &&
            color.includes('core') &&
            color.includes('dark')
        ) {
            return color.replace('dark', 'light') as ReturnType<typeof normalize>;
        }
        return color as ReturnType<typeof normalize>;
    };
    */
    const normalize = (color) => color;
    const mappedColor = colorMapping[color];
    const normalizedColor = normalize(mappedColor);
    if (isHexString(normalizedColor) || isSvgFilterUrl(normalizedColor)) {
        return normalizedColor;
    }
    return colors[normalizedColor] || mappedColor;
};
const extractSvgColors = ({ data, name }, colors) => {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = data;
    const extracted = LAYER_NAMES.reduce((acc, selectorName) => {
        const firstElement = tempElement.querySelector(`.${capitalize(selectorName)}`);
        const fill = firstElement?.getAttribute('fill') ?? undefined;
        const stroke = firstElement?.getAttribute('stroke') ?? undefined;
        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(...(ngDevMode ? [{ debugName: "icon" }] : []));
        /**
         * Preserve inline styles from svg (won't remove fill/stroke).
         *
         * Mostly for internal testing.
         */
        this.preserveInline = input(false, ...(ngDevMode ? [{ debugName: "preserveInline", transform: booleanAttribute }] : [{ 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, ...(ngDevMode ? [{ debugName: "preserveSize", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Override the color defined within the icon.
         */
        this.colorOverrides = input(...(ngDevMode ? [undefined, { debugName: "colorOverrides" }] : []));
        /**
         * Use Current Color for primary stroke/fill.
         */
        this.useCurrentColor = input(false, ...(ngDevMode ? [{ debugName: "useCurrentColor", transform: booleanAttribute }] : [{ 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 = [];
                if (!this.preserveInline() && !alwaysUseInlineStyles.includes(resolvedIcon.name)) {
                    transforms.push(removeInlineStyles);
                }
                if (!this.preserveSize()) {
                    transforms.push(removeHeight, removeWidth, fullHeightAutoWidth);
                }
                const withTransforms = flow(transforms);
                return withTransforms(resolvedIcon.data);
            }
            return false;
        }, ...(ngDevMode ? [{ debugName: "iconWithTransforms" }] : []));
        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));
            }
        }, ...(ngDevMode ? [{ debugName: "updateStoryBookThemeEffect" }] : []));
        this.updateIconEffect = effect(() => {
            const transformed = this.iconWithTransforms();
            if (transformed) {
                this.elRef.nativeElement.innerHTML = transformed;
            }
        }, ...(ngDevMode ? [{ debugName: "updateIconEffect" }] : []));
        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 tertiaryDefault = colors[generateCssVariableName('brand', 'initial')];
                const quaternaryDefault = colors[generateCssVariableName('core', 'dark10')];
                const quinaryDefault = colors[generateCssVariableName('core', 'dark6')];
                const defaults = {
                    primary: { fill: primaryDefault, stroke: primaryDefault },
                    secondary: { fill: secondaryDefault, stroke: secondaryDefault },
                    tertiary: { fill: tertiaryDefault, stroke: tertiaryDefault },
                    quaternary: { fill: quaternaryDefault, stroke: quaternaryDefault },
                    quinary: { fill: quinaryDefault, stroke: quinaryDefault },
                };
                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);
                    }
                });
            }
        }, ...(ngDevMode ? [{ debugName: "declareClassesEffect" }] : []));
        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: "20.1.6", ngImport: i0, type: NxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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(.Tertiary):not(.Quaternary):not(.Quinary){color:inherit}:host ::ng-deep .Primary[apply-fill],:host ::ng-deep .Primary *:not(.Secondary):not(.Tertiary):not(.Quaternary):not(.Quinary)[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(.Tertiary):not(.Quaternary):not(.Quinary)[apply-stroke]{stroke:var(--svg-primary-stroke-override, var(--svg-primary-stroke))}:host ::ng-deep .Secondary,:host ::ng-deep .Secondary *:not(.Primary):not(.Tertiary):not(.Quaternary):not(.Quinary){color:inherit}:host ::ng-deep .Secondary[apply-fill],:host ::ng-deep .Secondary *:not(.Primary):not(.Tertiary):not(.Quaternary):not(.Quinary)[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(.Tertiary):not(.Quaternary):not(.Quinary)[apply-stroke]{stroke:var(--svg-secondary-stroke-override, var(--svg-secondary-stroke))}:host ::ng-deep .Tertiary,:host ::ng-deep .Tertiary *:not(.Primary):not(.Secondary):not(.Quaternary):not(.Quinary){color:inherit}:host ::ng-deep .Tertiary[apply-fill],:host ::ng-deep .Tertiary *:not(.Primary):not(.Secondary):not(.Quaternary):not(.Quinary)[apply-fill]{fill:var(--svg-tertiary-fill-override, var(--svg-tertiary-fill))}:host ::ng-deep .Tertiary[apply-stroke],:host ::ng-deep .Tertiary *:not(.Primary):not(.Secondary):not(.Quaternary):not(.Quinary)[apply-stroke]{stroke:var(--svg-tertiary-stroke-override, var(--svg-tertiary-stroke))}:host ::ng-deep .Quaternary,:host ::ng-deep .Quaternary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quinary){color:inherit}:host ::ng-deep .Quaternary[apply-fill],:host ::ng-deep .Quaternary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quinary)[apply-fill]{fill:var(--svg-quaternary-fill-override, var(--svg-quaternary-fill))}:host ::ng-deep .Quaternary[apply-stroke],:host ::ng-deep .Quaternary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quinary)[apply-stroke]{stroke:var(--svg-quaternary-stroke-override, var(--svg-quaternary-stroke))}:host ::ng-deep .Quinary,:host ::ng-deep .Quinary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quaternary){color:inherit}:host ::ng-deep .Quinary[apply-fill],:host ::ng-deep .Quinary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quaternary)[apply-fill]{fill:var(--svg-quinary-fill-override, var(--svg-quinary-fill))}:host ::ng-deep .Quinary[apply-stroke],:host ::ng-deep .Quinary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quaternary)[apply-stroke]{stroke:var(--svg-quinary-stroke-override, var(--svg-quinary-stroke))}:host{height:100%;width:max-content}:host[preservesize]{height:min-content;width:min-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-icon', imports: [], 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(.Tertiary):not(.Quaternary):not(.Quinary){color:inherit}:host ::ng-deep .Primary[apply-fill],:host ::ng-deep .Primary *:not(.Secondary):not(.Tertiary):not(.Quaternary):not(.Quinary)[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(.Tertiary):not(.Quaternary):not(.Quinary)[apply-stroke]{stroke:var(--svg-primary-stroke-override, var(--svg-primary-stroke))}:host ::ng-deep .Secondary,:host ::ng-deep .Secondary *:not(.Primary):not(.Tertiary):not(.Quaternary):not(.Quinary){color:inherit}:host ::ng-deep .Secondary[apply-fill],:host ::ng-deep .Secondary *:not(.Primary):not(.Tertiary):not(.Quaternary):not(.Quinary)[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(.Tertiary):not(.Quaternary):not(.Quinary)[apply-stroke]{stroke:var(--svg-secondary-stroke-override, var(--svg-secondary-stroke))}:host ::ng-deep .Tertiary,:host ::ng-deep .Tertiary *:not(.Primary):not(.Secondary):not(.Quaternary):not(.Quinary){color:inherit}:host ::ng-deep .Tertiary[apply-fill],:host ::ng-deep .Tertiary *:not(.Primary):not(.Secondary):not(.Quaternary):not(.Quinary)[apply-fill]{fill:var(--svg-tertiary-fill-override, var(--svg-tertiary-fill))}:host ::ng-deep .Tertiary[apply-stroke],:host ::ng-deep .Tertiary *:not(.Primary):not(.Secondary):not(.Quaternary):not(.Quinary)[apply-stroke]{stroke:var(--svg-tertiary-stroke-override, var(--svg-tertiary-stroke))}:host ::ng-deep .Quaternary,:host ::ng-deep .Quaternary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quinary){color:inherit}:host ::ng-deep .Quaternary[apply-fill],:host ::ng-deep .Quaternary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quinary)[apply-fill]{fill:var(--svg-quaternary-fill-override, var(--svg-quaternary-fill))}:host ::ng-deep .Quaternary[apply-stroke],:host ::ng-deep .Quaternary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quinary)[apply-stroke]{stroke:var(--svg-quaternary-stroke-override, var(--svg-quaternary-stroke))}:host ::ng-deep .Quinary,:host ::ng-deep .Quinary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quaternary){color:inherit}:host ::ng-deep .Quinary[apply-fill],:host ::ng-deep .Quinary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quaternary)[apply-fill]{fill:var(--svg-quinary-fill-override, var(--svg-quinary-fill))}:host ::ng-deep .Quinary[apply-stroke],:host ::ng-deep .Quinary *:not(.Primary):not(.Secondary):not(.Tertiary):not(.Quaternary)[apply-stroke]{stroke:var(--svg-quinary-stroke-override, var(--svg-quinary-stroke))}:host{height:100%;width:max-content}:host[preservesize]{height:min-content;width:min-content}\n"] }]
        }], ctorParameters: () => [] });

/** Data passed to a side sheet's content component (`config.data`). */
const SIDE_SHEET_DATA = new InjectionToken('SIDE_SHEET_DATA');
/** The {@link SideSheetRef} for a side sheet's content component. */
const SIDE_SHEET_REF = new InjectionToken('SIDE_SHEET_REF');
const SIDE_SHEET_SHELL_CONFIG = new InjectionToken('SIDE_SHEET_SHELL_CONFIG');

/**
 * Side sheet shell — a full-height, right-anchored dark panel that renders the consumer's content
 * with an optional close (X) icon. Deliberately minimal: it carries no title, breadcrumb, subtitle
 * or footer — that is all the consumer's projected content.
 *
 * Works two ways:
 * - **Declaratively** (`<nx-side-sheet>…</nx-side-sheet>`, e.g. Storybook): content via `ng-content`,
 *   chrome via the `showClose`/`size` inputs; the sheet takes its preset `size` width.
 * - **Programmatically** (via `NxSideSheetService`): the service supplies a {@link SIDE_SHEET_SHELL_CONFIG}
 *   through the portal injector; the shell renders that content portal and fills the container
 *   `nx-layout` sizes for it.
 */
class NxSideSheetComponent {
    constructor() {
        /** Present only when opened programmatically through the service. */
        this.shellConfig = inject(SIDE_SHEET_SHELL_CONFIG, { optional: true });
        /** Show the close (X) icon. */
        this.showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /** Width preset (declarative use only — programmatic use is sized by nx-layout). */
        this.size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : []));
        /** Fires when the close icon is clicked (declarative use; programmatic use closes via the ref). */
        this.closeClick = output();
        this.effShowClose = computed(() => this.shellConfig?.showClose ?? this.showClose(), ...(ngDevMode ? [{ debugName: "effShowClose" }] : []));
        /**
         * Rendered by nx-layout (programmatic): fill the container the layout sizes for the sheet.
         * Standalone (declarative): take the preset `size` width directly.
         */
        this.widthStyle = computed(() => this.shellConfig ? '100%' : `${SIDE_SHEET_SIZES[this.size()]}px`, ...(ngDevMode ? [{ debugName: "widthStyle" }] : []));
    }
    onClose() {
        if (this.shellConfig?.ref) {
            this.shellConfig.ref.close();
            return;
        }
        this.closeClick.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxSideSheetComponent, isStandalone: true, selector: "nx-side-sheet", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick" }, host: { attributes: { "tabindex": "-1" }, properties: { "style.width": "widthStyle()", "attr.data-side-sheet-identity": "shellConfig?.identity ?? null" } }, ngImport: i0, template: "<div class=\"nx-side-sheet\">\n    @if (effShowClose()) {\n        <nx-icon\n            class=\"nx-side-sheet__close\"\n            icon=\"Close24X24\"\n            preserveSize\n            (click)=\"onClose()\"\n        />\n    }\n    <div class=\"nx-side-sheet__body\">\n        @if (shellConfig?.portal; as portal) {\n            <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n</div>\n", styles: [":host{display:block;height:100%;box-sizing:border-box}:host,:host *,:host :after,:host :before{box-sizing:border-box}.nx-side-sheet{position:relative;display:flex;flex-direction:column;height:100%;background:var(--nxc-dark3-offset, var(--nxc-dark3));border-left:1px solid var(--nxc-dark5-offset, var(--nxc-dark5))}.nx-side-sheet__close{position:absolute;top:24px;right:24px;z-index:2;cursor:pointer}.nx-side-sheet__body{flex:1 1 auto;overflow:auto;padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PortalModule, NxIconComponent], host: {
                        '[style.width]': 'widthStyle()',
                        '[attr.data-side-sheet-identity]': 'shellConfig?.identity ?? null',
                        tabindex: '-1',
                    }, template: "<div class=\"nx-side-sheet\">\n    @if (effShowClose()) {\n        <nx-icon\n            class=\"nx-side-sheet__close\"\n            icon=\"Close24X24\"\n            preserveSize\n            (click)=\"onClose()\"\n        />\n    }\n    <div class=\"nx-side-sheet__body\">\n        @if (shellConfig?.portal; as portal) {\n            <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n</div>\n", styles: [":host{display:block;height:100%;box-sizing:border-box}:host,:host *,:host :after,:host :before{box-sizing:border-box}.nx-side-sheet{position:relative;display:flex;flex-direction:column;height:100%;background:var(--nxc-dark3-offset, var(--nxc-dark3));border-left:1px solid var(--nxc-dark5-offset, var(--nxc-dark5))}.nx-side-sheet__close{position:absolute;top:24px;right:24px;z-index:2;cursor:pointer}.nx-side-sheet__body{flex:1 1 auto;overflow:auto;padding:24px}\n"] }]
        }] });

/**
 * Handle to an open side sheet, injected into the sheet's content via `SIDE_SHEET_REF`.
 */
class SideSheetRef {
    constructor(identity, handlers) {
        this.identity = identity;
        this.handlers = handlers;
        this._afterClosed$ = new Subject();
        /** Emits once with the close result, then completes. */
        this.afterClosed$ = this._afterClosed$.asObservable();
        this.closed = false;
    }
    /** Close the sheet, tearing down its rendering and emitting `afterClosed$`. */
    close(result) {
        if (this.closed) {
            return;
        }
        this.closed = true;
        this.handlers.dispose(result);
        this._afterClosed$.next(result);
        this._afterClosed$.complete();
    }
}

/**
 * Opens a right-anchored side sheet in either `push` or `overlay` mode. Both modes are rendered by
 * `nx-layout` (push reserves a grid column; overlay floats over the content area), so a sheet never
 * covers the layout chrome.
 *
 * This minimal version shows one sheet at a time: opening a sheet while one is already open replaces
 * it. The multi-sheet stack, focus-existing and dispose-on-navigation rules are layered on later.
 */
class NxSideSheetService {
    constructor() {
        this.injector = inject(Injector);
        this.registry = inject(NxSideSheetRegistry);
    }
    open(content, config) {
        // A sheet is rendered by `nx-layout`; with no host mounted the registry write goes nowhere
        // and the sheet would silently never appear. Fail loudly instead.
        if (!this.registry.hasHost()) {
            throw new Error('NxSideSheetService.open(): no <nx-layout> host is mounted to render the side ' +
                'sheet. Ensure an <nx-layout> exists and that NxSideSheetService / ' +
                'NxSideSheetRegistry are provided on a common ancestor of the layout and the ' +
                'caller.');
        }
        // One sheet at a time: tear down any currently-open sheet before opening the new one.
        this.entry?.ref.close();
        const resolved = this.resolveConfig(config);
        const ref = this.createRef(resolved);
        const entry = {
            resolved,
            content,
            ref,
            sizePx: SIDE_SHEET_SIZES[resolved.size],
        };
        this.entry = entry;
        this.attach(entry);
        return ref;
    }
    /**
     * Register the sheet's shell portal so `nx-layout` renders it. A fresh portal is built on every
     * attach because a portal can only be attached once.
     */
    attach(entry) {
        const { resolved, sizePx } = entry;
        this.registry.register({
            identity: resolved.identity,
            mode: resolved.mode,
            size: resolved.size,
            sizePx,
            open: true,
            resizable: resolved.resizable,
            portal: this.buildShellPortal(entry),
            panelClass: resolved.panelClass,
            hasBackdrop: resolved.mode === 'overlay' ? resolved.hasBackdrop : false,
        });
    }
    disposeEntry(ref) {
        // Guard against a stale ref (a sheet that was already replaced) tearing down the current one.
        if (this.entry?.ref !== ref) {
            return;
        }
        this.entry = undefined;
        this.registry.remove();
    }
    createRef(resolved) {
        const ref = new SideSheetRef(resolved.identity, {
            dispose: () => this.disposeEntry(ref),
        });
        return ref;
    }
    buildShellPortal(entry) {
        const shellConfig = {
            identity: entry.resolved.identity,
            portal: this.buildContentPortal(entry),
            showClose: entry.resolved.showClose,
            ref: entry.ref,
        };
        const shellInjector = Injector.create({
            parent: this.injector,
            providers: [{ provide: SIDE_SHEET_SHELL_CONFIG, useValue: shellConfig }],
        });
        return new ComponentPortal(NxSideSheetComponent, null, shellInjector);
    }
    buildContentPortal(entry) {
        const { content, resolved, ref } = entry;
        if (content instanceof TemplatePortal) {
            return new TemplatePortal(content.templateRef, content.viewContainerRef, content.context);
        }
        const contentInjector = Injector.create({
            parent: this.injector,
            providers: [
                { provide: SIDE_SHEET_DATA, useValue: resolved.data ?? null },
                { provide: SIDE_SHEET_REF, useValue: ref },
            ],
        });
        return new ComponentPortal(content, null, contentInjector);
    }
    resolveConfig(config) {
        return {
            // A generated id keys the open sheet and tags its host element.
            identity: crypto.randomUUID(),
            mode: config.mode,
            size: config.size ?? 'small',
            showClose: config.showClose ?? true,
            hasBackdrop: config.hasBackdrop ?? false,
            resizable: config.resizable ?? false,
            data: config.data,
            panelClass: config.panelClass,
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSideSheetService, decorators: [{
            type: Injectable
        }] });

/**
 * 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, ...(ngDevMode ? [{ debugName: "nxMenuProjection", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.nxMenuProjectionRightPanel = input(false, ...(ngDevMode ? [{ debugName: "nxMenuProjectionRightPanel" }] : []));
        this.nxMenuProjectionCollapsible = input(true, ...(ngDevMode ? [{ debugName: "nxMenuProjectionCollapsible" }] : []));
        this.nxMenuProjectionResizable = input(true, ...(ngDevMode ? [{ debugName: "nxMenuProjectionResizable" }] : []));
        this.nxMenuProjectionAutoNavigateSecondaryOnMobile = input(true, ...(ngDevMode ? [{ debugName: "nxMenuProjectionAutoNavigateSecondaryOnMobile" }] : []));
        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 () => { };
        }, ...(ngDevMode ? [{ debugName: "updateProjection" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxMenuProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", 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({}, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
        /**
         * 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();
            });
        }, ...(ngDevMode ? [{ debugName: "renderView" }] : []));
        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: "20.1.6", ngImport: i0, type: NxSwappedAbstractBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxSwappedAbstractBaseDirective, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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(...(ngDevMode ? [undefined, { debugName: "templateRef" }] : []));
        this.context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : []));
        this.logEffect = effect(() => {
            const context = this.context();
            console.info('nxTemplatePlaceholderContext:', context);
        }, ...(ngDevMode ? [{ debugName: "logEffect" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTemplateWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: "20.1.6", 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, ...(ngDevMode ? [{ debugName: "isSwapped", transform: booleanAttribute,
                alias: 'nxTemplatePlaceholder' }] : [{
                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(...(ngDevMode ? [{ debugName: "nxTemplatePlaceholderTemplateRef" }] : []));
        /**
         * The context to be for the template passed as the templateRef.
         */
        this.nxTemplatePlaceholderContext = input({}, ...(ngDevMode ? [{ debugName: "nxTemplatePlaceholderContext" }] : []));
        this.swappedStateComponent = signal(NxTemplateWrapperComponent, ...(ngDevMode ? [{ debugName: "swappedStateComponent" }] : []));
        this.componentInputs = computed(() => ({
            context: this.nxTemplatePlaceholderContext(),
            templateRef: this.nxTemplatePlaceholderTemplateRef(),
        }), ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTemplatePlaceholderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", 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: "20.1.6", ngImport: i0, type: LoadingSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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: "20.1.6", 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, ...(ngDevMode ? [{ debugName: "isSwapped", alias: 'nxLoadingSkeleton' }] : [{ alias: 'nxLoadingSkeleton' }]));
        this.swappedStateComponent = signal(LoadingSkeletonComponent, ...(ngDevMode ? [{ debugName: "swappedStateComponent" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxLoadingSkeletonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", ngImport: i0, type: NxLoadingSkeletonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxLoadingSkeleton]',
                    standalone: true,
                }]
        }] });

/**
 * 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`, ...(ngDevMode ? [{ debugName: "iconSize", transform: (val) => `${val}px` }] : [{ transform: (val) => `${val}px` }]));
        /** The icon to display in the loading spinner. */
        this._icon = input(undefined, ...(ngDevMode ? [{ debugName: "_icon", alias: 'icon' }] : [{ alias: 'icon' }]));
        /**
         * The outlineRatio for 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, ...(ngDevMode ? [{ debugName: "outlineRatio" }] : []));
        /**
         * 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`;
        }, ...(ngDevMode ? [{ debugName: "borderSize" }] : []));
        /**
         * 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: "20.1.6", ngImport: i0, type: LoadingSpinnerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: LoadingSpinnerComponent, isStandalone: true, selector: "nx-loading-spinner", inputs: { iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, _icon: { classPropertyName: "_icon", publicName: "icon", 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: `@if (_icon(); as icon) {
            <nx-icon
                [icon]="icon"
                useCurrentColor
                class="loading-spinner"
            ></nx-icon>
        } @else {
            <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-light10); inherits: true;}:host.sync-animation>.loading-spinner{animation:nx-spin var(--sync-animation-duration) linear infinite}:host>.loading-spinner{--spinner-color-inner: var(--spinner-color, var(--nxc-light10));display:block;width:var(--icon-size);height:var(--icon-size);aspect-ratio:1/1;cursor:wait;position:relative}:host .loading-spinner:not(nx-icon){color:transparent}:host .loading-spinner:not(nx-icon):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-inner) 270deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .25s ease-out;opacity:1}@starting-style{:host .loading-spinner:not(nx-icon):before{opacity:0}}:host .loading-spinner:not(nx-icon):after{transition:opacity 1s ease-out;content:\"\";background:var(--spinner-color-inner);position:absolute;top:0;left:calc(50% - var(--border-size) / 2);width:var(--border-size);height:var(--border-size);border-radius:100%}\n"], dependencies: [{ kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-loading-spinner', template: `@if (_icon(); as icon) {
            <nx-icon
                [icon]="icon"
                useCurrentColor
                class="loading-spinner"
            ></nx-icon>
        } @else {
            <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()',
                    }, imports: [NxIconComponent], 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-light10); inherits: true;}:host.sync-animation>.loading-spinner{animation:nx-spin var(--sync-animation-duration) linear infinite}:host>.loading-spinner{--spinner-color-inner: var(--spinner-color, var(--nxc-light10));display:block;width:var(--icon-size);height:var(--icon-size);aspect-ratio:1/1;cursor:wait;position:relative}:host .loading-spinner:not(nx-icon){color:transparent}:host .loading-spinner:not(nx-icon):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-inner) 270deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .25s ease-out;opacity:1}@starting-style{:host .loading-spinner:not(nx-icon):before{opacity:0}}:host .loading-spinner:not(nx-icon):after{transition:opacity 1s ease-out;content:\"\";background:var(--spinner-color-inner);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 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.
 * An optional `icon` input can be provided to display a custom icon inside the spinner.
 *
 * Example (Basic):
 *
 * ```html
 * <div *nxLoadingSpinner="isLoading">...</div>
 * ```
 *
 * Example (With custom icon size):
 *
 * ```html
 * <div *nxLoadingSpinner="isLoading; iconSize: 32">...</div>
 * ```
 *
 * Example (With custom icon):
 *
 * ```html
 * <div *nxLoadingSpinner="isLoading; icon: myIcon">...</div>
 * ```
 */
class NxLoadingSpinnerDirective extends NxSwappedAbstractBaseDirective {
    constructor() {
        super(...arguments);
        /**
         * Shows loading spinner when true.
         */
        this.isSwapped = input(false, ...(ngDevMode ? [{ debugName: "isSwapped", transform: booleanAttribute,
                alias: 'nxLoadingSpinner' }] : [{
                transform: booleanAttribute,
                alias: 'nxLoadingSpinner',
            }]));
        /**
         * Size of the loading spinner in pixels.
         */
        this.nxLoadingSpinnerIconSize = input(64, ...(ngDevMode ? [{ debugName: "nxLoadingSpinnerIconSize" }] : []));
        /**
         * The outlineRatio for 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, ...(ngDevMode ? [{ debugName: "nxLoadingSpinnerOutlineRatio" }] : []));
        /**
         * The icon to display in the loading spinner.
         */
        this.nxLoadingSpinnerIcon = input(...(ngDevMode ? [undefined, { debugName: "nxLoadingSpinnerIcon" }] : []));
        this.swappedStateComponent = signal(LoadingSpinnerComponent, ...(ngDevMode ? [{ debugName: "swappedStateComponent" }] : []));
        this.componentInputs = computed(() => {
            const iconSize = this.nxLoadingSpinnerIconSize();
            const outlineRatio = this.nxLoadingSpinnerOutlineRatio();
            const icon = this.nxLoadingSpinnerIcon();
            return { icon, iconSize, outlineRatio };
        }, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxLoadingSpinnerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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 }, nxLoadingSpinnerIcon: { classPropertyName: "nxLoadingSpinnerIcon", publicName: "nxLoadingSpinnerIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxLoadingSpinnerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxLoadingSpinner]',
                    standalone: true,
                }]
        }] });

class NxApplyActionParentDirective {
    constructor() {
        // Bind Hover
        this.hover = signal(false, ...(ngDevMode ? [{ debugName: "hover" }] : []));
        this.nxActionClassesParent = input(false, ...(ngDevMode ? [{ debugName: "nxActionClassesParent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.nxActionClassesParentInherit = input(false, ...(ngDevMode ? [{ debugName: "nxActionClassesParentInherit", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        // Bind Focus
        this.focus = signal(false, ...(ngDevMode ? [{ debugName: "focus" }] : []));
        // Bind Active
        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
        // Current classes
        this.classes = computed(() => ({
            nxHovered: this.hover(),
            nxFocused: this.focus(),
            nxActive: this.active(),
        }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
        // Propagate classes to children
        this.actionClassTargets = signal([], ...(ngDevMode ? [{ debugName: "actionClassTargets" }] : []));
        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()));
        }, ...(ngDevMode ? [{ debugName: "bindToChildren" }] : []));
        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));
                });
            });
        }, ...(ngDevMode ? [{ debugName: "propagateClasses" }] : []));
    }
    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: "20.1.6", ngImport: i0, type: NxApplyActionParentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", 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);
        this.showSlider = input(true, ...(ngDevMode ? [{ debugName: "showSlider", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * The value of the slider.
         */
        this.value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
        /**
         * The last value of the slider before it was toggled.
         */
        this.lastValue = model(0, ...(ngDevMode ? [{ debugName: "lastValue" }] : []));
        /**
         * The primary icon of the slider.
         */
        this.primaryIcon = input(NxIconEnum.AUDIO_ON, ...(ngDevMode ? [{ debugName: "primaryIcon" }] : []));
        /**
         * The value of the slider when toggled.
         */
        this.toggledValue = input(0, ...(ngDevMode ? [{ debugName: "toggledValue" }] : []));
        /**
         * The icon of the slider when toggled.
         */
        this.toggledIcon = input(NxIconEnum.AUDIO_OFF, ...(ngDevMode ? [{ debugName: "toggledIcon" }] : []));
        /**
         * The color of the slider when toggled.
         */
        this.toggledColor = input(generateCssVariableName('attentionErrorRed'), ...(ngDevMode ? [{ debugName: "toggledColor" }] : []));
        /**
         * The friendly name of the value.
         */
        this.toFriendlyName = input((value) => `${value}%`, ...(ngDevMode ? [{ debugName: "toFriendlyName" }] : []));
        /**
         * Whether the slider is currently being dragged.
         */
        this.dragging = model(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
        /**
         * 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,
            };
        }, ...(ngDevMode ? [{ debugName: "toSelectionRange" }] : []));
        /**
         * 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);
        }, ...(ngDevMode ? [{ debugName: "clampValue" }] : []));
        /**
         * For when we potentially move the slider to a popover.
         */
        this.showPopover = input(false, ...(ngDevMode ? [{ debugName: "showPopover", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Fires when a drag or track-click lands on `toggledValue` (vs. toggling via the icon).
         */
        this.toggledViaInteraction = output();
        /**
         * The value from the slider mapped to a friendly name.
         */
        this.valueName = computed(() => this.toFriendlyName()(this.value()), ...(ngDevMode ? [{ debugName: "valueName" }] : []));
        /**
         * Whether the slider is toggled.
         */
        this.itToggled = computed(() => this.value() === this.toggledValue(), ...(ngDevMode ? [{ debugName: "itToggled" }] : []));
        /**
         * Currently displayed icon.
         */
        this.icon = computed(() => (this.itToggled() ? this.toggledIcon() : this.primaryIcon()), ...(ngDevMode ? [{ debugName: "icon" }] : []));
        /**
         * The value of the selection range after clamping and mapping the raw value.
         */
        this.selectionRange = computed(() => this.toSelectionRange()(this.clampValue()(this.value())), ...(ngDevMode ? [{ debugName: "selectionRange" }] : []));
        /**
         * The start of the selection range.
         */
        this.selectionStart = computed(() => `${this.selectionRange().start}%`, ...(ngDevMode ? [{ debugName: "selectionStart" }] : []));
        /**
         * The end of the selection range.
         */
        this.selectionEnd = computed(() => `${100 - this.selectionRange().end}%`, ...(ngDevMode ? [{ debugName: "selectionEnd" }] : []));
        /**
         * The handle location for modifying the selection range.
         */
        this.selectionHandle = computed(() => `${100 - this.selectionRange().handle}%`, ...(ngDevMode ? [{ debugName: "selectionHandle" }] : []));
        /**
         * Whether the slider is expanded showing slider or collapsed just allowing toggle.
         */
        this.opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
        /**
         * The slider ref used for getting actual sizes of the wrapper.
         */
        this.sliderWrapper = viewChild('sliderWrapper', ...(ngDevMode ? [{ debugName: "sliderWrapper" }] : []));
        this.variableColors = computed(() => ({
            '--iconColor': this.itToggled()
                ? this.toggledColor()
                : commonColors['--nxc-light10'],
        }), ...(ngDevMode ? [{ debugName: "variableColors" }] : []));
        /**
         * The current color of the icon.
         */
        this.iconColor = computed(() => this.variableColors()['--iconColor'], ...(ngDevMode ? [{ debugName: "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);
            }
        }, ...(ngDevMode ? [{ debugName: "clampValueEffect" }] : []));
        /**
         * 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;
            const snapped = this.clampValue()(x / pixelsPerPercent);
            this.value.set(snapped);
            if (snapped === this.toggledValue()) {
                this.toggledViaInteraction.emit();
            }
        };
        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);
            const snapped = this.clampValue()(this.value());
            if (snapped === this.toggledValue()) {
                this.toggledViaInteraction.emit();
            }
        };
        /**
         * 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);
            }
        }, ...(ngDevMode ? [{ debugName: "updateLastValue" }] : []));
        /**
         * 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: "20.1.6", ngImport: i0, type: NxSettingSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxSettingSliderComponent, isStandalone: true, selector: "nx-setting-slider", inputs: { showSlider: { classPropertyName: "showSlider", publicName: "showSlider", isSignal: true, isRequired: false, transformFunction: null }, 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", toggledViaInteraction: "toggledViaInteraction" }, 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@if (showSlider()) {\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}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{-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{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)}:host{color:var(--nxc-light10-offset, var(--nxc-light10))}:host:hover:not([disabled]):not([aria-disabled=true]){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]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + .06))}}:host{line-height:16px!important}:host>*{height:18px;padding:7px 11px;place-content:center;text-align:center}:host>*:not(.slider-wrapper){cursor:pointer}:host>*:not(.slider-wrapper){background:var(--nxc-dark6-offset, var(--nxc-dark6))}:host>*:not(.slider-wrapper):hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):active:not([disabled]):not([aria-disabled=true]){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]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + .06))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + .06))}:host>*:not(.slider-wrapper):active:not([disabled]):not([aria-disabled=true]){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>:only-child{border-radius:6px}:host>:only-child:after{display:none}: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{background:var(--nxc-dark8-offset, var(--nxc-dark8));inset:2px 0;content:\"\";position:absolute;display:block;border-radius:100px}:host .slider:after{background:var(--nxc-light4-offset, var(--nxc-light4));right:var(--selectionEnd, 0);left:var(--selectionStart, 0);content:\"\";position:absolute;display:block;top:2px;bottom:2px;border-radius:100px}: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{inset:2px;background:var(--nxc-dark6-offset, var(--nxc-dark6));border-radius:100px;content:\"\";position:absolute;display:block}\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: "20.1.6", 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@if (showSlider()) {\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}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{-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{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)}:host{color:var(--nxc-light10-offset, var(--nxc-light10))}:host:hover:not([disabled]):not([aria-disabled=true]){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]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + .06))}}:host{line-height:16px!important}:host>*{height:18px;padding:7px 11px;place-content:center;text-align:center}:host>*:not(.slider-wrapper){cursor:pointer}:host>*:not(.slider-wrapper){background:var(--nxc-dark6-offset, var(--nxc-dark6))}:host>*:not(.slider-wrapper):hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + 6))}:host>*:not(.slider-wrapper):active:not([disabled]):not([aria-disabled=true]){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]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + .06))}:host>*:not(.slider-wrapper):focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark6-offset, var(--nxc-dark6)) h s calc(l + .06))}:host>*:not(.slider-wrapper):active:not([disabled]):not([aria-disabled=true]){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>:only-child{border-radius:6px}:host>:only-child:after{display:none}: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{background:var(--nxc-dark8-offset, var(--nxc-dark8));inset:2px 0;content:\"\";position:absolute;display:block;border-radius:100px}:host .slider:after{background:var(--nxc-light4-offset, var(--nxc-light4));right:var(--selectionEnd, 0);left:var(--selectionStart, 0);content:\"\";position:absolute;display:block;top:2px;bottom:2px;border-radius:100px}: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{inset:2px;background:var(--nxc-dark6-offset, var(--nxc-dark6));border-radius:100px;content:\"\";position:absolute;display:block}\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, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
        /**
         * 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);
        }, ...(ngDevMode ? [{ debugName: "notifyChangeEffect" }] : []));
    }
    /**
     * 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: "20.1.6", ngImport: i0, type: BaseControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: BaseControlValueAccessor, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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, ...(ngDevMode ? [{ debugName: "value" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxVolumeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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: "component", type: NxSettingSliderComponent, selector: "nx-setting-slider", inputs: ["showSlider", "value", "lastValue", "primaryIcon", "toggledValue", "toggledIcon", "toggledColor", "toFriendlyName", "dragging", "toSelectionRange", "clampValue", "showPopover"], outputs: ["valueChange", "lastValueChange", "draggingChange", "toggledViaInteraction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxVolumeSliderComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nx-volume-slider',
                    imports: [NxSettingSliderComponent],
                    template: '<nx-setting-slider [(value)]="value"/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxVolumeSliderComponent),
                            multi: true,
                        },
                    ],
                }]
        }] });

// Negative rates (-16 … -1) are disabled until backend support lands — see CLOUD-17604.
const playbackRates = [/* -16, -8, -4, -2, -1, */ 0, 0.25, 0.5, 1, 2, 4, 8, 16];
const getMappedValue = (value) => {
    const numberOptions = playbackRates.length;
    const pixelsBetweenOptions = 100 / (numberOptions - 1);
    const index = Math.min(Math.max(Math.round(value / pixelsBetweenOptions), 0), numberOptions - 1);
    return playbackRates[index];
};
const fromMappedValue = (value) => {
    const index = playbackRates.findIndex((current, index) => value <= current || index === playbackRates.length - 1);
    return Math.round((100 / (playbackRates.length - 1)) * index);
};
/**
 * Returns the adjacent playback rate in the given direction, clamped to the
 * bounds of {@link playbackRates}. 'faster' steps up the list, 'slower' steps down.
 */
const getAdjacentRate = (currentRate, direction) => {
    const currentIndex = playbackRates.indexOf(currentRate);
    const step = direction === 'faster' ? 1 : -1;
    const newIndex = Math.min(Math.max(currentIndex + step, 0), playbackRates.length - 1);
    return playbackRates[newIndex];
};
const getTagName = () => inject(ElementRef).nativeElement.tagName.toLowerCase();
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const getPlayBackSliderValue = (value) => {
    if (value === 0) {
        return NxIconEnum.PLAY_20_X_20_VARIANT_2;
    }
    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, ...(ngDevMode ? [{ debugName: "value" }] : []));
        this.liveOnly = input.required(...(ngDevMode ? [{ debugName: "liveOnly" }] : []));
        /**
         * Caps the slider at 1x while viewing Live (vs. `liveOnly`, which hides it entirely).
         */
        this.isLive = input(false, ...(ngDevMode ? [{ debugName: "isLive" }] : []));
        this.toggledValue = fromMappedValue(0);
        this.toggledColor = commonColors['--nxc-light10'];
        this.toFriendlyName = (value) => `${getMappedValue(value)}x`;
        this.mappedValue = computed(() => fromMappedValue(this.value()), ...(ngDevMode ? [{ debugName: "mappedValue" }] : []));
        this.currentIcon = computed(() => {
            if (this.isToggleSlider) {
                return NxIconEnum.PAUSE_20_X_20_VARIANT_2;
            }
            return getPlayBackSliderValue(this.value());
        }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
        this.lastValue = signal(0, ...(ngDevMode ? [{ debugName: "lastValue" }] : []));
        this.toggledIcon = computed(() => {
            if (this.isToggleSlider) {
                return getPlayBackSliderValue(getMappedValue(this.lastValue()));
            }
            return NxIconEnum.PLAY_20_X_20_VARIANT_2;
        }, ...(ngDevMode ? [{ debugName: "toggledIcon" }] : []));
        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) => {
            const snapped = fromMappedValue(getMappedValue(value));
            if (this.isLive()) {
                return Math.min(snapped, fromMappedValue(1));
            }
            return snapped;
        };
        this.updateValue = (value) => {
            this.value.set(getMappedValue(this.clampValue(value)));
        };
        // Spec: pausing via the slider resumes at 1x (icon-pause still restores the previous speed).
        this.onSliderPause = () => {
            this.lastValue.set(fromMappedValue(1));
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaybackSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxPlaybackSliderComponent, isStandalone: true, selector: "nx-playback-slider, nx-playback-toggle-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, liveOnly: { classPropertyName: "liveOnly", publicName: "liveOnly", isSignal: true, isRequired: true, transformFunction: null }, isLive: { classPropertyName: "isLive", publicName: "isLive", 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    [showSlider]=\"!liveOnly()\"\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    [(lastValue)]=\"lastValue\"\n    (toggledViaInteraction)=\"onSliderPause()\"\n    [clampValue]=\"clampValue\"\n/>\n", dependencies: [{ kind: "component", type: NxSettingSliderComponent, selector: "nx-setting-slider", inputs: ["showSlider", "value", "lastValue", "primaryIcon", "toggledValue", "toggledIcon", "toggledColor", "toFriendlyName", "dragging", "toSelectionRange", "clampValue", "showPopover"], outputs: ["valueChange", "lastValueChange", "draggingChange", "toggledViaInteraction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaybackSliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-playback-slider, nx-playback-toggle-slider', imports: [NxSettingSliderComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxPlaybackSliderComponent),
                            multi: true,
                        },
                    ], template: "<nx-setting-slider\n    [showSlider]=\"!liveOnly()\"\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    [(lastValue)]=\"lastValue\"\n    (toggledViaInteraction)=\"onSliderPause()\"\n    [clampValue]=\"clampValue\"\n/>\n" }]
        }] });

var ButtonSize;
(function (ButtonSize) {
    ButtonSize["SMALL"] = "small";
    ButtonSize["LARGE"] = "large";
})(ButtonSize || (ButtonSize = {}));
var ButtonVariant;
(function (ButtonVariant) {
    ButtonVariant["BRAND"] = "brand";
    ButtonVariant["ERROR"] = "error";
    ButtonVariant["SUCCESS"] = "success";
    ButtonVariant["WARNING"] = "warning";
    ButtonVariant["INFO"] = "info";
    ButtonVariant["LIGHT"] = "light";
    ButtonVariant["MEDIUM"] = "medium";
    ButtonVariant["DARK"] = "dark";
})(ButtonVariant || (ButtonVariant = {}));
var ButtonAppearance;
(function (ButtonAppearance) {
    ButtonAppearance["FILLED"] = "filled";
    ButtonAppearance["OUTLINED"] = "outlined";
    ButtonAppearance["TEXT"] = "text";
})(ButtonAppearance || (ButtonAppearance = {}));
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, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ 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', ...(ngDevMode ? [{ debugName: "size" }] : []));
        /**
         * The variant of the button that defines its color scheme.
         * @default 'brand'
         * @example
         * <nx-button variant="brand"></nx-button>
         */
        this.variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : []));
        /**
         * The appearance of the button.
         * @default 'filled'
         * @example
         * <nx-button appearance="outlined"></nx-button>
         */
        this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
        /**
         * Whether the button is selected. Only applies to the light/medium/dark variants when they are using the filled appearance.
         * @default false
         * @example
         * <nx-button [selected]="isSelected()"></nx-button>
         */
        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.classes = computed(() => {
            return `${this.size()} ${this.variant()} ${this.appearance()}`;
        }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
        /** Whether the button is in loading state. */
        this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
        this.ariaDisabled = ariaComputed(this.loading);
        // Log an error if the selected input is used with improper variant and appearances
        this.selectedErrorLog = effect(() => {
            const [selected, appearance, variant] = [
                this.selected(),
                this.appearance(),
                // Typescript fix for the template literal type of the variant input
                this.variant(),
            ];
            const isInvalidAppearance = appearance !== ButtonAppearance.FILLED;
            const isInvalidVariant = ![
                ButtonVariant.LIGHT,
                ButtonVariant.MEDIUM,
                ButtonVariant.DARK,
            ].includes(variant);
            if (selected && (isInvalidAppearance || isInvalidVariant)) {
                throw new Error(`Invalid 'selected' input usage: appearance '${appearance}' and variant '${variant}' are not compatible with 'selected'. Please use 'filled' appearance with 'light', 'medium', or 'dark' variants.`);
            }
        }, ...(ngDevMode ? [{ debugName: "selectedErrorLog" }] : []));
    }
    // 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: "20.1.6", ngImport: i0, type: NxButtonBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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: "20.1.6", ngImport: i0, type: NxAnchorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxAnchorBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAnchorBase, decorators: [{
            type: Directive
        }] });

/** Shared host configuration for all buttons */
const NX_BUTTON_HOST = {
    '[attr.disabled]': '_getDisabled()',
    '[class]': 'classes()',
    '[class.selected]': 'selected()',
    '[class.loading]': 'loading()',
    '[attr.aria-disabled]': 'ariaDisabled()',
};
/** Shared host configuration for buttons using the `<a>` tag. */
const NX_ANCHOR_HOST = {
    ...NX_BUTTON_HOST,
    '[attr.tabIndex]': 'disabled() ? -1 : 0',
};
class NxButtonComponent extends NxButtonBase {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxButtonComponent, isStandalone: true, selector: "button[nx-button]", host: { properties: { "attr.disabled": "_getDisabled()", "class": "classes()", "class.selected": "selected()", "class.loading": "loading()", "attr.aria-disabled": "ariaDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled]{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}\n"], dependencies: [{ kind: "component", type: LoadingSpinnerComponent, selector: "nx-loading-spinner", inputs: ["iconSize", "icon", "outlineRatio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[nx-button]', encapsulation: ViewEncapsulation.None, 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()',
                        '[class.loading]': 'loading()',
                        '[attr.aria-disabled]': 'ariaDisabled()',
                    }, imports: [LoadingSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled]{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}\n"] }]
        }] });
class NxAnchorComponent extends NxAnchorBase {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxAnchorComponent, isStandalone: true, selector: "a[nx-button]", host: { properties: { "attr.disabled": "_getDisabled()", "class": "classes()", "class.selected": "selected()", "class.loading": "loading()", "attr.aria-disabled": "ariaDisabled()", "attr.tabIndex": "disabled() ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled]{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}\n"], dependencies: [{ kind: "component", type: LoadingSpinnerComponent, selector: "nx-loading-spinner", inputs: ["iconSize", "icon", "outlineRatio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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()',
                        '[class.loading]': 'loading()',
                        '[attr.aria-disabled]': 'ariaDisabled()',
                        // Anchor tags do not natively have disabled state
                        '[attr.tabIndex]': 'disabled() ? -1 : 0',
                    }, encapsulation: ViewEncapsulation.None, imports: [LoadingSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled]{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}\n"] }]
        }] });

const CalendarColors = {
    Primary: generateCssVariableName('attentionSuccessGreen', 'initial', 20),
    Secondary: generateCssVariableName('attentionSuccessGreen', 'initial', 10),
};

// 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', ...(ngDevMode ? [{ debugName: "locale" }] : []));
        this.dateRangeEnabled = input(true, ...(ngDevMode ? [{ debugName: "dateRangeEnabled" }] : []));
        this.showHours = input(false, ...(ngDevMode ? [{ debugName: "showHours", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.availablePeriods = input(undefined, ...(ngDevMode ? [{ debugName: "availablePeriods" }] : []));
        this.periodIndexByDay = signal(new Map(), ...(ngDevMode ? [{ debugName: "periodIndexByDay" }] : []));
        this.periodIndexByMonth = signal(new Map(), ...(ngDevMode ? [{ debugName: "periodIndexByMonth" }] : []));
        this.periodIndexByHour = signal(new Map(), ...(ngDevMode ? [{ debugName: "periodIndexByHour" }] : []));
        /*
         * The indices are calculated eagerly in an effect so that they are updated both on input change and
         * on init, ensuring all views can be rendered immediately without delay.
         */
        this.buildIndexesEffect = effect(() => {
            const periods = this.availablePeriods();
            this.periodIndexByDay.set(this.buildDayIndex(periods));
            this.periodIndexByMonth.set(this.buildMonthIndex(periods));
            this.periodIndexByHour.set(this.buildHourIndex(periods));
        }, ...(ngDevMode ? [{ debugName: "buildIndexesEffect" }] : []));
        this.currentView = signal('days', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
        // 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(), ...(ngDevMode ? [{ debugName: "dateCurrentlyViewed" }] : []));
        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',
            });
        }, ...(ngDevMode ? [{ debugName: "carouselHeading" }] : []));
        /*
         * 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 periodIndex = this.periodIndexByDay();
            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';
                    }
                }
                let hasAvailablePeriod = false;
                let periodColor;
                const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
                const highestPriorityPeriod = periodIndex.get(key);
                if (highestPriorityPeriod) {
                    hasAvailablePeriod = true;
                    periodColor = this.getColorForPeriod(highestPriorityPeriod);
                }
                result[i - 1] = {
                    date,
                    outsideCurrentMonth,
                    isToday: isSameDay(date, new Date()),
                    selection,
                    hasAvailablePeriod,
                    periodColor: this.getColorValue(periodColor),
                };
            }
            return result;
        }, ...(ngDevMode ? [{ debugName: "daysOfTheMonth" }] : []));
        this.hoursDisabled = computed(() => {
            const selectedDays = this.selectedDays();
            return (!selectedDays ||
                (!!selectedDays.end && !isSameDay(selectedDays.start, selectedDays.end)));
        }, ...(ngDevMode ? [{ debugName: "hoursDisabled" }] : []));
        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 selectedDays = this.selectedDays();
            const periodIndex = this.periodIndexByHour();
            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 if (dateRangeEnabled && hoveredHour && hoveredHour.hour !== start) {
                        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';
                }
                let hasAvailablePeriod = false;
                let periodColor;
                if (selectedDays && !this.hoursDisabled()) {
                    const key = `${selectedDays.start.getFullYear()}-${selectedDays.start.getMonth()}-${selectedDays.start.getDate()}-${hour}`;
                    const highestPriorityPeriod = periodIndex.get(key);
                    if (highestPriorityPeriod) {
                        hasAvailablePeriod = true;
                        periodColor = this.getColorForPeriod(highestPriorityPeriod);
                    }
                }
                // 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,
                    hasAvailablePeriod,
                    periodColor: this.getColorValue(periodColor),
                };
            }
            return result;
        }, ...(ngDevMode ? [{ debugName: "hoursOfTheDay" }] : []));
        this.daysOfTheWeekNames = computed(() => {
            const weekStartOffset = weekStartToOffsetMap(weekStartLocale(this.locale()));
            return 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' });
            });
        }, ...(ngDevMode ? [{ debugName: "daysOfTheWeekNames" }] : []));
        this.monthNames = computed(() => {
            // Javascript only supports the Gregorian calendar and therefore always has 12 months
            return Array.from({ length: 12 }, (_, i) => {
                const date = new Date(2023, i, 1);
                return date.toLocaleString(this.locale(), { month: 'short' });
            });
        }, ...(ngDevMode ? [{ debugName: "monthNames" }] : []));
        this.allMonths = computed(() => {
            const periodIndex = this.periodIndexByMonth();
            const dateCurrentlyViewed = this.dateCurrentlyViewed();
            const year = dateCurrentlyViewed.getFullYear();
            return this.monthNames().map((display, i) => {
                let hasAvailablePeriod = false;
                let periodColor;
                const key = `${year}-${i}`;
                const highestPriorityPeriod = periodIndex.get(key);
                if (highestPriorityPeriod) {
                    hasAvailablePeriod = true;
                    periodColor = this.getColorForPeriod(highestPriorityPeriod);
                }
                return {
                    month: i,
                    display,
                    hasAvailablePeriod,
                    periodColor: this.getColorValue(periodColor),
                };
            });
        }, ...(ngDevMode ? [{ debugName: "allMonths" }] : []));
        this.hoveredHour = signal(undefined, ...(ngDevMode ? [{ debugName: "hoveredHour" }] : []));
        this.hoveredDay = signal(undefined, ...(ngDevMode ? [{ debugName: "hoveredDay" }] : []));
        this.selectedDays = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedDays" }] : []));
        this.selectedHours = signal({
            start: undefined,
            end: undefined,
        }, ...(ngDevMode ? [{ debugName: "selectedHours" }] : []));
        this.dateRange = signal(undefined, ...(ngDevMode ? [{ debugName: "dateRange" }] : []));
        this.onChange = () => { };
        this.onTouched = () => { };
    }
    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);
            this.selectedHours.set({ start: undefined, end: 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 });
            this.selectedHours.set({ start: undefined, 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 });
        this.selectedHours.set({ start: undefined, end: undefined });
    }
    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;
    }
    buildDayIndex(periods) {
        if (!periods || periods.length === 0) {
            return new Map();
        }
        const index = new Map();
        for (const period of periods) {
            const start = new Date(period.dateRange.start);
            const end = period.dateRange.end ? new Date(period.dateRange.end) : start;
            const currentDay = new Date(start.getFullYear(), start.getMonth(), start.getDate());
            const endDay = new Date(end.getFullYear(), end.getMonth(), end.getDate());
            const endTime = endDay.getTime();
            while (currentDay.getTime() <= endTime) {
                const key = `${currentDay.getFullYear()}-${currentDay.getMonth()}-${currentDay.getDate()}`;
                const existing = index.get(key);
                if (!existing || (period.priority ?? 1) < (existing.priority ?? 1)) {
                    index.set(key, period);
                }
                currentDay.setDate(currentDay.getDate() + 1);
            }
        }
        return index;
    }
    buildMonthIndex(periods) {
        if (!periods || periods.length === 0) {
            return new Map();
        }
        const index = new Map();
        for (const period of periods) {
            const start = period.dateRange.start;
            const end = period.dateRange.end ?? start;
            const currentMonth = new Date(start.getFullYear(), start.getMonth(), 1);
            const endMonth = new Date(end.getFullYear(), end.getMonth(), 1);
            const endTime = endMonth.getTime();
            while (currentMonth.getTime() <= endTime) {
                const key = `${currentMonth.getFullYear()}-${currentMonth.getMonth()}`;
                const existing = index.get(key);
                if (!existing || (period.priority ?? 1) < (existing.priority ?? 1)) {
                    index.set(key, period);
                }
                currentMonth.setMonth(currentMonth.getMonth() + 1);
            }
        }
        return index;
    }
    buildHourIndex(periods) {
        if (!periods || periods.length === 0) {
            return new Map();
        }
        const index = new Map();
        for (const period of periods) {
            const start = new Date(period.dateRange.start);
            const end = period.dateRange.end ? new Date(period.dateRange.end) : start;
            const currentHour = new Date(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours(), 0, 0, 0);
            const endHour = new Date(end.getFullYear(), end.getMonth(), end.getDate(), end.getHours(), 59, 59, 999);
            const endTime = endHour.getTime();
            while (currentHour.getTime() <= endTime) {
                const key = `${currentHour.getFullYear()}-${currentHour.getMonth()}-${currentHour.getDate()}-${currentHour.getHours()}`;
                const existing = index.get(key);
                if (!existing || (period.priority ?? 1) < (existing.priority ?? 1)) {
                    index.set(key, period);
                }
                currentHour.setHours(currentHour.getHours() + 1);
            }
        }
        return index;
    }
    getColorValue(cssVarName) {
        if (!cssVarName) {
            return undefined;
        }
        return this.themeProvider.colors()[cssVarName];
    }
    getColorForPeriod(period) {
        if (period.color) {
            return period.color;
        }
        return period.priority === undefined || period.priority === 1
            ? CalendarColors.Primary
            : CalendarColors.Secondary;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 }, availablePeriods: { classPropertyName: "availablePeriods", publicName: "availablePeriods", 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                [class.selectable-item--has-available-period]=\"day.hasAvailablePeriod\"\n                [style.--period-color]=\"day.periodColor\"\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                    [class.selectable-item--has-available-period]=\"hour.hasAvailablePeriod\"\n                    [style.--period-color]=\"hour.periodColor\"\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.month) {\n            <button\n                class=\"months-body__month button-override\"\n                [class.months-body__month--has-available-period]=\"month.hasAvailablePeriod\"\n                [style.--period-color]=\"month.periodColor\"\n                (click)=\"handleMonthClick(month.month)\"\n            >\n                {{ month.display }}\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{padding:12px 16px 16px;display:flex;flex-direction:column;background:var(--nxc-dark6-offset, var(--nxc-dark6));height:365px;border-radius:6px}:host.with-hour-selector{height:517px}:host{box-sizing:border-box}: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:9px;box-sizing:border-box;height:42px;min-height:42px}: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));text-align:center;cursor:pointer;padding:5px 10px;margin:-5px 0}:host .carousel-header__current-date{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)}: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;text-transform:uppercase;letter-spacing:.3px}:host .day-names__name{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)}:host .button-override{cursor:pointer;background:unset;border:unset}:host .selectable-item{border-radius:4px;color:var(--nxc-light10-offset, var(--nxc-light10));display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-top:5px;padding-bottom:5px}:host .selectable-item{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)}: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 .selectable-item:after{content:\"\";display:block;width:8px;height:2px;border-radius:1px}:host .selectable-item--has-available-period:after{background-color:var(--period-color, var(--nxc-attention-green))}:host:has(.selectable-item--selection-start):not(:has(.selectable-item--selection-end)) .selectable-item:hover:not(.selectable-item--selection-start){border-radius:0 4px 4px 0}:host .days-of-the-month{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:32px;grid-gap:2px 0px;padding:8px 0}:host .hours-body{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:32px;gap:2px 0px;padding:8px 0 16px;height:100%;border-top:solid 2px var(--nxc-dark7-offset, var(--nxc-dark7));height:auto}:host .months-body{display:grid;grid-template-columns:repeat(3,1fr);padding-top:8px;grid-gap:0 4px;height:100%}:host .months-body__month{border-radius:6px;color:var(--nxc-light10-offset, var(--nxc-light10));display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center}:host .months-body__month{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)}:host .months-body__month:after{content:\"\";display:block;width:16px;height:4px;border-radius:2px}:host .months-body__month--has-available-period:after{background-color:var(--period-color, var(--nxc-attention-green))}: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: "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: "20.1.6", ngImport: i0, type: NxCalendarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-calendar', imports: [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                [class.selectable-item--has-available-period]=\"day.hasAvailablePeriod\"\n                [style.--period-color]=\"day.periodColor\"\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                    [class.selectable-item--has-available-period]=\"hour.hasAvailablePeriod\"\n                    [style.--period-color]=\"hour.periodColor\"\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.month) {\n            <button\n                class=\"months-body__month button-override\"\n                [class.months-body__month--has-available-period]=\"month.hasAvailablePeriod\"\n                [style.--period-color]=\"month.periodColor\"\n                (click)=\"handleMonthClick(month.month)\"\n            >\n                {{ month.display }}\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{padding:12px 16px 16px;display:flex;flex-direction:column;background:var(--nxc-dark6-offset, var(--nxc-dark6));height:365px;border-radius:6px}:host.with-hour-selector{height:517px}:host{box-sizing:border-box}: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:9px;box-sizing:border-box;height:42px;min-height:42px}: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));text-align:center;cursor:pointer;padding:5px 10px;margin:-5px 0}:host .carousel-header__current-date{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)}: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;text-transform:uppercase;letter-spacing:.3px}:host .day-names__name{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)}:host .button-override{cursor:pointer;background:unset;border:unset}:host .selectable-item{border-radius:4px;color:var(--nxc-light10-offset, var(--nxc-light10));display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-top:5px;padding-bottom:5px}:host .selectable-item{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)}: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 .selectable-item:after{content:\"\";display:block;width:8px;height:2px;border-radius:1px}:host .selectable-item--has-available-period:after{background-color:var(--period-color, var(--nxc-attention-green))}:host:has(.selectable-item--selection-start):not(:has(.selectable-item--selection-end)) .selectable-item:hover:not(.selectable-item--selection-start){border-radius:0 4px 4px 0}:host .days-of-the-month{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:32px;grid-gap:2px 0px;padding:8px 0}:host .hours-body{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:32px;gap:2px 0px;padding:8px 0 16px;height:100%;border-top:solid 2px var(--nxc-dark7-offset, var(--nxc-dark7));height:auto}:host .months-body{display:grid;grid-template-columns:repeat(3,1fr);padding-top:8px;grid-gap:0 4px;height:100%}:host .months-body__month{border-radius:6px;color:var(--nxc-light10-offset, var(--nxc-light10));display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center}:host .months-body__month{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)}:host .months-body__month:after{content:\"\";display:block;width:16px;height:4px;border-radius:2px}:host .months-body__month--has-available-period:after{background-color:var(--period-color, var(--nxc-attention-green))}: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');

/** Config for button in notification */
class NxNotificationAction {
}
/** Config for link in notification with `href` */
class NxNotificationDetailHref {
}
const DEFAULT_DURATION = 7000;
const DEFAULT_TYPE = 'info';
/** Config for a notification */
class NxNotificationConfig {
}

/** Notification component.
 *
 * Made for use inside NxNotificationsComponent, but can be used outside.
 */
class NxNotificationComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.host = inject(ElementRef);
        this._closeOutput = output({ alias: 'close' });
        this.DEFAULT_DURATION = inject(NX_NOTIFICATIONS_DEFAULT_DURATION_MS, { optional: true }) ?? DEFAULT_DURATION;
        this.DEFAULT_TYPE = inject(NX_NOTIFICATIONS_DEFAULT_TYPE, { optional: true }) ?? DEFAULT_TYPE;
        this._ref = input.required(...(ngDevMode ? [{ debugName: "_ref", alias: 'notification' }] : [{ alias: 'notification' }]));
        this.id = computed(() => this._ref().id, ...(ngDevMode ? [{ debugName: "id" }] : []));
        this.content = computed(() => this._ref().content, ...(ngDevMode ? [{ debugName: "content" }] : []));
        this.config = computed(() => this._ref().config, ...(ngDevMode ? [{ debugName: "config" }] : []));
        this.type = computed(() => this.config()?.type ?? this.DEFAULT_TYPE, ...(ngDevMode ? [{ debugName: "type" }] : []));
        this.href = computed(() => {
            const { details } = this.config();
            return details && 'href' in details ? details : null;
        }, ...(ngDevMode ? [{ debugName: "href" }] : []));
        this.routerLink = computed(() => {
            const { details } = this.config();
            return details && 'routerLink' in details ? details : null;
        }, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
        this.duration = computed(() => this.config()?.duration ?? this.DEFAULT_DURATION, ...(ngDevMode ? [{ debugName: "duration" }] : []));
        this.durationVar = computed(() => `${this.duration()}ms`, ...(ngDevMode ? [{ debugName: "durationVar" }] : []));
        this.disableClose = computed(() => this.config()?.disableClose ?? false, ...(ngDevMode ? [{ debugName: "disableClose" }] : []));
        this._timeout = toObservable(this.duration)
            .pipe(take(1), switchMap(duration => (duration ? timer(duration) : NEVER)), takeUntilDestroyed())
            .subscribe(() => {
            this.close();
        });
        this.icon = computed(() => {
            const iconsMap = {
                info: 'Info16X16',
                success: 'Success16X16',
                attention: 'Attention16X16',
                error: 'Error24X24',
            };
            return iconsMap[this.type()];
        }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
        this.variableColors = signal({
            'warning-yellow': generateCssVariableName('attentionWarningYellow'),
            'error-red': generateCssVariableName('attentionErrorRed'),
            'bar-bg': generateCssVariableName('core', 'dark9'),
            'bar-highlight-bg': generateCssVariableName('core', 'dark15', 12),
        }, ...(ngDevMode ? [{ debugName: "variableColors" }] : []));
        this.close = () => {
            this._closeOutput.emit(this.id());
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxNotificationComponent, isStandalone: true, selector: "nx-notification", inputs: { _ref: { classPropertyName: "_ref", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { _closeOutput: "close" }, host: { properties: { "class": "'type-' + type()", "style.--bar-animation-duration": "durationVar()" } }, usesInheritance: true, ngImport: i0, template: "@if (!disableClose()) {\n    <button\n        data-testid=\"nx-notification__close-button\"\n        nx-button\n        appearance=\"text\"\n        variant=\"light\"\n        class=\"close-notification\"\n        (click)=\"close()\"\n    >\n        <nx-icon\n            useCurrentColor\n            icon=\"CloseMedium\"\n        ></nx-icon>\n    </button>\n}\n<div class=\"icon-container\">\n    <nx-icon [icon]=\"icon()\"></nx-icon>\n</div>\n<div class=\"content\">\n    <p class=\"content__text\">\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                    <span>{{ primary.label }}</span>\n                </button>\n            }\n            @if (config().secondaryAction; as secondary) {\n                <button\n                    nx-button\n                    appearance=\"outlined\"\n                    variant=\"light\"\n                    (click)=\"secondary.action(close)\"\n                >\n                    <span>{{ secondary.label }}</span>\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{width:19.5rem;box-sizing:border-box;position:relative;background-color:var(--nxc-dark2-offset, var(--nxc-dark2));border:1px solid var(--nxc-dark9-offset, var(--nxc-dark9));padding:1.25rem 2.25rem 1.25rem 1.25rem;border-radius:6px;overflow:hidden}:host.type-attention{background-color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host.type-error{background-color:hsl(from var(--nxc-attention-red) h s 15%);border-color:var(--nxc-attention-red)}:host.type-error .timer-bar{background-color:var(--nxc-attention-red)}:host.type-error .timer-bar__highlight{background-color:rgb(from var(--nxc-light4-offset, var(--nxc-light4)) r g b/60%)}: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{display:inline-flex;gap:.75rem}: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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .content__text{margin:0;color:var(--nxc-light4-offset, var(--nxc-light4));word-wrap:break-word;white-space:pre-line}:host .content__text{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 .content__details{outline:none;border:none;border-radius:0;color:inherit;padding:0;background-color:transparent;text-decoration:underline;cursor:pointer;color:var(--nxc-light4-offset, var(--nxc-light4));margin-top:.5rem}:host .content__details{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 .content__details:hover,:host .content__details:focus-visible{text-decoration:none}:host .content__actions{margin-top:.75rem;display:flex;gap:.5rem}:host .content__actions button span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}: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: "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: "20.1.6", ngImport: i0, type: NxNotificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-notification', imports: [CommonModule, RouterModule, NxIconComponent, NxButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class]': "'type-' + type()",
                        '[style.--bar-animation-duration]': 'durationVar()',
                    }, template: "@if (!disableClose()) {\n    <button\n        data-testid=\"nx-notification__close-button\"\n        nx-button\n        appearance=\"text\"\n        variant=\"light\"\n        class=\"close-notification\"\n        (click)=\"close()\"\n    >\n        <nx-icon\n            useCurrentColor\n            icon=\"CloseMedium\"\n        ></nx-icon>\n    </button>\n}\n<div class=\"icon-container\">\n    <nx-icon [icon]=\"icon()\"></nx-icon>\n</div>\n<div class=\"content\">\n    <p class=\"content__text\">\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                    <span>{{ primary.label }}</span>\n                </button>\n            }\n            @if (config().secondaryAction; as secondary) {\n                <button\n                    nx-button\n                    appearance=\"outlined\"\n                    variant=\"light\"\n                    (click)=\"secondary.action(close)\"\n                >\n                    <span>{{ secondary.label }}</span>\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{width:19.5rem;box-sizing:border-box;position:relative;background-color:var(--nxc-dark2-offset, var(--nxc-dark2));border:1px solid var(--nxc-dark9-offset, var(--nxc-dark9));padding:1.25rem 2.25rem 1.25rem 1.25rem;border-radius:6px;overflow:hidden}:host.type-attention{background-color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host.type-error{background-color:hsl(from var(--nxc-attention-red) h s 15%);border-color:var(--nxc-attention-red)}:host.type-error .timer-bar{background-color:var(--nxc-attention-red)}:host.type-error .timer-bar__highlight{background-color:rgb(from var(--nxc-light4-offset, var(--nxc-light4)) r g b/60%)}: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{display:inline-flex;gap:.75rem}: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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .content__text{margin:0;color:var(--nxc-light4-offset, var(--nxc-light4));word-wrap:break-word;white-space:pre-line}:host .content__text{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 .content__details{outline:none;border:none;border-radius:0;color:inherit;padding:0;background-color:transparent;text-decoration:underline;cursor:pointer;color:var(--nxc-light4-offset, var(--nxc-light4));margin-top:.5rem}:host .content__details{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 .content__details:hover,:host .content__details:focus-visible{text-decoration:none}:host .content__actions{margin-top:.75rem;display:flex;gap:.5rem}:host .content__actions button span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}: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"] }]
        }] });

/** Singleton service for dispatching and managing notifications. */
class NxNotificationsService {
    constructor() {
        this._componentInstance = signal(null, ...(ngDevMode ? [{ debugName: "_componentInstance" }] : []));
        this._notifications = signal([], ...(ngDevMode ? [{ debugName: "_notifications" }] : []));
        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: "20.1.6", ngImport: i0, type: NxNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxNotificationsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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';
/** Singleton container component that manages notifications.
 *
 * This component must exist for notifications to appear. Because the host has `position: relative`
 * for enter animations, positioning the component requires either an `!important` or outer element.
 */
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([], ...(ngDevMode ? [{ debugName: "openingNotifications" }] : []));
        this.openingIds = computed(() => new Set(this.openingNotifications().map(o => o.id)), ...(ngDevMode ? [{ debugName: "openingIds" }] : []));
        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, ...(ngDevMode ? [{ debugName: "containerHeight" }] : []));
        this._containerHeightEffect = effect(() => {
            this.containerObserver.observe(this.enterContainer().nativeElement);
        }, ...(ngDevMode ? [{ debugName: "_containerHeightEffect" }] : []));
        this.enterTranslation = computed(() => {
            const containerHeight = this.containerHeight();
            return containerHeight ? containerHeight + this.gap + this.padding : 0;
        }, ...(ngDevMode ? [{ debugName: "enterTranslation" }] : []));
        this.openingState = signal(TransitionStates.Idle, ...(ngDevMode ? [{ debugName: "openingState" }] : []));
        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;
                }
            }
        }, ...(ngDevMode ? [{ debugName: "_openStateEffect" }] : []));
        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([], ...(ngDevMode ? [{ debugName: "closingNotifications" }] : []));
        this.closingIds = computed(() => new Set(this.closingNotifications()), ...(ngDevMode ? [{ debugName: "closingIds" }] : []));
        this.afterClose = [];
        this.notificationComponents = viewChildren(NxNotificationComponent, ...(ngDevMode ? [{ debugName: "notificationComponents" }] : []));
        this.topShifts = signal(new Map(), ...(ngDevMode ? [{ debugName: "topShifts" }] : []));
        this.closingState = signal(TransitionStates.Idle, ...(ngDevMode ? [{ debugName: "closingState" }] : []));
        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();
                        // Keep closeQueue populated until the timeout consumes it, so a duplicate
                        // close() in this gap dedupes instead of wedging the pipeline (CLOUD-17893).
                        setTimeout(() => {
                            this.closeQueue = this.closeQueue.filter(id => !queue.includes(id));
                            this.closingNotifications.set(queue);
                            this.closingState.set(TransitionStates.Calculating);
                        });
                    }
                    else {
                        this.closingState.set(TransitionStates.Idle);
                    }
                    break;
                }
            }
        }, ...(ngDevMode ? [{ debugName: "_closeStateEffect" }] : []));
        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: "20.1.6", ngImport: i0, type: NxNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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{box-sizing:content-box;width:19.5rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:calc(var(--gap) * 1px);padding:calc(var(--padding) * 1px);visibility:hidden}.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{visibility:visible}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: "20.1.6", 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{box-sizing:content-box;width:19.5rem;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:calc(var(--gap) * 1px);padding:calc(var(--padding) * 1px);visibility:hidden}.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{visibility:visible}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', '');
            }
        }, ...(ngDevMode ? [{ debugName: "_styleAttributeEffect" }] : []));
        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: "20.1.6", ngImport: i0, type: __NxUseFormStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: __NxUseFormStyleDirective, isStandalone: true, selector: "[__useFormStyle]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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(...(ngDevMode ? [{ debugName: "key" }] : []));
        /** Text color for the message.
         *
         * @default 'error'
         */
        this.type = input('error', ...(ngDevMode ? [{ debugName: "type" }] : []));
        this.selected = computed(() => this.messagesContainer.state()?.key === this.key(), ...(ngDevMode ? [{ debugName: "selected" }] : []));
        this.host = inject(ElementRef);
        this.messagesContainer = inject(NxControlMessagesToken, {
            skipSelf: true,
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxControlMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline}:host[nx-cloud2-form-style]{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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxControlMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-control-message', imports: [], 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline}:host[nx-cloud2-form-style]{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 individual messages can be checked by setting a property
         * `reveal-messages` on the host element.
         */
        this.spacingLines = input(1, ...(ngDevMode ? [{ debugName: "spacingLines" }] : []));
        /** Use form field control's value as key to select message.
         *
         * If there are matched errors they will take precendent.
         */
        this.useValueState = input(false, ...(ngDevMode ? [{ debugName: "useValueState", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /** Manually select message.
         *
         * Strings are converted to `ControlState` objects with no data.
         *
         * `null` does not select any messages.
         */
        this.manualState = input(null, ...(ngDevMode ? [{ debugName: "manualState", transform: s => (typeof s === 'string' ? { key: s } : s) }] : [{
                transform: s => (typeof s === 'string' ? { key: s } : s),
            }]));
        this.state = computed(() => this.manualState() ??
            this.nxFormField.errorState() ??
            (this.useValueState() ? this.nxFormField.valueState() : null), ...(ngDevMode ? [{ debugName: "state" }] : []));
        this.projectedMessages = signal([], ...(ngDevMode ? [{ debugName: "projectedMessages" }] : []));
        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;
        }, ...(ngDevMode ? [{ debugName: "messages" }] : []));
        this.afterContentInit = signal(false, ...(ngDevMode ? [{ debugName: "afterContentInit" }] : []));
        this._selectedMessageEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            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);
        }, ...(ngDevMode ? [{ debugName: "_selectedMessageEffect" }] : []));
        this.selectedMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedMessage" }] : []));
        this.nxFormField = inject(NxFormFieldToken, { skipSelf: true });
        this.host = inject(ElementRef);
        this.width = signal(undefined, ...(ngDevMode ? [{ debugName: "width" }] : []));
    }
    get _spacingLines() {
        return this.spacingLines();
    }
    set _projectedMessages(messages) {
        this.projectedMessages.set(messages.toArray());
    }
    ngAfterContentInit() {
        this.afterContentInit.set(true);
    }
    ngAfterViewInit() {
        this.width.set(this.host.nativeElement.offsetWidth);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxControlMessagesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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: "manualState", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{position:relative;display:block;overflow:hidden;min-height:calc(21px * var(--spacing-lines))}:host[nx-cloud2-form-style]{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-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}:host[reveal-messages]{overflow:visible}:host[reveal-messages] .sizing-container{visibility:visible}\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: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{position:relative;display:block;overflow:hidden;min-height:calc(21px * var(--spacing-lines))}:host[nx-cloud2-form-style]{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-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}:host[reveal-messages]{overflow:visible}:host[reveal-messages] .sizing-container{visibility:visible}\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 a bound `formGroup`.
 *
 * Required for `nx-async-submit-button` and `nx-submit-button` to function.
 */
class NxFormObserverDirective {
    constructor() {
        this.initialValue = signal({}, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
        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, ...(ngDevMode ? [{ debugName: "compareFn" }] : []));
        this.formChanged = signal(false, ...(ngDevMode ? [{ debugName: "formChanged" }] : []));
        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
        this._formFields = signal([], ...(ngDevMode ? [{ debugName: "_formFields" }] : []));
        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()), ...(ngDevMode ? [{ debugName: "hasErrorState" }] : []));
        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: "20.1.6", ngImport: i0, type: NxFormObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", ngImport: i0, type: NxFormObserverDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxFormObserver]',
                    exportAs: 'nxFormObserver',
                    standalone: true,
                }]
        }], propDecorators: { _initialFormValue: [{
                type: Input,
                args: [{ alias: 'initialFormValue' }]
            }], initialFormValueChange: [{
                type: Output
            }] } });

/** Native `<label>` element with styling.
 *
 * Designed for use with `<nx-form-field>`, but can be used outside. */
class NxLabelComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.host = inject(ElementRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline-block;color:var(--nxc-dark15-offset, var(--nxc-dark15))}:host[nx-cloud2-form-style]{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-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: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:inline-block;color:var(--nxc-dark15-offset, var(--nxc-dark15))}:host[nx-cloud2-form-style]{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-legacy-form-style]{display:inline-block;font-family:var(--font-family-regular);font-size:var(--font-size-base);color:var(--label-color-original)}\n"] }]
        }] });

/** State of a form control, usually a validation error.
 *
 * Example from Angular's pattern validator: `{ key: 'pattern', data: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'} }`
 */
class ControlState {
}
/** Sets of triggers to display errors.
 *
 * The strings are validator error keys.
 *
 * Example: [Angular's maxLength validator](https://github.com/angular/angular/blob/d64ee6cc9decc83c58ba8e90780e9afe69326b86/packages/forms/src/validators.ts#L339)
 *
 */
class ErrorMatches {
}
/** Convenience function for extending `ErrorMatches`. */
function extendErrorMatches(base, ...others) {
    let { onChange = [], onBlur = [], onSubmit = [] } = base;
    for (const matches of others) {
        onChange = onChange.concat(matches.onChange ?? []);
        onBlur = onBlur.concat(matches.onBlur ?? []);
        onSubmit = onSubmit.concat(matches.onSubmit ?? []);
    }
    return { onChange, onBlur, onSubmit };
}
/** Base `ErrorMatches` for a text input.
 *
 * Default set used by form field if `NxDefaultErrorMatchToken` is not provided.
 */
const NX_BASE_ERROR_MATCHES = {
    onChange: ['maxlength'],
    onBlur: ['pattern'],
    onSubmit: ['required'],
};
/** Convenience function for extending `NX_BASE_ERROR_MATCHES`. */
function extendNxBaseErrorMatches(...others) {
    return extendErrorMatches(NX_BASE_ERROR_MATCHES, ...others);
}
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;
        if (control.dirty) {
            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 notYetDirty = control.pristine && changeErrors.some(e => e in errors);
            const notYetTouched = control.untouched && blurErrors.some(e => e in errors);
            const notYetSubmitted = !form.submitted && submitErrors.some(e => e in errors);
            if (!(notYetDirty || notYetTouched || notYetSubmitted)) {
                console.warn('No matches found for errors', errors);
            }
        }
        return null;
    };
}

/** Directive to make an element compatible with `nx-form-field`.
 *
 * When the parent field has error state, the directive notifies the control
 * by setting `aria-invalid="true"` on the host element. It's the control's
 * responsibility to do its own styling for error state.
 *
 * Alternatively, if the error styling needs to be applied to a child element
 * instead of the host, the control can inject the directive and read the
 * state from the public `errorState` and `invalid` signals on the directive.
 */
class NxFormFieldControlDirective {
    constructor() {
        this.host = inject(ElementRef);
        this.formField = inject(NxFormFieldToken, { optional: true });
        /** Error state of the parent form field. */
        // eslint-disable-next-line @angular-eslint/no-uncalled-signals
        this.errorState = this.formField?.errorState ?? signal(null);
        /** If parent field has error state. */
        this.hasErrorState = computed(() => !!this.errorState(), ...(ngDevMode ? [{ debugName: "hasErrorState" }] : []));
        this.ariaInvalid = ariaComputed(this.hasErrorState);
        // Revert changes made to value not made by directive
        this.hostAriaInvalidValue = signal(this.host.nativeElement.ariaInvalid, ...(ngDevMode ? [{ debugName: "hostAriaInvalidValue" }] : []));
        this.hostAriaInvalidObserver = new MutationObserver(() => {
            this.hostAriaInvalidValue.set(this.host.nativeElement.ariaInvalid);
        });
        /* Use an effect instead of host property to allow manual setting of property when
        not inside field since using `null` value in `host` prevents that. */
        this._ariaInvalidEffect = effect(() => {
            const [_hostValue, ariaInvalid] = [this.hostAriaInvalidValue(), this.ariaInvalid()];
            if (this.formField) {
                this.host.nativeElement.ariaInvalid = ariaInvalid;
            }
        }, ...(ngDevMode ? [{ debugName: "_ariaInvalidEffect" }] : []));
        this.hostAriaInvalidObserver.observe(this.host.nativeElement, {
            attributeFilter: ['aria-invalid'],
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxFormFieldControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxFormFieldControlDirective, isStandalone: true, selector: "[nxControl]", exportAs: ["nxControl"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxFormFieldControlDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxControl]',
                    exportAs: 'nxControl',
                    standalone: true,
                }]
        }], ctorParameters: () => [] });

/** 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).
 *
 * The field must be inside a reactive form and is used with three child elements:
 * 1. `nx-label` for the control (optional)
 * 2. The control with `NxControlDirective` (required)
 * 3. `nx-control-messages` for control state messages (optional)
 *
 * Adding validation messages:
 * 1. Add validator functions to the associated `FormControl`.
 * 2. Set triggers with the `errorMatches` input. This is what tells the field
 *    when to display specific errors.
 *    The default value contains a base set for text inputs.
 * 3. Add messages using `nx-control-message` elements, with the `key` input matching
 *    a trigger specified in (2).
 */
class NxFormFieldComponent extends BaseComponent {
    constructor() {
        super();
        this.defaultErrorMatches = inject(NxDefaultErrorMatchToken, { optional: true }) ?? NX_BASE_ERROR_MATCHES;
        /** Matches or a custom function for when to display errors.
         *
         * @default NX_BASE_ERROR_MATCHES
         */
        this.errorMatcher = input(errorMatcherFactory(this.defaultErrorMatches), ...(ngDevMode ? [{ debugName: "errorMatcher", transform: errorMatcherFactory, alias: 'errorMatches' }] : [{ transform: errorMatcherFactory, alias: 'errorMatches' }]));
        /** Whether to automatically associate label with control host element. */
        this.automaticLabeling = input(true, ...(ngDevMode ? [{ debugName: "automaticLabeling", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.label = contentChild(NxLabelComponent, ...(ngDevMode ? [{ debugName: "label" }] : []));
        /** Only used for autolabeling in base field */
        this.nxControlDirective = contentChild(NxFormFieldControlDirective, ...(ngDevMode ? [{ debugName: "nxControlDirective", descendants: true }] : [{ descendants: true }]));
        /** If labelled element is not control directive host or not direct child of field */
        this.customLabelTarget = signal(null, ...(ngDevMode ? [{ debugName: "customLabelTarget" }] : []));
        this.ngControl = contentChild.required(NgControl, { descendants: true });
        this.messages = contentChild(NxControlMessagesToken, ...(ngDevMode ? [{ debugName: "messages" }] : []));
        this._valueState = signal(null, ...(ngDevMode ? [{ debugName: "_valueState" }] : []));
        /** The current value for the control.
         *
         * Used for non-error control messages.
         */
        this.valueState = this._valueState.asReadonly();
        this._errorState = signal(null, ...(ngDevMode ? [{ debugName: "_errorState" }] : []));
        /** The current validation error for the control */
        this.errorState = this._errorState.asReadonly();
        this.destroyRef = inject(DestroyRef);
        this.formGroup = inject(FormGroupDirective, { skipSelf: true, optional: true });
        this.formObserver = inject(NxFormObserverDirective, { skipSelf: true, optional: true });
        this.submitted = false;
        this.afterViewInit = signal(false, ...(ngDevMode ? [{ debugName: "afterViewInit" }] : []));
        // Don't use label `for` for non-labelable elements
        // https://stackoverflow.com/a/76384561
        // https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#labelable
        this.LABELABLE_TAG_NAMES = [
            'BUTTON',
            'INPUT',
            'METER',
            'OUTPUT',
            'PROGRESS',
            'SELECT',
            'TEXTAREA',
        ];
        this._autoLabelEffect = effect(onCleanup => {
            if (!this.afterViewInit()) {
                return;
            }
            // Native elements aren't available until after view init
            const [automaticLabeling, label, controlHost, customLabelTarget] = [
                this.automaticLabeling(),
                this.label()?.host.nativeElement,
                this.nxControlDirective()?.host.nativeElement,
                this.customLabelTarget()?.nativeElement,
            ];
            if (!automaticLabeling || !label) {
                return;
            }
            const target = controlHost || customLabelTarget;
            if (!target) {
                return;
            }
            if (this.LABELABLE_TAG_NAMES.includes(target.tagName)) {
                if (!label.hasAttribute('for')) {
                    const id = target.getAttribute('id') ?? crypto.randomUUID();
                    const missingId = !target.hasAttribute('id');
                    if (missingId) {
                        target.setAttribute('id', id);
                    }
                    label.setAttribute('for', id);
                    onCleanup(() => {
                        if (missingId) {
                            target.removeAttribute('id');
                        }
                        label.removeAttribute('for');
                    });
                }
            }
            else {
                if (!target.hasAttribute('aria-labelledby')) {
                    const id = label.getAttribute('id') ?? crypto.randomUUID();
                    const missingId = !label.hasAttribute('id');
                    if (missingId) {
                        label.setAttribute('id', id);
                    }
                    target.setAttribute('aria-labelledby', id);
                    onCleanup(() => {
                        if (missingId) {
                            label.removeAttribute('id');
                        }
                        target.removeAttribute('aria-labelledby');
                    });
                }
            }
        }, ...(ngDevMode ? [{ debugName: "_autoLabelEffect" }] : []));
        this.formObserver?.formFields.update(ff => ff.concat(this));
    }
    ngAfterContentInit() {
        const ngControl = this.ngControl();
        if (ngControl.value) {
            this._valueState.set({ key: ngControl.value });
        }
        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;
        })) ?? of(), ngControl.control.events.pipe(filter(e => 'touched' in e)), ngControl.statusChanges)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => {
            const errorState = this.errorMatcher()(ngControl, this.formGroup ?? { submitted: false });
            this._errorState.set(errorState);
        });
        this.formObserver?.reset$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.submitted = false;
        });
    }
    ngAfterViewInit() {
        this.afterViewInit.set(true);
    }
    ngOnDestroy() {
        this.formObserver?.formFields.update(ff => ff.filter(f => f !== this));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxFormFieldComponent, isStandalone: true, selector: "nx-form-field", inputs: { errorMatcher: { classPropertyName: "errorMatcher", publicName: "errorMatches", isSignal: true, isRequired: false, transformFunction: null }, automaticLabeling: { classPropertyName: "automaticLabeling", publicName: "automaticLabeling", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NxFormFieldToken,
                useExisting: forwardRef(() => NxFormFieldComponent),
            },
        ], queries: [{ propertyName: "label", first: true, predicate: NxLabelComponent, descendants: true, isSignal: true }, { propertyName: "nxControlDirective", first: true, predicate: NxFormFieldControlDirective, descendants: true, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "messages", first: true, predicate: NxControlMessagesToken, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$2.NxThemeAttributeDirective }, { directive: __NxUseFormStyleDirective }], ngImport: i0, template: "@if (label()) {\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 (messages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: ["nx-form-field[nx-cloud2-form-style],[nx-form-field][nx-cloud2-form-style]{display:block}nx-form-field[nx-cloud2-form-style] .label-container,[nx-form-field][nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-cloud2-form-style] .messages-container,[nx-form-field][nx-cloud2-form-style] .messages-container{margin-top:.25rem}nx-form-field[nx-legacy-form-style],[nx-form-field][nx-legacy-form-style]{display:block}nx-form-field[nx-legacy-form-style] .label-container,[nx-form-field][nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-legacy-form-style] .messages-container,[nx-form-field][nx-legacy-form-style] .messages-container{margin-top:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxFormFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-form-field', encapsulation: ViewEncapsulation.None, imports: [], hostDirectives: [NxThemeAttributeDirective, __NxUseFormStyleDirective], providers: [
                        {
                            provide: NxFormFieldToken,
                            useExisting: forwardRef(() => NxFormFieldComponent),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\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 (messages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: ["nx-form-field[nx-cloud2-form-style],[nx-form-field][nx-cloud2-form-style]{display:block}nx-form-field[nx-cloud2-form-style] .label-container,[nx-form-field][nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-cloud2-form-style] .messages-container,[nx-form-field][nx-cloud2-form-style] .messages-container{margin-top:.25rem}nx-form-field[nx-legacy-form-style],[nx-form-field][nx-legacy-form-style]{display:block}nx-form-field[nx-legacy-form-style] .label-container,[nx-form-field][nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-legacy-form-style] .messages-container,[nx-form-field][nx-legacy-form-style] .messages-container{margin-top:.25rem}\n"] }]
        }], ctorParameters: () => [] });

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

/** Programmatically mark a reactive form as submitted.
 *
 * Angular only flips `FormGroupDirective.submitted` — which is what reveals
 * `required` / on-submit control messages — when a native `submit` event reaches
 * the `<form>` element. That breaks down whenever a submit button is rendered
 * *outside* its `<form>`: the clearest case is `nx-wizard`, which projects the
 * `nxWizardButtons` template into a sibling section via `ngTemplateOutlet`, so the
 * button is no longer a DOM descendant of the form and clicking it never fires a
 * native submit.
 *
 * Calling `onSubmit` mirrors the native path exactly: it sets `submitted`, syncs
 * pending controls, and emits `ngSubmit` (which `nx-form-field` subscribes to in
 * order to re-evaluate error state). The synthetic event is only read for its
 * `target.method` (dialog forms), so a plain `SubmitEvent` is safe.
 */
function submitForm(form) {
    form.onSubmit(new SubmitEvent('submit'));
}

/** Interface to be implemented by injectable handling uncaught errors. */
class NxUncaughtErrorHandler {
}
const NxUncaughtErrorHandlerToken = new InjectionToken('Injectable to handle uncaught errors in form submissions');

/** A button to handle asynchronous form submissions.
 *
 * There are three states:
 *
 * 1. Valid: No visible form errors. Can be focused and fired.
 * 2. Invalid: Form errors visible. Can be focused but not fired.
 * 3. Busy: Executing the request. Can be focused but not fired.
 *
 * Invalid form submissions will always be blocked, but the button itself will
 * only have invalid state after errors are visible to the user in the form.
 */
class NxAsyncSubmitButtonComponent extends NxButtonComponent {
    constructor() {
        super(...arguments);
        /** Action to be executed on submit. */
        this.asyncAction = input.required(...(ngDevMode ? [{ debugName: "asyncAction", alias: 'action' }] : [{ alias: 'action' }]));
        this.formObserver = inject(NxFormObserverDirective, { skipSelf: true });
        this.host = inject(ElementRef);
        this.hasErrorState = this.formObserver.hasErrorState;
        this.ariaDisabled = ariaComputed(this.loading, this.hasErrorState);
        this.injectedUncaughtErrorHandler = inject(NxUncaughtErrorHandlerToken, { optional: true });
        this.uncaughtErrorHandler = this.injectedUncaughtErrorHandler ?? {
            handleUncaughtError: error => console.error(error),
        };
    }
    execute() {
        if (this.loading()) {
            return;
        }
        const { form } = this.formObserver;
        if (form.invalid) {
            if (!form.submitted) {
                markAllAsDirty(form.control.controls);
                form.control.markAllAsTouched();
                // When this button is rendered outside its <form> element (e.g. nx-wizard
                // projects nxWizardButtons into a sibling section via ngTemplateOutlet) no
                // native submit event fires, so `required`/on-submit messages never show.
                // Trigger submit manually in that case; inside a form the native event handles it.
                if (!this.host.nativeElement.closest('form')) {
                    submitForm(form);
                }
            }
            return;
        }
        form.control.disable();
        this.loading.set(true);
        const action = this.asyncAction().action();
        const action$ = (action instanceof Promise ? from(action) : action.pipe(take(1))).pipe(share());
        const { success, error = this.uncaughtErrorHandler.handleUncaughtError } = this.asyncAction();
        action$.subscribe({
            next: res => {
                success(res);
                this.loading.set(false);
                form.control.enable();
            },
            error: err => {
                try {
                    error(err);
                }
                catch (err2) {
                    this.uncaughtErrorHandler.handleUncaughtError(err2);
                }
                this.loading.set(false);
                form.control.enable();
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAsyncSubmitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxAsyncSubmitButtonComponent, isStandalone: true, selector: "button[nx-async-submit-button]", inputs: { asyncAction: { classPropertyName: "asyncAction", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "submit" }, listeners: { "click": "execute()" }, properties: { "class.nx-button--form-error": "hasErrorState()", "attr.aria-disabled": "ariaDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled],[nx-button][nx-async-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-async-submit-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-async-submit-button]{color:var(--color)}[nx-async-submit-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-async-submit-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-async-submit-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-async-submit-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-async-submit-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-async-submit-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-async-submit-button] span.nx-button-text{padding:0 4px}[nx-async-submit-button].icon-only>span.nx-button-text{display:none}[nx-async-submit-button].small{height:32px;padding:5.5px 7px}[nx-async-submit-button].small{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)}[nx-async-submit-button].small.icon-only{padding:5px;min-width:unset}[nx-async-submit-button].large{height:40px;padding:7px 11px}[nx-async-submit-button].large{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)}[nx-async-submit-button].large.icon-only{padding:7px;min-width:unset}[nx-async-submit-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-async-submit-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-async-submit-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-async-submit-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-async-submit-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-async-submit-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-async-submit-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-async-submit-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-async-submit-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-async-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-async-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-async-submit-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-async-submit-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-async-submit-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-async-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-async-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-async-submit-button].filled{background:var(--background)}[nx-async-submit-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-async-submit-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-async-submit-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-async-submit-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-async-submit-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-async-submit-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-async-submit-button].outlined{background:none;border-style:solid;border-width:1px}[nx-async-submit-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-async-submit-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-async-submit-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-async-submit-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-async-submit-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-async-submit-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-async-submit-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-async-submit-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-async-submit-button].outlined{border-color:var(--border-color)}[nx-async-submit-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-async-submit-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-async-submit-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-async-submit-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-async-submit-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-async-submit-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-async-submit-button].text{background:none;min-width:auto}[nx-async-submit-button].text.brand{--color: var(--nxc-brand)}[nx-async-submit-button].text.error{--color: var(--nxc-attention-red)}[nx-async-submit-button].text.success{--color: var(--nxc-attention-green)}[nx-async-submit-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-async-submit-button].text.info{--color: var(--nxc-attention-blue)}[nx-async-submit-button].text.light,[nx-async-submit-button].text.medium,[nx-async-submit-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-async-submit-button][disabled],[nx-async-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-async-submit-button].icon-only>span{display:none}[nx-async-submit-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-async-submit-button].nx-button--form-error:not(.loading){cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingSpinnerComponent, selector: "nx-loading-spinner", inputs: ["iconSize", "icon", "outlineRatio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAsyncSubmitButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[nx-async-submit-button]', encapsulation: ViewEncapsulation.None, imports: [CommonModule, LoadingSpinnerComponent], host: {
                        '[class.nx-button--form-error]': 'hasErrorState()',
                        '[attr.aria-disabled]': 'ariaDisabled()',
                        type: 'submit',
                        '(click)': 'execute()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled],[nx-button][nx-async-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-async-submit-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-async-submit-button]{color:var(--color)}[nx-async-submit-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-async-submit-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-async-submit-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-async-submit-button]:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-async-submit-button]:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-async-submit-button]:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-async-submit-button] span.nx-button-text{padding:0 4px}[nx-async-submit-button].icon-only>span.nx-button-text{display:none}[nx-async-submit-button].small{height:32px;padding:5.5px 7px}[nx-async-submit-button].small{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)}[nx-async-submit-button].small.icon-only{padding:5px;min-width:unset}[nx-async-submit-button].large{height:40px;padding:7px 11px}[nx-async-submit-button].large{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)}[nx-async-submit-button].large.icon-only{padding:7px;min-width:unset}[nx-async-submit-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-async-submit-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-async-submit-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-async-submit-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-async-submit-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-async-submit-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-async-submit-button].filled.light.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.light.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-async-submit-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-async-submit-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-async-submit-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-async-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-async-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.medium.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-async-submit-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-async-submit-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-async-submit-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-async-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-async-submit-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-async-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-async-submit-button].filled.dark.selected:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-async-submit-button].filled{background:var(--background)}[nx-async-submit-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-async-submit-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-async-submit-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-async-submit-button].filled:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-async-submit-button].filled:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-async-submit-button].filled:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-async-submit-button].outlined{background:none;border-style:solid;border-width:1px}[nx-async-submit-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-async-submit-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-async-submit-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-async-submit-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-async-submit-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-async-submit-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-async-submit-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-async-submit-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-async-submit-button].outlined{border-color:var(--border-color)}[nx-async-submit-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-async-submit-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-async-submit-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-async-submit-button].outlined:hover:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-async-submit-button].outlined:focus-visible:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-async-submit-button].outlined:active:not([disabled]):not([nx-async-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-async-submit-button].text{background:none;min-width:auto}[nx-async-submit-button].text.brand{--color: var(--nxc-brand)}[nx-async-submit-button].text.error{--color: var(--nxc-attention-red)}[nx-async-submit-button].text.success{--color: var(--nxc-attention-green)}[nx-async-submit-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-async-submit-button].text.info{--color: var(--nxc-attention-blue)}[nx-async-submit-button].text.light,[nx-async-submit-button].text.medium,[nx-async-submit-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-async-submit-button][disabled],[nx-async-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-async-submit-button].icon-only>span{display:none}[nx-async-submit-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-async-submit-button].nx-button--form-error:not(.loading){cursor:not-allowed}\n"] }]
        }] });

const imports$7 = [NxAsyncSubmitButtonComponent, NxFormObserverDirective];
class NxAsyncSubmitButtonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAsyncSubmitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NxAsyncSubmitButtonModule, imports: [NxAsyncSubmitButtonComponent, NxFormObserverDirective], exports: [NxAsyncSubmitButtonComponent, NxFormObserverDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAsyncSubmitButtonModule, imports: [NxAsyncSubmitButtonComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxAsyncSubmitButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$7,
                    exports: imports$7,
                }]
        }] });

/** Synchronous version of `nx-async-submit-button`.
 *
 * Since there's no internal busy state to manage, the submit action isn't
 * handled in the button and click events are blocked instead.
 */
class NxSubmitButtonComponent extends NxButtonComponent {
    constructor(host) {
        super();
        this.host = host;
        this.formObserver = inject(NxFormObserverDirective, { skipSelf: true });
        this.hasErrorState = this.formObserver.hasErrorState;
        this.ariaDisabled = ariaComputed(this.hasErrorState);
        this.onClick = (event) => {
            const { form } = this.formObserver;
            if (form.invalid) {
                event.stopImmediatePropagation();
                if (!form.submitted) {
                    markAllAsDirty(form.control.controls);
                    form.control.markAllAsTouched();
                    // When this button is rendered outside its <form> element (e.g. nx-wizard
                    // projects nxWizardButtons into a sibling section via ngTemplateOutlet) no
                    // native submit event fires, so `required`/on-submit messages never show.
                    // Trigger submit manually in that case; inside a form the native event handles it.
                    if (!this.host.nativeElement.closest('form')) {
                        submitForm(form);
                    }
                }
            }
        };
        host.nativeElement.addEventListener('click', this.onClick, true);
        // https://github.com/angular/angular/issues/9587#issuecomment-812869074
    }
    ngOnDestroy() {
        this.host.nativeElement.removeEventListener('click', this.onClick, true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmitButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxSubmitButtonComponent, isStandalone: true, selector: "button[nx-submit-button]", host: { attributes: { "type": "submit" }, properties: { "class.nx-button--form-error": "hasErrorState()", "attr.aria-disabled": "ariaDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled],[nx-button][nx-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-submit-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-submit-button]{color:var(--color)}[nx-submit-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-submit-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-submit-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-submit-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-submit-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-submit-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-submit-button] span.nx-button-text{padding:0 4px}[nx-submit-button].icon-only>span.nx-button-text{display:none}[nx-submit-button].small{height:32px;padding:5.5px 7px}[nx-submit-button].small{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)}[nx-submit-button].small.icon-only{padding:5px;min-width:unset}[nx-submit-button].large{height:40px;padding:7px 11px}[nx-submit-button].large{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)}[nx-submit-button].large.icon-only{padding:7px;min-width:unset}[nx-submit-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-submit-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-submit-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-submit-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-submit-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-submit-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-submit-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-submit-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-submit-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-submit-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-submit-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-submit-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-submit-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-submit-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-submit-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-submit-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-submit-button].filled{background:var(--background)}[nx-submit-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-submit-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-submit-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-submit-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-submit-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-submit-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-submit-button].outlined{background:none;border-style:solid;border-width:1px}[nx-submit-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-submit-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-submit-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-submit-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-submit-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-submit-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-submit-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-submit-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-submit-button].outlined{border-color:var(--border-color)}[nx-submit-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-submit-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-submit-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-submit-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-submit-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-submit-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-submit-button].text{background:none;min-width:auto}[nx-submit-button].text.brand{--color: var(--nxc-brand)}[nx-submit-button].text.error{--color: var(--nxc-attention-red)}[nx-submit-button].text.success{--color: var(--nxc-attention-green)}[nx-submit-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-submit-button].text.info{--color: var(--nxc-attention-blue)}[nx-submit-button].text.light,[nx-submit-button].text.medium,[nx-submit-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-submit-button][disabled],[nx-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-submit-button].icon-only>span{display:none}[nx-submit-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-submit-button].nx-button--form-error{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: LoadingSpinnerComponent, selector: "nx-loading-spinner", inputs: ["iconSize", "icon", "outlineRatio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmitButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[nx-submit-button]', encapsulation: ViewEncapsulation.None, imports: [LoadingSpinnerComponent], host: {
                        '[class.nx-button--form-error]': 'hasErrorState()',
                        '[attr.aria-disabled]': 'ariaDisabled()',
                        type: 'submit',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"nx-icon:not([iconPositionEnd])\"></ng-content>\n\n<span class=\"nx-button-text\"><ng-content></ng-content></span>\n\n<ng-content select=\"nx-icon[iconPositionEnd]\"></ng-content>\n\n@if (loading()) {\n    <nx-loading-spinner [iconSize]=\"size() === 'large' ? 16 : 14\"></nx-loading-spinner>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-button]{color:var(--color)}[nx-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-button] span.nx-button-text{padding:0 4px}[nx-button].icon-only>span.nx-button-text{display:none}[nx-button].small{height:32px;padding:5.5px 7px}[nx-button].small{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)}[nx-button].small.icon-only{padding:5px;min-width:unset}[nx-button].large{height:40px;padding:7px 11px}[nx-button].large{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)}[nx-button].large.icon-only{padding:7px;min-width:unset}[nx-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-button].filled{background:var(--background)}[nx-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-button].outlined{background:none;border-style:solid;border-width:1px}[nx-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-button].outlined{border-color:var(--border-color)}[nx-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-button].text{background:none;min-width:auto}[nx-button].text.brand{--color: var(--nxc-brand)}[nx-button].text.error{--color: var(--nxc-attention-red)}[nx-button].text.success{--color: var(--nxc-attention-green)}[nx-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-button].text.info{--color: var(--nxc-attention-blue)}[nx-button].text.light,[nx-button].text.medium,[nx-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-button][disabled],[nx-button][nx-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-button].icon-only>span{display:none}[nx-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-submit-button]{--background: var(--nxc-light1-offset, var(--nxc-light1));--color: var(--nxc-dark1-offset, var(--nxc-dark1));--spinner-color: var(--color);position:relative;cursor:pointer;border-radius:6px;justify-content:center;display:flex;align-items:center;text-decoration:none;text-wrap:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:80px;border:solid 1px transparent;--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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}[nx-submit-button]{color:var(--color)}[nx-submit-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-submit-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + 6))}[nx-submit-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-submit-button]:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-submit-button]:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l + .06))}[nx-submit-button]:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){color:hsl(from var(--color) h s calc(l - 3%))}}[nx-submit-button] span.nx-button-text{padding:0 4px}[nx-submit-button].icon-only>span.nx-button-text{display:none}[nx-submit-button].small{height:32px;padding:5.5px 7px}[nx-submit-button].small{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)}[nx-submit-button].small.icon-only{padding:5px;min-width:unset}[nx-submit-button].large{height:40px;padding:7px 11px}[nx-submit-button].large{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)}[nx-submit-button].large.icon-only{padding:7px;min-width:unset}[nx-submit-button].filled.brand{--background: var(--nxc-brand);--color: var(--nxc-brand-contrast, var(--nxc-dark1))}[nx-submit-button].filled.error{--background: var(--nxc-attention-red);--color: var(--nxc-attention-red-contrast, var(--nxc-dark1))}[nx-submit-button].filled.success{--background: var(--nxc-attention-green);--color: var(--nxc-attention-green-contrast, var(--nxc-light1))}[nx-submit-button].filled.warning{--background: var(--nxc-attention-yellow);--color: var(--nxc-attention-yellow-contrast, var(--nxc-dark1))}[nx-submit-button].filled.info{--background: var(--nxc-attention-blue);--color: var(--nxc-attention-blue-contrast, var(--nxc-dark1))}[nx-submit-button].filled.light:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-submit-button].filled.light.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark12-offset, var(--nxc-dark12))}[nx-submit-button].filled.light.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-submit-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-submit-button].filled.light.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.light.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.light.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-submit-button].filled.medium:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-submit-button].filled.medium.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-submit-button].filled.medium.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-submit-button].filled.medium.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.medium.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.medium.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-submit-button].filled.dark:not(.selected){--color: var(--nxc-light10-offset, var(--nxc-light10));--background: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-submit-button].filled.dark.selected{border-style:solid;border-width:1px;--color: var(--nxc-light4-offset, var(--nxc-light4));--background: var(--nxc-dark7-offset, var(--nxc-dark7))}[nx-submit-button].filled.dark.selected{border-color:var(--nxc-dark15-offset, var(--nxc-dark15))}[nx-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + 6))}[nx-submit-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){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%))){[nx-submit-button].filled.dark.selected:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.dark.selected:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l + .06))}[nx-submit-button].filled.dark.selected:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark15-offset, var(--nxc-dark15)) h s calc(l - 3%))}}[nx-submit-button].filled{background:var(--background)}[nx-submit-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-submit-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + 6))}[nx-submit-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-submit-button].filled:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-submit-button].filled:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l + .06))}[nx-submit-button].filled:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){background:hsl(from var(--background) h s calc(l - 3%))}}[nx-submit-button].outlined{background:none;border-style:solid;border-width:1px}[nx-submit-button].outlined.brand{--color: var(--nxc-brand);--border-color: var(--nxc-brand)}[nx-submit-button].outlined.error{--color: var(--nxc-attention-red);--border-color: var(--nxc-attention-red)}[nx-submit-button].outlined.success{--color: var(--nxc-attention-green);--border-color: var(--nxc-attention-green)}[nx-submit-button].outlined.warning{--color: var(--nxc-attention-yellow);--border-color: var(--nxc-attention-yellow)}[nx-submit-button].outlined.info{--color: var(--nxc-attention-blue);--border-color: var(--nxc-attention-blue)}[nx-submit-button].outlined.light{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark9-offset, var(--nxc-dark9))}[nx-submit-button].outlined.medium{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark6-offset, var(--nxc-dark6))}[nx-submit-button].outlined.dark{--color: var(--nxc-light10-offset, var(--nxc-light10));--border-color: var(--nxc-dark4-offset, var(--nxc-dark4))}[nx-submit-button].outlined{border-color:var(--border-color)}[nx-submit-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-submit-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + 6))}[nx-submit-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){[nx-submit-button].outlined:hover:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-submit-button].outlined:focus-visible:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l + .06))}[nx-submit-button].outlined:active:not([disabled]):not([nx-submit-button].nx-button--form-error):not([aria-disabled=true]){border-color:hsl(from var(--border-color) h s calc(l - 3%))}}[nx-submit-button].text{background:none;min-width:auto}[nx-submit-button].text.brand{--color: var(--nxc-brand)}[nx-submit-button].text.error{--color: var(--nxc-attention-red)}[nx-submit-button].text.success{--color: var(--nxc-attention-green)}[nx-submit-button].text.warning{--color: var(--nxc-attention-yellow)}[nx-submit-button].text.info{--color: var(--nxc-attention-blue)}[nx-submit-button].text.light,[nx-submit-button].text.medium,[nx-submit-button].text.dark{--color: var(--nxc-light10-offset, var(--nxc-light10))}[nx-submit-button][disabled],[nx-submit-button].nx-button--form-error{opacity:.3;cursor:default;pointer-events:none}[nx-submit-button].icon-only>span{display:none}[nx-submit-button].loading{color:transparent!important;-webkit-user-select:none!important;user-select:none!important;cursor:wait}[nx-submit-button].nx-button--form-error{cursor:not-allowed}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

const imports$6 = [NxSubmitButtonComponent, NxFormObserverDirective];
class NxSubmitButtonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NxSubmitButtonModule, imports: [NxSubmitButtonComponent, NxFormObserverDirective], exports: [NxSubmitButtonComponent, NxFormObserverDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmitButtonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmitButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$6,
                    exports: imports$6,
                }]
        }] });

/** Set of callbacks to be used on submit by AsyncSubmitButton. */
class AsyncAction {
}
/** Noop function to infer typing on the AsyncAction callbacks. */
const createAsyncAction = (a) => a;

/** Style variation inputs for components that share styling with `nx-input`. */
class NxInputLikeComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /** Size variant. */
        this.size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : []));
        /** Background color variant. */
        this.background = input('dark', ...(ngDevMode ? [{ debugName: "background" }] : []));
        // Creating array in [class] causes after view checked errors
        this.inputLikeClasses = computed(() => [
            'nx-input-like--' + this.size(),
            'nx-input-like--' + this.background(),
        ], ...(ngDevMode ? [{ debugName: "inputLikeClasses" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxInputLikeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", 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: "20.1.6", 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 with styling and two-way data binding. */
class NxInputComponent extends NxInputLikeComponent {
    onInput() {
        if (this.value() !== undefined) {
            this.value.set(this.host.nativeElement.value);
        }
    }
    constructor() {
        super();
        this.host = inject(ElementRef);
        /** Value of the input element.
         *
         * Does not emit output on changes from JS. */
        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
        this._valueEffect = effect(() => {
            const value = this.value();
            if (value !== undefined && this.host.nativeElement.value !== value) {
                this.host.nativeElement.value = value;
            }
        }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : []));
        const nativeElement = this.host.nativeElement;
        const maskToken = inject(NxInputMaskToken, { optional: true, skipSelf: true });
        if (maskToken) {
            nativeElement.classList.add(maskToken);
        }
        if (nativeElement instanceof HTMLTextAreaElement) {
            return;
        }
        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: "20.1.6", ngImport: i0, type: NxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxInputComponent, isStandalone: true, selector: "input[nx-input], textarea[nx-input]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "onInput()" } }, usesInheritance: true, hostDirectives: [{ directive: NxFormFieldControlDirective }, { directive: __NxUseFormStyleDirective }, { directive: i1$2.NxPasswordManagerDisableDirective }], 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:block;box-sizing:border-box;caret-color:var(--input-color);--input-color: var(--nxc-light4-offset, var(--nxc-light4))}: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}:host[nx-cloud2-form-style].nx-input-like--large{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}:host[nx-cloud2-form-style].nx-input-like--small{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]{color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none}: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-cloud2-form-style]:is(textarea){font-family:inherit}:host[nx-legacy-form-style]{display:block;width:100%;height:2rem;font-size:.875rem;font-family:var(--font-family-regular);line-height:1.5;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: "20.1.6", ngImport: i0, type: NxInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'input[nx-input], textarea[nx-input]', template: '', imports: [], host: {
                        '(input)': 'onInput()',
                    }, hostDirectives: [
                        NxFormFieldControlDirective,
                        __NxUseFormStyleDirective,
                        NxPasswordManagerDisableDirective,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host[nx-cloud2-form-style]{display:block;box-sizing:border-box;caret-color:var(--input-color);--input-color: var(--nxc-light4-offset, var(--nxc-light4))}: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}:host[nx-cloud2-form-style].nx-input-like--large{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}:host[nx-cloud2-form-style].nx-input-like--small{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]{color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none}: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-cloud2-form-style]:is(textarea){font-family:inherit}:host[nx-legacy-form-style]{display:block;width:100%;height:2rem;font-size:.875rem;font-family:var(--font-family-regular);line-height:1.5;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: () => [] });

/** Form field for text inputs that adds an optional left icon and button to clear the input. */
class NxInputFieldComponent extends NxFormFieldComponent {
    constructor() {
        super(...arguments);
        /** Name of left icon. */
        this.leftIcon = input(...(ngDevMode ? [undefined, { debugName: "leftIcon" }] : []));
        this.nxControlDirective = contentChild.required(NxFormFieldControlDirective);
        this.injector = inject(Injector);
        this.zeroLength = signal(true).asReadonly();
        this.disabled = signal(false).asReadonly();
        this.readonly = signal(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
        this.inputObserver = new MutationObserver(records => {
            const readOnlyChange = records.find(r => r.attributeName === 'readonly');
            if (readOnlyChange) {
                this.readonly.set(readOnlyChange.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: "20.1.6", ngImport: i0, type: NxInputFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxInputFieldComponent, isStandalone: true, selector: "nx-input-field", inputs: { leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.nx-form-field": "''" } }, providers: [
            {
                provide: NxFormFieldToken,
                useExisting: forwardRef(() => NxInputFieldComponent),
            },
        ], queries: [{ propertyName: "nxControlDirective", first: true, predicate: NxFormFieldControlDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n    <div class=\"label-container\">\n        <ng-content select=\"[nx-label]\"></ng-content>\n    </div>\n}\n<div class=\"input-container\">\n    @if (leftIcon(); as leftIcon) {\n        <nx-icon\n            class=\"left-icon\"\n            [icon]=\"leftIcon\"\n        ></nx-icon>\n    }\n    <ng-content select=\"[nx-input]\"></ng-content>\n    @if (!zeroLength() && !disabled() && !readonly()) {\n        <button\n            nx-button\n            appearance=\"text\"\n            variant=\"light\"\n            size=\"small\"\n            class=\"clear-button\"\n            (click)=\"clear()\"\n            (mousedown)=\"$event.preventDefault()\"\n            type=\"button\"\n        >\n            <nx-icon icon=\"Close16X16\"></nx-icon>\n        </button>\n    }\n</div>\n@if (messages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: ["nx-form-field[nx-cloud2-form-style],[nx-form-field][nx-cloud2-form-style]{display:block}nx-form-field[nx-cloud2-form-style] .label-container,[nx-form-field][nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-cloud2-form-style] .messages-container,[nx-form-field][nx-cloud2-form-style] .messages-container{margin-top:.25rem}nx-form-field[nx-legacy-form-style],[nx-form-field][nx-legacy-form-style]{display:block}nx-form-field[nx-legacy-form-style] .label-container,[nx-form-field][nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-legacy-form-style] .messages-container,[nx-form-field][nx-legacy-form-style] .messages-container{margin-top:.25rem}nx-input-field .input-container{position:relative}nx-input-field .input-container .left-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}nx-input-field .input-container:has(.left-icon) input[nx-input].nx-input-like--large,nx-input-field .input-container:has(.left-icon) input[nx-input].nx-input-like--small{padding-left:2.25rem}nx-input-field .input-container input[nx-input].nx-input-like--large,nx-input-field .input-container input[nx-input].nx-input-like--small{padding-right:2.75rem;width:100%}nx-input-field .input-container [nx-button]{padding:0}nx-input-field .input-container .clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}nx-input-field .input-container .clear-button nx-icon{height:1rem;width:1rem}\n"], dependencies: [{ 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, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxInputFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-input-field', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NxButtonComponent, NxIconComponent], providers: [
                        {
                            provide: NxFormFieldToken,
                            useExisting: forwardRef(() => NxInputFieldComponent),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[attr.nx-form-field]': "''",
                    }, template: "@if (label()) {\n    <div class=\"label-container\">\n        <ng-content select=\"[nx-label]\"></ng-content>\n    </div>\n}\n<div class=\"input-container\">\n    @if (leftIcon(); as leftIcon) {\n        <nx-icon\n            class=\"left-icon\"\n            [icon]=\"leftIcon\"\n        ></nx-icon>\n    }\n    <ng-content select=\"[nx-input]\"></ng-content>\n    @if (!zeroLength() && !disabled() && !readonly()) {\n        <button\n            nx-button\n            appearance=\"text\"\n            variant=\"light\"\n            size=\"small\"\n            class=\"clear-button\"\n            (click)=\"clear()\"\n            (mousedown)=\"$event.preventDefault()\"\n            type=\"button\"\n        >\n            <nx-icon icon=\"Close16X16\"></nx-icon>\n        </button>\n    }\n</div>\n@if (messages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: ["nx-form-field[nx-cloud2-form-style],[nx-form-field][nx-cloud2-form-style]{display:block}nx-form-field[nx-cloud2-form-style] .label-container,[nx-form-field][nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-cloud2-form-style] .messages-container,[nx-form-field][nx-cloud2-form-style] .messages-container{margin-top:.25rem}nx-form-field[nx-legacy-form-style],[nx-form-field][nx-legacy-form-style]{display:block}nx-form-field[nx-legacy-form-style] .label-container,[nx-form-field][nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-legacy-form-style] .messages-container,[nx-form-field][nx-legacy-form-style] .messages-container{margin-top:.25rem}nx-input-field .input-container{position:relative}nx-input-field .input-container .left-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}nx-input-field .input-container:has(.left-icon) input[nx-input].nx-input-like--large,nx-input-field .input-container:has(.left-icon) input[nx-input].nx-input-like--small{padding-left:2.25rem}nx-input-field .input-container input[nx-input].nx-input-like--large,nx-input-field .input-container input[nx-input].nx-input-like--small{padding-right:2.75rem;width:100%}nx-input-field .input-container [nx-button]{padding:0}nx-input-field .input-container .clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}nx-input-field .input-container .clear-button nx-icon{height:1rem;width:1rem}\n"] }]
        }] });

const imports$5 = [
    NxLabelComponent,
    NxInputFieldComponent,
    NxInputComponent,
    NxControlMessagesComponent,
    NxControlMessageComponent,
];
class NxInputFieldModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxInputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", 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: "20.1.6", ngImport: i0, type: NxInputFieldModule, imports: [NxControlMessagesComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxInputFieldModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$5,
                    exports: imports$5,
                }]
        }] });

/** Form field for passwords that adds a button to toggle visibility.
 */
class NxPasswordFieldComponent extends NxFormFieldComponent {
    constructor() {
        super(...arguments);
        this.nxControlDirective = contentChild.required(NxFormFieldControlDirective);
        this.injector = inject(Injector);
        this.disabled = signal(false).asReadonly();
        this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
    }
    get control() {
        return this.ngControl().control;
    }
    ngAfterContentInit() {
        super.ngAfterContentInit();
        runInInjectionContext(this.injector, () => {
            this.disabled = toSignal(this.control.statusChanges.pipe(map(s => s === 'DISABLED')), {
                initialValue: this.control.status === 'DISABLED',
            });
        });
        const nativeElement = this.nxControlDirective().host.nativeElement;
        if (nativeElement.getAttribute('type') !== 'password') {
            nativeElement.setAttribute('type', 'password');
        }
    }
    toggleVisibility() {
        const newState = !this.visible();
        this.visible.set(newState);
        const nativeElement = this.nxControlDirective().host.nativeElement;
        if (newState) {
            nativeElement.setAttribute('type', 'text');
        }
        else {
            nativeElement.setAttribute('type', 'password');
        }
        // Chrome fix, otherwise caret goes to beginning
        setTimeout(() => {
            nativeElement.setSelectionRange(nativeElement.value.length, nativeElement.value.length);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxPasswordFieldComponent, isStandalone: true, selector: "nx-password-field", host: { properties: { "attr.nx-form-field": "''" } }, providers: [
            {
                provide: NxFormFieldToken,
                useExisting: forwardRef(() => NxPasswordFieldComponent),
            },
        ], queries: [{ propertyName: "nxControlDirective", first: true, predicate: NxFormFieldControlDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\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 (!disabled()) {\n        <button\n            nx-button\n            appearance=\"text\"\n            variant=\"light\"\n            size=\"small\"\n            class=\"view-button\"\n            type=\"button\"\n            (click)=\"toggleVisibility()\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <nx-icon\n                [icon]=\"visible() ? 'Eye' : 'EyeClosed'\"\n                useCurrentColor\n            ></nx-icon>\n        </button>\n    }\n</div>\n@if (messages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: ["nx-form-field[nx-cloud2-form-style],[nx-form-field][nx-cloud2-form-style]{display:block}nx-form-field[nx-cloud2-form-style] .label-container,[nx-form-field][nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-cloud2-form-style] .messages-container,[nx-form-field][nx-cloud2-form-style] .messages-container{margin-top:.25rem}nx-form-field[nx-legacy-form-style],[nx-form-field][nx-legacy-form-style]{display:block}nx-form-field[nx-legacy-form-style] .label-container,[nx-form-field][nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-legacy-form-style] .messages-container,[nx-form-field][nx-legacy-form-style] .messages-container{margin-top:.25rem}nx-password-field .input-container{position:relative}nx-password-field .input-container input[nx-input].nx-input-like--large,nx-password-field .input-container input[nx-input].nx-input-like--small{padding-right:2.75rem;width:100%}nx-password-field .input-container nx-icon{color:var(--nxc-light10-offset, var(--nxc-light10))}nx-password-field .input-container [nx-button]{padding:0}nx-password-field .input-container .view-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}nx-password-field .input-container .view-button nx-icon{height:1.25rem;width:1.25rem}\n"], dependencies: [{ 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, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPasswordFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-password-field', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NxButtonComponent, NxIconComponent], providers: [
                        {
                            provide: NxFormFieldToken,
                            useExisting: forwardRef(() => NxPasswordFieldComponent),
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[attr.nx-form-field]': "''",
                    }, template: "@if (label()) {\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 (!disabled()) {\n        <button\n            nx-button\n            appearance=\"text\"\n            variant=\"light\"\n            size=\"small\"\n            class=\"view-button\"\n            type=\"button\"\n            (click)=\"toggleVisibility()\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <nx-icon\n                [icon]=\"visible() ? 'Eye' : 'EyeClosed'\"\n                useCurrentColor\n            ></nx-icon>\n        </button>\n    }\n</div>\n@if (messages()) {\n    <div class=\"messages-container\"><ng-content select=\"nx-control-messages\"></ng-content></div>\n}\n", styles: ["nx-form-field[nx-cloud2-form-style],[nx-form-field][nx-cloud2-form-style]{display:block}nx-form-field[nx-cloud2-form-style] .label-container,[nx-form-field][nx-cloud2-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-cloud2-form-style] .messages-container,[nx-form-field][nx-cloud2-form-style] .messages-container{margin-top:.25rem}nx-form-field[nx-legacy-form-style],[nx-form-field][nx-legacy-form-style]{display:block}nx-form-field[nx-legacy-form-style] .label-container,[nx-form-field][nx-legacy-form-style] .label-container{display:flex;justify-content:space-between;margin-bottom:.25rem}nx-form-field[nx-legacy-form-style] .messages-container,[nx-form-field][nx-legacy-form-style] .messages-container{margin-top:.25rem}nx-password-field .input-container{position:relative}nx-password-field .input-container input[nx-input].nx-input-like--large,nx-password-field .input-container input[nx-input].nx-input-like--small{padding-right:2.75rem;width:100%}nx-password-field .input-container nx-icon{color:var(--nxc-light10-offset, var(--nxc-light10))}nx-password-field .input-container [nx-button]{padding:0}nx-password-field .input-container .view-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem}nx-password-field .input-container .view-button nx-icon{height:1.25rem;width:1.25rem}\n"] }]
        }] });

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

// Creates the standalone Angular application whose injector is handed to every nx-* custom element
// below (`createCustomElement({ injector })`). It is a self-contained application with its OWN
// isolated root injector, separate from the host app bootstrapped in `main.ts`. That isolation is
// the root of two DISTINCT problems. The proper fix is still to be decided, so both — and the
// candidate options with their trade-offs — are documented here.
//
// === Problem 1 — DI scope ===
// A component registered as a custom element resolves its dependencies from THIS injector. If it
// (or anything it pulls in) depends on a service that is not `providedIn: 'root'` — e.g. one
// provided lower in the host app's hierarchy, on a feature/route/shell component such as
// `NxSideSheetService` / `NxSideSheetRegistry` — that provider does not exist here, so creating the
// element throws NullInjectorError. Only root-provided services resolve (and even then as a second,
// separate instance); anything more narrowly scoped is unreachable.
// Note: nothing hits this today — `nx-layout` / the side sheet are NOT registered as custom
// elements — so it is a latent limitation, not a live bug.
//
// === Problem 2 — bootstrap timing (NG0400) ===
// This module is re-exported from the `nx-components` barrel, so importing anything from that barrel
// (e.g. the side sheet) evaluates this module. With the eager `createApplication()` below, that runs
// at IMPORT time — creating an Angular platform before `main.ts` bootstraps with
// `platformBrowserDynamic`, which throws NG0400 ("a platform with a different configuration has been
// created"). This is the concrete breakage that surfaced when the side sheet was wired in.
//
// === Option A — hand custom elements the HOST app's injector ===
// Drop the isolated `createApplication()`; capture the host `Injector` / `EnvironmentInjector` at
// bootstrap (or pass it into `registerAsCustomElement`) and give it to
// `createCustomElement({ injector })`, so DI walks the host's hierarchy.
//   + Fixes Problem 1 (services resolve at any scope) AND Problem 2 (no second platform to conflict).
//   + One shared instance of host services — no accidental duplicates.
//   - Larger, architectural change; element registration must wait for the host injector to exist
//     and have it threaded in.
//   - The elements stop being self-contained: they only work inside this host app, not when the
//     bundle is loaded standalone in a non-Angular page (the very capability the isolated app buys).
//
// === Option B — create this app lazily (the previous working fix) ===
// Keep the isolated app but memoize it behind a promise so `createApplication()` runs on the first
// `registerAsCustomElement()` call instead of at module load:
//     let appPromise; const getApp = () => (appPromise ??= createApplication({ … }));
//     // …later: injector: (await getApp()).injector
//   + Small, localized change; fixes Problem 2 because the platform is then created after `main.ts`.
//   + Keeps the elements self-contained (isolated injector preserved).
//   - Does NOTHING for Problem 1 — elements still resolve from the isolated injector.
//   - Implicit/fragile: depends on no `registerAsCustomElement()` running before bootstrap and on
//     side effects moving to "first use" — easy to regress and harder to reason about.
//
// === Comparison ===
//   Aspect              | Option A (host injector)   | Option B (lazy app)
//   --------------------|----------------------------|----------------------------
//   Fixes DI scope      | yes                        | no
//   Fixes NG0400 timing | yes (removes 2nd platform) | yes (defers past bootstrap)
//   Isolated injector   | eliminated                 | kept
//   Change size / risk  | larger, architectural      | small, localized
//   Standalone elements | no longer self-contained   | still self-contained
//
// The deciding question is whether these elements must work standalone (outside this Angular host).
// If yes, Option B (or a variant) is required and Problem 1 must be solved another way; if they are
// only ever used inside this app, Option A is the cleaner fix for both problems.
//
// Desired behaviour: a component used as a custom element should consume services at ANY scope —
// root, module/route, or component — exactly as inside the host app, without forcing every such
// dependency to `providedIn: 'root'`, and without reintroducing the NG0400 timing trap.
//
// Decision pending — kept eager for now.
const app = createApplication({
    providers: [provideZonelessChangeDetection()],
});
/**
 * 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(), ...(ngDevMode ? [{ debugName: "syncBackground" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStyleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStyleWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-style-wrapper', template: ` <ng-content></ng-content> `, imports: [], hostDirectives: [BaseComponent], styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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.value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
        this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /** tbd replace with linked signal */
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.disabledEffect = effect(() => {
            const disabled = this.disabled();
            this.setDisabledState(disabled);
        }, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
        this.indicatorIcon = computed(() => this.indeterminate() ? NxIconEnum.MINUS_20_X_20 : NxIconEnum.CHECK_20_X_20, ...(ngDevMode ? [{ debugName: "indicatorIcon" }] : []));
    }
    validate(control) {
        if (this.value()) {
            return null;
        }
        return this.required() ? { required: true } : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxCheckboxComponent, isStandalone: true, selector: "nx-checkbox-v2", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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", indeterminate: "indeterminateChange" }, 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]=\"indicatorIcon()\"\n        preserveSize\n        useCurrentColor\n    ></nx-icon>\n    <input\n        type=\"checkbox\"\n        [(ngModel)]=\"value\"\n        [indeterminate]=\"indeterminate()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n    />\n    <span class=\"input-content\"><ng-content></ng-content></span>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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-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);--invalid-color: var(--nxc-attention-red);--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}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 3) )}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + .03) )}}: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{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}:host{--invalid-color-hover: hsl(from var(--invalid-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 + .03) )}}:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) )}@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;border-color:var(--unchecked-border-color)}:host .input-content{display:inline-block}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{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,:host:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label,:host:has(input[type=checkbox]:indeterminate) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body,:host:has(input[type=checkbox]:indeterminate):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label,:host:has(input[type=checkbox]:indeterminate):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body,:host:has(input[type=checkbox]:indeterminate):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label,:host:has(input[type=checkbox]:indeterminate):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body,:host:has(input[type=checkbox]:indeterminate):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{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):has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):active:has(input:checked) label,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) 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{position:absolute;left:0;width:var(--input-width);height:var(--input-height);border:1px 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:block;position:relative;height:100%}.input-content{padding-left:calc(var(--input-width) + 8px)}.input-content:empty{padding-left:0}.input-content{overflow-wrap:break-word;word-break:break-word;text-align:start}.input-content{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{--unchecked-bg-color: var(--nxc-dark6-offset, var(--nxc-dark6));--unchecked-bg-color-hover: var(--nxc-dark8-offset, var(--nxc-dark8));--unchecked-bg-color-active: var(--nxc-dark5-offset, var(--nxc-dark5))}:host .input-body{background-color:var(--unchecked-bg-color)}:host:hover .input-body{background-color:var(--unchecked-bg-color-hover)}:host:active .input-body{background-color:var(--unchecked-bg-color-active)}:host:has(input:disabled) .input-body,:host:has(input:disabled):hover .input-body,:host:has(input:disabled):active .input-body{background-color:var(--unchecked-bg-color)}:host:has(input:disabled):has(input:checked) .input-body,:host:has(input:disabled):has(input:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input:indeterminate) .input-body{background-color:var(--checked-color)}:host .input-indicator{transition:color .5s ease;color:transparent}:host:hover:not(:has(input:checked)):not(:has(input:indeterminate)):not(:active) .input-indicator{opacity:1;color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host:has(input:checked) .input-indicator,:host:has(input:indeterminate) .input-indicator{opacity:1;color:var(--checked-indicator-color)}.input-indicator{position:absolute;left:0;width:var(--input-width);height:var(--input-height);margin:var(--vertical-margin) 0}\n"], dependencies: [{ 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: "20.1.6", ngImport: i0, type: NxCheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-checkbox-v2', imports: [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]=\"indicatorIcon()\"\n        preserveSize\n        useCurrentColor\n    ></nx-icon>\n    <input\n        type=\"checkbox\"\n        [(ngModel)]=\"value\"\n        [indeterminate]=\"indeterminate()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n    />\n    <span class=\"input-content\"><ng-content></ng-content></span>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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-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);--invalid-color: var(--nxc-attention-red);--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}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 3) )}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + .03) )}}: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{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}:host{--invalid-color-hover: hsl(from var(--invalid-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 + .03) )}}:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) )}@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;border-color:var(--unchecked-border-color)}:host .input-content{display:inline-block}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{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,:host:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label,:host:has(input[type=checkbox]:indeterminate) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body,:host:has(input[type=checkbox]:indeterminate):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label,:host:has(input[type=checkbox]:indeterminate):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body,:host:has(input[type=checkbox]:indeterminate):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label,:host:has(input[type=checkbox]:indeterminate):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body,:host:has(input[type=checkbox]:indeterminate):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{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):has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):active:has(input:checked) label,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) 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{position:absolute;left:0;width:var(--input-width);height:var(--input-height);border:1px 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:block;position:relative;height:100%}.input-content{padding-left:calc(var(--input-width) + 8px)}.input-content:empty{padding-left:0}.input-content{overflow-wrap:break-word;word-break:break-word;text-align:start}.input-content{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{--unchecked-bg-color: var(--nxc-dark6-offset, var(--nxc-dark6));--unchecked-bg-color-hover: var(--nxc-dark8-offset, var(--nxc-dark8));--unchecked-bg-color-active: var(--nxc-dark5-offset, var(--nxc-dark5))}:host .input-body{background-color:var(--unchecked-bg-color)}:host:hover .input-body{background-color:var(--unchecked-bg-color-hover)}:host:active .input-body{background-color:var(--unchecked-bg-color-active)}:host:has(input:disabled) .input-body,:host:has(input:disabled):hover .input-body,:host:has(input:disabled):active .input-body{background-color:var(--unchecked-bg-color)}:host:has(input:disabled):has(input:checked) .input-body,:host:has(input:disabled):has(input:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input:indeterminate) .input-body{background-color:var(--checked-color)}:host .input-indicator{transition:color .5s ease;color:transparent}:host:hover:not(:has(input:checked)):not(:has(input:indeterminate)):not(:active) .input-indicator{opacity:1;color:var(--nxc-dark6-offset, var(--nxc-dark6))}:host:has(input:checked) .input-indicator,:host:has(input:indeterminate) .input-indicator{opacity:1;color:var(--checked-indicator-color)}.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', ...(ngDevMode ? [{ debugName: "badgeType" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStatusBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{height:16px;width:fit-content;padding:2px 5px;border-radius:4px;color:var(--nxc-dark1-offset, var(--nxc-dark1))}: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)}: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: "20.1.6", 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{height:16px;width:fit-content;padding:2px 5px;border-radius:4px;color:var(--nxc-dark1-offset, var(--nxc-dark1))}: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)}: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, ...(ngDevMode ? [{ debugName: "active" }] : []));
    }
    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: "20.1.6", ngImport: i0, type: NxPseudoActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", 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: "20.1.6", 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');

/* TODO: Rename this to select option */
/** Option component for select/multiselect. */
class NxOptionComponent {
    constructor() {
        this.hover = new Subject();
        /** Value of the option. */
        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
        /** Text displayed in the trigger when the option is selected.
         *
         * If not provided the component's internal text content is used.
         */
        this.labelInput = input('', ...(ngDevMode ? [{ debugName: "labelInput", alias: 'label' }] : [{ alias: 'label' }]));
        this.host = inject(ElementRef);
        this.textContent = signal('', ...(ngDevMode ? [{ debugName: "textContent" }] : []));
        this.label = computed(() => this.labelInput() || this.textContent(), ...(ngDevMode ? [{ debugName: "label" }] : []));
        /** Disabled state */
        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled',
                transform: booleanAttribute }] : [{
                alias: 'disabled',
                transform: booleanAttribute,
            }]));
        this.ariaDisabled = ariaComputed(this.disabledInput);
        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
        this.selectComponent = inject(NxSelectToken, { skipSelf: true });
        this.multiple = this.selectComponent.multiple;
        this.selected = computed(() => {
            const { selectComponent } = this;
            /* Errors without type assertion on front end build but not storybook build or in IDE,
            possible desync between tsconfig files */
            return selectComponent.multiple
                ? selectComponent.selectedSet().has(this)
                : selectComponent.selected() === this;
        }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
        this._unselectEffect = effect(() => {
            const [disabled, selected] = [this.disabledInput(), this.selected()];
            const { selectComponent } = this;
            if (disabled && selected && !selectComponent.multiple) {
                untracked(() => {
                    selectComponent.unselect();
                });
            }
        }, ...(ngDevMode ? [{ debugName: "_unselectEffect" }] : []));
        this._disabledEffect = effect(() => {
            this.disabled = this.disabledInput();
        }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : []));
        // 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: "20.1.6", ngImport: i0, type: NxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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 } }, host: { attributes: { "role": "option" }, listeners: { "mousedown": "$event.preventDefault()", "mousemove": "!active() ? this.hover.next(this) : null", "click": "select()", "mouseenter": "hover.next(this)" }, 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: "@if (multiple) {\n    <!-- We don't want an acutal focusable checkbox in dropdowns,\n    and the select checkbox is also slightly different in appearance to\n    avoid blending into the dropdown background -->\n    <div\n        class=\"fake-checkbox\"\n        [class.fake-checkbox--checked]=\"selected()\"\n    >\n        <nx-icon\n            class=\"input-check\"\n            icon=\"Check20X20\"\n            preserveSize\n            useCurrentColor\n        ></nx-icon>\n    </div>\n}\n<div class=\"nx-option__content\"><ng-content></ng-content></div>\n@if (!multiple && 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:flex;justify-content:space-between;align-items:center;gap:.5rem;box-sizing:border-box;padding:.25rem 1rem}:host.nx-option--single{padding-inline-end:.625rem}:host .fake-checkbox{height:20px;border:1px solid var(--nxc-dark13-offset, var(--nxc-dark13));border-radius:4px;background-color:var(--nxc-dark14-offset, var(--nxc-dark14))}:host .fake-checkbox nx-icon{visibility:hidden;color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host .fake-checkbox--checked{background-color:var(--nxc-attention-green);border-color:var(--nxc-attention-green)}:host .fake-checkbox--checked nx-icon{visibility:visible}:host .nx-option__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1}:host .nx-option__content{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-option__content{color:var(--nxc-light4-offset, var(--nxc-light4))}:host[aria-disabled=false]{cursor:pointer}:host[aria-disabled=false].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12));color:var(--nxc-light4-offset, var(--nxc-light4))}:host[aria-disabled=false].nx-pseudo-active{background-color:hsl(from var(--nxc-dark12-offset, var(--nxc-dark12)) h s calc(l - 9))}:host[aria-disabled=true]{cursor:default}:host[aria-disabled=true] *{opacity:.3}:host[aria-disabled=true].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12))}:host[aria-disabled=true]:not(.nx-option--selected) .fake-checkbox{visibility:hidden}\n"], dependencies: [{ kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-option', imports: [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()',
                        '(mousemove)': '!active() ? this.hover.next(this) : null',
                        '(click)': 'select()',
                        '(mouseenter)': 'hover.next(this)',
                    }, hostDirectives: [NxPseudoActiveDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (multiple) {\n    <!-- We don't want an acutal focusable checkbox in dropdowns,\n    and the select checkbox is also slightly different in appearance to\n    avoid blending into the dropdown background -->\n    <div\n        class=\"fake-checkbox\"\n        [class.fake-checkbox--checked]=\"selected()\"\n    >\n        <nx-icon\n            class=\"input-check\"\n            icon=\"Check20X20\"\n            preserveSize\n            useCurrentColor\n        ></nx-icon>\n    </div>\n}\n<div class=\"nx-option__content\"><ng-content></ng-content></div>\n@if (!multiple && 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:flex;justify-content:space-between;align-items:center;gap:.5rem;box-sizing:border-box;padding:.25rem 1rem}:host.nx-option--single{padding-inline-end:.625rem}:host .fake-checkbox{height:20px;border:1px solid var(--nxc-dark13-offset, var(--nxc-dark13));border-radius:4px;background-color:var(--nxc-dark14-offset, var(--nxc-dark14))}:host .fake-checkbox nx-icon{visibility:hidden;color:var(--nxc-dark1-offset, var(--nxc-dark1))}:host .fake-checkbox--checked{background-color:var(--nxc-attention-green);border-color:var(--nxc-attention-green)}:host .fake-checkbox--checked nx-icon{visibility:visible}:host .nx-option__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1}:host .nx-option__content{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-option__content{color:var(--nxc-light4-offset, var(--nxc-light4))}:host[aria-disabled=false]{cursor:pointer}:host[aria-disabled=false].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12));color:var(--nxc-light4-offset, var(--nxc-light4))}:host[aria-disabled=false].nx-pseudo-active{background-color:hsl(from var(--nxc-dark12-offset, var(--nxc-dark12)) h s calc(l - 9))}:host[aria-disabled=true]{cursor:default}:host[aria-disabled=true] *{opacity:.3}:host[aria-disabled=true].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12))}:host[aria-disabled=true]:not(.nx-option--selected) .fake-checkbox{visibility:hidden}\n"] }]
        }] });

/** Stylized divider for `nx-option` */
class NxOptionDividerComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxOptionDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", 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: "20.1.6", 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);
        this._displayCount = NxOptionsContainerComponent.DISPLAY_COUNT;
        this._verticalPaddingPx = NxOptionsContainerComponent.VERTICAL_PADDING_PX;
    }
    /** Max number of options to fully display, +2 partial on edges */
    static { this.DISPLAY_COUNT = 7; }
    static { this.VERTICAL_PADDING_PX = 6; }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxOptionsContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: NxOptionsContainerComponent, isStandalone: true, selector: "nx-options-container", host: { attributes: { "role": "listbox" }, listeners: { "mousedown": "$event.preventDefault()" }, properties: { "style.--display-count": "_displayCount", "style.--vertical-padding": "_verticalPaddingPx + 'px'" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative;padding:var(--vertical-padding) 0;border-radius:6px;background-color:var(--nxc-dark10-offset, var(--nxc-dark10));max-height:calc((24px + .5rem) * var(--display-count));overflow-y:auto;display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxOptionsContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-options-container', template: `<ng-content></ng-content>`, host: {
                        role: 'listbox',
                        '(mousedown)': '$event.preventDefault()',
                        '[style.--display-count]': '_displayCount',
                        '[style.--vertical-padding]': "_verticalPaddingPx + 'px'",
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;padding:var(--vertical-padding) 0;border-radius:6px;background-color:var(--nxc-dark10-offset, var(--nxc-dark10));max-height:calc((24px + .5rem) * var(--display-count));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 = coerceSignal(this.defaultPlaceholderToken);
        /** Text displayed when no option is selected. */
        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
        this.injector = inject(Injector);
        this.destroyRef = inject(DestroyRef);
        this.host = inject(ElementRef);
        this.onChange = (_) => { };
        this.onTouched = () => { };
        /** Disabled state. */
        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled',
                transform: booleanAttribute }] : [{
                alias: 'disabled',
                transform: booleanAttribute,
            }]));
        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
        this.disabled = computed(() => this.cvaDisabled() || this.disabledInput() || this.zeroOptions(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
        this._closeOnDisableEffect = effect(() => {
            if (this.disabled()) {
                untracked(() => this.close());
            }
        }, ...(ngDevMode ? [{ debugName: "_closeOnDisableEffect" }] : []));
        /** Value of the select. */
        this.valueModel = model(null, ...(ngDevMode ? [{ debugName: "valueModel", alias: 'value' }] : [{ alias: 'value' }]));
        this._valueModelEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.valueModel();
            untracked(() => {
                this.writeValue(value);
            });
        }, ...(ngDevMode ? [{ debugName: "_valueModelEffect" }] : []));
        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
        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();
                }
            });
        }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : []));
        /** Whether a value is required in a form. */
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.selected = signal(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
        this.options = contentChildren(NxOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
        this.options$ = toObservable(this.options);
        /** Set active option on hover. */
        this._onOptionHoverSubscription = this.options$
            .pipe(switchMap(options => merge(...options.map(o => o.hover)).pipe(takeUntil(this.options$.pipe(skip(1))))), takeUntilDestroyed())
            .subscribe(option => {
            if (!option.disabledInput()) {
                this.keyManager.setActiveItem(option);
            }
        });
        this.zeroOptions = computed(() => !this.options().length, ...(ngDevMode ? [{ debugName: "zeroOptions" }] : []));
        this._zeroOptionEffect = effect(() => {
            if (this.zeroOptions()) {
                this.close();
            }
        }, ...(ngDevMode ? [{ debugName: "_zeroOptionEffect" }] : []));
        this.defaultZeroOptionPlaceholderToken = inject(NxSelectZeroOptionsPlaceholderToken, { optional: true }) ??
            signal(null).asReadonly();
        this.defaultZeroOptionPlaceholder = coerceSignal(this.defaultZeroOptionPlaceholderToken);
        /** Text displayed when there are no options. */
        this.zeroOptionsPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "zeroOptionsPlaceholder" }] : []));
        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);
                    }
                }
            });
        }, ...(ngDevMode ? [{ debugName: "_optionsChangeEffect" }] : []));
        this.ariaDisabled = ariaComputed(this.disabled);
        /** Allows options with `null` value to be selected instead of clearing the select. */
        this.allowNullSelect = input(false, ...(ngDevMode ? [{ debugName: "allowNullSelect", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.connectedOverlay = viewChild.required(CdkConnectedOverlay);
        this.overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
        this.ariaExpanded = ariaComputed(this.overlayOpen);
        this.overlayWidth = signal(0, ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
        this.overlayPositions = [
            connectedPosition({ originPoint: 'SW', overlayPoint: 'NW', offsetY: 8 }),
            connectedPosition({ originPoint: 'NW', overlayPoint: 'SW', offsetY: -8 }),
        ];
        this.optionsContainer = viewChild(NxOptionsContainerComponent, ...(ngDevMode ? [{ debugName: "optionsContainer" }] : []));
        /** Compatibility hack for v19, previously effects fired after content init */
        this.afterContentInit = signal(false, ...(ngDevMode ? [{ debugName: "afterContentInit" }] : []));
    }
    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);
        }
    }
    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.disabledInput()) {
            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.onChange(value);
        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: "20.1.6", ngImport: i0, type: NxSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", 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: { 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: "<!-- Maintain mininmum height with no placeholder or selection option text -->\n<span style=\"visibility: hidden; white-space-collapse: preserve\">{{ '\\u200b' }}</span>\n<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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{cursor:pointer;display:flex;box-sizing:border-box;align-items:center;-webkit-user-select:none;user-select:none;--input-color: var(--nxc-light4-offset, var(--nxc-light4))}: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}:host.nx-input-like--large{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}:host.nx-input-like--small{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{color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none}: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: 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: "20.1.6", ngImport: i0, type: NxSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-select', imports: [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: "<!-- Maintain mininmum height with no placeholder or selection option text -->\n<span style=\"visibility: hidden; white-space-collapse: preserve\">{{ '\\u200b' }}</span>\n<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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{cursor:pointer;display:flex;box-sizing:border-box;align-items:center;-webkit-user-select:none;user-select:none;--input-color: var(--nxc-light4-offset, var(--nxc-light4))}: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}:host.nx-input-like--large{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}:host.nx-input-like--small{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{color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none}: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$3 = [NxSelectComponent, NxOptionComponent, NxOptionDividerComponent];
class NxSelectModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NxSelectModule, imports: [NxSelectComponent, NxOptionComponent, NxOptionDividerComponent], exports: [NxSelectComponent, NxOptionComponent, NxOptionDividerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSelectModule, imports: [NxSelectComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$3,
                    exports: imports$3,
                }]
        }] });

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

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

/** Component for selecting multiple values from a set of options */
class NxMultiSelectComponent extends NxInputLikeComponent {
    constructor() {
        super(...arguments);
        this.multiple = true;
        this.defaultPlaceholderToken = inject(NxMultiSelectPlaceholderToken, { optional: true }) ?? signal(null).asReadonly();
        this.defaultPlaceholder = coerceSignal(this.defaultPlaceholderToken);
        /** Text displayed when no option is selected. */
        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
        this.injector = inject(Injector);
        this.destroyRef = inject(DestroyRef);
        this.host = inject(ElementRef);
        this.onChange = (_) => { };
        this.onTouched = () => { };
        /** Disabled state. */
        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled',
                transform: booleanAttribute }] : [{
                alias: 'disabled',
                transform: booleanAttribute,
            }]));
        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
        this.disabled = computed(() => this.cvaDisabled() || this.disabledInput() || this.zeroOptions(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
        this._closeOnDisableEffect = effect(() => {
            if (this.disabled()) {
                untracked(() => this.close());
            }
        }, ...(ngDevMode ? [{ debugName: "_closeOnDisableEffect" }] : []));
        /** Value of the select. */
        this.valueModel = model([], ...(ngDevMode ? [{ debugName: "valueModel", alias: 'value' }] : [{ alias: 'value' }]));
        this._valueModelEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.valueModel();
            untracked(() => {
                this.writeValue(value);
            });
        }, ...(ngDevMode ? [{ debugName: "_valueModelEffect" }] : []));
        this.value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
        this._valueEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.value();
            const options = untracked(this.options);
            untracked(() => {
                this.selected.set(options.filter(o => value.includes(o.value())));
                // List items in option order, not selection order
            });
        }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : []));
        /** Whether a value is required in a form. */
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.selected = signal([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
        this.selectedSet = computed(() => new Set(this.selected()), ...(ngDevMode ? [{ debugName: "selectedSet" }] : []));
        this.zeroOptions = computed(() => !this.options().length, ...(ngDevMode ? [{ debugName: "zeroOptions" }] : []));
        this._zeroOptionEffect = effect(() => {
            if (this.zeroOptions()) {
                this.close();
            }
        }, ...(ngDevMode ? [{ debugName: "_zeroOptionEffect" }] : []));
        this.defaultZeroOptionPlaceholderToken = inject(NxMultiSelectZeroOptionsPlaceholderToken, { optional: true }) ??
            inject(NxSelectZeroOptionsPlaceholderToken, { optional: true }) ??
            signal(null).asReadonly();
        this.defaultZeroOptionPlaceholder = coerceSignal(this.defaultZeroOptionPlaceholderToken);
        /** Text displayed when there are no options. */
        this.zeroOptionsPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "zeroOptionsPlaceholder" }] : []));
        /** Function to generate trigger text from selected options. */
        this.triggerTextTransform = input(selected => selected.map(s => s.label()).join(', '), ...(ngDevMode ? [{ debugName: "triggerTextTransform" }] : []));
        this.triggerText = computed(() => {
            const [selected, zeroOptions, triggerTextTransform, placeholder, defaultPlaceholder, zeroOptionsPlaceholder, defaultZeroOptionPlaceholder,] = [
                this.selected(),
                this.zeroOptions(),
                this.triggerTextTransform(),
                this.placeholder(),
                this.defaultPlaceholder(),
                this.zeroOptionsPlaceholder(),
                this.defaultZeroOptionPlaceholder(),
            ];
            if (zeroOptions) {
                return zeroOptionsPlaceholder ?? defaultZeroOptionPlaceholder;
            }
            else if (selected.length) {
                return triggerTextTransform(selected);
            }
            else {
                return placeholder ?? defaultPlaceholder;
            }
        }, ...(ngDevMode ? [{ debugName: "triggerText" }] : []));
        this.options = contentChildren(NxOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
        this.options$ = toObservable(this.options);
        /** Set active option on hover. */
        this._onOptionHoverSubscription = this.options$
            .pipe(switchMap(options => merge(...options.map(o => o.hover)).pipe(takeUntil(this.options$.pipe(skip(1))))), takeUntilDestroyed())
            .subscribe(option => {
            if (!option.disabledInput()) {
                this.keyManager.setActiveItem(option);
            }
        });
        this._optionsChangeEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const options = this.options();
            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([]);
                    return;
                }
                const optionValues = options.map(o => o.value());
                const existing = this.value().filter(v => optionValues.includes(v));
                if (existing.length < this.value().length) {
                    this.writeValue(existing);
                }
                const { activeItem } = this.keyManager;
                if (activeItem) {
                    if (!options.includes(activeItem)) {
                        this.keyManager.setActiveItem(-1);
                    }
                    else if (optionsContainer) {
                        this.scrollOptionIntoView(activeItem);
                    }
                }
            });
        }, ...(ngDevMode ? [{ debugName: "_optionsChangeEffect" }] : []));
        this.ariaDisabled = ariaComputed(this.disabled);
        this.overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
        this.ariaExpanded = ariaComputed(this.overlayOpen);
        this.overlayWidth = signal(0, ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
        this.overlayPositions = [
            connectedPosition({ originPoint: 'SW', overlayPoint: 'NW', offsetY: 8 }),
            connectedPosition({ originPoint: 'NW', overlayPoint: 'SW', offsetY: -8 }),
        ];
        this.optionsContainer = viewChild(NxOptionsContainerComponent, ...(ngDevMode ? [{ debugName: "optionsContainer" }] : []));
        /** Compatibility hack for v19, previously effects fired after content init */
        this.afterContentInit = signal(false, ...(ngDevMode ? [{ debugName: "afterContentInit" }] : []));
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.cvaDisabled.set(isDisabled);
    }
    writeValue(value) {
        if (value === null) {
            return;
        }
        this.value.set(value);
        this.valueModel.set(value);
    }
    validate(control) {
        // https://github.com/angular/angular/issues/14988s
        if (control.value === null) {
            return null;
        }
        return this.required() && !control.value.length ? { required: true } : null;
    }
    ngAfterContentInit() {
        this.keyManager = new ActiveDescendantKeyManager(this.options, this.injector)
            .withTypeAhead()
            .withVerticalOrientation()
            .withHomeAndEnd()
            .withPageUpDown()
            .skipPredicate(option => (this.overlayOpen() ? false : option.disabled));
        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
                const container = this.optionsContainer();
                if (container) {
                    if (this.keyManager.activeItem) {
                        this.scrollOptionIntoView(this.keyManager.activeItem);
                    }
                    else {
                        container.host.nativeElement.scrollTop = 0;
                    }
                }
            }
        });
        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();
        }
    }
    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.setActiveItem(-1);
    }
    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 if (!this.keyManager.isTyping() && event.ctrlKey && event.key === 'a') {
            /* If none selected, select all
            If some selected, select all
            If all selected, deselect all

            Disabled options are unaffected and are not counted for the conditions */
            event.preventDefault();
            const enabled = this.options().filter(o => !o.disabledInput());
            const disabled = this.options().filter(o => o.disabledInput());
            const disabledSelected = disabled.filter(o => this.selectedSet().has(o));
            const hasUnselected = this.selected().filter(o => !o.disabledInput()).length < enabled.length;
            const newValue = hasUnselected
                ? enabled.map(o => o.value()).concat(disabledSelected.map(o => o.value()))
                : disabledSelected.map(o => o.value());
            this.writeValue(newValue);
            this.onChange(newValue);
        }
        else {
            this.keyManager.onKeydown(event);
        }
    }
    select(option) {
        if (option.disabledInput()) {
            return;
        }
        const newValue = this.selectedSet().has(option)
            ? this.value().filter(v => v !== option.value())
            : this.value().concat(option.value());
        this.writeValue(newValue);
        this.onChange(newValue);
        this.keyManager.setActiveItem(option);
    }
    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();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: NxMultiSelectComponent, isStandalone: true, selector: "nx-multi-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 }, triggerTextTransform: { classPropertyName: "triggerTextTransform", publicName: "triggerTextTransform", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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(() => NxMultiSelectComponent),
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxMultiSelectComponent),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => NxMultiSelectComponent),
                multi: true,
            },
        ], queries: [{ propertyName: "options", predicate: NxOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: NxOptionsContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: NxFormFieldControlDirective }], ngImport: i0, template: "<!-- Maintain mininmum height with no placeholder or selection option text -->\n<span style=\"visibility: hidden; white-space-collapse: preserve\">{{ '\\u200b' }}</span>\n<span\n    class=\"nx-select__text\"\n    [class.nx-select__text--placeholder]=\"!selectedSet().size\"\n    >{{ triggerText() }}</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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{cursor:pointer;display:flex;box-sizing:border-box;align-items:center;-webkit-user-select:none;user-select:none;--input-color: var(--nxc-light4-offset, var(--nxc-light4))}: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}:host.nx-input-like--large{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}:host.nx-input-like--small{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{color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none}: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: 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: "20.1.6", ngImport: i0, type: NxMultiSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-multi-select', imports: [OverlayModule, NxOptionsContainerComponent, NxIconComponent], providers: [
                        {
                            provide: NxSelectToken,
                            useExisting: forwardRef(() => NxMultiSelectComponent),
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxMultiSelectComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => NxMultiSelectComponent),
                            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: "<!-- Maintain mininmum height with no placeholder or selection option text -->\n<span style=\"visibility: hidden; white-space-collapse: preserve\">{{ '\\u200b' }}</span>\n<span\n    class=\"nx-select__text\"\n    [class.nx-select__text--placeholder]=\"!selectedSet().size\"\n    >{{ triggerText() }}</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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{cursor:pointer;display:flex;box-sizing:border-box;align-items:center;-webkit-user-select:none;user-select:none;--input-color: var(--nxc-light4-offset, var(--nxc-light4))}: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}:host.nx-input-like--large{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}:host.nx-input-like--small{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{color:var(--input-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:6px;outline:none}: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$2 = [NxMultiSelectComponent, NxOptionComponent, NxOptionDividerComponent];
class NxMultiSelectModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NxMultiSelectModule, imports: [NxMultiSelectComponent, NxOptionComponent, NxOptionDividerComponent], exports: [NxMultiSelectComponent, NxOptionComponent, NxOptionDividerComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxMultiSelectModule, imports: [NxMultiSelectComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxMultiSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$2,
                    exports: imports$2,
                }]
        }] });

const NxComboboxToken = new InjectionToken('Injection token for NxComboboxComponent');

/** Option component for NxComboboxComponent. */
class NxComboboxOptionComponent {
    constructor() {
        this.content = viewChild.required('content');
        this.pseudohost = viewChild('pseudoHost', ...(ngDevMode ? [{ debugName: "pseudohost" }] : []));
        this.hover = new Subject();
        /** Value of the option. */
        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
        /** Text displayed in the input when the option is selected.
         *
         * If not provided the component's internal text content is used.
         */
        this.labelInput = input('', ...(ngDevMode ? [{ debugName: "labelInput", alias: 'label' }] : [{ alias: 'label' }]));
        this.host = inject(ElementRef);
        this.textContent = signal(null, ...(ngDevMode ? [{ debugName: "textContent" }] : []));
        this.label = computed(() => this.labelInput() || this.textContent(), ...(ngDevMode ? [{ debugName: "label" }] : []));
        /** Disabled state */
        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled',
                transform: booleanAttribute }] : [{
                alias: 'disabled',
                transform: booleanAttribute,
            }]));
        this.ariaDisabled = ariaComputed(this.disabledInput);
        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
        this.selectComponent = inject(NxComboboxToken, { skipSelf: true });
        this.selected = computed(() => this.selectComponent.selected() === this, ...(ngDevMode ? [{ debugName: "selected" }] : []));
        this.selectMode = this.selectComponent.selectMode;
        this._unselectEffect = effect(() => {
            const [disabled, selected] = [this.disabledInput(), this.selected()];
            const { selectComponent } = this;
            if (disabled && selected) {
                untracked(() => {
                    selectComponent.unselect();
                });
            }
        }, ...(ngDevMode ? [{ debugName: "_unselectEffect" }] : []));
        this._disabledEffect = effect(() => {
            this.disabled = this.disabledInput();
        }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : []));
        /** @see {@link Highlightable} interface start */
        this.disabled = false;
    }
    ngAfterViewInit() {
        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: "20.1.6", ngImport: i0, type: NxComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxComboboxOptionComponent, isStandalone: true, selector: "nx-combobox-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 } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "pseudohost", first: true, predicate: ["pseudoHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Angular doesn't allow <ng-content> to be rendered in two places at once,\nso we don't render it in the actual component and do it only in the overlay -->\n<ng-template #content>\n    <div\n        #pseudoHost\n        class=\"pseudo-host nx-option--single\"\n        role=\"option\"\n        [attr.aria-disabled]=\"ariaDisabled()\"\n        [class.nx-option--active]=\"active()\"\n        [class.nx-option--selected]=\"selected()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mouseenter)=\"hover.next(this)\"\n        (mousemove)=\"!active() ? this.hover.next(this) : null\"\n        (click)=\"select()\"\n        nxPseudoActive\n    >\n        <div class=\"nx-option__content\"><ng-content></ng-content></div>\n        <!-- When arbitary inputs are allowed in autocomplete mode,\n         options should not be considered as being selected so we hide the\n         check but it still makes sense to have a \"last used\" so we keep the internal\n         state to scroll to the selected option on open -->\n        @if (selected() && selectMode()) {\n            <nx-icon\n                icon=\"Check20X20\"\n                preserveSize\n                useCurrentColor\n            ></nx-icon>\n        }\n    </div>\n</ng-template>\n<!-- Render content once to read text content for automatic label -->\n@if (textContent() === null) {\n    <ng-component [ngTemplateOutlet]=\"content\" />\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:contents}.pseudo-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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision);display:flex;justify-content:space-between;align-items:center;gap:.5rem;box-sizing:border-box;padding:.25rem 1rem}.pseudo-host.nx-option--single{padding-inline-end:.625rem}.pseudo-host .fake-checkbox{height:20px;border:1px solid var(--nxc-dark13-offset, var(--nxc-dark13));border-radius:4px;background-color:var(--nxc-dark14-offset, var(--nxc-dark14))}.pseudo-host .fake-checkbox nx-icon{visibility:hidden;color:var(--nxc-dark1-offset, var(--nxc-dark1))}.pseudo-host .fake-checkbox--checked{background-color:var(--nxc-attention-green);border-color:var(--nxc-attention-green)}.pseudo-host .fake-checkbox--checked nx-icon{visibility:visible}.pseudo-host .nx-option__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1}.pseudo-host .nx-option__content{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)}.pseudo-host .nx-option__content{color:var(--nxc-light4-offset, var(--nxc-light4))}.pseudo-host[aria-disabled=false]{cursor:pointer}.pseudo-host[aria-disabled=false].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12));color:var(--nxc-light4-offset, var(--nxc-light4))}.pseudo-host[aria-disabled=false].nx-pseudo-active{background-color:hsl(from var(--nxc-dark12-offset, var(--nxc-dark12)) h s calc(l - 9))}.pseudo-host[aria-disabled=true]{cursor:default}.pseudo-host[aria-disabled=true] *{opacity:.3}.pseudo-host[aria-disabled=true].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12))}.pseudo-host[aria-disabled=true]:not(.nx-option--selected) .fake-checkbox{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }, { kind: "directive", type: NxPseudoActiveDirective, selector: "[nxPseudoActive]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-combobox-option', imports: [CommonModule, NxIconComponent, NxPseudoActiveDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Angular doesn't allow <ng-content> to be rendered in two places at once,\nso we don't render it in the actual component and do it only in the overlay -->\n<ng-template #content>\n    <div\n        #pseudoHost\n        class=\"pseudo-host nx-option--single\"\n        role=\"option\"\n        [attr.aria-disabled]=\"ariaDisabled()\"\n        [class.nx-option--active]=\"active()\"\n        [class.nx-option--selected]=\"selected()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mouseenter)=\"hover.next(this)\"\n        (mousemove)=\"!active() ? this.hover.next(this) : null\"\n        (click)=\"select()\"\n        nxPseudoActive\n    >\n        <div class=\"nx-option__content\"><ng-content></ng-content></div>\n        <!-- When arbitary inputs are allowed in autocomplete mode,\n         options should not be considered as being selected so we hide the\n         check but it still makes sense to have a \"last used\" so we keep the internal\n         state to scroll to the selected option on open -->\n        @if (selected() && selectMode()) {\n            <nx-icon\n                icon=\"Check20X20\"\n                preserveSize\n                useCurrentColor\n            ></nx-icon>\n        }\n    </div>\n</ng-template>\n<!-- Render content once to read text content for automatic label -->\n@if (textContent() === null) {\n    <ng-component [ngTemplateOutlet]=\"content\" />\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:contents}.pseudo-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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision);display:flex;justify-content:space-between;align-items:center;gap:.5rem;box-sizing:border-box;padding:.25rem 1rem}.pseudo-host.nx-option--single{padding-inline-end:.625rem}.pseudo-host .fake-checkbox{height:20px;border:1px solid var(--nxc-dark13-offset, var(--nxc-dark13));border-radius:4px;background-color:var(--nxc-dark14-offset, var(--nxc-dark14))}.pseudo-host .fake-checkbox nx-icon{visibility:hidden;color:var(--nxc-dark1-offset, var(--nxc-dark1))}.pseudo-host .fake-checkbox--checked{background-color:var(--nxc-attention-green);border-color:var(--nxc-attention-green)}.pseudo-host .fake-checkbox--checked nx-icon{visibility:visible}.pseudo-host .nx-option__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1}.pseudo-host .nx-option__content{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)}.pseudo-host .nx-option__content{color:var(--nxc-light4-offset, var(--nxc-light4))}.pseudo-host[aria-disabled=false]{cursor:pointer}.pseudo-host[aria-disabled=false].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12));color:var(--nxc-light4-offset, var(--nxc-light4))}.pseudo-host[aria-disabled=false].nx-pseudo-active{background-color:hsl(from var(--nxc-dark12-offset, var(--nxc-dark12)) h s calc(l - 9))}.pseudo-host[aria-disabled=true]{cursor:default}.pseudo-host[aria-disabled=true] *{opacity:.3}.pseudo-host[aria-disabled=true].nx-option--active{background-color:var(--nxc-dark12-offset, var(--nxc-dark12))}.pseudo-host[aria-disabled=true]:not(.nx-option--selected) .fake-checkbox{visibility:hidden}\n"] }]
        }] });

/** Component for for filtering a set of options matching a query. */
class NxComboboxComponent extends NxInputLikeComponent {
    constructor() {
        super(...arguments);
        this.projectedInput = contentChild(NxInputComponent, ...(ngDevMode ? [{ debugName: "projectedInput" }] : []));
        this.observedDisabled = signal(false, ...(ngDevMode ? [{ debugName: "observedDisabled" }] : []));
        this.disabledObserver = new MutationObserver(records => {
            const disabledChange = records.find(r => r.attributeName === 'disabled');
            if (disabledChange) {
                this.observedDisabled.set(disabledChange.target.disabled);
            }
        });
        this._observeDisableEffect = effect(onCleanup => {
            const projectedInput = this.projectedInput();
            if (projectedInput) {
                const { nativeElement } = projectedInput.host;
                this.observedDisabled.set(nativeElement.disabled);
                untracked(() => {
                    this.disabledObserver.observe(nativeElement, {
                        attributeFilter: ['disabled'],
                    });
                });
            }
            onCleanup(() => {
                this.disabledObserver.disconnect();
            });
        }, ...(ngDevMode ? [{ debugName: "_observeDisableEffect" }] : []));
        this.fallbackInput = viewChild(NxInputComponent, ...(ngDevMode ? [{ debugName: "fallbackInput" }] : []));
        this.formField = inject(NxFormFieldToken, { optional: true, skipSelf: true });
        this._setLabelTargetEffect = effect(() => {
            const fallbackInput = this.fallbackInput();
            if (fallbackInput && this.formField) {
                this.formField.customLabelTarget.set(fallbackInput.host);
            }
        }, ...(ngDevMode ? [{ debugName: "_setLabelTargetEffect" }] : []));
        this.selectMode = computed(() => !!this.fallbackInput(), ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
        this.input = computed(() => {
            const inputComponent = this.projectedInput() || this.fallbackInput();
            const element = inputComponent.host.nativeElement;
            // Textarea is not supported in combobox
            if (element instanceof HTMLTextAreaElement) {
                throw new Error('NxCombobox: Textarea elements are not supported. Use an <input nx-input> element instead.');
            }
            return element;
        }, ...(ngDevMode ? [{ debugName: "input" }] : []));
        this.inputValue$ = new BehaviorSubject('');
        this._inputInitializeEffect = effect(onCleanup => {
            const input = this.input();
            const onInput = () => {
                untracked(() => {
                    this.inputValue$.next(input.value);
                    if (!input.value && this.selected()) {
                        this.unselect();
                    }
                    this.pristineSelected.set(false);
                    this.open();
                });
            };
            const onKeyDown = this.onKeyDown.bind(this);
            const onClick = this.onClick.bind(this);
            const onBlur = this.onBlur.bind(this);
            input.addEventListener('keydown', onKeyDown);
            input.addEventListener('click', onClick);
            input.addEventListener('blur', onBlur);
            input.addEventListener('input', onInput);
            input.setAttribute('role', 'combobox');
            onCleanup(() => {
                input.removeEventListener('keydown', onKeyDown);
                input.removeEventListener('click', onClick);
                input.removeEventListener('blur', onBlur);
                input.removeEventListener('input', onInput);
            });
        }, ...(ngDevMode ? [{ debugName: "_inputInitializeEffect" }] : []));
        this._inputAttributeEffect = effect(() => {
            const ariaExpanded = this.ariaExpanded();
            const input = untracked(this.input);
            input.setAttribute('aria-expanded', ariaExpanded);
        }, ...(ngDevMode ? [{ debugName: "_inputAttributeEffect" }] : []));
        this.projectedControl = contentChild(NgControl, ...(ngDevMode ? [{ debugName: "projectedControl" }] : []));
        this.displayedPlaceholder = computed(() => {
            const [zeroOptions, zeroOptionsPlaceholder, defaultZeroOptionPlaceholder, placeholder, defaultPlaceholder,] = [
                this.zeroOptions(),
                this.zeroOptionsPlaceholder(),
                this.defaultZeroOptionPlaceholder(),
                this.placeholder(),
                this.defaultPlaceholder(),
            ];
            return ((zeroOptions
                ? (zeroOptionsPlaceholder ?? defaultZeroOptionPlaceholder)
                : (placeholder ?? defaultPlaceholder)) ?? '');
        }, ...(ngDevMode ? [{ debugName: "displayedPlaceholder" }] : []));
        this.multiple = false;
        this.defaultPlaceholderToken = inject(NxSelectPlaceholderToken, { optional: true }) ?? signal(null).asReadonly();
        this.defaultPlaceholder = coerceSignal(this.defaultPlaceholderToken);
        /** Text displayed when the input is empty.
         *
         * No effect in autocomplete mode.
         */
        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
        this.injector = inject(Injector);
        this.destroyRef = inject(DestroyRef);
        this.host = inject(ElementRef);
        this.onChange = (_) => { };
        this.onTouched = () => { };
        /** Disabled state. */
        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled',
                transform: booleanAttribute }] : [{
                alias: 'disabled',
                transform: booleanAttribute,
            }]));
        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
        this.disabled = computed(() => this.cvaDisabled() ||
            this.disabledInput() ||
            (this.zeroOptions() && this.selectMode()) ||
            this.observedDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
        this._closeOnDisableEffect = effect(() => {
            if (this.disabled()) {
                untracked(() => this.close());
            }
        }, ...(ngDevMode ? [{ debugName: "_closeOnDisableEffect" }] : []));
        /** Value of the combobox. */
        this.valueModel = model(null, ...(ngDevMode ? [{ debugName: "valueModel", alias: 'value' }] : [{ alias: 'value' }]));
        this._valueModelEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.valueModel();
            untracked(() => {
                this.writeValue(value);
            });
        }, ...(ngDevMode ? [{ debugName: "_valueModelEffect" }] : []));
        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
        this._valueEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const value = this.value();
            const overlayOpen = untracked(this.overlayOpen);
            const selected = untracked(this._selected);
            const optionsMap = untracked(this.optionsMap);
            const matchIndexes = untracked(this.matchIndexes);
            untracked(() => {
                const resetSelection = () => {
                    this._selected.set(undefined);
                    if (!overlayOpen) {
                        this.keyManager.setActiveItem(-1);
                    }
                };
                if (value !== null) {
                    if (!selected || selected.value() !== value) {
                        const selectedOption = optionsMap.get(value);
                        if (selectedOption) {
                            this._selected.set(selectedOption);
                            this.pristineSelected.set(true);
                            if (matchIndexes.has(selectedOption)) {
                                this.keyManager.setActiveItem(selectedOption);
                            }
                        }
                        else {
                            resetSelection();
                        }
                    }
                }
                else {
                    resetSelection();
                }
            });
        }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : []));
        /** Whether a value is required in a form. */
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /** Whether a user has typed since an option was selected. */
        this.pristineSelected = signal(false, ...(ngDevMode ? [{ debugName: "pristineSelected" }] : []));
        this._selected = signal(undefined, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
        this.selected = this._selected.asReadonly();
        this._selectEffect = effect(() => {
            const selected = this._selected();
            if (selected) {
                /* The logic for updating the value input has ended up in two places.
                When the selection is set, we always want to update the input value (handled here).
                But when the selection is cleared, we only want to clear the input
                (handled in writeValue) if the value was programatically reset and
                operating in select mode, i.e. no projected input was passed  */
                this.writeToInput(selected.label());
            }
        }, ...(ngDevMode ? [{ debugName: "_selectEffect" }] : []));
        this.options = contentChildren(NxComboboxOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
        this.options$ = toObservable(this.options);
        /** Set active option on hover. */
        this._onOptionHoverSubscription = this.options$
            .pipe(switchMap(options => merge(...options.map(o => o.hover)).pipe(takeUntil(this.options$.pipe(skip(1))))), takeUntilDestroyed())
            .subscribe(option => {
            if (!option.disabledInput()) {
                this.keyManager.setActiveItem(option);
            }
        });
        /* FIXME: accessing inputs on view children added after initial render
        https://github.com/angular/angular/issues/59067#issuecomment-2541477574 */
        this.optionsMap = computed(() => new Map(this.options().map(o => [o.value(), o])), ...(ngDevMode ? [{ debugName: "optionsMap" }] : []));
        this.toLower = memoize(toLower);
        this.caseInsensitiveLabelSearch = (options, query) => {
            if (!query) {
                return options;
            }
            const matches = [];
            for (let i = 0; i < options.length; i++) {
                const option = options[i];
                if (this.toLower(option.label()).includes(this.toLower(query))) {
                    matches.push(option);
                }
            }
            return matches;
        };
        // Putting this here to make it usable in toObservable below
        this.afterViewInit$ = new BehaviorSubject(false);
        /** Function to match options to a search query. */
        this.searchFn = input(this.caseInsensitiveLabelSearch, ...(ngDevMode ? [{ debugName: "searchFn" }] : []));
        this._matches$ = combineLatest([
            toObservable(this.options),
            this.inputValue$.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), distinctUntilChanged()),
            toObservable(this._selected),
            toObservable(this.pristineSelected),
            this.afterViewInit$,
        ]).pipe(
        /* Automatic labeling (setting label from text content) is only avaialable
        for search on options after view init */
        skipWhile(([_options, _query, _selected, _pristine, afterViewInit]) => !afterViewInit), map(([options, query, selected, pristine]) => selected && pristine ? options : this.searchFn()(options, query)), takeUntilDestroyed(), shareReplay({ bufferSize: 1, refCount: false }));
        this.matches = toSignal(this._matches$, { initialValue: this.options() });
        this.matchIndexes = computed(() => new Map(this.matches().map((match, index) => [match, index])), ...(ngDevMode ? [{ debugName: "matchIndexes" }] : []));
        this._matchesChangeEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const matchIndexes = this.matchIndexes();
            const optionsContainer = untracked(this.optionsContainer);
            untracked(() => {
                const { activeItem } = this.keyManager;
                if (activeItem) {
                    if (!matchIndexes.has(activeItem)) {
                        this.keyManager.setActiveItem(-1);
                        // Also sets scroll to 0
                    }
                }
                else if (optionsContainer) {
                    this.optionsContainer().host.nativeElement.scrollTop = 0;
                }
            });
        }, ...(ngDevMode ? [{ debugName: "_matchesChangeEffect" }] : []));
        /** Height of options in px.
         *
         * Default is height of text-only option with base styling.
         */
        this.optionHeight = input(24 + parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.5, ...(ngDevMode ? [{ debugName: "optionHeight" }] : []));
        /* <ng-container> ends up as a comment node in the actual DOM, with the content before it.
        We react on the content containers changing instead of matches$ to wait for the actual
        content rendering to happen, which is required to get height */
        this.contents = viewChildren('contentContainer', ...(ngDevMode ? [{ debugName: "contents" }] : []));
        this._constantHeightEffect = effect(() => {
            const contents = this.contents();
            if (!contents.length) {
                return;
            }
            const reference = contents[0].nativeElement.previousElementSibling
                .offsetHeight;
            for (let i = 0; i < contents.length; i++) {
                const element = contents[i].nativeElement.previousElementSibling;
                if (element.offsetHeight !== reference) {
                    console.error('Combobox options must all be same height for virtual scrolling to function');
                    break;
                }
            }
        }, ...(ngDevMode ? [{ debugName: "_constantHeightEffect" }] : []));
        /** How many extra options to render in both directions. */
        this.scrollBuffer = input(10, ...(ngDevMode ? [{ debugName: "scrollBuffer" }] : []));
        this.DISPLAY_COUNT = NxOptionsContainerComponent.DISPLAY_COUNT;
        this.VERTICAL_PADDING_PX = NxOptionsContainerComponent.VERTICAL_PADDING_PX;
        this.scroll$ = new BehaviorSubject(0);
        this.scrollParams$ = combineLatest([this.scroll$, this._matches$]).pipe(map(([scroll, matches]) => {
            const trueStartIndex = Math.floor(Math.max(scroll - this.VERTICAL_PADDING_PX, 0) / this.optionHeight());
            return [trueStartIndex, matches];
        }), distinctUntilChanged((prev, curr) => {
            return prev[0] === curr[0] && prev[1].length === curr[1].length;
        }), map(([trueStartIndex, matches]) => {
            const bufferedStartIndex = Math.max(trueStartIndex - this.scrollBuffer(), 0);
            const startHeight = bufferedStartIndex * this.optionHeight();
            const trueEndIndex = Math.min(trueStartIndex + this.DISPLAY_COUNT + 2, matches.length);
            // Possible 2 partials
            const bufferedEndIndex = Math.min(matches.length, trueEndIndex + this.scrollBuffer());
            const endHeight = (matches.length - bufferedEndIndex) * this.optionHeight();
            return {
                matches,
                startIndex: bufferedStartIndex,
                startHeight,
                endIndex: bufferedEndIndex,
                endHeight,
            };
        }), takeUntilDestroyed(), shareReplay({ bufferSize: 1, refCount: false }));
        this._scrollResetEffect = effect(() => {
            if (!this.overlayOpen()) {
                this.scroll$.next(0);
            }
        }, ...(ngDevMode ? [{ debugName: "_scrollResetEffect" }] : []));
        this.zeroOptions = computed(() => !this.options().length, ...(ngDevMode ? [{ debugName: "zeroOptions" }] : []));
        this._zeroOptionEffect = effect(() => {
            if (this.zeroOptions()) {
                this.close();
            }
        }, ...(ngDevMode ? [{ debugName: "_zeroOptionEffect" }] : []));
        this.defaultZeroOptionPlaceholderToken = inject(NxSelectZeroOptionsPlaceholderToken, { optional: true }) ??
            signal(null).asReadonly();
        this.defaultZeroOptionPlaceholder = coerceSignal(this.defaultZeroOptionPlaceholderToken);
        /** Text displayed when there are no options.
         *
         * No effect in autocomplete mode.
         */
        this.zeroOptionsPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "zeroOptionsPlaceholder" }] : []));
        this._optionsChangeEffect = effect(() => {
            if (!this.afterContentInit()) {
                return;
            }
            const options = this.options();
            const optionsMap = untracked(this.optionsMap);
            const selected = untracked(this._selected);
            if (optionsMap.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);
                    // Active item will be reset in value effect
                }
            });
        }, ...(ngDevMode ? [{ debugName: "_optionsChangeEffect" }] : []));
        this.connectedOverlay = viewChild.required(CdkConnectedOverlay);
        this.overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
        this.ariaExpanded = ariaComputed(this.overlayOpen);
        this.overlayWidth = signal(0, ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
        this.overlayPositions = [
            connectedPosition({ originPoint: 'SW', overlayPoint: 'NW', offsetY: 8 }),
            connectedPosition({ originPoint: 'NW', overlayPoint: 'SW', offsetY: -8 }),
        ];
        this.optionsContainer = viewChild(NxOptionsContainerComponent, ...(ngDevMode ? [{ debugName: "optionsContainer" }] : []));
        /** Compatibility hack for v19, previously effects fired after content init */
        this.afterContentInit = signal(false, ...(ngDevMode ? [{ debugName: "afterContentInit" }] : []));
    }
    writeToInput(value) {
        untracked(() => {
            this.input().value = value;
            this.inputValue$.next(value);
            // Setting the element's value doesn't trigger form control update
            this.projectedControl()?.control?.setValue(value);
        });
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.cvaDisabled.set(isDisabled);
    }
    writeValue(value, resetInput = true) {
        if (value !== this.value()) {
            this.value.set(value);
            this.valueModel.set(value);
            if (value === null && resetInput && this.selectMode()) {
                this.writeToInput('');
            }
        }
    }
    validate(control) {
        return this.required() && control.value === null ? { required: true } : null;
    }
    scrollIndexIntoView(index) {
        const itemTop = this.VERTICAL_PADDING_PX + index * this.optionHeight();
        const itemBottom = itemTop + this.optionHeight();
        const container = this.optionsContainer().host.nativeElement;
        const containerVisibleTop = container.scrollTop;
        const containerVisibleBottom = containerVisibleTop + container.offsetHeight;
        if (itemTop < containerVisibleTop) {
            container.scrollTop = itemTop;
        }
        else if (itemBottom > containerVisibleBottom) {
            container.scrollTop = Math.max(itemBottom -
                (this.DISPLAY_COUNT * this.optionHeight() + this.VERTICAL_PADDING_PX * 2), 0);
        }
    }
    ngAfterContentInit() {
        this.keyManager = new ActiveDescendantKeyManager(this.matches, this.injector)
            .withHomeAndEnd()
            .withPageUpDown()
            .skipPredicate(() => false);
        this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(index => {
            if (this.overlayOpen()) {
                // When the active item is set while opening the container is not rendered yet
                if (this.optionsContainer()) {
                    if (index !== -1) {
                        this.scrollIndexIntoView(index);
                    }
                    else {
                        this.optionsContainer().host.nativeElement.scrollTop = 0;
                    }
                }
            }
        });
        this.afterContentInit.set(true);
    }
    ngAfterViewInit() {
        this.afterViewInit$.next(true);
        this.inputValue$.next(this.input().value);
    }
    ngOnDestroy() {
        this.keyManager.destroy();
    }
    onBlur() {
        this.close();
        if (this.selectMode()) {
            const selected = this._selected();
            if (selected) {
                this.writeToInput(selected.label());
                this.pristineSelected.set(true);
            }
            else {
                this.writeToInput('');
            }
        }
        this.onTouched();
    }
    onKeyDown(event) {
        if (!this.overlayOpen()) {
            this.onClosedKeyDown(event);
        }
        else {
            this.onOpenKeyDown(event);
        }
    }
    onClosedKeyDown(event) {
        if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
            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();
        const selected = this._selected();
        const matchIndexes = this.matchIndexes();
        /* Overlay has to be set to open before setting active item
        to avoid selecting the item on open */
        if (selected && matchIndexes.has(selected)) {
            this.keyManager.setActiveItem(selected);
        }
        else {
            this.keyManager.setActiveItem(-1);
        }
        this.connectedOverlay()
            .positionChange.pipe(take(1))
            .subscribe(() => {
            if (this.keyManager.activeItem) {
                this.scrollIndexIntoView(this.keyManager.activeItemIndex);
            }
        });
    }
    onOpenKeyDown(event) {
        if (event.key === 'Enter') {
            if (this.keyManager.activeItem) {
                this.select(this.keyManager.activeItem);
            }
            else {
                this.close();
            }
        }
        else {
            this.keyManager.onKeydown(event);
        }
    }
    select(option) {
        if (option.disabledInput()) {
            return;
        }
        const value = option.value();
        if (value !== null) {
            this._selected.set(option);
            this.pristineSelected.set(true);
            this.writeValue(value);
        }
        else {
            this._selected.set(undefined);
            this.writeValue(null);
        }
        this.onChange(value);
        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.withVerticalOrientation(false);
    }
    clear() {
        this.writeValue(null);
        this.writeToInput('');
        this.input().focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxComboboxComponent, isStandalone: true, selector: "nx-combobox", 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 }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, optionHeight: { classPropertyName: "optionHeight", publicName: "optionHeight", isSignal: true, isRequired: false, transformFunction: null }, scrollBuffer: { classPropertyName: "scrollBuffer", publicName: "scrollBuffer", isSignal: true, isRequired: false, transformFunction: null }, zeroOptionsPlaceholder: { classPropertyName: "zeroOptionsPlaceholder", publicName: "zeroOptionsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "valueChange" }, providers: [
            {
                provide: NxComboboxToken,
                useExisting: forwardRef(() => NxComboboxComponent),
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxComboboxComponent),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => NxComboboxComponent),
                multi: true,
            },
        ], queries: [{ propertyName: "projectedInput", first: true, predicate: NxInputComponent, descendants: true, isSignal: true }, { propertyName: "projectedControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "options", predicate: NxComboboxOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "fallbackInput", first: true, predicate: NxInputComponent, descendants: true, isSignal: true }, { propertyName: "contents", predicate: ["contentContainer"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: NxOptionsContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[nx-input]\"\n    ><input\n        nx-input\n        [background]=\"background()\"\n        [size]=\"size()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"displayedPlaceholder()\"\n/></ng-content>\n<!-- When in select mode, the arrow is always shown at the right and the\nX is shown to its left if an option is selected. -->\n<!-- When in autocomplete mode, the arrow is hidden and the X is shown at the right\nif the input is not empty. -->\n@if ((selectMode() && selected()) || (!selectMode() && (inputValue$ | async))) {\n    <button\n        nx-button\n        type=\"button\"\n        appearance=\"text\"\n        variant=\"light\"\n        tabIndex=\"-1\"\n        data-testid=\"nx-combobox-clear\"\n        class=\"nx-combobox__icon nx-combobox__icon--clear\"\n        [class]=\"{\n            'nx-combobox__icon--left': selectMode(),\n            'nx-combobox__icon--right': !selectMode(),\n        }\"\n        (click)=\"clear()\"\n        (mousedown)=\"$event.preventDefault()\"\n    >\n        <nx-icon\n            icon=\"CrossClose\"\n            useCurrentColor\n        ></nx-icon>\n    </button>\n}\n@if (selectMode()) {\n    <button\n        nx-button\n        type=\"button\"\n        appearance=\"text\"\n        variant=\"light\"\n        tabIndex=\"-1\"\n        (click)=\"onClick(); input().focus()\"\n        data-testid=\"nx-combobox-arrow\"\n        class=\"nx-combobox__icon nx-combobox__icon--arrow nx-combobox__icon--right\"\n        (mousedown)=\"$event.preventDefault()\"\n    >\n        <nx-icon\n            icon=\"ArrowDown20X20\"\n            useCurrentColor\n        ></nx-icon>\n    </button>\n}\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"input()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    (overlayKeydown)=\"onOverlayKeyDown($event)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n    @let params = (scrollParams$ | async)!;\n    <!-- Hide instead of closing when no matches to simplify state management -->\n    <nx-options-container\n        #optionsContainer\n        [style.display]=\"params.matches.length ? undefined : 'none'\"\n        (scroll)=\"scroll$.next(optionsContainer.host.nativeElement.scrollTop)\"\n    >\n        <div [style.height.px]=\"params.startHeight\"></div>\n        @for (\n            match of params.matches | slice: params.startIndex : params.endIndex;\n            track match.value()\n        ) {\n            <ng-container\n                #contentContainer\n                [ngTemplateOutlet]=\"match.content()\"\n            ></ng-container>\n        }\n        <div [style.height.px]=\"params.endHeight\"></div>\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}nx-combobox{display:block;position:relative}nx-combobox input[nx-input].nx-input-like--large,nx-combobox input[nx-input].nx-input-like--small{padding-right:2rem!important}nx-combobox input[nx-input].nx-input-like--large:has(~.nx-combobox__icon--left),nx-combobox input[nx-input].nx-input-like--small:has(~.nx-combobox__icon--left){padding-right:4rem!important}nx-combobox input[nx-input].nx-input-like--large,nx-combobox input[nx-input].nx-input-like--small{width:100%!important}nx-combobox input[nx-input]:not(:disabled):not(:focus-visible):has(~[nx-button]:hover){border-color:var(--border-color-hover)}nx-combobox button[nx-button].nx-combobox__icon{display:flex;justify-content:center;align-items:center;height:1.25rem;width:1.25rem;padding:0!important;border-width:0;position:absolute;top:50%;transform:translateY(-50%)}nx-combobox button[nx-button].nx-combobox__icon--right{right:.75rem}nx-combobox button[nx-button].nx-combobox__icon--left{right:2.5rem}nx-combobox>[nx-input]:disabled~.nx-combobox__icon{opacity:.3}nx-combobox>[nx-input][aria-expanded=true]~.nx-combobox__icon--arrow nx-icon{transform:scaleY(-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: NxInputComponent, selector: "input[nx-input], textarea[nx-input]", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: NxOptionsContainerComponent, selector: "nx-options-container" }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }, { kind: "component", type: NxButtonComponent, selector: "button[nx-button]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-combobox', encapsulation: ViewEncapsulation.None, imports: [
                        CommonModule,
                        OverlayModule,
                        NxInputComponent,
                        NxOptionsContainerComponent,
                        NxIconComponent,
                        NxButtonComponent,
                    ], providers: [
                        {
                            provide: NxComboboxToken,
                            useExisting: forwardRef(() => NxComboboxComponent),
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxComboboxComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => NxComboboxComponent),
                            multi: true,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[nx-input]\"\n    ><input\n        nx-input\n        [background]=\"background()\"\n        [size]=\"size()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"displayedPlaceholder()\"\n/></ng-content>\n<!-- When in select mode, the arrow is always shown at the right and the\nX is shown to its left if an option is selected. -->\n<!-- When in autocomplete mode, the arrow is hidden and the X is shown at the right\nif the input is not empty. -->\n@if ((selectMode() && selected()) || (!selectMode() && (inputValue$ | async))) {\n    <button\n        nx-button\n        type=\"button\"\n        appearance=\"text\"\n        variant=\"light\"\n        tabIndex=\"-1\"\n        data-testid=\"nx-combobox-clear\"\n        class=\"nx-combobox__icon nx-combobox__icon--clear\"\n        [class]=\"{\n            'nx-combobox__icon--left': selectMode(),\n            'nx-combobox__icon--right': !selectMode(),\n        }\"\n        (click)=\"clear()\"\n        (mousedown)=\"$event.preventDefault()\"\n    >\n        <nx-icon\n            icon=\"CrossClose\"\n            useCurrentColor\n        ></nx-icon>\n    </button>\n}\n@if (selectMode()) {\n    <button\n        nx-button\n        type=\"button\"\n        appearance=\"text\"\n        variant=\"light\"\n        tabIndex=\"-1\"\n        (click)=\"onClick(); input().focus()\"\n        data-testid=\"nx-combobox-arrow\"\n        class=\"nx-combobox__icon nx-combobox__icon--arrow nx-combobox__icon--right\"\n        (mousedown)=\"$event.preventDefault()\"\n    >\n        <nx-icon\n            icon=\"ArrowDown20X20\"\n            useCurrentColor\n        ></nx-icon>\n    </button>\n}\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"input()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    (overlayKeydown)=\"onOverlayKeyDown($event)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n    @let params = (scrollParams$ | async)!;\n    <!-- Hide instead of closing when no matches to simplify state management -->\n    <nx-options-container\n        #optionsContainer\n        [style.display]=\"params.matches.length ? undefined : 'none'\"\n        (scroll)=\"scroll$.next(optionsContainer.host.nativeElement.scrollTop)\"\n    >\n        <div [style.height.px]=\"params.startHeight\"></div>\n        @for (\n            match of params.matches | slice: params.startIndex : params.endIndex;\n            track match.value()\n        ) {\n            <ng-container\n                #contentContainer\n                [ngTemplateOutlet]=\"match.content()\"\n            ></ng-container>\n        }\n        <div [style.height.px]=\"params.endHeight\"></div>\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}nx-combobox{display:block;position:relative}nx-combobox input[nx-input].nx-input-like--large,nx-combobox input[nx-input].nx-input-like--small{padding-right:2rem!important}nx-combobox input[nx-input].nx-input-like--large:has(~.nx-combobox__icon--left),nx-combobox input[nx-input].nx-input-like--small:has(~.nx-combobox__icon--left){padding-right:4rem!important}nx-combobox input[nx-input].nx-input-like--large,nx-combobox input[nx-input].nx-input-like--small{width:100%!important}nx-combobox input[nx-input]:not(:disabled):not(:focus-visible):has(~[nx-button]:hover){border-color:var(--border-color-hover)}nx-combobox button[nx-button].nx-combobox__icon{display:flex;justify-content:center;align-items:center;height:1.25rem;width:1.25rem;padding:0!important;border-width:0;position:absolute;top:50%;transform:translateY(-50%)}nx-combobox button[nx-button].nx-combobox__icon--right{right:.75rem}nx-combobox button[nx-button].nx-combobox__icon--left{right:2.5rem}nx-combobox>[nx-input]:disabled~.nx-combobox__icon{opacity:.3}nx-combobox>[nx-input][aria-expanded=true]~.nx-combobox__icon--arrow nx-icon{transform:scaleY(-1)}\n"] }]
        }] });

const imports$1 = [NxComboboxComponent, NxComboboxOptionComponent];
class NxComboboxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxModule, imports: [NxComboboxComponent, NxComboboxOptionComponent], exports: [NxComboboxComponent, NxComboboxOptionComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxModule, imports: [imports$1] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxComboboxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: imports$1,
                    exports: imports$1,
                }]
        }] });

class NxToggleComponent extends BaseControlValueAccessor {
    constructor() {
        super(...arguments);
        this.value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /** tbd replace with linked signal */
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.disabledEffect = effect(() => {
            this.setDisabledState(this.disabled());
        }, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
    }
    validate(control) {
        if (this.value()) {
            return null;
        }
        return this.required() ? { required: true } : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxToggleComponent, isStandalone: true, selector: "nx-toggle", 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(() => NxToggleComponent),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => NxToggleComponent),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0, template: "<label>\n    <div class=\"input-body\"></div>\n    <div class=\"input-indicator\"></div>\n    <input\n        type=\"checkbox\"\n        role=\"switch\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n    />\n    <span class=\"input-content\"><ng-content></ng-content></span>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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-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);--invalid-color: var(--nxc-attention-red);--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: 24px;--input-width: 44px;--input-border-radius: 10px}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 3) )}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + .03) )}}: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{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}:host{--invalid-color-hover: hsl(from var(--invalid-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 + .03) )}}:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) )}@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;border-color:var(--unchecked-border-color)}:host .input-content{display:inline-block}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{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,:host:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label,:host:has(input[type=checkbox]:indeterminate) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body,:host:has(input[type=checkbox]:indeterminate):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label,:host:has(input[type=checkbox]:indeterminate):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body,:host:has(input[type=checkbox]:indeterminate):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label,:host:has(input[type=checkbox]:indeterminate):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body,:host:has(input[type=checkbox]:indeterminate):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{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):has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):active:has(input:checked) label,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) 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{position:absolute;left:0;width:var(--input-width);height:var(--input-height);border:1px 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:block;position:relative;height:100%}.input-content{padding-left:calc(var(--input-width) + 8px)}.input-content:empty{padding-left:0}.input-content{overflow-wrap:break-word;word-break:break-word;text-align:start}.input-content{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{--unchecked-indicator-color: var(--nxc-dark10-offset, var(--nxc-dark10));--unchecked-indicator-color-hover: var(--nxc-dark12-offset, var(--nxc-dark12));--unchecked-indicator-color-active: var(--nxc-dark9-offset, var(--nxc-dark9));--input-indicator-width: 16px}:host .input-indicator{transition:background-color .5s ease;background-color:var(--unchecked-indicator-color)}:host:hover .input-indicator{background-color:var(--unchecked-indicator-color-hover)}:host:active .input-indicator{background-color:var(--unchecked-indicator-color-active)}:host:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}:host:has(input:disabled) .input-indicator,:host:has(input:disabled):hover .input-indicator,:host:has(input:disabled):active .input-indicator{background-color:var(--unchecked-indicator-color)}:host:has(input:disabled):has(input:checked) .input-indicator,:host:has(input:disabled):hover:has(input:checked) .input-indicator,:host:has(input:disabled):active:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}.input-indicator{position:absolute;left:0;top:calc((var(--total-height) - var(--input-indicator-width)) / 2);width:var(--input-indicator-width);height:var(--input-indicator-width);border-radius:10px}:host{--uncheck-input-indicator-left: calc((var(--input-height) - var(--input-indicator-width)) / 2)}:host .input-indicator{transition:left .5s ease,background-color .5s ease;left:var(--uncheck-input-indicator-left)}:host:has(input:checked) .input-indicator{left:calc(var(--input-width) - var(--uncheck-input-indicator-left) - var(--input-indicator-width))}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-toggle', imports: [FormsModule], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxToggleComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => NxToggleComponent),
                            multi: true,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <div class=\"input-body\"></div>\n    <div class=\"input-indicator\"></div>\n    <input\n        type=\"checkbox\"\n        role=\"switch\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n    />\n    <span class=\"input-content\"><ng-content></ng-content></span>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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-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);--invalid-color: var(--nxc-attention-red);--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: 24px;--input-width: 44px;--input-border-radius: 10px}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 3) )}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + .03) )}}: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{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}:host{--invalid-color-hover: hsl(from var(--invalid-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 + .03) )}}:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) )}@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;border-color:var(--unchecked-border-color)}:host .input-content{display:inline-block}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{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,:host:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label,:host:has(input[type=checkbox]:indeterminate) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body,:host:has(input[type=checkbox]:indeterminate):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label,:host:has(input[type=checkbox]:indeterminate):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body,:host:has(input[type=checkbox]:indeterminate):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label,:host:has(input[type=checkbox]:indeterminate):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body,:host:has(input[type=checkbox]:indeterminate):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{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):has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):active:has(input:checked) label,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) 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{position:absolute;left:0;width:var(--input-width);height:var(--input-height);border:1px 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:block;position:relative;height:100%}.input-content{padding-left:calc(var(--input-width) + 8px)}.input-content:empty{padding-left:0}.input-content{overflow-wrap:break-word;word-break:break-word;text-align:start}.input-content{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{--unchecked-indicator-color: var(--nxc-dark10-offset, var(--nxc-dark10));--unchecked-indicator-color-hover: var(--nxc-dark12-offset, var(--nxc-dark12));--unchecked-indicator-color-active: var(--nxc-dark9-offset, var(--nxc-dark9));--input-indicator-width: 16px}:host .input-indicator{transition:background-color .5s ease;background-color:var(--unchecked-indicator-color)}:host:hover .input-indicator{background-color:var(--unchecked-indicator-color-hover)}:host:active .input-indicator{background-color:var(--unchecked-indicator-color-active)}:host:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}:host:has(input:disabled) .input-indicator,:host:has(input:disabled):hover .input-indicator,:host:has(input:disabled):active .input-indicator{background-color:var(--unchecked-indicator-color)}:host:has(input:disabled):has(input:checked) .input-indicator,:host:has(input:disabled):hover:has(input:checked) .input-indicator,:host:has(input:disabled):active:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}.input-indicator{position:absolute;left:0;top:calc((var(--total-height) - var(--input-indicator-width)) / 2);width:var(--input-indicator-width);height:var(--input-indicator-width);border-radius:10px}:host{--uncheck-input-indicator-left: calc((var(--input-height) - var(--input-indicator-width)) / 2)}:host .input-indicator{transition:left .5s ease,background-color .5s ease;left:var(--uncheck-input-indicator-left)}:host:has(input:checked) .input-indicator{left:calc(var(--input-width) - var(--uncheck-input-indicator-left) - var(--input-indicator-width))}\n"] }]
        }] });

class NxRadioComponent extends RadioControlValueAccessor {
    constructor() {
        super(...arguments);
        this.radioInput = viewChild.required('radioInput');
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.ngControl = inject(NgControl, { optional: true, skipSelf: true });
        /* There is an issue with RadioControlValueAccessor implementation
         * `writeValue` implementation unchecks radioButton in a following way
         * `this.setProperty('checked', this._state);`
         * which does not work due to it sets checked prop for the main component
         * and not the actual input. And it does not uncheck
         *
         * I do it manually in the `fireUncheck` method after write value
         * which is just cleaner and requires less code to be overridden
         */
        this.setProperty = (propertyName, value) => {
            super.setProperty(propertyName, value);
            if (propertyName === 'checked' || propertyName === 'disabled') {
                this.radioInput().nativeElement[propertyName] = value;
            }
        };
        /**
         * Override to set internal value
         * TBD replace with linked signal
         */
        this.setDisabledState = (isDisabled) => {
            // input will have a disabled state if either of the
            const disabledState = isDisabled || this.disabled();
            this.isDisabled.set(disabledState);
            super.setDisabledState(disabledState);
        };
        this.disabledEffect = effect(() => {
            this.setDisabledState(this.disabled());
        }, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
        /**
         * When part of a radio group radio input needs to have required state synchronised.
         * Set required status if it is not defined in an input.
         * TBD replace with linked signal
         */
        this.setRequiredState = (isRequired) => {
            this.isRequired.set(isRequired);
        };
        this.requiredEffect = effect(() => {
            this.isRequired.set(this.required());
        }, ...(ngDevMode ? [{ debugName: "requiredEffect" }] : []));
    }
    ngOnInit() {
        // works and should work only when NxRadioGroup component is used
        // RadioControlValueAccessor._checkName will set this.name === this.formControlName if name is not defined
        this.formControlName = this.formControlName || this.ngControl?.name;
        super.ngOnInit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: NxRadioComponent, isStandalone: true, selector: "nx-radio-v2", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxRadioComponent),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["radioInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: BaseComponent }], ngImport: i0, template: "<label>\n    <div class=\"input-body\"></div>\n    <div class=\"input-indicator\"></div>\n    <input\n        #radioInput\n        type=\"radio\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"isRequired()\"\n        [checked]=\"checked()\"\n        [name]=\"name || ''\"\n    />\n    <span class=\"input-content\"><ng-content></ng-content></span>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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-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);--invalid-color: var(--nxc-attention-red);--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: 22px;--input-width: 22px;--input-border-radius: 12px}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 3) )}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + .03) )}}: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{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}:host{--invalid-color-hover: hsl(from var(--invalid-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 + .03) )}}:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) )}@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;border-color:var(--unchecked-border-color)}:host .input-content{display:inline-block}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{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,:host:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label,:host:has(input[type=checkbox]:indeterminate) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body,:host:has(input[type=checkbox]:indeterminate):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label,:host:has(input[type=checkbox]:indeterminate):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body,:host:has(input[type=checkbox]:indeterminate):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label,:host:has(input[type=checkbox]:indeterminate):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body,:host:has(input[type=checkbox]:indeterminate):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{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):has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):active:has(input:checked) label,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) 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{position:absolute;left:0;width:var(--input-width);height:var(--input-height);border:1px 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:block;position:relative;height:100%}.input-content{padding-left:calc(var(--input-width) + 8px)}.input-content:empty{padding-left:0}.input-content{overflow-wrap:break-word;word-break:break-word;text-align:start}.input-content{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{--unchecked-indicator-color: transparent;--unchecked-indicator-color-hover: var(--nxc-dark6-offset, var(--nxc-dark6));--unchecked-indicator-color-active: transparent;--input-indicator-width: 10px}:host .input-indicator{transition:background-color .5s ease;background-color:var(--unchecked-indicator-color)}:host:hover .input-indicator{background-color:var(--unchecked-indicator-color-hover)}:host:active .input-indicator{background-color:var(--unchecked-indicator-color-active)}:host:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}:host:has(input:disabled) .input-indicator,:host:has(input:disabled):hover .input-indicator,:host:has(input:disabled):active .input-indicator{background-color:var(--unchecked-indicator-color)}:host:has(input:disabled):has(input:checked) .input-indicator,:host:has(input:disabled):hover:has(input:checked) .input-indicator,:host:has(input:disabled):active:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}.input-indicator{position:absolute;left:0;top:calc((var(--total-height) - var(--input-indicator-width)) / 2);width:var(--input-indicator-width);height:var(--input-indicator-width);border-radius:10px}.input-indicator{left:calc((var(--input-height) - var(--input-indicator-width)) / 2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxRadioComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-radio-v2', imports: [], hostDirectives: [BaseComponent], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxRadioComponent),
                            multi: true,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <div class=\"input-body\"></div>\n    <div class=\"input-indicator\"></div>\n    <input\n        #radioInput\n        type=\"radio\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"isRequired()\"\n        [checked]=\"checked()\"\n        [name]=\"name || ''\"\n    />\n    <span class=\"input-content\"><ng-content></ng-content></span>\n</label>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-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-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);--invalid-color: var(--nxc-attention-red);--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: 22px;--input-width: 22px;--input-border-radius: 12px}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:inline-block;min-width:var(--input-width);min-height:var(--total-height)}:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + 3) )}@supports (color: hsl(from red h s calc(l + 1%))){:host{--checked-color-hover: hsl(from var(--checked-color) h s calc(l + .03) )}}: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{--checked-color-active: hsl(from var(--checked-color) h s calc(l - 3%) )}}:host{--invalid-color-hover: hsl(from var(--invalid-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 + .03) )}}:host{--invalid-color-active: hsl(from var(--invalid-color) h s calc(l - 3) )}@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;border-color:var(--unchecked-border-color)}:host .input-content{display:inline-block}:host label{transition:color .5s ease;color:var(--text-color)}:host:hover .input-body{border-color:var(--unchecked-border-color-hover)}:host:hover label{color:var(--text-color-hover)}:host:active .input-body{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,:host:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:checked) label,:host:has(input[type=checkbox]:indeterminate) label{color:var(--text-checked-color)}:host:has(input:checked):hover .input-body,:host:has(input[type=checkbox]:indeterminate):hover .input-body{background-color:var(--checked-color-hover);border-color:var(--checked-color-hover)}:host:has(input:checked):hover label,:host:has(input[type=checkbox]:indeterminate):hover label{color:var(--text-checked-color-hover)}:host:has(input:checked):active .input-body,:host:has(input[type=checkbox]:indeterminate):active .input-body{background-color:var(--checked-color-active);border-color:var(--checked-color-active)}:host:has(input:checked):active label,:host:has(input[type=checkbox]:indeterminate):active label{color:var(--text-checked-color-active)}:host:has(input:checked):has(input:focus-visible) .input-body,:host:has(input[type=checkbox]:indeterminate):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{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):has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):hover:has(input:checked) .input-body,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) .input-body,:host:has(input:disabled):active:has(input:checked) .input-body,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) .input-body{background-color:var(--checked-color);border-color:var(--checked-color)}:host:has(input:disabled):has(input:checked) label,:host:has(input:disabled):has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):hover:has(input:checked) label,:host:has(input:disabled):hover:has(input[type=checkbox]:indeterminate) label,:host:has(input:disabled):active:has(input:checked) label,:host:has(input:disabled):active:has(input[type=checkbox]:indeterminate) 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{position:absolute;left:0;width:var(--input-width);height:var(--input-height);border:1px 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:block;position:relative;height:100%}.input-content{padding-left:calc(var(--input-width) + 8px)}.input-content:empty{padding-left:0}.input-content{overflow-wrap:break-word;word-break:break-word;text-align:start}.input-content{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{--unchecked-indicator-color: transparent;--unchecked-indicator-color-hover: var(--nxc-dark6-offset, var(--nxc-dark6));--unchecked-indicator-color-active: transparent;--input-indicator-width: 10px}:host .input-indicator{transition:background-color .5s ease;background-color:var(--unchecked-indicator-color)}:host:hover .input-indicator{background-color:var(--unchecked-indicator-color-hover)}:host:active .input-indicator{background-color:var(--unchecked-indicator-color-active)}:host:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}:host:has(input:disabled) .input-indicator,:host:has(input:disabled):hover .input-indicator,:host:has(input:disabled):active .input-indicator{background-color:var(--unchecked-indicator-color)}:host:has(input:disabled):has(input:checked) .input-indicator,:host:has(input:disabled):hover:has(input:checked) .input-indicator,:host:has(input:disabled):active:has(input:checked) .input-indicator{background-color:var(--checked-indicator-color)}.input-indicator{position:absolute;left:0;top:calc((var(--total-height) - var(--input-indicator-width)) / 2);width:var(--input-indicator-width);height:var(--input-indicator-width);border-radius:10px}.input-indicator{left:calc((var(--input-height) - var(--input-indicator-width)) / 2)}\n"] }]
        }] });

class NxRadioGroupComponent extends BaseControlValueAccessor {
    constructor() {
        super(...arguments);
        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.contentRadios = contentChildren(NxRadioComponent, ...(ngDevMode ? [{ debugName: "contentRadios" }] : []));
        this.changeEffect = effect(() => {
            // This does two things. Sets value for the control
            // And unchecks other radios in a group as a necessary side effect
            this.contentRadios().forEach((radio) => {
                radio.registerOnChange(value => {
                    this.onChange(value);
                    this.onTouched();
                    return {};
                });
            });
        }, ...(ngDevMode ? [{ debugName: "changeEffect" }] : []));
        this.requiredEffect = effect(() => {
            const isRequired = this.required();
            // content children radios have to be manually set to be required to have radio validity
            this.contentRadios().forEach((radio, ind) => {
                radio.setRequiredState(isRequired);
            });
        }, ...(ngDevMode ? [{ debugName: "requiredEffect" }] : []));
        this.disabledEffect = effect(() => {
            // component input changed value
            this.isDisabled.set(this.disabled());
        }, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
        this.disabledStateEffect = effect(() => {
            // component input or form control changed value
            const disabled = this.isDisabled();
            // content children radios have to be manually set to be disabled/enabled
            this.contentRadios().forEach(radio => {
                radio.setDisabledState(disabled);
            });
        }, ...(ngDevMode ? [{ debugName: "disabledStateEffect" }] : []));
    }
    writeValue(value) {
        super.writeValue(value);
        this.contentRadios().forEach((radio) => {
            radio.writeValue(value);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: NxRadioGroupComponent, isStandalone: true, selector: "nx-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxRadioGroupComponent),
                multi: true,
            },
        ], queries: [{ propertyName: "contentRadios", predicate: NxRadioComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{margin:0;padding:0;display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxRadioGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-radio-group', template: '<ng-content></ng-content>', standalone: true, host: {
                        role: 'radiogroup',
                    }, imports: [], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxRadioGroupComponent),
                            multi: true,
                        },
                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{margin:0;padding:0;display:flex;flex-direction:column}\n"] }]
        }] });

class NxModalComponent extends BaseComponent {
    onDialogClose() {
        // handling of the native behavior on ESC key press. Sync props state with the dialog state
        this.close();
        // inform parent that the component was closed
        this.onClose.emit(true);
    }
    constructor() {
        super();
        this.dialogElement = inject((ElementRef));
        this.nxDialogOpen = model(false, ...(ngDevMode ? [{ debugName: "nxDialogOpen" }] : []));
        this.hideClose = input(false, ...(ngDevMode ? [{ debugName: "hideClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        this.onClose = output();
        this.close = () => {
            this.nxDialogOpen.set(false);
        };
        let skipOnCloseEffectOnce = true;
        effect(() => {
            const dialogOpened = this.nxDialogOpen();
            // I use js show/hide method to have backdrop.
            // If I use open attribute - the backdrop is absent
            if (dialogOpened) {
                this.dialogElement.nativeElement.showModal();
            }
            else {
                // do this to avoid onClose emmit when dialog is initialized
                // in a closed state
                if (skipOnCloseEffectOnce) {
                    return;
                }
                this.dialogElement.nativeElement.close();
            }
            skipOnCloseEffectOnce = false;
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxModalComponent, isStandalone: true, selector: "dialog[nx-modal]", inputs: { nxDialogOpen: { classPropertyName: "nxDialogOpen", publicName: "nxDialogOpen", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nxDialogOpen: "nxDialogOpenChange", onClose: "onClose" }, host: { listeners: { "close": "onDialogClose()" }, properties: { "style.display": "nxDialogOpen() ? \"\" : \"none\"" } }, usesInheritance: true, ngImport: i0, template: "@if (!hideClose()) {\n    <button\n        nx-button\n        appearance=\"text\"\n        (click)=\"close()\"\n        class=\"modal__button-x\"\n    >\n        <nx-icon\n            preserveSize\n            useCurrentColor\n            icon=\"CloseMedium\"\n        ></nx-icon>\n    </button>\n}\n\n<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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host::backdrop{background-color:#00000080}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{position:fixed;border:0;border-radius:6px;padding:30px;width:400px;min-width:320px;background:var(--nxc-dark3-offset, var(--nxc-dark3));box-shadow:0 4px 24px hsla(from var(--nxc-dark1-offset, var(--nxc-dark1)) h s l/.1)}:host .modal__button-x{position:absolute;top:10px;right:10px}:host .modal__button-x nx-icon{color:var(--nxc-light10-offset, var(--nxc-light10))}:host .modal__button-x nx-icon:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6))}:host .modal__button-x nx-icon:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6))}:host .modal__button-x nx-icon:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host .modal__button-x nx-icon:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + .06))}:host .modal__button-x nx-icon:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + .06))}:host .modal__button-x nx-icon:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l - 3%))}}\n"], dependencies: [{ 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: "20.1.6", ngImport: i0, type: NxModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'dialog[nx-modal]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                        '[style.display]': 'nxDialogOpen() ? "" : "none"',
                    }, imports: [NxButtonComponent, NxIconComponent], template: "@if (!hideClose()) {\n    <button\n        nx-button\n        appearance=\"text\"\n        (click)=\"close()\"\n        class=\"modal__button-x\"\n    >\n        <nx-icon\n            preserveSize\n            useCurrentColor\n            icon=\"CloseMedium\"\n        ></nx-icon>\n    </button>\n}\n\n<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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host::backdrop{background-color:#00000080}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{position:fixed;border:0;border-radius:6px;padding:30px;width:400px;min-width:320px;background:var(--nxc-dark3-offset, var(--nxc-dark3));box-shadow:0 4px 24px hsla(from var(--nxc-dark1-offset, var(--nxc-dark1)) h s l/.1)}:host .modal__button-x{position:absolute;top:10px;right:10px}:host .modal__button-x nx-icon{color:var(--nxc-light10-offset, var(--nxc-light10))}:host .modal__button-x nx-icon:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6))}:host .modal__button-x nx-icon:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + 6))}:host .modal__button-x nx-icon:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host .modal__button-x nx-icon:hover:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + .06))}:host .modal__button-x nx-icon:focus-visible:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l + .06))}:host .modal__button-x nx-icon:active:not([disabled]):not([aria-disabled=true]){color:hsl(from var(--nxc-light10-offset, var(--nxc-light10)) h s calc(l - 3%))}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { onDialogClose: [{
                type: HostListener,
                args: ['close']
            }] } });

/** Details component that mimics the native <detail> element with additional stylings */
class NxDetailsComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: NxDetailsComponent, isStandalone: true, selector: "details[nx-details]", ngImport: i0, template: "<ng-content></ng-content>\n<nx-icon\n    icon=\"ArrowDown20X20\"\n    class=\"arrow-icon\"\n    useCurrentColor\n/>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host ::ng-deep summary::marker{content:none}:host ::ng-deep summary:before,:host ::ng-deep summary:after{content:\"\"}:host ::ng-deep summary{list-style:none}:host{overflow:hidden;position:relative;interpolate-size:allow-keywords;background:var(--nxc-dark2-offset, var(--nxc-dark2));border-radius:7px;border-width:1px;border-style:solid}:host:not([open]){border-color:var(--nxc-dark3-offset, var(--nxc-dark3))}:host:not([open]):hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 3))}:host:not([open]):focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 3))}:host:not([open]):active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:not([open]):hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .03))}:host:not([open]):focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .03))}:host:not([open]):active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3%))}}:host[open]{border-color:var(--nxc-dark3-offset, var(--nxc-dark3))}:host{--nxc-details-16-24: clamp(16px, 4px + 2cqi, 24px)}:host::details-content{padding:0 var(--nxc-details-16-24);block-size:0;content-visibility:visible!important;visibility:hidden}@supports (interpolate-size: allow-keywords){:host::details-content{transition:block-size .3s ease-in-out,padding .3s ease-in-out,visibility 0s ease .3s}}:host .arrow-icon{height:24px;width:24px;pointer-events:none;color:var(--nxc-light10-offset, var(--nxc-light10));transition:transform .3s ease-in-out,color .3s ease-in-out;position:absolute;top:var(--nxc-details-16-24);right:var(--nxc-details-16-24);visibility:visible}:host ::ng-deep summary{cursor:pointer;border-radius:6px;padding:var(--nxc-details-16-24);transition:color .3s ease-in-out;color:var(--nxc-light10-offset, var(--nxc-light10));line-height:24px}:host ::ng-deep summary{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 ::ng-deep summary{background:var(--nxc-dark2-offset, var(--nxc-dark2))}:host ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + 6))}:host ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + 6))}@supports (color: hsl(from red h s calc(l + 1%))){:host ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + .06))}:host ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + .06))}}:host[open] ::ng-deep summary{color:var(--nxc-light4-offset, var(--nxc-light4))}:host[open] ::ng-deep summary{background:var(--nxc-dark4-offset, var(--nxc-dark4))}:host[open] ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host[open] ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}@supports (color: hsl(from red h s calc(l + 1%))){:host[open] ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host[open] ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}}:host[open]::details-content{block-size:auto;padding:var(--nxc-details-16-24);visibility:visible}@supports (interpolate-size: allow-keywords){:host[open]::details-content{transition:block-size .3s ease-in-out,padding .3s ease-in-out}}:host[open] .arrow-icon{transform:rotate(180deg);color:var(--nxc-light4-offset, var(--nxc-light4))}:host:has(+details[nx-details]){border-bottom-left-radius:0;border-bottom-right-radius:0}:host:has(+details[nx-details]) ::ng-deep summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host:has(+details[nx-details])::details-content{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep+details[nx-details]{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep+details[nx-details] ::ng-deep summary{border-top-left-radius:0;border-top-right-radius:0}\n"], dependencies: [{ kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'details[nx-details]', imports: [NxIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<nx-icon\n    icon=\"ArrowDown20X20\"\n    class=\"arrow-icon\"\n    useCurrentColor\n/>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host ::ng-deep summary::marker{content:none}:host ::ng-deep summary:before,:host ::ng-deep summary:after{content:\"\"}:host ::ng-deep summary{list-style:none}:host{overflow:hidden;position:relative;interpolate-size:allow-keywords;background:var(--nxc-dark2-offset, var(--nxc-dark2));border-radius:7px;border-width:1px;border-style:solid}:host:not([open]){border-color:var(--nxc-dark3-offset, var(--nxc-dark3))}:host:not([open]):hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 3))}:host:not([open]):focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 3))}:host:not([open]):active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:not([open]):hover:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .03))}:host:not([open]):focus-visible:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .03))}:host:not([open]):active:not([disabled]):not([aria-disabled=true]){border-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3%))}}:host[open]{border-color:var(--nxc-dark3-offset, var(--nxc-dark3))}:host{--nxc-details-16-24: clamp(16px, 4px + 2cqi, 24px)}:host::details-content{padding:0 var(--nxc-details-16-24);block-size:0;content-visibility:visible!important;visibility:hidden}@supports (interpolate-size: allow-keywords){:host::details-content{transition:block-size .3s ease-in-out,padding .3s ease-in-out,visibility 0s ease .3s}}:host .arrow-icon{height:24px;width:24px;pointer-events:none;color:var(--nxc-light10-offset, var(--nxc-light10));transition:transform .3s ease-in-out,color .3s ease-in-out;position:absolute;top:var(--nxc-details-16-24);right:var(--nxc-details-16-24);visibility:visible}:host ::ng-deep summary{cursor:pointer;border-radius:6px;padding:var(--nxc-details-16-24);transition:color .3s ease-in-out;color:var(--nxc-light10-offset, var(--nxc-light10));line-height:24px}:host ::ng-deep summary{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 ::ng-deep summary{background:var(--nxc-dark2-offset, var(--nxc-dark2))}:host ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + 6))}:host ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + 6))}@supports (color: hsl(from red h s calc(l + 1%))){:host ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + .06))}:host ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark2-offset, var(--nxc-dark2)) h s calc(l + .06))}}:host[open] ::ng-deep summary{color:var(--nxc-light4-offset, var(--nxc-light4))}:host[open] ::ng-deep summary{background:var(--nxc-dark4-offset, var(--nxc-dark4))}:host[open] ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host[open] ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}@supports (color: hsl(from red h s calc(l + 1%))){:host[open] ::ng-deep summary:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host[open] ::ng-deep summary:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}}:host[open]::details-content{block-size:auto;padding:var(--nxc-details-16-24);visibility:visible}@supports (interpolate-size: allow-keywords){:host[open]::details-content{transition:block-size .3s ease-in-out,padding .3s ease-in-out}}:host[open] .arrow-icon{transform:rotate(180deg);color:var(--nxc-light4-offset, var(--nxc-light4))}:host:has(+details[nx-details]){border-bottom-left-radius:0;border-bottom-right-radius:0}:host:has(+details[nx-details]) ::ng-deep summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host:has(+details[nx-details])::details-content{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep+details[nx-details]{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep+details[nx-details] ::ng-deep summary{border-top-left-radius:0;border-top-right-radius:0}\n"] }]
        }] });

var DividerOrientation;
(function (DividerOrientation) {
    DividerOrientation["HORIZONTAL"] = "horizontal";
    DividerOrientation["VERTICAL"] = "vertical";
})(DividerOrientation || (DividerOrientation = {}));
/** Stylized divider for context menu items */
class NxDividerComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /** Whether the divider should have interactive styling */
        this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /** The orientation of the divider - horizontal or vertical */
        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
        /** The color of the divider from the common colors palette */
        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
        this.colorVar = computed(() => {
            const color = this.color();
            return color ? `var(${this.color()})` : '';
        }, ...(ngDevMode ? [{ debugName: "colorVar" }] : []));
        this.vertical = DividerOrientation.VERTICAL;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxDividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxDividerComponent, isStandalone: true, selector: "nx-divider", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.horizontal": "orientation() !== vertical", "class.vertical": "orientation() === vertical", "class.interactive": "interactive()", "style.--nx-divider-color": "colorVar()" } }, usesInheritance: true, ngImport: i0, template: '<hr/>', isInline: true, styles: [":host{box-sizing:border-box;--nx-divider-border-color: var(--nx-divider-color, var(--nxc-light8-offset, var(--nxc-light8)))}:host hr{height:0;width:0;margin:0;border:none;--border-config: 1px solid var(--nx-divider-border-color)}:host.horizontal hr{width:100%;padding:.5px 0 0;margin:-.5px 0 0;border-bottom:var(--border-config)}:host.vertical{vertical-align:middle}:host.vertical hr{height:100%;padding:0 .5px;margin:0 -.5px 0 0;border-right:var(--border-config)}:host.interactive{--nx-divider-border-color: var(--nx-divider-color)}:host.interactive:hover:not([disabled]):not([aria-disabled=true]){--nx-divider-border-color: hsl(from var(--nx-divider-color) h s calc(l + 6) )}@supports (color: hsl(from red h s calc(l + 1%))){:host.interactive:hover:not([disabled]):not([aria-disabled=true]){--nx-divider-border-color: hsl(from var(--nx-divider-color) h s calc(l + .06) )}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxDividerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-divider', template: '<hr/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class.horizontal]': 'orientation() !== vertical',
                        '[class.vertical]': 'orientation() === vertical',
                        '[class.interactive]': 'interactive()',
                        '[style.--nx-divider-color]': 'colorVar()',
                    }, styles: [":host{box-sizing:border-box;--nx-divider-border-color: var(--nx-divider-color, var(--nxc-light8-offset, var(--nxc-light8)))}:host hr{height:0;width:0;margin:0;border:none;--border-config: 1px solid var(--nx-divider-border-color)}:host.horizontal hr{width:100%;padding:.5px 0 0;margin:-.5px 0 0;border-bottom:var(--border-config)}:host.vertical{vertical-align:middle}:host.vertical hr{height:100%;padding:0 .5px;margin:0 -.5px 0 0;border-right:var(--border-config)}:host.interactive{--nx-divider-border-color: var(--nx-divider-color)}:host.interactive:hover:not([disabled]):not([aria-disabled=true]){--nx-divider-border-color: hsl(from var(--nx-divider-color) h s calc(l + 6) )}@supports (color: hsl(from red h s calc(l + 1%))){:host.interactive:hover:not([disabled]):not([aria-disabled=true]){--nx-divider-border-color: hsl(from var(--nx-divider-color) h s calc(l + .06) )}}\n"] }]
        }] });

/**
 * Directive that handles positioning of submenus relative to their parent menu items.
 *
 * This directive automatically calculates and applies CSS classes to position submenus
 * based on their spatial relationship to the parent menu element. It ensures submenus
 * are positioned optimally within the viewport.
 *
 * The directive integrates with Angular CDK Menu system to automatically clean up
 * positioning classes when the submenu is closed.
 *
 * @example
 * ```html
 * <div class="submenu" [nxSubmenuPositionParent]="parentMenuRef">
 *   <!-- submenu content -->
 * </div>
 * ```
 */
class NxSubmenuPositionDirective {
    constructor() {
        /** Reference to the submenu element that this directive is attached to */
        this.subMenuElement = inject((ElementRef)).nativeElement;
        /** Angular renderer service for DOM manipulation */
        this.renderer = inject(Renderer2);
        /**
         * CDK Menu Trigger instance for the submenu.
         * This is used to listen for menu close events and automatically clean up
         * positioning classes when the submenu is closed.
         *
         * @private
         * @readonly
         */
        this.cdkMenuTrigger = inject(CdkMenuTrigger);
        /**
         * Required input that specifies the parent menu element reference.
         * The submenu will be positioned relative to this element.
         */
        this.nxSubmenuPositionParent = input.required(...(ngDevMode ? [{ debugName: "nxSubmenuPositionParent" }] : []));
        /**
         * Automatically subscribes to the CDK menu trigger's closed observable to
         * clean up parent positioning classes when the submenu is closed. This ensures
         * that positioning styles don't persist after the submenu is no longer visible.
         */
        this.menuClosedSub = this.cdkMenuTrigger.closed
            .pipe(takeUntilDestroyed())
            .subscribe(() => {
            const parentElement = this.nxSubmenuPositionParent()?.nativeElement;
            if (parentElement) {
                this.clearPositionClasses(parentElement, 'par-');
            }
        });
        /**
         * Effect that runs when the parent element changes and updates submenu positioning
         */
        this.subMenuOpenEffect = effect(() => {
            const parentElement = this.nxSubmenuPositionParent();
            if (parentElement?.nativeElement && this.subMenuElement) {
                this.updateSubmenuPosition();
            }
        }, ...(ngDevMode ? [{ debugName: "subMenuOpenEffect" }] : []));
    }
    /**
     * Calculates corner position classes based on the spatial relationship between two rectangles.
     *
     * @param primaryRect - The primary element's bounding rectangle
     * @param secondaryRect - The secondary element's bounding rectangle
     * @returns Array of corner position class names (combinations of 't'/'b' and 'l'/'r')
     */
    getCornerClasses(primaryRect, secondaryRect) {
        const horizontalPositions = [];
        const verticalPositions = [];
        // Determine horizontal relationship
        if (primaryRect.right <= secondaryRect.left) {
            horizontalPositions.push('r');
        }
        if (primaryRect.left >= secondaryRect.right) {
            horizontalPositions.push('l');
        }
        // Determine vertical relationship
        if (primaryRect.top >= secondaryRect.top) {
            verticalPositions.push('t');
        }
        if (primaryRect.bottom <= secondaryRect.bottom) {
            verticalPositions.push('b');
        }
        // Combine vertical and horizontal positions to create corner classes
        return verticalPositions.flatMap(vertical => horizontalPositions.map(horizontal => `${vertical}${horizontal}`));
    }
    /**
     * Updates the position of the submenu by calculating spatial relationships
     * and applying appropriate CSS classes to both parent and submenu elements.
     *
     * Uses a timeout to ensure DOM updates and style applications are complete
     * before calculating positions.
     */
    updateSubmenuPosition() {
        // Small timeout ensures DOM updates and styles are fully applied
        setTimeout(() => {
            const parentMenuElement = this.nxSubmenuPositionParent().nativeElement;
            const submenuElement = this.subMenuElement;
            if (!parentMenuElement || !submenuElement) {
                return;
            }
            const parentRect = parentMenuElement.getBoundingClientRect();
            const submenuRect = submenuElement.getBoundingClientRect();
            // Calculate position classes for both elements
            const parentPositionClasses = this.getCornerClasses(parentRect, submenuRect);
            const submenuPositionClasses = this.getCornerClasses(submenuRect, parentRect);
            // Clear existing position classes
            this.clearPositionClasses(parentMenuElement, 'par-');
            this.clearPositionClasses(submenuElement, 'sub-');
            // Apply new position classes
            this.applyPositionClasses(parentMenuElement, 'par-', parentPositionClasses);
            this.applyPositionClasses(submenuElement, 'sub-', submenuPositionClasses);
        });
    }
    /**
     * Removes all position-related CSS classes from an element.
     *
     * @param element - The DOM element to clear classes from
     * @param prefix - Classes prefix to remove
     * @param positions - Array of corner positions to apply. Defaults to all positions `['tr', 'tl', 'br', 'bl']`
     */
    clearPositionClasses(element, prefix, positions = ['tr', 'tl', 'br', 'bl']) {
        positions.forEach(position => this.renderer.removeClass(element, `${prefix}${position}`));
    }
    /**
     * Applies position CSS classes to an element with the specified prefix.
     *
     * @param element - The DOM element to apply classes to
     * @param prefix - The CSS class prefix to use ('sub-' or 'par-')
     * @param positions - Array of corner positions to apply
     */
    applyPositionClasses(element, prefix, positions) {
        positions.forEach(position => {
            this.renderer.addClass(element, `${prefix}${position}`);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmenuPositionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: NxSubmenuPositionDirective, isStandalone: true, selector: "[nxSubmenuPositionParent]", inputs: { nxSubmenuPositionParent: { classPropertyName: "nxSubmenuPositionParent", publicName: "nxSubmenuPositionParent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSubmenuPositionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxSubmenuPositionParent]',
                }]
        }] });

/** Context menu component for displaying hierarchical menu items */
class NxContextMenuComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /** Array of menu items to display or factory function */
        this.menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : []));
        /** Context object passed to menu item actions */
        this.context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : []));
        /** Text size for menu items */
        this.size = input('14pt', ...(ngDevMode ? [{ debugName: "size" }] : []));
        /** Signal containing the processed menu items */
        this.menu = signal([], ...(ngDevMode ? [{ debugName: "menu" }] : []));
        /** Reference to the menu element in the DOM */
        this.menuElement = inject(ElementRef);
    }
    /**
     * Initializes the component by processing menu items.
     * If menuItems is a factory function, it will be called with the context.
     * Supports both synchronous and asynchronous menu item factories.
     */
    async ngOnInit() {
        const menuItems = this.menuItems();
        const context = this.context();
        if (typeof menuItems === 'function') {
            if (context) {
                const menu = menuItems(context);
                if (Array.isArray(menu)) {
                    this.menu.set(menu);
                }
                else {
                    const menuResult = await menu;
                    if (menuResult) {
                        this.menu.set(menuResult);
                    }
                }
            }
        }
        else {
            this.menu.set(menuItems);
        }
    }
    /** Handles click events on menu items */
    handleItemClick(item, event) {
        if (item.action && !item.disabled?.()) {
            event.stopPropagation();
            item.action(event, this.context());
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxContextMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxContextMenuComponent, isStandalone: true, selector: "nx-context-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "$event.preventDefault()" }, properties: { "class.size-16": "size() === '16pt'" } }, usesInheritance: true, ngImport: i0, template: "<div cdkMenu>\n    @for (item of menu(); track $index) {\n        @if (item.name === 'divider') {\n            <nx-divider color=\"--nxc-dark12\"></nx-divider>\n        } @else if (item.subMenu && !item.disabled?.()) {\n            <button\n                cdkMenuItem\n                [cdkMenuTriggerFor]=\"subMenu\"\n            >\n                <span>{{ item.name }}</span>\n                <nx-icon\n                    icon=\"ArrowRight16X16\"\n                    preserveSize\n                    useCurrentColor\n                ></nx-icon>\n            </button>\n            <ng-template #subMenu>\n                @if (!!item.subMenu) {\n                    <nx-context-menu\n                        [nxSubmenuPositionParent]=\"menuElement\"\n                        [menuItems]=\"item.subMenu\"\n                        [context]=\"context()\"\n                        [size]=\"size()\"\n                    />\n                }\n            </ng-template>\n        } @else if (!item.subMenu && item.action && item.name && !item.disabled?.()) {\n            <button\n                cdkMenuItem\n                (click)=\"handleItemClick(item, $event)\"\n                [ngClass]=\"{ checked: item.checked?.() }\"\n            >\n                <span>{{ item.name }}</span>\n                @if (item.checked?.()) {\n                    <nx-icon\n                        icon=\"Check20X20\"\n                        preserveSize\n                        useCurrentColor\n                    ></nx-icon>\n                }\n            </button>\n        } @else if (item.disabled?.()) {\n            <button\n                disabled\n                cdkMenuItem\n            >\n                <span>{{ item.name }}</span>\n            </button>\n        }\n    }\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{border-radius:6px;background-color:var(--nxc-dark10-offset, var(--nxc-dark10));box-shadow:0 4px 24px #0000001a;padding:6px 0;margin:-6px 0 0}:host.par-tr,:host.sub-tr{border-top-right-radius:0}:host.par-tl,:host.sub-tl{border-top-left-radius:0}:host.par-br,:host.sub-br{border-bottom-right-radius:0}:host.par-bl,:host.sub-bl{border-bottom-left-radius:0}:host nx-divider{padding:6px 16px}:host [cdkMenu]{display:flex;flex-direction:column;min-width:140px}:host [cdkMenuItem]{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;min-height:29px;padding:4px 16px;border-width:0;border-radius:0}:host [cdkMenuItem]:not(:has(nx-icon)){padding:4px 44px 4px 16px}:host [cdkMenuItem] span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:80px}:host [cdkMenuItem]{color:var(--nxc-light4-offset, var(--nxc-light4));background-color:var(--nxc-dark10-offset, var(--nxc-dark10));text-align:left}:host [cdkMenuItem]{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 [cdkMenuItem].checked{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)}:host [cdkMenuItem]:not(:disabled):hover{outline:0;border-color:transparent;background-color:var(--nxc-dark12-offset, var(--nxc-dark12));color:var(--nxc-light4-offset, var(--nxc-light4));border-radius:0;cursor:pointer}:host [cdkMenuItem]:not(:disabled):focus{outline:none;border-color:transparent;border-radius:0}:host [cdkMenuItem]:not(:disabled):focus-visible{outline-offset:-2px;outline-width:1px;border-color:transparent;border-radius:0}:host [cdkMenuItem]:disabled{opacity:.3}:host.size-16 [cdkMenuItem]{min-height:32px}:host.size-16 [cdkMenuItem]{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.size-16 [cdkMenuItem].checked{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)}\n"], dependencies: [{ kind: "component", type: NxContextMenuComponent, selector: "nx-context-menu", inputs: ["menuItems", "context", "size"] }, { 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: NxSubmenuPositionDirective, selector: "[nxSubmenuPositionParent]", inputs: ["nxSubmenuPositionParent"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: NxDividerComponent, selector: "nx-divider", inputs: ["interactive", "orientation", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxContextMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-context-menu', imports: [
                        CommonModule,
                        NxIconComponent,
                        NxSubmenuPositionDirective,
                        CdkMenu,
                        CdkMenuItem,
                        CdkMenuTrigger,
                        NxDividerComponent,
                    ], host: {
                        '(mousedown)': '$event.preventDefault()',
                        '[class.size-16]': "size() === '16pt'",
                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div cdkMenu>\n    @for (item of menu(); track $index) {\n        @if (item.name === 'divider') {\n            <nx-divider color=\"--nxc-dark12\"></nx-divider>\n        } @else if (item.subMenu && !item.disabled?.()) {\n            <button\n                cdkMenuItem\n                [cdkMenuTriggerFor]=\"subMenu\"\n            >\n                <span>{{ item.name }}</span>\n                <nx-icon\n                    icon=\"ArrowRight16X16\"\n                    preserveSize\n                    useCurrentColor\n                ></nx-icon>\n            </button>\n            <ng-template #subMenu>\n                @if (!!item.subMenu) {\n                    <nx-context-menu\n                        [nxSubmenuPositionParent]=\"menuElement\"\n                        [menuItems]=\"item.subMenu\"\n                        [context]=\"context()\"\n                        [size]=\"size()\"\n                    />\n                }\n            </ng-template>\n        } @else if (!item.subMenu && item.action && item.name && !item.disabled?.()) {\n            <button\n                cdkMenuItem\n                (click)=\"handleItemClick(item, $event)\"\n                [ngClass]=\"{ checked: item.checked?.() }\"\n            >\n                <span>{{ item.name }}</span>\n                @if (item.checked?.()) {\n                    <nx-icon\n                        icon=\"Check20X20\"\n                        preserveSize\n                        useCurrentColor\n                    ></nx-icon>\n                }\n            </button>\n        } @else if (item.disabled?.()) {\n            <button\n                disabled\n                cdkMenuItem\n            >\n                <span>{{ item.name }}</span>\n            </button>\n        }\n    }\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{border-radius:6px;background-color:var(--nxc-dark10-offset, var(--nxc-dark10));box-shadow:0 4px 24px #0000001a;padding:6px 0;margin:-6px 0 0}:host.par-tr,:host.sub-tr{border-top-right-radius:0}:host.par-tl,:host.sub-tl{border-top-left-radius:0}:host.par-br,:host.sub-br{border-bottom-right-radius:0}:host.par-bl,:host.sub-bl{border-bottom-left-radius:0}:host nx-divider{padding:6px 16px}:host [cdkMenu]{display:flex;flex-direction:column;min-width:140px}:host [cdkMenuItem]{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;min-height:29px;padding:4px 16px;border-width:0;border-radius:0}:host [cdkMenuItem]:not(:has(nx-icon)){padding:4px 44px 4px 16px}:host [cdkMenuItem] span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:80px}:host [cdkMenuItem]{color:var(--nxc-light4-offset, var(--nxc-light4));background-color:var(--nxc-dark10-offset, var(--nxc-dark10));text-align:left}:host [cdkMenuItem]{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 [cdkMenuItem].checked{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)}:host [cdkMenuItem]:not(:disabled):hover{outline:0;border-color:transparent;background-color:var(--nxc-dark12-offset, var(--nxc-dark12));color:var(--nxc-light4-offset, var(--nxc-light4));border-radius:0;cursor:pointer}:host [cdkMenuItem]:not(:disabled):focus{outline:none;border-color:transparent;border-radius:0}:host [cdkMenuItem]:not(:disabled):focus-visible{outline-offset:-2px;outline-width:1px;border-color:transparent;border-radius:0}:host [cdkMenuItem]:disabled{opacity:.3}:host.size-16 [cdkMenuItem]{min-height:32px}:host.size-16 [cdkMenuItem]{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.size-16 [cdkMenuItem].checked{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)}\n"] }]
        }] });

class NxItemContainerComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
                transform: booleanAttribute,
            }]));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxItemContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxItemContainerComponent, isStandalone: true, selector: "[nx-item-container]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0" } }, 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{box-sizing:border-box;display:flex;width:fit-content;justify-content:center;align-items:center;min-height:114px;min-width:292px;padding:20px;text-decoration:none;color:unset;border-radius:8px;box-shadow:0 1px 3px 0 var(--nxc-dark3-offset, var(--nxc-dark3)),0 1px 2px 0 var(--nxc-dark3-offset, var(--nxc-dark3))}:host{background:var(--nxc-dark5-offset, var(--nxc-dark5))}:host:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3%))}}:host[aria-disabled=true]{opacity:.3;pointer-events:none;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxItemContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: '[nx-item-container]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], host: {
                        '[attr.aria-disabled]': 'disabled()',
                        '[attr.tabindex]': 'disabled() ? -1 : 0',
                    }, 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{box-sizing:border-box;display:flex;width:fit-content;justify-content:center;align-items:center;min-height:114px;min-width:292px;padding:20px;text-decoration:none;color:unset;border-radius:8px;box-shadow:0 1px 3px 0 var(--nxc-dark3-offset, var(--nxc-dark3)),0 1px 2px 0 var(--nxc-dark3-offset, var(--nxc-dark3))}:host{background:var(--nxc-dark5-offset, var(--nxc-dark5))}:host:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:active:not([disabled]):not([aria-disabled=true]){background:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3%))}}:host[aria-disabled=true]{opacity:.3;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
        }] });

/**
 * Highlights text content that matches its search input using the [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API)
 */
class NxSearchHighlightComponent {
    constructor() {
        this.host = inject((ElementRef)); // Need to grab the HTML Element to get the textNodes for Range
        this.search = input('', ...(ngDevMode ? [{ debugName: "search" }] : []));
        // TODO: Figure out how to use custom Regex Flags
        this.regexFlags = 'gi'; // 'g' is required for .matchAll()
        this.highlightName = 'nx-highlight';
        this.currentTextContent = signal('', ...(ngDevMode ? [{ debugName: "currentTextContent" }] : []));
        this.previousTextContent = '';
        this.previousSearch = '';
        this.mutationObserver = null;
        this.activeRanges = [];
        this.updateHighlights = effect(() => {
            const search = this.search();
            if (!search || !this.host.nativeElement.textContent || !CSS.highlights) {
                if (!search) {
                    this.removeThisInstanceRanges();
                    this.previousSearch = '';
                    this.previousTextContent = '';
                }
                return;
            }
            const currentTextContent = this.currentTextContent();
            const textChanged = currentTextContent !== this.previousTextContent;
            if (this.searchChanged(search) || textChanged) {
                queueMicrotask(() => {
                    this.removeThisInstanceRanges();
                    this.applyHighlight(search);
                    this.previousSearch = search;
                    this.previousTextContent = currentTextContent;
                });
            }
        }, ...(ngDevMode ? [{ debugName: "updateHighlights" }] : []));
    }
    ngAfterViewInit() {
        // Reapply highlights if the element changes
        this.mutationObserver = new MutationObserver(() => {
            this.currentTextContent.set(this.host.nativeElement.textContent || '');
        });
        this.mutationObserver.observe(this.host.nativeElement, {
            childList: true,
            subtree: true,
            characterData: true,
        });
        this.currentTextContent.set(this.host.nativeElement.textContent || '');
    }
    ngOnDestroy() {
        if (this.mutationObserver) {
            this.mutationObserver.disconnect();
        }
        this.removeThisInstanceRanges();
    }
    /** Rerenders highlights for current search and content
     *
     * Only use when needed. For example, CDK Virtual Scroll reuses DOM elements and causes Highlights to be out of sync
     */
    rerenderHighlights() {
        const search = this.search();
        queueMicrotask(() => {
            this.removeThisInstanceRanges();
            this.applyHighlight(search);
        });
    }
    searchChanged(currentSearch) {
        // Prevents infinite loop when search is a new RegExp instance but with the same pattern/flags
        const prev = this.previousSearch;
        return !(prev === currentSearch ||
            (prev instanceof RegExp &&
                currentSearch instanceof RegExp &&
                prev.source === currentSearch.source &&
                prev.flags === currentSearch.flags));
    }
    applyHighlight(search) {
        const element = this.host.nativeElement;
        const textNodes = [];
        this.collectTextNodes(element, textNodes);
        let fullText = '';
        // Keeps track of the start and end index of each textNode
        const nodePositions = [];
        for (const textNode of textNodes) {
            const content = textNode.textContent ?? '';
            nodePositions.push({
                node: textNode,
                start: fullText.length,
                end: fullText.length + content.length,
            });
            fullText += content; // "Combines" all textNodes into one string
        }
        // Ex: Host Element = `Hello <span>wor<em>ld,</em></span> <span> back in my day</span>`
        // The textNode positions would be: [0-6][6-9][9-12][12-21][12-29]
        // fullText: "Hello world, back in my day"
        this.activeRanges = []; // this is redundant. maybe remove?
        const regex = typeof search === 'string'
            ? new RegExp(`(${escapeRegExp(search)})`, this.regexFlags)
            : search;
        // Find all matches in the "fullText" and set Ranges based on the tracked textNode positions
        // Ex: "world, back" will match "world," and "back" at positions [13-17][6-12]
        for (const match of fullText.matchAll(regex)) {
            const matchStart = match.index;
            const matchEnd = matchStart + match[0].length;
            const startNodeInfo = nodePositions.find(pos => matchStart >= pos.start && matchStart < pos.end);
            const endNodeInfo = nodePositions.find(pos => matchEnd > pos.start && matchEnd <= pos.end);
            if (startNodeInfo && endNodeInfo) {
                const range = new Range();
                range.setStart(startNodeInfo.node, matchStart - startNodeInfo.start);
                range.setEnd(endNodeInfo.node, matchEnd - endNodeInfo.start);
                this.activeRanges.push(range);
            }
        }
        // this.activeRanges = ranges;
        // Add all matching Ranges to the Highlight object
        if (this.activeRanges.length > 0) {
            let highlight = CSS.highlights.get(this.highlightName);
            if (!highlight) {
                highlight = new Highlight();
                CSS.highlights.set(this.highlightName, highlight);
            }
            for (const range of this.activeRanges) {
                highlight.add(range);
            }
        }
    }
    // Recursively collect all textNodes in the host element
    collectTextNodes(node, textNodes) {
        if (node.nodeType === Node.TEXT_NODE) {
            textNodes.push(node);
        }
        else {
            for (let i = 0; i < node.childNodes.length; i++) {
                this.collectTextNodes(node.childNodes[i], textNodes);
            }
        }
    }
    removeThisInstanceRanges() {
        const existingHighlight = CSS.highlights.get(this.highlightName);
        if (!existingHighlight) {
            return;
        }
        for (const range of this.activeRanges) {
            if (existingHighlight.has(range)) {
                existingHighlight.delete(range);
            }
        }
        this.activeRanges = [];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSearchHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxSearchHighlightComponent, isStandalone: true, selector: "nx-search-highlight", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline}:host ::highlight(nx-highlight),:host::highlight(nx-highlight){color:var(--nxc-attention-yellow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSearchHighlightComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-search-highlight', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:inline}:host ::highlight(nx-highlight),:host::highlight(nx-highlight){color:var(--nxc-attention-yellow)}\n"] }]
        }] });

/**
 * A container component for buttons in nx-placeholder.
 * Provides flexible layout options (row or column) for action buttons.
 * Row layout is the default when column is not explicitly set.
 *
 * Row `default`
 * Display buttons in a row one next to the other
 * Will wrap into more rows if buttons do not fit
 * and align them in the center
 *
 * Column `nxColumn`
 * Display buttons in a vertical column layout.
 * Buttons will take full width and stack vertically.
 *
 * @example
 * ```html
 * <!-- Row layout (default) -->
 * <nx-placeholder-buttons>
 *   <button nx-button>Action 1</button>
 *   <button nx-button>Action 2</button>
 * </nx-placeholder-buttons>
 *
 * <!-- Column layout -->
 * <nx-placeholder-buttons nxColumn>
 *   <button nx-button>Action 1</button>
 *   <button nx-button>Action 2</button>
 * </nx-placeholder-buttons>
 * ```
 */
class NxPlaceholderButtonsComponent {
    constructor() {
        /**
         * Display buttons in a vertical column layout.
         * Buttons will take full width and stack vertically.
         */
        this.nxColumn = input(false, ...(ngDevMode ? [{ debugName: "nxColumn", transform: booleanAttribute }] : [{
                transform: booleanAttribute,
            }]));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaceholderButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxPlaceholderButtonsComponent, isStandalone: true, selector: "nx-placeholder-buttons", inputs: { nxColumn: { classPropertyName: "nxColumn", publicName: "nxColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nx-placeholder-buttons__column": "nxColumn()", "class.nx-placeholder-buttons__row": "!nxColumn()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host,:host *,:host :after,:host :before{box-sizing:border-box}:host.nx-placeholder-buttons__row,:host.nx-placeholder-buttons__column{display:flex;gap:12px;flex-wrap:wrap}:host.nx-placeholder-buttons__row{flex-direction:row;justify-content:center}:host.nx-placeholder-buttons__column{flex-direction:column;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaceholderButtonsComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, selector: 'nx-placeholder-buttons', template: '<ng-content></ng-content>', host: {
                        '[class.nx-placeholder-buttons__column]': 'nxColumn()',
                        '[class.nx-placeholder-buttons__row]': '!nxColumn()',
                    }, styles: [":host,:host *,:host :after,:host :before{box-sizing:border-box}:host.nx-placeholder-buttons__row,:host.nx-placeholder-buttons__column{display:flex;gap:12px;flex-wrap:wrap}:host.nx-placeholder-buttons__row{flex-direction:row;justify-content:center}:host.nx-placeholder-buttons__column{flex-direction:column;width:100%}\n"] }]
        }] });

/**
 * A text component for displaying styled text within nx-placeholder.
 * Provides consistent typography for titles and messages with appropriate styling.
 * Styles the text as a message if no input provided.
 *
 * Title text is displayed with larger, bold typography (heading20medium)
 * and uses the light4 color.
 *
 * Message text is displayed with regular typography (text16regular)
 * and uses the light12 color for secondary information.
 *
 * @example
 * ```html
 * <!-- Title text -->
 * <nx-placeholder-text nxTitle>
 *   This is a title
 * </nx-placeholder-text>
 *
 * <!-- Message text (default) -->
 * <nx-placeholder-text>
 *   This is a descriptive message
 * </nx-placeholder-text>
 * ```
 */
class NxPlaceholderTextComponent {
    constructor() {
        /**
         * Styles the text as a title and not a message.
         */
        this.nxTitle = input(false, ...(ngDevMode ? [{ debugName: "nxTitle", transform: booleanAttribute }] : [{
                transform: booleanAttribute,
            }]));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaceholderTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: NxPlaceholderTextComponent, isStandalone: true, selector: "nx-placeholder-text", inputs: { nxTitle: { classPropertyName: "nxTitle", publicName: "nxTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nx-placeholder-text__title": "nxTitle()", "class.nx-placeholder-text__message": "!nxTitle()" } }, 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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{text-align:center;text-wrap:balance;word-break:break-word}:host.nx-placeholder-text__title{color:var(--nxc-light4-offset, var(--nxc-light4))}:host.nx-placeholder-text__title{font-size:20px;line-height:25px;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)}:host.nx-placeholder-text__message{color:var(--nxc-light12-offset, var(--nxc-light12))}:host.nx-placeholder-text__message{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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaceholderTextComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, selector: 'nx-placeholder-text', template: '<ng-content></ng-content>', host: {
                        '[class.nx-placeholder-text__title]': 'nxTitle()',
                        '[class.nx-placeholder-text__message]': '!nxTitle()',
                    }, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{text-align:center;text-wrap:balance;word-break:break-word}:host.nx-placeholder-text__title{color:var(--nxc-light4-offset, var(--nxc-light4))}:host.nx-placeholder-text__title{font-size:20px;line-height:25px;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)}:host.nx-placeholder-text__message{color:var(--nxc-light12-offset, var(--nxc-light12))}:host.nx-placeholder-text__message{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)}\n"] }]
        }] });

class NxIsTemplatePipe {
    transform(value) {
        if (!value) {
            return false;
        }
        return value instanceof TemplateRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxIsTemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: NxIsTemplatePipe, isStandalone: true, name: "isTemplate" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxIsTemplatePipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'isTemplate',
                    standalone: true,
                }]
        }] });

class NxPlaceholderComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
        this.buttons = input(...(ngDevMode ? [undefined, { debugName: "buttons" }] : []));
        this.variant = input('none', ...(ngDevMode ? [{ debugName: "variant" }] : []));
        this.class = computed(() => `nx-placeholder__${this.isDefaultVariant() ? 'default' : this.variant()}`, ...(ngDevMode ? [{ debugName: "class" }] : []));
        this.isDefaultVariant = computed(() => !this.variant() || this.variant() === 'none', ...(ngDevMode ? [{ debugName: "isDefaultVariant" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaceholderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxPlaceholderComponent, isStandalone: true, selector: "nx-placeholder", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" } }, usesInheritance: true, ngImport: i0, template: "@if (icon(); as _icon) {\n    @if (_icon | isTemplate) {\n        <ng-container [ngTemplateOutlet]=\"_icon\"></ng-container>\n    } @else {\n        <nx-icon\n            class=\"nx-placeholder__variant\"\n            [icon]=\"_icon\"\n            [useCurrentColor]=\"!isDefaultVariant()\"\n            preserveSize\n        ></nx-icon>\n    }\n}\n\n@if (title() || message()) {\n    <span class=\"nx-placeholder__text\">\n        @if (title(); as _title) {\n            @if (_title | isTemplate) {\n                <ng-container [ngTemplateOutlet]=\"_title\"></ng-container>\n            } @else {\n                <nx-placeholder-text\n                    nxTitle\n                    class=\"nx-placeholder__variant\"\n                    >{{ _title }}</nx-placeholder-text\n                >\n            }\n        }\n        @if (message(); as _message) {\n            @if (_message | isTemplate) {\n                <ng-container [ngTemplateOutlet]=\"_message\"></ng-container>\n            } @else {\n                <nx-placeholder-text>{{ _message }}</nx-placeholder-text>\n            }\n        }\n    </span>\n}\n\n@if (buttons(); as _buttons) {\n    <ng-container [ngTemplateOutlet]=\"_buttons\"></ng-container>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}:host.nx-placeholder__error{--nxc-placeholder-accent-color: var(--nxc-attention-red)}:host.nx-placeholder__warning{--nxc-placeholder-accent-color: var(--nxc-attention-yellow)}:host.nx-placeholder__info{--nxc-placeholder-accent-color: var(--nxc-attention-blue)}:host.nx-placeholder__success{--nxc-placeholder-accent-color: var(--nxc-attention-green)}:host.nx-placeholder__error .nx-placeholder__variant{color:var(--nxc-placeholder-accent-color, var(--nxc-light4-offset, var(--nxc-light4)))}:host nx-icon.nx-placeholder__variant{color:var(--nxc-placeholder-accent-color)}:host .nx-placeholder__text{display:flex;gap:12px;flex-direction:column}\n"], dependencies: [{ kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxPlaceholderTextComponent, selector: "nx-placeholder-text", inputs: ["nxTitle"] }, { kind: "pipe", type: NxIsTemplatePipe, name: "isTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxPlaceholderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                        '[class]': 'class()',
                    }, imports: [NxIconComponent, NgTemplateOutlet, NxIsTemplatePipe, NxPlaceholderTextComponent], template: "@if (icon(); as _icon) {\n    @if (_icon | isTemplate) {\n        <ng-container [ngTemplateOutlet]=\"_icon\"></ng-container>\n    } @else {\n        <nx-icon\n            class=\"nx-placeholder__variant\"\n            [icon]=\"_icon\"\n            [useCurrentColor]=\"!isDefaultVariant()\"\n            preserveSize\n        ></nx-icon>\n    }\n}\n\n@if (title() || message()) {\n    <span class=\"nx-placeholder__text\">\n        @if (title(); as _title) {\n            @if (_title | isTemplate) {\n                <ng-container [ngTemplateOutlet]=\"_title\"></ng-container>\n            } @else {\n                <nx-placeholder-text\n                    nxTitle\n                    class=\"nx-placeholder__variant\"\n                    >{{ _title }}</nx-placeholder-text\n                >\n            }\n        }\n        @if (message(); as _message) {\n            @if (_message | isTemplate) {\n                <ng-container [ngTemplateOutlet]=\"_message\"></ng-container>\n            } @else {\n                <nx-placeholder-text>{{ _message }}</nx-placeholder-text>\n            }\n        }\n    </span>\n}\n\n@if (buttons(); as _buttons) {\n    <ng-container [ngTemplateOutlet]=\"_buttons\"></ng-container>\n}\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}:host.nx-placeholder__error{--nxc-placeholder-accent-color: var(--nxc-attention-red)}:host.nx-placeholder__warning{--nxc-placeholder-accent-color: var(--nxc-attention-yellow)}:host.nx-placeholder__info{--nxc-placeholder-accent-color: var(--nxc-attention-blue)}:host.nx-placeholder__success{--nxc-placeholder-accent-color: var(--nxc-attention-green)}:host.nx-placeholder__error .nx-placeholder__variant{color:var(--nxc-placeholder-accent-color, var(--nxc-light4-offset, var(--nxc-light4)))}:host nx-icon.nx-placeholder__variant{color:var(--nxc-placeholder-accent-color)}:host .nx-placeholder__text{display:flex;gap:12px;flex-direction:column}\n"] }]
        }] });

/**
 * Directive for providing the page subtitle of a step, shown in the main content area.
 * This is separate from the indicator subtitle which is passed as
 * an input to nx-step-indicator.
 */
class NxStepSubtitleDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxStepSubtitleDirective, isStandalone: true, selector: "ng-template[nxStepSubtitle]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepSubtitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[nxStepSubtitle]',
                    standalone: true,
                }]
        }] });

/**
 * Directive for providing the page title of a step, shown in the main content area.
 * This is separate from the indicator title which is passed as
 * an input to nx-step-indicator.
 */
class NxStepTitleDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxStepTitleDirective, isStandalone: true, selector: "ng-template[nxStepTitle]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[nxStepTitle]',
                    standalone: true,
                }]
        }] });

/**
 * Directive for providing navigation buttons for a step.
 */
class NxWizardButtonsDirective {
    constructor() {
        /** @internal - Used by parent wizard to preserve injection context when rendering via ngTemplateOutlet */
        this.injector = inject(Injector);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxWizardButtonsDirective, isStandalone: true, selector: "ng-template[nxWizardButtons]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardButtonsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[nxWizardButtons]',
                    standalone: true,
                }]
        }] });

/**
 * A single step within the nx-wizard component.
 * Extends CdkStep to integrate with Angular CDK Stepper functionality.
 *
 * Contains two types of title/subtitle:
 * 1. Indicator title/subtitle - passed as inputs to nx-step-indicator (shown in sidebar)
 * 2. Page title/subtitle - ng-templates with nxStepTitle/nxStepSubtitle directives (shown in main content area)
 *
 * @example
 * ```html
 * <nx-wizard>
 *   <nx-step>
 *     <!-- Step indicator with its own title/subtitle -->
 *     <ng-template cdkStepLabel>
 *       <button nx-step-indicator title="Step 1" subtitle="Indicator text"></button>
 *     </ng-template>
 *
 *     <!-- Page content title/subtitle (separate from indicator) -->
 *     <ng-template nxStepTitle>Page Title</ng-template>
 *     <ng-template nxStepSubtitle>Page subtitle description</ng-template>
 *
 *     <p>Step content goes here...</p>
 *
 *     <ng-template nxWizardButtons>
 *       <button cdkStepperNext>Next</button>
 *     </ng-template>
 *   </nx-step>
 * </nx-wizard>
 * ```
 */
class NxStepComponent extends CdkStep {
    constructor() {
        super(...arguments);
        /** @internal - Used by parent wizard to render the step's page title */
        this.titleTemplate = contentChild(NxStepTitleDirective, ...(ngDevMode ? [{ debugName: "titleTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
        /** @internal - Used by parent wizard to render the step's page subtitle */
        this.subtitleTemplate = contentChild(NxStepSubtitleDirective, ...(ngDevMode ? [{ debugName: "subtitleTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
        /** @internal - Used by parent wizard to render the step's buttons */
        this.buttonsTemplate = contentChild(NxWizardButtonsDirective, ...(ngDevMode ? [{ debugName: "buttonsTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
        /** @internal - Used by parent wizard to access the buttons directive's injector */
        this.buttonsDirective = contentChild(NxWizardButtonsDirective, ...(ngDevMode ? [{ debugName: "buttonsDirective" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: NxStepComponent, isStandalone: true, selector: "nx-step", providers: [{ provide: CdkStep, useExisting: forwardRef(() => NxStepComponent) }], queries: [{ propertyName: "titleTemplate", first: true, predicate: NxStepTitleDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: NxStepSubtitleDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: NxWizardButtonsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "buttonsDirective", first: true, predicate: NxWizardButtonsDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nx-step',
                    template: '<ng-template><ng-content /></ng-template>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    standalone: true,
                    imports: [CdkStepperModule],
                    providers: [{ provide: CdkStep, useExisting: forwardRef(() => NxStepComponent) }],
                }]
        }] });

/**
 * Represents the visual state of a wizard step indicator.
 */
var WizardStepState;
(function (WizardStepState) {
    WizardStepState["COMPLETED"] = "completed";
    WizardStepState["CURRENT"] = "current";
    WizardStepState["FUTURE"] = "future";
})(WizardStepState || (WizardStepState = {}));

/**
 * A wizard step indicator component that can be applied to button or anchor elements.
 * Displays the step number/icon, title, and optional subtitle.
 *
 * This component is used within `cdkStepLabel` templates to provide clickable
 * step indicators that the user controls (button vs anchor).
 *
 * @example
 * ```html
 * <nx-wizard>
 *   <nx-step>
 *     <ng-template cdkStepLabel>
 *       <button nx-step-indicator title="Configuration" subtitle="Basic setup"></button>
 *     </ng-template>
 *     <p>Step content...</p>
 *   </nx-step>
 * </nx-wizard>
 * ```
 */
class NxStepIndicatorComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.WizardStepState = WizardStepState;
        /**
         * Check if the host element is a button.
         * Buttons should use type="button" to prevent form submission.
         */
        this.isButton = this.elRef.nativeElement.tagName === 'BUTTON';
        /**
         * Optional step number to display in the circle.
         * If not provided, it will be set automatically by the parent container.
         */
        this.stepNumber = input(...(ngDevMode ? [undefined, { debugName: "stepNumber" }] : []));
        /**
         * The title for the step as a string.
         */
        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
        /**
         * Optional subtitle that appears below the title as a string.
         */
        this.subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
        /**
         * The current state of this step.
         * If not provided, it will be calculated automatically by the parent container.
         */
        this.state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
        /**
         * Event emitted when the indicator is clicked.
         * Only emits for completed steps (which are navigable).
         */
        this.indicatorClick = output();
        /** @internal - Used by parent container to set automatic state */
        this._automaticState = signal(WizardStepState.FUTURE, ...(ngDevMode ? [{ debugName: "_automaticState" }] : []));
        /** @internal - Used by parent container to set automatic step number */
        this._automaticStepNumber = signal(0, ...(ngDevMode ? [{ debugName: "_automaticStepNumber" }] : []));
        /** @internal - Used by parent container to set the step index */
        this._stepIndex = signal(0, ...(ngDevMode ? [{ debugName: "_stepIndex" }] : []));
        /** @internal - Used by parent container to disable interactivity (e.g., in completed state) */
        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
        this.effectiveState = computed(() => {
            return this.state() || this._automaticState();
        }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
        /**
         * Whether this indicator is interactive (clickable).
         * Only completed steps are interactive for navigation.
         */
        this.isInteractive = computed(() => {
            return !this._disabled() && this.effectiveState() === WizardStepState.COMPLETED;
        }, ...(ngDevMode ? [{ debugName: "isInteractive" }] : []));
        /**
         * Whether to show the check icon (when completed).
         */
        this.showCheckIcon = computed(() => this.effectiveState() === WizardStepState.COMPLETED, ...(ngDevMode ? [{ debugName: "showCheckIcon" }] : []));
        /**
         * Whether to show the step number (when not completed).
         */
        this.showStepNumber = computed(() => this.effectiveState() !== WizardStepState.COMPLETED, ...(ngDevMode ? [{ debugName: "showStepNumber" }] : []));
        /**
         * Whether this step has a subtitle.
         */
        this.hasSubtitle = computed(() => !!this.subtitle(), ...(ngDevMode ? [{ debugName: "hasSubtitle" }] : []));
        /**
         * The step number to display, either automatic or input.
         */
        this.displayedStepNumber = computed(() => {
            const stepNumber = this.stepNumber();
            return stepNumber === undefined ? this._automaticStepNumber() : stepNumber;
        }, ...(ngDevMode ? [{ debugName: "displayedStepNumber" }] : []));
    }
    /**
     * Handle click events on the indicator.
     * Only emits for completed steps as they are the only navigable ones.
     */
    onIndicatorClick(event) {
        const currentState = this.effectiveState();
        if (currentState === WizardStepState.COMPLETED) {
            this.indicatorClick.emit({
                index: this._stepIndex(),
                state: currentState,
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepIndicatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxStepIndicatorComponent, isStandalone: true, selector: "a[nx-step-indicator], button[nx-step-indicator]", inputs: { stepNumber: { classPropertyName: "stepNumber", publicName: "stepNumber", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indicatorClick: "indicatorClick" }, host: { listeners: { "click": "onIndicatorClick($event)" }, properties: { "class.completed": "effectiveState() === WizardStepState.COMPLETED", "class.current": "effectiveState() === WizardStepState.CURRENT", "class.future": "effectiveState() === WizardStepState.FUTURE", "class.interactive": "isInteractive()", "attr.aria-current": "effectiveState() === WizardStepState.CURRENT ? \"step\" : null", "attr.aria-selected": "effectiveState() === WizardStepState.CURRENT", "attr.tabindex": "isInteractive() ? 0 : -1", "attr.type": "isButton ? \"button\" : null" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"nx-step-indicator-content\">\n    <div\n        class=\"nx-step-indicator-circle\"\n        [attr.aria-hidden]=\"true\"\n    >\n        @if (showCheckIcon()) {\n            <nx-icon\n                class=\"nx-step-indicator-check-icon\"\n                icon=\"Yes\"\n                useCurrentColor\n            />\n            <nx-icon\n                class=\"nx-step-indicator-edit-icon\"\n                icon=\"Edit24X24\"\n                useCurrentColor\n            />\n        } @else if (showStepNumber()) {\n            <span class=\"nx-step-indicator-number\">{{ displayedStepNumber() }}</span>\n        }\n    </div>\n\n    <div\n        class=\"nx-step-indicator-text\"\n        [class.has-subtitle]=\"hasSubtitle()\"\n    >\n        @if (title(); as titleText) {\n            <div class=\"nx-step-indicator-title\">\n                <span>{{ titleText }}</span>\n            </div>\n        }\n        @if (subtitle(); as subtitleText) {\n            <div class=\"nx-step-indicator-subtitle\">\n                <span>{{ subtitleText }}</span>\n            </div>\n        }\n    </div>\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:flex;text-decoration:none;background:none;border:none;padding:0;cursor:default;pointer-events:none;outline:none}:host.interactive{cursor:pointer;pointer-events:auto}.nx-step-indicator-content{display:flex;gap:12px;align-items:center}.nx-step-indicator-circle{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;flex-shrink:0}.nx-step-indicator-circle .nx-step-indicator-number{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)}.nx-step-indicator-circle .nx-step-indicator-check-icon,.nx-step-indicator-circle .nx-step-indicator-edit-icon{width:24px;height:24px}.nx-step-indicator-circle .nx-step-indicator-edit-icon{display:none}:host.completed .nx-step-indicator-circle{background-color:var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--nxc-attention-green);border:1px solid var(--nxc-dark4-offset, var(--nxc-dark4))}:host.current .nx-step-indicator-circle{background-color:var(--nxc-brand);color:var(--nxc-brand-contrast, var(--nxc-dark1));border:none}:host.future .nx-step-indicator-circle{background-color:var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--nxc-light10-offset, var(--nxc-light10));border:1px solid var(--nxc-dark4-offset, var(--nxc-dark4))}.nx-step-indicator-text{gap:2px;display:flex;flex-direction:column}.nx-step-indicator-text .nx-step-indicator-title{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)}.nx-step-indicator-text .nx-step-indicator-title{text-align:start}:host.completed .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light10-offset, var(--nxc-light10))}:host.current .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light4-offset, var(--nxc-light4))}:host.future .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light10-offset, var(--nxc-light10))}.nx-step-indicator-text .nx-step-indicator-subtitle{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)}.nx-step-indicator-text .nx-step-indicator-subtitle{color:var(--nxc-light15-offset, var(--nxc-light15));text-align:start}.nx-step-indicator-text:not(.has-subtitle) .nx-step-indicator-title{line-height:36px}:host.interactive:hover .nx-step-indicator-circle,:host.interactive:focus-visible .nx-step-indicator-circle,:host.interactive:active .nx-step-indicator-circle{background-color:var(--nxc-dark4-offset, var(--nxc-dark4));color:var(--nxc-light10-offset, var(--nxc-light10))}:host.interactive:hover .nx-step-indicator-circle .nx-step-indicator-check-icon,:host.interactive:focus-visible .nx-step-indicator-circle .nx-step-indicator-check-icon,:host.interactive:active .nx-step-indicator-circle .nx-step-indicator-check-icon{display:none}:host.interactive:hover .nx-step-indicator-circle .nx-step-indicator-edit-icon,:host.interactive:focus-visible .nx-step-indicator-circle .nx-step-indicator-edit-icon,:host.interactive:active .nx-step-indicator-circle .nx-step-indicator-edit-icon{display:inline-flex}:host.interactive:hover .nx-step-indicator-text .nx-step-indicator-title,:host.interactive:focus-visible .nx-step-indicator-text .nx-step-indicator-title,:host.interactive:active .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light4-offset, var(--nxc-light4))}:host.interactive:focus-visible{outline:2px solid var(--nxc-brand);outline-offset:2px;border-radius:4px}\n"], dependencies: [{ kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxStepIndicatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'a[nx-step-indicator], button[nx-step-indicator]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NxIconComponent], host: {
                        '[class.completed]': 'effectiveState() === WizardStepState.COMPLETED',
                        '[class.current]': 'effectiveState() === WizardStepState.CURRENT',
                        '[class.future]': 'effectiveState() === WizardStepState.FUTURE',
                        '[class.interactive]': 'isInteractive()',
                        '[attr.aria-current]': 'effectiveState() === WizardStepState.CURRENT ? "step" : null',
                        '[attr.aria-selected]': 'effectiveState() === WizardStepState.CURRENT',
                        '[attr.tabindex]': 'isInteractive() ? 0 : -1',
                        '[attr.type]': 'isButton ? "button" : null',
                        '(click)': 'onIndicatorClick($event)',
                    }, template: "<div class=\"nx-step-indicator-content\">\n    <div\n        class=\"nx-step-indicator-circle\"\n        [attr.aria-hidden]=\"true\"\n    >\n        @if (showCheckIcon()) {\n            <nx-icon\n                class=\"nx-step-indicator-check-icon\"\n                icon=\"Yes\"\n                useCurrentColor\n            />\n            <nx-icon\n                class=\"nx-step-indicator-edit-icon\"\n                icon=\"Edit24X24\"\n                useCurrentColor\n            />\n        } @else if (showStepNumber()) {\n            <span class=\"nx-step-indicator-number\">{{ displayedStepNumber() }}</span>\n        }\n    </div>\n\n    <div\n        class=\"nx-step-indicator-text\"\n        [class.has-subtitle]=\"hasSubtitle()\"\n    >\n        @if (title(); as titleText) {\n            <div class=\"nx-step-indicator-title\">\n                <span>{{ titleText }}</span>\n            </div>\n        }\n        @if (subtitle(); as subtitleText) {\n            <div class=\"nx-step-indicator-subtitle\">\n                <span>{{ subtitleText }}</span>\n            </div>\n        }\n    </div>\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:flex;text-decoration:none;background:none;border:none;padding:0;cursor:default;pointer-events:none;outline:none}:host.interactive{cursor:pointer;pointer-events:auto}.nx-step-indicator-content{display:flex;gap:12px;align-items:center}.nx-step-indicator-circle{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;flex-shrink:0}.nx-step-indicator-circle .nx-step-indicator-number{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)}.nx-step-indicator-circle .nx-step-indicator-check-icon,.nx-step-indicator-circle .nx-step-indicator-edit-icon{width:24px;height:24px}.nx-step-indicator-circle .nx-step-indicator-edit-icon{display:none}:host.completed .nx-step-indicator-circle{background-color:var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--nxc-attention-green);border:1px solid var(--nxc-dark4-offset, var(--nxc-dark4))}:host.current .nx-step-indicator-circle{background-color:var(--nxc-brand);color:var(--nxc-brand-contrast, var(--nxc-dark1));border:none}:host.future .nx-step-indicator-circle{background-color:var(--nxc-dark1-offset, var(--nxc-dark1));color:var(--nxc-light10-offset, var(--nxc-light10));border:1px solid var(--nxc-dark4-offset, var(--nxc-dark4))}.nx-step-indicator-text{gap:2px;display:flex;flex-direction:column}.nx-step-indicator-text .nx-step-indicator-title{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)}.nx-step-indicator-text .nx-step-indicator-title{text-align:start}:host.completed .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light10-offset, var(--nxc-light10))}:host.current .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light4-offset, var(--nxc-light4))}:host.future .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light10-offset, var(--nxc-light10))}.nx-step-indicator-text .nx-step-indicator-subtitle{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)}.nx-step-indicator-text .nx-step-indicator-subtitle{color:var(--nxc-light15-offset, var(--nxc-light15));text-align:start}.nx-step-indicator-text:not(.has-subtitle) .nx-step-indicator-title{line-height:36px}:host.interactive:hover .nx-step-indicator-circle,:host.interactive:focus-visible .nx-step-indicator-circle,:host.interactive:active .nx-step-indicator-circle{background-color:var(--nxc-dark4-offset, var(--nxc-dark4));color:var(--nxc-light10-offset, var(--nxc-light10))}:host.interactive:hover .nx-step-indicator-circle .nx-step-indicator-check-icon,:host.interactive:focus-visible .nx-step-indicator-circle .nx-step-indicator-check-icon,:host.interactive:active .nx-step-indicator-circle .nx-step-indicator-check-icon{display:none}:host.interactive:hover .nx-step-indicator-circle .nx-step-indicator-edit-icon,:host.interactive:focus-visible .nx-step-indicator-circle .nx-step-indicator-edit-icon,:host.interactive:active .nx-step-indicator-circle .nx-step-indicator-edit-icon{display:inline-flex}:host.interactive:hover .nx-step-indicator-text .nx-step-indicator-title,:host.interactive:focus-visible .nx-step-indicator-text .nx-step-indicator-title,:host.interactive:active .nx-step-indicator-text .nx-step-indicator-title{color:var(--nxc-light4-offset, var(--nxc-light4))}:host.interactive:focus-visible{outline:2px solid var(--nxc-brand);outline-offset:2px;border-radius:4px}\n"] }]
        }] });

/**
 * Directive for providing content that fills the main content area when the wizard's `completed` input is `true`.
 */
class NxWizardCompletedDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardCompletedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxWizardCompletedDirective, isStandalone: true, selector: "ng-template[nxWizardCompleted]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardCompletedDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[nxWizardCompleted]',
                    standalone: true,
                }]
        }] });

/**
 * Directive for providing an exit button rendered at the bottom of the sidebar.
 * The wizard will render this template at the bottom of the sidebar.
 * Only one exit button template should exist per wizard.
 */
class NxWizardExitButtonDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardExitButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxWizardExitButtonDirective, isStandalone: true, selector: "ng-template[nxWizardExitButton]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardExitButtonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[nxWizardExitButton]',
                    standalone: true,
                }]
        }] });

/**
 * Directive for providing a title for the entire wizard.
 */
class NxWizardTitleDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: NxWizardTitleDirective, isStandalone: true, selector: "ng-template[nxWizardTitle]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[nxWizardTitle]',
                    standalone: true,
                }]
        }] });

/**
 * A wizard component that combines CDK Stepper functionality with visual step indicators.
 *
 * Supports two modes:
 * - **Full wizard mode** (fullWizardView: true, default): Renders indicators, step content, and buttons
 * - **View-only mode** (fullWizardView: false): Renders only indicators, driven by selectedIndex
 *
 * Step indicators are defined using the `[nx-step-indicator]` directive within `cdkStepLabel` templates,
 * allowing users to control whether each indicator is a button or anchor element.
 *
 * There are three types of titles:
 * 1. **Wizard title**: ng-template with nxWizardTitle directive, shown at top of sidebar
 * 2. **Indicator title/subtitle**: Passed as inputs to nx-step-indicator, shown in sidebar
 * 3. **Page title/subtitle**: ng-templates with nxStepTitle/nxStepSubtitle directives, shown in main content area
 *
 * Additionally, an exit button can be provided using the nxWizardExitButton directive.
 *
 * @example
 * ```html
 * <!-- Full wizard mode with all title types -->
 * <nx-wizard>
 *   <!-- Exit button -->
 *   <ng-template nxWizardExitButton>
 *     <button nx-button (click)="onExit()">Exit</button>
 *   </ng-template>
 *
 *   <!-- Overall wizard title -->
 *   <ng-template nxWizardTitle>Site Connection Wizard</ng-template>
 *
 *   <nx-step>
 *     <!-- Indicator title/subtitle (shown in sidebar) -->
 *     <ng-template cdkStepLabel>
 *       <button nx-step-indicator title="Step 1" subtitle="Configuration"></button>
 *     </ng-template>
 *
 *     <!-- Page title/subtitle (shown in main content area) -->
 *     <ng-template nxStepTitle>Configure Your System</ng-template>
 *     <ng-template nxStepSubtitle>Set up the basic configuration</ng-template>
 *
 *     <p>Configure your settings...</p>
 *
 *     <ng-template nxWizardButtons>
 *       <button cdkStepperNext>Next</button>
 *     </ng-template>
 *   </nx-step>
 * </nx-wizard>
 *
 * <!-- View-only mode -->
 * <nx-wizard [fullWizardView]="false" [selectedIndex]="currentStep">
 *   <nx-step>
 *     <ng-template cdkStepLabel>
 *       <button nx-step-indicator title="Step 1" (indicatorClick)="goTo($event)"></button>
 *     </ng-template>
 *   </nx-step>
 * </nx-wizard>
 * ```
 */
class NxWizardComponent extends CdkStepper {
    constructor() {
        super(...arguments);
        this.WizardStepState = WizardStepState;
        /**
         * Whether to render the full wizard view (indicators + content + buttons)
         * or just the indicators (view-only mode).
         *
         * @default true
         */
        this.fullWizardView = input(true, ...(ngDevMode ? [{ debugName: "fullWizardView" }] : []));
        /**
         * Whether the wizard is in a completed state.
         * When true, all indicators show checkmarks (non-interactive),
         * step-specific UI is hidden, and the completion template fills the main content area.
         *
         * @default false
         */
        this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Query for the wizard title template.
         */
        this.wizardTitleTemplate = contentChild(NxWizardTitleDirective, ...(ngDevMode ? [{ debugName: "wizardTitleTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
        /**
         * Query for the exit button element.
         */
        this.exitButton = contentChild(NxWizardExitButtonDirective, ...(ngDevMode ? [{ debugName: "exitButton", read: TemplateRef }] : [{ read: TemplateRef }]));
        /**
         * Query for the wizard completed template.
         */
        this.completedTemplate = contentChild(NxWizardCompletedDirective, ...(ngDevMode ? [{ debugName: "completedTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
        /**
         * Query for NxStepComponent children to access step-specific data.
         */
        this.nxSteps = contentChildren(NxStepComponent, ...(ngDevMode ? [{ debugName: "nxSteps" }] : []));
        /**
         * Query for NxStepIndicatorComponent instances within the step labels.
         * These are used to update indicator states.
         */
        this.stepIndicators = contentChildren(NxStepIndicatorComponent, ...(ngDevMode ? [{ debugName: "stepIndicators", descendants: true }] : [{ descendants: true }]));
        /**
         * The currently selected NxStepComponent.
         */
        this.selectedNxStep = computed(() => {
            const steps = this.nxSteps();
            return steps[this.selectedIndex] ?? null;
        }, ...(ngDevMode ? [{ debugName: "selectedNxStep" }] : []));
        /**
         * Effect to update indicator states when selectedIndex or completed changes.
         */
        this.updateIndicatorStates = effect(() => {
            const indicators = this.stepIndicators();
            const currentIndex = this.selectedIndex;
            const isCompleted = this.completed();
            indicators.forEach((indicator, index) => {
                // Set step number (1-based)
                indicator._automaticStepNumber.set(index + 1);
                // Set step index (0-based)
                indicator._stepIndex.set(index);
                if (isCompleted) {
                    // In completed state: all indicators show checkmarks, none are interactive
                    indicator._automaticState.set(WizardStepState.COMPLETED);
                    indicator._disabled.set(true);
                }
                else {
                    // Normal mode: set state based on position relative to current step
                    indicator._disabled.set(false);
                    if (index < currentIndex) {
                        indicator._automaticState.set(WizardStepState.COMPLETED);
                    }
                    else if (index === currentIndex) {
                        indicator._automaticState.set(WizardStepState.CURRENT);
                    }
                    else {
                        indicator._automaticState.set(WizardStepState.FUTURE);
                    }
                }
            });
        }, ...(ngDevMode ? [{ debugName: "updateIndicatorStates" }] : []));
        /**
         * Whether the mobile sidebar overlay is open
         */
        this.mobileSidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileSidebarOpen" }] : []));
    }
    /**
     * Check if a step has a label template.
     */
    hasLabelTemplate(stepIndex) {
        const steps = this.nxSteps();
        const step = steps[stepIndex];
        return !!step?.stepLabel?.template;
    }
    /**
     * Get the label template for a step.
     */
    getLabelTemplate(stepIndex) {
        const steps = this.nxSteps();
        const step = steps[stepIndex];
        return step?.stepLabel?.template ?? null;
    }
    openMobileSidebar() {
        this.mobileSidebarOpen.set(true);
    }
    closeMobileSidebar() {
        this.mobileSidebarOpen.set(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxWizardComponent, isStandalone: true, selector: "nx-wizard", inputs: { fullWizardView: { classPropertyName: "fullWizardView", publicName: "fullWizardView", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: forwardRef(() => NxWizardComponent) }], queries: [{ propertyName: "wizardTitleTemplate", first: true, predicate: NxWizardTitleDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "exitButton", first: true, predicate: NxWizardExitButtonDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "completedTemplate", first: true, predicate: NxWizardCompletedDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "nxSteps", predicate: NxStepComponent, isSignal: true }, { propertyName: "stepIndicators", predicate: NxStepIndicatorComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (fullWizardView()) {\n    <!-- Full wizard mode: sidebar with indicators + main content area -->\n    <div\n        class=\"nx-wizard-container\"\n        [class.mobile-sidebar-open]=\"mobileSidebarOpen()\"\n    >\n        <!-- Left Sidebar -->\n        <div class=\"nx-wizard-sidebar\">\n            <!-- Sidebar Header: Wizard Title + Close button (close only visible on mobile) -->\n            <div class=\"nx-wizard-sidebar-header\">\n                @if (wizardTitleTemplate(); as wizardTitle) {\n                    <div class=\"nx-wizard-title\">\n                        <ng-container [ngTemplateOutlet]=\"wizardTitle\" />\n                    </div>\n                }\n\n                <button\n                    nx-button\n                    variant=\"light\"\n                    appearance=\"text\"\n                    size=\"large\"\n                    type=\"button\"\n                    class=\"nx-wizard-sidebar-close-button\"\n                    (click)=\"closeMobileSidebar()\"\n                    aria-label=\"Close navigation\"\n                    data-testid=\"mobile-sidebar-close\"\n                >\n                    <nx-icon\n                        icon=\"Close24X24\"\n                        useCurrentColor\n                    />\n                </button>\n            </div>\n\n            <!-- Step Indicators -->\n            <div\n                class=\"nx-wizard-indicators-section\"\n                role=\"tablist\"\n                aria-label=\"Wizard progress\"\n            >\n                @for (step of steps; track step; let i = $index) {\n                    <div class=\"nx-wizard-indicator-wrapper\">\n                        @if (hasLabelTemplate(i)) {\n                            <ng-container [ngTemplateOutlet]=\"getLabelTemplate(i)\" />\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Exit Button (pushed to bottom) -->\n            @if (exitButton(); as exitButtonTemplate) {\n                <div\n                    class=\"nx-wizard-exit-button\"\n                    data-testid=\"sidebar-exit-button\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"exitButtonTemplate\" />\n                </div>\n            }\n        </div>\n\n        <!-- Main Content Area -->\n        <div class=\"nx-wizard-main\">\n            @if (completed()) {\n                <!-- Completed State: show completion template -->\n                @if (completedTemplate(); as completedTpl) {\n                    <div class=\"nx-wizard-completed-content\">\n                        <ng-container [ngTemplateOutlet]=\"completedTpl\" />\n                    </div>\n                }\n\n                <!-- Exit Button for mobile completed state (sidebar is hidden in mobile) -->\n                @if (exitButton(); as exitButtonTemplate) {\n                    <div\n                        class=\"nx-wizard-mobile-exit-button\"\n                        data-testid=\"mobile-exit-button\"\n                    >\n                        <ng-container [ngTemplateOutlet]=\"exitButtonTemplate\" />\n                    </div>\n                }\n            } @else {\n                <!-- Header: Step Counter + Page Title/Subtitle -->\n                <div class=\"nx-wizard-header\">\n                    <div class=\"nx-wizard-header-content\">\n                        <!-- Hamburger button for mobile (hidden on desktop) -->\n                        <button\n                            nx-button\n                            variant=\"light\"\n                            appearance=\"text\"\n                            size=\"large\"\n                            type=\"button\"\n                            class=\"nx-wizard-hamburger-button\"\n                            (click)=\"openMobileSidebar()\"\n                            aria-label=\"Open navigation\"\n                            data-testid=\"mobile-hamburger\"\n                        >\n                            <nx-icon\n                                icon=\"Menu24X24\"\n                                useCurrentColor\n                            />\n                        </button>\n\n                        <div class=\"nx-wizard-header-text\">\n                            <div class=\"nx-wizard-title-row\">\n                                <!-- Step Counter (e.g., \"1/2\") -->\n                                <span class=\"nx-wizard-step-counter\"\n                                    >{{ selectedIndex + 1 }}/{{ steps.length }}</span\n                                >\n\n                                <!-- Page Title -->\n                                @if (selectedNxStep()?.titleTemplate(); as titleTemplate) {\n                                    <span class=\"nx-wizard-step-title\">\n                                        <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n                                    </span>\n                                }\n                            </div>\n\n                            <!-- Page Subtitle -->\n                            @if (selectedNxStep()?.subtitleTemplate(); as subtitleTemplate) {\n                                <div class=\"nx-wizard-step-subtitle\">\n                                    <ng-container [ngTemplateOutlet]=\"subtitleTemplate\" />\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Scrollable Step Content -->\n                @if (selected) {\n                    <div\n                        class=\"nx-wizard-step-content\"\n                        role=\"tabpanel\"\n                    >\n                        <ng-container [ngTemplateOutlet]=\"selected.content\" />\n                    </div>\n                }\n\n                <!-- Buttons Section (with divider above) -->\n                @if (selectedNxStep()?.buttonsTemplate(); as buttonsTemplate) {\n                    <div class=\"nx-wizard-buttons-section\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"buttonsTemplate\"\n                            [ngTemplateOutletInjector]=\"\n                                selectedNxStep()?.buttonsDirective()?.injector\n                            \"\n                        />\n                    </div>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    <!-- View-only mode: just indicators -->\n    <div\n        class=\"nx-wizard-indicators-only\"\n        role=\"tablist\"\n        aria-label=\"Wizard progress\"\n    >\n        @for (step of steps; track step; let i = $index) {\n            <div class=\"nx-wizard-indicator-wrapper\">\n                @if (hasLabelTemplate(i)) {\n                    <ng-container [ngTemplateOutlet]=\"getLabelTemplate(i)\" />\n                }\n            </div>\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:block;width:100%;height:100%;container:nx-wizard/inline-size}.nx-wizard-container{display:flex;width:100%;height:100%;position:relative}.nx-wizard-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:336px;box-sizing:border-box;border-right:1px solid var(--nxc-dark4-offset, var(--nxc-dark4));padding:24px}.nx-wizard-sidebar-header{display:flex;align-items:center;margin-bottom:24px}.nx-wizard-sidebar-close-button{display:none}.nx-wizard-title{font-size:24px;line-height:30px;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)}.nx-wizard-title{color:var(--nxc-light4-offset, var(--nxc-light4));flex:1;min-width:0}.nx-wizard-indicators-section{display:flex;flex-direction:column;position:relative;gap:20px}.nx-wizard-indicators-section:before{content:\"\";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background-color:var(--nxc-dark4-offset, var(--nxc-dark4));z-index:0}.nx-wizard-indicator-wrapper{position:relative;z-index:1}.nx-wizard-exit-button{flex-shrink:0;margin-top:auto;display:flex;justify-content:center}.nx-wizard-mobile-exit-button{display:none}.nx-wizard-main{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;position:relative}.nx-wizard-header{flex-shrink:0;padding:24px}.nx-wizard-header-content{display:flex;align-items:center;gap:8px}.nx-wizard-header-text{flex:1;min-width:0}.nx-wizard-hamburger-button{display:none}.nx-wizard-title-row{display:flex;align-items:baseline;gap:8px}.nx-wizard-step-counter{font-size:24px;line-height:30px;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)}.nx-wizard-step-counter{color:var(--nxc-dark14-offset, var(--nxc-dark14))}.nx-wizard-step-title{font-size:24px;line-height:30px;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)}.nx-wizard-step-title{color:var(--nxc-light4-offset, var(--nxc-light4))}.nx-wizard-step-subtitle{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)}.nx-wizard-step-subtitle{color:var(--nxc-light10-offset, var(--nxc-light10));margin-top:8px}.nx-wizard-step-content{flex:1;overflow:auto;min-height:0;box-sizing:border-box;padding-left:24px;padding-right:24px;padding-bottom:24px}.nx-wizard-completed-content{flex:1;overflow:auto;min-height:0;padding-left:24px;padding-right:24px;padding-bottom:24px}.nx-wizard-buttons-section{flex-shrink:0;display:flex;border-top:1px solid var(--nxc-dark4-offset, var(--nxc-dark4));gap:12px;padding:24px}.nx-wizard-indicators-only{display:flex;flex-direction:column;position:relative;gap:20px}.nx-wizard-indicators-only:before{content:\"\";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background-color:var(--nxc-dark4-offset, var(--nxc-dark4));z-index:0}@container nx-wizard (max-width: 600px){.nx-wizard-sidebar{display:none}.nx-wizard-container .nx-wizard-header .nx-wizard-header-content .nx-wizard-hamburger-button{display:inline-flex;flex-shrink:0;padding:2px;height:30px}.nx-wizard-header-content{align-items:flex-start}.nx-wizard-step-content,.nx-wizard-completed-content{padding-left:0;padding-right:0;padding-bottom:0}.nx-wizard-mobile-exit-button{display:flex;justify-content:center;position:absolute;bottom:24px;left:0;right:0}.nx-wizard-header{padding:24px 16px}.nx-wizard-buttons-section{justify-content:flex-end;padding:16px}.mobile-sidebar-open .nx-wizard-sidebar{display:flex;position:absolute;inset:0;z-index:10;width:100%;background-color:var(--nxc-dark1-offset, var(--nxc-dark1));border-right:none;padding:24px 16px}.mobile-sidebar-open .nx-wizard-sidebar-close-button{display:inline-flex;flex-shrink:0;padding:0;height:24px;width:24px}}\n"], dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "20.1.6", ngImport: i0, type: NxWizardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-wizard', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CdkStepperModule, NgTemplateOutlet, NxButtonComponent, NxIconComponent], providers: [{ provide: CdkStepper, useExisting: forwardRef(() => NxWizardComponent) }], template: "@if (fullWizardView()) {\n    <!-- Full wizard mode: sidebar with indicators + main content area -->\n    <div\n        class=\"nx-wizard-container\"\n        [class.mobile-sidebar-open]=\"mobileSidebarOpen()\"\n    >\n        <!-- Left Sidebar -->\n        <div class=\"nx-wizard-sidebar\">\n            <!-- Sidebar Header: Wizard Title + Close button (close only visible on mobile) -->\n            <div class=\"nx-wizard-sidebar-header\">\n                @if (wizardTitleTemplate(); as wizardTitle) {\n                    <div class=\"nx-wizard-title\">\n                        <ng-container [ngTemplateOutlet]=\"wizardTitle\" />\n                    </div>\n                }\n\n                <button\n                    nx-button\n                    variant=\"light\"\n                    appearance=\"text\"\n                    size=\"large\"\n                    type=\"button\"\n                    class=\"nx-wizard-sidebar-close-button\"\n                    (click)=\"closeMobileSidebar()\"\n                    aria-label=\"Close navigation\"\n                    data-testid=\"mobile-sidebar-close\"\n                >\n                    <nx-icon\n                        icon=\"Close24X24\"\n                        useCurrentColor\n                    />\n                </button>\n            </div>\n\n            <!-- Step Indicators -->\n            <div\n                class=\"nx-wizard-indicators-section\"\n                role=\"tablist\"\n                aria-label=\"Wizard progress\"\n            >\n                @for (step of steps; track step; let i = $index) {\n                    <div class=\"nx-wizard-indicator-wrapper\">\n                        @if (hasLabelTemplate(i)) {\n                            <ng-container [ngTemplateOutlet]=\"getLabelTemplate(i)\" />\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Exit Button (pushed to bottom) -->\n            @if (exitButton(); as exitButtonTemplate) {\n                <div\n                    class=\"nx-wizard-exit-button\"\n                    data-testid=\"sidebar-exit-button\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"exitButtonTemplate\" />\n                </div>\n            }\n        </div>\n\n        <!-- Main Content Area -->\n        <div class=\"nx-wizard-main\">\n            @if (completed()) {\n                <!-- Completed State: show completion template -->\n                @if (completedTemplate(); as completedTpl) {\n                    <div class=\"nx-wizard-completed-content\">\n                        <ng-container [ngTemplateOutlet]=\"completedTpl\" />\n                    </div>\n                }\n\n                <!-- Exit Button for mobile completed state (sidebar is hidden in mobile) -->\n                @if (exitButton(); as exitButtonTemplate) {\n                    <div\n                        class=\"nx-wizard-mobile-exit-button\"\n                        data-testid=\"mobile-exit-button\"\n                    >\n                        <ng-container [ngTemplateOutlet]=\"exitButtonTemplate\" />\n                    </div>\n                }\n            } @else {\n                <!-- Header: Step Counter + Page Title/Subtitle -->\n                <div class=\"nx-wizard-header\">\n                    <div class=\"nx-wizard-header-content\">\n                        <!-- Hamburger button for mobile (hidden on desktop) -->\n                        <button\n                            nx-button\n                            variant=\"light\"\n                            appearance=\"text\"\n                            size=\"large\"\n                            type=\"button\"\n                            class=\"nx-wizard-hamburger-button\"\n                            (click)=\"openMobileSidebar()\"\n                            aria-label=\"Open navigation\"\n                            data-testid=\"mobile-hamburger\"\n                        >\n                            <nx-icon\n                                icon=\"Menu24X24\"\n                                useCurrentColor\n                            />\n                        </button>\n\n                        <div class=\"nx-wizard-header-text\">\n                            <div class=\"nx-wizard-title-row\">\n                                <!-- Step Counter (e.g., \"1/2\") -->\n                                <span class=\"nx-wizard-step-counter\"\n                                    >{{ selectedIndex + 1 }}/{{ steps.length }}</span\n                                >\n\n                                <!-- Page Title -->\n                                @if (selectedNxStep()?.titleTemplate(); as titleTemplate) {\n                                    <span class=\"nx-wizard-step-title\">\n                                        <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n                                    </span>\n                                }\n                            </div>\n\n                            <!-- Page Subtitle -->\n                            @if (selectedNxStep()?.subtitleTemplate(); as subtitleTemplate) {\n                                <div class=\"nx-wizard-step-subtitle\">\n                                    <ng-container [ngTemplateOutlet]=\"subtitleTemplate\" />\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Scrollable Step Content -->\n                @if (selected) {\n                    <div\n                        class=\"nx-wizard-step-content\"\n                        role=\"tabpanel\"\n                    >\n                        <ng-container [ngTemplateOutlet]=\"selected.content\" />\n                    </div>\n                }\n\n                <!-- Buttons Section (with divider above) -->\n                @if (selectedNxStep()?.buttonsTemplate(); as buttonsTemplate) {\n                    <div class=\"nx-wizard-buttons-section\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"buttonsTemplate\"\n                            [ngTemplateOutletInjector]=\"\n                                selectedNxStep()?.buttonsDirective()?.injector\n                            \"\n                        />\n                    </div>\n                }\n            }\n        </div>\n    </div>\n} @else {\n    <!-- View-only mode: just indicators -->\n    <div\n        class=\"nx-wizard-indicators-only\"\n        role=\"tablist\"\n        aria-label=\"Wizard progress\"\n    >\n        @for (step of steps; track step; let i = $index) {\n            <div class=\"nx-wizard-indicator-wrapper\">\n                @if (hasLabelTemplate(i)) {\n                    <ng-container [ngTemplateOutlet]=\"getLabelTemplate(i)\" />\n                }\n            </div>\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{display:block;width:100%;height:100%;container:nx-wizard/inline-size}.nx-wizard-container{display:flex;width:100%;height:100%;position:relative}.nx-wizard-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:336px;box-sizing:border-box;border-right:1px solid var(--nxc-dark4-offset, var(--nxc-dark4));padding:24px}.nx-wizard-sidebar-header{display:flex;align-items:center;margin-bottom:24px}.nx-wizard-sidebar-close-button{display:none}.nx-wizard-title{font-size:24px;line-height:30px;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)}.nx-wizard-title{color:var(--nxc-light4-offset, var(--nxc-light4));flex:1;min-width:0}.nx-wizard-indicators-section{display:flex;flex-direction:column;position:relative;gap:20px}.nx-wizard-indicators-section:before{content:\"\";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background-color:var(--nxc-dark4-offset, var(--nxc-dark4));z-index:0}.nx-wizard-indicator-wrapper{position:relative;z-index:1}.nx-wizard-exit-button{flex-shrink:0;margin-top:auto;display:flex;justify-content:center}.nx-wizard-mobile-exit-button{display:none}.nx-wizard-main{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;position:relative}.nx-wizard-header{flex-shrink:0;padding:24px}.nx-wizard-header-content{display:flex;align-items:center;gap:8px}.nx-wizard-header-text{flex:1;min-width:0}.nx-wizard-hamburger-button{display:none}.nx-wizard-title-row{display:flex;align-items:baseline;gap:8px}.nx-wizard-step-counter{font-size:24px;line-height:30px;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)}.nx-wizard-step-counter{color:var(--nxc-dark14-offset, var(--nxc-dark14))}.nx-wizard-step-title{font-size:24px;line-height:30px;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)}.nx-wizard-step-title{color:var(--nxc-light4-offset, var(--nxc-light4))}.nx-wizard-step-subtitle{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)}.nx-wizard-step-subtitle{color:var(--nxc-light10-offset, var(--nxc-light10));margin-top:8px}.nx-wizard-step-content{flex:1;overflow:auto;min-height:0;box-sizing:border-box;padding-left:24px;padding-right:24px;padding-bottom:24px}.nx-wizard-completed-content{flex:1;overflow:auto;min-height:0;padding-left:24px;padding-right:24px;padding-bottom:24px}.nx-wizard-buttons-section{flex-shrink:0;display:flex;border-top:1px solid var(--nxc-dark4-offset, var(--nxc-dark4));gap:12px;padding:24px}.nx-wizard-indicators-only{display:flex;flex-direction:column;position:relative;gap:20px}.nx-wizard-indicators-only:before{content:\"\";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background-color:var(--nxc-dark4-offset, var(--nxc-dark4));z-index:0}@container nx-wizard (max-width: 600px){.nx-wizard-sidebar{display:none}.nx-wizard-container .nx-wizard-header .nx-wizard-header-content .nx-wizard-hamburger-button{display:inline-flex;flex-shrink:0;padding:2px;height:30px}.nx-wizard-header-content{align-items:flex-start}.nx-wizard-step-content,.nx-wizard-completed-content{padding-left:0;padding-right:0;padding-bottom:0}.nx-wizard-mobile-exit-button{display:flex;justify-content:center;position:absolute;bottom:24px;left:0;right:0}.nx-wizard-header{padding:24px 16px}.nx-wizard-buttons-section{justify-content:flex-end;padding:16px}.mobile-sidebar-open .nx-wizard-sidebar{display:flex;position:absolute;inset:0;z-index:10;width:100%;background-color:var(--nxc-dark1-offset, var(--nxc-dark1));border-right:none;padding:24px 16px}.mobile-sidebar-open .nx-wizard-sidebar-close-button{display:inline-flex;flex-shrink:0;padding:0;height:24px;width:24px}}\n"] }]
        }] });

class NxTagComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
        this.closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : []));
        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
        this.close = output();
    }
    onCloseClick(event) {
        event.stopPropagation();
        this.close.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxTagComponent, isStandalone: true, selector: "button[nx-tag]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "type": "button" }, properties: { "class.selected": "selected()", "class.small": "small()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if (closable()) {\n    <nx-icon\n        icon=\"Close16X16\"\n        preserveSize\n        useCurrentColor\n        (click)=\"onCloseClick($event)\"\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{cursor:pointer;border:none;height:40px;padding:8px 16px;display:flex;justify-content:center;align-items:center;border-radius:6px;color:var(--nxc-light10-offset, var(--nxc-light10))}:host{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{background-color:var(--nxc-dark4-offset, var(--nxc-dark4))}:host:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3%))}}:host.selected{background-color:var(--nxc-dark8-offset, var(--nxc-dark8))}:host.selected:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + 6))}:host.selected:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + 6))}:host.selected:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.selected:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + .06))}:host.selected:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + .06))}:host.selected:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l - 3%))}}:host.small{height:35px}:host.small{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-icon{margin-left:5px}\n"], dependencies: [{ kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTagComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[nx-tag]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NxIconComponent], standalone: true, host: {
                        '[class.selected]': 'selected()',
                        '[class.small]': 'small()',
                        type: 'button',
                    }, template: "<ng-content></ng-content>\n@if (closable()) {\n    <nx-icon\n        icon=\"Close16X16\"\n        preserveSize\n        useCurrentColor\n        (click)=\"onCloseClick($event)\"\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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host{cursor:pointer;border:none;height:40px;padding:8px 16px;display:flex;justify-content:center;align-items:center;border-radius:6px;color:var(--nxc-light10-offset, var(--nxc-light10))}:host{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{background-color:var(--nxc-dark4-offset, var(--nxc-dark4))}:host:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3%))}}:host.selected{background-color:var(--nxc-dark8-offset, var(--nxc-dark8))}:host.selected:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + 6))}:host.selected:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + 6))}:host.selected:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host.selected:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + .06))}:host.selected:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l + .06))}:host.selected:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark8-offset, var(--nxc-dark8)) h s calc(l - 3%))}}:host.small{height:35px}:host.small{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-icon{margin-left:5px}\n"] }]
        }] });

class NxTabsItemDirective {
    constructor() {
        /**
         * Optional data item associated with this tab.
         * Can be used to store any data related to the tab.
         */
        this.nxTabsItem = input(...(ngDevMode ? [undefined, { debugName: "nxTabsItem" }] : []));
        /**
         * Event emitted when the tab item is selected.
         * Emits the directive instance itself.
         */
        this.onSelect = output();
        /**
         * Optional disabled state. False by default.
         * The tab item is disabled and cannot be selected.
         */
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
                transform: booleanAttribute,
            }]));
        this.disabledEffect = effect(() => {
            if (this.disabled()) {
                this.selected.set(false);
            }
        }, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
        /**
         * Signal indicating whether this tab item is currently selected.
         */
        this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
    }
    callOnClick($event) {
        $event.stopPropagation();
        if (!this.disabled()) {
            this.onSelect.emit(this);
        }
    }
    callOnKeyDown($event) {
        if ($event.key === ' ' || $event.key === 'Enter') {
            if (!this.disabled()) {
                $event.preventDefault();
                this.onSelect.emit(this);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: NxTabsItemDirective, isStandalone: true, selector: "[nxTabsItem]", inputs: { nxTabsItem: { classPropertyName: "nxTabsItem", publicName: "nxTabsItem", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "click": "callOnClick($event)", "keydown": "callOnKeyDown($event)" } }, exportAs: ["nxTabsItem"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxTabsItem]',
                    standalone: true,
                    exportAs: 'nxTabsItem',
                }]
        }], propDecorators: { callOnClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], callOnKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

var TabsSize;
(function (TabsSize) {
    TabsSize["SMALL"] = "small";
    TabsSize["LARGE"] = "large";
})(TabsSize || (TabsSize = {}));
var TabsVariant;
(function (TabsVariant) {
    TabsVariant["LIGHT"] = "light";
    TabsVariant["DARK"] = "dark";
})(TabsVariant || (TabsVariant = {}));

class NxTabsItemComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.tabItemDir = inject(NxTabsItemDirective);
        this.elementRef = inject(ElementRef);
        this.classes = signal(`${TabsSize.SMALL} ${TabsVariant.LIGHT}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: NxTabsItemComponent, isStandalone: true, selector: "nx-tabs-item", host: { attributes: { "role": "tab" }, properties: { "attr.tabindex": "tabItemDir.selected() ? 0 : (tabItemDir.disabled() ? \"\" : -1)", "class": "classes()", "attr.aria-selected": "tabItemDir.selected()", "attr.aria-disabled": "tabItemDir.disabled()" } }, usesInheritance: true, hostDirectives: [{ directive: NxTabsItemDirective, inputs: ["nxTabsItem", "nxTabsItem", "disabled", "disabled"], outputs: ["onSelect", "onSelect"] }], ngImport: i0, template: `<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(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{border:1px solid transparent;align-content:center;color:var(--nxc-light10-offset, var(--nxc-light10))}:host:hover:not(:host[aria-disabled=true]){color:var(--nxc-light8-offset, var(--nxc-light8));cursor:pointer}:host:focus-visible,:host[aria-selected=true]{color:var(--nxc-light4-offset, var(--nxc-light4))}:host[aria-disabled=true]{opacity:.3}:host.light{background:var(--nxc-dark5-offset, var(--nxc-dark5))}:host.dark{background:var(--nxc-dark3-offset, var(--nxc-dark3))}:host[aria-selected=true].light{background-color:var(--nxc-dark10-offset, var(--nxc-dark10))}:host[aria-selected=true].dark{background-color:var(--nxc-dark8-offset, var(--nxc-dark8))}:host:focus-visible:not([aria-disabled=true]).light{outline:none;border-color:var(--nxc-light10-offset, var(--nxc-light10))}:host:focus-visible:not([aria-disabled=true]).dark{outline:none;border-color:var(--nxc-light13-offset, var(--nxc-light13))}:host:not([aria-disabled=true]):not([aria-selected=true]).light{background-color:var(--nxc-dark5-offset, var(--nxc-dark5))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:not([aria-disabled=true]):not([aria-selected=true]).light:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3%))}}:host:not([aria-disabled=true]):not([aria-selected=true]).dark{background-color:var(--nxc-dark3-offset, var(--nxc-dark3))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:not([aria-disabled=true]):not([aria-selected=true]).dark:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3%))}}:host.small{padding:0 12px}:host.small{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.small{border-radius:4px}:host.large{padding:0 16px}:host.large{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.large{border-radius:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-tabs-item', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: NxTabsItemDirective,
                            inputs: ['nxTabsItem', 'disabled'],
                            outputs: ['onSelect'],
                        },
                    ], host: {
                        role: 'tab',
                        '[attr.tabindex]': 'tabItemDir.selected() ? 0 : (tabItemDir.disabled() ? "" : -1)',
                        '[class]': 'classes()',
                        '[attr.aria-selected]': 'tabItemDir.selected()',
                        '[attr.aria-disabled]': 'tabItemDir.disabled()',
                    }, styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{border:1px solid transparent;align-content:center;color:var(--nxc-light10-offset, var(--nxc-light10))}:host:hover:not(:host[aria-disabled=true]){color:var(--nxc-light8-offset, var(--nxc-light8));cursor:pointer}:host:focus-visible,:host[aria-selected=true]{color:var(--nxc-light4-offset, var(--nxc-light4))}:host[aria-disabled=true]{opacity:.3}:host.light{background:var(--nxc-dark5-offset, var(--nxc-dark5))}:host.dark{background:var(--nxc-dark3-offset, var(--nxc-dark3))}:host[aria-selected=true].light{background-color:var(--nxc-dark10-offset, var(--nxc-dark10))}:host[aria-selected=true].dark{background-color:var(--nxc-dark8-offset, var(--nxc-dark8))}:host:focus-visible:not([aria-disabled=true]).light{outline:none;border-color:var(--nxc-light10-offset, var(--nxc-light10))}:host:focus-visible:not([aria-disabled=true]).dark{outline:none;border-color:var(--nxc-light13-offset, var(--nxc-light13))}:host:not([aria-disabled=true]):not([aria-selected=true]).light{background-color:var(--nxc-dark5-offset, var(--nxc-dark5))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:not([aria-disabled=true]):not([aria-selected=true]).light:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).light:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark5-offset, var(--nxc-dark5)) h s calc(l - 3%))}}:host:not([aria-disabled=true]):not([aria-selected=true]).dark{background-color:var(--nxc-dark3-offset, var(--nxc-dark3))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + 6))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host:not([aria-disabled=true]):not([aria-selected=true]).dark:hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l + .06))}:host:not([aria-disabled=true]):not([aria-selected=true]).dark:active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark3-offset, var(--nxc-dark3)) h s calc(l - 3%))}}:host.small{padding:0 12px}:host.small{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.small{border-radius:4px}:host.large{padding:0 16px}:host.large{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.large{border-radius:5px}\n"] }]
        }] });

var Direction;
(function (Direction) {
    Direction["RIGHT"] = "right";
    Direction["LEFT"] = "left";
})(Direction || (Direction = {}));
class NxTabsKeyNavDirective {
    constructor() {
        this.contentChildren = contentChildren(NxTabsItemComponent, ...(ngDevMode ? [{ debugName: "contentChildren" }] : []));
        /**
         * Content children tab html elements.
         */
        this.tabs = computed(() => this.contentChildren().map(t => t.elementRef.nativeElement), ...(ngDevMode ? [{ debugName: "tabs" }] : []));
    }
    onKeyDown(event) {
        let index;
        if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
            index = this.getNewIndex(Direction.LEFT);
        }
        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
            index = this.getNewIndex(Direction.RIGHT);
        }
        if (event.key === 'Home') {
            index = this.getNewIndex(Direction.RIGHT, -1);
        }
        if (event.key === 'End') {
            index = this.getNewIndex(Direction.LEFT, this.tabs().length);
        }
        if (index !== undefined) {
            this.focusTab(event, index);
        }
    }
    /**
     * Gets the index of the currently focused tab element.
     * Returns the index of the active tab, or -1 if no tab is focused.
     */
    getCurrentFocusTabIndex() {
        return this.tabs().findIndex(tab => tab === document.activeElement);
    }
    getNewIndex(direction = Direction.RIGHT, startFrom = this.getCurrentFocusTabIndex()) {
        const tabs = this.tabs();
        let index = startFrom;
        while (startFrom !== (direction === Direction.RIGHT ? ++index : --index)) {
            if (index >= tabs.length) {
                index = 0;
            }
            if (index <= -1) {
                index = tabs.length - 1;
            }
            if (!booleanAttribute(tabs[index]?.getAttribute('aria-disabled'))) {
                return index;
            }
        }
        return index;
    }
    /**
     * Focuses a tab at the specified index.
     */
    focusTab(event, index) {
        event.preventDefault();
        this.tabs()[index]?.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsKeyNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.6", type: NxTabsKeyNavDirective, isStandalone: true, selector: "[nxTabsKeyNav]", host: { listeners: { "keydown": "onKeyDown($event)" } }, queries: [{ propertyName: "contentChildren", predicate: NxTabsItemComponent, isSignal: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsKeyNavDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxTabsKeyNav]',
                    standalone: true,
                }]
        }], propDecorators: { onKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class NxTabsDirective {
    constructor() {
        /**
         * The currently selected tab data. Can be set to select a specific tab or read to get the current selection's data.
         */
        this.nxSelectedTab = model(...(ngDevMode ? [undefined, { debugName: "nxSelectedTab" }] : []));
        /**
         * Content children tabs items.
         */
        this.contentTabs = contentChildren(NxTabsItemDirective, ...(ngDevMode ? [{ debugName: "contentTabs" }] : []));
        /**
         * Computed property that returns the currently selected tab directive.
         * Finds the first tab item that has its selected state set to true.
         */
        this.selectedDirective = computed(() => this.contentTabs().find(tab => tab.selected()), ...(ngDevMode ? [{ debugName: "selectedDirective" }] : []));
        /**
         * Effect that handles tab selection events.
         * Sets up subscriptions to listen for tab selection events and manages the selected state
         * of tab items. When a tab is selected, it deselects the currently selected tab and
         * selects the new one.
         */
        this.selectTabHandler = effect(onCleanup => {
            const tabs = this.contentTabs();
            const subscriptions = [];
            tabs.forEach(tab => {
                const subscription = tab.onSelect.subscribe(tabDirective => {
                    this.selectedDirective()?.selected.update(() => false);
                    tabDirective.selected.update(() => true);
                });
                subscriptions.push(subscription);
            });
            // Cleanup subscriptions when effect re-runs or component is destroyed
            onCleanup(() => {
                subscriptions.forEach(sub => sub.unsubscribe());
            });
        }, ...(ngDevMode ? [{ debugName: "selectTabHandler" }] : []));
        /**
         * Effect that synchronizes the nxSelectedTab model with the currently selected tab directive.
         * Updates the model value whenever a different tab becomes selected.
         */
        this.syncNxSelectedTab = effect(() => {
            const selectedDir = this.selectedDirective();
            if (selectedDir) {
                this.nxSelectedTab.update(() => selectedDir?.nxTabsItem());
            }
        }, ...(ngDevMode ? [{ debugName: "syncNxSelectedTab" }] : []));
        /**
         * Effect that synchronizes the selected tab state with the nxSelectedTab model.
         * Handles the initialization and updating of tab selection when the model value changes
         * or when no tab is currently selected. If no directive is selected, it either selects
         * the tab matching the model value or defaults to the first available non-disabled tab.
         */
        this.syncSelectedTab = effect(() => {
            const selectedDir = this.selectedDirective();
            const selectedTab = this.nxSelectedTab();
            const contentTabs = this.contentTabs();
            // Model changed externally while a tab is already selected — switch to the matching tab
            if (selectedDir && selectedTab && selectedDir.nxTabsItem() !== selectedTab) {
                const matchingTab = untracked(() => contentTabs.find(tab => tab.nxTabsItem() === selectedTab && !tab.disabled()));
                if (matchingTab) {
                    selectedDir.selected.update(() => false);
                    matchingTab.selected.update(() => true);
                }
                return;
            }
            // no directive is currently selected
            // No value provide or selected directive was disabled or removed
            if (!selectedDir) {
                let setDefault = true;
                // the model input has value defined ( se/update selected value on init )
                // or it is storing a not available value
                if (selectedTab) {
                    const tabMap = untracked(() => contentTabs.reduce((map, tab) => {
                        if (tab.nxTabsItem() && !tab.disabled()) {
                            map.set(tab.nxTabsItem(), tab);
                        }
                        return map;
                    }, new Map()));
                    if (!tabMap.size) {
                        // no tabs are available in the collection. no value can be set
                        setDefault = false;
                    }
                    else if (!tabMap.get(selectedTab)) {
                        // no directive for selected tab is available in the list of directives
                        // make default selection
                        setDefault = true;
                    }
                    else {
                        // found matching directive for the selected value
                        // update directive state to selected
                        tabMap.get(selectedTab).selected.update(() => true);
                        setDefault = false;
                    }
                }
                if (setDefault || !selectedTab) {
                    const firstAvailable = untracked(() => contentTabs.find(tab => !tab.disabled()));
                    if (firstAvailable) {
                        firstAvailable.selected.update(() => true);
                    }
                }
                if (!setDefault && selectedTab) {
                    // no directive to select, unset selected value
                    this.nxSelectedTab.set(undefined);
                }
            }
            if (!selectedTab && selectedDir) {
                this.nxSelectedTab.update(() => selectedDir.nxTabsItem());
            }
        }, ...(ngDevMode ? [{ debugName: "syncSelectedTab" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.6", type: NxTabsDirective, isStandalone: true, selector: "[nxSelectedTab]", inputs: { nxSelectedTab: { classPropertyName: "nxSelectedTab", publicName: "nxSelectedTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nxSelectedTab: "nxSelectedTabChange" }, queries: [{ propertyName: "contentTabs", predicate: NxTabsItemDirective, isSignal: true }], exportAs: ["nxSelectedTab"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[nxSelectedTab]',
                    standalone: true,
                    exportAs: 'nxSelectedTab',
                }]
        }] });

class NxTabsComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /**
         * The size of the tab container and buttons.
         * @default 'small'
         * @example
         * <nx-button size="large"></nx-button>
         */
        this.size = input(TabsSize.SMALL, ...(ngDevMode ? [{ debugName: "size" }] : []));
        /**
         * The variant of the container and buttons.
         * @default 'light'
         * @example
         * <nx-button variant="light"></nx-button>
         */
        this.variant = input(TabsVariant.LIGHT, ...(ngDevMode ? [{ debugName: "variant" }] : []));
        this.classes = computed(() => {
            return `${this.size()} ${this.variant()}`;
        }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
        /**
         * Content children tab items.
         */
        this.contentTabs = contentChildren(NxTabsItemComponent, ...(ngDevMode ? [{ debugName: "contentTabs", descendants: true }] : [{ descendants: true }]));
        this.updateInputsEffect = effect(() => {
            this.contentTabs().forEach(tab => {
                tab.classes.update(() => this.classes());
            });
        }, ...(ngDevMode ? [{ debugName: "updateInputsEffect" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: NxTabsComponent, isStandalone: true, selector: "nx-tabs", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist", "nxTabsKeyNav": "" }, properties: { "class": "classes()" } }, queries: [{ propertyName: "contentTabs", predicate: NxTabsItemComponent, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: NxTabsDirective, inputs: ["nxSelectedTab", "nxSelectedTab"], outputs: ["nxSelectedTabChange", "nxSelectedTabChange"] }, { directive: NxTabsKeyNavDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:flex;flex-wrap:wrap;width:max-content;padding:4px;border-radius:6px}:host.small{height:40px}:host.large{height:54px}:host.light{background:var(--nxc-dark5-offset, var(--nxc-dark5))}:host.dark{background:var(--nxc-dark3-offset, var(--nxc-dark3))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-tabs', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: NxTabsDirective,
                            inputs: ['nxSelectedTab'],
                            outputs: ['nxSelectedTabChange'],
                        },
                        NxTabsKeyNavDirective,
                    ], host: {
                        role: 'tablist',
                        nxTabsKeyNav: '',
                        '[class]': 'classes()',
                    }, styles: [":host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:flex;flex-wrap:wrap;width:max-content;padding:4px;border-radius:6px}:host.small{height:40px}:host.large{height:54px}:host.light{background:var(--nxc-dark5-offset, var(--nxc-dark5))}:host.dark{background:var(--nxc-dark3-offset, var(--nxc-dark3))}\n"] }]
        }] });

/**
 * A reorderable list component built on Angular CDK drag-drop.
 *
 * Sorting is always active. The component is list-content-only: it does not include
 * a search input or action buttons. Pass an `[itemTemplate]` to define the item template.
 *
 * Filtering is handled externally by the consumer. Pass a `hiddenPredicate` to mark
 * certain items as hidden — they remain in the DOM (preserving sort order) but are
 * not visible. Sorting is automatically disabled while any items are hidden.
 *
 * @example
 * ```html
 * <ng-template #itemTpl let-item>
 *   <nx-checkbox-v2 [(value)]="item.enabled"></nx-checkbox-v2>
 *   <span>{{ item.name }}</span>
 * </ng-template>
 *
 * <nx-sortable-list [items]="items" [trackBy]="trackById" [hiddenPredicate]="filterFn" [itemTemplate]="itemTpl">
 * </nx-sortable-list>
 * ```
 */
class NxSortableListComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        /** The data items to render. */
        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
        /** Function to extract a unique string ID from each item. Used for sort tracking. */
        this.trackByFn = input.required(...(ngDevMode ? [{ debugName: "trackByFn", alias: 'trackBy' }] : [{ alias: 'trackBy' }]));
        /**
         * The current sort order — an array of item IDs.
         * Supports two-way binding: `[(sortOrder)]="myOrder"`.
         *
         * When provided, items are reordered to match. IDs not found in `items` are ignored.
         * New items not present in `sortOrder` are appended at the end.
         */
        this.sortOrder = model(null, ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
        /**
         * A predicate that marks individual items as hidden (i.e. filtered out by the consumer).
         * Hidden items remain in the DOM to preserve sort-order stability but are not visible.
         * Sorting is automatically disabled while any predicate is set.
         * Set to `null` (default) to show all items.
         */
        this.hiddenPredicate = input(null, ...(ngDevMode ? [{ debugName: "hiddenPredicate" }] : []));
        /**
         * A per-item predicate that determines whether a specific item can be dragged.
         * Items for which this returns `false` will not show a drag handle.
         * Defaults to allowing all items.
         */
        this.draggablePredicate = input(undefined, ...(ngDevMode ? [{ debugName: "draggablePredicate" }] : []));
        /**
         * Emits a detailed event whenever the sort order changes via drag-and-drop.
         * The `sortOrder` model is also updated automatically.
         */
        this.onSortOrderChanged = output();
        /** Template ref used to render each item. Receives `$implicit: T` and `index: number`. */
        this.itemTemplate = input.required(...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
        /** Optional template ref shown when the list is empty or all items are hidden. */
        this.emptyTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
        this.variableColors = computed(() => ({
            '--drag-shadow-one': generateCssVariableName('core', 'dark1', 2),
            '--drag-shadow-two': generateCssVariableName('core', 'dark1', 3),
        }), ...(ngDevMode ? [{ debugName: "variableColors" }] : []));
        /**
         * Whether sorting is effectively active.
         * Always true unless a `hiddenPredicate` is set (filter is active).
         */
        this.sortingEnabled = computed(() => this.hiddenPredicate() === null, ...(ngDevMode ? [{ debugName: "sortingEnabled" }] : []));
        /** Items after applying the `sortOrder` input. */
        this.sortedItems = computed(() => {
            const items = this.items();
            const order = this.sortOrder();
            return order ? this.applySortOrder(items, order) : items;
        }, ...(ngDevMode ? [{ debugName: "sortedItems" }] : []));
        /**
         * Whether every item in the list is hidden by the predicate, or the list is empty.
         * Used to show the empty-state slot.
         */
        this.allItemsHidden = computed(() => {
            const items = this.sortedItems();
            if (items.length === 0) {
                return true;
            }
            const predicate = this.hiddenPredicate();
            return predicate !== null && items.every(item => predicate(item));
        }, ...(ngDevMode ? [{ debugName: "allItemsHidden" }] : []));
    }
    onDrop(event) {
        const items = [...this.sortedItems()];
        moveItemInArray(items, event.previousIndex, event.currentIndex);
        const trackBy = this.trackByFn();
        const newOrder = items.map(item => trackBy(item));
        const movedItemId = trackBy(items[event.currentIndex]);
        this.sortOrder.set(newOrder);
        this.onSortOrderChanged.emit({
            sortOrder: newOrder,
            movedItemId,
            previousIndex: event.previousIndex,
            currentIndex: event.currentIndex,
        });
    }
    isItemHidden(item) {
        const predicate = this.hiddenPredicate();
        return predicate ? predicate(item) : false;
    }
    isDraggable(item) {
        const predicate = this.draggablePredicate();
        return predicate ? predicate(item) : true;
    }
    getItemContext(item, index) {
        return { $implicit: item, index };
    }
    applySortOrder(items, sortOrder) {
        const trackBy = this.trackByFn();
        const idToItem = new Map(items.map(item => [trackBy(item), item]));
        const sorted = [];
        for (const id of sortOrder) {
            const item = idToItem.get(id);
            if (item !== undefined) {
                sorted.push(item);
                idToItem.delete(id);
            }
        }
        // Append any items that weren't in sortOrder (newly added items)
        for (const item of idToItem.values()) {
            sorted.push(item);
        }
        return sorted;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSortableListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: NxSortableListComponent, isStandalone: true, selector: "nx-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackBy", isSignal: true, isRequired: true, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, hiddenPredicate: { classPropertyName: "hiddenPredicate", publicName: "hiddenPredicate", isSignal: true, isRequired: false, transformFunction: null }, draggablePredicate: { classPropertyName: "draggablePredicate", publicName: "draggablePredicate", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortOrder: "sortOrderChange", onSortOrderChanged: "onSortOrderChanged" }, usesInheritance: true, ngImport: i0, template: "<div\n    cdkDropList\n    class=\"nx-sortable-list\"\n    [cdkDropListSortingDisabled]=\"!sortingEnabled()\"\n    (cdkDropListDropped)=\"onDrop($event)\"\n>\n    @for (item of sortedItems(); track trackByFn()(item); let idx = $index) {\n        <div\n            cdkDrag\n            class=\"nx-sortable-list-item\"\n            [hidden]=\"isItemHidden(item)\"\n            [cdkDragDisabled]=\"!sortingEnabled() || !isDraggable(item)\"\n            [class.nx-sortable-list-item__drag-disabled]=\"!isDraggable(item)\"\n        >\n            <ng-template\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"getItemContext(item, idx)\"\n            ></ng-template>\n\n            @if (sortingEnabled() && isDraggable(item)) {\n                <nx-icon\n                    cdkDragHandle\n                    data-testid=\"drag-handle\"\n                    class=\"nx-sortable-list-item__handle\"\n                    icon=\"List20X20\"\n                    useCurrentColor\n                    preserveSize\n                />\n            }\n\n            <ng-template cdkDragPlaceholder>\n                <div class=\"nx-sortable-list-item nx-sortable-list-item__placeholder\"></div>\n            </ng-template>\n        </div>\n    }\n\n    @if (allItemsHidden() && emptyTemplate()) {\n        <div class=\"nx-sortable-list__empty\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate()\"></ng-template>\n        </div>\n    }\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:block;width:100%}:host .nx-sortable-list{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}:host .nx-sortable-list__empty{display:flex;align-items:center;justify-content:center}:host .nx-sortable-list-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:44px;border-radius:6px;padding:10px 12px;width:100%}:host .nx-sortable-list-item{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-sortable-list-item{color:var(--nxc-light4-offset, var(--nxc-light4))}:host .nx-sortable-list-item .nx-sortable-list-item__handle{color:var(--nxc-light13-offset, var(--nxc-light13));cursor:grab}:host .nx-sortable-list-item .nx-sortable-list-item__handle:active{cursor:grabbing}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled){background-color:var(--nxc-dark4-offset, var(--nxc-dark4))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3%))}}:host .nx-sortable-list-item.nx-sortable-list-item__drag-disabled{background-color:var(--nxc-dark2-offset, var(--nxc-dark2))}:host .nx-sortable-list-item[hidden]{display:none}:host .nx-sortable-list-item .nx-sortable-list-item__drag-disabled .nx-sortable-list-item__handle{display:none}:host .nx-sortable-list-item__placeholder{border:1px dashed var(--nxc-dark9-offset, var(--nxc-dark9));border-radius:4px;opacity:.4}:host .cdk-drag-animating{transition:transform .2s ease}:host .nx-sortable-list.cdk-drop-list-dragging .nx-sortable-list-item:not(.cdk-drag-placeholder){transition:transform .2s ease}.cdk-drag-preview{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:44px;border-radius:6px;padding:10px 12px;width:100%}.cdk-drag-preview{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)}.cdk-drag-preview{color:var(--nxc-light4-offset, var(--nxc-light4))}.cdk-drag-preview .nx-sortable-list-item__handle{color:var(--nxc-light13-offset, var(--nxc-light13));cursor:grab}.cdk-drag-preview .nx-sortable-list-item__handle:active{cursor:grabbing}.cdk-drag-preview{background:var(--nxc-dark6-offset, var(--nxc-dark6));box-shadow:0 2px 4px var(--drag-shadow-one),0 4px 16px var(--drag-shadow-two)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxIconComponent, selector: "nx-icon", inputs: ["icon", "preserveInline", "preserveSize", "colorOverrides", "useCurrentColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: NxSortableListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nx-sortable-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        CdkDropList,
                        CdkDrag,
                        CdkDragHandle,
                        CdkDragPlaceholder,
                        NgTemplateOutlet,
                        NxIconComponent,
                    ], template: "<div\n    cdkDropList\n    class=\"nx-sortable-list\"\n    [cdkDropListSortingDisabled]=\"!sortingEnabled()\"\n    (cdkDropListDropped)=\"onDrop($event)\"\n>\n    @for (item of sortedItems(); track trackByFn()(item); let idx = $index) {\n        <div\n            cdkDrag\n            class=\"nx-sortable-list-item\"\n            [hidden]=\"isItemHidden(item)\"\n            [cdkDragDisabled]=\"!sortingEnabled() || !isDraggable(item)\"\n            [class.nx-sortable-list-item__drag-disabled]=\"!isDraggable(item)\"\n        >\n            <ng-template\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"getItemContext(item, idx)\"\n            ></ng-template>\n\n            @if (sortingEnabled() && isDraggable(item)) {\n                <nx-icon\n                    cdkDragHandle\n                    data-testid=\"drag-handle\"\n                    class=\"nx-sortable-list-item__handle\"\n                    icon=\"List20X20\"\n                    useCurrentColor\n                    preserveSize\n                />\n            }\n\n            <ng-template cdkDragPlaceholder>\n                <div class=\"nx-sortable-list-item nx-sortable-list-item__placeholder\"></div>\n            </ng-template>\n        </div>\n    }\n\n    @if (allItemsHidden() && emptyTemplate()) {\n        <div class=\"nx-sortable-list__empty\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate()\"></ng-template>\n        </div>\n    }\n</div>\n", styles: ["@font-face{font-display:swap;font-family:RobotoFlex;font-style:normal;font-weight:100 1000;font-stretch:100%;src:url(./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-main-regular-font-weight, 400);--nxc-medium-font-weight: var(--nxc-main-medium-font-weight, 500);--nxc-font-optical-sizing: var(--nxc-main-font-optical-sizing, auto);--nxc-font-grade: var(--nxc-main-font-grade, 0);--nxc-font-width: var(--nxc-main-font-width, 100);--nxc-font-thick-stroke: var(--nxc-main-font-thick-stroke, 100);--nxc-font-thin-stroke: var(--nxc-main-font-thin-stroke, 100);--nxc-font-slant: var(--nxc-main-font-slant, 0);--nxc-font-rendering: var(--nxc-main-font-rendering, geometricPrecision)}:host,:host *,:host :after,:host :before{box-sizing:border-box}:host{display:block;width:100%}:host .nx-sortable-list{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}:host .nx-sortable-list__empty{display:flex;align-items:center;justify-content:center}:host .nx-sortable-list-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:44px;border-radius:6px;padding:10px 12px;width:100%}:host .nx-sortable-list-item{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-sortable-list-item{color:var(--nxc-light4-offset, var(--nxc-light4))}:host .nx-sortable-list-item .nx-sortable-list-item__handle{color:var(--nxc-light13-offset, var(--nxc-light13));cursor:grab}:host .nx-sortable-list-item .nx-sortable-list-item__handle:active{cursor:grabbing}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled){background-color:var(--nxc-dark4-offset, var(--nxc-dark4))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + 6))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3))}@supports (color: hsl(from red h s calc(l + 1%))){:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):hover:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):focus-visible:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l + .06))}:host .nx-sortable-list-item:not(.nx-sortable-list-item__drag-disabled):active:not([disabled]):not([aria-disabled=true]){background-color:hsl(from var(--nxc-dark4-offset, var(--nxc-dark4)) h s calc(l - 3%))}}:host .nx-sortable-list-item.nx-sortable-list-item__drag-disabled{background-color:var(--nxc-dark2-offset, var(--nxc-dark2))}:host .nx-sortable-list-item[hidden]{display:none}:host .nx-sortable-list-item .nx-sortable-list-item__drag-disabled .nx-sortable-list-item__handle{display:none}:host .nx-sortable-list-item__placeholder{border:1px dashed var(--nxc-dark9-offset, var(--nxc-dark9));border-radius:4px;opacity:.4}:host .cdk-drag-animating{transition:transform .2s ease}:host .nx-sortable-list.cdk-drop-list-dragging .nx-sortable-list-item:not(.cdk-drag-placeholder){transition:transform .2s ease}.cdk-drag-preview{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:44px;border-radius:6px;padding:10px 12px;width:100%}.cdk-drag-preview{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)}.cdk-drag-preview{color:var(--nxc-light4-offset, var(--nxc-light4))}.cdk-drag-preview .nx-sortable-list-item__handle{color:var(--nxc-light13-offset, var(--nxc-light13));cursor:grab}.cdk-drag-preview .nx-sortable-list-item__handle:active{cursor:grabbing}.cdk-drag-preview{background:var(--nxc-dark6-offset, var(--nxc-dark6));box-shadow:0 2px 4px var(--drag-shadow-one),0 4px 16px var(--drag-shadow-two)}\n"] }]
        }] });

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

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

export { AsyncAction, BaseComponent, BaseControlValueAccessor, CalendarColors, ColorGenerator, ControlState, ErrorMatches, LoadingSpinnerComponent, NX_ANCHOR_HOST, NX_BASE_ERROR_MATCHES, NX_BUTTON_HOST, NX_NOTIFICATIONS_DEFAULT_DURATION_MS, NX_NOTIFICATIONS_DEFAULT_TYPE, NX_THEME_MODE, NxAnchorComponent, NxApplyActionParentDirective, NxApplyActionTargetDirective, NxAsyncSubmitButtonComponent, NxAsyncSubmitButtonModule, NxButtonComponent, NxCalendarComponent, NxCheckboxComponent, NxComboboxComponent, NxComboboxModule, NxComboboxOptionComponent, NxComboboxToken, NxContextMenuComponent, NxControlMessageComponent, NxControlMessageToken, NxControlMessagesComponent, NxControlMessagesToken, NxDetailsComponent, NxExampleComponent, NxFormFieldComponent, NxFormFieldControlDirective, NxFormFieldModule, NxFormFieldToken, NxFormObserverDirective, NxIconComponent, NxInputComponent, NxInputFieldComponent, NxInputFieldModule, NxInputMaskToken, NxItemContainerComponent, NxLabelComponent, NxLayoutComponent, NxLoadingSkeletonDirective, NxLoadingSpinnerDirective, NxMenuProjectionDirective, NxModalComponent, NxMultiSelectComponent, NxMultiSelectModule, NxMultiSelectPlaceholderToken, NxNotificationsComponent, NxNotificationsService, NxOptionComponent, NxOptionDividerComponent, NxPasswordFieldComponent, NxPasswordFieldModule, NxPlaceholderButtonsComponent, NxPlaceholderComponent, NxPlaceholderTextComponent, NxPlaybackSliderComponent, NxPseudoActiveDirective, NxRadioComponent, NxRadioGroupComponent, NxSearchHighlightComponent, NxSelectComponent, NxSelectModule, NxSelectPlaceholderToken, NxSelectZeroOptionsPlaceholderToken, NxSettingSliderComponent, NxSideSheetComponent, NxSideSheetRegistry, NxSideSheetService, NxSortableListComponent, NxSortableListModule, NxStatusBadgeComponent, NxStepComponent, NxStepIndicatorComponent, NxStepSubtitleDirective, NxStepTitleDirective, NxStyleWrapperComponent, NxSubmitButtonComponent, NxSubmitButtonModule, NxSwappedAbstractBaseDirective, NxTabsComponent, NxTabsDirective, NxTabsItemComponent, NxTabsItemDirective, NxTabsKeyNavDirective, NxTagComponent, NxTemplatePlaceholderDirective, NxThemeModeDirective, NxThemeProviderService, NxToggleComponent, NxUncaughtErrorHandler, NxUncaughtErrorHandlerToken, NxVolumeSliderComponent, NxWizardButtonsDirective, NxWizardCompletedDirective, NxWizardComponent, NxWizardExitButtonDirective, NxWizardTitleDirective, SIDE_SHEET_DATA, SIDE_SHEET_REF, SIDE_SHEET_SIZES, SideSheetRef, WizardStepState, __NxUseFormStyleDirective, additionalColors, attentionColors, brandColors, colorsWithoutShade, contrastColors, createAsyncAction, extendErrorMatches, extendNxBaseErrorMatches, extractOpacity, generateCssVariableName, generateHslaString, generateHslaStringUsingHct, generateShades, generatedThemeColors, getHexStringFromTheme, getTonalPaletteInstance, hctToHsl, highContrastShades, initialOptions, initialShade, initialTheme, isHexString, isHexStrings, isSvgFilterUrl, isThemeColorWithoutShade, opacityDelimiter, opacityMap, registerAsCustomElement, registerCustomElementsFromMapping, registerStyleWrapper, shadeDelimiter, shades, stepCount, themeColors, withGeneratedColors };
//# sourceMappingURL=networkoptix-nx-components.mjs.map
