@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 • 6.81 kB
JavaScript
import{r as o,h as t,e,g as s}from"./p-C1-Dpkp7.js";import{h as a}from"./p-tWS3Egrk.js";import{i as d}from"./p-DJ2rBB6r.js";const h=class{constructor(t){o(this,t),this.inheritedAttributes={},this.customClass="",this.width="350px",this.height="700px",this.floating=!1}componentWillLoad(){a(this.el,!0),this.inheritedAttributes=d(this.el)}getClasses(){const o=["modus-wc-panel"],t=(({floating:o})=>{let t="";return o&&(t=`${t} modus-wc-panel-floating`),t.trim()})({floating:this.floating});return t&&o.push(t),this.customClass&&o.push(this.customClass),o.join(" ")}render(){return t(e,{key:"346b3f3311332d988c5cca8f723949f918e02629"},t("div",Object.assign({key:"d4032f052570ecfd89112158708889673c308d40",class:this.getClasses(),style:{width:this.width,height:this.height}},this.inheritedAttributes),t("div",{key:"0eea8053a7bbb15ded21417012d7fb0371efb72a",class:"modus-wc-panel-header"},t("slot",{key:"0b0e4ffb23fa198b3d4f3b42e4a36f76267712fe",name:"header"})),t("div",{key:"f9f3854f600b57f4a095706329fb3ea0a6a8e66b",class:"modus-wc-panel-body"},t("slot",{key:"82872e1178777b26e071285a1e79a564eca00152",name:"body"})),t("div",{key:"dc0402db9837329d25dc33fd2c17be6c5242bd0c",class:"modus-wc-panel-footer"},t("slot",{key:"3b8399ba61bb5f2585ae60a961f864b20321bbbd",name:"footer"}))))}get el(){return s(this)}};h.style=".modus-wc-panel{background-color:var(--modus-wc-color-base-page);border:1px solid var(--modus-wc-color-base-200);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 c=class{constructor(t){o(this,t),this.inheritedAttributes={},this.customClass="",this.hierarchy="p",this.size="md",this.weight="normal"}componentWillLoad(){a(this.el),this.inheritedAttributes=d(this.el)}getClasses(){const o=["modus-wc-typography"];["h1","h2","h3","h4","h5","h6"].includes(this.hierarchy)&&("md"!==this.size||"normal"!==this.weight)&&o.push("modus-wc-typography-override");const t=(({size:o,weight:t})=>{let e="";return o&&(e=`${e} modus-wc-text-${o}`),t&&(e=`${e} modus-wc-typography-weight-${t}`),e.trim()})({size:this.size,weight:this.weight});return t&&o.push(t),this.customClass&&o.push(this.customClass),o.join(" ")}render(){return t(e,{key:"41cf9b034e8dcdc27ef648a7e80b2b1a5ff02ff9"},t(this.hierarchy,Object.assign({key:"e173e76bb3e0de369e80e4edf4a533f6ed734f2e",class:this.getClasses()},this.inheritedAttributes),t("slot",{key:"e6e545ece442111e0d1eb7072e63e16f6fdf5ed4"},this.label)))}get el(){return s(this)}};c.style="modus-wc-typography h1.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:36px}modus-wc-typography h2.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-2xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.15px;line-height:30px}modus-wc-typography h3.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:27px}modus-wc-typography h4.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-lg);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}modus-wc-typography h5.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}modus-wc-typography h6.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-sm);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px}modus-wc-typography .modus-wc-typography-weight-light{font-weight:var(--modus-wc-font-weight-light)}modus-wc-typography .modus-wc-typography-weight-normal{font-weight:var(--modus-wc-font-weight-normal)}modus-wc-typography .modus-wc-typography-weight-semibold{font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-typography .modus-wc-typography-weight-bold{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-typography .modus-wc-text-xs{font-size:var(--modus-wc-font-size-xs)}modus-wc-typography .modus-wc-text-sm{font-size:var(--modus-wc-font-size-sm)}modus-wc-typography .modus-wc-text-md{font-size:var(--modus-wc-font-size-md)}modus-wc-typography .modus-wc-text-lg{font-size:var(--modus-wc-font-size-lg)}modus-wc-typography .modus-wc-text-xl{font-size:var(--modus-wc-font-size-xl)}modus-wc-typography .modus-wc-text-2xl{font-size:var(--modus-wc-font-size-2xl)}modus-wc-typography .modus-wc-text-3xl{font-size:var(--modus-wc-font-size-3xl)}[data-theme=connect-light] modus-wc-typography :not(a),[data-theme=connect-dark] modus-wc-typography :not(a){color:var(--modus-wc-color-base-content-low-contrast)}[data-theme=connect-light] modus-wc-typography h1.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h1.modus-wc-typography{font-size:var(--modus-wc-font-size-4xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:30px}[data-theme=connect-light] modus-wc-typography h2.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h2.modus-wc-typography{font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}[data-theme=connect-light] modus-wc-typography h3.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h3.modus-wc-typography{font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:18px}[data-theme=connect-light] modus-wc-typography h4.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h4.modus-wc-typography{font-size:var(--modus-wc-font-size-lg);letter-spacing:0.15px;line-height:24px}[data-theme=connect-light] modus-wc-typography h5.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h5.modus-wc-typography{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}[data-theme=connect-light] modus-wc-typography h6.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h6.modus-wc-typography{font-size:var(--modus-wc-font-size-xs);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px;text-transform:uppercase}";export{h as modus_wc_panel,c as modus_wc_typography}