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 8.94 kB
import{r as c,h as d,e as a,g as o}from"./p-C1-Dpkp7.js";import{h as r}from"./p-tWS3Egrk.js";import{i as e}from"./p-DJ2rBB6r.js";const s=class{constructor(d){c(this,d),this.inheritedAttributes={},this.backgroundFigure=!1,this.bordered=!1,this.customClass="",this.layout="vertical",this.padding="compact"}componentWillLoad(){r(this.el,!0),this.inheritedAttributes=e(this.el)}getClasses(){const c=["modus-wc-card modus-wc-rounded-card"],d=(({bordered:c,fullImage:d,layout:a,padding:o})=>{let r="";return c&&(r=`${r} modus-wc-card-bordered`),d&&(r=`${r} modus-wc-image-full`),"horizontal"===a&&(r=`${r} modus-wc-card-side`),"compact"===o&&(r=`${r} modus-wc-card-compact`),"comfortable"===o&&(r=`${r} modus-wc-card-comfortable`),r.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:"2bd530d739a71856714ed46e2772a8a85b5c7067"},d("article",Object.assign({key:"e351aa543600dff1d6b167ff55d7a58423e4e077",class:this.getClasses(),tabindex:-1},this.inheritedAttributes),d("slot",{key:"dae0870810ba669f93dcd51bbc6582a4526fac00",name:"header"}),d("div",{key:"6fefc0bfd64b1a5506dae7ba37784a7700960e5d",class:"modus-wc-card-body"},d("div",{key:"29b989e5e957c9c8f12e230fd99f968d9eac58eb",class:"modus-wc-card-title"},d("slot",{key:"ef72977e5b29a7fee99e8fbd05b635ccba50fffe",name:"title"})),d("div",{key:"64091544637258f092240ee28b98e578c2cbd8aa",class:"modus-wc-card-subtitle"},d("slot",{key:"335c5fadc770f622f1cedfd1af75e1ae3be1d598",name:"subtitle"})),d("slot",{key:"225b91c2035f2782b9ba65e4b49c985f962ad725"})," ",d("div",{key:"c154dfacdffb83c09a420d67c02ad15b4073e958",class:"modus-wc-card-actions"},d("slot",{key:"386f07253453a5a9937597344db4d72ff2fda9b1",name:"actions"}))),d("slot",{key:"2f64d76f0909c0fd898a1359cdb3fab84dd7c208",name:"footer"})))}get el(){return o(this)}};s.style="modus-wc-card .modus-wc-card:not(.modus-wc-card-bordered){background-color:var(--modus-wc-color-base-100)}modus-wc-card .modus-wc-card .modus-wc-card-title{margin-bottom:0}modus-wc-card .modus-wc-card.modus-wc-card-bordered{background-color:var(--modus-wc-color-base-page)}modus-wc-card .modus-wc-card{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}modus-wc-card .modus-wc-card .modus-wc-card-actions{margin-bottom:var(--modus-wc-spacing-xs)}modus-wc-card .modus-wc-card>modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-base-page)}[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 .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 .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)}[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(d){c(this,d),this.inheritedAttributes={},this.customClass=""}componentWillLoad(){r(this.el,!0),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:"798345f7a3aeb8ae8480b5c4e541aa5ff24509c7"},d("div",Object.assign({key:"bb31895b1b7b4fa6f5a9047dcfaceed9e03f2702",class:this.getClasses()},this.inheritedAttributes),d("div",{key:"881cf82f845566bf104727a60f9b4235f29270e6",class:"modus-wc-navbar-start"},d("slot",{key:"a4660ea5b728256dfbf60dcb374fdeccea2e4b38",name:"start"})),d("div",{key:"d4cb000b6c8ad5673dd67a3a849db9d295573d97",class:"modus-wc-navbar-center"},d("slot",{key:"daf3db722d3dca1137de43f5b46d4ad002d88a9f",name:"center"})),d("div",{key:"caa409be3c5f9be14f9659e7be89a21604e7813b",class:"modus-wc-navbar-end"},d("slot",{key:"797a33d202ecaf3d079bf34e513204cf8e8bf3ca",name:"end"}))))}get el(){return o(this)}};t.style=".modus-wc-navbar{background:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-box);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{s as modus_wc_card,t as modus_wc_toolbar}