@trimble-oss/moduswebcomponents/esm/modus-wc-panel.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-D_4hbGjA.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(this); }
};
ModusWcPanel.style = modusWcPanelCss;

export { ModusWcPanel as modus_wc_panel };