@trimble-oss/moduswebcomponents/components/p-DA8W2Ron.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-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.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 = "";

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 = '';
        // TODO - add placeholder support (need UX logic)
        /** The shape of the avatar. */
        this.shape = 'circle';
        /** The size of the avatar. */
        this.size = 'md';
    }
    componentWillLoad() {
        if (!this.alt || !this.el.ariaLabel) {
            this.el.ariaLabel = this.el.ariaLabel || `Avatar ${this.alt || 'image'}`;
            this.alt = this.alt || 'Avatar image';
        }
        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);
        return classList.join(' ');
    }
    render() {
        return (h(Host, { key: '1e1813bb37e73c2149f87c67142b566a1d34a086' }, h("div", Object.assign({ key: '88bc83fc2875665966d2dc8ddfbe6918126ba6e9', class: "modus-wc-avatar", tabindex: -1 }, this.inheritedAttributes), h("div", { key: 'db2cd321905b38d0417ba28554c820c13184c188', class: this.getClasses() }, h("img", { key: '9682e09c1512726abac73c82365f33c3fbb1281d', src: this.imgSrc, alt: this.alt })))));
    }
    get el() { return this; }
    static get style() { return modusWcAvatarCss; }
}, [0, "modus-wc-avatar", {
        "alt": [1],
        "customClass": [1, "custom-class"],
        "imgSrc": [1, "img-src"],
        "shape": [1],
        "size": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-avatar"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-avatar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcAvatar);
            }
            break;
    } });
}

export { ModusWcAvatar as M, defineCustomElement as d };