UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

5 lines (4 loc) 3.19 kB
/*! 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 f}from"./BVJFCLMH.js";import{a as h,b as m}from"./5RDOSP2E.js";import{l as p,z as i}from"./3ADX47DD.js";import"./NNVH7JUI.js";import{E as r,R as n,c,d,q as o}from"./BJZTU5BQ.js";var b=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:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-md)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`,l=class extends r{constructor(){super(),this.items=[],this.slotRefEl=h(),this.disabled=!1,this.selectedItems=[],this.selectionMode="none",this.calciteCardGroupSelect=o({cancelable:!1}),this.listen("calciteInternalCardKeyEvent",this.calciteInternalCardKeyEventListener),this.listen("calciteCardSelect",this.calciteCardSelectListener)}static{this.properties={disabled:[7,{},{reflect:!0,type:Boolean}],label:1,selectedItems:[0,{},{attribute:!1}],selectionMode:[3,{},{reflect:!0}]}}static{this.styles=b}async setFocus(){await this.componentOnReady(),this.disabled||p(this.items[0])}willUpdate(e){e.has("selectionMode")&&this.hasUpdated&&this.updateItemsOnSelectionModeChange()}updated(){u(this)}loaded(){this.updateSelectedItems()}calciteInternalCardKeyEventListener(e){if(e.composedPath().includes(this.el)){let s=this.items.filter(t=>!t.disabled);switch(e.detail.key){case"ArrowRight":i(s,e.target,"next");break;case"ArrowLeft":i(s,e.target,"previous");break;case"Home":i(s,e.target,"first");break;case"End":i(s,e.target,"last");break}}}calciteCardSelectListener(e){e.composedPath().includes(this.el)&&!e.target.selectable&&this.setSelectedItems(!0,e.target)}updateItemsOnSelectionModeChange(){this.updateSlottedItems(this.slotRefEl.value),this.updateSelectedItems()}updateItemsOnSlotChange(e){this.updateSlottedItems(e.target),this.updateSelectedItems()}updateSlottedItems(e){this.items=e.assignedElements({flatten:!0}).filter(s=>s?.matches("calcite-card"))}updateSelectedItems(){this.items.forEach(e=>{e.selectionMode=this.selectionMode}),this.setSelectedItems(!1)}setSelectedItems(e,s){s&&this.items.forEach(t=>{let a=s===t;switch(this.selectionMode){case"multiple":a&&(t.selected=!t.selected);break;case"single":t.selected=a?!t.selected:!1;break;case"single-persist":t.selected=!!a;break}}),this.selectedItems=this.items.filter(t=>t.selected),e&&this.selectionMode!=="none"&&!this.disabled&&this.calciteCardGroupSelect.emit()}render(){let e=this.selectionMode==="none"||this.selectionMode==="multiple"?"group":"radiogroup";return f({disabled:this.disabled,children:d`<div .ariaLabel=${this.label} class="container" .role=${e}><slot @slotchange=${this.updateItemsOnSlotChange} ${m(this.slotRefEl)}></slot></div>`})}};n("calcite-card-group",l);export{l as CardGroup};