@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
18 lines • 3.19 kB
JavaScript
import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{queryAssignedElements as t}from"../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import"../../../node_modules/lit/decorators.js";import{html as n,nothing as r}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as i}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{composeMixin as a}from"../../../utils/compose-mixin/compose-mixin.js";import o from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as s}from"../../../utils/aria/delegate.js";import{SEGMENTED_BUTTON_SET_SELECTION_EVENT as c}from"../segmented-button.interface.js";import{SegmentedButtonSetStyles as l}from"./segmented-button-set.style.js"
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Internal base class for `mdc-segmented-button-set` — the container that owns
* selection across its `mdc-segmented-button` children.
*
* Segments are pure views: they report activation through the
* `segmented-button-interaction` event and the set decides whether the
* selection commits, mirroring the Material Web segmented-button-set
* semantics and the Flutter `SegmentedButton` API shape. The set re-emits
* committed changes as a composed `segmented-button-set-selection` event.
*/
;var u=class extends a(s)(i){constructor(...e){super(...e),this.multiselect=!1,this.buttons=[],this.handleSegmentedButtonInteraction=e=>{let t=this.buttons.indexOf(e.target);this.toggleSelection(t)},this.handleSlotChange=()=>{if(this.buttons=this.assignedButtons,!this.multiselect){let e=!1;for(let t of this.buttons)t.selected&&(e?t.selected=!1:e=!0)}}}static{this.styles=l}getButtonDisabled(e){return!this.indexOutOfBounds(e)&&this.buttons[e].disabled}setButtonDisabled(e,t){this.indexOutOfBounds(e)||(this.buttons[e].disabled=t)}getButtonSelected(e){return!this.indexOutOfBounds(e)&&this.buttons[e].selected}setButtonSelected(e,t){if(this.indexOutOfBounds(e)||this.getButtonDisabled(e))return;let n=this.buttons[e];if(this.multiselect){if(n.selected===t)return;n.selected=t,this.emitSelectionEvent(e);return}if(!(!t||n.selected)){n.selected=!0;for(let t=0;t<this.buttons.length;t++)t!==e&&(this.buttons[t].selected=!1);this.emitSelectionEvent(e)}}toggleSelection(e){this.indexOutOfBounds(e)||this.setButtonSelected(e,!this.buttons[e].selected)}render(){let{ariaLabel:e}=this;return n`<span class="container" role="group" aria-label="${e||r}" -button-interaction="${this.handleSegmentedButtonInteraction}"><slot ="${this.handleSlotChange}"></slot></span>`}emitSelectionEvent(e){let t=this.buttons[e];this.dispatchEvent(new CustomEvent(c,{detail:{button:t,selected:t.selected,index:e},bubbles:!0,composed:!0}))}indexOutOfBounds(e){return e<0||e>=this.buttons.length}};o([e({type:Boolean,reflect:!0})],u.prototype,`multiselect`,void 0),o([t({selector:`mdc-segmented-button`,flatten:!0})],u.prototype,`assignedButtons`,void 0);export{u as BaseSegmentedButtonSet};
//# sourceMappingURL=base-segmented-button-set.js.map