@trimble-oss/moduswebcomponents/components/modus-wc-panel.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';

const convertPropsToClasses = ({ floating, }) => {
    let classes = '';
    if (floating) {
        classes = `${classes} modus-wc-panel-floating`;
    }
    return classes.trim();
};

const modusWcPanelCss = ".modus-wc-panel{border:1px solid var(--modus-wc-color-gray-0);border-radius:var(--rounded-box);display:flex;flex-direction:column;overflow:hidden}.modus-wc-panel-floating{box-shadow:rgba(36, 35, 45, 0.3) 1px 0 4px}.modus-wc-panel-header,.modus-wc-panel-body,.modus-wc-panel-footer{display:flex;flex-direction:column;width:100%}.modus-wc-panel-header{flex-shrink:0}.modus-wc-panel-header:empty{display:none}.modus-wc-panel-body{flex:1 1 auto;min-height:0;overflow-y:auto}.modus-wc-panel-footer{flex-shrink:0}.modus-wc-panel-footer:empty{display:none}";

const ModusWcPanel$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcPanel extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the outer div. */
        this.customClass = '';
        /** Width of the panel in pixels. */
        this.width = '350px';
        /** Height of the panel in pixels. */
        this.height = '700px';
        /** Enable floating mode with elevated shadow. */
        this.floating = false;
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-panel'];
        const propClasses = convertPropsToClasses({
            floating: this.floating,
        });
        // 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: '24402b107602b9ce8012d3a623b7825e1d184ae5' }, h("div", Object.assign({ key: '97c69bda54ae08d812342eaa8bf8444fac567269', class: this.getClasses(), style: { width: this.width, height: this.height } }, this.inheritedAttributes), h("div", { key: 'a3ed0f5dc860c60a32aacbefa351dcc04d19f386', class: "modus-wc-panel-header" }, h("slot", { key: 'fc4d136a1c09d72accd61d2e53749408d7e764d8', name: "header" })), h("div", { key: 'cc7529bc942b6d6b548e2b9ac5712ceddba945b2', class: "modus-wc-panel-body" }, h("slot", { key: 'f4420cc568e2bf5107375bfbf147b735d93a4d12', name: "body" })), h("div", { key: '8fe1118030ca8b03736190392e58bf733456c8f9', class: "modus-wc-panel-footer" }, h("slot", { key: '8f0b7cebd81c92a596b38adf78fea1d7f3095c00', name: "footer" })))));
    }
    get el() { return this; }
    static get style() { return modusWcPanelCss; }
}, [4, "modus-wc-panel", {
        "customClass": [1, "custom-class"],
        "width": [1],
        "height": [1],
        "floating": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-panel"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-panel":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcPanel$1);
            }
            break;
    } });
}

const ModusWcPanel = ModusWcPanel$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcPanel, defineCustomElement };