@trimble-oss/moduswebcomponents/esm/modus-wc-icon.entry.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 { r as registerInstance, h, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './utils-DN2BGzSQ.js';

const modusWcIconCss = "modus-wc-icon .modus-icons.modus-wc-icon--xs,modus-wc-icon .modus-icons-outlined.modus-wc-icon--xs,modus-wc-icon .modus-icons-solid.modus-wc-icon--xs{font-size:1rem}modus-wc-icon .modus-icons.modus-wc-icon--sm,modus-wc-icon .modus-icons-outlined.modus-wc-icon--sm,modus-wc-icon .modus-icons-solid.modus-wc-icon--sm{font-size:1.25rem}modus-wc-icon .modus-icons.modus-wc-icon--md,modus-wc-icon .modus-icons-outlined.modus-wc-icon--md,modus-wc-icon .modus-icons-solid.modus-wc-icon--md{font-size:1.5rem}modus-wc-icon .modus-icons.modus-wc-icon--lg,modus-wc-icon .modus-icons-outlined.modus-wc-icon--lg,modus-wc-icon .modus-icons-solid.modus-wc-icon--lg{font-size:2rem}modus-wc-icon .modus-icons.modus-wc-icon--xl,modus-wc-icon .modus-icons-outlined.modus-wc-icon--xl,modus-wc-icon .modus-icons-solid.modus-wc-icon--xl{font-size:4rem}modus-wc-icon i::before,modus-wc-icon i::after{font-family:inherit !important}";

const ModusWcIcon = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the i element. */
        this.customClass = '';
        /** Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers. */
        this.decorative = true;
        /** The icon size, can be "sm", "md", "lg" (a custom size can be specified in CSS). This adjusts the font size for the icon. */
        this.size = 'md';
    }
    componentWillLoad() {
        // Auto-inject CSS if component is used inside user's shadow DOM
        handleShadowDOMStyles(this.el);
        if (!this.decorative && !this.el.ariaLabel) {
            this.el.ariaLabel = `${this.name} icon`;
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        let classList = [];
        // Add base class
        classList.push('modus-wc-icon');
        // Add icon font class based on variant
        if (this.variant === 'outlined') {
            classList.push('modus-icons-outlined');
        }
        else if (this.variant === 'solid') {
            classList.push('modus-icons-solid');
        }
        else {
            classList.push('modus-icons');
        }
        // Add size class - this is common for all variants
        classList.push(`modus-wc-icon--${this.size}`);
        // Add custom class if provided
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        const ariaHidden = this.decorative ? 'true' : null;
        const role = this.decorative ? undefined : 'img';
        return (h(Host, { key: 'fe663bd3846135d1dda08eca273d9df19bde8c0a', class: "modus-wc-flex modus-wc-items-center" }, h("i", Object.assign({ key: 'd8bedd1e99b4dbe86184635d8bb231f5069ece11', "aria-hidden": ariaHidden, "aria-label": this.decorative ? null : this.el.ariaLabel, class: this.getClasses(), role: role, tabindex: -1 }, this.inheritedAttributes), this.name)));
    }
    get el() { return getElement(this); }
};
ModusWcIcon.style = modusWcIconCss;

export { ModusWcIcon as modus_wc_icon };