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 5.53 kB
import{r as c,h as a,H as s,g as d}from"./p-dzXW86AR.js";import{i as e}from"./p-B5lx0dpl.js";const t=class{constructor(a){c(this,a),this.inheritedAttributes={},this.customClass="",this.imgSrc="",this.shape="circle",this.size="md"}componentWillLoad(){this.alt&&this.el.ariaLabel||(this.el.ariaLabel=this.el.ariaLabel||`Avatar ${this.alt||"image"}`,this.alt=this.alt||"Avatar image"),this.inheritedAttributes=e(this.el)}getClasses(){const c=[],a=(({shape:c,size:a})=>{let s="";if(c)switch(c){case"circle":s=`${s} modus-wc-rounded-full`;break;case"square":s=`${s} modus-wc-rounded-lg`}if(a)switch(a){case"xs":s=`${s} modus-wc-w-8`;break;case"sm":s=`${s} modus-wc-w-12`;break;case"md":s=`${s} modus-wc-w-16`;break;case"lg":s=`${s} modus-wc-w-20`}return s.trim()})({shape:this.shape,size:this.size});return a&&c.push(a),this.customClass&&c.push(this.customClass),c.join(" ")}render(){return a(s,{key:"74b2dc1cfcb9d73281d7ad3fea109a113254e52a"},a("div",Object.assign({key:"2429d8991e4b8467e432210331481f23ce19cb9f",class:"modus-wc-avatar",tabindex:-1},this.inheritedAttributes),a("div",{key:"dc7a02e2a442a1d0dd50f946be8f45657ee1f7aa",class:this.getClasses()},a("img",{key:"b18286cf860566cc2176af6df9f8e38ccb488d91",src:this.imgSrc,alt:this.alt}))))}get el(){return d(this)}};t.style="";const o=class{constructor(a){c(this,a),this.inheritedAttributes={},this.backgroundFigure=!1,this.bordered=!1,this.customClass="",this.layout="vertical",this.padding="normal"}componentWillLoad(){this.inheritedAttributes=e(this.el)}getClasses(){const c=["modus-wc-card modus-wc-rounded-card"],a=(({bordered:c,fullImage:a,layout:s,padding:d})=>{let e="";return c&&(e=`${e} modus-wc-card-bordered`),a&&(e=`${e} modus-wc-image-full`),"horizontal"===s&&(e=`${e} modus-wc-card-side`),"compact"===d&&(e=`${e} modus-wc-card-compact`),e.trim()})({bordered:this.bordered,fullImage:this.backgroundFigure,layout:this.layout,padding:this.padding});return a&&c.push(a),this.customClass&&c.push(this.customClass),c.join(" ")}render(){return a(s,{key:"ca2b66643d841254021b36a02cc009e0287547f9"},a("article",Object.assign({key:"e5cfc8a5cc1d81f0f2924a596c88bb72186b66ad",class:this.getClasses(),tabindex:-1},this.inheritedAttributes),a("slot",{key:"bb24bca92c338faa1d7768d11707f88620f8e9dd",name:"header"}),a("div",{key:"153d844a35591665a67b31e0f9938aa87b855fd0",class:"modus-wc-card-body"},a("div",{key:"1a32e26e9b06c67ccf2fc067455365d3a8a59f4c",class:"modus-wc-card-title"},a("slot",{key:"df11f9713f650008850fe4af85f22b5d0f2da14e",name:"title"})),a("div",{key:"e9d8c639387b70fab75e482e7a84e8e3078141b9",class:"modus-wc-card-subtitle"},a("slot",{key:"56bb3d18aad738ed11249c7c3a12fd6aeedee389",name:"subtitle"})),a("slot",{key:"5a0a22778a3c36f4d28eb4d560e35e937e39377e"})," ",a("div",{key:"671978aedd0cee74ed04c726e2ca4d71b77ea837",class:"modus-wc-card-actions"},a("slot",{key:"6792bcebe07fbe000521b70ec3dd731976f4c99c",name:"actions"}))),a("slot",{key:"cfb58923ff84b64540ed6d02e21855844d0fb42e",name:"footer"})))}get el(){return d(this)}};o.style="modus-wc-card .modus-wc-card{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card,[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card{--rounded-box:0.5rem;box-shadow:0 0 2px 0 rgba(54, 53, 69, 0.3)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card:hover,[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card:hover{box-shadow:0 0 8px 0 rgba(54, 53, 69, 0.3)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-subtitle,[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-subtitle{font-weight:var(--modus-wc-font-weight-bold)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card{background-color:var(--modus-wc-color-white);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-title{--fallback-bc:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-subtitle{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card{background-color:var(--modus-wc-color-gray-9);color:var(--modus-wc-color-trimble-white)}[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-title{--fallback-bc:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-subtitle{color:var(--modus-wc-color-gray-1)}";const r=class{constructor(a){c(this,a),this.inheritedAttributes={},this.customClass=""}componentWillLoad(){this.inheritedAttributes=e(this.el)}getClasses(){const c=["modus-wc-navbar"];return this.customClass&&c.push(this.customClass),c.join(" ")}render(){return a(s,{key:"569cac670489a353e6108ee75a54a1ff4f6628c4"},a("div",Object.assign({key:"7f8d00e6422d372f567a496282e5202bd6feb0cb",class:this.getClasses()},this.inheritedAttributes),a("div",{key:"5746cbffd677ec9ddf4233ee24dba79b9177b0ab",class:"modus-wc-navbar-start"},a("slot",{key:"83e0d6acbf0af02f043f519b7b1204fa4fd236aa",name:"start"})),a("div",{key:"71f0e3bc55eff2b33f3aaf49897866b925ff9e78",class:"modus-wc-navbar-center"},a("slot",{key:"5ac1f5cee7940fa20cf892fa3f50fff465006fc1",name:"center"})),a("div",{key:"a4ad7761e3d149e36ab19d17fa791f95b2e530d7",class:"modus-wc-navbar-end"},a("slot",{key:"744bda599a290f5e3d8fc282918c90ff57f20277",name:"end"}))))}get el(){return d(this)}};r.style="";export{t as modus_wc_avatar,o as modus_wc_card,r as modus_wc_toolbar}