@trimble-oss/moduswebcomponents/esm/modus-wc-skeleton.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, H as Host, g as getElement } from './index-D5XAQERj.js';
import { i as inheritAriaAttributes } from './utils-kl4W0gOo.js';

const convertPropsToClasses = ({ shape, }) => {
    let classes = '';
    if (shape === 'circle') {
        classes = `${classes} modus-wc-rounded-full`;
    }
    return classes.trim();
};

const modusWcSkeletonCss = "";

const ModusWcSkeleton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** The height of the skeleton. */
        this.height = 'var(--modus-wc-line-height-md)';
        /** The shape of the skeleton. */
        this.shape = 'rectangle';
        /** The width of the skeleton. */
        this.width = '100%';
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-skeleton'];
        const propClasses = convertPropsToClasses({
            shape: this.shape,
        });
        // 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(' ');
    }
    getStyles() {
        return { height: this.height, width: this.width };
    }
    render() {
        return (h(Host, { key: '2f441234fae48276eb37aa7a16e5e86734878e68' }, h("div", Object.assign({ key: '29d121ddd6bf46e0e4200998c723c234c08ded10', "aria-hidden": "true", class: this.getClasses(), style: this.getStyles(), tabindex: -1 }, this.inheritedAttributes))));
    }
    get el() { return getElement(this); }
};
ModusWcSkeleton.style = modusWcSkeletonCss;

export { ModusWcSkeleton as modus_wc_skeleton };