@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
JavaScript
import{r as c,h as d,H as a,g as s}from"./p-D5XAQERj.js";import{i as e}from"./p-DlW2F98o.js";const t=class{constructor(d){c(this,d),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=[],d=(({shape:c,size:d})=>{let a="";if(c)switch(c){case"circle":a=`${a} modus-wc-rounded-full`;break;case"square":a=`${a} modus-wc-rounded-lg`}if(d)switch(d){case"xs":a=`${a} modus-wc-w-8`;break;case"sm":a=`${a} modus-wc-w-12`;break;case"md":a=`${a} modus-wc-w-16`;break;case"lg":a=`${a} modus-wc-w-20`}return a.trim()})({shape:this.shape,size:this.size});return d&&c.push(d),this.customClass&&c.push(this.customClass),c.join(" ")}render(){return d(a,{key:"1e1813bb37e73c2149f87c67142b566a1d34a086"},d("div",Object.assign({key:"88bc83fc2875665966d2dc8ddfbe6918126ba6e9",class:"modus-wc-avatar",tabindex:-1},this.inheritedAttributes),d("div",{key:"db2cd321905b38d0417ba28554c820c13184c188",class:this.getClasses()},d("img",{key:"9682e09c1512726abac73c82365f33c3fbb1281d",src:this.imgSrc,alt:this.alt}))))}get el(){return s(this)}};t.style="";const o=class{constructor(d){c(this,d),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"],d=(({bordered:c,fullImage:d,layout:a,padding:s})=>{let e="";return c&&(e=`${e} modus-wc-card-bordered`),d&&(e=`${e} modus-wc-image-full`),"horizontal"===a&&(e=`${e} modus-wc-card-side`),"compact"===s&&(e=`${e} modus-wc-card-compact`),e.trim()})({bordered:this.bordered,fullImage:this.backgroundFigure,layout:this.layout,padding:this.padding});return d&&c.push(d),this.customClass&&c.push(this.customClass),c.join(" ")}render(){return d(a,{key:"fd3a6ef7fd21fdeabb2ec57c813653d0aaf9c66f"},d("article",Object.assign({key:"4c6f531390aeabfbb53d39432af87dfc748e729d",class:this.getClasses(),tabindex:-1},this.inheritedAttributes),d("slot",{key:"bdf8db8cc748857342037a29a0da2b198b58d0f5",name:"header"}),d("div",{key:"a3795cd70b6cea282dab3dda807af4018cc60aef",class:"modus-wc-card-body"},d("div",{key:"3e490ec974c74c804b5afef57d30ea8472f8118d",class:"modus-wc-card-title"},d("slot",{key:"14dad4047940d9bad74b301db6a37f37ca080034",name:"title"})),d("div",{key:"3866ccd1fa29f298d67388261e5cf02b3b56da69",class:"modus-wc-card-subtitle"},d("slot",{key:"5a2fe0c64b75b293bbcfd56dd85519fbdb78f318",name:"subtitle"})),d("slot",{key:"f2db96d7a5de745218311d94158ff8df84ba8473"})," ",d("div",{key:"0673bfe79a69d4023d6b10dafbc2f303d009a1c7",class:"modus-wc-card-actions"},d("slot",{key:"d7a808dcf078600844644824d889245214473472",name:"actions"}))),d("slot",{key:"50a2ebbe4d79d188543537047f0034c4bd699e90",name:"footer"})))}get el(){return s(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(d){c(this,d),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 d(a,{key:"a8d3ef8dd8fa3dddeeb30f95771641e23b3dd28e"},d("div",Object.assign({key:"f12b47d6b385aa312868e65d488b1d2252e91fa4",class:this.getClasses()},this.inheritedAttributes),d("div",{key:"35d694bc5c7d1db9e340da5ead6e98571fc9c6f7",class:"modus-wc-navbar-start"},d("slot",{key:"9a4738e0f60a4d9cbe5865e7a5a4a2f32e05e239",name:"start"})),d("div",{key:"a62ac4e3c85430d0727d704eae724de05d7067b2",class:"modus-wc-navbar-center"},d("slot",{key:"e154ccfb62fa6f273e6c0e4eaef9d455fc1c6472",name:"center"})),d("div",{key:"d224cf4b79fe16191b0b231f403f8a04af2c673d",class:"modus-wc-navbar-end"},d("slot",{key:"b9027b5aec445137f05adb338583ab4b2bbee093",name:"end"}))))}get el(){return s(this)}};r.style="";export{t as modus_wc_avatar,o as modus_wc_card,r as modus_wc_toolbar}