import { ElementRef, Signal } from '@angular/core';
import { CssColorVariables, IntRange, ThemeOptions } from '../theme-provider/color-types';
import { NxThemeProviderService } from '../theme-provider/theme-provider.service';
import * as i0 from "@angular/core";
export 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;
    /**
     * @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: import("@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 a custom theme option, such as to always invert the colors.
     */
    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;
    /**
     * The updateStyleEffect is used to set the css variables that are used within our design system.
     */
    protected readonly updateStyleEffect: import("@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: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseComponent, never, never, { "targetSurface": { "alias": "targetSurface"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
