@trimble-oss/moduswebcomponents/modus-wc/p-d7ccd617.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 s,c as o,h as c,F as e,H as a,g as d}from"./p-D5XAQERj.js";import{K as l,g as t,i}from"./p-DlW2F98o.js";const r=class{constructor(c){s(this,c),this.expandedChange=o(this,"expandedChange"),this.inheritedAttributes={},this.bordered=!1,this.customClass="",this.expanded=!1,this.handleClick=()=>{this.expanded=!this.expanded,this.expandedChange.emit({expanded:this.expanded})},this.handleContentClick=s=>{s.stopPropagation()},this.handleKeyDown=s=>{s.key!==l.Enter&&s.key!==l.Space||(s.preventDefault(),this.handleClick())}}expandedChanged(s){const o=this.el.querySelector('input[type="checkbox"]');o&&(o.checked=s)}componentWillLoad(){this.collapseId||(this.collapseId=t()),this.inheritedAttributes=i(this.el)}getOuterDivClasses(){const s=["modus-wc-collapse modus-wc-collapse-arrow"],o=(({bordered:s,expanded:o})=>{let c="";return s&&(c=`${c} modus-wc-border`),c=o?`${c} modus-wc-collapse-open`:`${c} modus-wc-collapse-close`,c.trim()})({bordered:this.bordered,expanded:this.expanded});return o&&s.push(o),this.customClass&&s.push(this.customClass),s.join(" ")}getTitleDivClasses(){var s;const o=["modus-wc-collapse-title modus-wc-inline-flex modus-wc-items-center modus-wc-justify-between modus-wc-min-h-4"],c=(({size:s})=>{let o="";if(s)switch(s){case"xs":o="modus-wc-pb-2 modus-wc-pl-2 modus-wc-pt-2";break;case"sm":o="modus-wc-pb-3 modus-wc-pl-3 modus-wc-pt-3";break;case"md":o="modus-wc-pb-4 modus-wc-pl-4 modus-wc-pt-4";break;case"lg":o="modus-wc-pb-5 modus-wc-pl-5 modus-wc-pt-5"}return o})({size:null===(s=this.options)||void 0===s?void 0:s.size});return c&&o.push(c),o.join(" ")}getTitleChildDivClasses(){var s;const o=["modus-wc-inline-flex modus-wc-items-center"],c=(({size:s})=>{let o="";if(s)switch(s){case"xs":o="modus-wc-text-base";break;case"sm":o="modus-wc-text-lg";break;case"md":o="modus-wc-text-xl";break;case"lg":o="modus-wc-text-2xl"}return o})({size:null===(s=this.options)||void 0===s?void 0:s.size});return c&&o.push(c),o.join(" ")}getDescriptionDivClasses(){var s;const o=["description modus-wc-font-light"],c=(({size:s})=>{let o="modus-wc-text-base";return s&&(o=`modus-wc-text-${s}`),o})({size:null===(s=this.options)||void 0===s?void 0:s.size});return c&&o.push(c),o.join(" ")}render(){const s=this.collapseId,o=`${s}-title`,d=`${s}-content`;return c(a,{key:"64f5e9eaac709f4687b94e0711e6dd7ad8b60f60"},c("div",Object.assign({key:"8f0569877aa58d9193194c39ffdbd32f5e814ff5",class:this.getOuterDivClasses()},this.inheritedAttributes),c("input",{key:"1107c2cec3e33dd0b2f0caad35bec98bb230f5b8","aria-controls":d,"aria-expanded":this.expanded,"aria-labelledby":o,class:"modus-wc-min-h-4 modus-wc-cursor-pointer",id:`${s}-checkbox`,onClick:this.handleClick,onKeyDown:this.handleKeyDown,type:"checkbox"}),c("div",{key:"de16249f31fbd4b8a9cd89ba8f7f6029fb062689",class:this.getTitleDivClasses(),id:o},this.options?c(e,null,c("div",{class:this.getTitleChildDivClasses()},this.options.icon&&c("modus-wc-icon",{"aria-label":this.options.iconAriaLabel,decorative:!0,name:this.options.icon,size:this.options.size}),this.options.title),this.options.description&&c("div",{class:this.getDescriptionDivClasses()},this.options.description)):c("slot",{name:"header"})),c("div",{key:"bfa1ce6b1d5e8dd760092dbcd9c70804c65f5849","aria-labelledby":o,class:"modus-wc-collapse-content modus-wc-cursor-default",id:d,onClick:this.handleContentClick},c("slot",{key:"0ec652e1233f4124368f225c6f9c88f74458317d",name:"content"}))))}get el(){return d(this)}static get watchers(){return{expanded:["expandedChanged"]}}};r.style="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 !important}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 .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-base-200)}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)}";export{r as modus_wc_collapse}