import * as i1 from '@angular/common';
import { CommonModule, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, signal, effect, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
import { cva } from 'class-variance-authority';

const zLoadingVariants = cva('inline-block animate-spin', {
    variants: {
        zSize: {
            '2xs': 'size-3',
            xs: 'size-4',
            default: 'size-6',
            lg: 'size-8',
            xl: 'size-12',
        },
        zColor: {
            primary: 'text-primary',
            secondary: 'text-secondary-foreground',
            white: 'text-white',
            current: 'text-current',
        },
    },
    defaultVariants: {
        zSize: 'default',
        zColor: 'primary',
    },
});

class ZLoadingComponent {
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zSpinner = input('spinner', ...(ngDevMode ? [{ debugName: "zSpinner" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zColor = input('primary', ...(ngDevMode ? [{ debugName: "zColor" }] : []));
    zText = input('', ...(ngDevMode ? [{ debugName: "zText" }] : []));
    zOverlay = input(false, { ...(ngDevMode ? { debugName: "zOverlay" } : {}), transform: zTransform });
    zOverlayType = input('dark', ...(ngDevMode ? [{ debugName: "zOverlayType" }] : []));
    zFullscreen = input(false, { ...(ngDevMode ? { debugName: "zFullscreen" } : {}), transform: zTransform });
    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
    isLeaving = signal(false, ...(ngDevMode ? [{ debugName: "isLeaving" }] : []));
    _leaveTimeout = null;
    constructor() {
        effect(() => {
            this._handleLoadingChange();
        });
    }
    spinnerClasses = computed(() => zMergeClasses(zLoadingVariants({
        zSize: this.zSize(),
        zColor: this.zColor(),
    }), this.class()), ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : []));
    baseClasses = computed(() => {
        const size = this.zSize();
        const sizeClass = {
            '2xs': 'size-3',
            xs: 'size-4',
            default: 'size-6',
            lg: 'size-8',
            xl: 'size-12',
        }[size];
        return zMergeClasses('inline-block', sizeClass, `text-${this.zColor()}`, this.class());
    }, ...(ngDevMode ? [{ debugName: "baseClasses" }] : []));
    overlayClasses = computed(() => `z-loading-overlay-${this.zOverlayType()}`, ...(ngDevMode ? [{ debugName: "overlayClasses" }] : []));
    textSizeClasses = computed(() => {
        const size = this.zSize();
        return {
            'text-xs': size === '2xs' || size === 'xs',
            'text-sm': size === 'default',
            'text-base': size === 'lg',
            'text-lg': size === 'xl',
        };
    }, ...(ngDevMode ? [{ debugName: "textSizeClasses" }] : []));
    _handleLoadingChange() {
        const loading = this.zLoading();
        if (loading) {
            if (this._leaveTimeout) {
                clearTimeout(this._leaveTimeout);
                this._leaveTimeout = null;
            }
            this.isLeaving.set(false);
            this.isVisible.set(true);
            return;
        }
        this.isLeaving.set(true);
        this._leaveTimeout = setTimeout(() => {
            this.isVisible.set(false);
            this.isLeaving.set(false);
        }, 100);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZLoadingComponent, isStandalone: true, selector: "z-loading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSpinner: { classPropertyName: "zSpinner", publicName: "zSpinner", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColor: { classPropertyName: "zColor", publicName: "zColor", isSignal: true, isRequired: false, transformFunction: null }, zText: { classPropertyName: "zText", publicName: "zText", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zOverlayType: { classPropertyName: "zOverlayType", publicName: "zOverlayType", isSignal: true, isRequired: false, transformFunction: null }, zFullscreen: { classPropertyName: "zFullscreen", publicName: "zFullscreen", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-loading inline-flex" }, ngImport: i0, template: "@if (!zOverlay() && !zFullscreen()) {\n  <div\n    class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n    [class.opacity-0]=\"!zLoading()\"\n    [class.pointer-events-none]=\"!zLoading()\">\n    <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n  </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n  <div\n    class=\"z-loading-wrapper inline-flex items-center justify-center\"\n    [class.z-loading-overlay]=\"zOverlay()\"\n    [class.z-loading-fullscreen]=\"zFullscreen()\"\n    [class.z-loading-leaving]=\"isLeaving()\"\n    [class]=\"overlayClasses()\">\n    <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n  </div>\n}\n\n<ng-template #spinnerContent>\n  <div class=\"z-loading-content flex flex-col items-center justify-center gap-3\">\n    @switch (zSpinner()) {\n      @case ('spinner') {\n        <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n      }\n      @case ('orbit') {\n        <div [class]=\"spinnerClasses()\" class=\"z-loading-orbit relative\">\n          <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n          <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n        </div>\n      }\n      @case ('matrix') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-matrix\"></div>\n      }\n      @case ('conic') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-conic rounded-full\"></div>\n      }\n      @case ('polygon') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n      }\n      @case ('triple') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-triple rounded-full\"></div>\n      }\n    }\n\n    @if (zText()) {\n      <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n        {{ zText() }}\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [".z-loading:has(.z-loading-overlay),.z-loading:has(.z-loading-fullscreen){display:contents}.z-loading-overlay,.z-loading-fullscreen{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center}.z-loading-fullscreen{position:fixed;z-index:9999}.z-loading-overlay-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-default{background-color:var(--loading-overlay-bg, rgba(255, 255, 255, .85));animation:z-backdrop-enter .15s ease-out forwards}.dark .z-loading-overlay-default{background-color:#000000d9}.z-loading-leaving.z-loading-overlay-dark,.z-loading-leaving.z-loading-overlay-blur,.z-loading-leaving.z-loading-overlay-default{animation:z-backdrop-exit .12s ease-in forwards}.z-loading-content{position:relative;z-index:51}.z-loading-orbit{animation:z-loading-spin 1.2s linear infinite}.z-loading-matrix{width:1.5rem;height:1.3125rem;background:linear-gradient(transparent 16.6666666667%,currentColor 0 50%,transparent 0),linear-gradient(transparent 33.3333333333%,currentColor 0 66.6666666667%,transparent 0),linear-gradient(transparent 50%,currentColor 0 83.3333333333%,transparent 0);background-size:6px 400%;background-repeat:no-repeat;animation:z-loading-matrix 1s infinite linear}.z-loading-matrix.size-8{width:2rem;height:1.75rem;background-size:8px 400%}.z-loading-matrix.size-12{width:3rem;height:2.625rem;background-size:12px 400%}.z-loading-conic{padding:.5rem;aspect-ratio:1;background:currentColor;-webkit-mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:z-loading-conic 1s infinite linear}.z-loading-polygon{aspect-ratio:1;border:8px solid currentColor;animation:z-loading-polygon-1 .8s infinite linear alternate,z-loading-polygon-2 1.6s infinite linear}.z-loading-triple{aspect-ratio:1;border:8px solid transparent;border-right-color:currentColor;position:relative;animation:z-loading-triple 1s infinite linear}.z-loading-triple:before,.z-loading-triple:after{content:\"\";position:absolute;inset:-.5rem;border-radius:50%;border:inherit;animation:inherit}.z-loading-triple:before{animation-duration:2s;opacity:.6}.z-loading-triple:after{animation-duration:4s;opacity:.3}@keyframes z-loading-matrix{0%{background-position:0% 100%,50% 100%,100% 100%}to{background-position:0% 0%,50% 0%,100% 0%}}@keyframes z-loading-conic{to{transform:rotate(1turn)}}@keyframes z-loading-polygon-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes z-loading-polygon-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes z-loading-triple{to{transform:rotate(1turn)}}@keyframes z-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZLoadingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-loading', imports: [CommonModule, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'z-loading inline-flex',
                    }, template: "@if (!zOverlay() && !zFullscreen()) {\n  <div\n    class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n    [class.opacity-0]=\"!zLoading()\"\n    [class.pointer-events-none]=\"!zLoading()\">\n    <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n  </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n  <div\n    class=\"z-loading-wrapper inline-flex items-center justify-center\"\n    [class.z-loading-overlay]=\"zOverlay()\"\n    [class.z-loading-fullscreen]=\"zFullscreen()\"\n    [class.z-loading-leaving]=\"isLeaving()\"\n    [class]=\"overlayClasses()\">\n    <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n  </div>\n}\n\n<ng-template #spinnerContent>\n  <div class=\"z-loading-content flex flex-col items-center justify-center gap-3\">\n    @switch (zSpinner()) {\n      @case ('spinner') {\n        <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n        </svg>\n      }\n      @case ('orbit') {\n        <div [class]=\"spinnerClasses()\" class=\"z-loading-orbit relative\">\n          <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n          <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n        </div>\n      }\n      @case ('matrix') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-matrix\"></div>\n      }\n      @case ('conic') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-conic rounded-full\"></div>\n      }\n      @case ('polygon') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n      }\n      @case ('triple') {\n        <div [class]=\"baseClasses()\" class=\"z-loading-triple rounded-full\"></div>\n      }\n    }\n\n    @if (zText()) {\n      <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n        {{ zText() }}\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [".z-loading:has(.z-loading-overlay),.z-loading:has(.z-loading-fullscreen){display:contents}.z-loading-overlay,.z-loading-fullscreen{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center}.z-loading-fullscreen{position:fixed;z-index:9999}.z-loading-overlay-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-default{background-color:var(--loading-overlay-bg, rgba(255, 255, 255, .85));animation:z-backdrop-enter .15s ease-out forwards}.dark .z-loading-overlay-default{background-color:#000000d9}.z-loading-leaving.z-loading-overlay-dark,.z-loading-leaving.z-loading-overlay-blur,.z-loading-leaving.z-loading-overlay-default{animation:z-backdrop-exit .12s ease-in forwards}.z-loading-content{position:relative;z-index:51}.z-loading-orbit{animation:z-loading-spin 1.2s linear infinite}.z-loading-matrix{width:1.5rem;height:1.3125rem;background:linear-gradient(transparent 16.6666666667%,currentColor 0 50%,transparent 0),linear-gradient(transparent 33.3333333333%,currentColor 0 66.6666666667%,transparent 0),linear-gradient(transparent 50%,currentColor 0 83.3333333333%,transparent 0);background-size:6px 400%;background-repeat:no-repeat;animation:z-loading-matrix 1s infinite linear}.z-loading-matrix.size-8{width:2rem;height:1.75rem;background-size:8px 400%}.z-loading-matrix.size-12{width:3rem;height:2.625rem;background-size:12px 400%}.z-loading-conic{padding:.5rem;aspect-ratio:1;background:currentColor;-webkit-mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:z-loading-conic 1s infinite linear}.z-loading-polygon{aspect-ratio:1;border:8px solid currentColor;animation:z-loading-polygon-1 .8s infinite linear alternate,z-loading-polygon-2 1.6s infinite linear}.z-loading-triple{aspect-ratio:1;border:8px solid transparent;border-right-color:currentColor;position:relative;animation:z-loading-triple 1s infinite linear}.z-loading-triple:before,.z-loading-triple:after{content:\"\";position:absolute;inset:-.5rem;border-radius:50%;border:inherit;animation:inherit}.z-loading-triple:before{animation-duration:2s;opacity:.6}.z-loading-triple:after{animation-duration:4s;opacity:.3}@keyframes z-loading-matrix{0%{background-position:0% 100%,50% 100%,100% 100%}to{background-position:0% 0%,50% 0%,100% 0%}}@keyframes z-loading-conic{to{transform:rotate(1turn)}}@keyframes z-loading-polygon-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes z-loading-polygon-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes z-loading-triple{to{transform:rotate(1turn)}}@keyframes z-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSpinner", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColor", required: false }] }], zText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zText", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], zOverlayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlayType", required: false }] }], zFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFullscreen", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }] } });

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

export { ZLoadingComponent, zLoadingVariants };
//# sourceMappingURL=shival99-z-ui-components-z-loading.mjs.map
