import * as i0 from '@angular/core';
import { inject, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * @description
 * A skeleton loading component that provides various shapes and sizes for placeholder content.
 * Used to indicate loading states in the UI with different geometric shapes.
 */
class EuiSkeletonComponent {
    constructor() {
        /**
         * @description
         * When true, renders the skeleton as a circle shape
         * @default false
         */
        this.circle = false;
        /**
         * @description
         * When true, renders the skeleton as a line shape
         * @default false
         */
        this.line = false;
        /**
         * @description
         * When true, renders the skeleton as a square shape
         * @default false
         */
        this.square = false;
        /**
         * @description
         * When true, renders the skeleton as a rectangle shape
         * @default false
         */
        this.rectangle = false;
        /**
         * @description
         * Instance of BaseStatesDirective used to manage component states
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the skeleton component
     * by delegating to the private getCssClasses method.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return this.getCssClasses();
    }
    /**
     * @description
     * Combines all CSS classes based on the component's current state and shape inputs
     *
     * @private
     * @returns {string} Space-separated string of CSS class names
     */
    getCssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-skeleton'),
            this.circle ? 'eui-skeleton--circle' : '',
            this.line ? 'eui-skeleton--line' : '',
            this.square ? 'eui-skeleton--square' : '',
            this.rectangle ? 'eui-skeleton--rectangle' : '',
        ]
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiSkeletonComponent, isStandalone: true, selector: "eui-skeleton", inputs: { circle: ["circle", "circle", booleanAttribute], line: ["line", "line", booleanAttribute], square: ["square", "square", booleanAttribute], rectangle: ["rectangle", "rectangle", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiRounded", "euiRounded", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: '', isInline: true, styles: [".eui-19 :host.eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-c-surface-container-3);overflow:hidden}.eui-19 :host.eui-skeleton:after{content:\"\";animation:skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;background:linear-gradient(90deg,#fff0,#fff6,#fff0)}@keyframes skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.eui-19 :host.eui-skeleton--circle{border-radius:var(--eui-br-max);height:3rem;width:3rem}.eui-19 :host.eui-skeleton--line{display:block;height:var(--eui-s-m);width:100%}.eui-19 :host.eui-skeleton--square{height:3rem;width:3rem}.eui-19 :host.eui-skeleton--rectangle{height:var(--eui-s-xl);width:100%}.eui-19 :host.eui-skeleton--rounded{border-radius:var(--eui-s-m)}.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-19 :host.eui-skeleton--size-s.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-19 :host.eui-skeleton--size-s.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-19 :host.eui-skeleton--size-m.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-19 :host.eui-skeleton--size-m.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-19 :host.eui-skeleton--size-l.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-19 :host.eui-skeleton--size-l.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSkeletonComponent, decorators: [{
            type: Component,
            args: [{ template: '', selector: 'eui-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiRounded',
                                'euiSizeVariant',
                            ],
                        },
                    ], styles: [".eui-19 :host.eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-c-surface-container-3);overflow:hidden}.eui-19 :host.eui-skeleton:after{content:\"\";animation:skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;background:linear-gradient(90deg,#fff0,#fff6,#fff0)}@keyframes skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.eui-19 :host.eui-skeleton--circle{border-radius:var(--eui-br-max);height:3rem;width:3rem}.eui-19 :host.eui-skeleton--line{display:block;height:var(--eui-s-m);width:100%}.eui-19 :host.eui-skeleton--square{height:3rem;width:3rem}.eui-19 :host.eui-skeleton--rectangle{height:var(--eui-s-xl);width:100%}.eui-19 :host.eui-skeleton--rounded{border-radius:var(--eui-s-m)}.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-19 :host.eui-skeleton--size-s.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-19 :host.eui-skeleton--size-s.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-19 :host.eui-skeleton--size-m.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-19 :host.eui-skeleton--size-m.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-19 :host.eui-skeleton--size-l.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-19 :host.eui-skeleton--size-l.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--line,.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--circle,.eui-19 :host.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], circle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], line: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], square: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], rectangle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Module providing the EuiSkeletonComponent for use in other modules.
  *
 * @deprecated Use {@link EUI_SKELETON} instead.
 */
class EuiSkeletonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiSkeletonModule, imports: [EuiSkeletonComponent], exports: [EuiSkeletonComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSkeletonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSkeletonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        EuiSkeletonComponent,
                    ],
                    exports: [EuiSkeletonComponent],
                }]
        }] });

const EUI_SKELETON = [
    EuiSkeletonComponent,
];
// export { EuiSkeletonComponent as EuiSkeleton } from './eui-skeleton.component';

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

export { EUI_SKELETON, EuiSkeletonComponent, EuiSkeletonModule };
//# sourceMappingURL=eui-components-eui-skeleton.mjs.map
