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

const zAvatarVariants = cva([
    'inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none',
    'shadow-[0_0_0_1px_rgb(0_0_0/0.03),0_2px_8px_rgb(0_0_0/0.04)]',
    'bg-muted text-muted-foreground border-background',
], {
    variants: {
        zSize: {
            xs: 'size-6 text-[10px]',
            sm: 'size-8 text-xs',
            default: 'size-10 text-sm',
            lg: 'size-12 text-base',
            xl: 'size-16 text-xl',
        },
        zShape: {
            circle: 'rounded-full',
            rounded: 'rounded-md',
            square: 'rounded-sm',
        },
        zRing: {
            none: '',
            default: 'ring-2 ring-border ring-offset-2 ring-offset-background',
            active: 'ring-2 ring-primary ring-offset-2 ring-offset-background',
            muted: 'ring-2 ring-muted-foreground/25 ring-offset-2 ring-offset-background',
        },
    },
    defaultVariants: {
        zSize: 'default',
        zShape: 'circle',
        zRing: 'none',
    },
});
const zAvatarImageVariants = cva('size-full object-cover', {
    variants: {
        zShape: {
            circle: 'rounded-full',
            rounded: 'rounded-md',
            square: 'rounded-none',
        },
    },
    defaultVariants: {
        zShape: 'circle',
    },
});
const zAvatarStatusVariants = cva('absolute rounded-full border-2 border-background bg-current shadow-[0_0_0_1px_rgb(0_0_0/0.04)]', {
    variants: {
        zSize: {
            xs: 'right-0 bottom-0 size-2',
            sm: 'right-0 bottom-0 size-2.5',
            default: 'right-0 bottom-0 size-3',
            lg: 'right-0 bottom-0 size-3.5',
            xl: 'right-0.5 bottom-0.5 size-4',
        },
        zStatus: {
            online: 'text-emerald-500',
            offline: 'text-muted-foreground',
            busy: 'text-destructive',
            away: 'text-amber-500',
        },
        zAnimated: {
            true: 'z-avatar-status--animated',
            false: '',
        },
    },
    defaultVariants: {
        zSize: 'default',
        zStatus: 'offline',
        zAnimated: false,
    },
});
const zAvatarLabelVariants = cva('min-w-0', {
    variants: {
        zSize: {
            xs: 'text-xs',
            sm: 'text-xs',
            default: 'text-sm',
            lg: 'text-sm',
            xl: 'text-base',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});
const zAvatarGroupVariants = cva('inline-flex items-center', {
    variants: {
        zSize: {
            xs: '-space-x-0.5',
            sm: '-space-x-1',
            default: '-space-x-1.5',
            lg: '-space-x-2',
            xl: '-space-x-2.5',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});

class ZAvatarComponent {
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zSrc = input('', ...(ngDevMode ? [{ debugName: "zSrc" }] : []));
    zName = input('', ...(ngDevMode ? [{ debugName: "zName" }] : []));
    zAlt = input('', ...(ngDevMode ? [{ debugName: "zAlt" }] : []));
    zIcon = input('lucideUser', ...(ngDevMode ? [{ debugName: "zIcon" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zShape = input('circle', ...(ngDevMode ? [{ debugName: "zShape" }] : []));
    zStatus = input(...(ngDevMode ? [undefined, { debugName: "zStatus" }] : []));
    zRing = input('none', ...(ngDevMode ? [{ debugName: "zRing" }] : []));
    zFallback = input('initials', ...(ngDevMode ? [{ debugName: "zFallback" }] : []));
    zShowLabel = input(false, { ...(ngDevMode ? { debugName: "zShowLabel" } : {}), transform: zTransform });
    zStatusAnimated = input(false, { ...(ngDevMode ? { debugName: "zStatusAnimated" } : {}), transform: zTransform });
    zInteractive = input(false, { ...(ngDevMode ? { debugName: "zInteractive" } : {}), transform: zTransform });
    zDescription = input('', ...(ngDevMode ? [{ debugName: "zDescription" }] : []));
    imageFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageFailed" }] : []));
    hostClasses = computed(() => zMergeClasses(this.zShowLabel() ? 'inline-flex items-center gap-3' : 'inline-flex', 'relative', this.zInteractive() ? 'z-avatar--interactive hover:z-10' : '', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    avatarClasses = computed(() => zAvatarVariants({ zSize: this.zSize(), zShape: this.zShape(), zRing: this.zRing() }), ...(ngDevMode ? [{ debugName: "avatarClasses" }] : []));
    imageClasses = computed(() => zAvatarImageVariants({ zShape: this.zShape() }), ...(ngDevMode ? [{ debugName: "imageClasses" }] : []));
    statusClasses = computed(() => zAvatarStatusVariants({ zSize: this.zSize(), zStatus: this.zStatus(), zAnimated: this.zStatusAnimated() }), ...(ngDevMode ? [{ debugName: "statusClasses" }] : []));
    labelClasses = computed(() => zAvatarLabelVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
    iconSize = computed(() => {
        const sizes = {
            xs: '12',
            sm: '14',
            default: '16',
            lg: '18',
            xl: '24',
        };
        return sizes[this.zSize()];
    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
    altText = computed(() => this.zAlt() || this.zName() || 'Avatar', ...(ngDevMode ? [{ debugName: "altText" }] : []));
    shouldShowImage = computed(() => !!this.zSrc() && !this.imageFailed(), ...(ngDevMode ? [{ debugName: "shouldShowImage" }] : []));
    initials = computed(() => {
        const name = this.zName().trim();
        if (!name) {
            return '';
        }
        const parts = name.split(/\s+/).filter(Boolean);
        const first = parts[0]?.[0] ?? '';
        const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '';
        return `${first}${last}`.toUpperCase();
    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
    onImageError() {
        this.imageFailed.set(true);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZAvatarComponent, isStandalone: true, selector: "z-avatar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSrc: { classPropertyName: "zSrc", publicName: "zSrc", isSignal: true, isRequired: false, transformFunction: null }, zName: { classPropertyName: "zName", publicName: "zName", isSignal: true, isRequired: false, transformFunction: null }, zAlt: { classPropertyName: "zAlt", publicName: "zAlt", isSignal: true, isRequired: false, transformFunction: null }, zIcon: { classPropertyName: "zIcon", publicName: "zIcon", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zStatus: { classPropertyName: "zStatus", publicName: "zStatus", isSignal: true, isRequired: false, transformFunction: null }, zRing: { classPropertyName: "zRing", publicName: "zRing", isSignal: true, isRequired: false, transformFunction: null }, zFallback: { classPropertyName: "zFallback", publicName: "zFallback", isSignal: true, isRequired: false, transformFunction: null }, zShowLabel: { classPropertyName: "zShowLabel", publicName: "zShowLabel", isSignal: true, isRequired: false, transformFunction: null }, zStatusAnimated: { classPropertyName: "zStatusAnimated", publicName: "zStatusAnimated", isSignal: true, isRequired: false, transformFunction: null }, zInteractive: { classPropertyName: "zInteractive", publicName: "zInteractive", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<span class=\"relative inline-flex shrink-0 overflow-visible\">\n  <span [class]=\"avatarClasses()\">\n    @if (shouldShowImage()) {\n      <img [src]=\"zSrc()\" [alt]=\"altText()\" [class]=\"imageClasses()\" (error)=\"onImageError()\" />\n    } @else if (zFallback() === 'initials' && initials()) {\n      <span>{{ initials() }}</span>\n    } @else {\n      <z-icon [zType]=\"zIcon()\" [zSize]=\"iconSize()\" />\n    }\n  </span>\n\n  @if (zStatus()) {\n    <span [class]=\"statusClasses()\" aria-hidden=\"true\"></span>\n  }\n</span>\n\n@if (zShowLabel()) {\n  <span [class]=\"labelClasses()\">\n    <span class=\"text-foreground block overflow-hidden font-medium text-ellipsis whitespace-nowrap\">{{ zName() }}</span>\n    @if (zDescription()) {\n      <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n        {{ zDescription() }}\n      </span>\n    }\n  </span>\n}\n", styles: [".z-avatar-status--animated:before{position:absolute;inset:-3px;border-radius:9999px;background:currentColor;content:\"\";opacity:.26;animation:z-avatar-status-soft-pulse 1.9s ease-out infinite}.z-avatar--interactive>span:first-child>span:first-child{transition:box-shadow .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);will-change:transform}.z-avatar--interactive:hover>span:first-child>span:first-child{box-shadow:0 0 0 1px #0000000a,0 5px 14px #00000014;transform:translateY(-2px) scale(1.025)}@keyframes z-avatar-status-soft-pulse{0%{opacity:.22;transform:scale(.82)}70%{opacity:0;transform:scale(1.55)}to{opacity:0;transform:scale(1.55)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-avatar', imports: [ZIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 'hostClasses()',
                    }, template: "<span class=\"relative inline-flex shrink-0 overflow-visible\">\n  <span [class]=\"avatarClasses()\">\n    @if (shouldShowImage()) {\n      <img [src]=\"zSrc()\" [alt]=\"altText()\" [class]=\"imageClasses()\" (error)=\"onImageError()\" />\n    } @else if (zFallback() === 'initials' && initials()) {\n      <span>{{ initials() }}</span>\n    } @else {\n      <z-icon [zType]=\"zIcon()\" [zSize]=\"iconSize()\" />\n    }\n  </span>\n\n  @if (zStatus()) {\n    <span [class]=\"statusClasses()\" aria-hidden=\"true\"></span>\n  }\n</span>\n\n@if (zShowLabel()) {\n  <span [class]=\"labelClasses()\">\n    <span class=\"text-foreground block overflow-hidden font-medium text-ellipsis whitespace-nowrap\">{{ zName() }}</span>\n    @if (zDescription()) {\n      <span class=\"text-muted-foreground block overflow-hidden text-xs text-ellipsis whitespace-nowrap\">\n        {{ zDescription() }}\n      </span>\n    }\n  </span>\n}\n", styles: [".z-avatar-status--animated:before{position:absolute;inset:-3px;border-radius:9999px;background:currentColor;content:\"\";opacity:.26;animation:z-avatar-status-soft-pulse 1.9s ease-out infinite}.z-avatar--interactive>span:first-child>span:first-child{transition:box-shadow .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);will-change:transform}.z-avatar--interactive:hover>span:first-child>span:first-child{box-shadow:0 0 0 1px #0000000a,0 5px 14px #00000014;transform:translateY(-2px) scale(1.025)}@keyframes z-avatar-status-soft-pulse{0%{opacity:.22;transform:scale(.82)}70%{opacity:0;transform:scale(1.55)}to{opacity:0;transform:scale(1.55)}}\n"] }]
        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSrc", required: false }] }], zName: [{ type: i0.Input, args: [{ isSignal: true, alias: "zName", required: false }] }], zAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlt", required: false }] }], zIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIcon", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStatus", required: false }] }], zRing: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRing", required: false }] }], zFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallback", required: false }] }], zShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowLabel", required: false }] }], zStatusAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStatusAnimated", required: false }] }], zInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zInteractive", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }] } });

class ZAvatarGroupComponent {
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zItems = input([], ...(ngDevMode ? [{ debugName: "zItems" }] : []));
    zMax = input(5, ...(ngDevMode ? [{ debugName: "zMax" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zShape = input('circle', ...(ngDevMode ? [{ debugName: "zShape" }] : []));
    zRing = input('muted', ...(ngDevMode ? [{ debugName: "zRing" }] : []));
    hostClasses = computed(() => zMergeClasses(zAvatarGroupVariants({ zSize: this.zSize() }), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    visibleItems = computed(() => this.zItems().slice(0, Math.max(0, this.zMax())), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
    overflowCount = computed(() => Math.max(0, this.zItems().length - this.visibleItems().length), ...(ngDevMode ? [{ debugName: "overflowCount" }] : []));
    overflowClasses = computed(() => zAvatarVariants({ zSize: this.zSize(), zShape: this.zShape(), zRing: 'none' }), ...(ngDevMode ? [{ debugName: "overflowClasses" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZAvatarGroupComponent, isStandalone: true, selector: "z-avatar-group", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zRing: { classPropertyName: "zRing", publicName: "zRing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@for (item of visibleItems(); track item.id) {\n  <z-avatar\n    [zSrc]=\"item.src ?? ''\"\n    [zName]=\"item.name\"\n    [zAlt]=\"item.alt ?? item.name\"\n    [zIcon]=\"item.icon ?? 'lucideUser'\"\n    [zStatus]=\"item.status\"\n    [zSize]=\"zSize()\"\n    [zShape]=\"zShape()\"\n    [zRing]=\"zRing()\"\n    [zInteractive]=\"true\" />\n}\n\n@if (overflowCount() > 0) {\n  <span [class]=\"overflowClasses()\">+{{ overflowCount() }}</span>\n}\n", dependencies: [{ kind: "component", type: ZAvatarComponent, selector: "z-avatar", inputs: ["class", "zSrc", "zName", "zAlt", "zIcon", "zSize", "zShape", "zStatus", "zRing", "zFallback", "zShowLabel", "zStatusAnimated", "zInteractive", "zDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAvatarGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-avatar-group', imports: [ZAvatarComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 'hostClasses()',
                    }, template: "@for (item of visibleItems(); track item.id) {\n  <z-avatar\n    [zSrc]=\"item.src ?? ''\"\n    [zName]=\"item.name\"\n    [zAlt]=\"item.alt ?? item.name\"\n    [zIcon]=\"item.icon ?? 'lucideUser'\"\n    [zStatus]=\"item.status\"\n    [zSize]=\"zSize()\"\n    [zShape]=\"zShape()\"\n    [zRing]=\"zRing()\"\n    [zInteractive]=\"true\" />\n}\n\n@if (overflowCount() > 0) {\n  <span [class]=\"overflowClasses()\">+{{ overflowCount() }}</span>\n}\n" }]
        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItems", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zRing: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRing", required: false }] }] } });

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

export { ZAvatarComponent, ZAvatarGroupComponent, zAvatarGroupVariants, zAvatarImageVariants, zAvatarLabelVariants, zAvatarStatusVariants, zAvatarVariants };
//# sourceMappingURL=shival99-z-ui-components-z-avatar.mjs.map
