import * as i0 from '@angular/core';
import { inject, ElementRef, Renderer2, Injector, ViewContainerRef, booleanAttribute, HostBinding, Input, Directive, input, linkedSignal, signal, computed, effect } from '@angular/core';
import { NgControl, FormControlName, FormGroupDirective, FormControlDirective } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { trigger, state, transition, style, AUTO_STYLE, animate } from '@angular/animations';

class InputDirective {
    get disabled() {
        return this._disabled ? true : null;
    }
    set disabled(state) {
        // in case it's controlled by NgControl override
        this._disabled = coerceBooleanProperty(state);
        // set BaseDirective Attribute
        this.euiDisabled = this._disabled;
    }
    get readonly() {
        return this._readonly ? '' : null;
    }
    set readonly(state) {
        this._readonly = coerceBooleanProperty(state);
    }
    get placeholder() {
        return this.getPlaceholderAttribute();
    }
    set placeholder(value) {
        this.setPlaceholderAttribute(value?.toString());
    }
    constructor() {
        this.euiDisabled = false;
        this.euiDanger = false;
        this._elementRef = inject(ElementRef);
        this._renderer = inject(Renderer2);
        this.injector = inject(Injector);
        this._viewContainerRef = this.injector.get(ViewContainerRef);
    }
    ngOnInit() {
        // extract the FormControl or NgControl
        this.control = this.injector.get(NgControl, undefined, { optional: true, self: true });
        let c = this.control;
        if (this.control instanceof FormControlName) {
            c = this.injector.get(FormGroupDirective).getControl(this.control);
        }
        else if (this.control instanceof FormControlDirective) {
            c = this.control.form;
        }
        if (c) {
            this.disabled = c.disabled;
            this.euiDisabled = this.disabled;
            // subscribe to NG control status changes to adjust inputs
            this._statusListener = c.statusChanges.subscribe((status) => {
                this.euiDanger = status === 'INVALID' && c.touched;
                this.disabled = status === 'DISABLED' && c.disabled;
            });
        }
    }
    ngOnDestroy() {
        if (this._statusListener) {
            this._statusListener.unsubscribe();
        }
    }
    ngOnChanges(changes) {
        const readOnlyChange = changes.readonly;
        if (readOnlyChange?.currentValue === true) {
            this._renderer.removeAttribute(this._elementRef.nativeElement, 'placeholder');
        }
    }
    getCssClasses(rootClass) {
        return [
            rootClass,
            this.euiDanger ? `${rootClass}--danger eui--danger` : '',
            this.euiDisabled ? `${rootClass}--disabled eui--disabled disabled` : '',
        ].join(' ').trim();
    }
    getPlaceholderAttribute() {
        // in readonly memorize placeholder value and remove placeholder. The reason is that CSS style for readonly
        // cannot hide the placeholder text
        if (this._elementRef.nativeElement.attributes['readonly']) {
            if (!this._placeholder) {
                this.setPlaceholderAttribute(this._elementRef.nativeElement.placeholder);
            }
            return undefined;
        }
        // keep placeholder's value
        this._placeholder = this._elementRef.nativeElement.placeholder || this._placeholder;
        return this._placeholder;
    }
    setPlaceholderAttribute(value) {
        if (!value) {
            this._renderer.removeAttribute(this._elementRef.nativeElement, 'placeholder');
        }
        else {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'placeholder', value);
        }
        this._placeholder = value;
    }
    setIdAttribute(value = null) {
        this._renderer.setAttribute(this._elementRef.nativeElement, 'id', value ? value : `${this._elementRef.nativeElement.type}_${Math.floor(Math.random() * 1000000)}`);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: InputDirective, isStandalone: false, selector: "input[euiInput]", inputs: { euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute], euiDanger: ["euiDanger", "euiDanger", booleanAttribute], disabled: "disabled", readonly: "readonly", placeholder: "placeholder" }, host: { properties: { "attr.disabled": "this.disabled", "attr.readonly": "this.readonly", "attr.placeholder": "this.placeholder" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'input[euiInput]',
                    standalone: false,
                }]
        }], ctorParameters: () => [], propDecorators: { euiDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiDanger: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], disabled: [{
                type: HostBinding,
                args: ['attr.disabled']
            }, {
                type: Input
            }], readonly: [{
                type: HostBinding,
                args: ['attr.readonly']
            }, {
                type: Input
            }], placeholder: [{
                type: HostBinding,
                args: ['attr.placeholder']
            }, {
                type: Input
            }] } });

/**
 * @internal
 */
class BaseStatesDirective {
    constructor() {
        // COLORS
        this.euiPrimary = input(false, { ...(ngDevMode ? { debugName: "euiPrimary" } : {}), transform: booleanAttribute });
        this.euiBranding = input(false, { ...(ngDevMode ? { debugName: "euiBranding" } : {}), transform: booleanAttribute });
        this.euiSecondary = input(false, { ...(ngDevMode ? { debugName: "euiSecondary" } : {}), transform: booleanAttribute });
        this.euiSecondaryLight = input(false, { ...(ngDevMode ? { debugName: "euiSecondaryLight" } : {}), transform: booleanAttribute });
        this.euiInfo = input(false, { ...(ngDevMode ? { debugName: "euiInfo" } : {}), transform: booleanAttribute });
        this.euiSuccess = input(false, { ...(ngDevMode ? { debugName: "euiSuccess" } : {}), transform: booleanAttribute });
        this.euiWarning = input(false, { ...(ngDevMode ? { debugName: "euiWarning" } : {}), transform: booleanAttribute });
        this.euiDanger = input(false, { ...(ngDevMode ? { debugName: "euiDanger" } : {}), transform: booleanAttribute });
        this.euiInverse = input(false, { ...(ngDevMode ? { debugName: "euiInverse" } : {}), transform: booleanAttribute });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiVariant = input(...(ngDevMode ? [undefined, { debugName: "euiVariant" }] : []));
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiVariantState = linkedSignal({ ...(ngDevMode ? { debugName: "euiVariantState" } : {}), source: this.euiVariant,
            computation: (variant) => variant });
        // SIZES
        this.euiSize2XS = input(false, { ...(ngDevMode ? { debugName: "euiSize2XS" } : {}), transform: booleanAttribute });
        this.euiSizeXS = input(false, { ...(ngDevMode ? { debugName: "euiSizeXS" } : {}), transform: booleanAttribute });
        this.euiSizeS = input(false, { ...(ngDevMode ? { debugName: "euiSizeS" } : {}), transform: booleanAttribute });
        this.euiSizeM = input(false, { ...(ngDevMode ? { debugName: "euiSizeM" } : {}), transform: booleanAttribute });
        this.euiSizeL = input(false, { ...(ngDevMode ? { debugName: "euiSizeL" } : {}), transform: booleanAttribute });
        this.euiSizeXL = input(false, { ...(ngDevMode ? { debugName: "euiSizeXL" } : {}), transform: booleanAttribute });
        this.euiSize2XL = input(false, { ...(ngDevMode ? { debugName: "euiSize2XL" } : {}), transform: booleanAttribute });
        this.euiSize3XL = input(false, { ...(ngDevMode ? { debugName: "euiSize3XL" } : {}), transform: booleanAttribute });
        this.euiSize4XL = input(false, { ...(ngDevMode ? { debugName: "euiSize4XL" } : {}), transform: booleanAttribute });
        this.euiSize5XL = input(false, { ...(ngDevMode ? { debugName: "euiSize5XL" } : {}), transform: booleanAttribute });
        this.euiSize6XL = input(false, { ...(ngDevMode ? { debugName: "euiSize6XL" } : {}), transform: booleanAttribute });
        this.euiSizeAuto = input(false, { ...(ngDevMode ? { debugName: "euiSizeAuto" } : {}), transform: booleanAttribute });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSizeVariant = input('', ...(ngDevMode ? [{ debugName: "euiSizeVariant" }] : []));
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use css
         */
        this.euiSizeVariantState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeVariantState" } : {}), source: this.euiSizeVariant,
            computation: (sizeVariant) => sizeVariant });
        // EXTRA SHAPES
        this.euiRounded = input(false, { ...(ngDevMode ? { debugName: "euiRounded" } : {}), transform: booleanAttribute });
        this.euiOutline = input(false, { ...(ngDevMode ? { debugName: "euiOutline" } : {}), transform: booleanAttribute });
        this.euiCompact = input(false, { ...(ngDevMode ? { debugName: "euiCompact" } : {}), transform: booleanAttribute });
        this.euiDisabled = input(false, { ...(ngDevMode ? { debugName: "euiDisabled" } : {}), transform: booleanAttribute });
        this.euiResponsive = input(false, { ...(ngDevMode ? { debugName: "euiResponsive" } : {}), transform: booleanAttribute });
        this.euiHighlighted = input(false, { ...(ngDevMode ? { debugName: "euiHighlighted" } : {}), transform: booleanAttribute });
        this.euiClearable = input(false, { ...(ngDevMode ? { debugName: "euiClearable" } : {}), transform: booleanAttribute });
        this.euiLoading = input(false, { ...(ngDevMode ? { debugName: "euiLoading" } : {}), transform: booleanAttribute });
        this.euiInverted = input(false, { ...(ngDevMode ? { debugName: "euiInverted" } : {}), transform: booleanAttribute });
        this.euiStart = input(false, { ...(ngDevMode ? { debugName: "euiStart" } : {}), transform: booleanAttribute });
        this.euiEnd = input(false, { ...(ngDevMode ? { debugName: "euiEnd" } : {}), transform: booleanAttribute });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiPrimaryState = linkedSignal({ ...(ngDevMode ? { debugName: "euiPrimaryState" } : {}), source: this.euiPrimary,
            computation: (primary) => primary });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiOutlineState = linkedSignal({ ...(ngDevMode ? { debugName: "euiOutlineState" } : {}), source: this.euiOutline,
            computation: (outline) => outline });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiDisabledState = linkedSignal({ ...(ngDevMode ? { debugName: "euiDisabledState" } : {}), source: this.euiDisabled,
            computation: (disabled) => disabled });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use css
         */
        this.euiInfoState = linkedSignal({ ...(ngDevMode ? { debugName: "euiInfoState" } : {}), source: this.euiInfo,
            computation: (info) => info });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use css
         */
        this.euiSizeLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeLState" } : {}), source: this.euiSizeL,
            computation: (sizeL) => sizeL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use css
         */
        this.euiDangerState = linkedSignal({ ...(ngDevMode ? { debugName: "euiDangerState" } : {}), source: this.euiDanger,
            computation: (danger) => danger });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiBrandingState = linkedSignal({ ...(ngDevMode ? { debugName: "euiBrandingState" } : {}), source: this.euiBranding,
            computation: (branding) => branding });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSecondaryState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSecondaryState" } : {}), source: this.euiSecondary,
            computation: (secondary) => secondary });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSecondaryLightState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSecondaryLightState" } : {}), source: this.euiSecondaryLight,
            computation: (secondaryLight) => secondaryLight });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSuccessState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSuccessState" } : {}), source: this.euiSuccess,
            computation: (success) => success });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiWarningState = linkedSignal({ ...(ngDevMode ? { debugName: "euiWarningState" } : {}), source: this.euiWarning,
            computation: (warning) => warning });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiInverseState = linkedSignal({ ...(ngDevMode ? { debugName: "euiInverseState" } : {}), source: this.euiInverse,
            computation: (inverse) => inverse });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSize2XSState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSize2XSState" } : {}), source: this.euiSize2XS,
            computation: (size2XS) => size2XS });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSizeXSState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeXSState" } : {}), source: this.euiSizeXS,
            computation: (sizeXS) => sizeXS });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSizeSState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeSState" } : {}), source: this.euiSizeS,
            computation: (sizeS) => sizeS });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSizeMState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeMState" } : {}), source: this.euiSizeM,
            computation: (sizeM) => sizeM });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSizeXLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeXLState" } : {}), source: this.euiSizeXL,
            computation: (sizeXL) => sizeXL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSize2XLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSize2XLState" } : {}), source: this.euiSize2XL,
            computation: (size2XL) => size2XL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSize3XLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSize3XLState" } : {}), source: this.euiSize3XL,
            computation: (size3XL) => size3XL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSize4XLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSize4XLState" } : {}), source: this.euiSize4XL,
            computation: (size4XL) => size4XL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSize5XLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSize5XLState" } : {}), source: this.euiSize5XL,
            computation: (size5XL) => size5XL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSize6XLState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSize6XLState" } : {}), source: this.euiSize6XL,
            computation: (size6XL) => size6XL });
        /**
         * @deprecated to be removed as the parent component should NOT have to know about individual states of the base
         * directive, but instead just set the rootClass and use cssClasses directly
         */
        this.euiSizeAutoState = linkedSignal({ ...(ngDevMode ? { debugName: "euiSizeAutoState" } : {}), source: this.euiSizeAuto,
            computation: (sizeAuto) => sizeAuto });
        this.rootClass = signal('', ...(ngDevMode ? [{ debugName: "rootClass" }] : []));
        this.cssClasses = computed(() => {
            const root = this.rootClass();
            return [
                this.rootClass(),
                this.euiPrimaryState() ? `${root}--primary eui--primary` : '',
                this.euiBrandingState() ? `${root}--branding eui--branding` : '',
                this.euiSecondaryState() ? `${root}--secondary eui--secondary` : '',
                this.euiSecondaryLightState() ? `${root}--secondary-light eui--secondary-light` : '',
                this.euiInfoState() ? `${root}--info eui--info` : '',
                this.euiSuccessState() ? `${root}--success eui--success` : '',
                this.euiWarningState() ? `${root}--warning eui--warning` : '',
                this.euiDangerState() ? `${root}--danger eui--danger` : '',
                this.euiInverseState() ? `${root}--inverse eui--inverse` : '',
                this.euiSize2XSState() ? `${root}--size-2xs eui--size-2xs` : '',
                this.euiSizeXSState() ? `${root}--size-xs eui--size-xs` : '',
                this.euiSizeSState() ? `${root}--size-s eui--size-s` : '',
                this.euiSizeMState() ? `${root}--size-m eui--size-m` : '',
                this.euiSizeLState() ? `${root}--size-l eui--size-l` : '',
                this.euiSizeXLState() ? `${root}--size-xl eui-size-xl` : '',
                this.euiSize2XLState() ? `${root}--size-2xl eui--size-2xl` : '',
                this.euiSize3XLState() ? `${root}--size-3xl eui--size-3xl` : '',
                this.euiSize4XLState() ? `${root}--size-4xl eui--size-4xl` : '',
                this.euiSize5XLState() ? `${root}--size-5xl eui--size-5xl` : '',
                this.euiSize6XLState() ? `${root}--size-6xl eui--size-6xl` : '',
                this.euiSizeAutoState() ? `${root}--size-auto eui--size-auto` : '',
                this.euiRounded() ? `${root}--rounded eui--rounded` : '',
                this.euiOutlineState() ? `${root}--outline eui--outline` : '',
                this.euiDisabledState() ? `${root}--disabled eui--disabled disabled` : '',
                this.euiCompact() ? `${root}--compact eui--compact` : '',
                this.euiResponsive() ? `${root}--responsive` : '',
                this.euiHighlighted() ? `${root}--highlighted` : '',
                this.euiClearable() ? `${root}--clearable` : '',
                this.euiLoading() ? `${root}--loading` : '',
                this.euiInverted() ? `${root}--inverted` : '',
                this.euiStart() ? `${root}--start` : '',
                this.euiEnd() ? `${root}--end` : '',
            ]
                .filter(c => c !== '')
                .join(' ')
                .trim();
        }, ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
        effect(() => {
            const variant = this.euiVariant();
            if (variant === 'primary') {
                this.euiPrimaryState.set(true);
            }
            else if (variant === 'branding') {
                this.euiBrandingState.set(true);
            }
            else if (variant === 'secondary') {
                this.euiSecondaryState.set(true);
            }
            else if (variant === 'secondaryLight') {
                this.euiSecondaryLightState.set(true);
            }
            else if (variant === 'info') {
                this.euiInfoState.set(true);
            }
            else if (variant === 'success') {
                this.euiSuccessState.set(true);
            }
            else if (variant === 'warning') {
                this.euiWarningState.set(true);
            }
            else if (variant === 'danger') {
                this.euiDangerState.set(true);
            }
            else if (variant === 'inverse') {
                this.euiInverseState.set(true);
            }
        });
        effect(() => {
            const variant = this.euiSizeVariant();
            if (variant === '2xs') {
                this.euiSize2XSState.set(true);
            }
            else if (variant === 'xs') {
                this.euiSizeXSState.set(true);
            }
            else if (variant === 's') {
                this.euiSizeSState.set(true);
            }
            else if (variant === 'm') {
                this.euiSizeMState.set(true);
            }
            else if (variant === 'l') {
                this.euiSizeLState.set(true);
            }
            else if (variant === 'xl') {
                this.euiSizeXLState.set(true);
            }
            else if (variant === '2xl') {
                this.euiSize2XLState.set(true);
            }
            else if (variant === '3xl') {
                this.euiSize3XLState.set(true);
            }
            else if (variant === '4xl') {
                this.euiSize4XLState.set(true);
            }
            else if (variant === '5xl') {
                this.euiSize5XLState.set(true);
            }
            else if (variant === '6xl') {
                this.euiSize6XLState.set(true);
            }
            else if (variant === 'auto') {
                this.euiSizeAutoState.set(true);
            }
        });
        effect(() => {
            if (this.euiPrimaryState()) {
                this.euiVariantState.set('primary');
            }
            if (this.euiBrandingState()) {
                this.euiVariantState.set('branding');
            }
            if (this.euiSecondaryState()) {
                this.euiVariantState.set('secondary');
            }
            if (this.euiSecondaryLightState()) {
                this.euiVariantState.set('secondaryLight');
            }
            if (this.euiInfoState()) {
                this.euiVariantState.set('info');
            }
            if (this.euiSuccessState()) {
                this.euiVariantState.set('success');
            }
            if (this.euiWarningState()) {
                this.euiVariantState.set('warning');
            }
            if (this.euiDangerState()) {
                this.euiVariantState.set('danger');
            }
            if (this.euiInverseState()) {
                this.euiVariantState.set('inverse');
            }
        });
        effect(() => {
            if (this.euiSize2XS()) {
                this.euiSizeVariantState.set('2xs');
            }
            if (this.euiSizeXS()) {
                this.euiSizeVariantState.set('xs');
            }
            if (this.euiSizeS()) {
                this.euiSizeVariantState.set('s');
            }
            if (this.euiSizeM()) {
                this.euiSizeVariantState.set('m');
            }
            if (this.euiSizeL()) {
                this.euiSizeVariantState.set('l');
            }
            if (this.euiSizeXL()) {
                this.euiSizeVariantState.set('xl');
            }
            if (this.euiSize2XL()) {
                this.euiSizeVariantState.set('2xl');
            }
            if (this.euiSize3XL()) {
                this.euiSizeVariantState.set('3xl');
            }
            if (this.euiSize4XL()) {
                this.euiSizeVariantState.set('4xl');
            }
            if (this.euiSize5XL()) {
                this.euiSizeVariantState.set('5xl');
            }
            if (this.euiSize6XL()) {
                this.euiSizeVariantState.set('6xl');
            }
            if (this.euiSizeAuto()) {
                this.euiSizeVariantState.set('auto');
            }
        });
    }
    /**
     * @deprecated use cssClasses instead and set rootClass signal directly
     * @param rootClass
     */
    getCssClasses(rootClass) {
        return computed(() => {
            const root = rootClass;
            return [
                root,
                this.euiPrimaryState() ? `${root}--primary eui--primary` : '',
                this.euiBrandingState() ? `${root}--branding eui--branding` : '',
                this.euiSecondaryState() ? `${root}--secondary eui--secondary` : '',
                this.euiSecondaryLightState() ? `${root}--secondary-light eui--secondary-light` : '',
                this.euiInfoState() ? `${root}--info eui--info` : '',
                this.euiSuccessState() ? `${root}--success eui--success` : '',
                this.euiWarningState() ? `${root}--warning eui--warning` : '',
                this.euiDangerState() ? `${root}--danger eui--danger` : '',
                this.euiInverseState() ? `${root}--inverse eui--inverse` : '',
                this.euiSize2XSState() ? `${root}--size-2xs eui--size-2xs` : '',
                this.euiSizeXSState() ? `${root}--size-xs eui--size-xs` : '',
                this.euiSizeSState() ? `${root}--size-s eui--size-s` : '',
                this.euiSizeMState() ? `${root}--size-m eui--size-m` : '',
                this.euiSizeLState() ? `${root}--size-l eui--size-l` : '',
                this.euiSizeXLState() ? `${root}--size-xl eui-size-xl` : '',
                this.euiSize2XLState() ? `${root}--size-2xl eui--size-2xl` : '',
                this.euiSize3XLState() ? `${root}--size-3xl eui--size-3xl` : '',
                this.euiSize4XLState() ? `${root}--size-4xl eui--size-4xl` : '',
                this.euiSize5XLState() ? `${root}--size-5xl eui--size-5xl` : '',
                this.euiSize6XLState() ? `${root}--size-6xl eui--size-6xl` : '',
                this.euiSizeAutoState() ? `${root}--size-auto eui--size-auto` : '',
                this.euiRounded() ? `${root}--rounded eui--rounded` : '',
                this.euiOutlineState() ? `${root}--outline eui--outline` : '',
                this.euiDisabledState() ? `${root}--disabled eui--disabled disabled` : '',
                this.euiCompact() ? `${root}--compact eui--compact` : '',
                this.euiResponsive() ? `${root}--responsive` : '',
                this.euiHighlighted() ? `${root}--highlighted` : '',
                this.euiClearable() ? `${root}--clearable` : '',
                this.euiLoading() ? `${root}--loading` : '',
                this.euiInverted() ? `${root}--inverted` : '',
                this.euiStart() ? `${root}--start` : '',
                this.euiEnd() ? `${root}--end` : '',
            ]
                .filter(c => c !== '')
                .join(' ')
                .trim();
        })();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: BaseStatesDirective, isStandalone: true, selector: "[euiBase]", inputs: { euiPrimary: { classPropertyName: "euiPrimary", publicName: "euiPrimary", isSignal: true, isRequired: false, transformFunction: null }, euiBranding: { classPropertyName: "euiBranding", publicName: "euiBranding", isSignal: true, isRequired: false, transformFunction: null }, euiSecondary: { classPropertyName: "euiSecondary", publicName: "euiSecondary", isSignal: true, isRequired: false, transformFunction: null }, euiSecondaryLight: { classPropertyName: "euiSecondaryLight", publicName: "euiSecondaryLight", isSignal: true, isRequired: false, transformFunction: null }, euiInfo: { classPropertyName: "euiInfo", publicName: "euiInfo", isSignal: true, isRequired: false, transformFunction: null }, euiSuccess: { classPropertyName: "euiSuccess", publicName: "euiSuccess", isSignal: true, isRequired: false, transformFunction: null }, euiWarning: { classPropertyName: "euiWarning", publicName: "euiWarning", isSignal: true, isRequired: false, transformFunction: null }, euiDanger: { classPropertyName: "euiDanger", publicName: "euiDanger", isSignal: true, isRequired: false, transformFunction: null }, euiInverse: { classPropertyName: "euiInverse", publicName: "euiInverse", isSignal: true, isRequired: false, transformFunction: null }, euiVariant: { classPropertyName: "euiVariant", publicName: "euiVariant", isSignal: true, isRequired: false, transformFunction: null }, euiSize2XS: { classPropertyName: "euiSize2XS", publicName: "euiSize2XS", isSignal: true, isRequired: false, transformFunction: null }, euiSizeXS: { classPropertyName: "euiSizeXS", publicName: "euiSizeXS", isSignal: true, isRequired: false, transformFunction: null }, euiSizeS: { classPropertyName: "euiSizeS", publicName: "euiSizeS", isSignal: true, isRequired: false, transformFunction: null }, euiSizeM: { classPropertyName: "euiSizeM", publicName: "euiSizeM", isSignal: true, isRequired: false, transformFunction: null }, euiSizeL: { classPropertyName: "euiSizeL", publicName: "euiSizeL", isSignal: true, isRequired: false, transformFunction: null }, euiSizeXL: { classPropertyName: "euiSizeXL", publicName: "euiSizeXL", isSignal: true, isRequired: false, transformFunction: null }, euiSize2XL: { classPropertyName: "euiSize2XL", publicName: "euiSize2XL", isSignal: true, isRequired: false, transformFunction: null }, euiSize3XL: { classPropertyName: "euiSize3XL", publicName: "euiSize3XL", isSignal: true, isRequired: false, transformFunction: null }, euiSize4XL: { classPropertyName: "euiSize4XL", publicName: "euiSize4XL", isSignal: true, isRequired: false, transformFunction: null }, euiSize5XL: { classPropertyName: "euiSize5XL", publicName: "euiSize5XL", isSignal: true, isRequired: false, transformFunction: null }, euiSize6XL: { classPropertyName: "euiSize6XL", publicName: "euiSize6XL", isSignal: true, isRequired: false, transformFunction: null }, euiSizeAuto: { classPropertyName: "euiSizeAuto", publicName: "euiSizeAuto", isSignal: true, isRequired: false, transformFunction: null }, euiSizeVariant: { classPropertyName: "euiSizeVariant", publicName: "euiSizeVariant", isSignal: true, isRequired: false, transformFunction: null }, euiRounded: { classPropertyName: "euiRounded", publicName: "euiRounded", isSignal: true, isRequired: false, transformFunction: null }, euiOutline: { classPropertyName: "euiOutline", publicName: "euiOutline", isSignal: true, isRequired: false, transformFunction: null }, euiCompact: { classPropertyName: "euiCompact", publicName: "euiCompact", isSignal: true, isRequired: false, transformFunction: null }, euiDisabled: { classPropertyName: "euiDisabled", publicName: "euiDisabled", isSignal: true, isRequired: false, transformFunction: null }, euiResponsive: { classPropertyName: "euiResponsive", publicName: "euiResponsive", isSignal: true, isRequired: false, transformFunction: null }, euiHighlighted: { classPropertyName: "euiHighlighted", publicName: "euiHighlighted", isSignal: true, isRequired: false, transformFunction: null }, euiClearable: { classPropertyName: "euiClearable", publicName: "euiClearable", isSignal: true, isRequired: false, transformFunction: null }, euiLoading: { classPropertyName: "euiLoading", publicName: "euiLoading", isSignal: true, isRequired: false, transformFunction: null }, euiInverted: { classPropertyName: "euiInverted", publicName: "euiInverted", isSignal: true, isRequired: false, transformFunction: null }, euiStart: { classPropertyName: "euiStart", publicName: "euiStart", isSignal: true, isRequired: false, transformFunction: null }, euiEnd: { classPropertyName: "euiEnd", publicName: "euiEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "this.euiDisabled() ? true : null" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseStatesDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[euiBase]',
                    host: {
                        '[attr.aria-disabled]': 'this.euiDisabled() ? true : null',
                    },
                }]
        }], ctorParameters: () => [], propDecorators: { euiPrimary: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiPrimary", required: false }] }], euiBranding: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiBranding", required: false }] }], euiSecondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSecondary", required: false }] }], euiSecondaryLight: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSecondaryLight", required: false }] }], euiInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiInfo", required: false }] }], euiSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSuccess", required: false }] }], euiWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiWarning", required: false }] }], euiDanger: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiDanger", required: false }] }], euiInverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiInverse", required: false }] }], euiVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiVariant", required: false }] }], euiSize2XS: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSize2XS", required: false }] }], euiSizeXS: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeXS", required: false }] }], euiSizeS: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeS", required: false }] }], euiSizeM: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeM", required: false }] }], euiSizeL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeL", required: false }] }], euiSizeXL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeXL", required: false }] }], euiSize2XL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSize2XL", required: false }] }], euiSize3XL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSize3XL", required: false }] }], euiSize4XL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSize4XL", required: false }] }], euiSize5XL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSize5XL", required: false }] }], euiSize6XL: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSize6XL", required: false }] }], euiSizeAuto: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeAuto", required: false }] }], euiSizeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiSizeVariant", required: false }] }], euiRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiRounded", required: false }] }], euiOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiOutline", required: false }] }], euiCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiCompact", required: false }] }], euiDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiDisabled", required: false }] }], euiResponsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiResponsive", required: false }] }], euiHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiHighlighted", required: false }] }], euiClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiClearable", required: false }] }], euiLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiLoading", required: false }] }], euiInverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiInverted", required: false }] }], euiStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiStart", required: false }] }], euiEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiEnd", required: false }] }] } });

const euiAnimationCollapse = trigger('euiAnimationCollapse', [
    state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
    state('true', style({ height: '0', visibility: 'hidden', paddingTop: '0', paddingBottom: '0' })),
    transition('false => true', animate(100 + 'ms ease-in')),
    transition('true => false', animate(200 + 'ms ease-out')),
]);

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

export { BaseStatesDirective, InputDirective, euiAnimationCollapse };
//# sourceMappingURL=eui-components-shared.mjs.map
