@trimble-oss/moduswebcomponents/modus-wc/p-b62b3c5a.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 c,h as a,H as o,g as d}from"./p-D_4hbGjA.js";import{i as r}from"./p-BLBSdonk.js";const e=class{constructor(a){c(this,a),this.inheritedAttributes={},this.customClass="",this.imgSrc="",this.initials="",this.shape="circle",this.size="md"}componentWillLoad(){this.inheritedAttributes=r(this.el)}getClasses(){const c=[],a=(({shape:c,size:a})=>{let o="";if(c)switch(c){case"circle":o=`${o} modus-wc-rounded-full`;break;case"square":o=`${o} modus-wc-rounded-lg`}if(a)switch(a){case"xs":o=`${o} modus-wc-w-8`;break;case"sm":o=`${o} modus-wc-w-12`;break;case"md":o=`${o} modus-wc-w-16`;break;case"lg":o=`${o} modus-wc-w-20`}return o.trim()})({shape:this.shape,size:this.size});return a&&c.push(a),this.customClass&&c.push(this.customClass),this.imgSrc||this.initials||c.push("no-image"),c.join(" ")}getUserInitials(){return this.initials?this.initials.trim().split(/\s+/).filter(Boolean).map((c=>c.charAt(0))).join("").substring(0,3).toUpperCase():""}render(){const c=this.alt||"User avatar";return a(o,{key:"de74f253eb7123d9e409a8446de95a89422fa694"},a("div",Object.assign({key:"46d9e20b3433e4a5585e15eba600935d856bcd74",class:"modus-wc-avatar"},this.inheritedAttributes),a("div",{key:"c2575ac2e3190143d4ca9d5bdf32e939d8136721",class:this.getClasses()},this.imgSrc?a("img",{src:this.imgSrc,alt:c}):this.initials?a("span",{class:"initials","aria-label":this.alt||this.initials},this.getUserInitials()):a("modus-wc-icon",{"aria-label":c,name:"person",size:this.size,variant:"solid"}))))}get el(){return d(this)}};e.style="modus-wc-avatar .modus-wc-avatar .initials{align-items:center;background-color:var(--modus-wc-color-black);color:var(--modus-wc-color-white);display:flex;font-weight:600;height:100%;justify-content:center;text-transform:uppercase;width:100%}modus-wc-avatar .modus-wc-avatar .no-image{align-items:center;background-color:var(--modus-wc-color-gray-2);color:var(--modus-wc-color-white);display:flex;justify-content:center}modus-wc-avatar .modus-wc-avatar .modus-wc-w-8 .initials{font-size:var(--modus-wc-font-size-xs, 0.75rem)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-12 .initials{font-size:var(--modus-wc-font-size-sm, 0.875rem)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-16 .initials{font-size:var(--modus-wc-font-size-md, 1rem)}modus-wc-avatar .modus-wc-avatar .modus-wc-w-20 .initials{font-size:var(--modus-wc-font-size-lg, 1.25rem)}";const s=class{constructor(a){c(this,a),this.inheritedAttributes={},this.backgroundFigure=!1,this.bordered=!1,this.customClass="",this.layout="vertical",this.padding="compact"}componentWillLoad(){this.inheritedAttributes=r(this.el)}getClasses(){const c=["modus-wc-card modus-wc-rounded-card"],a=(({bordered:c,fullImage:a,layout:o,padding:d})=>{let r="";return c&&(r=`${r} modus-wc-card-bordered`),a&&(r=`${r} modus-wc-image-full`),"horizontal"===o&&(r=`${r} modus-wc-card-side`),"compact"===d&&(r=`${r} modus-wc-card-compact`),"comfortable"===d&&(r=`${r} modus-wc-card-comfortable`),r.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(o,{key:"25492378050f6c06ed7ea45e3947974356fbb44a"},a("article",Object.assign({key:"54fbda5fc406f57ffb2387bc59c79699278f219f",class:this.getClasses(),tabindex:-1},this.inheritedAttributes),a("slot",{key:"59b93595ec5a5e8ecd98be2eead691278db6e015",name:"header"}),a("div",{key:"294921b54282742d00dc530c8dba35a2219974d1",class:"modus-wc-card-body"},a("div",{key:"c746c0d4ee1765a57c0341d7c70b35424e3bbfa4",class:"modus-wc-card-title"},a("slot",{key:"0afa213cf7fe78853d90d4f1a6cb817e28f2c965",name:"title"})),a("div",{key:"735d4456083500a288bad9adfd5fc0d96e77d9e3",class:"modus-wc-card-subtitle"},a("slot",{key:"c10b6158e14216e436916e021ba9997b6558cc0b",name:"subtitle"})),a("slot",{key:"723148995604d7bc737a4754c9223e6b9c354add"})," ",a("div",{key:"aa35be52d458a2121a87fbe0163b22aa0c8c9b15",class:"modus-wc-card-actions"},a("slot",{key:"ec852e3e23c7e5ec2e800c40d9ae177a3aad85fa",name:"actions"}))),a("slot",{key:"d7c87209df38720f913298a14a26d6e641078639",name:"footer"})))}get el(){return d(this)}};s.style="modus-wc-card .modus-wc-card{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-content)}modus-wc-card .modus-wc-card figure{margin-bottom:unset}modus-wc-card .modus-wc-card .modus-wc-card-body{gap:unset}[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)}[data-theme=connect-light] modus-wc-card .modus-wc-card,[data-theme=connect-dark] modus-wc-card .modus-wc-card{box-shadow:0 0 0.25rem var(--modus-wc-color-base-200);background-color:var(--modus-wc-color-base-page);border:1px solid var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card:hover,[data-theme=connect-dark] modus-wc-card .modus-wc-card:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card:focus,[data-theme=connect-dark] modus-wc-card .modus-wc-card:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card:active,[data-theme=connect-dark] modus-wc-card .modus-wc-card:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-selected,[data-theme=connect-dark] modus-wc-card .modus-wc-card-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-active,[data-theme=connect-dark] modus-wc-card .modus-wc-card-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-open,[data-theme=connect-dark] modus-wc-card .modus-wc-card-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card.selected,[data-theme=connect-dark] modus-wc-card .modus-wc-card.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card.active,[data-theme=connect-dark] modus-wc-card .modus-wc-card.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-disabled:hover,[data-theme=connect-dark] modus-wc-card .modus-wc-card-disabled:hover{background-color:inherit}[data-theme=connect-light] modus-wc-card .modus-wc-card--active,[data-theme=connect-dark] modus-wc-card .modus-wc-card--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card--selected,[data-theme=connect-dark] modus-wc-card .modus-wc-card--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card:checked,[data-theme=connect-dark] modus-wc-card .modus-wc-card:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card.checked,[data-theme=connect-dark] modus-wc-card .modus-wc-card.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card-checked,[data-theme=connect-dark] modus-wc-card .modus-wc-card-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card.pressed,[data-theme=connect-dark] modus-wc-card .modus-wc-card.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card-pressed,[data-theme=connect-dark] modus-wc-card .modus-wc-card-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card[aria-pressed=true],[data-theme=connect-dark] modus-wc-card .modus-wc-card[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card:hover,[data-theme=connect-dark] modus-wc-card .modus-wc-card:hover{box-shadow:0 0 0.375rem var(--modus-wc-color-base-100)}";const t=class{constructor(a){c(this,a),this.inheritedAttributes={},this.customClass=""}componentWillLoad(){this.inheritedAttributes=r(this.el)}getClasses(){const c=["modus-wc-navbar"];return this.customClass&&c.push(this.customClass),c.join(" ")}render(){return a(o,{key:"f3acada56986f75be489852b78ab5f08947b8c3b"},a("div",Object.assign({key:"00cebe2e64fe84a594a3fee847b0b1018b9756f3",class:this.getClasses()},this.inheritedAttributes),a("div",{key:"eca7f0b6f6911bc1e430baa5a75a31e513ca6e3d",class:"modus-wc-navbar-start"},a("slot",{key:"634eb5055c6b8f4e829e3c8e7c856496e58c135c",name:"start"})),a("div",{key:"c930dd3d7af6f3429a77cfb6df8ccec9bfc3cc6b",class:"modus-wc-navbar-center"},a("slot",{key:"d50f87593af0e908dd2526028abd83d9716f87c2",name:"center"})),a("div",{key:"6297f935dea5aa04c8459379bd0de1fb3442a158",class:"modus-wc-navbar-end"},a("slot",{key:"5830a6aa48bfad76d4db897cd107190389b3efc1",name:"end"}))))}get el(){return d(this)}};t.style=".modus-wc-navbar{border-radius:8px;box-shadow:0 1px 2px -1px color-mix(in sRGB, var(--modus-wc-color-black) 10%, transparent), 0 1px 3px 0 color-mix(in sRGB, var(--modus-wc-color-black) 10%, transparent)}";export{e as modus_wc_avatar,s as modus_wc_card,t as modus_wc_toolbar}