import { r as registerInstance, h, H as Host } from './index-4a3a9179.js';

const pdsAvatarCss = ":host{display:inline-block}div{--background-color:var(--pine-color-primary-100);--badge-background-color:var(--pine-color-base-white);--border:var(--pine-border-default);--radius-round:50%;-ms-flex-align:center;align-items:center;background-color:var(--background-color);border-radius:var(--admin-radius-round, var(--radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--admin-radius-round:12px;border-radius:var(--admin-radius-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--badge-background-color);border:var(--border);border-color:var(--badge-background-color);border-radius:var(--radius-round);bottom:0;position:absolute;right:0}img{border-radius:var(--admin-radius-round, var(--radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";
const PdsAvatarStyle0 = pdsAvatarCss;

const PdsAvatar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.renderAvatar = () => {
            const style = {
                height: this.avatarSize(),
                width: this.avatarSize()
            };
            return (this.dropdown
                ?
                    h("button", { class: "pds-avatar__button", type: "button" }, h("div", { style: style }, this.renderIconOrImage(), this.renderBadge()))
                :
                    h("div", { style: style }, this.renderIconOrImage(), this.renderBadge()));
        };
        this.renderBadge = () => (this.badge
            // Percentage is average size of icon in relation to total avatar size
            // of all preset sizes found in Figma.
            // Used to allow icons to scale to container size
            && h("pds-icon", { class: "pds-avatar__badge", name: "check-circle-filled", size: "33.53%" }));
        this.renderIconOrImage = () => (this.image
            ? h("img", { alt: this.alt, src: this.image })
            // Percentage is average size of icon in relation to total avatar size
            // of all preset sizes found in Figma.
            // Used to allow icons to scale to container size
            : h("pds-icon", { name: "user-filled", size: "33.53%" }));
        this.classNames = () => ({
            'pds-avatar': true,
            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
            [`pds-avatar--${this.variant}`]: this.variant === 'admin'
        });
        this.alt = null;
        this.badge = false;
        this.componentId = undefined;
        this.dropdown = false;
        this.image = null;
        this.size = 'lg';
        this.variant = 'customer';
    }
    avatarSize() {
        const sizes = {
            xs: '24px',
            sm: '32px',
            md: '40px',
            lg: '56px',
            xl: '64px',
        };
        if (sizes[this.size]) {
            return sizes[this.size];
        }
        else {
            return this.size;
        }
    }
    render() {
        return (h(Host, { key: '595815274032d146a4bb480940d152ba2507c2b4', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
    }
};
PdsAvatar.style = PdsAvatarStyle0;

export { PdsAvatar as pds_avatar };

//# sourceMappingURL=pds-avatar.entry.js.map