@trimble-oss/moduswebcomponents/modus-wc/p-b5136e19.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 t,c as s,h as o,H as e,g as r}from"./p-D_4hbGjA.js";import{i as d}from"./p-BLBSdonk.js";const i=class{constructor(o){t(this,o),this.buttonGroupClick=s(this,"buttonGroupClick"),this.buttonSelectionChange=s(this,"buttonSelectionChange"),this.inheritedAttributes={},this.selectedButtons=[],this.variant="outlined",this.disabled=!1,this.orientation="horizontal",this.selectionType="default"}componentWillLoad(){this.inheritedAttributes=d(this.el)}componentDidLoad(){this.buttonElements=this.el.querySelectorAll("modus-wc-button"),this.syncButtonStates(),this.initializeSelectedButtons()}handlePropChange(){this.syncButtonStates()}handleSelectionTypeChange(){this.resetAllSelections()}handleButtonClick(t){const s=t.target;if("default"!==this.selectionType)switch(this.selectionType){case"single":this.toggleSingleSelect(s);break;case"multiple":this.toggleMultiSelect(s)}else this.buttonGroupClick.emit({button:s,isSelected:!1})}handleSlotChange(){this.buttonElements=this.el.querySelectorAll("modus-wc-button"),this.syncButtonStates(),this.initializeSelectedButtons()}initializeSelectedButtons(){if(!this.buttonElements||!this.buttonElements.length)return;this.selectedButtons=[];const t=[];Array.from(this.buttonElements).forEach((s=>{s.hasAttribute("pressed")&&t.push(s)})),"single"===this.selectionType&&t.length>0?(this.selectedButtons=[t[0]],t.slice(1).forEach((t=>{t.removeAttribute("pressed")}))):"multiple"===this.selectionType&&(this.selectedButtons=t)}syncButtonStates(){this.buttonElements&&this.buttonElements.length&&(this.setButtonAttribute("variant",this.variant),this.setButtonAttribute("color",this.color||null),this.setButtonAttribute("disabled",this.disabled?"true":null))}setButtonAttribute(t,s){this.buttonElements.forEach((o=>{null!=s?o.setAttribute(t,s):o.removeAttribute(t)}))}toggleSingleSelect(t){this.selectedButtons.includes(t)||(Array.from(this.buttonElements).forEach((t=>{t.removeAttribute("pressed")})),t.setAttribute("pressed",""),this.selectedButtons=[t],this.buttonGroupClick.emit({button:t,isSelected:!0}),this.buttonSelectionChange.emit({selectedButtons:this.selectedButtons}))}toggleMultiSelect(t){const s=this.selectedButtons.includes(t);s?(t.removeAttribute("pressed"),this.selectedButtons=this.selectedButtons.filter((s=>s!==t))):(t.setAttribute("pressed",""),this.selectedButtons=[...this.selectedButtons,t]),this.buttonGroupClick.emit({button:t,isSelected:!s}),this.buttonSelectionChange.emit({selectedButtons:this.selectedButtons})}resetAllSelections(){this.buttonElements&&(Array.from(this.buttonElements).forEach((t=>{t.removeAttribute("pressed")})),this.selectedButtons=[])}getClasses(){const t=["modus-wc-button-group"];return"vertical"===this.orientation&&t.push("modus-wc-join-vertical"),t.join(" ")}render(){return o(e,Object.assign({key:"92b2c7c867d6aec96b888c8f0dd71e135bf386e8"},this.inheritedAttributes,{role:"group",class:this.getClasses()}),o("slot",{key:"48d1977a140c0cfc32addcc6fe1ffb1dbeb81a21"}))}get el(){return r(this)}static get watchers(){return{variant:["handlePropChange"],color:["handlePropChange"],disabled:["handlePropChange"],selectionType:["handleSelectionTypeChange"]}}};i.style="modus-wc-button-group.modus-wc-button-group{align-items:stretch;display:inline-flex}modus-wc-button-group.modus-wc-button-group>*{border-radius:0}modus-wc-button-group.modus-wc-button-group>* .modus-wc-btn{border-radius:0}modus-wc-button-group.modus-wc-button-group>*:first-child .modus-wc-btn{border-end-start-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-start-radius:var(--modus-wc-rounded-btn, 0.5rem)}modus-wc-button-group.modus-wc-button-group>*:last-child .modus-wc-btn{border-end-end-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-end-radius:var(--modus-wc-rounded-btn, 0.5rem)}modus-wc-button-group.modus-wc-button-group>*:not(:last-child) .modus-wc-btn{border-inline-end-width:0}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical{align-items:stretch;flex-direction:column}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>* .modus-wc-btn{border-inline-end-width:1px;border-radius:0}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>*:first-child .modus-wc-btn{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-start-radius:var(--modus-wc-rounded-btn, 0.5rem)}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>*:last-child .modus-wc-btn{border-end-end-radius:var(--modus-wc-rounded-btn, 0.5rem);border-end-start-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-end-radius:0;border-start-start-radius:0}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>*:not(:last-child) .modus-wc-btn{border-block-end-width:0}";export{i as modus_wc_button_group}