import * as i0 from '@angular/core';
import { inject, ElementRef, input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { zMergeClasses } from '@shival99/z-ui/utils';
import { cva } from 'class-variance-authority';

const zSkeletonVariants = cva('z-skeleton', {
    variants: {
        type: {
            bar: 'z-skeleton-bar',
            circle: 'z-skeleton-circle',
            text: 'z-skeleton-text',
        },
        size: {
            sm: '',
            default: '',
            lg: '',
        },
        animated: {
            true: 'z-skeleton-animated',
            false: '',
        },
    },
    compoundVariants: [
        {
            type: 'circle',
            size: 'sm',
            class: 'z-skeleton-circle-sm',
        },
        {
            type: 'circle',
            size: 'default',
            class: 'z-skeleton-circle-default',
        },
        {
            type: 'circle',
            size: 'lg',
            class: 'z-skeleton-circle-lg',
        },
    ],
    defaultVariants: {
        type: 'bar',
        size: 'default',
        animated: true,
    },
});

class ZSkeletonComponent {
    _elementRef = inject(ElementRef);
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zType = input('bar', ...(ngDevMode ? [{ debugName: "zType" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zWidth = input('100%', ...(ngDevMode ? [{ debugName: "zWidth" }] : []));
    zHeight = input(undefined, ...(ngDevMode ? [{ debugName: "zHeight" }] : []));
    zRows = input(1, ...(ngDevMode ? [{ debugName: "zRows" }] : []));
    zGap = input(8, ...(ngDevMode ? [{ debugName: "zGap" }] : []));
    zAnimated = input(true, ...(ngDevMode ? [{ debugName: "zAnimated" }] : []));
    zRadius = input('4px', ...(ngDevMode ? [{ debugName: "zRadius" }] : []));
    _calculatedRows = signal(1, ...(ngDevMode ? [{ debugName: "_calculatedRows" }] : []));
    ngAfterViewInit() {
        if (this.zType() === 'bar') {
            this._calculateBarRows();
        }
    }
    containerClass = computed(() => zMergeClasses(this.class()), ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
    hostHeight = computed(() => {
        if (this.zType() !== 'text' || this.zRows() <= 1) {
            return this.zHeight();
        }
        const rowHeight = this.zHeight() ?? '1rem';
        const totalGap = (this.zRows() - 1) * this.zGap();
        return `calc(${rowHeight} * ${this.zRows()} + ${totalGap}px)`;
    }, ...(ngDevMode ? [{ debugName: "hostHeight" }] : []));
    skeletonClasses = computed(() => zSkeletonVariants({ type: this.zType(), size: this.zSize(), animated: this.zAnimated() }), ...(ngDevMode ? [{ debugName: "skeletonClasses" }] : []));
    circleStyles = computed(() => {
        if (this.zHeight() || this.zWidth() !== '100%') {
            return { width: this.zWidth(), height: this.zHeight() || this.zWidth() };
        }
        return {};
    }, ...(ngDevMode ? [{ debugName: "circleStyles" }] : []));
    shouldShowMultipleRows = computed(() => (this.zType() === 'bar' || this.zType() === 'text') && this.zRows() > 1, ...(ngDevMode ? [{ debugName: "shouldShowMultipleRows" }] : []));
    rowsArray = computed(() => {
        const type = this.zType();
        if (type !== 'bar' && type !== 'text') {
            return [{ index: 0, height: '0rem' }];
        }
        const rowCount = this.zRows() || this._calculatedRows();
        const gapBetweenRows = this.zGap();
        const totalGapSpace = (rowCount - 1) * gapBetweenRows;
        const height = this.zHeight();
        const rowHeight = height ?? `calc((100% - ${totalGapSpace}px) / ${rowCount})`;
        return Array.from({ length: rowCount }, (_, i) => ({ index: i, height: rowHeight }));
    }, ...(ngDevMode ? [{ debugName: "rowsArray" }] : []));
    _calculateBarRows() {
        const { parentElement } = this._elementRef.nativeElement || {};
        if (!parentElement) {
            return;
        }
        const rows = this.zRows();
        if (rows && rows > 0) {
            this._calculatedRows.set(rows);
            return;
        }
        this._calculatedRows.set(1);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZSkeletonComponent, isStandalone: true, selector: "z-skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zGap: { classPropertyName: "zGap", publicName: "zGap", isSignal: true, isRequired: false, transformFunction: null }, zAnimated: { classPropertyName: "zAnimated", publicName: "zAnimated", isSignal: true, isRequired: false, transformFunction: null }, zRadius: { classPropertyName: "zRadius", publicName: "zRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "zWidth()", "style.height": "hostHeight()" }, classAttribute: "z-skeleton-host" }, ngImport: i0, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:2rem;height:2rem}.z-skeleton-circle-default{width:3rem;height:3rem}.z-skeleton-circle-lg{width:4rem;height:4rem}.z-skeleton-text{height:1rem;border-radius:.25rem}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'z-skeleton-host',
                        '[style.width]': 'zWidth()',
                        '[style.height]': 'hostHeight()',
                    }, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:2rem;height:2rem}.z-skeleton-circle-default{width:3rem;height:3rem}.z-skeleton-circle-lg{width:4rem;height:4rem}.z-skeleton-text{height:1rem;border-radius:.25rem}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"] }]
        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGap", required: false }] }], zAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimated", required: false }] }], zRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRadius", required: false }] }] } });

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

export { ZSkeletonComponent, zSkeletonVariants };
//# sourceMappingURL=shival99-z-ui-components-z-skeleton.mjs.map
