@sandlada/mdc/build/packages/mdc/src/components/button-group/internal/base-button-group.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{property as e}from"../../../../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../../../../node_modules/@lit/reactive-element/decorators/state.js";import{queryAssignedElements as n}from"../../../../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import"../../../../../../node_modules/lit/decorators.js";import{html as r,nothing as i}from"../../../../../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../../../../../node_modules/lit-element/lit-element.js";import"../../../../../../node_modules/lit/index.js";import{classMap as o}from"../../../../../../node_modules/lit-html/directives/class-map.js";import"../../../../../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as s}from"../../../../../../utils/behaviors/element-internals.js";import{composeMixin as c}from"../../../../../../utils/compose-mixin/compose-mixin.js";import l from"../../../../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as u}from"../../../../../../utils/aria/delegate.js";import{BUTTON_GROUP_INTERACTION_EVENT as d,BUTTON_GROUP_SELECTION_EVENT as f}from"../button-group.interface.js";import{buttonGroupStyles as p}from"../button-group.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var m=class extends c(u,s)(a){static{this.styles=p}constructor(){super(),this.variant=`connected`,this.selectionMode=`none`,this.size=`small`,this.shape=`round`,this.orientation=`horizontal`,this.disableMorph=!1,this.expandOnActive=!1,this.disabled=!1,this.items=[],this.mutationObserver=null,this.handleSlotChange=()=>{this.syncItems()},this.handlePressStart=e=>{if(this.disabled)return;let t=e.composedPath?.()[0]??e.target,n=this.findGroupItem(t);if(!(!n||this.isItemDisabled(n))){for(let e of this.items)e.toggleAttribute(`data-group-item-pressing`,e===n);this.applyExpandOnActiveMorph(n)}},this.handlePressEnd=e=>{for(let e of this.items)e.removeAttribute(`data-group-item-pressing`);this.applyExpandOnActiveMorph(null)},this.addEventListener(`click`,this.handleClick.bind(this)),this.addEventListener(`keydown`,this.handleKeyDown.bind(this)),this.addEventListener(`change`,this.handleChildChange.bind(this)),this.addEventListener(`input`,this.handleChildInput.bind(this)),this.addEventListener(`mousedown`,this.handlePressStart.bind(this)),this.addEventListener(`mouseup`,this.handlePressEnd.bind(this)),this.addEventListener(`mouseleave`,this.handlePressEnd.bind(this)),this.addEventListener(`touchstart`,this.handlePressStart.bind(this),{passive:!0}),this.addEventListener(`touchend`,this.handlePressEnd.bind(this),{passive:!0}),this.addEventListener(`touchcancel`,this.handlePressEnd.bind(this),{passive:!0})}connectedCallback(){super.connectedCallback(),this.mutationObserver=new MutationObserver(()=>{this.syncItems()}),this.mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`checked`,`selected`,`disabled`,`value`]})}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.mutationObserver=null}updated(e){super.updated(e),(e.has(`variant`)||e.has(`size`)||e.has(`shape`)||e.has(`orientation`)||e.has(`disabled`)||e.has(`selectionMode`)||e.has(`expandOnActive`))&&(this.syncItems(),this.applyExpandOnActiveMorph(null))}getItems(){return[...this.items]}getSelectedItems(){return this.items.filter(e=>this.isItemSelected(e))}getSelectedIndexes(){return this.items.map((e,t)=>this.isItemSelected(e)?t:-1).filter(e=>e!==-1)}setIndexSelected(e,t){if(e<0||e>=this.items.length)return;let n=this.items[e];if(!this.isItemDisabled(n)){if(this.selectionMode===`single`){if(t)for(let t=0;t<this.items.length;t++)this.setItemSelected(this.items[t],t===e);else this.setItemSelected(n,!1)}else this.selectionMode,this.setItemSelected(n,t);this.emitSelectionChange(n,e)}}toggleIndexSelected(e){if(e<0||e>=this.items.length)return;let t=this.isItemSelected(this.items[e]);this.setIndexSelected(e,!t)}setIndexDisabled(e,t){if(e<0||e>=this.items.length)return;let n=this.items[e];n.disabled=t,t?n.setAttribute(`disabled`,``):n.removeAttribute(`disabled`),this.syncItems()}getRenderClasses(){return{container:!0,[this.variant]:!0,[this.size]:!0,[this.shape]:!0,[this.orientation]:!0,"disable-morph":this.disableMorph,"expand-on-active":this.expandOnActive,disabled:this.disabled}}getAriaRole(){return this.selectionMode===`single`?`radiogroup`:`group`}render(){let{ariaLabel:e}=this;return r`<div class="${o(this.getRenderClasses())}" role="${this.getAriaRole()}" aria-label="${e||i}" aria-disabled="${this.disabled?`true`:`false`}"><slot @slotchange="${this.handleSlotChange}"></slot></div>`}syncItems(){let e=this.slottedElements.filter(e=>e instanceof HTMLElement);this.items=e;let t=e.length;e.forEach((e,n)=>{let r=`single`;t>1&&(r=n===0?`start`:n===t-1?`end`:`middle`),e.setAttribute(`data-group-position`,r),e.classList.toggle(`start-side`,r===`start`),e.classList.toggle(`middle`,r===`middle`),e.classList.toggle(`end-side`,r===`end`),e.classList.toggle(`single`,r===`single`);let i=e;if(i.size!==void 0&&!e.hasAttribute(`size`)&&(i.size=this.size),i.shape!==void 0&&!e.hasAttribute(`shape`)&&(i.shape=this.shape),this.disabled&&(i.disabled=!0),this.isItemSelected(e)?e.setAttribute(`data-group-item-active`,``):e.removeAttribute(`data-group-item-active`),this.selectionMode===`single`){let t=e;t.type!==void 0&&!e.hasAttribute(`type`)&&(t.type=`radio`)}}),this.updateRovingTabindex()}updateRovingTabindex(){let e=this.items.filter(e=>!this.isItemDisabled(e));if(e.length===0)return;let t=e.find(e=>this.isItemSelected(e));t||=e[0];for(let e of this.items)e.tabIndex=e===t?0:-1}applyExpandOnActiveMorph(e){if(!this.expandOnActive){for(let e of this.items)e.style.removeProperty(`flex-grow`);return}let t=this.variant,n=e?this.items.indexOf(e):-1;for(let e=0;e<this.items.length;e++){let r=this.items[e];if(n<0){r.style.removeProperty(`flex-grow`);continue}t===`standard`?e===n?r.style.setProperty(`flex-grow`,`1.2`):r.style.setProperty(`flex-grow`,`0.92`):e===n?r.style.setProperty(`flex-grow`,`1.2`):r.style.removeProperty(`flex-grow`)}}handleClick(e){if(this.disabled){e.stopPropagation(),e.preventDefault();return}let t=e.composedPath?.()[0]??e.target,n=this.findGroupItem(t);if(!n||this.isItemDisabled(n))return;let r=this.items.indexOf(n);if(this.selectionMode===`single`){for(let e=0;e<this.items.length;e++)this.setItemSelected(this.items[e],e===r);this.emitSelectionChange(n,r)}else if(this.selectionMode===`multiple`){let e=this.isItemSelected(n);this.setItemSelected(n,!e),this.emitSelectionChange(n,r)}else this.dispatchEvent(new CustomEvent(d,{detail:{item:n,index:r},bubbles:!0,composed:!0}));this.updateRovingTabindex()}handleChildChange(e){let t=e.target,n=this.findGroupItem(t);if(!n)return;let r=this.items.indexOf(n);if(this.selectionMode===`single`&&this.isItemSelected(n))for(let e=0;e<this.items.length;e++)e!==r&&this.setItemSelected(this.items[e],!1);this.emitSelectionChange(n,r)}handleChildInput(e){}handleKeyDown(e){if(this.disabled)return;let t=this.orientation===`horizontal`,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;if(![n,r,`Home`,`End`].includes(e.key))return;let i=this.items.filter(e=>!this.isItemDisabled(e));if(i.length===0)return;let a=e.composedPath?.()[0]??e.target,o=this.findGroupItem(a),s=o?i.indexOf(o):0;e.preventDefault();let c;switch(e.key){case n:c=i[(s-1+i.length)%i.length];break;case r:c=i[(s+1)%i.length];break;case`Home`:c=i[0];break;case`End`:c=i[i.length-1]}if(c){c.focus();for(let e of this.items)e.tabIndex=e===c?0:-1}}findGroupItem(e){let t=e;for(;t&&t!==this;){if(this.items.includes(t))return t;t=t.parentElement}return null}isItemSelected(e){let t=e;return!!(t.checked??t.selected??e.hasAttribute(`checked`)??e.hasAttribute(`selected`))}setItemSelected(e,t){let n=e;n.checked!==void 0&&(n.checked=t),n.selected!==void 0&&(n.selected=t),t?(e.setAttribute(`checked`,``),e.setAttribute(`selected`,``)):(e.removeAttribute(`checked`),e.removeAttribute(`selected`))}isItemDisabled(e){return!!(e.disabled||e.hasAttribute(`disabled`)||this.disabled)}emitSelectionChange(e,t){let n=e.value??e.getAttribute(`value`)??void 0,r=this.isItemSelected(e),i=this.getSelectedItems(),a=this.getSelectedIndexes();this.dispatchEvent(new CustomEvent(f,{detail:{item:e,selected:r,index:t,value:n,selectedItems:i,selectedIndexes:a},bubbles:!0,composed:!0}))}};l([e({type:String,reflect:!0})],m.prototype,`variant`,void 0),l([e({type:String,attribute:`selection-mode`,reflect:!0})],m.prototype,`selectionMode`,void 0),l([e({type:String,reflect:!0})],m.prototype,`size`,void 0),l([e({type:String,reflect:!0})],m.prototype,`shape`,void 0),l([e({type:String,reflect:!0})],m.prototype,`orientation`,void 0),l([e({type:Boolean,attribute:`disable-morph`,reflect:!0})],m.prototype,`disableMorph`,void 0),l([e({type:Boolean,attribute:`expand-on-active`,reflect:!0})],m.prototype,`expandOnActive`,void 0),l([e({type:Boolean,reflect:!0})],m.prototype,`disabled`,void 0),l([n({flatten:!0})],m.prototype,`slottedElements`,void 0),l([t()],m.prototype,`items`,void 0);export{m as BaseButtonGroup};
//# sourceMappingURL=base-button-group.js.map