import { p as proxyCustomElement, H, h, c as Host } from './p-ae373651.js';
import { e as defaultIconPack, i as useLanguage } from './p-5b3a7f00.js';
import { f as formatName, g as getInitials } from './p-efabd2ce.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defineCustomElement$2 } from './p-3e0452c4.js';
import { d as defineCustomElement$1 } from './p-e6245534.js';

const rtkAvatarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px);align-items:center;justify-content:center;font-size:28px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));overflow:clip;border-radius:9999px;-webkit-user-select:none;-moz-user-select:none;user-select:none}rtk-icon{height:50%;width:50%}.image-ctr{display:flex;height:100%;width:100%;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}img{height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);-o-object-fit:cover;object-fit:cover}img.loaded{height:100%;width:100%}.initials{display:flex;height:100%;width:100%;align-items:center;justify-content:center;text-transform:uppercase}.image{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.image img{display:none;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.image img.loaded{display:block}:host([variant='hexagon']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)}:host([variant='square']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}:host([size='sm']){height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);font-size:12px}:host([size='md']){height:var(--rtk-space-28, 112px);width:var(--rtk-space-28, 112px)}:host([size='lg']){height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px)}";
const RtkAvatarStyle0 = rtkAvatarCss;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const RtkAvatar = /*@__PURE__*/ proxyCustomElement(class RtkAvatar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /** Avatar type */
        this.variant = 'circular';
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        this.imageState = 'loading';
        this.getAvatar = () => {
            var _a;
            const name = formatName(((_a = this.participant) === null || _a === void 0 ? void 0 : _a.name) || '');
            let picture;
            if (this.participant != null && 'picture' in this.participant) {
                picture = this.participant.picture;
            }
            if (picture && picture.length > 0 && this.imageState !== 'errored') {
                return (h("div", { class: "image-ctr" }, this.imageState === 'loading' && h("rtk-spinner", { iconPack: this.iconPack }), h("img", { src: picture, class: { loaded: this.imageState === 'loaded' }, loading: "lazy", title: name, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored'), part: "image" })));
            }
            const initials = getInitials(name);
            return (h("div", { class: "initials", title: name, part: "initials" }, initials));
        };
    }
    render() {
        return (h(Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
    }
    static get style() { return RtkAvatarStyle0; }
}, [1, "rtk-avatar", {
        "participant": [16],
        "variant": [513],
        "size": [513],
        "iconPack": [16],
        "t": [16],
        "imageState": [32]
    }]);
__decorate([
    SyncWithStore()
], RtkAvatar.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkAvatar.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-avatar", "rtk-icon", "rtk-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-avatar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkAvatar);
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkAvatar as R, defineCustomElement as d };
