UNPKG

@trimble-oss/moduswebcomponents

Version:

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

1 lines 1.85 kB
import{r as e,h as a,H as d,g as o}from"./p-D_4hbGjA.js";import{i as s}from"./p-BLBSdonk.js";const c=class{constructor(a){e(this,a),this.inheritedAttributes={},this.customClass="",this.width="350px",this.height="700px",this.floating=!1}componentWillLoad(){this.inheritedAttributes=s(this.el)}getClasses(){const e=["modus-wc-panel"],a=(({floating:e})=>{let a="";return e&&(a=`${a} modus-wc-panel-floating`),a.trim()})({floating:this.floating});return a&&e.push(a),this.customClass&&e.push(this.customClass),e.join(" ")}render(){return a(d,{key:"24402b107602b9ce8012d3a623b7825e1d184ae5"},a("div",Object.assign({key:"97c69bda54ae08d812342eaa8bf8444fac567269",class:this.getClasses(),style:{width:this.width,height:this.height}},this.inheritedAttributes),a("div",{key:"a3ed0f5dc860c60a32aacbefa351dcc04d19f386",class:"modus-wc-panel-header"},a("slot",{key:"fc4d136a1c09d72accd61d2e53749408d7e764d8",name:"header"})),a("div",{key:"cc7529bc942b6d6b548e2b9ac5712ceddba945b2",class:"modus-wc-panel-body"},a("slot",{key:"f4420cc568e2bf5107375bfbf147b735d93a4d12",name:"body"})),a("div",{key:"8fe1118030ca8b03736190392e58bf733456c8f9",class:"modus-wc-panel-footer"},a("slot",{key:"8f0b7cebd81c92a596b38adf78fea1d7f3095c00",name:"footer"}))))}get el(){return o(this)}};c.style=".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}";export{c as modus_wc_panel}