UNPKG

@sandlada/mdc

Version:

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

18 lines 3.19 kB
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}" @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"><slot @slotchange="${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