@trimble-oss/moduswebcomponents/modus-wc/p-4b53ca47.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 o,d as s,h as c,e as l,g as e}from"./p-C1-Dpkp7.js";import{h as a}from"./p-tWS3Egrk.js";import{g as d,i as r}from"./p-DJ2rBB6r.js";const t=class{constructor(c){o(this,c),this.expandedChange=s(this,"expandedChange",7),this.inheritedAttributes={},this.bordered=!1,this.chevronPosition="right",this.customClass="",this.expanded=!1,this.handleToggle=o=>{const s=o.currentTarget.open;this.expanded!==s&&(this.expanded=s,this.expandedChange.emit({expanded:s}))}}expandedChanged(o){this.detailsRef&&this.detailsRef.open!==o&&(this.detailsRef.open=o)}componentWillLoad(){a(this.el),this.collapseId||(this.collapseId=d()),this.inheritedAttributes=r(this.el)}getOuterDivClasses(){var o,s;const c=["modus-wc-collapse modus-wc-collapse-arrow"],l=(({bordered:o,expanded:s})=>{let c="";return o&&(c=`${c} modus-wc-border`),c=s?`${c} modus-wc-collapse-open`:`${c} modus-wc-collapse-close`,c.trim()})({bordered:this.bordered,expanded:this.expanded});return l&&c.push(l),c.push(`modus-wc-chevron-${this.chevronPosition}`),(null===(o=this.options)||void 0===o?void 0:o.startIcon)||"left"===this.chevronPosition||c.push("no-leading-icons"),(null===(s=this.options)||void 0===s?void 0:s.startIcon)&&"left"===this.chevronPosition&&c.push("has-start-icon"),this.customClass&&c.push(this.customClass),c.join(" ")}getTitleClasses(){var o;const s=["modus-wc-collapse-title modus-wc-inline-flex modus-wc-items-center modus-wc-justify-between modus-wc-min-h-4"],c=(({size:o})=>{let s="";if(o)switch(o){case"xs":s="modus-wc-pb-2 modus-wc-pl-2 modus-wc-pt-2";break;case"sm":s="modus-wc-pb-3 modus-wc-pl-3 modus-wc-pt-3";break;case"md":s="modus-wc-pb-4 modus-wc-pl-4 modus-wc-pt-4";break;case"lg":s="modus-wc-pb-5 modus-wc-pl-5 modus-wc-pt-5"}return s})({size:null===(o=this.options)||void 0===o?void 0:o.size});return c&&s.push(c),s.join(" ")}getTitleChildDivClasses(){var o;const s=["modus-wc-title-main-row modus-wc-inline-flex modus-wc-items-center"],c=(({size:o})=>{let s="";if(o)switch(o){case"xs":s="modus-wc-text-base";break;case"sm":s="modus-wc-text-lg";break;case"md":s="modus-wc-text-xl";break;case"lg":s="modus-wc-text-2xl"}return s})({size:null===(o=this.options)||void 0===o?void 0:o.size});return c&&s.push(c),s.join(" ")}getDescriptionDivClasses(){var o;const s=["description modus-wc-font-light"],c=(({size:o})=>{let s="modus-wc-text-base";return o&&(s=`modus-wc-text-${o}`),s})({size:null===(o=this.options)||void 0===o?void 0:o.size});return c&&s.push(c),s.join(" ")}render(){var o;const s=this.collapseId,e=`${s}-title`,a=`${s}-content`;return c(l,{key:"066210e7a999faf40422efe7bc50281975585fad"},c("details",Object.assign({key:"6ea85a85f00b3328dc744a2ba4b58abfd64ce534",class:this.getOuterDivClasses(),open:this.expanded,onToggle:this.handleToggle,ref:o=>this.detailsRef=o},this.inheritedAttributes),c("summary",{key:"e5f2f7edbbbbc4e2b520ade5cd5eddc9e9fcb5bd",class:this.getTitleClasses(),id:e},this.options?c("div",{class:"modus-wc-summary-main-content"},this.options.startIcon&&c("modus-wc-icon",{"aria-label":this.options.startIconAriaLabel,class:"title-start-icon",decorative:!this.options.startIconAriaLabel,name:this.options.startIcon,size:this.options.size}),c("div",{class:"modus-wc-title-main-content"},c("div",{class:this.getTitleChildDivClasses()},this.options.icon&&c("modus-wc-icon",{"aria-label":this.options.iconAriaLabel,decorative:!this.options.iconAriaLabel,name:this.options.icon,size:this.options.size}),this.options.title)),this.options.endIcon&&c("div",{class:"modus-wc-title-end-content"},c("modus-wc-icon",{"aria-label":this.options.endIconAriaLabel,class:"title-end-icon",decorative:!this.options.endIconAriaLabel,name:this.options.endIcon,size:this.options.size}))):c("slot",{name:"header"})),this.expanded&&(null===(o=this.options)||void 0===o?void 0:o.description)&&c("div",{key:"b13862fde0e208df6598d1bfd54977e8d3fd6b6d",class:`modus-wc-collapse-description ${this.getDescriptionDivClasses()}`},this.options.description),c("div",{key:"40538c27af9f30b527e52ae40d4ac6c5a65b366a","aria-labelledby":e,class:"modus-wc-collapse-content modus-wc-cursor-default",id:a},c("slot",{key:"c0563a96763e89fe916748a9155590d6074cadbc",name:"content"}))))}get el(){return e(this)}static get watchers(){return{expanded:["expandedChanged"]}}};t.style='modus-wc-collapse details.modus-wc-collapse>summary{display:inline-flex}modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-base-100);border-radius:0;box-sizing:border-box;color:var(--modus-wc-color-base-content);margin-bottom:var(--modus-wc-spacing-md);transition:none}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title{cursor:pointer;font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-semibold);min-height:unset;padding:var(--modus-wc-spacing-lg) var(--modus-wc-spacing-3xl) var(--modus-wc-spacing-lg) var(--modus-wc-spacing-3xl);position:relative;width:auto}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-disabled:hover{background-color:inherit}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:hover,modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:active,modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:focus{background-color:transparent;color:var(--modus-wc-color-base-content)}modus-wc-collapse .modus-wc-collapse .description{font-size:var(--modus-wc-font-size-md);padding-inline-start:var(--modus-wc-spacing-md)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-content{font-size:var(--modus-wc-font-size-md)}modus-wc-collapse .modus-wc-collapse .modus-wc-title-main-content{display:inline-flex;flex:1;flex-direction:column;min-width:0}modus-wc-collapse .modus-wc-collapse .modus-wc-summary-main-content{align-items:center;display:flex;justify-content:space-between;min-height:1rem;width:100%}modus-wc-collapse .modus-wc-collapse .modus-wc-title-main-row>modus-wc-icon{height:24px;margin-inline-end:var(--modus-wc-spacing-sm)}modus-wc-collapse .modus-wc-collapse .modus-wc-title-end-content{align-items:center;display:inline-flex}modus-wc-collapse .modus-wc-collapse .title-end-icon{height:24px;margin-inline-start:var(--modus-wc-spacing-sm);pointer-events:none;position:relative;top:2px}modus-wc-collapse .modus-wc-collapse .title-start-icon{height:24px;inset-inline-start:var(--modus-wc-spacing-lg);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}modus-wc-collapse .modus-wc-collapse.modus-wc-border{background-color:var(--modus-wc-color-base-page);border:none;border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-content{padding:var(--modus-wc-spacing-md);padding-top:var(--modus-wc-spacing-sm)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{color:var(--modus-wc-color-base-content)}modus-wc-collapse .modus-wc-collapse.has-start-icon>.modus-wc-collapse-title{padding-inline-start:var(--modus-wc-size-xxl)}modus-wc-collapse .modus-wc-collapse.has-start-icon>.modus-wc-collapse-title::before{inset-inline-start:49px}modus-wc-collapse .modus-wc-collapse.modus-wc-chevron-left>.modus-wc-collapse-title{padding-inline-end:16px}modus-wc-collapse .modus-wc-collapse.no-leading-icons>.modus-wc-collapse-title{padding-inline-start:16px}modus-wc-collapse .modus-wc-collapse.no-leading-icons>.modus-wc-collapse-description{padding-inline-start:var(--modus-wc-spacing-md)}.modus-wc-collapse-arrow.modus-wc-chevron-left>.modus-wc-collapse-title::before{box-shadow:2px 2px;content:"";display:block;height:0.5rem;inset-inline-start:var(--modus-wc-spacing-lg);pointer-events:none;position:absolute;top:44%;transform:translateY(-50%) rotate(45deg);transform-origin:75% 75%;transition-duration:0.2s;transition-property:transform;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);width:0.5rem}.modus-wc-collapse-arrow.modus-wc-chevron-left.modus-wc-collapse-open>.modus-wc-collapse-title::before{top:50%;transform:translateY(-50%) rotate(225deg)}.modus-wc-collapse-arrow.modus-wc-chevron-left>.modus-wc-collapse-title::after{display:none}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse,[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse{border-radius:var(--modus-wc-border-radius-md);margin-bottom:0;margin-bottom:-1px}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title,[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title{font-weight:var(--modus-wc-font-weight-normal);min-height:unset;width:auto}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-white);color:inherit}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-border{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse .description{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open{border-left:var(--modus-wc-spacing-xs) solid var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{background-color:var(--modus-wc-color-blue-pale);font-weight:var(--modus-wc-font-weight-normal)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open.no-leading-icons .modus-wc-collapse-description{padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-trimble-gray);color:inherit}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-border{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse .description{color:var(--modus-wc-color-base-inverted)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open{border-left:var(--modus-wc-spacing-xs) solid var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open.no-leading-icons .modus-wc-collapse-title,[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open.no-leading-icons .modus-wc-collapse-description{padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=connect-light] modus-wc-collapse .modus-wc-collapse,[data-theme=connect-dark] modus-wc-collapse .modus-wc-collapse{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-collapse .modus-wc-collapse.modus-wc-border,[data-theme=connect-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-border{border-radius:var(--modus-wc-border-radius-box)}[data-theme=modus-modern-light] modus-wc-collapse .modus-wc-collapse:not(.modus-wc-border){border-radius:var(--modus-wc-border-radius-box)}[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse:not(.modus-wc-border){border-radius:var(--modus-wc-border-radius-box)}[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse{color:var(--modus-wc-color-base-inverted)}[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title,[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse .description,[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-content,[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{color:var(--modus-wc-color-base-inverted)}';export{t as modus_wc_collapse}