@trimble-oss/moduswebcomponents/modus-wc/p-875cdd19.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,d as s,h as o,e,g as r}from"./p-C1-Dpkp7.js";import{h as d}from"./p-tWS3Egrk.js";import{i}from"./p-DJ2rBB6r.js";const u=class{constructor(o){t(this,o),this.buttonGroupClick=s(this,"buttonGroupClick",7),this.buttonSelectionChange=s(this,"buttonSelectionChange",7),this.inheritedAttributes={},this.selectedButtons=[],this.variant="outlined",this.disabled=!1,this.orientation="horizontal",this.selectionType="default"}componentWillLoad(){d(this.el),this.inheritedAttributes=i(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:"f42ba438e89b39f40ac45d5653cb38b6a80930d5"},this.inheritedAttributes,{role:"group",class:this.getClasses()}),o("slot",{key:"ed6fe4d9cfc9a7d8e694bbc40a36e3bf5f6869d5"}))}get el(){return r(this)}static get watchers(){return{variant:["handlePropChange"],color:["handlePropChange"],disabled:["handlePropChange"],selectionType:["handleSelectionTypeChange"]}}};u.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{u as modus_wc_button_group}