@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 4.12 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as u,b as g}from"./BVJFCLMH.js";import{a as d,b as p}from"./5RDOSP2E.js";import{v as m,z as i}from"./3ADX47DD.js";import{d as f}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as n,R as h,c,d as o,q as r}from"./BJZTU5BQ.js";var I=c`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`,a=class extends n{constructor(){super(),this.items=[],this.slotRefEl=d(),this.disabled=!1,this.scale="m",this.selectedItems=[],this.selectionMode="none",this.calciteChipGroupSelect=r({cancelable:!1}),this.listen("calciteInternalChipKeyEvent",this.calciteInternalChipKeyEventListener),this.listen("calciteChipClose",this.calciteChipCloseListener),this.listen("calciteChipSelect",this.calciteChipSelectListener),this.listen("calciteInternalChipSelect",this.calciteInternalChipSelectListener),this.listen("calciteInternalSyncSelectedChips",this.calciteInternalSyncSelectedChips)}static{this.properties={disabled:[7,{},{reflect:!0,type:Boolean}],label:1,scale:[3,{},{reflect:!0}],selectedItems:[0,{},{attribute:!1}],selectionMode:[3,{},{reflect:!0}]}}static{this.styles=I}async setFocus(){if(await f(this),!this.disabled)return(this.selectedItems[0]||this.items[0])?.setFocus()}willUpdate(e){e.has("selectionMode")&&(this.hasUpdated||this.selectionMode!=="none")&&this.updateItems()}updated(){u(this)}calciteInternalChipKeyEventListener(e){if(e.composedPath().includes(this.el)){let t=this.items?.filter(s=>!s.disabled);switch(e.detail.key){case"ArrowRight":i(t,e.detail.target,"next");break;case"ArrowLeft":i(t,e.detail.target,"previous");break;case"Home":i(t,e.detail.target,"first");break;case"End":i(t,e.detail.target,"last");break}}e.stopPropagation()}calciteChipCloseListener(e){let t=e.target;this.items?.includes(t)&&(this.items?.indexOf(t)>0?i(this.items,t,"previous"):this.items?.indexOf(t)===0?i(this.items,t,"next"):i(this.items,t,"first")),this.items=this.items?.filter(s=>s!==t),e.stopPropagation()}calciteChipSelectListener(e){e.composedPath().includes(this.el)&&this.setSelectedItems(!0,e.target),e.stopPropagation()}calciteInternalChipSelectListener(e){e.composedPath().includes(this.el)&&this.setSelectedItems(!1,e.target),e.stopPropagation()}calciteInternalSyncSelectedChips(e){e.composedPath().includes(this.el)&&(this.updateSelectedItems(),this.selectionMode==="single"&&this.selectedItems.length>1&&this.setSelectedItems(!1,e.target)),e.stopPropagation()}updateItems(e){let t=this.slotRefEl.value?.assignedElements({flatten:!0}).filter(s=>s?.matches("calcite-chip"));this.items=e?m(e):t,!(this.items?.length<1)&&(this.items?.forEach(s=>{s.interactive=!0,s.scale=this.scale,s.selectionMode=this.selectionMode,s.parentChipGroup=this.el}),this.setSelectedItems(!1))}updateSelectedItems(){this.selectedItems=this.items?.filter(e=>e.selected)}setSelectedItems(e,t){t&&this.items?.forEach(s=>{let l=t===s;switch(this.selectionMode){case"multiple":l&&(s.selected=!s.selected);break;case"single":s.selected=l?!s.selected:!1;break;case"single-persist":s.selected=!!l;break}}),this.updateSelectedItems(),e&&this.calciteChipGroupSelect.emit()}render(){let e=this.selectionMode==="none"||this.selectionMode==="multiple"?"group":"radiogroup",{disabled:t}=this;return g({disabled:t,children:o`<div .ariaLabel=${this.label} class="container" .role=${e}><slot =${this.updateItems} ${p(this.slotRefEl)}></slot></div>`})}};h("calcite-chip-group",a);export{a as ChipGroup};