@sandlada/mdc/build/components/chip/internal/base-chip-set.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{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{CHIP_SET_SELECTION_EVENT as c}from"../chip-set.interface.js";import{ChipSetStyles as l}from"./chip-set.style.js"
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Internal base class for `mdc-chip-set` — the container that owns roving
* tabindex and optional single-select coordination across its `mdc-chip`
* children.
*
* Chips are self-managing views: each chip owns its own `selected` state and
* reports activation through the `chip-toggle` event. The set enforces the
* single-select mutex, re-emits committed changes as a composed
* `chip-set-selection` event, and roves focus with Arrow keys / Home / End
* (mirroring the Material Web chip-set semantics).
*/
;var u=class extends a(s)(i){static{this.styles=l}get chips(){return this.cachedChips}constructor(){super(),this.singleSelect=!1,this.cachedChips=[],this.handleSlotChange=()=>{if(this.cachedChips=this.assignedChips,this.singleSelect){let e=!1;for(let t of this.cachedChips)t.selected&&(e?t.selected=!1:e=!0)}this.updateTabIndices()},this.handleFocusIn=()=>{this.updateTabIndices()},this.handleUpdateFocus=()=>{this.updateTabIndices()},this.handleChipToggle=e=>{let t=e.target,n=this.cachedChips.indexOf(t);if(n!==-1){if(this.singleSelect&&t.selected)for(let e of this.cachedChips)e!==t&&e.selected&&(e.selected=!1);this.emitSelectionEvent(t,n)}},this.handleKeydown=e=>{let t=this.cachedChips;if(t.length<2||!t.includes(e.target))return;let n=e.key===`ArrowLeft`,r=e.key===`ArrowRight`,i=e.key===`Home`,a=e.key===`End`;if(!n&&!r&&!i&&!a)return;e.preventDefault();let o=getComputedStyle(this).direction===`rtl`?n:r,s;if(i||a)s=this.findNextFocusableChip(i?0:t.length-1,i?1:-1);else{let e=t.findIndex(e=>e.matches(`:focus-within`));s=e===-1?this.findNextFocusableChip(o?0:t.length-1,o?1:-1):this.findNextFocusableChip(e+(o?1:-1),o?1:-1)}s&&(s.focus(),this.updateTabIndices())},this.addEventListener(`keydown`,this.handleKeydown),this.addEventListener(`focusin`,this.handleFocusIn),this.addEventListener(`update-focus`,this.handleUpdateFocus)}render(){let{ariaLabel:e}=this;return n`<span class="container" role="toolbar" aria-label="${e||r}" @chip-toggle="${this.handleChipToggle}"><slot @slotchange="${this.handleSlotChange}"></slot></span>`}findNextFocusableChip(e,t){let n=this.cachedChips;for(let r=0;r<n.length;r++){let i=e+r*t;i=(i%n.length+n.length)%n.length;let a=n[i];if(!a.disabled||a.alwaysFocusable)return a}}updateTabIndices(){let e=this.cachedChips;if(e.length===0)return;let t=e.find(e=>e.matches(`:focus-within`)),n=t!==void 0&&(t.alwaysFocusable||!t.disabled),r=e.find(e=>e.alwaysFocusable||!e.disabled),i=n?t:r;for(let t of e)t.chipTabIndex=t===i?0:-1}emitSelectionEvent(e,t){this.dispatchEvent(new CustomEvent(c,{detail:{chip:e,selected:e.selected,index:t},bubbles:!0,composed:!0}))}};o([e({type:Boolean,attribute:`single-select`,reflect:!0})],u.prototype,`singleSelect`,void 0),o([t({selector:`mdc-chip`,flatten:!0})],u.prototype,`assignedChips`,void 0);export{u as BaseChipSet};
//# sourceMappingURL=base-chip-set.js.map