@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-tree-view.js

@@ -1,377 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { S as Sortable } from './sortable.esm.js';
-import { t as treeViewDragDropConfig } from './swirl-tree-view.config.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlTreeViewCss = "swirl-tree-view{display:block}swirl-tree-view *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0 0 var(--s-space-4);flex-direction:column;gap:var(--s-space-2)}.tree-view--dragging{cursor:grabbing}.tree-view--dragging .tree-view-item__link:hover,.tree-view--dragging .tree-view-item__link:active{background-color:var(--s-background-default) !important}.tree-view--dragging .tree-view-item__link:hover .tree-view-item__drag-handle,.tree-view--dragging .tree-view-item__link:active .tree-view-item__drag-handle{opacity:0}";
-
-const defaultDragDropInstructions = {
-    cannotBeDropped: "Cannot drop here.",
-    end: "{itemLabel}, dropped. Parent item: {parentLabel}. Final position in list: {position} of {childrenCount}.",
-    initial: "Press space to move items.",
-    moved: "{itemLabel}. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}.",
-    start: "{itemLabel}, grabbed. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}. Press up and down arrow keys to change position, Space to drop.",
-};
-const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.dropItem = createEvent(this, "dropItem", 7);
-        this.itemExpansionChanged = createEvent(this, "itemExpansionChanged", 7);
-        this.dragDropInstructions = defaultDragDropInstructions;
-        this.dragDropItemSelector = "swirl-tree-view-item";
-        this.semantics = "tree";
-        this.liveRegionText = "";
-        this.onSlotChange = () => {
-            this.init();
-        };
-        this.onFocus = () => {
-            if (this.liveRegionText === "") {
-                this.updateLiveRegionText("initial");
-            }
-        };
-        this.onBlur = (event) => {
-            const newlyFocusedElement = event.relatedTarget;
-            if (this.el.contains(newlyFocusedElement)) {
-                return;
-            }
-            if (this.liveRegionText !== "") {
-                this.updateLiveRegionText();
-            }
-        };
-    }
-    componentDidLoad() {
-        if (Boolean(this.initiallyExpandedItemIds)) {
-            this.expandItems(this.initiallyExpandedItemIds);
-        }
-        this.init();
-        this.setUpDragDrop();
-    }
-    disconnectedCallback() {
-        this.sortable?.destroy();
-    }
-    handleEnableDragDropChange() {
-        this.setUpDragDrop();
-    }
-    async expandItems(itemIds) {
-        if (this.semantics !== "tree") {
-            return;
-        }
-        const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
-        items.forEach((item) => item.expand());
-    }
-    onItemDrop(event) {
-        event.stopPropagation();
-        this.dropItem.emit(event.detail);
-        // force update the new and old parent of the dropped item to reflect
-        // new hierarchy
-        if (event.detail.targetParentItemId) {
-            const newParentItem = this.el.querySelector(`
-        swirl-tree-view-item#${event.detail.targetParentItemId},
-        #${event.detail.targetParentItemId} > swirl-tree-view-item
-      `);
-            if (newParentItem) {
-                forceUpdate(newParentItem);
-                newParentItem.expand();
-            }
-        }
-        if (event.detail.sourceParentItemId) {
-            const oldParentItem = this.el.querySelector(`
-        swirl-tree-view-item#${event.detail.sourceParentItemId},
-        #${event.detail.sourceParentItemId} > swirl-tree-view-item
-      `);
-            if (oldParentItem) {
-                forceUpdate(oldParentItem);
-                oldParentItem.expand();
-            }
-        }
-    }
-    onKeyDown(event) {
-        if (this.semantics !== "tree") {
-            return;
-        }
-        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 target = event.target;
-        if (target?.tagName === "SWIRL-TREE-VIEW-ITEM") {
-            this.itemExpansionChanged.emit({
-                itemId: target.itemId,
-                expanded: event.detail,
-            });
-        }
-    }
-    onEndKeyboardMove(event) {
-        this.updateLiveRegionText("end", event.detail);
-    }
-    onStartKeyboardMove(event) {
-        this.updateLiveRegionText("start", event.detail);
-    }
-    onKeyboardMove(event) {
-        this.updateLiveRegionText("moved", event.detail);
-    }
-    init() {
-        if (this.semantics !== "tree") {
-            return;
-        }
-        const selectedItem = this.getSelectedItem();
-        const allItems = this.getItems();
-        allItems.forEach((item) => item.unselect());
-        if (Boolean(selectedItem)) {
-            selectedItem.select();
-        }
-        else {
-            allItems[0]?.select();
-        }
-    }
-    setUpDragDrop() {
-        if (this.sortable) {
-            this.sortable.destroy();
-            this.sortable = undefined;
-        }
-        if (this.enableDragDrop) {
-            this.sortable = new Sortable(this.listElement, {
-                ...treeViewDragDropConfig,
-                draggable: this.dragDropItemSelector,
-                onMove: (event) => {
-                    if (typeof this.canDrop === "function") {
-                        return this.canDrop({
-                            parentId: event.to.closest("swirl-tree-view-item")?.itemId,
-                            position: Math.max(Array.from(event.to.children).indexOf(event.related), 0) + 1,
-                        });
-                    }
-                    return true;
-                },
-                onStart: (event) => {
-                    treeViewDragDropConfig.onStart?.(event);
-                },
-                onEnd: (event) => {
-                    event.stopPropagation();
-                    treeViewDragDropConfig.onEnd?.(event);
-                    const { to, newIndex, oldIndex, item } = event;
-                    const sourceParentItemId = undefined;
-                    const targetParentItem = to.closest("swirl-tree-view-item");
-                    if (targetParentItem) {
-                        forceUpdate(targetParentItem);
-                        targetParentItem.expand();
-                    }
-                    this.dropItem.emit({
-                        newIndex,
-                        oldIndex,
-                        item,
-                        itemId: item.id ?? item.querySelector(":scope > swirl-tree-view-item").id,
-                        newNextSiblingItemId: newIndex < to.children.length - 1
-                            ? to.children[newIndex + 1].id
-                            : undefined,
-                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
-                        sourceParentItemId,
-                        targetParentItemId: targetParentItem?.itemId,
-                    });
-                },
-            });
-        }
-    }
-    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(':scope > li > [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(':scope > li > [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;
-    }
-    updateLiveRegionText(key, data) {
-        let newText = key ? this.dragDropInstructions[key] : "";
-        if (!data?.canDrop) {
-            newText += ` ${this.dragDropInstructions.cannotBeDropped}`;
-        }
-        for (const [key, value] of Object.entries(data ?? {})) {
-            newText = newText.replaceAll(`{${key}}`, String(value));
-        }
-        if (newText !== this.liveRegionText) {
-            this.liveRegionText = newText;
-        }
-    }
-    render() {
-        return (h(Host, { key: '7d3b3616aa8de41fb2a138dddb974e03b646f58d' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '661bc6cb9c5237c1de0dc78c5436d5e30d9d5d5e' }, h("span", { key: '153717a0f1990296dd954d0b716cef1631ea1f71', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '541bb6ac4b93157b5eba86f5e1112928dfdd6776', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '293d98f3dcd47026512532d672d132227e97899d', onSlotchange: this.onSlotChange }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "enableDragDrop": ["handleEnableDragDropChange"]
-    }; }
-    static get style() { return swirlTreeViewCss; }
-}, [4, "swirl-tree-view", {
-        "canDrop": [16, "can-drop"],
-        "dragDropInstructions": [16, "drag-drop-instructions"],
-        "dragDropItemSelector": [1, "drag-drop-item-selector"],
-        "enableDragDrop": [4, "enable-drag-drop"],
-        "initiallyExpandedItemIds": [16, "initially-expanded-item-ids"],
-        "label": [1],
-        "semantics": [1],
-        "liveRegionText": [32],
-        "expandItems": [64]
-    }, [[0, "dropTreeViewItem", "onItemDrop"], [0, "keydown", "onKeyDown"], [0, "itemSelected", "onItemSelected"], [0, "expandedChange", "onExpandedChange"], [0, "endKeyboardMove", "onEndKeyboardMove"], [0, "startKeyboardMove", "onStartKeyboardMove"], [0, "keyboardMove", "onKeyboardMove"]], {
-        "enableDragDrop": ["handleEnableDragDropChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tree-view", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tree-view":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTreeView$1);
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlTreeView = SwirlTreeView$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTreeView, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,forceUpdate as r,h as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{t as d}from"./swirl-tree-view.config.js";import{d as l}from"./swirl-visually-hidden2.js";const h={cannotBeDropped:"Cannot drop here.",end:"{itemLabel}, dropped. Parent item: {parentLabel}. Final position in list: {position} of {childrenCount}.",initial:"Press space to move items.",moved:"{itemLabel}. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}.",start:"{itemLabel}, grabbed. Parent item: {parentLabel}. Current position in list: {position} of {childrenCount}. Press up and down arrow keys to change position, Space to drop."},c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropItem=i(this,"dropItem",7),this.itemExpansionChanged=i(this,"itemExpansionChanged",7),this.dragDropInstructions=h,this.dragDropItemSelector="swirl-tree-view-item",this.semantics="tree",this.liveRegionText="",this.onSlotChange=()=>{this.init()},this.onFocus=()=>{""===this.liveRegionText&&this.updateLiveRegionText("initial")},this.onBlur=e=>{this.el.contains(e.relatedTarget)||""!==this.liveRegionText&&this.updateLiveRegionText()}}componentDidLoad(){this.initiallyExpandedItemIds&&this.expandItems(this.initiallyExpandedItemIds),this.init(),this.setUpDragDrop()}disconnectedCallback(){this.sortable?.destroy()}handleEnableDragDropChange(){this.setUpDragDrop()}async expandItems(e){"tree"===this.semantics&&this.getItems().filter((t=>e.includes(t.itemId))).forEach((e=>e.expand()))}onItemDrop(e){if(e.stopPropagation(),this.dropItem.emit(e.detail),e.detail.targetParentItemId){const t=this.el.querySelector(`\n        swirl-tree-view-item#${e.detail.targetParentItemId},\n        #${e.detail.targetParentItemId} > swirl-tree-view-item\n      `);t&&(r(t),t.expand())}if(e.detail.sourceParentItemId){const t=this.el.querySelector(`\n        swirl-tree-view-item#${e.detail.sourceParentItemId},\n        #${e.detail.sourceParentItemId} > swirl-tree-view-item\n      `);t&&(r(t),t.expand())}}onKeyDown(e){"tree"===this.semantics&&("ArrowDown"===e.key?(e.preventDefault(),this.selectNextItem()):"ArrowUp"===e.key?(e.preventDefault(),this.selectPreviousItem()):"ArrowRight"===e.key?(e.preventDefault(),this.expandSelectedItem()):"ArrowLeft"===e.key?(e.preventDefault(),this.collapseSelectedItem()):"Home"===e.key?(e.preventDefault(),this.selectFirstItem()):"End"===e.key&&(e.preventDefault(),this.selectLastItem()))}onItemSelected(e){this.getItems().forEach((t=>{t!==e.target&&t.unselect()}))}onExpandedChange(e){const t=e.target;"SWIRL-TREE-VIEW-ITEM"===t?.tagName&&this.itemExpansionChanged.emit({itemId:t.itemId,expanded:e.detail})}onEndKeyboardMove(e){this.updateLiveRegionText("end",e.detail)}onStartKeyboardMove(e){this.updateLiveRegionText("start",e.detail)}onKeyboardMove(e){this.updateLiveRegionText("moved",e.detail)}init(){if("tree"!==this.semantics)return;const e=this.getSelectedItem(),t=this.getItems();t.forEach((e=>e.unselect())),e?e.select():t[0]?.select()}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&(this.sortable=new a(this.listElement,{...d,draggable:this.dragDropItemSelector,onMove:e=>"function"!=typeof this.canDrop||this.canDrop({parentId:e.to.closest("swirl-tree-view-item")?.itemId,position:Math.max(Array.from(e.to.children).indexOf(e.related),0)+1}),onStart:e=>{d.onStart?.(e)},onEnd:e=>{e.stopPropagation(),d.onEnd?.(e);const{to:t,newIndex:i,oldIndex:s,item:n}=e,o=t.closest("swirl-tree-view-item");o&&(r(o),o.expand()),this.dropItem.emit({newIndex:i,oldIndex:s,item:n,itemId:n.id??n.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:i<t.children.length-1?t.children[i+1].id:void 0,newPrevSiblingItemId:i>0?t.children[i-1].id:void 0,sourceParentItemId:void 0,targetParentItemId:o?.itemId})}}))}selectFirstItem(){this.unselectAllItems(),this.getItems()[0]?.select(!0)}selectLastItem(){const e=this.getItems().filter((e=>e.parentElement.closest("swirl-tree-view-item")?.querySelector(':scope > li > [aria-expanded="true"]')||!e.parentElement.closest("swirl-tree-view-item"))).pop();this.unselectAllItems(),e?.select(!0)}expandSelectedItem(){const e=this.getSelectedItem();e&&(this.isItemExpanded(e)?this.selectNextItem():e.expand())}collapseSelectedItem(){const e=this.getSelectedItem();if(e)if(this.isItemExpanded(e))e.collapse();else{const t=e.parentElement.closest("swirl-tree-view-item");if(!t)return;this.unselectAllItems(),t.select(!0)}}selectNextItem(){const e=this.getSelectedItem(),t=this.isItemExpanded(e),i=this.getNextSibling(e);let r=e.parentElement.closest("swirl-tree-view-item"),s=this.getNextSibling(r);for(;r&&!s;)r=r?.parentElement.closest("swirl-tree-view-item, swirl-tree-view"),s=this.getNextSibling(r);const n=e.querySelector("swirl-tree-view-item"),o=t?n:i||s;o&&(this.unselectAllItems(),o.select?.(!0))}selectPreviousItem(){const e=this.getItems(),t=this.getSelectedItem(),i=this.getPreviousSibling(t);if(i?.querySelector(':scope > li > [aria-expanded="true"]')){let t=i?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item"),r=!!t?.querySelector(':scope > li > [aria-expanded="true"]');for(;r;)t=t?.querySelector(":scope > li > ul > swirl-tree-view-item:last-child, :scope > li > ul > *:last-child > swirl-tree-view-item"),r=!!t?.querySelector('[aria-expanded="true"]');return e.forEach((e=>e.unselect())),void t.select?.(!0)}const r=t.parentElement.closest("swirl-tree-view-item"),s=i||r;s&&(e.forEach((e=>e.unselect())),s.select?.(!0))}unselectAllItems(){this.getItems().forEach((e=>e.unselect()))}getItems(){return Array.from(this.el.querySelectorAll("swirl-tree-view-item"))}getSelectedItem(){return this.getItems().find((e=>"true"===e.querySelector("a")?.getAttribute("aria-selected")))}isItemExpanded(e){return!!e.querySelector(':scope > li > [aria-expanded="true"]')}getNextSibling(e){if("SWIRL-TREE-VIEW-ITEM"===e?.nextElementSibling?.tagName)return e.nextElementSibling;const t=e?.parentElement?.nextElementSibling?.querySelector("swirl-tree-view-item");return t??void 0}getPreviousSibling(e){if("SWIRL-TREE-VIEW-ITEM"===e?.previousElementSibling?.tagName)return e.previousElementSibling;const t=e?.parentElement?.previousElementSibling?.querySelector("swirl-tree-view-item");return t??void 0}updateLiveRegionText(e,t){let i=e?this.dragDropInstructions[e]:"";t?.canDrop||(i+=" "+this.dragDropInstructions.cannotBeDropped);for(const[e,r]of Object.entries(t??{}))i=i.replaceAll(`{${e}}`,r+"");i!==this.liveRegionText&&(this.liveRegionText=i)}render(){return s(n,{key:"7d3b3616aa8de41fb2a138dddb974e03b646f58d"},this.enableDragDrop&&s("swirl-visually-hidden",{key:"661bc6cb9c5237c1de0dc78c5436d5e30d9d5d5e"},s("span",{key:"153717a0f1990296dd954d0b716cef1631ea1f71","aria-live":"assertive"},this.liveRegionText)),s("ul",{key:"541bb6ac4b93157b5eba86f5e1112928dfdd6776","aria-label":this.label,class:"tree-view",onFocusin:this.onFocus,onFocusout:this.onBlur,role:"tree"===this.semantics?"tree":void 0,ref:e=>this.listElement=e,tabIndex:-1},s("slot",{key:"293d98f3dcd47026512532d672d132227e97899d",onSlotchange:this.onSlotChange})))}get el(){return this}static get watchers(){return{enableDragDrop:[{handleEnableDragDropChange:0}]}}static get style(){return"swirl-tree-view{display:block}swirl-tree-view *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0 0 var(--s-space-4);flex-direction:column;gap:var(--s-space-2)}.tree-view--dragging{cursor:grabbing}.tree-view--dragging .tree-view-item__link:hover,.tree-view--dragging .tree-view-item__link:active{background-color:var(--s-background-default) !important}.tree-view--dragging .tree-view-item__link:hover .tree-view-item__drag-handle,.tree-view--dragging .tree-view-item__link:active .tree-view-item__drag-handle{opacity:0}"}},[260,"swirl-tree-view",{canDrop:[16],dragDropInstructions:[16],dragDropItemSelector:[1,"drag-drop-item-selector"],enableDragDrop:[4,"enable-drag-drop"],initiallyExpandedItemIds:[16],label:[1],semantics:[1],liveRegionText:[32],expandItems:[64]},[[0,"dropTreeViewItem","onItemDrop"],[0,"keydown","onKeyDown"],[0,"itemSelected","onItemSelected"],[0,"expandedChange","onExpandedChange"],[0,"endKeyboardMove","onEndKeyboardMove"],[0,"startKeyboardMove","onStartKeyboardMove"],[0,"keyboardMove","onKeyboardMove"]],{enableDragDrop:[{handleEnableDragDropChange:0}]}]),w=c,m=function(){"undefined"!=typeof customElements&&["swirl-tree-view","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-tree-view":customElements.get(o(e))||customElements.define(o(e),c);break;case"swirl-visually-hidden":customElements.get(o(e))||l()}}))};export{w as SwirlTreeView,m as defineCustomElement}

package/dist/components/swirl-video-thumbnail.js

@@ -1,45 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlVideoThumbnailCss = ":host {\n  display: flex;\n  width: 100%;\n}\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n.video-thumbnail {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  container-type: inline-size;\n  container-name: video-thumbnail;\n}\n\n.video-thumbnail:after {\n    position: absolute;\n    background-color: rgba(0, 0, 0, 0.05);\n    content: \"\";\n    inset: 0;\n  }\n\n.video-thumbnail:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n.video-thumbnail:focus-visible {\n    outline-color: var(--s-focus-default);\n    outline-offset: var(--s-space-4);\n  }\n\n.video-thumbnail__image {\n  width: 100%;\n}\n\n.video-thumbnail__duration {\n  position: absolute;\n  bottom: var(--s-space-8);\n  left: var(--s-space-8);\n  padding: var(--s-space-2) var(--s-space-8);\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-on-image);\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.1);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  letter-spacing: var(--s-letter-spacing-tighter);\n}\n\n.video-thumbnail__play-icon {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  left: 50%;\n  width: 2.5rem;\n  height: 2.5rem;\n  transform: translate3d(-50%, -50%, 0);\n}\n\n@container video-thumbnail (min-width: 448px) {\n  .video-thumbnail__play-icon {\n    width: 3.5rem;\n    height: 4.5rem;\n  }\n}\n";
-
-const SwirlVideoThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class SwirlVideoThumbnail extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.durationLabel = "Duration";
-    }
-    render() {
-        return (h(Host, { key: '2723ab9658123c41381185704cfc31d685fb41e8' }, h("button", { key: '9549b1e7cf640b62e95ad98dfa8e7a9c0c39cef8', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e8a81ca23e5227a31b8cf1a4bc26f31a9d5199d5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '56e2a51f27294fa0db2165e984140e2266ad8206', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '1dbd9765915f7753e359499f44f3a8a435f473cf' }, this.durationLabel), this.duration)), h("svg", { key: '1a8b9b50af6a018e8189bb5c86d3bd3029e004fa', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fbeae1c95f401282312454254169cb4519c621ee', 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" })))));
-    }
-    static get style() { return swirlVideoThumbnailCss; }
-}, [1, "swirl-video-thumbnail", {
-        "durationLabel": [1, "duration-label"],
-        "duration": [1],
-        "label": [1],
-        "src": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-video-thumbnail", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-video-thumbnail":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlVideoThumbnail$1);
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlVideoThumbnail = SwirlVideoThumbnail$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlVideoThumbnail, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as e,h as t,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./swirl-visually-hidden2.js";const s=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.durationLabel="Duration"}render(){return t(a,{key:"2723ab9658123c41381185704cfc31d685fb41e8"},t("button",{key:"9549b1e7cf640b62e95ad98dfa8e7a9c0c39cef8","aria-describedby":void 0!==this.duration?"duration":void 0,"aria-label":this.label,class:"video-thumbnail",type:"button"},t("img",{key:"e8a81ca23e5227a31b8cf1a4bc26f31a9d5199d5",alt:"",class:"video-thumbnail__image",loading:"lazy",src:this.src}),this.duration&&t("span",{key:"56e2a51f27294fa0db2165e984140e2266ad8206",class:"video-thumbnail__duration",id:"duration"},t("swirl-visually-hidden",{key:"1dbd9765915f7753e359499f44f3a8a435f473cf"},this.durationLabel),this.duration),t("svg",{key:"1a8b9b50af6a018e8189bb5c86d3bd3029e004fa",class:"video-thumbnail__play-icon",fill:"none",viewBox:"0 0 40 40",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"fbeae1c95f401282312454254169cb4519c621ee",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"}))))}static get style(){return':host{display:flex;width:100%}:host *{box-sizing:border-box}.video-thumbnail{position:relative;display:inline-flex;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;container-type:inline-size;container-name:video-thumbnail}.video-thumbnail:after{position:absolute;background-color:rgba(0, 0, 0, 0.05);content:"";inset:0}.video-thumbnail:focus:not(:focus-visible){outline:none}.video-thumbnail:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.video-thumbnail__image{width:100%}.video-thumbnail__duration{position:absolute;bottom:var(--s-space-8);left:var(--s-space-8);padding:var(--s-space-2) var(--s-space-8);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),     rgba(255, 255, 255, 0.1);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}.video-thumbnail__play-icon{position:absolute;z-index:1;top:50%;left:50%;width:2.5rem;height:2.5rem;transform:translate3d(-50%, -50%, 0)}@container video-thumbnail (min-width: 448px){.video-thumbnail__play-icon{width:3.5rem;height:4.5rem}}'}},[1,"swirl-video-thumbnail",{durationLabel:[1,"duration-label"],duration:[1],label:[1],src:[1]}]),r=s,l=function(){"undefined"!=typeof customElements&&["swirl-video-thumbnail","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-video-thumbnail":customElements.get(n(i))||customElements.define(n(i),s);break;case"swirl-visually-hidden":customElements.get(n(i))||o()}}))};export{r as SwirlVideoThumbnail,l as defineCustomElement}

package/dist/components/swirl-visually-hidden.js

@@ -1,6 +1 @@
-import { S as SwirlVisuallyHidden$1, d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
-
-const SwirlVisuallyHidden = SwirlVisuallyHidden$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlVisuallyHidden, defineCustomElement };
+import{S as s,d as i}from"./swirl-visually-hidden2.js";const o=s,r=i;export{o as SwirlVisuallyHidden,r as defineCustomElement}

package/dist/components/swirl-visually-hidden2.js

@@ -1,29 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const swirlVisuallyHiddenCss = ".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}";
-
-const SwirlVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class SwirlVisuallyHidden extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-    }
-    render() {
-        return (h(Host, { key: 'b854431ec1e7f8a9788f6dc84a09334a204be135' }, h("slot", { key: '56212ea4f12d8f865b72f8555aacd3b516dfe89a' })));
-    }
-    static get style() { return swirlVisuallyHiddenCss; }
-}, [6, "swirl-visually-hidden"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlVisuallyHidden);
-            }
-            break;
-    } });
-}
-
-export { SwirlVisuallyHidden as S, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as i,h as s,Host as t,transformTag as n}from"@stencil/core/internal/client";const l=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return s(t,{key:"b854431ec1e7f8a9788f6dc84a09334a204be135"},s("slot",{key:"56212ea4f12d8f865b72f8555aacd3b516dfe89a"}))}static get style(){return".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}"}},[262,"swirl-visually-hidden"]);function r(){"undefined"!=typeof customElements&&["swirl-visually-hidden"].forEach((e=>{"swirl-visually-hidden"===e&&(customElements.get(n(e))||customElements.define(n(e),l))}))}export{l as S,r as d}