@trimble-oss/moduswebcomponents/modus-wc/p-cac75256.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,c,h as s,F as l,H as a,g as e}from"./p-D_4hbGjA.js";import{g as r,i as d}from"./p-BLBSdonk.js";const m=class{constructor(s){o(this,s),this.expandedChange=c(this,"expandedChange"),this.inheritedAttributes={},this.bordered=!1,this.customClass="",this.expanded=!1,this.handleToggle=o=>{const c=o.currentTarget.open;this.expanded!==c&&(this.expanded=c,this.expandedChange.emit({expanded:c}))}}expandedChanged(o){this.detailsRef&&this.detailsRef.open!==o&&(this.detailsRef.open=o)}componentWillLoad(){this.collapseId||(this.collapseId=r()),this.inheritedAttributes=d(this.el)}getOuterDivClasses(){const o=["modus-wc-collapse modus-wc-collapse-arrow"],c=(({bordered:o,expanded:c})=>{let s="";return o&&(s=`${s} modus-wc-border`),s=c?`${s} modus-wc-collapse-open`:`${s} modus-wc-collapse-close`,s.trim()})({bordered:this.bordered,expanded:this.expanded});return c&&o.push(c),this.customClass&&o.push(this.customClass),o.join(" ")}getTitleClasses(){var o;const c=["modus-wc-collapse-title modus-wc-inline-flex modus-wc-items-center modus-wc-justify-between modus-wc-min-h-4"],s=(({size:o})=>{let c="";if(o)switch(o){case"xs":c="modus-wc-pb-2 modus-wc-pl-2 modus-wc-pt-2";break;case"sm":c="modus-wc-pb-3 modus-wc-pl-3 modus-wc-pt-3";break;case"md":c="modus-wc-pb-4 modus-wc-pl-4 modus-wc-pt-4";break;case"lg":c="modus-wc-pb-5 modus-wc-pl-5 modus-wc-pt-5"}return c})({size:null===(o=this.options)||void 0===o?void 0:o.size});return s&&c.push(s),c.join(" ")}getTitleChildDivClasses(){var o;const c=["modus-wc-inline-flex modus-wc-items-center"],s=(({size:o})=>{let c="";if(o)switch(o){case"xs":c="modus-wc-text-base";break;case"sm":c="modus-wc-text-lg";break;case"md":c="modus-wc-text-xl";break;case"lg":c="modus-wc-text-2xl"}return c})({size:null===(o=this.options)||void 0===o?void 0:o.size});return s&&c.push(s),c.join(" ")}getDescriptionDivClasses(){var o;const c=["description modus-wc-font-light"],s=(({size:o})=>{let c="modus-wc-text-base";return o&&(c=`modus-wc-text-${o}`),c})({size:null===(o=this.options)||void 0===o?void 0:o.size});return s&&c.push(s),c.join(" ")}render(){const o=this.collapseId,c=`${o}-title`,e=`${o}-content`;return s(a,{key:"af0cb4798c3ed71f61d43f2208609af9dcbd0e10"},s("details",Object.assign({key:"6dea7f9d9d8f564b36b3ee9587969c32ae02d783",class:this.getOuterDivClasses(),open:this.expanded,onToggle:this.handleToggle,ref:o=>this.detailsRef=o},this.inheritedAttributes),s("summary",{key:"af2cde6a06106cb871296b519673d439089613a1",class:this.getTitleClasses(),id:c},this.options?s(l,null,s("div",{class:this.getTitleChildDivClasses()},this.options.icon&&s("modus-wc-icon",{"aria-label":this.options.iconAriaLabel,decorative:!0,name:this.options.icon,size:this.options.size}),this.options.title),this.options.description&&s("div",{class:this.getDescriptionDivClasses()},this.options.description)):s("slot",{name:"header"})),s("div",{key:"bac620bf9a0912cc3b14eb3c954859d7be9e2340","aria-labelledby":c,class:"modus-wc-collapse-content modus-wc-cursor-default",id:e},s("slot",{key:"c09c18d6c91215fbe3970b3f54d80724b455ee99",name:"content"}))))}get el(){return e(this)}static get watchers(){return{expanded:["expandedChanged"]}}};m.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-color:transparent;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{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-semibold);min-height:unset;padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-3xl) var(--modus-wc-spacing-md) var(--modus-wc-spacing-lg);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 .description{font-size:var(--modus-wc-font-size-sm)}modus-wc-collapse .modus-wc-collapse modus-wc-icon{height:24px;margin-inline-end:var(--modus-wc-spacing-sm)}modus-wc-collapse .modus-wc-collapse.modus-wc-border{background:var(--modus-wc-color-base-page);border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200);border-radius:var(--modus-wc-border-radius-box)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-content{padding:var(--modus-wc-spacing-lg)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-border.modus-wc-collapse-open .modus-wc-collapse-title{background-color:var(--modus-wc-color-base-100)}.modus-wc-collapse-arrow>.modus-wc-collapse-title::after{top:50% !important}[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 .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);padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse{color:inherit}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse .description{color:var(--modus-wc-color-gray-light)}[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);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)}";export{m as modus_wc_collapse}