@getflip/swirl-components 0.230.1 → 0.233.0

package/dist/cjs/swirl-tree-view.cjs.entry.js

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6aba64ed.js');
+
+const swirlTreeViewCss = ":host{display:block}:host *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0;flex-direction:column;gap:var(--s-space-2)}";
+const SwirlTreeViewStyle0 = swirlTreeViewCss;
+
+const SwirlTreeView = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expandedItemsChanged = index.createEvent(this, "expandedItemsChanged", 7);
+        this.onSlotChange = () => {
+            this.init();
+        };
+        this.initiallyExpandedItemIds = undefined;
+        this.label = undefined;
+    }
+    componentDidLoad() {
+        if (Boolean(this.initiallyExpandedItemIds)) {
+            this.expandItems(this.initiallyExpandedItemIds);
+        }
+        this.init();
+    }
+    async expandItems(itemIds) {
+        const items = this.getItems().filter((item) => itemIds.includes(item.id));
+        items.forEach((item) => item.expand());
+    }
+    onKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            this.selectNextItem();
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            this.selectPreviousItem();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            this.expandSelectedItem();
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.collapseSelectedItem();
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            this.selectFirstItem();
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.selectLastItem();
+        }
+    }
+    onItemSelected(event) {
+        this.getItems().forEach((item) => {
+            if (item !== event.target) {
+                item.unselect();
+            }
+        });
+    }
+    onExpandedChange(event) {
+        const expandedItemIds = this.getItems()
+            .filter((item) => this.isItemExpanded(item))
+            .map((item) => item.id);
+        const changedItemGotExpanded = !Boolean(event.target.querySelector(':scope > li > [aria-expanded="true"]'));
+        if (changedItemGotExpanded) {
+            expandedItemIds.push(event.target.id);
+        }
+        else {
+            expandedItemIds.splice(expandedItemIds.indexOf(event.target.id), 1);
+        }
+        this.expandedItemsChanged.emit(expandedItemIds);
+    }
+    init() {
+        const selectedItem = this.getSelectedItem();
+        const allItems = this.getItems();
+        allItems.forEach((item) => item.unselect());
+        if (Boolean(selectedItem)) {
+            selectedItem.select();
+        }
+        else {
+            allItems[0]?.select();
+        }
+    }
+    selectFirstItem() {
+        this.unselectAllItems();
+        this.getItems()[0]?.select(true);
+    }
+    selectLastItem() {
+        const allItems = this.getItems();
+        const lastVisibleItem = allItems
+            .filter((item) => item.parentElement
+            .closest("swirl-tree-view-item")
+            ?.querySelector(':scope > li > [aria-expanded="true"]') ||
+            !Boolean(item.parentElement.closest("swirl-tree-view-item")))
+            .pop();
+        this.unselectAllItems();
+        lastVisibleItem?.select(true);
+    }
+    expandSelectedItem() {
+        const selectedItem = this.getSelectedItem();
+        if (!Boolean(selectedItem)) {
+            return;
+        }
+        const isExpanded = this.isItemExpanded(selectedItem);
+        if (isExpanded) {
+            this.selectNextItem();
+        }
+        else {
+            selectedItem.expand();
+        }
+    }
+    collapseSelectedItem() {
+        const selectedItem = this.getSelectedItem();
+        if (!Boolean(selectedItem)) {
+            return;
+        }
+        const isExpanded = this.isItemExpanded(selectedItem);
+        if (isExpanded) {
+            selectedItem.collapse();
+        }
+        else {
+            const parent = selectedItem.parentElement.closest("swirl-tree-view-item");
+            if (!Boolean(parent)) {
+                return;
+            }
+            this.unselectAllItems();
+            parent.select(true);
+        }
+    }
+    selectNextItem() {
+        const selectedItem = this.getSelectedItem();
+        const selectedItemExpanded = this.isItemExpanded(selectedItem);
+        const nextSibling = this.getNextSibling(selectedItem);
+        let parent = selectedItem.parentElement.closest("swirl-tree-view-item");
+        let nextSiblingOfParent = this.getNextSibling(parent);
+        while (Boolean(parent) && !Boolean(nextSiblingOfParent)) {
+            parent = parent?.parentElement.closest("swirl-tree-view-item, swirl-tree-view");
+            nextSiblingOfParent = this.getNextSibling(parent);
+        }
+        const firstChild = selectedItem.querySelector("swirl-tree-view-item");
+        const nextItem = selectedItemExpanded
+            ? firstChild
+            : nextSibling || nextSiblingOfParent;
+        if (!Boolean(nextItem)) {
+            return;
+        }
+        this.unselectAllItems();
+        nextItem.select?.(true);
+    }
+    selectPreviousItem() {
+        const allItems = this.getItems();
+        const selectedItem = this.getSelectedItem();
+        const previousSibling = this.getPreviousSibling(selectedItem);
+        const previousSiblingExpanded = Boolean(previousSibling?.querySelector('[aria-expanded="true"]'));
+        // find the last child of the nested previous sibling
+        if (previousSiblingExpanded) {
+            let lastChildOfNestedPreviousSibling = previousSibling?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item");
+            let lastChildOfNestedPreviousSiblingExpanded = Boolean(lastChildOfNestedPreviousSibling?.querySelector('[aria-expanded="true"]'));
+            while (lastChildOfNestedPreviousSiblingExpanded) {
+                lastChildOfNestedPreviousSibling =
+                    lastChildOfNestedPreviousSibling?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item");
+                lastChildOfNestedPreviousSiblingExpanded = Boolean(lastChildOfNestedPreviousSibling?.querySelector('[aria-expanded="true"]'));
+            }
+            allItems.forEach((item) => item.unselect());
+            lastChildOfNestedPreviousSibling.select?.(true);
+            return;
+        }
+        const parent = selectedItem.parentElement.closest("swirl-tree-view-item");
+        const previousItem = previousSibling || parent;
+        if (!Boolean(previousItem)) {
+            return;
+        }
+        allItems.forEach((item) => item.unselect());
+        previousItem.select?.(true);
+    }
+    unselectAllItems() {
+        this.getItems().forEach((item) => item.unselect());
+    }
+    getItems() {
+        return Array.from(this.el.querySelectorAll("swirl-tree-view-item"));
+    }
+    getSelectedItem() {
+        return this.getItems().find((item) => item.querySelector("a")?.getAttribute("aria-selected") === "true");
+    }
+    isItemExpanded(item) {
+        return Boolean(item.querySelector(':scope > li > [aria-expanded="true"]'));
+    }
+    getNextSibling(item) {
+        if (item?.nextElementSibling?.tagName === "SWIRL-TREE-VIEW-ITEM") {
+            return item.nextElementSibling;
+        }
+        const nestedSibling = item?.parentElement?.nextElementSibling?.querySelector("swirl-tree-view-item");
+        return nestedSibling ?? undefined;
+    }
+    getPreviousSibling(item) {
+        if (item?.previousElementSibling?.tagName === "SWIRL-TREE-VIEW-ITEM") {
+            return item.previousElementSibling;
+        }
+        const nestedSibling = item?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");
+        return nestedSibling ?? undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '339267c7110db49dfa92d4e36ea7359666969819' }, index.h("ul", { key: '730cceb516e83f1ef72c8552fc26a510d225f069', "aria-label": this.label, class: "tree-view", role: "tree" }, index.h("slot", { key: 'dcde56962d621cfc40a170b80f9b8137809bf59e', onSlotchange: this.onSlotChange }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlTreeView.style = SwirlTreeViewStyle0;
+
+exports.swirl_tree_view = SwirlTreeView;

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js

@@ -16,7 +16,7 @@ const SwirlVideoThumbnail = class {
         this.src = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '5bd9a490f2c97390886321c280a2988a4ef698d0' }, index.h("button", { key: '8364b72dcbfc56d66fd2e7cbd30c8579b64e3e7e', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '9007cc6e6dbd634e93fe995b19f559eacd00574a', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '31cd361f021f5863e0143ccee2cb6ae72d6ac213', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'd517d30b34ecbcaf255e6c335e663bebeac93df2' }, this.durationLabel), this.duration)), index.h("svg", { key: '45028d168793277f212e86c887879ca50d7f1b69', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'c7675ecd1bca43fad3ae2bd6ac3e4198ef0ec2b0', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (index.h(index.Host, { key: '684edd972d557cc5802faf12d68a39c840d34031' }, index.h("button", { key: '65eb5646d91cd405b87c932b92b00365501c4974', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '08cfb230f06c5ff59e66a0a0889dfc42ebfa7173', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '47e734e3eb8502484ff75b70b40bc898e86a5d0b', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '072d38dae3171d13d3f3659a56bd81c68ca857db' }, this.durationLabel), this.duration)), index.h("svg", { key: 'b2101678bd8ff47ccc11cb807d863599129ff018', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '7d4ad04198b7c65616acd6e89288cc51baa5c99c', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
 };
 SwirlVideoThumbnail.style = SwirlVideoThumbnailStyle0;

package/dist/cjs/swirl-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9b198c65730026a5e11513ff742104234ff0c1a7' }, index.h("slot", { key: '9873becced8ea85ffccdfc032163bbbe53df8fc6' })));
+        return (index.h(index.Host, { key: '85adc71e753de16a93f0110be0b49a9eb8be1ea6' }, index.h("slot", { key: '491582dfecab0bcf9dbb4821d346db75b9e2f8ca' })));
     }
 };
 SwirlVisuallyHidden.style = SwirlVisuallyHiddenStyle0;