UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

121 lines (120 loc) 4.76 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 { c as customElement } from "../../chunks/runtime.js"; import { html } from "lit"; import { createRef, ref } from "lit-html/directives/ref.js"; import { LitElement, createEvent } from "@arcgis/lumina"; import { b as focusElement, d as focusElementInGroup } from "../../chunks/dom.js"; import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js"; import { css } from "@lit/reactive-element/css-tag.js"; const styles = css`: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}`; class CardGroup extends LitElement { constructor() { super(); this.items = []; this.slotRefEl = createRef(); this.disabled = false; this.selectedItems = []; this.selectionMode = "none"; this.calciteCardGroupSelect = createEvent({ cancelable: false }); this.listen("calciteInternalCardKeyEvent", this.calciteInternalCardKeyEventListener); this.listen("calciteCardSelect", this.calciteCardSelectListener); } static { this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, selectedItems: [0, {}, { attribute: false }], selectionMode: [3, {}, { reflect: true }] }; } static { this.styles = styles; } async setFocus() { await this.componentOnReady(); if (!this.disabled) { focusElement(this.items[0]); } } willUpdate(changes) { if (changes.has("selectionMode") && this.hasUpdated) { this.updateItemsOnSelectionModeChange(); } } updated() { updateHostInteraction(this); } loaded() { this.updateSelectedItems(); } calciteInternalCardKeyEventListener(event) { if (event.composedPath().includes(this.el)) { const interactiveItems = this.items.filter((el) => !el.disabled); switch (event.detail["key"]) { case "ArrowRight": focusElementInGroup(interactiveItems, event.target, "next"); break; case "ArrowLeft": focusElementInGroup(interactiveItems, event.target, "previous"); break; case "Home": focusElementInGroup(interactiveItems, event.target, "first"); break; case "End": focusElementInGroup(interactiveItems, event.target, "last"); break; } } } calciteCardSelectListener(event) { if (event.composedPath().includes(this.el) && !event.target.selectable) { this.setSelectedItems(true, event.target); } } updateItemsOnSelectionModeChange() { this.updateSlottedItems(this.slotRefEl.value); this.updateSelectedItems(); } updateItemsOnSlotChange(event) { this.updateSlottedItems(event.target); this.updateSelectedItems(); } updateSlottedItems(target) { this.items = target.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-card")); } updateSelectedItems() { this.items.forEach((el) => { el.selectionMode = this.selectionMode; }); this.setSelectedItems(false); } setSelectedItems(emit, elToMatch) { if (elToMatch) { this.items.forEach((el) => { const matchingEl = elToMatch === el; switch (this.selectionMode) { case "multiple": if (matchingEl) { el.selected = !el.selected; } break; case "single": el.selected = matchingEl ? !el.selected : false; break; case "single-persist": el.selected = !!matchingEl; break; } }); } this.selectedItems = this.items.filter((el) => el.selected); if (emit && this.selectionMode !== "none" && !this.disabled) { this.calciteCardGroupSelect.emit(); } } render() { const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup"; return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} class="container" .role=${role}><slot @slotchange=${this.updateItemsOnSlotChange} ${ref(this.slotRefEl)}></slot></div>` }); } } customElement("calcite-card-group", CardGroup); export { CardGroup };