import * as i0 from '@angular/core';
import { input, numberAttribute, booleanAttribute, signal, Directive, inject, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { STATUS_ICON_CONFIG, SiIconComponent } from '@siemens/element-ng/icon';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
const DATA_COLORS_MAX = 17;
const DATA_COLOR_NEUTRAL = 17;
const ASCII_CODE_INDEX_A = 64;
/**
 * The directive provide a CSS variable --background with a color based on the initials or alt text.
 */
class SiAvatarBackgroundColorDirective {
    /**
     * The desired color index from $element-data-* color tokens. This can be set to any kind of
     * positive integer that is then mapped to a color index.
     * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.
     *
     * @defaultValue undefined
     */
    color = input(undefined, { ...(ngDevMode ? { debugName: "color" } : {}), transform: numberAttribute });
    /**
     * Automatically calculates the background color.
     * If set, {@link color} will be ignored.
     *
     * @defaultValue false
     */
    autoColor = input(false, { ...(ngDevMode ? { debugName: "autoColor" } : {}), transform: booleanAttribute });
    backgroundStyle = signal('var(--element-data-17)', ...(ngDevMode ? [{ debugName: "backgroundStyle" }] : []));
    ngOnChanges(changes) {
        if (changes.color) {
            this.setColor(this.color());
        }
    }
    /**
     * Update background color variable based on the initials or placeholder text.
     */
    calculateColorFromInitials(displayInitials) {
        if (!this.autoColor() || !displayInitials) {
            return;
        }
        let color = 0;
        for (let i = 0; i < displayInitials.length; i++) {
            color *= 17; // this prevents 'JD' to have the same color as 'DJ'
            color += displayInitials.charCodeAt(i) - ASCII_CODE_INDEX_A;
        }
        this.setColor(color);
    }
    setColor(color) {
        if (this.color() === 0) {
            this.backgroundStyle.set(undefined);
        }
        else {
            const actualColor = color ?? DATA_COLOR_NEUTRAL;
            const colorIndex = ((actualColor - 1) % DATA_COLORS_MAX) + 1;
            this.backgroundStyle.set(`var(--element-data-${colorIndex})`);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAvatarBackgroundColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiAvatarBackgroundColorDirective, isStandalone: true, selector: "[siAvatarBackgroundColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--background": "backgroundStyle()" } }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAvatarBackgroundColorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[siAvatarBackgroundColor]',
                    host: {
                        '[style.--background]': 'backgroundStyle()'
                    }
                }]
        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], autoColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColor", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiAvatarComponent {
    statusIcons = inject(STATUS_ICON_CONFIG);
    /**
     * Size of the component.
     *
     * @defaultValue 'regular'
     */
    size = input('regular', ...(ngDevMode ? [{ debugName: "size" }] : []));
    /** Image src URL when using an image. */
    imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
    /** Icon name when using an icon. */
    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
    /**
     * Initials to be displayed as default avatar if no `icon` or `imageUrl` are provided.
     * If also no initials are provided, they will be automatically calculated from the `altText`.
     * The value will be used to calculate the background color when `autoColor` is true.
     */
    initials = input(...(ngDevMode ? [undefined, { debugName: "initials" }] : []));
    /**
     * The desired color index from $element-data-* color tokens. This can be set to any kind of
     * positive integer that is then mapped to a color index.
     * A better way to set a pseudo-random color is to set * {@link autoColor} to `true`.
     *
     * @defaultValue undefined
     */
    color = input(undefined, { ...(ngDevMode ? { debugName: "color" } : {}), transform: numberAttribute });
    /** The `alt` text for image, `title` for other modes. */
    altText = input.required(...(ngDevMode ? [{ debugName: "altText" }] : []));
    /**
     * The status (success, info, warning, caution, danger, critical, pending, progress) to be
     * visualized.
     */
    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
    /**
     * aria-label for status
     */
    statusAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "statusAriaLabel" }] : []));
    statusIcon = computed(() => {
        const status = this.status();
        return status ? this.statusIcons[status] : undefined;
    }, ...(ngDevMode ? [{ debugName: "statusIcon" }] : []));
    displayInitials = computed(() => {
        const initials = this.initials();
        if (initials) {
            return initials;
        }
        const name = this.altText()
            .replaceAll(/\([^)]*\)/g, '')
            .trim();
        const byComma = name.split(/,\s*/);
        let first;
        let last;
        if (byComma.length > 1) {
            last = byComma[0];
            first = byComma[1];
        }
        else {
            const parts = name.split(' ');
            first = parts.shift() ?? '';
            last = parts.pop() ?? '';
        }
        if (first) {
            first = first[0].toLocaleUpperCase();
        }
        if (last) {
            last = last[0].toLocaleUpperCase();
        }
        return first + last;
    }, ...(ngDevMode ? [{ debugName: "displayInitials" }] : []));
    autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);
    constructor() {
        effect(() => {
            this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials());
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAvatarComponent, isStandalone: true, selector: "si-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()" } }, hostDirectives: [{ directive: SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <si-icon class=\"icon\" [title]=\"altText()\" [icon]=\"icon()!\" />\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials() }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon [class]=\"`drop-shadow ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n    <si-icon [class]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 1.25rem;--background: var(--element-base-0);--indicator-offset-x: -10px;--indicator-offset-y: -6px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size);filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-avatar', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class]': 'size()'
                    }, hostDirectives: [
                        {
                            directive: SiAvatarBackgroundColorDirective,
                            inputs: ['color', 'autoColor']
                        }
                    ], template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <si-icon class=\"icon\" [title]=\"altText()\" [icon]=\"icon()!\" />\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials() }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon [class]=\"`drop-shadow ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n    <si-icon [class]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 1.25rem;--background: var(--element-base-0);--indicator-offset-x: -10px;--indicator-offset-y: -6px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size);filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"] }]
        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], altText: [{ type: i0.Input, args: [{ isSignal: true, alias: "altText", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAriaLabel", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

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

export { SiAvatarBackgroundColorDirective, SiAvatarComponent };
//# sourceMappingURL=siemens-element-ng-avatar.mjs.map
