@trimble-oss/moduswebcomponents/components/p-EQEiZWiR.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { p as proxyCustomElement, H, h, c as Host } from './p-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.js';
import { d as defineCustomElement$1 } from './p-s6LDESOI.js';

const convertPropsToClasses = ({ shape, size, }) => {
    let classes = '';
    if (shape) {
        switch (shape) {
            case 'circle':
                classes = `${classes} modus-wc-rounded-full`;
                break;
            case 'square':
                classes = `${classes} modus-wc-rounded-lg`;
                break;
        }
    }
    if (size) {
        switch (size) {
            case 'xs':
                classes = `${classes} modus-wc-w-8`;
                break;
            case 'sm':
                classes = `${classes} modus-wc-w-12`;
                break;
            case 'md':
                classes = `${classes} modus-wc-w-16`;
                break;
            case 'lg':
                classes = `${classes} modus-wc-w-20`;
                break;
        }
    }
    return classes.trim();
};

const modusWcAvatarCss = "modus-wc-avatar .modus-wc-avatar .initials{align-items:center;background-color:var(--modus-wc-color-black);color:var(--modus-wc-color-white);display:flex;font-weight:600;height:100%;justify-content:center;text-transform:uppercase;width:100%}modus-wc-avatar .modus-wc-avatar .no-image{align-items:center;background-color:var(--modus-wc-color-gray-2);color:var(--modus-wc-color-white);display:flex;justify-content:center}modus-wc-avatar .modus-wc-avatar .modus-wc-w-8 .initials{font-size:var(--modus-wc-font-size-xs, 0.75rem)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-12 .initials{font-size:var(--modus-wc-font-size-sm, 0.875rem)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-16 .initials{font-size:var(--modus-wc-font-size-md, 1rem)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-20 .initials{font-size:var(--modus-wc-font-size-lg, 1.25rem)}";

const ModusWcAvatar = /*@__PURE__*/ proxyCustomElement(class ModusWcAvatar extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** The location of the image. */
        this.imgSrc = '';
        /** The initials to display when no image is provided. */
        this.initials = '';
        // TODO - add placeholder support (need UX logic)
        /** The shape of the avatar. */
        this.shape = 'circle';
        /** The size of the avatar. */
        this.size = 'md';
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = [];
        const propClasses = convertPropsToClasses({
            shape: this.shape,
            size: this.size,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        if (!this.imgSrc && !this.initials)
            classList.push('no-image');
        return classList.join(' ');
    }
    getUserInitials() {
        if (!this.initials)
            return '';
        return this.initials
            .trim()
            .split(/\s+/)
            .filter(Boolean)
            .map((part) => part.charAt(0))
            .join('')
            .substring(0, 3)
            .toUpperCase();
    }
    render() {
        const altText = this.alt || 'User avatar';
        return (h(Host, { key: 'de74f253eb7123d9e409a8446de95a89422fa694' }, h("div", Object.assign({ key: '46d9e20b3433e4a5585e15eba600935d856bcd74', class: "modus-wc-avatar" }, this.inheritedAttributes), h("div", { key: 'c2575ac2e3190143d4ca9d5bdf32e939d8136721', class: this.getClasses() }, this.imgSrc ? (h("img", { src: this.imgSrc, alt: altText })) : this.initials ? (h("span", { class: "initials", "aria-label": this.alt || this.initials }, this.getUserInitials())) : (h("modus-wc-icon", { "aria-label": altText, name: "person", size: this.size, variant: "solid" }))))));
    }
    get el() { return this; }
    static get style() { return modusWcAvatarCss; }
}, [0, "modus-wc-avatar", {
        "alt": [1],
        "customClass": [1, "custom-class"],
        "imgSrc": [1, "img-src"],
        "initials": [1],
        "shape": [1],
        "size": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-avatar", "modus-wc-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-avatar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcAvatar);
            }
            break;
        case "modus-wc-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { ModusWcAvatar as M, defineCustomElement as d };