import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, input, booleanAttribute, forwardRef, Component } from '@angular/core';
import { createAvatar } from '@dicebear/core';
import { initials, identicon } from '@dicebear/collection';
import { v7 } from 'uuid';
import { SafeHtmlPipe } from '@ngstarter-ui/components/core';

const AVATAR_ACCESSOR = new InjectionToken('AVATAR_ACCESSOR');

const alreadyLoadedImages$1 = [];
class Avatar {
    _elementRef = inject(ElementRef);
    image = input('', ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
    variant = input('', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
    automaticColor = input(...(ngDevMode ? [undefined, { debugName: "automaticColor" }] : /* istanbul ignore next */ []));
    presenceIndicator = input(null, ...(ngDevMode ? [{ debugName: "presenceIndicator" }] : /* istanbul ignore next */ []));
    imageLoaded;
    showLabel = false;
    ngOnInit() {
        if (!this.image()) {
            return;
        }
        this.imageLoaded = alreadyLoadedImages$1.includes(this.image());
    }
    ngAfterViewInit() {
        setTimeout(() => {
            this.showLabel = true;
        }, 0);
    }
    ngOnChanges(changes) {
        if (changes['automaticColor'] && changes['automaticColor'].currentValue) {
            this._setAutomaticColor(changes['automaticColor'].currentValue);
        }
    }
    onImageLoaded() {
        if (this.imageLoaded) {
            return;
        }
        alreadyLoadedImages$1.push(this.image());
        this.imageLoaded = true;
    }
    _setAutomaticColor(color) {
        if (!this.isValidHex(color)) {
            throw new Error(`Invalid ${color} color, automatic color supports only a valid hex color`);
        }
        const element = this._elementRef.nativeElement;
        element.style.setProperty('--ngs-avatar-bg', color);
        element.style.setProperty('--ngs-avatar-border-color-auto', this._newShade(color, -25));
        element.style.setProperty('--ngs-avatar-color', this._newShade(color, -150));
    }
    _newShade(hexColor, magnitude) {
        hexColor = hexColor.replace(`#`, ``);
        if (hexColor.length === 6) {
            const decimalColor = parseInt(hexColor, 16);
            let r = (decimalColor >> 16) + magnitude;
            r > 255 && (r = 255);
            r < 0 && (r = 0);
            let g = (decimalColor & 0x0000ff) + magnitude;
            g > 255 && (g = 255);
            g < 0 && (g = 0);
            let b = ((decimalColor >> 8) & 0x00ff) + magnitude;
            b > 255 && (b = 255);
            b < 0 && (b = 0);
            return `#${(g | (b << 8) | (r << 16)).toString(16)}`;
        }
        else {
            return hexColor;
        }
    }
    ;
    isValidHex(color) {
        if (!color || typeof color !== 'string') {
            return false;
        }
        // Validate hex values
        if (color.substring(0, 1) === '#') {
            color = color.substring(1);
        }
        switch (color.length) {
            case 3: {
                return /^[0-9A-F]{3}$/i.test(color);
            }
            case 6: {
                return /^[0-9A-F]{6}$/i.test(color);
            }
            case 8: {
                return /^[0-9A-F]{8}$/i.test(color);
            }
            default: {
                return false;
            }
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Avatar, isStandalone: true, selector: "ngs-avatar,[ngs-avatar]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, automaticColor: { classPropertyName: "automaticColor", publicName: "automaticColor", isSignal: true, isRequired: false, transformFunction: null }, presenceIndicator: { classPropertyName: "presenceIndicator", publicName: "presenceIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-clickable": "clickable()", "class.has-automatic-color": "!!automaticColor()", "class.has-loaded-image": "image() && imageLoaded", "class.is-solid": "variant() === \"solid\"", "class.is-tonal": "variant() === \"tonal\"", "class.is-outlined": "variant() === \"outlined\"", "class.is-plain": "variant() === \"plain\"" }, classAttribute: "ngs-avatar" }, providers: [
            {
                provide: AVATAR_ACCESSOR,
                useExisting: forwardRef(() => Avatar),
                multi: true
            }
        ], exportAs: ["ngsAvatar"], usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\" [alt]=\"alt()\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (label() && showLabel) {\n  <svg viewBox=\"0 0 50 50\" class=\"text\">\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      alignment-baseline=\"central\"\n      text-anchor=\"middle\"\n      font-weight=\"inherit\"\n      font-size=\"20\"\n      fill=\"currentColor\">{{ label() }}</text>\n  </svg>\n}\n\n<ng-content select=\"mat-icon,ngs-icon\"/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-surface-container-highest);--ngs-avatar-color: var(--ngs-color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--ngs-color-success);--ngs-avatar-presence-indicator-offline-bg: var(--ngs-color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--ngs-color-warning);--ngs-avatar-presence-indicator-outline: var(--ngs-color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 1px var(--ngs-color-outline-variant);--ngs-avatar-border-color: transparent;--ngs-avatar-border-width: 1px;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=text-]){color:var(--ngs-avatar-color)}:host:not([class*=rounded]){border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host:not([class*=bg-]):not(.has-loaded-image){background:var(--ngs-avatar-bg)}:host.is-solid{--ngs-avatar-bg: var(--ngs-color-primary);--ngs-avatar-color: var(--ngs-color-on-primary)}:host.is-tonal{--ngs-avatar-bg: var(--ngs-color-surface-container-highest);--ngs-avatar-color: var(--ngs-color-on-surface)}:host.is-outlined{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--ngs-color-on-surface);box-shadow:var(--ngs-avatar-inner-border)}:host.is-plain{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--ngs-color-on-surface)}:host .text{z-index:0;width:100%;height:100%}:host.has-loaded-image .text{display:none}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}:host ::ng-deep .ngs-icon{display:flex;align-items:center;justify-content:center}:host.has-automatic-color{--ngs-avatar-border-color: var(--ngs-avatar-border-color-auto, transparent)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Avatar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-avatar,[ngs-avatar]', exportAs: 'ngsAvatar', standalone: true, providers: [
                        {
                            provide: AVATAR_ACCESSOR,
                            useExisting: forwardRef(() => Avatar),
                            multi: true
                        }
                    ], host: {
                        'class': 'ngs-avatar',
                        '[class.is-clickable]': 'clickable()',
                        '[class.has-automatic-color]': '!!automaticColor()',
                        '[class.has-loaded-image]': 'image() && imageLoaded',
                        '[class.is-solid]': 'variant() === "solid"',
                        '[class.is-tonal]': 'variant() === "tonal"',
                        '[class.is-outlined]': 'variant() === "outlined"',
                        '[class.is-plain]': 'variant() === "plain"',
                    }, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\" [alt]=\"alt()\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (label() && showLabel) {\n  <svg viewBox=\"0 0 50 50\" class=\"text\">\n    <text\n      x=\"50%\"\n      y=\"50%\"\n      alignment-baseline=\"central\"\n      text-anchor=\"middle\"\n      font-weight=\"inherit\"\n      font-size=\"20\"\n      fill=\"currentColor\">{{ label() }}</text>\n  </svg>\n}\n\n<ng-content select=\"mat-icon,ngs-icon\"/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-surface-container-highest);--ngs-avatar-color: var(--ngs-color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--ngs-color-success);--ngs-avatar-presence-indicator-offline-bg: var(--ngs-color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--ngs-color-warning);--ngs-avatar-presence-indicator-outline: var(--ngs-color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 1px var(--ngs-color-outline-variant);--ngs-avatar-border-color: transparent;--ngs-avatar-border-width: 1px;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=text-]){color:var(--ngs-avatar-color)}:host:not([class*=rounded]){border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host:not([class*=bg-]):not(.has-loaded-image){background:var(--ngs-avatar-bg)}:host.is-solid{--ngs-avatar-bg: var(--ngs-color-primary);--ngs-avatar-color: var(--ngs-color-on-primary)}:host.is-tonal{--ngs-avatar-bg: var(--ngs-color-surface-container-highest);--ngs-avatar-color: var(--ngs-color-on-surface)}:host.is-outlined{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--ngs-color-on-surface);box-shadow:var(--ngs-avatar-inner-border)}:host.is-plain{--ngs-avatar-bg: transparent;--ngs-avatar-color: var(--ngs-color-on-surface)}:host .text{z-index:0;width:100%;height:100%}:host.has-loaded-image .text{display:none}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}:host ::ng-deep .ngs-icon{display:flex;align-items:center;justify-content:center}:host.has-automatic-color{--ngs-avatar-border-color: var(--ngs-avatar-border-color-auto, transparent)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], automaticColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "automaticColor", required: false }] }], presenceIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenceIndicator", required: false }] }] } });

class AvatarGroup {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarGroup, isStandalone: true, selector: "ngs-avatar-group", host: { classAttribute: "ngs-avatar-group" }, exportAs: ["ngsAvatarGroup"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-group-item-offset: calc(var(--spacing, .25rem) * 4);--ngs-avatar-group-item-border: 2px solid white;display:flex;flex:none;position:relative;align-items:center}:host ::ng-deep *+*{margin-left:calc(var(--ngs-avatar-group-item-offset) * -1)}:host ::ng-deep .ngs-avatar,:host ::ng-deep .ngs-avatar-total,:host ::ng-deep .ngs-avatar-more{border:var(--ngs-avatar-group-item-border);z-index:0}:host ::ng-deep .ngs-avatar:hover,:host ::ng-deep .ngs-avatar-total:hover,:host ::ng-deep .ngs-avatar-more:hover{z-index:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarGroup, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-avatar-group', exportAs: 'ngsAvatarGroup', standalone: true, host: {
                        'class': 'ngs-avatar-group'
                    }, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-group-item-offset: calc(var(--spacing, .25rem) * 4);--ngs-avatar-group-item-border: 2px solid white;display:flex;flex:none;position:relative;align-items:center}:host ::ng-deep *+*{margin-left:calc(var(--ngs-avatar-group-item-offset) * -1)}:host ::ng-deep .ngs-avatar,:host ::ng-deep .ngs-avatar-total,:host ::ng-deep .ngs-avatar-more{border:var(--ngs-avatar-group-item-border);z-index:0}:host ::ng-deep .ngs-avatar:hover,:host ::ng-deep .ngs-avatar-total:hover,:host ::ng-deep .ngs-avatar-more:hover{z-index:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class AvatarMore {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarMore, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarMore, isStandalone: true, selector: "ngs-avatar-more,[ngs-avatar-more]", host: { classAttribute: "ngs-avatar-more" }, exportAs: ["ngsAvatarMore"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-success);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--ngs-color-border);--ngs-avatar-total-font-size: var(--ngs-font-size-xs);--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--ngs-color-neutral-700);--ngs-avatar-total-hover-bg: var(--ngs-color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--ngs-color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--ngs-color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarMore, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-avatar-more,[ngs-avatar-more]', exportAs: 'ngsAvatarMore', imports: [], host: {
                        'class': 'ngs-avatar-more'
                    }, template: "<ng-content/>\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-success);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--ngs-color-border);--ngs-avatar-total-font-size: var(--ngs-font-size-xs);--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--ngs-color-neutral-700);--ngs-avatar-total-hover-bg: var(--ngs-color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--ngs-color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--ngs-color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

// DEPRECATED
class AvatarTotal {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarTotal, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarTotal, isStandalone: true, selector: "ngs-avatar-total,[ngs-avatar-total]", host: { classAttribute: "ngs-avatar-total" }, exportAs: ["ngsAvatarTotal"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-success);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--ngs-color-border);--ngs-avatar-total-font-size: var(--ngs-font-size-xs);--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--ngs-color-neutral-700);--ngs-avatar-total-hover-bg: var(--ngs-color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--ngs-color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--ngs-color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarTotal, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-avatar-total,[ngs-avatar-total]', exportAs: 'ngsAvatarTotal', standalone: true, host: {
                        'class': 'ngs-avatar-total'
                    }, template: "<ng-content />\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-success);--ngs-avatar-color: white;--ngs-avatar-inner-border: inset 0 0 2px var(--ngs-color-border);--ngs-avatar-total-font-size: var(--ngs-font-size-xs);--ngs-avatar-total-font-weight: 500;--ngs-avatar-total-color: white;--ngs-avatar-total-bg: var(--ngs-color-neutral-700);--ngs-avatar-total-hover-bg: var(--ngs-color-neutral-600);background:var(--ngs-avatar-total-bg);font-size:var(--ngs-avatar-total-font-size);font-weight:var(--ngs-avatar-total-font-weight);color:var(--ngs-avatar-total-color);border-radius:var(--ngs-avatar-border-radius);flex:none;display:flex;align-items:center;justify-content:center}:host:hover{background:var(--ngs-avatar-total-hover-bg)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host-context(html.dark){--ngs-avatar-group-item-border: .125rem solid var(--ngs-color-neutral-950);--ngs-avatar-presence-indicator-outline: var(--ngs-color-neutral-950) solid 2px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

const alreadyLoadedImages = [];
const presets = {
    'identicon': {
        style: identicon,
        options: {
            scale: 55,
            backgroundColor: ['cbebf7', 'ebe1fc', 'd1f9db', 'f7e4e7', 'fce8d4', 'dcfcf9']
        }
    },
    'initials': {
        style: initials,
        options: {
            scale: 75,
            fontWeight: 500
        }
    }
};
class Dicebear {
    image = input('', ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
    preset = input('identicon', ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
    alt = input(...(ngDevMode ? [undefined, { debugName: "alt" }] : /* istanbul ignore next */ []));
    presenceIndicator = input(null, ...(ngDevMode ? [{ debugName: "presenceIndicator" }] : /* istanbul ignore next */ []));
    imageLoaded;
    svg = '';
    ngOnInit() {
        if (this.image()) {
            this.imageLoaded = alreadyLoadedImages.includes(this.image());
        }
        const preset = presets[this.preset()];
        const avatar = createAvatar(preset.style, {
            seed: this.key() || '',
            ...preset.options
        });
        this.svg = avatar.toString().replace('viewboxMask', v7());
    }
    onImageLoaded() {
        if (this.imageLoaded) {
            return;
        }
        alreadyLoadedImages.push(this.image());
        this.imageLoaded = true;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Dicebear, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Dicebear, isStandalone: true, selector: "ngs-dicebear,[ngs-dicebear]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, presenceIndicator: { classPropertyName: "presenceIndicator", publicName: "presenceIndicator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-clickable": "clickable()", "class.has-loaded-image": "image() && imageLoaded" }, classAttribute: "ngs-avatar ngs-dicebear" }, providers: [
            {
                provide: AVATAR_ACCESSOR,
                useExisting: forwardRef(() => Dicebear),
                multi: true
            }
        ], exportAs: ["ngsDicebear"], ngImport: i0, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\"\n       [alt]=\"alt() || ''\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (!image() && svg) {\n  <div class=\"svg\" [innerHTML]=\"svg | safeHtml\"></div>\n}\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-surface-container-high);--ngs-avatar-color: var(--ngs-color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--ngs-color-success);--ngs-avatar-presence-indicator-offline-bg: var(--ngs-color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--ngs-color-warning);--ngs-avatar-presence-indicator-outline: var(--ngs-color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 2px var(--ngs-color-outline-variant);display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=shadow-]){box-shadow:var(--ngs-avatar-inner-border)}:host .svg{overflow:hidden;border-radius:inherit;position:absolute;inset:0;z-index:0}:host:not([class*=rounded]),:host:not([class*=rounded]) .svg{border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Dicebear, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-dicebear,[ngs-dicebear]', exportAs: 'ngsDicebear', providers: [
                        {
                            provide: AVATAR_ACCESSOR,
                            useExisting: forwardRef(() => Dicebear),
                            multi: true
                        }
                    ], imports: [
                        SafeHtmlPipe,
                    ], host: {
                        'class': 'ngs-avatar ngs-dicebear',
                        '[class.is-clickable]': 'clickable()',
                        '[class.has-loaded-image]': 'image() && imageLoaded',
                    }, template: "@if (image()) {\n  <img class=\"image\" loading=\"lazy\" [src]=\"image()\"\n       [alt]=\"alt() || ''\" (load)=\"onImageLoaded()\">\n}\n\n@if (presenceIndicator()) {\n  <div class=\"presence-indicator\"\n       [class.is-online]=\"presenceIndicator() === 'online'\"\n       [class.is-offline]=\"presenceIndicator() === 'offline'\"\n       [class.is-away]=\"presenceIndicator() === 'away'\"></div>\n}\n\n@if (!image() && svg) {\n  <div class=\"svg\" [innerHTML]=\"svg | safeHtml\"></div>\n}\n", styles: [":host{--ngs-avatar-font-weight: 500;--ngs-avatar-size: calc(var(--spacing, .25rem) * 10);--ngs-avatar-border-radius: calc(infinity * 1px);--ngs-avatar-bg: var(--ngs-color-surface-container-high);--ngs-avatar-color: var(--ngs-color-on-surface);--ngs-avatar-presence-indicator-size: 20%;--ngs-avatar-presence-indicator-position-top: 5%;--ngs-avatar-presence-indicator-position-end: 5%;--ngs-avatar-presence-indicator-online-bg: var(--ngs-color-success);--ngs-avatar-presence-indicator-offline-bg: var(--ngs-color-on-surface-variant);--ngs-avatar-presence-indicator-away-bg: var(--ngs-color-warning);--ngs-avatar-presence-indicator-outline: var(--ngs-color-surface) solid 2px;--ngs-avatar-inner-border: inset 0 0 2px var(--ngs-color-outline-variant);display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;flex:none;text-transform:uppercase;position:relative;font-weight:var(--ngs-avatar-font-weight)}:host:not([class*=shadow-]){box-shadow:var(--ngs-avatar-inner-border)}:host .svg{overflow:hidden;border-radius:inherit;position:absolute;inset:0;z-index:0}:host:not([class*=rounded]),:host:not([class*=rounded]) .svg{border-radius:var(--ngs-avatar-border-radius)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-avatar-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-avatar-size)}:host.is-clickable{cursor:pointer}:host.is-hidden{display:none}:host.is-clickable:active{scale:.97}:host .image{display:inline;object-fit:cover;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1}:host .presence-indicator{position:absolute;z-index:1;outline:var(--ngs-avatar-presence-indicator-outline);border-radius:6.1875rem;width:var(--ngs-avatar-presence-indicator-size);height:var(--ngs-avatar-presence-indicator-size);top:var(--ngs-avatar-presence-indicator-position-top);inset-inline-end:var(--ngs-avatar-presence-indicator-position-end)}:host .presence-indicator.is-online{background:var(--ngs-avatar-presence-indicator-online-bg)}:host .presence-indicator.is-offline{background:var(--ngs-avatar-presence-indicator-offline-bg)}:host .presence-indicator.is-away{background:var(--ngs-avatar-presence-indicator-away-bg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], presenceIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenceIndicator", required: false }] }] } });

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

export { AVATAR_ACCESSOR, Avatar, AvatarGroup, AvatarMore, AvatarTotal, Dicebear };
//# sourceMappingURL=ngstarter-ui-components-avatar.mjs.map
