import * as _angular_core from '@angular/core';
import { InjectionToken, Signal, ElementRef, EffectRef, ViewContainerRef, TemplateRef, Type, QueryList, ModelSignal, OnDestroy, AfterContentInit, AfterViewInit, DestroyRef, OnInit, InputSignal, OutputEmitterRef, Injector, WritableSignal } from '@angular/core';
import * as rxjs from 'rxjs';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { Portal, TemplatePortal, ComponentType, DomPortal } from '@angular/cdk/portal';
import { CdkDragMove, CdkDragRelease, CdkDragDrop } from '@angular/cdk/drag-drop';
import { NavigationStart, ActivatedRoute, ActivatedRouteSnapshot, RouterLink } from '@angular/router';
import * as lodash from 'lodash';
import { TonalPalette, Hct } from '@material/material-color-utilities';
import { NxIconOrName, NxIconEnum, NxIcons } from 'nx-icons';
import { ControlValueAccessor, NgControl, FormGroupDirective, FormGroup, Validator, AbstractControl, ValidationErrors, RadioControlValueAccessor } from '@angular/forms';
import * as _networkoptix_nx_components from '@networkoptix/nx-components';
import * as nx_shared from 'nx-shared';
import { Highlightable } from '@angular/cdk/a11y';
import * as _angular_cdk_overlay_module_d_BvvR6Y05 from '@angular/cdk/overlay-module.d-BvvR6Y05';
import { CdkStep, CdkStepper } from '@angular/cdk/stepper';

declare const brandColors: readonly ["brand", "brandBg"];
type BrandColors = typeof brandColors;
declare const additionalColors: readonly ["additionalPink", "additionalPurple", "additionalDeepPurple", "additionalIndigo", "additionalLightBlue", "additionalCyan", "additionalTeal", "additionalLightGreen", "additionalLime", "additionalAmber", "additionalOrange", "additionalDeepOrange"];
type AdditionalColors = typeof additionalColors;
declare const attentionColors: readonly ["attentionErrorRed", "attentionWarningYellow", "attentionInfoBlue", "attentionSuccessGreen"];
type AttentionColors = typeof attentionColors;
declare const contrastColors: readonly ["contrastBlue", "contrastYellow", "contrastOrange", "contrastGreen", "contrastDeepPurple", "contrastPink", "contrastCyan", "contrastPurple"];
type ContrastColors = typeof contrastColors;
declare const themeColors: readonly ["brand", "brandBg", "additionalPink", "additionalPurple", "additionalDeepPurple", "additionalIndigo", "additionalLightBlue", "additionalCyan", "additionalTeal", "additionalLightGreen", "additionalLime", "additionalAmber", "additionalOrange", "additionalDeepOrange", "attentionErrorRed", "attentionWarningYellow", "attentionInfoBlue", "attentionSuccessGreen", "contrastBlue", "contrastYellow", "contrastOrange", "contrastGreen", "contrastDeepPurple", "contrastPink", "contrastCyan", "contrastPurple"];
type GeneratedHandler = (theme: ThemeDefinition, colorVariable: CssColorVariables, options: ThemeOptions) => [Hue, Percentage, Percentage];
type Initial = 'initial';
type ConfigurableThemeColors = (typeof themeColors)[number];
declare const generatedThemeColors: readonly ["core"];
type GeneratedThemeColors = (typeof generatedThemeColors)[number];
/**
 * Theme Base Colors
 */
type ThemeColors = (typeof themeColors)[number] | GeneratedThemeColors;
type ShadeRange = IntRange<1, 19>;
/**
 * Shade offset keys
 */
type Shades = `${'dark' | 'light'}${ShadeRange}` | Initial;
/**
 * Shade offset values
 */
type ShadeValues = IntRange<0, 101> | Initial;
declare const initialShade: {
    readonly key: "initial";
    readonly value: "initial";
};
type ShadeDefinition = {
    key: Shades;
    value: ShadeValues;
} | typeof initialShade;
type ShadeDefinitions = ShadeDefinition[];
declare const stepCount: number;
declare const generateShades: (every?: number) => ShadeDefinitions;
declare const shades: ShadeDefinitions;
declare const highContrastShades: ShadeDefinitions;
declare const colorsWithoutShade: readonly [];
type ThemeColorsWithoutShade = (typeof colorsWithoutShade)[number];
type ThemeColorsWithShade = Exclude<ThemeColors, ThemeColorsWithoutShade>;
declare const isThemeColorWithoutShade: (color: unknown) => color is ThemeColorsWithoutShade;
declare const opacityMap: {
    readonly 1: 5;
    readonly 2: 10;
    readonly 3: 15;
    readonly 4: 20;
    readonly 5: 25;
    readonly 6: 30;
    readonly 7: 35;
    readonly 8: 40;
    readonly 9: 45;
    readonly 10: 50;
    readonly 11: 55;
    readonly 12: 60;
    readonly 13: 65;
    readonly 14: 70;
    readonly 15: 75;
    readonly 16: 80;
    readonly 17: 85;
    readonly 18: 90;
    readonly 19: 95;
    readonly 20: 100;
};
/**
 * Opacity keys
 */
type Opacity = keyof typeof opacityMap;
/**
 * Opacity values
 */
type OpacityValues = (typeof opacityMap)[Opacity];
type HexString = `#${string}`;
type HexStrings = `#${string}`[];
declare const isHexString: (hex: string[] | string) => hex is HexString;
declare const isHexStrings: (hex: string[] | string) => hex is HexStrings;
declare const isSvgFilterUrl: (color: string) => boolean;
type ThemeDefinition<Theme extends ThemeColors = ConfigurableThemeColors> = Record<Theme, HexString | HexStrings>;
type ThemeDefinitionWithGenerated = ThemeDefinition<ConfigurableThemeColors | GeneratedThemeColors>;
declare const shadeDelimiter: "_shade_";
type ShadeDelimiter = typeof shadeDelimiter;
declare const opacityDelimiter: "_opacity_";
type OpacityDelimiter = typeof opacityDelimiter;
type CssColorVariable<Color extends ThemeColors, Shade extends Shades = 'initial', OpacityValue extends Opacity = 20> = `${Color}${ShadeDelimiter}${Shade}${OpacityDelimiter}${OpacityValue}`;
type CssColorVariables = CssColorVariable<ThemeColorsWithShade, Shades, Opacity> | CssColorVariable<ThemeColorsWithoutShade, 'initial', Opacity>;
type GeneratedTheme = Record<CssColorVariables, HslaString>;
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
type Hue = IntRange<0, 361>;
type Percentage = IntRange<0, 101>;
type HslaString = `hsla(${string})`;
type AllowedOffset = IntRange<0, 16>;
type BackgroundLuminosity = IntRange<0, 30>;
interface ThemeOptions {
    offset?: AllowedOffset;
    inverse?: boolean;
    highContrast?: boolean;
    coreSaturation?: Percentage;
    backgroundLuminosity?: BackgroundLuminosity;
    useHct?: boolean;
    ignoreInverseForOffset?: boolean;
    matchClientTheme?: boolean;
}
type ThemeWithOptions<PartialColors extends boolean = false, Theme = PartialColors extends true ? Partial<ThemeDefinition> : ThemeDefinition> = {
    theme: Theme;
    options?: ThemeOptions;
};
type ThemeWithGeneratedAndOptions = {
    theme: ThemeDefinitionWithGenerated;
    options?: ThemeOptions;
};
/**
 * Eventually add loader
 */
declare const initialTheme: ThemeDefinition;
declare const initialOptions: ThemeOptions;

/**
 * Theme mode for components.
 *
 * - `'light'` / `'dark'`: explicitly lock the component (and its subtree) to that mode
 * - `'global'`: lock to the global theme defined in `index.html`, ignoring any ancestor lock
 * - `'inherit'`: follow the nearest ancestor's lock, or fall back to the global theme
 *
 * `'inherit'` is the default.
 */
type ThemeMode = 'light' | 'dark' | 'global' | 'inherit';
/**
 * 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.
 */
declare const NX_THEME_MODE: InjectionToken<Signal<ThemeMode>>;

declare class NxThemeProviderService {
    private colorGenerator;
    private syncWithClient$;
    private readonly theme;
    currentTheme: _angular_core.Signal<{
        theme: ThemeDefinition<ThemeColors>;
        options: ThemeOptions;
    }>;
    readonly colors: _angular_core.Signal<GeneratedTheme>;
    updateThemeOptions(options: ThemeOptions): void;
    updateThemeColor(theme: Partial<ThemeDefinition>): void;
    updateThemeColor(colorName: ThemeColors, colorValue: HexString): void;
    toggleTheme(inverse?: boolean): void;
    getColorsWithThemeOverride(options: ThemeOptions): GeneratedTheme;
    private twoWaySyncChannel;
    private iframeThemeProvider;
    private parentThemeConsumer;
    private notify;
    setBackgroundColors(): void;
    private updateStorybookBackground;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxThemeProviderService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxThemeProviderService>;
}

declare class BaseComponent {
    /**
     * The element reference is mostly used for handling theme updates.
     */
    protected elRef: ElementRef<HTMLElement>;
    /**
     * The theme provider is a singleton used to unify the theme across the application.
     */
    protected themeProvider: 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.
     */
    protected effectiveThemeMode: Signal<ThemeMode> | null;
    /**
     * @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.
     */
    targetSurface: _angular_core.InputSignal<IntRange<1, 11>>;
    /**
     * 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.
     */
    private localShadeOffset;
    /**
     * 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.
     */
    private static ALLOWED_LOCAL_SHADE_OFFSETS;
    /**
     * Override this to provide custom non-mode theme options (e.g. `useHct`, `coreSaturation`,
     * `offset`). Mode (`inverse`) is owned by `themeMode` — setting `inverse` here is ignored
     * when a `themeMode` lock is in effect.
     */
    protected themeOptionOverride?: Signal<ThemeOptions | undefined>;
    /**
     * 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);
     *   });
     * ```
     */
    protected variableColors: Signal<Record<string, CssColorVariables | 'currentColor' | 'initial'>>;
    /** Example
     * ```
     *   override fontVariables = computed(() => ({
     *      '--nxc-main-font-family': 'Roboto',
     *      '--nxc-main-font-generic': 'sans-serif',
     *      } as const));
     * ```
     */
    protected fontVariables: Signal<Record<string, string | number>>;
    protected readonly commonColors: {
        readonly '--nxc-brand': "brand_shade_initial_opacity_20";
        readonly '--nxc-dark1': "core_shade_dark1_opacity_20";
        readonly '--nxc-dark2': "core_shade_dark2_opacity_20";
        readonly '--nxc-dark3': "core_shade_dark3_opacity_20";
        readonly '--nxc-dark4': "core_shade_dark4_opacity_20";
        readonly '--nxc-dark5': "core_shade_dark5_opacity_20";
        readonly '--nxc-dark6': "core_shade_dark6_opacity_20";
        readonly '--nxc-dark7': "core_shade_dark7_opacity_20";
        readonly '--nxc-dark8': "core_shade_dark8_opacity_20";
        readonly '--nxc-dark9': "core_shade_dark9_opacity_20";
        readonly '--nxc-dark10': "core_shade_dark10_opacity_20";
        readonly '--nxc-dark11': "core_shade_dark11_opacity_20";
        readonly '--nxc-dark12': "core_shade_dark12_opacity_20";
        readonly '--nxc-dark13': "core_shade_dark13_opacity_20";
        readonly '--nxc-dark14': "core_shade_dark14_opacity_20";
        readonly '--nxc-dark15': "core_shade_dark15_opacity_20";
        readonly '--nxc-dark16': "core_shade_dark16_opacity_20";
        readonly '--nxc-dark17': "core_shade_dark17_opacity_20";
        readonly '--nxc-dark18': "core_shade_dark18_opacity_20";
        readonly '--nxc-light1': "core_shade_light1_opacity_20";
        readonly '--nxc-light2': "core_shade_light2_opacity_20";
        readonly '--nxc-light3': "core_shade_light3_opacity_20";
        readonly '--nxc-light4': "core_shade_light4_opacity_20";
        readonly '--nxc-light5': "core_shade_light5_opacity_20";
        readonly '--nxc-light6': "core_shade_light6_opacity_20";
        readonly '--nxc-light7': "core_shade_light7_opacity_20";
        readonly '--nxc-light8': "core_shade_light8_opacity_20";
        readonly '--nxc-light9': "core_shade_light9_opacity_20";
        readonly '--nxc-light10': "core_shade_light10_opacity_20";
        readonly '--nxc-light11': "core_shade_light11_opacity_20";
        readonly '--nxc-light12': "core_shade_light12_opacity_20";
        readonly '--nxc-light13': "core_shade_light13_opacity_20";
        readonly '--nxc-light14': "core_shade_light14_opacity_20";
        readonly '--nxc-light15': "core_shade_light15_opacity_20";
        readonly '--nxc-light16': "core_shade_light16_opacity_20";
        readonly '--nxc-light17': "core_shade_light17_opacity_20";
        readonly '--nxc-light18': "core_shade_light18_opacity_20";
        readonly '--nxc-attention-red': "attentionErrorRed_shade_initial_opacity_20";
        readonly '--nxc-attention-yellow': "attentionWarningYellow_shade_initial_opacity_20";
        readonly '--nxc-attention-blue': "attentionInfoBlue_shade_initial_opacity_20";
        readonly '--nxc-attention-green': "attentionSuccessGreen_shade_initial_opacity_20";
        readonly '--nxc-contrast-blue': "contrastBlue_shade_initial_opacity_20";
        readonly '--nxc-contrast-yellow': "contrastYellow_shade_initial_opacity_20";
        readonly '--nxc-contrast-orange': "contrastOrange_shade_initial_opacity_20";
        readonly '--nxc-contrast-green': "contrastGreen_shade_initial_opacity_20";
        readonly '--nxc-contrast-deep-purple': "contrastDeepPurple_shade_initial_opacity_20";
        readonly '--nxc-contrast-pink': "contrastPink_shade_initial_opacity_20";
        readonly '--nxc-contrast-cyan': "contrastCyan_shade_initial_opacity_20";
        readonly '--nxc-contrast-purple': "contrastPurple_shade_initial_opacity_20";
        readonly '--font-color-medium': "core_shade_light9_opacity_20";
        readonly '--font-color-regular': "core_shade_light9_opacity_20";
        readonly '--font-color-light': "core_shade_light12_opacity_20";
        readonly '--font-color-disabled': "core_shade_light10_opacity_20";
        readonly '--font-color-error': "attentionErrorRed_shade_initial_opacity_20";
        readonly '--font-color-brand': "brand_shade_initial_opacity_20";
    };
    /**
     * 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
     */
    private static getRootStyleTarget;
    /**
     * 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
     */
    private setProperty;
    private getRelativeLuminance;
    private contrastColorsNeeded;
    private getContrastColor;
    /**
     * The updateStyleEffect is used to set the css variables that are used within our design system.
     */
    protected readonly updateStyleEffect: _angular_core.EffectRef;
    /**
     * 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.
     */
    addNxEventListener: {
        <K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    };
    /**
     * @ignore
     *
     * Internal method for web component to remove event listeners.
     */
    removeNxEventListener: {
        <K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    };
    /**
     * @ignore
     *
     * Internal method for web component to dispatch events.
     */
    dispatchNxEvent: (event: Event) => boolean;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseComponent, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseComponent, never, never, { "targetSurface": { "alias": "targetSurface"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Returns exact color defined in the base theme. Useful for getting exact for cases like branding.
 *
 * @param baseColor - Theme Base Color
 */
declare function generateCssVariableName<Color extends ThemeColors>(baseColor: Color): CssColorVariable<Color>;
/**
 * Returns theme color with defined luminosity.
 *
 * @param baseColor - Theme Base Color
 * @param shade - Luminosity
 */
/**
 * Returns exact color defined in the base theme. Useful for getting exact for cases like branding.
 *
 * @param baseColor - Theme Base Color
 */
declare function generateCssVariableName<Color extends ThemeColors>(baseColor: Color): CssColorVariable<Color>;
/**
 * Returns theme color with defined luminosity.
 *
 * @param baseColor - Theme Base Color
 * @param shade - Luminosity
 */
declare function generateCssVariableName<Color extends ThemeColorsWithShade, Shade extends Shades>(baseColor: Color, shade: Shade): CssColorVariable<Color, Shade>;
/**
 * Returns theme color with defined luminosity and opacity.
 *
 * @param baseColor - Theme Base Color
 * @param shade - Luminosity
 * @param opacity - Opacity
 */
declare function generateCssVariableName<Color extends ThemeColorsWithShade, Shade extends Shades, OpacityValue extends Opacity>(baseColor: Color, shade: Shade, opacity: OpacityValue): CssColorVariable<Color, Shade, OpacityValue>;
/**
 * Returns theme color with shade disables with opacity.
 *
 * @param baseColor - Theme Base Color with shade disabled
 * @param opacity - Opacity
 */
declare function generateCssVariableName<Color extends ThemeColorsWithoutShade, OpacityValue extends Opacity>(baseColor: Color, opacity: OpacityValue): CssColorVariable<Color, 'initial', OpacityValue>;
declare const generateHslaString: ((hue: Hue, saturation: Percentage, lightness: Percentage, alpha?: Percentage) => HslaString) & lodash.MemoizedFunction;
declare const getHexStringFromTheme: (colorConfig: HexString | HexStrings, inverse?: boolean) => HexString;
declare const getTonalPaletteInstance: ((hexColor: HexString) => TonalPalette) & lodash.MemoizedFunction;
declare const extractOpacity: ((colorVariable: CssColorVariables) => Percentage) & lodash.MemoizedFunction;
declare const hctToHsl: ((palette: Hct) => [Hue, Percentage, Percentage]) & lodash.MemoizedFunction;
declare const generateHslaStringUsingHct: ((color: HexString, luminosity: Percentage, opacity?: Percentage) => HslaString) & lodash.MemoizedFunction;
declare const withGeneratedColors: ((initialTheme: ThemeDefinition, options: ThemeOptions) => ThemeDefinition<ThemeColors>) & lodash.MemoizedFunction;
declare class ColorGenerator {
    createTheme: (({ theme, options }: ThemeWithGeneratedAndOptions) => GeneratedTheme) & lodash.MemoizedFunction;
}

/**
 * An example Component
 */
declare class NxExampleComponent extends BaseComponent {
    /**
     * A signal model example
     */
    testModel: _angular_core.ModelSignal<string>;
    useHct: _angular_core.InputSignalWithTransform<boolean, unknown>;
    coreSaturation: _angular_core.InputSignal<Percentage>;
    initialHct: boolean | undefined;
    initialCoreSaturation: Percentage | undefined;
    protected syncOptionOverridesEffect: _angular_core.EffectRef;
    themeOptionOverride: _angular_core.Signal<{
        useHct: boolean;
        coreSaturation: Percentage;
    }>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxExampleComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxExampleComponent, "nx-example", never, { "testModel": { "alias": "testModel"; "required": false; "isSignal": true; }; "useHct": { "alias": "useHct"; "required": false; "isSignal": true; }; "coreSaturation": { "alias": "coreSaturation"; "required": false; "isSignal": true; }; }, { "testModel": "testModelChange"; }, never, never, true, never>;
}

/**
 * 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.
 */
declare class NxThemeModeDirective {
    themeMode: _angular_core.InputSignal<ThemeMode>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxThemeModeDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxThemeModeDirective, "[nxThemeMode]", ["selectedThemeMode"], { "themeMode": { "alias": "nxThemeMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof BaseComponent; inputs: {}; outputs: {}; }]>;
}

/**
 * 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. */
declare const SIDE_SHEET_SIZES: {
    readonly small: 360;
    readonly medium: 672;
    readonly large: 1032;
};
type SideSheetSize = keyof typeof SIDE_SHEET_SIZES;
/**
 * - `push` — integrates with `nx-layout`'s grid, pushes the main content aside and is resizable.
 * - `overlay` — pure CDK overlay, floats on top of the content without pushing it.
 */
type SideSheetMode = 'push' | 'overlay';
interface SideSheetConfig<TData = unknown> {
    /** Display mode — `push` or `overlay`. */
    mode: SideSheetMode;
    /** Width preset. Defaults to `small`. */
    size?: SideSheetSize;
    /** Arbitrary data injected into the content via {@link SIDE_SHEET_DATA}. */
    data?: TData;
    /** Extra class(es) applied to the overlay pane (overlay mode). */
    panelClass?: string | string[];
    /** Render the close (X) icon in the shell. Defaults to `true`. */
    showClose?: boolean;
    /** Darkening backdrop behind the sheet (overlay mode). Defaults to `false`. */
    hasBackdrop?: boolean;
    /** Allow drag-resize. Defaults to `false`. */
    resizable?: boolean;
}
/**
 * {@link SideSheetConfig} with all optional fields resolved to their defaults, plus the internal
 * `identity` the service generates to key the open sheet and tag its host element.
 */
type ResolvedSideSheetConfig<TData = unknown> = Required<Omit<SideSheetConfig<TData>, 'data' | 'panelClass'>> & {
    /** Generated id, used to key the open sheet and tag its host element. */
    identity: string;
} & Pick<SideSheetConfig<TData>, 'data' | 'panelClass'>;

/** State of the single open side sheet. */
interface SideSheetState {
    identity: string;
    mode: SideSheetMode;
    size: SideSheetSize;
    /** Resolved width in px (preset size or a live resize). */
    sizePx: number;
    open: boolean;
    /** Whether the sheet may be drag-resized. Defaults to `false` (see {@link SideSheetConfig}). */
    resizable: boolean;
    /** The shell portal `nx-layout` renders — into its grid (`push`) or over the content (`overlay`). */
    portal?: Portal<unknown>;
    panelClass?: string | string[];
    /** Overlay only: dim the content behind the sheet. */
    hasBackdrop?: boolean;
}
/**
 * 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.
 */
declare class NxSideSheetRegistry {
    private readonly _sheet;
    /** The single registered sheet, or `null`. */
    readonly sheet: _angular_core.Signal<SideSheetState | null>;
    /** The open sheet when it is in `push` mode, else `null`. */
    readonly pushSheet: _angular_core.Signal<SideSheetState | null>;
    /** The open sheet when it is in `overlay` mode, else `null`. */
    readonly overlaySheet: _angular_core.Signal<SideSheetState | null>;
    /** Whether the open overlay sheet requests a dimming backdrop. */
    readonly overlayBackdrop: _angular_core.Signal<boolean>;
    /** Largest width a sheet may be resized to (the `large` preset). */
    static readonly MAX_WIDTH_PX: 1032;
    /** Smallest width a sheet may be resized to (the `small` preset). */
    private static readonly MIN_WIDTH_PX;
    /**
     * 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}.
     */
    private readonly _hostCount;
    /** Whether an `nx-layout` host is mounted to render the sheet from this registry. */
    readonly hasHost: _angular_core.Signal<boolean>;
    /** Called by `nx-layout` when it mounts; returns a disconnect fn to call on its destroy. */
    connectHost(): () => void;
    /** Register (or replace) the single sheet. */
    register(state: SideSheetState): void;
    /** Patch the current sheet, if any. */
    update(patch: Partial<SideSheetState>): void;
    /** Clear the current sheet. */
    remove(): void;
    /**
     * 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: number): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSideSheetRegistry, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxSideSheetRegistry>;
}

interface LayoutConfig {
    /**
     * The maximum width of main content section.
     */
    clampSize?: (typeof NxLayoutComponent.clampedSizes)[number];
    /**
     * Whether the content should be centered when clamped.
     */
    center?: boolean;
    /**
     * The view identifier for the layout. Used for preserving panel sizes.
     *
     * View identifier string could be used to maintain the size for a specific panel type,
     * specific feature, or specific view.
     *
     * If not provided the view identifier will be determined by the first component in the route.
     */
    viewIdentifier?: string;
}
declare class NxLayoutComponent extends BaseComponent {
    static rootLayout: NxLayoutComponent | undefined;
    static DEFAULT_SIZE: number;
    static layoutTypes: readonly ["cards", "clamped", "full", "wrapper"];
    static columnSpans: readonly ["-1", "4", "3"];
    static configureLayout: ({ clampSize, center, viewIdentifier, }: LayoutConfig) => EffectRef | undefined;
    static clampedSizes: readonly [720, 1024, 1200, 1440, 1800, 1000000];
    protected minColumnPx: _angular_core.InputSignal<number>;
    overlayAsideOverride: _angular_core.InputSignal<boolean>;
    newCloudMode: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected asideOpen: _angular_core.ModelSignal<boolean>;
    protected hoverMenuOpen: _angular_core.ModelSignal<boolean>;
    secondaryMenuSize: _angular_core.ModelSignal<number>;
    drawerSize: _angular_core.ModelSignal<number>;
    notificationsSize: _angular_core.ModelSignal<number>;
    protected hoverMenuSize: _angular_core.ModelSignal<number>;
    drawerOpen: _angular_core.ModelSignal<boolean>;
    showProjectedSecondaryMenu: _angular_core.ModelSignal<boolean>;
    layoutType: _angular_core.ModelSignal<"cards" | "clamped" | "full" | "wrapper">;
    clampedSize: _angular_core.ModelSignal<720 | 1024 | 1200 | 1440 | 1800 | 1000000>;
    centered: _angular_core.ModelSignal<boolean>;
    modal: _angular_core.ModelSignal<boolean>;
    forceTop: _angular_core.InputSignalWithTransform<boolean, unknown>;
    secondaryMenuModalOpen: _angular_core.ModelSignal<boolean>;
    collapsible: _angular_core.ModelSignal<boolean>;
    asideResizable: _angular_core.ModelSignal<boolean>;
    columnSpanMain: _angular_core.ModelSignal<"3" | "4" | "-1">;
    resizing: _angular_core.ModelSignal<boolean>;
    viewIdentifier: _angular_core.ModelSignal<string>;
    closeOnContentClick: _angular_core.ModelSignal<boolean>;
    readonly isStoryBook: boolean | undefined;
    protected width: _angular_core.WritableSignal<number>;
    protected overlayAside: _angular_core.Signal<boolean>;
    protected showAsideOnGrid: _angular_core.Signal<boolean>;
    protected showTopMenu: _angular_core.Signal<boolean>;
    private router;
    private sideSheetRegistry;
    /** The push side sheet `nx-layout` renders in its reserved column. */
    protected pushSheet: _angular_core.Signal<SideSheetState | null>;
    /** The overlay side sheet `nx-layout` floats over the content area. */
    protected overlaySheet: _angular_core.Signal<SideSheetState | null>;
    /** Whether the open overlay sheet requests the dimming backdrop. */
    protected overlayBackdrop: _angular_core.Signal<boolean>;
    /**
     * Legacy single right drawer (set via `useSecondaryMenu`). Rendered only when no push side
     * sheet is present.
     */
    protected legacyDrawerPortal: _angular_core.Signal<TemplatePortal<unknown> | null>;
    /** True when the right column holds content (push sheet, legacy drawer, or legacy `drawerOpen`). */
    protected rightDrawerActive: _angular_core.Signal<boolean>;
    skipNextNotifier: Subject<void>;
    skipNext: _angular_core.Signal<boolean | undefined>;
    navigateNotifier$: rxjs.Observable<NavigationStart>;
    protected templateClasses: _angular_core.Signal<{
        [x: string]: boolean;
        centered: boolean;
        'top-menu': boolean;
    }>;
    /**
     * 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`.
     */
    private rightPanelPx;
    private canFitBothPanels;
    asideExpanded: _angular_core.Signal<boolean>;
    protected class: _angular_core.Signal<{
        centered: boolean;
        'top-menu': boolean;
        'overlay-aside': boolean;
        'aside-open': boolean;
        'drawer-open': boolean;
        'push-open': boolean;
        'show-modal-overlay': boolean;
        'show-secondary-modal-overlay': boolean;
        'resizing-panel': boolean;
        'can-fit-both-panels': boolean;
    }>;
    private availableWidth;
    /**
     * 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).
     */
    private contentFloorFor;
    private spaceForContent;
    protected maxPanelWidth: _angular_core.Signal<number>;
    protected clampedSecondaryMenuWidth: _angular_core.Signal<(singleOpen?: boolean) => number>;
    protected secondaryMenuOverlayWidth: _angular_core.Signal<string>;
    private clampedRightPanelSize;
    protected drawerWidth: _angular_core.Signal<string>;
    drawerWidthChange: rxjs.Observable<string>;
    protected notificationOffset: _angular_core.Signal<string>;
    protected notificationsWidth: _angular_core.Signal<string>;
    protected secondaryMenuWidth: _angular_core.Signal<string>;
    protected customModalWidth: _angular_core.WritableSignal<string | undefined>;
    protected hoverMenuWidth: _angular_core.Signal<string>;
    protected clampedWidth: _angular_core.Signal<string>;
    protected mockContent: _angular_core.Signal<string[]>;
    protected mockMessages: _angular_core.WritableSignal<string[]>;
    ngAfterViewInit(): void;
    private initializeEventListeners;
    toggleOverlay: () => void;
    variableColors: _angular_core.Signal<{
        '--overlay-color': "core_shade_dark1_opacity_20";
        '--body-bg': "core_shade_dark1_opacity_20";
        '--menu-bg': "core_shade_dark2_opacity_20";
        '--hover-menu-bg': "core_shade_dark3_opacity_3";
        '--notification-bg': "brand_shade_dark10_opacity_10";
        '--menu-border': "core_shade_dark5_opacity_20";
    }>;
    toggleMenu: () => void;
    previousSecondarySize: number;
    toggleSecondaryModal: (modalSize?: number) => void;
    toggleProjectedSecondaryMenu: () => void;
    showModalOverlay: _angular_core.Signal<boolean>;
    toggleDrawer: (modal?: boolean) => void;
    toggleHoverMenu: (targetState?: boolean) => void;
    removeMessage: (index: number) => void;
    protected autoHideEffect: EffectRef;
    resizeSecondaryMenu: (event: CdkDragMove<unknown>) => void;
    /**
     * 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]`.
     */
    resizePanel: (event: CdkDragMove<unknown>, panel: HTMLElement) => void;
    /** Legacy single right drawer (set via `useSecondaryMenu`); resizes the `drawerSize` model. */
    resizeDrawer: (event: CdkDragMove<unknown>) => void;
    resizeComplete(event: CdkDragRelease): void;
    protected secondaryMenuPortal: _angular_core.WritableSignal<TemplatePortal<unknown> | null>;
    protected rightDrawerPortal: _angular_core.WritableSignal<TemplatePortal<unknown> | null>;
    protected viewContainerRef: ViewContainerRef;
    protected sizeHistory: {
        readonly left: Map<unknown, number>;
        readonly right: Map<unknown, number>;
    };
    activatedRoute: ActivatedRoute;
    firstComponent: (snapshot?: ActivatedRouteSnapshot | null) => ActivatedRouteSnapshot["component"];
    getViewIdentifier: () => string;
    /**
     * 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.
     */
    useSecondaryMenu: (template: TemplateRef<unknown>, collapsible?: boolean, rightPanel?: boolean, resizable?: boolean, size?: number) => (() => void);
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxLayoutComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxLayoutComponent, "nx-layout", never, { "minColumnPx": { "alias": "minColumnPx"; "required": false; "isSignal": true; }; "overlayAsideOverride": { "alias": "overlayAsideOverride"; "required": false; "isSignal": true; }; "newCloudMode": { "alias": "newCloudMode"; "required": false; "isSignal": true; }; "asideOpen": { "alias": "asideOpen"; "required": false; "isSignal": true; }; "hoverMenuOpen": { "alias": "hoverMenuOpen"; "required": false; "isSignal": true; }; "secondaryMenuSize": { "alias": "secondaryMenuSize"; "required": false; "isSignal": true; }; "drawerSize": { "alias": "drawerSize"; "required": false; "isSignal": true; }; "notificationsSize": { "alias": "notificationsSize"; "required": false; "isSignal": true; }; "hoverMenuSize": { "alias": "hoverMenuSize"; "required": false; "isSignal": true; }; "drawerOpen": { "alias": "drawerOpen"; "required": false; "isSignal": true; }; "showProjectedSecondaryMenu": { "alias": "showProjectedSecondaryMenu"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layoutType"; "required": false; "isSignal": true; }; "clampedSize": { "alias": "clampedSize"; "required": false; "isSignal": true; }; "centered": { "alias": "centered"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "forceTop": { "alias": "forceTop"; "required": false; "isSignal": true; }; "secondaryMenuModalOpen": { "alias": "secondaryMenuModalOpen"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "asideResizable": { "alias": "asideResizable"; "required": false; "isSignal": true; }; "columnSpanMain": { "alias": "columnSpanMain"; "required": false; "isSignal": true; }; "resizing": { "alias": "resizing"; "required": false; "isSignal": true; }; "viewIdentifier": { "alias": "viewIdentifier"; "required": false; "isSignal": true; }; "closeOnContentClick": { "alias": "closeOnContentClick"; "required": false; "isSignal": true; }; }, { "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"; }, never, ["ng-container[menu]", "ng-container[header]", "ng-container[main]", "ng-container[notifications]", "ng-container[secondaryMenuModal]", "ng-container[hoverMenu]"], true, never>;
}

/**
 * Behaviour the {@link SideSheetRef} delegates back to the owning service. Passed in at
 * construction so the ref carries no direct dependency on the service (avoids a cycle).
 */
interface SideSheetRefHandlers {
    dispose(result?: unknown): void;
}
/**
 * Handle to an open side sheet, injected into the sheet's content via `SIDE_SHEET_REF`.
 */
declare class SideSheetRef<TResult = unknown> {
    readonly identity: string;
    private readonly handlers;
    private readonly _afterClosed$;
    /** Emits once with the close result, then completes. */
    readonly afterClosed$: Observable<TResult | undefined>;
    private closed;
    constructor(identity: string, handlers: SideSheetRefHandlers);
    /** Close the sheet, tearing down its rendering and emitting `afterClosed$`. */
    close(result?: TResult): void;
}

/** Data passed to a side sheet's content component (`config.data`). */
declare const SIDE_SHEET_DATA: InjectionToken<unknown>;
/** The {@link SideSheetRef} for a side sheet's content component. */
declare const SIDE_SHEET_REF: InjectionToken<SideSheetRef<unknown>>;
/**
 * Internal contract the service provides to the shell component (`NxSideSheetComponent`) through
 * the portal injector. Lets the shell self-wire its content, chrome and close behaviour when
 * rendered by `nx-layout` (push or overlay). The sheet fills the container the layout sizes for it,
 * so width/mode are tracked by the registry, not needed here.
 *
 * Not part of the public surface — consumers use {@link SIDE_SHEET_DATA}/{@link SIDE_SHEET_REF}.
 */
interface SideSheetShellConfig {
    /** Stable identity, mirrored onto the host element for focus lookup. */
    identity: string;
    /** Consumer content rendered inside the shell body. */
    portal: Portal<unknown>;
    showClose: boolean;
    ref: SideSheetRef;
}

/**
 * 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.
 */
declare class NxSideSheetComponent {
    /** Present only when opened programmatically through the service. */
    protected readonly shellConfig: SideSheetShellConfig | null;
    /** Show the close (X) icon. */
    readonly showClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /** Width preset (declarative use only — programmatic use is sized by nx-layout). */
    readonly size: _angular_core.InputSignal<"small" | "medium" | "large">;
    /** Fires when the close icon is clicked (declarative use; programmatic use closes via the ref). */
    readonly closeClick: _angular_core.OutputEmitterRef<void>;
    protected readonly effShowClose: _angular_core.Signal<boolean>;
    /**
     * Rendered by nx-layout (programmatic): fill the container the layout sizes for the sheet.
     * Standalone (declarative): take the preset `size` width directly.
     */
    protected readonly widthStyle: _angular_core.Signal<string>;
    protected onClose(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSideSheetComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxSideSheetComponent, "nx-side-sheet", never, { "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, ["*"], true, never>;
}

/** Content a side sheet can render: a component type, or a pre-built template portal. */
type SideSheetContent = ComponentType<unknown> | TemplatePortal<unknown>;
/**
 * 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.
 */
declare class NxSideSheetService {
    private readonly injector;
    private readonly registry;
    private entry?;
    open<TData = unknown, TResult = unknown>(content: SideSheetContent, config: SideSheetConfig<TData>): SideSheetRef<TResult>;
    /**
     * 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.
     */
    private attach;
    private disposeEntry;
    private createRef;
    private buildShellPortal;
    private buildContentPortal;
    private resolveConfig;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSideSheetService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxSideSheetService>;
}

/**
 * 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>
 * ```
 */
declare class NxMenuProjectionDirective {
    protected templateRef: TemplateRef<any>;
    private viewContainer;
    nxMenuProjection: _angular_core.InputSignalWithTransform<boolean, unknown>;
    nxMenuProjectionRightPanel: _angular_core.InputSignal<boolean>;
    nxMenuProjectionCollapsible: _angular_core.InputSignal<boolean>;
    nxMenuProjectionResizable: _angular_core.InputSignal<boolean>;
    nxMenuProjectionAutoNavigateSecondaryOnMobile: _angular_core.InputSignal<boolean>;
    protected updateProjection: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxMenuProjectionDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxMenuProjectionDirective, "[nxMenuProjection]", never, { "nxMenuProjection": { "alias": "nxMenuProjection"; "required": false; "isSignal": true; }; "nxMenuProjectionRightPanel": { "alias": "nxMenuProjectionRightPanel"; "required": false; "isSignal": true; }; "nxMenuProjectionCollapsible": { "alias": "nxMenuProjectionCollapsible"; "required": false; "isSignal": true; }; "nxMenuProjectionResizable": { "alias": "nxMenuProjectionResizable"; "required": false; "isSignal": true; }; "nxMenuProjectionAutoNavigateSecondaryOnMobile": { "alias": "nxMenuProjectionAutoNavigateSecondaryOnMobile"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * 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>
 * ```
 */
declare abstract class NxSwappedAbstractBaseDirective {
    /**
     * Signal that emits a boolean value to indicate whether the loading state should be displayed.
     *
     * Most commonly this will be the input mapped to the selector for the directive.
     */
    protected abstract isSwapped: Signal<boolean>;
    /**
     * Reference to the component class that will be dynamically initialized and used as the loader.
     */
    protected abstract swappedStateComponent: Signal<Type<unknown>>;
    /**
     * Signal that emits an object with the inputs that should be passed to the swappedStateComponent
     */
    protected componentInputs: Signal<Record<string, unknown>>;
    /**
     * 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.
     */
    protected renderView: _angular_core.EffectRef;
    private _templateRef;
    private _viewContainer;
    private _renderer;
    private _environmentInjector;
    private _injector;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSwappedAbstractBaseDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxSwappedAbstractBaseDirective, never, never, {}, {}, never, never, true, never>;
}

/**
 * Internal component to be used by the `*nxTemplatePlaceholder` directive to render a template
 * as a placeholder.
 */
declare class NxTemplateWrapperComponent extends BaseComponent {
    protected templateRef: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
    protected context: _angular_core.InputSignal<unknown>;
    protected logEffect: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTemplateWrapperComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxTemplateWrapperComponent, "nx-template-wrapper", never, { "templateRef": { "alias": "templateRef"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxTemplatePlaceholderDirective extends NxSwappedAbstractBaseDirective {
    /**
     * 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>
     */
    isSwapped: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * 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>
     * ```
     */
    nxTemplatePlaceholderTemplateRef: _angular_core.InputSignal<TemplateRef<unknown>>;
    /**
     * The context to be for the template passed as the templateRef.
     */
    nxTemplatePlaceholderContext: _angular_core.InputSignal<Record<string, unknown>>;
    swappedStateComponent: _angular_core.WritableSignal<typeof NxTemplateWrapperComponent>;
    componentInputs: _angular_core.Signal<{
        context: Record<string, unknown>;
        templateRef: TemplateRef<unknown>;
    }>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTemplatePlaceholderDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxTemplatePlaceholderDirective, "[nxTemplatePlaceholder]", never, { "isSwapped": { "alias": "nxTemplatePlaceholder"; "required": false; "isSignal": true; }; "nxTemplatePlaceholderTemplateRef": { "alias": "nxTemplatePlaceholderTemplateRef"; "required": true; "isSignal": true; }; "nxTemplatePlaceholderContext": { "alias": "nxTemplatePlaceholderContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * 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.
 */
declare class LoadingSkeletonComponent extends BaseComponent {
    /**
     * The configurable duration of the sync animation in milliseconds.
     */
    static syncAnimationDuration: number;
    /**
     * The configurable delay between sync animations in milliseconds.
     */
    static syncAnimationDelay: number;
    /**
     * 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.
     */
    private static readonly sync$;
    /**
     * Used to bind the sync-animation class to the host element.
     */
    protected readonly syncAnimation: _angular_core.Signal<boolean | undefined>;
    /**
     * Used to bind the sync-animation-duration CSS variable to the host element.
     */
    protected get syncAnimationDuration(): string;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingSkeletonComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingSkeletonComponent, "ng-component", never, {}, {}, never, never, true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxLoadingSkeletonDirective extends NxSwappedAbstractBaseDirective {
    /**
     * Shows loading skeleton when true.
     */
    isSwapped: _angular_core.InputSignal<boolean>;
    swappedStateComponent: _angular_core.WritableSignal<typeof LoadingSkeletonComponent>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxLoadingSkeletonDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxLoadingSkeletonDirective, "[nxLoadingSkeleton]", never, { "isSwapped": { "alias": "nxLoadingSkeleton"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * 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.
 */
declare class LoadingSpinnerComponent extends BaseComponent {
    /**
     * Loading icon size in pixels.
     */
    iconSize: _angular_core.InputSignalWithTransform<string, number>;
    /** The icon to display in the loading spinner. */
    _icon: _angular_core.InputSignal<NxIconOrName | undefined>;
    /**
     * 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.
     */
    outlineRatio: _angular_core.InputSignal<number>;
    static outlineRatioDefault: number;
    /**
     * The border size of the spinner icon.
     *
     * This is calculated based on the icon size and the outline ratio.
     */
    borderSize: _angular_core.Signal<`${number}px`>;
    /**
     * The configurable duration of the sync animation in milliseconds.
     */
    static syncAnimationDuration: number;
    /**
     * Used to bind the sync-animation-duration CSS variable to the host element.
     */
    protected get syncAnimationDuration(): string;
    /**
     * 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.
     */
    private static readonly sync$;
    /**
     * Used to bind the sync-animation class to the host element.
     */
    protected readonly syncAnimation: _angular_core.Signal<boolean | undefined>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingSpinnerComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingSpinnerComponent, "nx-loading-spinner", never, { "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "_icon": { "alias": "icon"; "required": false; "isSignal": true; }; "outlineRatio": { "alias": "outlineRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxLoadingSpinnerDirective extends NxSwappedAbstractBaseDirective {
    /**
     * Shows loading spinner when true.
     */
    isSwapped: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Size of the loading spinner in pixels.
     */
    nxLoadingSpinnerIconSize: _angular_core.InputSignal<number>;
    /**
     * 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.
     */
    nxLoadingSpinnerOutlineRatio: _angular_core.InputSignal<number>;
    /**
     * The icon to display in the loading spinner.
     */
    nxLoadingSpinnerIcon: _angular_core.InputSignal<NxIconOrName | undefined>;
    swappedStateComponent: _angular_core.WritableSignal<typeof LoadingSpinnerComponent>;
    componentInputs: _angular_core.Signal<{
        icon: NxIconOrName | undefined;
        iconSize: number;
        outlineRatio: number;
    }>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxLoadingSpinnerDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxLoadingSpinnerDirective, "[nxLoadingSpinner]", never, { "isSwapped": { "alias": "nxLoadingSpinner"; "required": false; "isSignal": true; }; "nxLoadingSpinnerIconSize": { "alias": "nxLoadingSpinnerIconSize"; "required": false; "isSignal": true; }; "nxLoadingSpinnerOutlineRatio": { "alias": "nxLoadingSpinnerOutlineRatio"; "required": false; "isSignal": true; }; "nxLoadingSpinnerIcon": { "alias": "nxLoadingSpinnerIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NxApplyActionTargetDirective {
    nxActionClassesTarget: _angular_core.InputSignalWithTransform<boolean, unknown>;
    parent?: NxApplyActionParentDirective;
    elRef: ElementRef<any>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxApplyActionTargetDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxApplyActionTargetDirective, "[nxActionClassesTarget]", never, { "nxActionClassesTarget": { "alias": "nxActionClassesTarget"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NxApplyActionParentDirective {
    hover: _angular_core.WritableSignal<boolean>;
    onMouseEnter(): void;
    onMouseLeave(): void;
    nxActionClassesParent: _angular_core.InputSignalWithTransform<boolean, unknown>;
    nxActionClassesParentInherit: _angular_core.InputSignalWithTransform<boolean, unknown>;
    focus: _angular_core.WritableSignal<boolean>;
    onFocus(): void;
    onBlur(): void;
    active: _angular_core.WritableSignal<boolean>;
    onMouseDown(): void;
    onMouseUp(): void;
    classes: _angular_core.Signal<{
        nxHovered: boolean;
        nxFocused: boolean;
        nxActive: boolean;
    }>;
    actionClassTargets: _angular_core.WritableSignal<NxApplyActionTargetDirective[]>;
    set actionClassTargetsQuerySetter(query: QueryList<NxApplyActionTargetDirective>);
    protected bindToChildren: _angular_core.EffectRef;
    protected propagateClasses: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxApplyActionParentDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxApplyActionParentDirective, "[nxActionClassesParent], [nxActionClassesParentInherit], nx-action-classes-parent", never, { "nxActionClassesParent": { "alias": "nxActionClassesParent"; "required": false; "isSignal": true; }; "nxActionClassesParentInherit": { "alias": "nxActionClassesParentInherit"; "required": false; "isSignal": true; }; }, {}, ["actionClassTargetsQuerySetter"], never, true, never>;
}

/**
 * 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.
 */
declare class NxSettingSliderComponent extends BaseComponent {
    showSlider: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * The value of the slider.
     */
    value: _angular_core.ModelSignal<number>;
    /**
     * The last value of the slider before it was toggled.
     */
    lastValue: _angular_core.ModelSignal<number>;
    /**
     * The primary icon of the slider.
     */
    primaryIcon: _angular_core.InputSignal<NxIconEnum>;
    /**
     * The value of the slider when toggled.
     */
    toggledValue: _angular_core.InputSignal<number>;
    /**
     * The icon of the slider when toggled.
     */
    toggledIcon: _angular_core.InputSignal<NxIconEnum>;
    /**
     * The color of the slider when toggled.
     */
    toggledColor: _angular_core.InputSignal<CssColorVariables>;
    /**
     * The friendly name of the value.
     */
    toFriendlyName: _angular_core.InputSignal<(value: number) => string>;
    /**
     * Whether the slider is currently being dragged.
     */
    dragging: _angular_core.ModelSignal<boolean>;
    /**
     * 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.
     */
    toSelectionRange: _angular_core.InputSignal<(value: number) => {
        start: number;
        end: number;
        handle: number;
    }>;
    /**
     * The function to clamp the value to a valid range.
     */
    clampValue: _angular_core.InputSignal<(value: number) => number>;
    /**
     * For when we potentially move the slider to a popover.
     */
    showPopover: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Fires when a drag or track-click lands on `toggledValue` (vs. toggling via the icon).
     */
    toggledViaInteraction: _angular_core.OutputEmitterRef<void>;
    /**
     * The value from the slider mapped to a friendly name.
     */
    protected valueName: _angular_core.Signal<string>;
    /**
     * Whether the slider is toggled.
     */
    protected itToggled: _angular_core.Signal<boolean>;
    /**
     * Currently displayed icon.
     */
    protected icon: _angular_core.Signal<NxIconEnum>;
    /**
     * The value of the selection range after clamping and mapping the raw value.
     */
    protected selectionRange: _angular_core.Signal<{
        start: number;
        end: number;
        handle: number;
    }>;
    /**
     * The start of the selection range.
     */
    protected selectionStart: _angular_core.Signal<string>;
    /**
     * The end of the selection range.
     */
    protected selectionEnd: _angular_core.Signal<string>;
    /**
     * The handle location for modifying the selection range.
     */
    protected selectionHandle: _angular_core.Signal<string>;
    /**
     * Whether the slider is expanded showing slider or collapsed just allowing toggle.
     */
    protected opened: _angular_core.WritableSignal<boolean>;
    /**
     * The slider ref used for getting actual sizes of the wrapper.
     */
    protected sliderWrapper: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
    protected variableColors: _angular_core.Signal<{
        readonly '--iconColor': CssColorVariables;
    }>;
    /**
     * The current color of the icon.
     */
    protected iconColor: _angular_core.Signal<CssColorVariables>;
    /**
     * Handles the clamping of the raw value.
     */
    protected clampValueEffect: _angular_core.EffectRef;
    /**
     * Handles toggling if the slider is collapsed or expanded.
     */
    protected toggleOpened: (state?: boolean) => void;
    /**
     * Handles updating the position by clicking on the slider.
     */
    protected setPosition: (event: MouseEvent) => void;
    private getWidth;
    /**
     * The start position of the drag.
     */
    private dragStartPosition;
    /**
     * Handles the start of dragging the slider
     */
    protected startDrag: () => void;
    /**
     * Handles the end of dragging the slider.
     */
    protected endDrag: () => void;
    /**
     * Handles dragging the slider.
     */
    protected handleDrag: (event: CdkDragMove<unknown>) => void;
    /**
     * Updates saving the last value when toggling.
     */
    protected updateLastValue: _angular_core.EffectRef;
    /**
     * Toggles between the primary and toggled values.
     */
    protected handleToggle: () => void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSettingSliderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxSettingSliderComponent, "nx-setting-slider", never, { "showSlider": { "alias": "showSlider"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "lastValue": { "alias": "lastValue"; "required": false; "isSignal": true; }; "primaryIcon": { "alias": "primaryIcon"; "required": false; "isSignal": true; }; "toggledValue": { "alias": "toggledValue"; "required": false; "isSignal": true; }; "toggledIcon": { "alias": "toggledIcon"; "required": false; "isSignal": true; }; "toggledColor": { "alias": "toggledColor"; "required": false; "isSignal": true; }; "toFriendlyName": { "alias": "toFriendlyName"; "required": false; "isSignal": true; }; "dragging": { "alias": "dragging"; "required": false; "isSignal": true; }; "toSelectionRange": { "alias": "toSelectionRange"; "required": false; "isSignal": true; }; "clampValue": { "alias": "clampValue"; "required": false; "isSignal": true; }; "showPopover": { "alias": "showPopover"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "lastValue": "lastValueChange"; "dragging": "draggingChange"; "toggledViaInteraction": "toggledViaInteraction"; }, never, never, true, never>;
}

/**
 * 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.
 */
declare abstract class BaseControlValueAccessor<T> extends BaseComponent implements ControlValueAccessor {
    /**
     * The base control value. Abstract property that must be implemented by the extending class.
     */
    abstract value: ModelSignal<T>;
    /**
     * The disabled state of the control.
     *
     * should be a linked signal after those are available
     */
    protected isDisabled: _angular_core.WritableSignal<boolean>;
    /**
     * The change event of the control.
     */
    protected onChange(_: T): void;
    /**
     * The touch event of the control.
     */
    protected onTouched(_?: T): void;
    /**
     * Write a value to the control.
     */
    writeValue(value: T): void;
    /**
     * Register the change event handler function.
     */
    registerOnChange(fn: (_?: T) => void): void;
    /**
     * Register the touch event handler function.
     */
    registerOnTouched(fn: (_?: T) => void): void;
    /**
     * Updates the inner disabled state of the control.
     */
    setDisabledState(isDisabled: boolean): void;
    /**
     * Syncs updates to the control value with the change and touch events.
     */
    protected notifyChangeEffect: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseControlValueAccessor<any>, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseControlValueAccessor<any>, never, never, {}, {}, never, never, true, never>;
}

/**
 * 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.
 */
declare class NxVolumeSliderComponent extends BaseControlValueAccessor<number> {
    /**
     * The current value of the volume slider.
     */
    value: _angular_core.ModelSignal<number>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxVolumeSliderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxVolumeSliderComponent, "nx-volume-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
}

declare const playbackRates: readonly [0, 0.25, 0.5, 1, 2, 4, 8, 16];
type PlaybackRates = (typeof playbackRates)[number];

/**
 * 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.
 */
declare class NxPlaybackSliderComponent extends BaseControlValueAccessor<PlaybackRates> {
    /**
     * Used to determine if slider icons should be inverse when toggled.
     */
    protected readonly isToggleSlider: boolean;
    /**
     * The current playback rate.
     *
     * @default 1
     */
    value: _angular_core.ModelSignal<0 | 2 | 4 | 8 | 1 | 16 | 0.25 | 0.5>;
    liveOnly: _angular_core.InputSignal<boolean>;
    /**
     * Caps the slider at 1x while viewing Live (vs. `liveOnly`, which hides it entirely).
     */
    isLive: _angular_core.InputSignal<boolean>;
    protected toggledValue: number;
    protected toggledColor: "core_shade_light10_opacity_20";
    protected toFriendlyName: (value: number) => string;
    protected mappedValue: _angular_core.Signal<number>;
    protected currentIcon: _angular_core.Signal<NxIconEnum>;
    protected lastValue: _angular_core.WritableSignal<number>;
    protected toggledIcon: _angular_core.Signal<NxIconEnum>;
    protected toSelectionRange: (value: number) => {
        start: number;
        end: number;
        handle: number;
    };
    protected clampValue: (value: number) => number;
    protected updateValue: (value: number) => void;
    protected onSliderPause: () => void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPlaybackSliderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxPlaybackSliderComponent, "nx-playback-slider, nx-playback-toggle-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "liveOnly": { "alias": "liveOnly"; "required": true; "isSignal": true; }; "isLive": { "alias": "isLive"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
}

declare const show: readonly ["all", "brand", "additional", "attention", "contrast", "generated"];
type Show = (typeof show)[number];

type RecursivePartial<T> = {
    [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];
};
declare const themeUpdatedEventName = "nx-components:theme:updated";
declare const createThemeUpdateEvent: (detail: ThemeWithOptions) => CustomEvent<ThemeWithOptions>;
declare const themePatchEventName = "nx-components:theme:patch";
declare const createThemePatchEvent: (detail: RecursivePartial<ThemeWithOptions>) => CustomEvent<RecursivePartial<ThemeWithOptions>>;
declare const themeResetEventName = "nx-components:theme:reset";
declare const baseColorStorybookEventName = "nx-components:storybook:set-base";
declare const createColorStorybookEvent: (color: ThemeColors) => CustomEvent<ThemeColors>;
declare const colorGroupStorybookEventName = "nx-components:storybook:set-group";
declare const createColorGroupStorybookEvent: (group: Show) => CustomEvent<Show>;
declare const createComponentVariablesEventName = "nx-components:component:variables";
declare const createComponentVariablesEvent: (detail: Record<string, [string, string]>) => CustomEvent<Record<string, [string, string]>>;
declare const toggleSecondaryMenuEventName = "nx-components:layout:toggleSecondaryMenu";
declare const toggleSecondaryMenuEvent: (open?: boolean) => CustomEvent<boolean | undefined>;
declare const toggleModalEventName = "nx-components:layout:toggleModal";
declare const toggleModalEvent: (open?: boolean, width?: string, collapsible?: boolean) => CustomEvent<{
    open?: boolean;
    width?: string;
    collapsible: boolean;
}>;
interface CustomNxComponentsEventMap {
    [themeUpdatedEventName]: ReturnType<typeof createThemeUpdateEvent>;
    [themePatchEventName]: ReturnType<typeof createThemePatchEvent>;
    [themeResetEventName]: ReturnType<typeof createThemePatchEvent>;
    [baseColorStorybookEventName]: ReturnType<typeof createColorStorybookEvent>;
    [colorGroupStorybookEventName]: ReturnType<typeof createColorGroupStorybookEvent>;
    [createComponentVariablesEventName]: ReturnType<typeof createComponentVariablesEvent>;
    [toggleSecondaryMenuEventName]: ReturnType<typeof toggleSecondaryMenuEvent>;
    [toggleModalEventName]: ReturnType<typeof toggleModalEvent>;
}

declare global {
    interface Window {
        IS_STORYBOOK?: boolean;
        Prism?: {
            highlight: (code: string, language: string, grammar: string) => string;
            languages: {
                javascript: string;
                html: string;
            };
        };
        disableConsole: boolean;
        currentStoryComponent: typeof BaseComponent;
        addEventListener<K extends keyof CustomNxComponentsEventMap>(type: K, listener: (this: Document, ev: CustomNxComponentsEventMap[K]) => void): void;
        removeEventListener<K extends keyof CustomNxComponentsEventMap>(type: K, listener: (this: Document, ev: CustomNxComponentsEventMap[K]) => void): void;
        dispatchEvent<K extends keyof CustomNxComponentsEventMap>(ev: CustomNxComponentsEventMap[K]): void;
        nxThemeProvider: NxThemeProviderService;
    }
}

declare const CalendarColors: {
    readonly Primary: "attentionSuccessGreen_shade_initial_opacity_20";
    readonly Secondary: "attentionSuccessGreen_shade_initial_opacity_10";
};
type DateRange = {
    start: Date;
    end?: Date;
};
type AvailablePeriod = {
    dateRange: DateRange;
    color?: CssColorVariables;
    priority?: number;
};

type SelectableItemSelection = 'single' | 'start' | 'end' | 'middle' | 'none';
type CalendarDay = {
    date: Date;
    outsideCurrentMonth: boolean;
    isToday: boolean;
    selection: SelectableItemSelection;
    hasAvailablePeriod: boolean;
    periodColor?: string;
};
type Hour = {
    hour: number;
    selection: SelectableItemSelection;
    display: string;
    hasAvailablePeriod: boolean;
    periodColor?: string;
};
type Month = {
    month: number;
    display: string;
    hasAvailablePeriod: boolean;
    periodColor?: string;
};
declare class NxCalendarComponent extends BaseComponent implements ControlValueAccessor {
    locale: _angular_core.InputSignal<string>;
    dateRangeEnabled: _angular_core.InputSignal<boolean>;
    showHours: _angular_core.InputSignalWithTransform<boolean, unknown>;
    availablePeriods: _angular_core.InputSignal<AvailablePeriod[] | undefined>;
    private periodIndexByDay;
    private periodIndexByMonth;
    private periodIndexByHour;
    buildIndexesEffect: _angular_core.EffectRef;
    currentView: _angular_core.WritableSignal<"days" | "months">;
    dateCurrentlyViewed: _angular_core.WritableSignal<Date>;
    carouselHeading: _angular_core.Signal<string>;
    daysOfTheMonth: _angular_core.Signal<CalendarDay[]>;
    hoursDisabled: _angular_core.Signal<boolean>;
    hoursOfTheDay: _angular_core.Signal<Hour[]>;
    daysOfTheWeekNames: _angular_core.Signal<string[]>;
    monthNames: _angular_core.Signal<string[]>;
    allMonths: _angular_core.Signal<Month[]>;
    hoveredHour: _angular_core.WritableSignal<Hour | undefined>;
    handleMouseEnterHour(hour: Hour): void;
    handleMouseLeaveHour(): void;
    hoveredDay: _angular_core.WritableSignal<Date | undefined>;
    handleMouseEnterDay(day: Date): void;
    handleMouseLeaveDay(): void;
    handleArrowClick(change: number): void;
    handleHeaderClick(): void;
    handleMonthClick(month: number): void;
    selectedDays: _angular_core.WritableSignal<DateRange | undefined>;
    handleDayClick(day: Date): void;
    updateSelectedDates(newSelectedValue: DateRange | undefined): void;
    handleDoneClick(): void;
    selectedHours: _angular_core.WritableSignal<{
        start: number | undefined;
        end: number | undefined;
    }>;
    handleHourClick(hour: Hour): void;
    dateRange: _angular_core.WritableSignal<DateRange | undefined>;
    writeValue(obj: DateRange): void;
    private onChange;
    registerOnChange(fn: (value: DateRange | undefined) => void): void;
    private onTouched;
    registerOnTouched(fn: () => void): void;
    private buildDayIndex;
    private buildMonthIndex;
    private buildHourIndex;
    getColorValue(cssVarName: CssColorVariables | undefined): string | undefined;
    private getColorForPeriod;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxCalendarComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxCalendarComponent, "nx-calendar", never, { "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateRangeEnabled": { "alias": "dateRangeEnabled"; "required": false; "isSignal": true; }; "showHours": { "alias": "showHours"; "required": false; "isSignal": true; }; "availablePeriods": { "alias": "availablePeriods"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/** Appearance for notification */
type NxNotificationType = 'info' | 'success' | 'attention' | 'error';
/** Config for button in notification */
declare class NxNotificationAction {
    /** Button text */
    label: string;
    /** Function executed on button click */
    action: (close: () => void) => void;
}
/** Config for link in notification with `href` */
declare class NxNotificationDetailHref {
    /** Anchor text */
    label: string;
    /** Anchor `href` property */
    href: string;
    /** Anchor `target` property */
    target?: string;
}
/** Config for link in notification with `routerLink` */
interface NxNotificationDetailRouterLink extends Partial<Pick<RouterLink, 'target' | 'queryParams' | 'fragment' | 'queryParamsHandling' | 'state' | 'info' | 'relativeTo' | 'preserveFragment' | 'skipLocationChange' | 'replaceUrl'>> {
    /** Anchor text */
    label: string;
    routerLink: RouterLink['routerLink'];
}
/** Config for a notification */
declare class NxNotificationConfig {
    /** Notification id */
    id?: string;
    /** Appearance for notification */
    type?: NxNotificationType;
    /** Length of time in milliseconds before automatically closing
     *
     * `0` disables auto close.
     */
    duration?: number;
    /** Link to more detailed information */
    details?: NxNotificationDetailHref | NxNotificationDetailRouterLink;
    /** Primary action for notification */
    primaryAction?: NxNotificationAction;
    /** Secondary action for notification */
    secondaryAction?: NxNotificationAction;
    /** When true, hides the close (X) button. Toast can only be dismissed via
     *  programmatic close or an action button. Default: false. */
    disableClose?: boolean;
}

/** Reference to a notification dispatched from the service */
declare class NxNotificationRef {
    /** Notification id */
    id: string;
    /** Notification content */
    content: string;
    /** Notification config, minus id */
    config: Omit<NxNotificationConfig, 'id'>;
}

declare enum TransitionStates {
    Idle = 0,
    Calculating = 1,
    Animating = 2,
    Swapping = 3,
    Cycling = 4
}
/** 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.
 */
declare class NxNotificationsComponent extends BaseComponent implements OnDestroy {
    private rem;
    protected animationDuration: string;
    protected padding: number;
    protected gap: number;
    private notificationsService;
    protected notifications: _angular_core.WritableSignal<NxNotificationRef[]>;
    constructor();
    ngOnDestroy(): void;
    protected TransitionStates: typeof TransitionStates;
    protected openQueue: NxNotificationRef[];
    protected _openSubscription: rxjs.Subscription;
    protected openingNotifications: _angular_core.WritableSignal<NxNotificationRef[]>;
    protected openingIds: _angular_core.Signal<Set<string>>;
    private afterOpen;
    private enterContainer;
    private containerObserver;
    private containerHeight;
    protected _containerHeightEffect: _angular_core.EffectRef;
    protected enterTranslation: _angular_core.Signal<number>;
    protected openingState: _angular_core.WritableSignal<TransitionStates>;
    protected _openStateEffect: _angular_core.EffectRef;
    protected enterTransitionEnd(): void;
    protected close$: Subject<string>;
    private closeQueue;
    protected _closeSubscription: rxjs.Subscription;
    protected closingNotifications: _angular_core.WritableSignal<string[]>;
    protected closingIds: _angular_core.Signal<Set<string>>;
    private afterClose;
    private notificationComponents;
    protected topShifts: _angular_core.WritableSignal<Map<string, number>>;
    protected closingState: _angular_core.WritableSignal<TransitionStates>;
    protected _closeStateEffect: _angular_core.EffectRef;
    protected closeTransitionEnd(event: TransitionEvent): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxNotificationsComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxNotificationsComponent, "nx-notifications", never, {}, {}, never, never, true, never>;
}

declare const NX_NOTIFICATIONS_DEFAULT_DURATION_MS: InjectionToken<number>;
declare const NX_NOTIFICATIONS_DEFAULT_TYPE: InjectionToken<NxNotificationType>;

/** Singleton service for dispatching and managing notifications. */
declare class NxNotificationsService {
    private _componentInstance;
    private _notifications;
    private _openError$;
    private _afterOpened$;
    private _closeError$;
    private _afterClosed$;
    private _open$;
    private _close$;
    /** For NxNotificationsComponent write access only */
    __internal: {
        instance: _angular_core.WritableSignal<NxNotificationsComponent | null>;
        notifications: _angular_core.WritableSignal<NxNotificationRef[]>;
        openError$: Subject<{
            ref: NxNotificationRef;
            error: string;
        }>;
        afterOpened$: Subject<NxNotificationRef>;
        closeError$: Subject<{
            id: string;
            error: string;
        }>;
        afterClosed$: Subject<string>;
        open$: Subject<NxNotificationRef>;
        close$: Subject<string>;
    };
    /** Existing notifications */
    notifications: _angular_core.Signal<NxNotificationRef[]>;
    /** Emits after a notifications is opened */
    afterOpened$: Observable<NxNotificationRef>;
    /** Emits after a notification is closed */
    afterClosed$: Observable<string>;
    /** Allow two cycles and some extra headroom */
    private REPLAY_CLEANUP_DELAY_MS;
    /** 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: string, config?: NxNotificationConfig): Observable<NxNotificationRef>;
    /** 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: string): Observable<string>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxNotificationsService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxNotificationsService>;
}

/** 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.
 */
declare class __NxUseFormStyleDirective {
    private useLegacyFormStyle;
    protected _styleAttributeEffect: _angular_core.EffectRef;
    private host;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<__NxUseFormStyleDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<__NxUseFormStyleDirective, "[__useFormStyle]", never, {}, {}, never, never, true, never>;
}

/** Native `<label>` element with styling.
 *
 * Designed for use with `<nx-form-field>`, but can be used outside. */
declare class NxLabelComponent extends BaseComponent {
    host: ElementRef<HTMLLabelElement>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxLabelComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxLabelComponent, "label[nx-label]", never, {}, {}, never, ["*"], true, [{ directive: typeof __NxUseFormStyleDirective; inputs: {}; outputs: {}; }]>;
}

/** State of a form control, usually a validation error.
 *
 * Example from Angular's pattern validator: `{ key: 'pattern', data: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'} }`
 */
declare abstract class ControlState {
    /** Name of error. */
    key: string;
    /** Data for error. */
    data?: unknown;
}
/** A function for when to display errors — on change (immediately), control blur, or form submit.
 *
 * The first matching error from a control's validators array will be selected (ordering matters).
 */
type ErrorMatcherFn = (control: NgControl, form: FormGroupDirective) => ControlState | null;
/** 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)
 *
 */
declare abstract class ErrorMatches {
    /** Errors to show after control is marked dirty. */
    onChange?: string[];
    /** Errors to show after the control is marked touched. */
    onBlur?: string[];
    /** Errors to show after form is marked submitted. */
    onSubmit?: string[];
}
/** Convenience function for extending `ErrorMatches`. */
declare function extendErrorMatches(base: ErrorMatches, ...others: ErrorMatches[]): ErrorMatches;
/** Base `ErrorMatches` for a text input.
 *
 * Default set used by form field if `NxDefaultErrorMatchToken` is not provided.
 */
declare const NX_BASE_ERROR_MATCHES: {
    onChange: string[];
    onBlur: string[];
    onSubmit: string[];
};
/** Convenience function for extending `NX_BASE_ERROR_MATCHES`. */
declare function extendNxBaseErrorMatches(...others: ErrorMatches[]): ErrorMatches;

/** 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.
 */
declare class NxFormFieldControlDirective {
    host: ElementRef<HTMLElement>;
    protected formField: _networkoptix_nx_components.NxFormFieldComponent | null;
    /** Error state of the parent form field. */
    errorState: _angular_core.Signal<_networkoptix_nx_components.ControlState | null>;
    /** If parent field has error state. */
    hasErrorState: _angular_core.Signal<boolean>;
    protected ariaInvalid: _angular_core.Signal<nx_shared.AriaBoolean>;
    private hostAriaInvalidValue;
    private hostAriaInvalidObserver;
    protected _ariaInvalidEffect: _angular_core.EffectRef;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxFormFieldControlDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxFormFieldControlDirective, "[nxControl]", ["nxControl"], {}, {}, never, never, true, never>;
}

/** 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).
 */
declare class NxFormFieldComponent extends BaseComponent implements AfterContentInit, AfterViewInit, OnDestroy {
    private defaultErrorMatches;
    /** Matches or a custom function for when to display errors.
     *
     * @default NX_BASE_ERROR_MATCHES
     */
    errorMatcher: _angular_core.InputSignalWithTransform<ErrorMatcherFn, ErrorMatches>;
    /** Whether to automatically associate label with control host element. */
    automaticLabeling: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected label: _angular_core.Signal<NxLabelComponent | undefined>;
    /** Only used for autolabeling in base field */
    protected nxControlDirective: _angular_core.Signal<NxFormFieldControlDirective | undefined>;
    /** If labelled element is not control directive host or not direct child of field */
    customLabelTarget: _angular_core.WritableSignal<ElementRef<HTMLElement> | null>;
    protected ngControl: _angular_core.Signal<NgControl>;
    protected messages: _angular_core.Signal<_networkoptix_nx_components.NxControlMessagesComponent | undefined>;
    private _valueState;
    /** The current value for the control.
     *
     * Used for non-error control messages.
     */
    valueState: _angular_core.Signal<ControlState | null>;
    private _errorState;
    /** The current validation error for the control */
    errorState: _angular_core.Signal<ControlState | null>;
    protected destroyRef: DestroyRef;
    private formGroup;
    private formObserver;
    constructor();
    private submitted;
    ngAfterContentInit(): void;
    private afterViewInit;
    ngAfterViewInit(): void;
    private readonly LABELABLE_TAG_NAMES;
    protected _autoLabelEffect: _angular_core.EffectRef;
    ngOnDestroy(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxFormFieldComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxFormFieldComponent, "nx-form-field", never, { "errorMatcher": { "alias": "errorMatches"; "required": false; "isSignal": true; }; "automaticLabeling": { "alias": "automaticLabeling"; "required": false; "isSignal": true; }; }, {}, ["label", "nxControlDirective", "ngControl", "messages"], ["[nx-label]", "*", "nx-control-messages"], true, [{ directive: typeof nx_shared.NxThemeAttributeDirective; inputs: {}; outputs: {}; }, { directive: typeof __NxUseFormStyleDirective; inputs: {}; outputs: {}; }]>;
}

interface NxControlMessage {
    key: Signal<string>;
    host: ElementRef<HTMLElement>;
}
/** A message associated with a form field control. */
declare class NxControlMessageComponent extends BaseComponent implements NxControlMessage {
    /** Identifier for the message. */
    key: _angular_core.InputSignal<string>;
    /** Text color for the message.
     *
     * @default 'error'
     */
    type: _angular_core.InputSignal<"error" | "info" | "warn">;
    protected selected: Signal<boolean>;
    host: ElementRef<HTMLElement>;
    protected messagesContainer: NxControlMessagesComponent;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxControlMessageComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxControlMessageComponent, "nx-control-message", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof nx_shared.NxThemeAttributeDirective; inputs: {}; outputs: {}; }, { directive: typeof __NxUseFormStyleDirective; inputs: {}; outputs: {}; }]>;
}

/** Container component to manage `<nx-control-message>` selection. */
declare class NxControlMessagesComponent extends BaseComponent implements AfterContentInit, AfterViewInit {
    /** 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.
     */
    spacingLines: _angular_core.InputSignal<number>;
    protected get _spacingLines(): number;
    /** Use form field control's value as key to select message.
     *
     * If there are matched errors they will take precendent.
     */
    useValueState: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /** Manually select message.
     *
     * Strings are converted to `ControlState` objects with no data.
     *
     * `null` does not select any messages.
     */
    manualState: _angular_core.InputSignalWithTransform<ControlState | null, string | ControlState | null>;
    state: _angular_core.Signal<ControlState | null>;
    protected set _projectedMessages(messages: QueryList<NxControlMessage>);
    protected projectedMessages: _angular_core.WritableSignal<NxControlMessage[]>;
    protected messages: _angular_core.Signal<Map<string, NxControlMessage>>;
    private afterContentInit;
    ngAfterContentInit(): void;
    protected _selectedMessageEffect: _angular_core.EffectRef;
    protected selectedMessage: _angular_core.WritableSignal<DomPortal<HTMLElement> | undefined>;
    private nxFormField;
    private host;
    protected width: _angular_core.WritableSignal<number | undefined>;
    ngAfterViewInit(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxControlMessagesComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxControlMessagesComponent, "nx-control-messages", never, { "spacingLines": { "alias": "spacingLines"; "required": false; "isSignal": true; }; "useValueState": { "alias": "useValueState"; "required": false; "isSignal": true; }; "manualState": { "alias": "manualState"; "required": false; "isSignal": true; }; }, {}, ["_projectedMessages"], ["*"], true, [{ directive: typeof __NxUseFormStyleDirective; inputs: {}; outputs: {}; }]>;
}

declare class NxFormFieldModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxFormFieldModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxFormFieldModule, never, [typeof NxFormFieldComponent, typeof NxLabelComponent, typeof NxControlMessagesComponent, typeof NxControlMessageComponent], [typeof NxFormFieldComponent, typeof NxLabelComponent, typeof NxControlMessagesComponent, typeof NxControlMessageComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxFormFieldModule>;
}

type UnknownRecord = Record<string, unknown>;
type CompareFn = (a: any, b: any, formGroup: FormGroup) => boolean;
/** 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.
 */
declare class NxFormObserverDirective implements OnInit {
    private initialValue;
    private initialValue$;
    /** Value to compare against for form changes and to revert to on reset.
     *
     * Defaults to the initial form value at `ngOnInit`.
     */
    set _initialFormValue(value: UnknownRecord);
    initialFormValueChange: Observable<UnknownRecord>;
    /** Recursively check FormControl values for equality */
    private formGroupStrictEquality;
    /** Function to use to compare individual form control values.
     *
     * Defaults to `===` strict equality.
     */
    compareFn: _angular_core.InputSignal<CompareFn>;
    formChanged: _angular_core.WritableSignal<boolean>;
    formDisabled: _angular_core.WritableSignal<boolean>;
    private _formFields;
    formFields: {
        set: (value: NxFormFieldComponent[]) => void;
        update: (updateFn: (value: NxFormFieldComponent[]) => NxFormFieldComponent[]) => void;
    };
    /** Whether any form fields within the form have a visible error. */
    hasErrorState: _angular_core.Signal<boolean>;
    form: FormGroupDirective;
    private destroyRef;
    ngOnInit(): void;
    updateInitialValue(): void;
    reset$: Subject<void>;
    reset(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxFormObserverDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxFormObserverDirective, "[nxFormObserver]", ["nxFormObserver"], { "_initialFormValue": { "alias": "initialFormValue"; "required": false; }; "compareFn": { "alias": "compareFn"; "required": false; "isSignal": true; }; }, { "initialFormValueChange": "initialFormValueChange"; }, never, never, true, never>;
}

declare const NxFormFieldToken: InjectionToken<NxFormFieldComponent>;

declare const NxControlMessagesToken: InjectionToken<NxControlMessagesComponent>;

declare const NxControlMessageToken: InjectionToken<NxControlMessage>;

declare class NxButtonBase extends BaseComponent implements AfterViewInit {
    /**
     * Whether the button should be disabled.
     * @default false
     * @example
     * <nx-button disabled></nx-button>
     */
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected _getDisabled: () => true | null;
    /**
     * The size of the button.
     * @default 'small'
     * @example
     * <nx-button size="large"></nx-button>
     */
    size: _angular_core.InputSignal<"small" | "large">;
    /**
     * The variant of the button that defines its color scheme.
     * @default 'brand'
     * @example
     * <nx-button variant="brand"></nx-button>
     */
    variant: _angular_core.InputSignal<"brand" | "dark" | "light" | "error" | "medium" | "success" | "warning" | "info">;
    /**
     * The appearance of the button.
     * @default 'filled'
     * @example
     * <nx-button appearance="outlined"></nx-button>
     */
    appearance: _angular_core.InputSignal<"text" | "filled" | "outlined">;
    /**
     * 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>
     */
    selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected classes: _angular_core.Signal<string>;
    /** Whether the button is in loading state. */
    loading: _angular_core.ModelSignal<boolean>;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    ngAfterViewInit(): void;
    protected selectedErrorLog: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxButtonBase, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxButtonBase, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "loading": "loadingChange"; }, never, never, true, never>;
}
/**
 * Anchor button base.
 */
declare class NxAnchorBase extends NxButtonBase implements OnInit, OnDestroy {
    private _ngZone;
    ngOnInit(): void;
    ngOnDestroy(): void;
    private _haltDisabledEvents;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxAnchorBase, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxAnchorBase, never, never, {}, {}, never, never, true, never>;
}

/** Shared host configuration for all buttons */
declare const NX_BUTTON_HOST: {
    readonly '[attr.disabled]': "_getDisabled()";
    readonly '[class]': "classes()";
    readonly '[class.selected]': "selected()";
    readonly '[class.loading]': "loading()";
    readonly '[attr.aria-disabled]': "ariaDisabled()";
};
/** Shared host configuration for buttons using the `<a>` tag. */
declare const NX_ANCHOR_HOST: {
    readonly '[attr.tabIndex]': "disabled() ? -1 : 0";
    readonly '[attr.disabled]': "_getDisabled()";
    readonly '[class]': "classes()";
    readonly '[class.selected]': "selected()";
    readonly '[class.loading]': "loading()";
    readonly '[attr.aria-disabled]': "ariaDisabled()";
};
declare class NxButtonComponent extends NxButtonBase {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxButtonComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxButtonComponent, "button[nx-button]", never, {}, {}, never, ["nx-icon:not([iconPositionEnd])", "*", "nx-icon[iconPositionEnd]"], true, never>;
}
declare class NxAnchorComponent extends NxAnchorBase {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxAnchorComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxAnchorComponent, "a[nx-button]", never, {}, {}, never, ["nx-icon:not([iconPositionEnd])", "*", "nx-icon[iconPositionEnd]"], true, never>;
}

/** Set of callbacks to be used on submit by AsyncSubmitButton. */
declare abstract class AsyncAction<T> {
    /** The asynchonous action to be executed. */
    action: () => Promise<T> | Observable<T>;
    /** The callback for action success. */
    success: (res: T) => void;
    /** The callback for action error. */
    error?: (error: unknown) => void;
}
/** Noop function to infer typing on the AsyncAction callbacks. */
declare const createAsyncAction: <T>(a: AsyncAction<T>) => AsyncAction<T>;

/** 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.
 */
declare class NxAsyncSubmitButtonComponent<T> extends NxButtonComponent {
    /** Action to be executed on submit. */
    asyncAction: _angular_core.InputSignal<AsyncAction<T>>;
    private formObserver;
    private host;
    protected hasErrorState: _angular_core.Signal<boolean>;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    private injectedUncaughtErrorHandler;
    private uncaughtErrorHandler;
    protected execute(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxAsyncSubmitButtonComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxAsyncSubmitButtonComponent<any>, "button[nx-async-submit-button]", never, { "asyncAction": { "alias": "action"; "required": true; "isSignal": true; }; }, {}, never, ["nx-icon:not([iconPositionEnd])", "*", "nx-icon[iconPositionEnd]"], true, never>;
}

declare class NxAsyncSubmitButtonModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxAsyncSubmitButtonModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxAsyncSubmitButtonModule, never, [typeof NxAsyncSubmitButtonComponent, typeof NxFormObserverDirective], [typeof NxAsyncSubmitButtonComponent, typeof NxFormObserverDirective]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxAsyncSubmitButtonModule>;
}

/** Interface to be implemented by injectable handling uncaught errors. */
declare abstract class NxUncaughtErrorHandler {
    handleUncaughtError: (error: unknown) => void;
}
declare const NxUncaughtErrorHandlerToken: InjectionToken<NxUncaughtErrorHandler>;

/** 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.
 */
declare class NxSubmitButtonComponent extends NxButtonComponent implements OnDestroy {
    private host;
    private formObserver;
    protected hasErrorState: _angular_core.Signal<boolean>;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    constructor(host: ElementRef<HTMLButtonElement>);
    ngOnDestroy(): void;
    private onClick;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSubmitButtonComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxSubmitButtonComponent, "button[nx-submit-button]", never, {}, {}, never, ["nx-icon:not([iconPositionEnd])", "*", "nx-icon[iconPositionEnd]"], true, never>;
}

declare class NxSubmitButtonModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSubmitButtonModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxSubmitButtonModule, never, [typeof NxSubmitButtonComponent, typeof NxFormObserverDirective], [typeof NxSubmitButtonComponent, typeof NxFormObserverDirective]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxSubmitButtonModule>;
}

/** Style variation inputs for components that share styling with `nx-input`. */
declare class NxInputLikeComponent extends BaseComponent {
    /** Size variant. */
    size: _angular_core.InputSignal<"small" | "large">;
    /** Background color variant. */
    background: _angular_core.InputSignal<"dark" | "light">;
    protected inputLikeClasses: _angular_core.Signal<string[]>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxInputLikeComponent, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxInputLikeComponent, never, never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare const NxInputMaskToken: InjectionToken<string>;
/** Native `<input>` element with styling and two-way data binding. */
declare class NxInputComponent extends NxInputLikeComponent {
    host: ElementRef<HTMLInputElement | HTMLTextAreaElement>;
    /** Value of the input element.
     *
     * Does not emit output on changes from JS. */
    value: _angular_core.ModelSignal<string | undefined>;
    protected _valueEffect: _angular_core.EffectRef;
    protected onInput(): void;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxInputComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxInputComponent, "input[nx-input], textarea[nx-input]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof NxFormFieldControlDirective; inputs: {}; outputs: {}; }, { directive: typeof __NxUseFormStyleDirective; inputs: {}; outputs: {}; }, { directive: typeof nx_shared.NxPasswordManagerDisableDirective; inputs: {}; outputs: {}; }]>;
}

/** Form field for text inputs that adds an optional left icon and button to clear the input. */
declare class NxInputFieldComponent extends NxFormFieldComponent implements AfterContentInit {
    /** Name of left icon. */
    leftIcon: _angular_core.InputSignal<NxIconOrName | undefined>;
    protected nxControlDirective: _angular_core.Signal<NxFormFieldControlDirective>;
    private injector;
    protected zeroLength: _angular_core.Signal<boolean>;
    protected disabled: _angular_core.Signal<boolean>;
    protected readonly: _angular_core.WritableSignal<boolean>;
    private inputObserver;
    private get control();
    ngAfterContentInit(): void;
    protected clear(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxInputFieldComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxInputFieldComponent, "nx-input-field", never, { "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; }, {}, ["nxControlDirective"], ["[nx-label]", "[nx-input]", "nx-control-messages"], true, never>;
}

declare class NxInputFieldModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxInputFieldModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxInputFieldModule, never, [typeof NxLabelComponent, typeof NxInputFieldComponent, typeof NxInputComponent, typeof NxControlMessagesComponent, typeof NxControlMessageComponent], [typeof NxLabelComponent, typeof NxInputFieldComponent, typeof NxInputComponent, typeof NxControlMessagesComponent, typeof NxControlMessageComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxInputFieldModule>;
}

/** Form field for passwords that adds a button to toggle visibility.
 */
declare class NxPasswordFieldComponent extends NxFormFieldComponent implements AfterContentInit {
    protected nxControlDirective: _angular_core.Signal<NxFormFieldControlDirective>;
    private injector;
    protected disabled: _angular_core.Signal<boolean>;
    protected visible: _angular_core.WritableSignal<boolean>;
    private get control();
    ngAfterContentInit(): void;
    protected toggleVisibility(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPasswordFieldComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxPasswordFieldComponent, "nx-password-field", never, {}, {}, ["nxControlDirective"], ["[nx-label]", "*", "nx-control-messages"], true, never>;
}

declare class NxPasswordFieldModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPasswordFieldModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxPasswordFieldModule, never, [typeof NxLabelComponent, typeof NxPasswordFieldComponent, typeof NxInputComponent, typeof NxControlMessagesComponent, typeof NxControlMessageComponent], [typeof NxLabelComponent, typeof NxPasswordFieldComponent, typeof NxInputComponent, typeof NxControlMessagesComponent, typeof NxControlMessageComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxPasswordFieldModule>;
}

/**
 * Generic type that extracts properties from an Angular component that match specified signal types.
 */
type ExtractGenericsToMapping<T, S> = {
    [K in keyof T as T[K] extends S ? K : never]: T[K] extends InputSignal<infer U> ? U : T[K] extends ModelSignal<infer U> ? U : T[K] extends S ? T[K] extends {
        get(): infer R;
    } ? R : never : never;
};
type ExcludeUnknown<T> = {
    [K in keyof T as unknown extends T[K] ? (T[K] extends unknown ? never : K) : K]: T[K];
};
/**
 * Extract output and model as CustomEvent from an Angular component type.
 */
type ExtractOutputs<T> = ExcludeUnknown<ExtractGenericsToMapping<T, OutputEmitterRef<unknown> | ModelSignal<unknown>>>;
type WithCustomEventListeners<T> = keyof ExtractOutputs<T> extends never ? object : {
    /**
     * Adds an event listener for a custom event.
     *
     * These are from angular outputs and models.
     *
     * Proxied to `addEventListener` but using custom method name for better
     * type inference and differentiation from native events.
     * @param {K} type - The name of the custom event.
     * @param {(this: C, ev: CustomEvent<T[K]>) => void} listener - The event listener function.
     */
    addNxEventListener<K extends keyof ExtractOutputs<T>>(type: K, listener: (this: T, ev: CustomEvent<ExtractOutputs<T>[K]>) => void): void;
    /**
     * Removes an event listener for a custom event.
     *
     * These are from angular outputs and models.
     *
     * Proxied to `removeEventListener` but using custom method name for better
     * type inference and differentiation from native events.
     *
     * @param {K} type - The name of the custom event.
     * @param {(this: T, ev: CustomEvent<ExtractOutputs<T>[K]>) => void} listener - The event listener function.
     */
    removeNxEventListener<K extends keyof ExtractOutputs<T>>(type: K, listener: (this: T, ev: CustomEvent<ExtractOutputs<T>[K]>) => void): void;
    /**
     *
     * @param {CustomEvent<T[K]>} event - The custom event to dispatch.
     */
    dispatchNxEvent<K extends keyof ExtractOutputs<T>>(event: CustomEvent<ExtractOutputs<T>[K]>): void;
};
/**
 * Extracts the input and model properties from an Angular component type.
 */
type ExtractInputs<T> = ExcludeUnknown<ExtractGenericsToMapping<T, InputSignal<unknown> | ModelSignal<unknown>>>;
type WebComponentType<T> = HTMLElement & (keyof ExtractInputs<T> extends never ? object : ExtractInputs<T>) & WithCustomEventListeners<T>;
/**
 * 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);
 */
declare function registerAsCustomElement(...ComponentClasses: (Type<unknown> | {
    tag: string;
    component: Type<unknown>;
})[]): Promise<void>;
declare function registerCustomElementsFromMapping<T extends Record<string, Type<unknown>>>(mapping: T): Promise<{
    [K in keyof T]: WebComponentType<InstanceType<T[K]>>;
}>;

/**
 * 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
 */
declare class NxStyleWrapperComponent {
    protected themeProvider: NxThemeProviderService;
    protected syncBackground: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxStyleWrapperComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxStyleWrapperComponent, "nx-style-wrapper", never, {}, {}, never, ["*"], true, [{ directive: typeof BaseComponent; inputs: {}; outputs: {}; }]>;
}

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

declare class NxCheckboxComponent extends BaseControlValueAccessor<boolean> implements Validator {
    value: _angular_core.ModelSignal<boolean>;
    indeterminate: _angular_core.ModelSignal<boolean>;
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /** tbd replace with linked signal */
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected disabledEffect: _angular_core.EffectRef;
    protected indicatorIcon: _angular_core.Signal<NxIconEnum.CHECK_20_X_20 | NxIconEnum.MINUS_20_X_20>;
    validate(control: AbstractControl): ValidationErrors | null;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxCheckboxComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxCheckboxComponent, "nx-checkbox-v2", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "indeterminate": "indeterminateChange"; }, never, ["*"], true, never>;
}

type SvgColor = {
    stroke: string | null;
    fill: string | null;
};
declare const LAYER_NAMES: readonly ["primary", "secondary", "tertiary", "quaternary", "quinary"];
type LayerName = (typeof LAYER_NAMES)[number];
type SvgColors = Record<LayerName, SvgColor>;
type PartialSvgColors = Partial<SvgColors> | undefined;
/**
 * Most likely will only be used internally
 */
declare class NxIconComponent extends BaseComponent {
    static ensureStyleMapping: (() => Promise<string[]>) & lodash.MemoizedFunction;
    /**
     * Name or reference to icon definition.
     */
    icon: _angular_core.InputSignal<NxIconOrName>;
    /**
     * Preserve inline styles from svg (won't remove fill/stroke).
     *
     * Mostly for internal testing.
     */
    preserveInline: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * 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.
     */
    preserveSize: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Override the color defined within the icon.
     */
    colorOverrides: _angular_core.InputSignal<PartialSvgColors>;
    /**
     * Use Current Color for primary stroke/fill.
     */
    useCurrentColor: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected resolvedIcon: _angular_core.Signal<NxIcons | undefined>;
    iconWithTransforms: _angular_core.Signal<string | false>;
    protected updateStoryBookThemeEffect: _angular_core.EffectRef;
    protected updateIconEffect: _angular_core.EffectRef;
    protected declareClassesEffect: _angular_core.EffectRef;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxIconComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxIconComponent, "nx-icon", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "preserveInline": { "alias": "preserveInline"; "required": false; "isSignal": true; }; "preserveSize": { "alias": "preserveSize"; "required": false; "isSignal": true; }; "colorOverrides": { "alias": "colorOverrides"; "required": false; "isSignal": true; }; "useCurrentColor": { "alias": "useCurrentColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof NxApplyActionTargetDirective; inputs: { "nxActionClassesTarget": "nxActionClassesTarget"; }; outputs: {}; }]>;
}

declare class NxStatusBadgeComponent extends BaseComponent {
    badgeType: _angular_core.InputSignal<"success" | "warning" | "default" | "danger">;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxStatusBadgeComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxStatusBadgeComponent, "nx-status-badge", never, { "badgeType": { "alias": "badgeType"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

/** Active state for elements which prevent default on mousedown to keep focus elsewhere */
declare class NxPseudoActiveDirective {
    protected active: _angular_core.WritableSignal<boolean>;
    protected onMouseDown(event: MouseEvent): void;
    protected onMouseUp(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPseudoActiveDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxPseudoActiveDirective, "[nxPseudoActive]", never, {}, {}, never, never, true, never>;
}

/** Option component for select/multiselect. */
declare class NxOptionComponent<T = unknown> implements AfterContentInit, Highlightable {
    hover: Subject<this>;
    /** Value of the option. */
    value: _angular_core.InputSignal<T>;
    /** Text displayed in the trigger when the option is selected.
     *
     * If not provided the component's internal text content is used.
     */
    labelInput: _angular_core.InputSignal<string>;
    host: ElementRef<HTMLElement>;
    private textContent;
    ngAfterContentInit(): void;
    label: _angular_core.Signal<string>;
    /** Disabled state */
    disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    protected active: _angular_core.WritableSignal<boolean>;
    private selectComponent;
    protected multiple: boolean;
    protected selected: _angular_core.Signal<boolean>;
    select(): void;
    protected _unselectEffect: _angular_core.EffectRef;
    protected _disabledEffect: _angular_core.EffectRef;
    disabled: boolean;
    setActiveStyles(): void;
    setInactiveStyles(): void;
    getLabel(): string;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxOptionComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxOptionComponent<any>, "nx-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "labelInput": { "alias": "label"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof NxPseudoActiveDirective; inputs: {}; outputs: {}; }]>;
}

/** Stylized divider for `nx-option` */
declare class NxOptionDividerComponent {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxOptionDividerComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxOptionDividerComponent, "hr[nx-option-divider]", never, {}, {}, never, never, true, never>;
}

type NxSingleSelect<T = unknown> = {
    multiple: false;
    select: (option: NxOptionComponent<T>) => void;
    unselect: () => void;
    selected: Signal<NxOptionComponent<T> | undefined>;
};
type NxMultiSelect<T = unknown> = {
    multiple: true;
    select: (option: NxOptionComponent<T>) => void;
    selectedSet: Signal<Set<NxOptionComponent<T>>>;
};

/** Component for selecting a value from a set of options. */
declare class NxSelectComponent<T = unknown> extends NxInputLikeComponent implements AfterContentInit, OnDestroy, ControlValueAccessor, Validator, NxSingleSelect<T> {
    readonly multiple: false;
    private defaultPlaceholderToken;
    protected defaultPlaceholder: _angular_core.Signal<string | null>;
    /** Text displayed when no option is selected. */
    placeholder: _angular_core.InputSignal<string | undefined>;
    private injector;
    private destroyRef;
    protected host: ElementRef<HTMLElement>;
    private onChange;
    private onTouched;
    registerOnChange(fn: (_: T | null) => void): void;
    registerOnTouched(fn: () => void): void;
    /** Disabled state. */
    disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
    private cvaDisabled;
    setDisabledState(isDisabled: boolean): void;
    private disabled;
    protected _closeOnDisableEffect: _angular_core.EffectRef;
    /** Value of the select. */
    valueModel: _angular_core.ModelSignal<T | null>;
    protected _valueModelEffect: _angular_core.EffectRef;
    private value;
    protected _valueEffect: _angular_core.EffectRef;
    writeValue(value: T | null): void;
    /** Whether a value is required in a form. */
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    validate(control: AbstractControl<T>): ValidationErrors | null;
    selected: _angular_core.WritableSignal<NxOptionComponent<T> | undefined>;
    private options;
    private options$;
    /** Set active option on hover. */
    protected _onOptionHoverSubscription: rxjs.Subscription;
    protected zeroOptions: _angular_core.Signal<boolean>;
    protected _zeroOptionEffect: _angular_core.EffectRef;
    private defaultZeroOptionPlaceholderToken;
    protected defaultZeroOptionPlaceholder: _angular_core.Signal<string | null>;
    /** Text displayed when there are no options. */
    zeroOptionsPlaceholder: _angular_core.InputSignal<string | undefined>;
    protected _optionsChangeEffect: _angular_core.EffectRef;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    /** Allows options with `null` value to be selected instead of clearing the select. */
    allowNullSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
    private connectedOverlay;
    protected overlayOpen: _angular_core.WritableSignal<boolean>;
    protected ariaExpanded: _angular_core.Signal<nx_shared.AriaBoolean>;
    protected overlayWidth: _angular_core.WritableSignal<number>;
    protected overlayPositions: _angular_cdk_overlay_module_d_BvvR6Y05.g[];
    private optionsContainer;
    /** Compatibility hack for v19, previously effects fired after content init */
    private afterContentInit;
    private keyManager;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    protected onBlur(): void;
    protected onKeyDown(event: KeyboardEvent): void;
    protected onClosedKeyDown(event: KeyboardEvent): void;
    protected onClick(): void;
    protected open(): void;
    protected scrollOptionIntoView(option: NxOptionComponent<T>): void;
    protected onOpenKeyDown(event: KeyboardEvent): void;
    select(option: NxOptionComponent<T>): void;
    /** Called from option when it is disabled. */
    unselect(): void;
    protected onOverlayKeyDown(event: KeyboardEvent): void;
    protected onOutsideClick(event: MouseEvent): void;
    protected close(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSelectComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxSelectComponent<any>, "nx-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "valueModel": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "zeroOptionsPlaceholder": { "alias": "zeroOptionsPlaceholder"; "required": false; "isSignal": true; }; "allowNullSelect": { "alias": "allowNullSelect"; "required": false; "isSignal": true; }; }, { "valueModel": "valueChange"; }, ["options"], ["*"], true, [{ directive: typeof NxFormFieldControlDirective; inputs: {}; outputs: {}; }]>;
}

declare class NxSelectModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSelectModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxSelectModule, never, [typeof NxSelectComponent, typeof NxOptionComponent, typeof NxOptionDividerComponent], [typeof NxSelectComponent, typeof NxOptionComponent, typeof NxOptionDividerComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxSelectModule>;
}

declare const NxSelectPlaceholderToken: InjectionToken<string | Signal<string>>;

declare const NxSelectZeroOptionsPlaceholderToken: InjectionToken<string | Signal<string>>;

/** Component for selecting multiple values from a set of options */
declare class NxMultiSelectComponent<T = unknown> extends NxInputLikeComponent implements AfterContentInit, OnDestroy, ControlValueAccessor, Validator, NxMultiSelect<T> {
    readonly multiple: true;
    private defaultPlaceholderToken;
    protected defaultPlaceholder: _angular_core.Signal<string | null>;
    /** Text displayed when no option is selected. */
    placeholder: _angular_core.InputSignal<string | undefined>;
    private injector;
    private destroyRef;
    protected host: ElementRef<HTMLElement>;
    private onChange;
    private onTouched;
    registerOnChange(fn: (_: T[]) => void): void;
    registerOnTouched(fn: () => void): void;
    /** Disabled state. */
    disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
    private cvaDisabled;
    setDisabledState(isDisabled: boolean): void;
    private disabled;
    protected _closeOnDisableEffect: _angular_core.EffectRef;
    /** Value of the select. */
    valueModel: _angular_core.ModelSignal<T[]>;
    protected _valueModelEffect: _angular_core.EffectRef;
    private value;
    protected _valueEffect: _angular_core.EffectRef;
    writeValue(value: T[]): void;
    /** Whether a value is required in a form. */
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    validate(control: AbstractControl<T[]>): ValidationErrors | null;
    private selected;
    selectedSet: _angular_core.Signal<Set<NxOptionComponent<T>>>;
    protected zeroOptions: _angular_core.Signal<boolean>;
    protected _zeroOptionEffect: _angular_core.EffectRef;
    private defaultZeroOptionPlaceholderToken;
    protected defaultZeroOptionPlaceholder: _angular_core.Signal<string | null>;
    /** Text displayed when there are no options. */
    zeroOptionsPlaceholder: _angular_core.InputSignal<string | undefined>;
    /** Function to generate trigger text from selected options. */
    triggerTextTransform: _angular_core.InputSignal<(selected: NxOptionComponent<T>[]) => string>;
    protected triggerText: _angular_core.Signal<string | null>;
    private options;
    private options$;
    /** Set active option on hover. */
    protected _onOptionHoverSubscription: rxjs.Subscription;
    protected _optionsChangeEffect: _angular_core.EffectRef;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    protected overlayOpen: _angular_core.WritableSignal<boolean>;
    protected ariaExpanded: _angular_core.Signal<nx_shared.AriaBoolean>;
    protected overlayWidth: _angular_core.WritableSignal<number>;
    protected overlayPositions: _angular_cdk_overlay_module_d_BvvR6Y05.g[];
    private optionsContainer;
    /** Compatibility hack for v19, previously effects fired after content init */
    private afterContentInit;
    private keyManager;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    protected onBlur(): void;
    protected onKeyDown(event: KeyboardEvent): void;
    protected onClosedKeyDown(event: KeyboardEvent): void;
    protected onClick(): void;
    protected open(): void;
    protected scrollOptionIntoView(option: NxOptionComponent<T>): void;
    protected onOpenKeyDown(event: KeyboardEvent): void;
    select(option: NxOptionComponent<T>): void;
    protected onOverlayKeyDown(event: KeyboardEvent): void;
    protected onOutsideClick(event: MouseEvent): void;
    protected close(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxMultiSelectComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxMultiSelectComponent<any>, "nx-multi-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "valueModel": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "zeroOptionsPlaceholder": { "alias": "zeroOptionsPlaceholder"; "required": false; "isSignal": true; }; "triggerTextTransform": { "alias": "triggerTextTransform"; "required": false; "isSignal": true; }; }, { "valueModel": "valueChange"; }, ["options"], ["*"], true, [{ directive: typeof NxFormFieldControlDirective; inputs: {}; outputs: {}; }]>;
}

declare class NxMultiSelectModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxMultiSelectModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxMultiSelectModule, never, [typeof NxMultiSelectComponent, typeof NxOptionComponent, typeof NxOptionDividerComponent], [typeof NxMultiSelectComponent, typeof NxOptionComponent, typeof NxOptionDividerComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxMultiSelectModule>;
}

declare const NxMultiSelectPlaceholderToken: InjectionToken<string | Signal<string>>;

/** Option component for NxComboboxComponent. */
declare class NxComboboxOptionComponent<T = unknown> implements AfterViewInit, Highlightable {
    content: _angular_core.Signal<TemplateRef<unknown>>;
    pseudohost: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
    hover: Subject<this>;
    /** Value of the option. */
    value: _angular_core.InputSignal<T>;
    /** Text displayed in the input when the option is selected.
     *
     * If not provided the component's internal text content is used.
     */
    labelInput: _angular_core.InputSignal<string>;
    host: ElementRef<HTMLElement>;
    protected textContent: _angular_core.WritableSignal<string | null>;
    ngAfterViewInit(): void;
    label: _angular_core.Signal<string>;
    /** Disabled state */
    disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected ariaDisabled: _angular_core.Signal<nx_shared.AriaBoolean>;
    protected active: _angular_core.WritableSignal<boolean>;
    private selectComponent;
    protected selected: _angular_core.Signal<boolean>;
    protected selectMode: _angular_core.Signal<boolean>;
    select(): void;
    protected _unselectEffect: _angular_core.EffectRef;
    protected _disabledEffect: _angular_core.EffectRef;
    /** @see {@link Highlightable} interface start */
    disabled: boolean;
    setActiveStyles(): void;
    setInactiveStyles(): void;
    getLabel(): string;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxComboboxOptionComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxComboboxOptionComponent<any>, "nx-combobox-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "labelInput": { "alias": "label"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

type NxComboboxParent<T = unknown> = {
    select: (option: NxComboboxOptionComponent<T>) => void;
    unselect: () => void;
    selected: Signal<NxComboboxOptionComponent<T> | undefined>;
    selectMode: Signal<boolean>;
};
declare const NxComboboxToken: InjectionToken<NxComboboxParent<unknown>>;

/** Function to match options to a search query.
 *
 * Note: Mutable arrays can be assigned to readonly type but not the other way around.
 */
type NxComboboxSearchFn<T = unknown> = (options: readonly NxComboboxOptionComponent<T>[], query: string) => readonly NxComboboxOptionComponent<T>[];
/** Component for for filtering a set of options matching a query. */
declare class NxComboboxComponent<T = unknown> extends NxInputLikeComponent implements AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator, NxComboboxParent<T> {
    private projectedInput;
    private observedDisabled;
    private disabledObserver;
    protected _observeDisableEffect: _angular_core.EffectRef;
    private fallbackInput;
    private formField;
    protected _setLabelTargetEffect: _angular_core.EffectRef;
    selectMode: _angular_core.Signal<boolean>;
    protected input: _angular_core.Signal<HTMLInputElement>;
    protected inputValue$: BehaviorSubject<string>;
    protected _inputInitializeEffect: _angular_core.EffectRef;
    protected _inputAttributeEffect: _angular_core.EffectRef;
    private projectedControl;
    private writeToInput;
    protected displayedPlaceholder: _angular_core.Signal<string | null | undefined>;
    readonly multiple: false;
    private defaultPlaceholderToken;
    protected defaultPlaceholder: _angular_core.Signal<string | null>;
    /** Text displayed when the input is empty.
     *
     * No effect in autocomplete mode.
     */
    placeholder: _angular_core.InputSignal<string | undefined>;
    private injector;
    private destroyRef;
    protected host: ElementRef<HTMLElement>;
    private onChange;
    private onTouched;
    registerOnChange(fn: (_: T | null) => void): void;
    registerOnTouched(fn: () => void): void;
    /** Disabled state. */
    disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
    private cvaDisabled;
    setDisabledState(isDisabled: boolean): void;
    protected disabled: _angular_core.Signal<boolean>;
    protected _closeOnDisableEffect: _angular_core.EffectRef;
    /** Value of the combobox. */
    valueModel: _angular_core.ModelSignal<T | null>;
    protected _valueModelEffect: _angular_core.EffectRef;
    private value;
    protected _valueEffect: _angular_core.EffectRef;
    writeValue(value: T | null, resetInput?: boolean): void;
    /** Whether a value is required in a form. */
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    validate(control: AbstractControl<T>): ValidationErrors | null;
    /** Whether a user has typed since an option was selected. */
    private pristineSelected;
    private _selected;
    selected: _angular_core.Signal<NxComboboxOptionComponent<T> | undefined>;
    protected _selectEffect: _angular_core.EffectRef;
    private options;
    private options$;
    /** Set active option on hover. */
    protected _onOptionHoverSubscription: rxjs.Subscription;
    private optionsMap;
    private toLower;
    private caseInsensitiveLabelSearch;
    private afterViewInit$;
    /** Function to match options to a search query. */
    searchFn: _angular_core.InputSignal<NxComboboxSearchFn<T>>;
    private _matches$;
    private matches;
    private matchIndexes;
    protected _matchesChangeEffect: _angular_core.EffectRef;
    /** Height of options in px.
     *
     * Default is height of text-only option with base styling.
     */
    optionHeight: _angular_core.InputSignal<number>;
    private contents;
    protected _constantHeightEffect: _angular_core.EffectRef;
    /** How many extra options to render in both directions. */
    scrollBuffer: _angular_core.InputSignal<number>;
    private DISPLAY_COUNT;
    private VERTICAL_PADDING_PX;
    protected scroll$: BehaviorSubject<number>;
    protected scrollParams$: rxjs.Observable<{
        matches: readonly NxComboboxOptionComponent<T>[];
        startIndex: number;
        startHeight: number;
        endIndex: number;
        endHeight: number;
    }>;
    protected _scrollResetEffect: _angular_core.EffectRef;
    private scrollIndexIntoView;
    protected zeroOptions: _angular_core.Signal<boolean>;
    protected _zeroOptionEffect: _angular_core.EffectRef;
    private defaultZeroOptionPlaceholderToken;
    protected defaultZeroOptionPlaceholder: _angular_core.Signal<string | null>;
    /** Text displayed when there are no options.
     *
     * No effect in autocomplete mode.
     */
    zeroOptionsPlaceholder: _angular_core.InputSignal<string | undefined>;
    protected _optionsChangeEffect: _angular_core.EffectRef;
    private connectedOverlay;
    protected overlayOpen: _angular_core.WritableSignal<boolean>;
    protected ariaExpanded: _angular_core.Signal<nx_shared.AriaBoolean>;
    protected overlayWidth: _angular_core.WritableSignal<number>;
    protected overlayPositions: _angular_cdk_overlay_module_d_BvvR6Y05.g[];
    private optionsContainer;
    /** Compatibility hack for v19, previously effects fired after content init */
    private afterContentInit;
    private keyManager;
    ngAfterContentInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    protected onBlur(): void;
    protected onKeyDown(event: KeyboardEvent): void;
    protected onClosedKeyDown(event: KeyboardEvent): void;
    protected onClick(): void;
    protected open(): void;
    protected onOpenKeyDown(event: KeyboardEvent): void;
    select(option: NxComboboxOptionComponent<T>): void;
    /** Called from option when it is disabled. */
    unselect(): void;
    protected onOverlayKeyDown(event: KeyboardEvent): void;
    protected onOutsideClick(event: MouseEvent): void;
    protected close(): void;
    protected clear(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxComboboxComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxComboboxComponent<any>, "nx-combobox", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "valueModel": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "optionHeight": { "alias": "optionHeight"; "required": false; "isSignal": true; }; "scrollBuffer": { "alias": "scrollBuffer"; "required": false; "isSignal": true; }; "zeroOptionsPlaceholder": { "alias": "zeroOptionsPlaceholder"; "required": false; "isSignal": true; }; }, { "valueModel": "valueChange"; }, ["projectedInput", "projectedControl", "options"], ["[nx-input]"], true, never>;
}

declare class NxComboboxModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxComboboxModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxComboboxModule, never, [typeof NxComboboxComponent, typeof NxComboboxOptionComponent], [typeof NxComboboxComponent, typeof NxComboboxOptionComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxComboboxModule>;
}

declare class NxToggleComponent extends BaseControlValueAccessor<boolean> implements Validator {
    value: _angular_core.ModelSignal<boolean>;
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /** tbd replace with linked signal */
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected disabledEffect: _angular_core.EffectRef;
    validate(control: AbstractControl): ValidationErrors | null;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxToggleComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxToggleComponent, "nx-toggle", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
}

declare class NxRadioComponent extends RadioControlValueAccessor implements OnInit {
    private radioInput;
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected isDisabled: _angular_core.WritableSignal<boolean>;
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected isRequired: _angular_core.WritableSignal<boolean>;
    checked: _angular_core.InputSignalWithTransform<boolean, unknown>;
    private ngControl;
    ngOnInit(): void;
    setProperty: (propertyName: string, value: unknown) => void;
    /**
     * Override to set internal value
     * TBD replace with linked signal
     */
    setDisabledState: (isDisabled: boolean) => void;
    protected disabledEffect: _angular_core.EffectRef;
    /**
     * 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
     */
    setRequiredState: (isRequired: boolean) => void;
    protected requiredEffect: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxRadioComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxRadioComponent, "nx-radio-v2", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof BaseComponent; inputs: {}; outputs: {}; }]>;
}

declare class NxRadioGroupComponent<T> extends BaseControlValueAccessor<T | undefined> {
    value: ModelSignal<T | undefined>;
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    private contentRadios;
    protected changeEffect: _angular_core.EffectRef;
    writeValue(value: T | undefined): void;
    protected requiredEffect: _angular_core.EffectRef;
    protected disabledEffect: _angular_core.EffectRef;
    protected disabledStateEffect: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxRadioGroupComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxRadioGroupComponent<any>, "nx-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["contentRadios"], ["*"], true, never>;
}

declare class NxModalComponent extends BaseComponent {
    private dialogElement;
    nxDialogOpen: _angular_core.ModelSignal<boolean>;
    hideClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
    onClose: _angular_core.OutputEmitterRef<boolean>;
    protected close: () => void;
    protected onDialogClose(): void;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxModalComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxModalComponent, "dialog[nx-modal]", never, { "nxDialogOpen": { "alias": "nxDialogOpen"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; }, { "nxDialogOpen": "nxDialogOpenChange"; "onClose": "onClose"; }, never, ["*"], true, never>;
}

/** Details component that mimics the native <detail> element with additional stylings */
declare class NxDetailsComponent {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxDetailsComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxDetailsComponent, "details[nx-details]", never, {}, {}, never, ["*"], true, never>;
}

type NxMenuItemAction<Context> = (event: MouseEvent | KeyboardEvent, context?: Context) => void;
type NxMenuItemsFactoryCallback<Context> = (context: Context) => NxMenuItem<Context>[] | Promise<NxMenuItem<Context>[]>;
type NxMenuItemsOrMenuItemsFactory<Context> = NxMenuItem<Context>[] | NxMenuItemsFactoryCallback<Context>;
interface NxBaseMenuItem {
    /** Display name or 'divider' for separator */
    name: string | 'divider';
    /** Function to determine if item is disabled */
    disabled?: Signal<boolean>;
    /** Function to determine if item is checked */
    checked?: Signal<boolean>;
}
interface NxMenuItem<Context> extends NxBaseMenuItem {
    /** Action to execute when item is clicked */
    action?: NxMenuItemAction<Context>;
    /** Submenu items or factory function */
    subMenu?: NxMenuItemsOrMenuItemsFactory<Context>;
}

/** Context menu component for displaying hierarchical menu items */
declare class NxContextMenuComponent<T = unknown> extends BaseComponent implements OnInit {
    /** Array of menu items to display or factory function */
    menuItems: InputSignal<NxMenuItemsOrMenuItemsFactory<T>>;
    /** Context object passed to menu item actions */
    context: InputSignal<T | undefined>;
    /** Text size for menu items */
    size: InputSignal<'14pt' | '16pt'>;
    /** Signal containing the processed menu items */
    protected menu: _angular_core.WritableSignal<NxMenuItem<T>[]>;
    /** Reference to the menu element in the DOM */
    protected menuElement: ElementRef<HTMLElement>;
    /**
     * 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.
     */
    ngOnInit(): Promise<void>;
    /** Handles click events on menu items */
    protected handleItemClick(item: NxMenuItem<T>, event: MouseEvent): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxContextMenuComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxContextMenuComponent<any>, "nx-context-menu", never, { "menuItems": { "alias": "menuItems"; "required": true; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class NxItemContainerComponent extends BaseComponent {
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxItemContainerComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxItemContainerComponent, "[nx-item-container]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

/**
 * 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)
 */
declare class NxSearchHighlightComponent implements AfterViewInit, OnDestroy {
    private host;
    search: _angular_core.InputSignal<string | RegExp>;
    protected regexFlags: string;
    protected highlightName: string;
    private currentTextContent;
    private previousTextContent;
    private previousSearch;
    private mutationObserver;
    private activeRanges;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    protected updateHighlights: _angular_core.EffectRef;
    /** 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(): void;
    private searchChanged;
    private applyHighlight;
    private collectTextNodes;
    private removeThisInstanceRanges;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSearchHighlightComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxSearchHighlightComponent, "nx-search-highlight", never, { "search": { "alias": "search"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxPlaceholderButtonsComponent {
    /**
     * Display buttons in a vertical column layout.
     * Buttons will take full width and stack vertically.
     */
    nxColumn: _angular_core.InputSignalWithTransform<boolean, unknown>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPlaceholderButtonsComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxPlaceholderButtonsComponent, "nx-placeholder-buttons", never, { "nxColumn": { "alias": "nxColumn"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxPlaceholderTextComponent {
    /**
     * Styles the text as a title and not a message.
     */
    nxTitle: _angular_core.InputSignalWithTransform<boolean, unknown>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPlaceholderTextComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxPlaceholderTextComponent, "nx-placeholder-text", never, { "nxTitle": { "alias": "nxTitle"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

declare class NxPlaceholderComponent extends BaseComponent {
    icon: _angular_core.InputSignal<NxIconOrName | TemplateRef<HTMLElement> | undefined>;
    title: _angular_core.InputSignal<string | TemplateRef<HTMLElement> | undefined>;
    message: _angular_core.InputSignal<string | TemplateRef<HTMLElement> | undefined>;
    buttons: _angular_core.InputSignal<TemplateRef<HTMLElement> | undefined>;
    variant: _angular_core.InputSignal<"error" | "none" | "success" | "warning" | "info">;
    protected class: _angular_core.Signal<string>;
    protected isDefaultVariant: _angular_core.Signal<boolean>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxPlaceholderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxPlaceholderComponent, "nx-placeholder", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Directive for providing navigation buttons for a step.
 */
declare class NxWizardButtonsDirective {
    /** @internal - Used by parent wizard to preserve injection context when rendering via ngTemplateOutlet */
    readonly injector: Injector;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxWizardButtonsDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxWizardButtonsDirective, "ng-template[nxWizardButtons]", never, {}, {}, never, never, true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxStepComponent extends CdkStep {
    /** @internal - Used by parent wizard to render the step's page title */
    titleTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
    /** @internal - Used by parent wizard to render the step's page subtitle */
    subtitleTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
    /** @internal - Used by parent wizard to render the step's buttons */
    buttonsTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
    /** @internal - Used by parent wizard to access the buttons directive's injector */
    buttonsDirective: _angular_core.Signal<NxWizardButtonsDirective | undefined>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxStepComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxStepComponent, "nx-step", never, {}, {}, ["titleTemplate", "subtitleTemplate", "buttonsTemplate", "buttonsDirective"], ["*"], true, never>;
}

/**
 * Represents the visual state of a wizard step indicator.
 */
declare enum WizardStepState {
    COMPLETED = "completed",
    CURRENT = "current",
    FUTURE = "future"
}

/**
 * Event emitted when a wizard step indicator is clicked.
 */
interface StepIndicatorClickEvent {
    /** The step index (0-based) */
    index: number;
    /** The current state of the step */
    state: 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>
 * ```
 */
declare class NxStepIndicatorComponent extends BaseComponent {
    protected readonly WizardStepState: typeof WizardStepState;
    /**
     * Check if the host element is a button.
     * Buttons should use type="button" to prevent form submission.
     */
    protected isButton: boolean;
    /**
     * Optional step number to display in the circle.
     * If not provided, it will be set automatically by the parent container.
     */
    stepNumber: _angular_core.InputSignal<string | number | undefined>;
    /**
     * The title for the step as a string.
     */
    title: _angular_core.InputSignal<string | undefined>;
    /**
     * Optional subtitle that appears below the title as a string.
     */
    subtitle: _angular_core.InputSignal<string | undefined>;
    /**
     * The current state of this step.
     * If not provided, it will be calculated automatically by the parent container.
     */
    state: _angular_core.InputSignal<"completed" | "current" | "future" | undefined>;
    /**
     * Event emitted when the indicator is clicked.
     * Only emits for completed steps (which are navigable).
     */
    indicatorClick: _angular_core.OutputEmitterRef<StepIndicatorClickEvent>;
    /** @internal - Used by parent container to set automatic state */
    _automaticState: _angular_core.WritableSignal<WizardStepState>;
    /** @internal - Used by parent container to set automatic step number */
    _automaticStepNumber: _angular_core.WritableSignal<number>;
    /** @internal - Used by parent container to set the step index */
    _stepIndex: _angular_core.WritableSignal<number>;
    /** @internal - Used by parent container to disable interactivity (e.g., in completed state) */
    _disabled: _angular_core.WritableSignal<boolean>;
    protected effectiveState: _angular_core.Signal<WizardStepState>;
    /**
     * Whether this indicator is interactive (clickable).
     * Only completed steps are interactive for navigation.
     */
    protected isInteractive: _angular_core.Signal<boolean>;
    /**
     * Whether to show the check icon (when completed).
     */
    protected showCheckIcon: _angular_core.Signal<boolean>;
    /**
     * Whether to show the step number (when not completed).
     */
    protected showStepNumber: _angular_core.Signal<boolean>;
    /**
     * Whether this step has a subtitle.
     */
    protected hasSubtitle: _angular_core.Signal<boolean>;
    /**
     * The step number to display, either automatic or input.
     */
    protected displayedStepNumber: _angular_core.Signal<string | number>;
    /**
     * Handle click events on the indicator.
     * Only emits for completed steps as they are the only navigable ones.
     */
    protected onIndicatorClick(event: MouseEvent): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxStepIndicatorComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxStepIndicatorComponent, "a[nx-step-indicator], button[nx-step-indicator]", never, { "stepNumber": { "alias": "stepNumber"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; }, { "indicatorClick": "indicatorClick"; }, never, never, true, never>;
}

/**
 * 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>
 * ```
 */
declare class NxWizardComponent extends CdkStepper {
    protected readonly WizardStepState: typeof WizardStepState;
    /**
     * Whether to render the full wizard view (indicators + content + buttons)
     * or just the indicators (view-only mode).
     *
     * @default true
     */
    fullWizardView: _angular_core.InputSignal<boolean>;
    /**
     * 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
     */
    completed: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Query for the wizard title template.
     */
    protected wizardTitleTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
    /**
     * Query for the exit button element.
     */
    protected exitButton: _angular_core.Signal<TemplateRef<any> | undefined>;
    /**
     * Query for the wizard completed template.
     */
    protected completedTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
    /**
     * Query for NxStepComponent children to access step-specific data.
     */
    protected nxSteps: _angular_core.Signal<readonly NxStepComponent[]>;
    /**
     * Query for NxStepIndicatorComponent instances within the step labels.
     * These are used to update indicator states.
     */
    protected stepIndicators: _angular_core.Signal<readonly NxStepIndicatorComponent[]>;
    /**
     * The currently selected NxStepComponent.
     */
    protected selectedNxStep: _angular_core.Signal<NxStepComponent | null>;
    /**
     * Effect to update indicator states when selectedIndex or completed changes.
     */
    protected updateIndicatorStates: _angular_core.EffectRef;
    /**
     * Check if a step has a label template.
     */
    protected hasLabelTemplate(stepIndex: number): boolean;
    /**
     * Get the label template for a step.
     */
    protected getLabelTemplate(stepIndex: number): TemplateRef<unknown> | null;
    /**
     * Whether the mobile sidebar overlay is open
     */
    protected mobileSidebarOpen: _angular_core.WritableSignal<boolean>;
    protected openMobileSidebar(): void;
    protected closeMobileSidebar(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxWizardComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxWizardComponent, "nx-wizard", never, { "fullWizardView": { "alias": "fullWizardView"; "required": false; "isSignal": true; }; "completed": { "alias": "completed"; "required": false; "isSignal": true; }; }, {}, ["wizardTitleTemplate", "exitButton", "completedTemplate", "nxSteps", "stepIndicators"], never, true, never>;
}

/**
 * Directive for providing content that fills the main content area when the wizard's `completed` input is `true`.
 */
declare class NxWizardCompletedDirective {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxWizardCompletedDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxWizardCompletedDirective, "ng-template[nxWizardCompleted]", never, {}, {}, never, never, true, never>;
}

/**
 * Directive for providing a title for the entire wizard.
 */
declare class NxWizardTitleDirective {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxWizardTitleDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxWizardTitleDirective, "ng-template[nxWizardTitle]", never, {}, {}, never, never, true, never>;
}

/**
 * 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.
 */
declare class NxWizardExitButtonDirective {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxWizardExitButtonDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxWizardExitButtonDirective, "ng-template[nxWizardExitButton]", never, {}, {}, never, never, true, never>;
}

/**
 * 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.
 */
declare class NxStepTitleDirective {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxStepTitleDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxStepTitleDirective, "ng-template[nxStepTitle]", never, {}, {}, never, never, true, never>;
}

/**
 * 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.
 */
declare class NxStepSubtitleDirective {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxStepSubtitleDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxStepSubtitleDirective, "ng-template[nxStepSubtitle]", never, {}, {}, never, never, true, never>;
}

declare class NxTagComponent extends BaseComponent {
    selected: _angular_core.InputSignal<boolean>;
    closable: _angular_core.InputSignal<boolean>;
    small: _angular_core.InputSignal<boolean>;
    close: _angular_core.OutputEmitterRef<void>;
    protected onCloseClick(event: Event): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTagComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxTagComponent, "button[nx-tag]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
}

declare class NxTabsDirective<T> {
    /**
     * The currently selected tab data. Can be set to select a specific tab or read to get the current selection's data.
     */
    nxSelectedTab: _angular_core.ModelSignal<T | undefined>;
    /**
     * Content children tabs items.
     */
    private contentTabs;
    /**
     * Computed property that returns the currently selected tab directive.
     * Finds the first tab item that has its selected state set to true.
     */
    private 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.
     */
    protected selectTabHandler: _angular_core.EffectRef;
    /**
     * Effect that synchronizes the nxSelectedTab model with the currently selected tab directive.
     * Updates the model value whenever a different tab becomes selected.
     */
    protected syncNxSelectedTab: _angular_core.EffectRef;
    /**
     * 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.
     */
    protected syncSelectedTab: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTabsDirective<any>, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxTabsDirective<any>, "[nxSelectedTab]", ["nxSelectedTab"], { "nxSelectedTab": { "alias": "nxSelectedTab"; "required": false; "isSignal": true; }; }, { "nxSelectedTab": "nxSelectedTabChange"; }, ["contentTabs"], never, true, never>;
}

declare class NxTabsKeyNavDirective {
    private contentChildren;
    /**
     * Content children tab html elements.
     */
    private tabs;
    protected onKeyDown(event: KeyboardEvent): void;
    /**
     * Gets the index of the currently focused tab element.
     * Returns the index of the active tab, or -1 if no tab is focused.
     */
    private getCurrentFocusTabIndex;
    private getNewIndex;
    /**
     * Focuses a tab at the specified index.
     */
    private focusTab;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTabsKeyNavDirective, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxTabsKeyNavDirective, "[nxTabsKeyNav]", never, {}, {}, ["contentChildren"], never, true, never>;
}

declare class NxTabsComponent extends BaseComponent {
    /**
     * The size of the tab container and buttons.
     * @default 'small'
     * @example
     * <nx-button size="large"></nx-button>
     */
    size: _angular_core.InputSignal<"small" | "large">;
    /**
     * The variant of the container and buttons.
     * @default 'light'
     * @example
     * <nx-button variant="light"></nx-button>
     */
    variant: _angular_core.InputSignal<"dark" | "light">;
    protected classes: _angular_core.Signal<"small light" | "small dark" | "large light" | "large dark">;
    /**
     * Content children tab items.
     */
    private contentTabs;
    protected updateInputsEffect: _angular_core.EffectRef;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTabsComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxTabsComponent, "nx-tabs", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["contentTabs"], ["*"], true, [{ directive: typeof NxTabsDirective; inputs: { "nxSelectedTab": "nxSelectedTab"; }; outputs: { "nxSelectedTabChange": "nxSelectedTabChange"; }; }, { directive: typeof NxTabsKeyNavDirective; inputs: {}; outputs: {}; }]>;
}

declare class NxTabsItemDirective<T> {
    /**
     * Optional data item associated with this tab.
     * Can be used to store any data related to the tab.
     */
    nxTabsItem: _angular_core.InputSignal<T | undefined>;
    /**
     * Event emitted when the tab item is selected.
     * Emits the directive instance itself.
     */
    onSelect: _angular_core.OutputEmitterRef<NxTabsItemDirective<T>>;
    /**
     * Optional disabled state. False by default.
     * The tab item is disabled and cannot be selected.
     */
    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
    protected disabledEffect: _angular_core.EffectRef;
    /**
     * Signal indicating whether this tab item is currently selected.
     */
    selected: _angular_core.WritableSignal<boolean>;
    protected callOnClick($event: MouseEvent): void;
    protected callOnKeyDown($event: KeyboardEvent): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTabsItemDirective<any>, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxTabsItemDirective<any>, "[nxTabsItem]", ["nxTabsItem"], { "nxTabsItem": { "alias": "nxTabsItem"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
}

declare enum TabsSize {
    SMALL = "small",
    LARGE = "large"
}
declare enum TabsVariant {
    LIGHT = "light",
    DARK = "dark"
}

declare class NxTabsItemComponent extends BaseComponent {
    protected readonly tabItemDir: NxTabsItemDirective<any>;
    readonly elementRef: ElementRef<any>;
    classes: WritableSignal<`${TabsSize} ${TabsVariant}`>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxTabsItemComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxTabsItemComponent, "nx-tabs-item", never, {}, {}, never, ["*"], true, [{ directive: typeof NxTabsItemDirective; inputs: { "nxTabsItem": "nxTabsItem"; "disabled": "disabled"; }; outputs: { "onSelect": "onSelect"; }; }]>;
}

/** Represents the sort order of items as an array of item identifiers */
type NxSortOrder = string[];
/** Context provided to each item template */
interface NxSortableListItemContext<T = unknown> {
    /** The data item */
    $implicit: T;
    /** Index within the sorted list (includes hidden items) */
    index: number;
}
/** Event emitted when sort order changes via drag-and-drop */
interface NxSortOrderChangeEvent {
    /** The complete new sort order (array of item IDs) */
    sortOrder: NxSortOrder;
    /** The ID of the item that was moved */
    movedItemId: string;
    /** Previous index in the displayed list */
    previousIndex: number;
    /** New index in the displayed list */
    currentIndex: number;
}

/**
 * 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>
 * ```
 */
declare class NxSortableListComponent<T = unknown> extends BaseComponent {
    /** The data items to render. */
    items: _angular_core.InputSignal<T[]>;
    /** Function to extract a unique string ID from each item. Used for sort tracking. */
    trackByFn: _angular_core.InputSignal<(item: T) => string>;
    /**
     * 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.
     */
    sortOrder: _angular_core.ModelSignal<NxSortOrder | null>;
    /**
     * 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.
     */
    hiddenPredicate: _angular_core.InputSignal<((item: T) => boolean) | null>;
    /**
     * 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.
     */
    draggablePredicate: _angular_core.InputSignal<((item: T) => boolean) | undefined>;
    /**
     * Emits a detailed event whenever the sort order changes via drag-and-drop.
     * The `sortOrder` model is also updated automatically.
     */
    onSortOrderChanged: _angular_core.OutputEmitterRef<NxSortOrderChangeEvent>;
    /** Template ref used to render each item. Receives `$implicit: T` and `index: number`. */
    itemTemplate: _angular_core.InputSignal<TemplateRef<NxSortableListItemContext<T>>>;
    /** Optional template ref shown when the list is empty or all items are hidden. */
    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
    protected variableColors: _angular_core.Signal<{
        readonly '--drag-shadow-one': "core_shade_dark1_opacity_2";
        readonly '--drag-shadow-two': "core_shade_dark1_opacity_3";
    }>;
    /**
     * Whether sorting is effectively active.
     * Always true unless a `hiddenPredicate` is set (filter is active).
     */
    protected sortingEnabled: _angular_core.Signal<boolean>;
    /** Items after applying the `sortOrder` input. */
    protected sortedItems: _angular_core.Signal<T[]>;
    /**
     * Whether every item in the list is hidden by the predicate, or the list is empty.
     * Used to show the empty-state slot.
     */
    protected allItemsHidden: _angular_core.Signal<boolean>;
    protected onDrop(event: CdkDragDrop<T[]>): void;
    protected isItemHidden(item: T): boolean;
    protected isDraggable(item: T): boolean;
    protected getItemContext(item: T, index: number): {
        $implicit: T;
        index: number;
    };
    private applySortOrder;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSortableListComponent<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxSortableListComponent<any>, "nx-sortable-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "trackByFn": { "alias": "trackBy"; "required": true; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; "hiddenPredicate": { "alias": "hiddenPredicate"; "required": false; "isSignal": true; }; "draggablePredicate": { "alias": "draggablePredicate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": true; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; }, { "sortOrder": "sortOrderChange"; "onSortOrderChanged": "onSortOrderChanged"; }, never, never, true, never>;
}

declare class NxSortableListModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxSortableListModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NxSortableListModule, never, [typeof NxSortableListComponent], [typeof NxSortableListComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NxSortableListModule>;
}

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, NxNotificationConfig, NxNotificationDetailHref, NxNotificationRef, 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 };
export type { AdditionalColors, AllowedOffset, AttentionColors, AvailablePeriod, BackgroundLuminosity, BrandColors, ConfigurableThemeColors, ContrastColors, CssColorVariable, CssColorVariables, DateRange, GeneratedHandler, GeneratedTheme, GeneratedThemeColors, HexString, HexStrings, HslaString, Hue, Initial, IntRange, NxComboboxParent, NxComboboxSearchFn, NxControlMessage, NxNotificationDetailRouterLink, NxNotificationType, NxSortOrder, NxSortOrderChangeEvent, NxSortableListItemContext, Opacity, OpacityDelimiter, OpacityValues, Percentage, ResolvedSideSheetConfig, ShadeDefinition, ShadeDefinitions, ShadeDelimiter, ShadeRange, ShadeValues, Shades, SideSheetConfig, SideSheetContent, SideSheetMode, SideSheetRefHandlers, SideSheetSize, SideSheetState, StepIndicatorClickEvent, ThemeColors, ThemeColorsWithShade, ThemeColorsWithoutShade, ThemeDefinition, ThemeDefinitionWithGenerated, ThemeMode, ThemeOptions, ThemeWithGeneratedAndOptions, ThemeWithOptions };
