@tet/tet-components 1.4.30-testing → 1.4.31-staging

package/dist/components/tet-snicker-card-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TetSnickerCardGroup extends Components.TetSnickerCardGroup, HTMLElement {}
+export const TetSnickerCardGroup: {
+    prototype: TetSnickerCardGroup;
+    new (): TetSnickerCardGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tet-snicker-card-group.js

@@ -0,0 +1,194 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-aa122c92.js';
+
+const tetSnickerCardGroupCss = ":host{display:block}";
+const TetSnickerCardGroupStyle0 = tetSnickerCardGroupCss;
+
+const isSnickerCardState = (value) => (value === 'default'
+    || value === 'selected'
+    || value === 'disabled'
+    || value === 'unavailable'
+    || value === 'subscribed');
+const TetSnickerCardGroup$1 = /*@__PURE__*/ proxyCustomElement(class TetSnickerCardGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.groupSelectionChange = createEvent(this, "groupSelectionChange", 7);
+        this.selectionType = 'radio';
+    }
+    get hostElement() { return this; }
+    /** Emitted when group selection changes. */
+    groupSelectionChange;
+    selectedIndex;
+    selectedIndexes = new Set();
+    onSelectionTypeChanged() {
+        if (this.selectionType === 'radio') {
+            const firstSelectedEntry = this.selectedIndexes.values().next();
+            const firstSelected = firstSelectedEntry.done ? undefined : firstSelectedEntry.value;
+            this.selectedIndex = firstSelected;
+            this.selectedIndexes = firstSelected === undefined ? new Set() : new Set([firstSelected]);
+        }
+        this.applySelectionToChildren();
+        this.emitSelectionChange();
+    }
+    componentDidLoad() {
+        this.syncSelectionFromChildren();
+        this.applySelectionToChildren();
+    }
+    getCards = () => (Array.from(this.hostElement.querySelectorAll('tet-snicker-card')));
+    isCardBlocked = (card) => (this.isCardStateBlocked(this.getCardState(card)));
+    getCardState = (card) => {
+        const stateValue = card.state;
+        return isSnickerCardState(stateValue) ? stateValue : 'default';
+    };
+    isCardStateBlocked = (state) => (state === 'disabled' || state === 'unavailable' || state === 'subscribed');
+    syncSelectionFromChildren = () => {
+        const cards = this.getCards();
+        if (this.selectionType === 'radio') {
+            const selected = cards.findIndex((card) => this.getCardState(card) === 'selected' && !this.isCardBlocked(card));
+            this.selectedIndex = selected >= 0 ? selected : undefined;
+            this.selectedIndexes = selected >= 0 ? new Set([selected]) : new Set();
+            return;
+        }
+        const indexes = cards
+            .map((card, index) => (this.getCardState(card) === 'selected' && !this.isCardBlocked(card) ? index : -1))
+            .filter((index) => index >= 0);
+        this.selectedIndexes = new Set(indexes);
+        this.selectedIndex = indexes[0];
+    };
+    applySelectionToChildren = () => {
+        const cards = this.getCards();
+        const enabledIndexes = cards
+            .map((card, index) => (this.isCardBlocked(card) ? -1 : index))
+            .filter((index) => index >= 0);
+        const selectedEnabledIndex = this.selectedIndex !== undefined && enabledIndexes.includes(this.selectedIndex)
+            ? this.selectedIndex
+            : undefined;
+        const radioTabStopIndex = selectedEnabledIndex ?? enabledIndexes[0];
+        cards.forEach((card, index) => {
+            card.selectionType = this.selectionType;
+            card.isTabStop = this.selectionType === 'radio'
+                ? index === radioTabStopIndex
+                : !this.isCardBlocked(card);
+        });
+    };
+    getCardIndexFromEvent = (event) => {
+        const cards = this.getCards();
+        const isSnickerCardElement = (entry) => (entry instanceof H && entry.tagName === 'TET-SNICKER-CARD');
+        const cardFromPath = event.composedPath().find(isSnickerCardElement);
+        if (!cardFromPath) {
+            return -1;
+        }
+        return cards.indexOf(cardFromPath);
+    };
+    emitSelectionChange = () => {
+        const selectedIndexes = Array.from(this.selectedIndexes).sort((a, b) => a - b);
+        this.groupSelectionChange.emit({
+            selectionType: this.selectionType,
+            selectedIndexes
+        });
+    };
+    focusCard = async (card) => {
+        if (!card) {
+            return;
+        }
+        await card.focusSelectionTarget();
+        const fallbackFocusable = card.shadowRoot?.querySelector('.header__top-left');
+        fallbackFocusable?.focus();
+    };
+    handleCardClick = (event) => {
+        const cards = this.getCards();
+        const index = this.getCardIndexFromEvent(event);
+        if (index < 0 || this.isCardBlocked(cards[index])) {
+            return;
+        }
+        if (this.selectionType === 'radio') {
+            this.selectedIndex = index;
+            this.selectedIndexes = new Set([index]);
+        }
+        else if (this.selectedIndexes.has(index)) {
+            this.selectedIndexes.delete(index);
+        }
+        else {
+            this.selectedIndexes.add(index);
+        }
+        this.applySelectionToChildren();
+        this.emitSelectionChange();
+    };
+    handleKeyDown = (event) => {
+        const key = event.key;
+        const isArrowKey = key === 'ArrowRight' || key === 'ArrowLeft' || key === 'ArrowUp' || key === 'ArrowDown';
+        const isHomeOrEnd = key === 'Home' || key === 'End';
+        if (!isArrowKey && !isHomeOrEnd) {
+            return;
+        }
+        const cards = this.getCards();
+        const enabledIndexes = cards
+            .map((card, index) => (this.isCardBlocked(card) ? -1 : index))
+            .filter((index) => index >= 0);
+        if (enabledIndexes.length === 0) {
+            return;
+        }
+        const currentIndex = this.getCardIndexFromEvent(event);
+        const currentEnabledPosition = enabledIndexes.indexOf(currentIndex);
+        let nextEnabledPosition = currentEnabledPosition;
+        if (key === 'Home') {
+            nextEnabledPosition = 0;
+        }
+        else if (key === 'End') {
+            nextEnabledPosition = enabledIndexes.length - 1;
+        }
+        else if (key === 'ArrowRight' || key === 'ArrowDown') {
+            nextEnabledPosition = currentEnabledPosition >= 0
+                ? (currentEnabledPosition + 1) % enabledIndexes.length
+                : 0;
+        }
+        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+            nextEnabledPosition = currentEnabledPosition >= 0
+                ? (currentEnabledPosition - 1 + enabledIndexes.length) % enabledIndexes.length
+                : enabledIndexes.length - 1;
+        }
+        const nextIndex = enabledIndexes[nextEnabledPosition];
+        event.preventDefault();
+        void this.focusCard(cards[nextIndex]);
+        if (this.selectionType === 'radio') {
+            this.selectedIndex = nextIndex;
+            this.selectedIndexes = new Set([nextIndex]);
+            this.applySelectionToChildren();
+            this.emitSelectionChange();
+        }
+    };
+    handleSlotChange = () => {
+        this.syncSelectionFromChildren();
+        this.applySelectionToChildren();
+    };
+    render() {
+        return (h(Host, { key: 'f7a1d5411aace7f38cb20d074c9ec7da558123c2', role: this.selectionType === 'radio' ? 'radiogroup' : 'group', onCardClick: this.handleCardClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '63621008e40e7d6ac89cdf1d238ac7a904960b72', onSlotchange: this.handleSlotChange })));
+    }
+    static get watchers() { return {
+        "selectionType": ["onSelectionTypeChanged"]
+    }; }
+    static get style() { return TetSnickerCardGroupStyle0; }
+}, [1, "tet-snicker-card-group", {
+        "selectionType": [1, "selection-type"]
+    }, undefined, {
+        "selectionType": ["onSelectionTypeChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tet-snicker-card-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tet-snicker-card-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TetSnickerCardGroup$1);
+            }
+            break;
+    } });
+}
+
+const TetSnickerCardGroup = TetSnickerCardGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TetSnickerCardGroup, defineCustomElement };

package/dist/components/tet-snicker-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TetSnickerCard extends Components.TetSnickerCard, HTMLElement {}
+export const TetSnickerCard: {
+    prototype: TetSnickerCard;
+    new (): TetSnickerCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;