'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b7d9268e.js');
const index$1 = require('./index-3ad62856.js');

const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
const PdsAvatarStyle0 = baseCss;

const pdsAvatarCss = ":host{display:inline-block}div{--color-background-container:var(--pine-color-mercury-050);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-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 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.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(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";
const PdsAvatarStyle1 = pdsAvatarCss;

const PdsAvatar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.renderAssetWrapper = () => {
            const style = {
                height: this.avatarSize(),
                width: this.avatarSize()
            };
            return (index.h("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
        };
        this.renderAvatar = () => {
            return (this.dropdown
                ?
                    index.h("button", { class: "pds-avatar__button", type: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
                :
                    this.renderAssetWrapper());
        };
        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
            && index.h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: index$1.checkCircleFilled, size: "33.53%" }));
        this.renderIconOrImage = () => (this.image
            ? index.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
            : index.h("pds-icon", { color: "var(--pine-color-mercury-500)", icon: index$1.userFilled, 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 (index.h(index.Host, { key: '0b753aa7cb61c88a3808684a67eb1ee84898822c', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
    }
};
PdsAvatar.style = PdsAvatarStyle0 + PdsAvatarStyle1;

exports.pds_avatar = PdsAvatar;

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