import * as i0 from '@angular/core';
import { inject, ElementRef, Renderer2, Injector, ViewContainerRef, booleanAttribute, HostBinding, Input, Directive } 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.2.16", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.16", 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.2.16", 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
            }] } });

class BaseStatesDirective {
    constructor() {
        // EXTRA SHAPES
        this.euiRounded = false;
        this.euiOutline = false;
        this.euiCompact = false;
        this.euiDisabled = false;
        this.euiResponsive = false;
        this.euiHighlighted = false;
        this.euiClearable = false;
        this.euiLoading = false;
        this.euiInverted = false;
        this.euiStart = false;
        this.euiEnd = false;
        this._euiPrimary = false;
        this._euiBranding = false;
        this._euiSecondary = false;
        this._euiSecondaryLight = false;
        this._euiInfo = false;
        this._euiSuccess = false;
        this._euiWarning = false;
        this._euiDanger = false;
        this._euiInverse = false;
        this._euiSize2XS = false;
        this._euiSizeXS = false;
        this._euiSizeS = false;
        this._euiSizeM = false;
        this._euiSizeL = false;
        this._euiSizeXL = false;
        this._euiSize2XL = false;
        this._euiSize3XL = false;
        this._euiSize4XL = false;
        this._euiSize5XL = false;
        this._euiSize6XL = false;
        this._euiSizeAuto = false;
        this._euiSizeVariant = '';
        this._euiVariant = '';
    }
    get ariaDisabled() {
        return this.euiDisabled ? true : null;
    }
    // COLORS
    get euiPrimary() {
        return this._euiPrimary;
    }
    set euiPrimary(value) {
        this._euiPrimary = coerceBooleanProperty(value);
        this._euiVariant = this._euiPrimary ? 'primary' : '';
    }
    get euiBranding() {
        return this._euiBranding;
    }
    set euiBranding(value) {
        this._euiBranding = coerceBooleanProperty(value);
        this._euiVariant = this._euiBranding ? 'branding' : '';
    }
    get euiSecondary() {
        return this._euiSecondary;
    }
    set euiSecondary(value) {
        this._euiSecondary = coerceBooleanProperty(value);
        this._euiVariant = this._euiSecondary ? 'secondary' : '';
    }
    get euiSecondaryLight() {
        return this._euiSecondaryLight;
    }
    set euiSecondaryLight(value) {
        this._euiSecondaryLight = coerceBooleanProperty(value);
        this._euiVariant = this._euiSecondaryLight ? 'secondaryLight' : '';
    }
    get euiInfo() {
        return this._euiInfo;
    }
    set euiInfo(value) {
        this._euiInfo = coerceBooleanProperty(value);
        this._euiVariant = this._euiInfo ? 'info' : '';
    }
    get euiSuccess() {
        return this._euiSuccess;
    }
    set euiSuccess(value) {
        this._euiSuccess = coerceBooleanProperty(value);
        this._euiVariant = this._euiSuccess ? 'success' : '';
    }
    get euiWarning() {
        return this._euiWarning;
    }
    set euiWarning(value) {
        this._euiWarning = coerceBooleanProperty(value);
        this._euiVariant = this._euiWarning ? 'warning' : '';
    }
    get euiDanger() {
        return this._euiDanger;
    }
    set euiDanger(value) {
        this._euiDanger = coerceBooleanProperty(value);
        this._euiVariant = this._euiDanger ? 'danger' : '';
    }
    get euiInverse() {
        return this._euiInverse;
    }
    set euiInverse(value) {
        this._euiInverse = coerceBooleanProperty(value);
        this._euiVariant = this._euiInverse ? 'inverse' : '';
    }
    get euiVariant() {
        return this._euiVariant;
    }
    set euiVariant(value) {
        this.euiPrimary = value === 'primary';
        this.euiBranding = value === 'branding';
        this.euiSecondary = value === 'secondary';
        this.euiSecondaryLight = value === 'secondaryLight';
        this.euiWarning = value === 'warning';
        this.euiInfo = value === 'info';
        this.euiSuccess = value === 'success';
        this.euiDanger = value === 'danger';
        this.euiInverse = value === 'inverse';
        this._euiVariant = value;
    }
    // SIZES
    get euiSize2XS() {
        return this._euiSize2XS;
    }
    set euiSize2XS(value) {
        this._euiSize2XS = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSize2XS ? '2xs' : '';
    }
    get euiSizeXS() {
        return this._euiSizeXS;
    }
    set euiSizeXS(value) {
        this._euiSizeXS = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSizeXS ? 'xs' : '';
    }
    get euiSizeS() {
        return this._euiSizeS;
    }
    set euiSizeS(value) {
        this._euiSizeS = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSizeS ? 's' : '';
    }
    get euiSizeM() {
        return this._euiSizeM;
    }
    set euiSizeM(value) {
        this._euiSizeM = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSizeM ? 'm' : '';
    }
    get euiSizeL() {
        return this._euiSizeL;
    }
    set euiSizeL(value) {
        this._euiSizeL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSizeL ? 'l' : '';
    }
    get euiSizeXL() {
        return this._euiSizeXL;
    }
    set euiSizeXL(value) {
        this._euiSizeXL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSizeXL ? 'xl' : '';
    }
    get euiSize2XL() {
        return this._euiSize2XL;
    }
    set euiSize2XL(value) {
        this._euiSize2XL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSize2XL ? '2xl' : '';
    }
    get euiSize3XL() {
        return this._euiSize3XL;
    }
    set euiSize3XL(value) {
        this._euiSize3XL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSize3XL ? '3xl' : '';
    }
    get euiSize4XL() {
        return this._euiSize4XL;
    }
    set euiSize4XL(value) {
        this._euiSize4XL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSize4XL ? '4xl' : '';
    }
    get euiSize5XL() {
        return this._euiSize5XL;
    }
    set euiSize5XL(value) {
        this._euiSize5XL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSize5XL ? '5xl' : '';
    }
    get euiSize6XL() {
        return this._euiSize6XL;
    }
    set euiSize6XL(value) {
        this._euiSize6XL = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSize6XL ? '6xl' : '';
    }
    get euiSizeAuto() {
        return this._euiSizeAuto;
    }
    set euiSizeAuto(value) {
        this._euiSizeAuto = coerceBooleanProperty(value);
        this._euiSizeVariant = this._euiSizeAuto ? 'auto' : '';
    }
    get euiSizeVariant() {
        return this._euiSizeVariant;
    }
    set euiSizeVariant(value) {
        this.euiSize2XS = value === '2xs';
        this.euiSizeXS = value === 'xs';
        this.euiSizeS = value === 's';
        this.euiSizeM = value === 'm';
        this.euiSizeL = value === 'l';
        this.euiSizeXL = value === 'xl';
        this.euiSize2XL = value === '2xl';
        this.euiSize3XL = value === '3xl';
        this.euiSize4XL = value === '4xl';
        this.euiSize5XL = value === '5xl';
        this.euiSize6XL = value === '6xl';
        this.euiSizeAuto = value === 'auto';
        this._euiSizeVariant = value;
    }
    getCssClasses(rootClass) {
        return [
            rootClass,
            this.euiPrimary ? `${rootClass}--primary eui--primary` : '',
            this.euiBranding ? `${rootClass}--branding eui--branding` : '',
            this.euiSecondary ? `${rootClass}--secondary eui--secondary` : '',
            this.euiSecondaryLight ? `${rootClass}--secondary-light eui--secondary-light` : '',
            this.euiInfo ? `${rootClass}--info eui--info` : '',
            this.euiSuccess ? `${rootClass}--success eui--success` : '',
            this.euiWarning ? `${rootClass}--warning eui--warning` : '',
            this.euiDanger ? `${rootClass}--danger eui--danger` : '',
            this.euiInverse ? `${rootClass}--inverse eui--inverse` : '',
            this.euiSize2XS ? `${rootClass}--size-2xs eui--size-2xs` : '',
            this.euiSizeXS ? `${rootClass}--size-xs eui--size-xs` : '',
            this.euiSizeS ? `${rootClass}--size-s eui--size-s` : '',
            this.euiSizeM ? `${rootClass}--size-m eui--size-m` : '',
            this.euiSizeL ? `${rootClass}--size-l eui--size-l` : '',
            this.euiSizeXL ? `${rootClass}--size-xl eui-size-xl` : '',
            this.euiSize2XL ? `${rootClass}--size-2xl eui--size-2xl` : '',
            this.euiSize3XL ? `${rootClass}--size-3xl eui--size-3xl` : '',
            this.euiSize4XL ? `${rootClass}--size-4xl eui--size-4xl` : '',
            this.euiSize5XL ? `${rootClass}--size-5xl eui--size-5xl` : '',
            this.euiSize6XL ? `${rootClass}--size-6xl eui--size-6xl` : '',
            this.euiSizeAuto ? `${rootClass}--size-auto eui--size-auto` : '',
            this.euiRounded ? `${rootClass}--rounded eui--rounded` : '',
            this.euiOutline ? `${rootClass}--outline eui--outline` : '',
            this.euiDisabled ? `${rootClass}--disabled eui--disabled disabled` : '',
            this.euiCompact ? `${rootClass}--compact eui--compact` : '',
            this.euiResponsive ? `${rootClass}--responsive` : '',
            this.euiHighlighted ? `${rootClass}--highlighted` : '',
            this.euiClearable ? `${rootClass}--clearable` : '',
            this.euiLoading ? `${rootClass}--loading` : '',
            this.euiInverted ? `${rootClass}--inverted` : '',
            this.euiStart ? `${rootClass}--start` : '',
            this.euiEnd ? `${rootClass}--end` : '',
        ]
            .filter(c => c !== '')
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.16", type: BaseStatesDirective, isStandalone: true, selector: "[euiBase]", inputs: { euiPrimary: "euiPrimary", euiBranding: "euiBranding", euiSecondary: "euiSecondary", euiSecondaryLight: "euiSecondaryLight", euiInfo: "euiInfo", euiSuccess: "euiSuccess", euiWarning: "euiWarning", euiDanger: "euiDanger", euiInverse: "euiInverse", euiVariant: "euiVariant", euiSize2XS: "euiSize2XS", euiSizeXS: "euiSizeXS", euiSizeS: "euiSizeS", euiSizeM: "euiSizeM", euiSizeL: "euiSizeL", euiSizeXL: "euiSizeXL", euiSize2XL: "euiSize2XL", euiSize3XL: "euiSize3XL", euiSize4XL: "euiSize4XL", euiSize5XL: "euiSize5XL", euiSize6XL: "euiSize6XL", euiSizeAuto: "euiSizeAuto", euiSizeVariant: "euiSizeVariant", euiRounded: ["euiRounded", "euiRounded", booleanAttribute], euiOutline: ["euiOutline", "euiOutline", booleanAttribute], euiCompact: ["euiCompact", "euiCompact", booleanAttribute], euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute], euiResponsive: ["euiResponsive", "euiResponsive", booleanAttribute], euiHighlighted: ["euiHighlighted", "euiHighlighted", booleanAttribute], euiClearable: ["euiClearable", "euiClearable", booleanAttribute], euiLoading: ["euiLoading", "euiLoading", booleanAttribute], euiInverted: ["euiInverted", "euiInverted", booleanAttribute], euiStart: ["euiStart", "euiStart", booleanAttribute], euiEnd: ["euiEnd", "euiEnd", booleanAttribute] }, host: { properties: { "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BaseStatesDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[euiBase]',
                }]
        }], propDecorators: { ariaDisabled: [{
                type: HostBinding,
                args: ['attr.aria-disabled']
            }], euiPrimary: [{
                type: Input
            }], euiBranding: [{
                type: Input
            }], euiSecondary: [{
                type: Input
            }], euiSecondaryLight: [{
                type: Input
            }], euiInfo: [{
                type: Input
            }], euiSuccess: [{
                type: Input
            }], euiWarning: [{
                type: Input
            }], euiDanger: [{
                type: Input
            }], euiInverse: [{
                type: Input
            }], euiVariant: [{
                type: Input
            }], euiSize2XS: [{
                type: Input
            }], euiSizeXS: [{
                type: Input
            }], euiSizeS: [{
                type: Input
            }], euiSizeM: [{
                type: Input
            }], euiSizeL: [{
                type: Input
            }], euiSizeXL: [{
                type: Input
            }], euiSize2XL: [{
                type: Input
            }], euiSize3XL: [{
                type: Input
            }], euiSize4XL: [{
                type: Input
            }], euiSize5XL: [{
                type: Input
            }], euiSize6XL: [{
                type: Input
            }], euiSizeAuto: [{
                type: Input
            }], euiSizeVariant: [{
                type: Input
            }], euiRounded: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiOutline: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiCompact: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiResponsive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiHighlighted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiClearable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiLoading: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiInverted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiStart: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiEnd: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

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
