import * as i0 from '@angular/core';
import { input, booleanAttribute, inject, computed, ChangeDetectionStrategy, Component } 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.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Circle skeleton -->
 * <eui-skeleton [circle]="true" euiSizeM />
 *
 * <!-- Line skeleton -->
 * <eui-skeleton [line]="true" euiSizeL />
 *
 * <!-- Rectangle skeleton -->
 * <eui-skeleton [rectangle]="true" euiSizeXL />
 * ```
 *
 * ### Accessibility
 * - Use `aria-busy="true"` on parent container while loading
 * - Provide `aria-live="polite"` region for content updates
 * - Consider adding visually hidden text describing loading state
 *
 * ### Notes
 * - Only one shape should be active at a time (circle, line, square, or rectangle)
 * - Combine with size variants (euiSizeXS, euiSizeS, euiSizeM, euiSizeL, euiSizeXL) for different dimensions
 * - Use euiRounded for rounded corners on rectangle/square shapes
 */
class EuiSkeletonComponent {
    constructor() {
        /**
         * @description
         * When true, renders the skeleton as a circle shape
         * @default false
         */
        this.circle = input(false, { ...(ngDevMode ? { debugName: "circle" } : {}), transform: booleanAttribute });
        /**
         * @description
         * When true, renders the skeleton as a line shape
         * @default false
         */
        this.line = input(false, { ...(ngDevMode ? { debugName: "line" } : {}), transform: booleanAttribute });
        /**
         * @description
         * When true, renders the skeleton as a square shape
         * @default false
         */
        this.square = input(false, { ...(ngDevMode ? { debugName: "square" } : {}), transform: booleanAttribute });
        /**
         * @description
         * When true, renders the skeleton as a rectangle shape
         * @default false
         */
        this.rectangle = input(false, { ...(ngDevMode ? { debugName: "rectangle" } : {}), transform: booleanAttribute });
        /**
         * @description
         * Instance of BaseStatesDirective used to manage component states
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
        /**
         * @description
         * Computes and returns the CSS classes for the skeleton component.
         *
         * @returns {string} Space-separated string of CSS class names
         */
        this.cssClasses = computed(() => [
            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(), ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: EuiSkeletonComponent, isStandalone: true, selector: "eui-skeleton", inputs: { circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, line: { classPropertyName: "line", publicName: "line", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, rectangle: { classPropertyName: "rectangle", publicName: "rectangle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "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-21 :host.eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-c-surface-container-3);overflow:hidden}.eui-21 :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-21 :host.eui-skeleton--circle{border-radius:var(--eui-br-max);height:3rem;width:3rem}.eui-21 :host.eui-skeleton--line{display:block;height:var(--eui-s-m);width:100%}.eui-21 :host.eui-skeleton--square{height:3rem;width:3rem}.eui-21 :host.eui-skeleton--rectangle{height:var(--eui-s-xl);width:100%}.eui-21 :host.eui-skeleton--rounded{border-radius:var(--eui-s-m)}.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-21 :host.eui-skeleton--size-s.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-21 :host.eui-skeleton--size-s.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-21 :host.eui-skeleton--size-m.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-21 :host.eui-skeleton--size-m.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-21 :host.eui-skeleton--size-l.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-21 :host.eui-skeleton--size-l.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiSkeletonComponent, decorators: [{
            type: Component,
            args: [{ template: '', selector: 'eui-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class]': 'cssClasses()',
                    }, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiRounded',
                                'euiSizeVariant',
                            ],
                        },
                    ], styles: [".eui-21 :host.eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-c-surface-container-3);overflow:hidden}.eui-21 :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-21 :host.eui-skeleton--circle{border-radius:var(--eui-br-max);height:3rem;width:3rem}.eui-21 :host.eui-skeleton--line{display:block;height:var(--eui-s-m);width:100%}.eui-21 :host.eui-skeleton--square{height:3rem;width:3rem}.eui-21 :host.eui-skeleton--rectangle{height:var(--eui-s-xl);width:100%}.eui-21 :host.eui-skeleton--rounded{border-radius:var(--eui-s-m)}.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-21 :host.eui-skeleton--size-s.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-21 :host.eui-skeleton--size-s.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-21 :host.eui-skeleton--size-m.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-21 :host.eui-skeleton--size-m.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-21 :host.eui-skeleton--size-l.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-21 :host.eui-skeleton--size-l.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--line,.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--circle,.eui-21 :host.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"] }]
        }], propDecorators: { circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }], line: [{ type: i0.Input, args: [{ isSignal: true, alias: "line", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], rectangle: [{ type: i0.Input, args: [{ isSignal: true, alias: "rectangle", required: false }] }] } });

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

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

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