@getflip/swirl-components 0.452.1 → 0.453.0

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

@@ -1,416 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { S as Sortable } from './sortable.esm.js';
-import { t as treeViewDragDropConfig } from './swirl-tree-view.config.js';
-import { d as defineCustomElement$5 } from './swirl-icon2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-chevron-right2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-drag-handle2.js';
-import { d as defineCustomElement$2 } from './swirl-icon-expand-more2.js';
-
-const swirlTreeViewItemCss = "swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-background-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-background-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-background-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}";
-
-const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeViewItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.dropTreeViewItem = createEvent(this, "dropTreeViewItem", 7);
-        this.expandedChange = createEvent(this, "expandedChange", 7);
-        this.itemSelected = createEvent(this, "itemSelected", 7);
-        this.startKeyboardMoveEvent = createEvent(this, "startKeyboardMove", 7);
-        this.endKeyboardMoveEvent = createEvent(this, "endKeyboardMove", 7);
-        this.keyboardMoveEvent = createEvent(this, "keyboardMove", 7);
-        this.expandable = true;
-        this.cannotKeyboardDropInCurrentPosition = false;
-        this.dragDropItemSelector = "swirl-tree-view-item";
-        this.enableDragDrop = false;
-        this.expanded = false;
-        this.level = 0;
-        this.movingViaKeyboard = false;
-        this.selected = false;
-        this.onFocus = () => {
-            if (!this.selected && this.getSemantics() === "tree") {
-                this.select();
-            }
-        };
-        this.onKeyDown = (event) => {
-            if (event.code === "Space") {
-                event.preventDefault();
-                this.toggleKeyboardMove();
-                return;
-            }
-            if (!this.movingViaKeyboard) {
-                return;
-            }
-            if (event.code === "ArrowDown") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.moveItem("down");
-            }
-            else if (event.code === "ArrowUp") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.moveItem("up");
-            }
-        };
-        this.onClickCollapse = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.collapse();
-        };
-        this.onClickExpand = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.expand();
-        };
-    }
-    componentWillLoad() {
-        this.updateLevel();
-        const treeView = this.el.closest("swirl-tree-view");
-        this.enableDragDrop = treeView?.enableDragDrop;
-        this.canDrop = treeView?.canDrop;
-        this.dragDropItemSelector = treeView?.dragDropItemSelector;
-    }
-    componentDidLoad() {
-        this.setUpDragDrop();
-    }
-    async expand() {
-        if (this.expanded || !this.expandable || this.getSemantics() !== "tree") {
-            return;
-        }
-        this.expanded = true;
-        this.expandedChange.emit(this.expanded);
-    }
-    async collapse() {
-        if (!this.expanded || !this.expandable || this.getSemantics() !== "tree") {
-            return;
-        }
-        this.expanded = false;
-        this.expandedChange.emit(this.expanded);
-    }
-    async select(focus) {
-        if (this.getSemantics() !== "tree") {
-            return;
-        }
-        this.selected = true;
-        if (focus) {
-            this.link?.focus();
-        }
-        this.itemSelected.emit(this.el);
-    }
-    async unselect() {
-        if (this.getSemantics() !== "tree") {
-            return;
-        }
-        this.selected = false;
-    }
-    setUpDragDrop() {
-        if (this.sortable) {
-            this.sortable.destroy();
-            this.sortable = undefined;
-        }
-        if (this.enableDragDrop && this.childList) {
-            this.sortable = new Sortable(this.childList, {
-                ...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),
-                        });
-                    }
-                    return true;
-                },
-                onStart: (event) => {
-                    treeViewDragDropConfig.onStart?.(event);
-                },
-                onEnd: (event) => {
-                    event.stopPropagation();
-                    treeViewDragDropConfig.onEnd?.(event);
-                    const { from, to, newIndex, oldIndex, item } = event;
-                    const sourceParentItemId = from.closest("swirl-tree-view-item")?.itemId;
-                    const targetParentItemId = to.closest("swirl-tree-view-item")?.itemId;
-                    this.dropTreeViewItem.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,
-                    });
-                },
-            });
-        }
-    }
-    updateLevel() {
-        let parentItem = this.el.parentElement?.closest("swirl-tree-view-item");
-        while (Boolean(parentItem)) {
-            this.level += 1;
-            parentItem = parentItem.parentElement?.closest("swirl-tree-view-item");
-        }
-    }
-    getItemContext() {
-        const parent = this.getParentTreeViewItem() ?? this.el.closest("swirl-tree-view");
-        const siblings = Array.from(parent.querySelectorAll(`
-        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},
-        :scope > .tree-view > ${this.dragDropItemSelector}
-      `));
-        return {
-            canDrop: !this.cannotKeyboardDropInCurrentPosition,
-            parent,
-            position: siblings.indexOf(this.el),
-            siblingCount: siblings.length,
-        };
-    }
-    getParentItem() {
-        return this.getElementToMove().parentElement.closest(this.dragDropItemSelector);
-    }
-    getParentTreeViewItem() {
-        return this.el.parentElement.closest("swirl-tree-view-item");
-    }
-    getElementToMove() {
-        return this.dragDropItemSelector
-            ? this.el.closest(this.dragDropItemSelector)
-            : this.el;
-    }
-    getKeyboardMoveEventData() {
-        const { canDrop, parent, position, siblingCount } = this.getItemContext();
-        if (!parent) {
-            return undefined;
-        }
-        return {
-            canDrop,
-            parentLabel: parent.label,
-            childrenCount: siblingCount,
-            itemLabel: this.label,
-            position,
-        };
-    }
-    toggleKeyboardMove() {
-        if (this.movingViaKeyboard) {
-            this.endKeyboardMove();
-        }
-        else {
-            this.startKeyboardMove();
-        }
-    }
-    endKeyboardMove() {
-        const { parent, position } = this.getItemContext();
-        if (typeof this.canDrop === "function") {
-            const canBeDroppedHere = this.canDrop({ parentId: parent.id, position });
-            if (!canBeDroppedHere) {
-                return;
-            }
-        }
-        this.movingViaKeyboard = false;
-        const eventData = this.getKeyboardMoveEventData();
-        if (!eventData) {
-            return;
-        }
-        this.endKeyboardMoveEvent.emit(eventData);
-        this.dropTreeViewItem.emit({
-            item: this.getElementToMove(),
-            itemId: this.itemId,
-            newIndex: position,
-            oldIndex: this.positionBeforeKeyboardMove.position,
-            newNextSiblingItemId: eventData.position < eventData.childrenCount - 1
-                ? this.getElementToMove().nextElementSibling?.id
-                : undefined,
-            newPrevSiblingItemId: eventData.position > 0
-                ? this.getElementToMove().previousElementSibling?.id
-                : undefined,
-            sourceParentItemId: this.positionBeforeKeyboardMove.parent.id ?? undefined,
-            targetParentItemId: this.getParentItem()?.id,
-        });
-    }
-    startKeyboardMove() {
-        if (this.disableDrag) {
-            return;
-        }
-        const { parent, position } = this.getItemContext();
-        this.positionBeforeKeyboardMove = {
-            parent,
-            position,
-        };
-        this.movingViaKeyboard = true;
-        const eventData = this.getKeyboardMoveEventData();
-        if (!eventData) {
-            return;
-        }
-        this.startKeyboardMoveEvent.emit(eventData);
-    }
-    moveItem(direction) {
-        const elementToMove = this.getElementToMove();
-        const parentItem = this.getParentItem();
-        const parentTreeViewItem = this.getParentTreeViewItem();
-        if (direction === "down") {
-            const nextSibling = elementToMove.nextElementSibling;
-            if (nextSibling) {
-                // move inside the next sibling
-                nextSibling
-                    .querySelector(".tree-view-item__children")
-                    .prepend(elementToMove);
-                // update parent tree view item
-                if (parentTreeViewItem) {
-                    forceUpdate(parentTreeViewItem);
-                }
-                const siblingTreeItem = nextSibling.tagName === "SWIRL-TREE-VIEW-ITEM"
-                    ? nextSibling
-                    : nextSibling.querySelector("swirl-tree-view-item");
-                forceUpdate(siblingTreeItem);
-                siblingTreeItem.expand();
-            }
-            else {
-                if (parentItem) {
-                    // move after the parent item
-                    parentItem.parentElement.insertBefore(elementToMove, parentItem.nextElementSibling);
-                    if (parentTreeViewItem) {
-                        forceUpdate(parentTreeViewItem);
-                    }
-                }
-            }
-        }
-        else if (direction === "up") {
-            const prevSibling = elementToMove.previousElementSibling;
-            if (prevSibling) {
-                // move before the previous sibling
-                prevSibling
-                    .querySelector(".tree-view-item__children")
-                    .appendChild(elementToMove);
-                // update parent tree view item
-                if (parentTreeViewItem) {
-                    forceUpdate(parentTreeViewItem);
-                }
-                const siblingTreeItem = prevSibling.tagName === "SWIRL-TREE-VIEW-ITEM"
-                    ? prevSibling
-                    : prevSibling.querySelector("swirl-tree-view-item");
-                forceUpdate(siblingTreeItem);
-                siblingTreeItem.expand();
-            }
-            else {
-                if (parentItem) {
-                    // move before the parent item
-                    parentItem.parentElement.insertBefore(elementToMove, parentItem);
-                    if (parentTreeViewItem) {
-                        forceUpdate(parentTreeViewItem);
-                    }
-                }
-            }
-        }
-        requestAnimationFrame(() => {
-            this.link.focus();
-        });
-        this.checkKeyboardDropStatus();
-        const eventData = this.getKeyboardMoveEventData();
-        if (!eventData) {
-            return;
-        }
-        this.keyboardMoveEvent.emit(eventData);
-    }
-    checkKeyboardDropStatus() {
-        const { parent, position } = this.getItemContext();
-        if (typeof this.canDrop === "function") {
-            const canBeDroppedHere = this.canDrop({ parentId: parent.id, position });
-            this.cannotKeyboardDropInCurrentPosition = !canBeDroppedHere;
-            return;
-        }
-        this.cannotKeyboardDropInCurrentPosition = false;
-    }
-    getSemantics() {
-        const hasTreeSemantics = this.el.closest('[role="tree"]');
-        return hasTreeSemantics ? "tree" : "list";
-    }
-    render() {
-        const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
-        const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
-        const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
-        const semantics = this.getSemantics();
-        const expanded = this.expanded || semantics !== "tree";
-        const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
-        const Tag = semantics === "tree" ? "li" : "div";
-        const className = classNames("tree-view-item", {
-            "tree-view-item--active": this.active,
-            "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
-            "tree-view-item--moving-via-keyboard": this.movingViaKeyboard,
-            "tree-view-item--disable-drag": this.disableDrag,
-            "tree-view-item--has-tags": hasTags,
-        });
-        return (h(Host, { key: 'ef16c27d9282062e7eb8aa5fb45613e69a200aae', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '15e2503833c87d883c34a7b24ce17ab0e85a9e30', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'ce810959e7215357be6dc7d8880fe03e6e0be549', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
-                ? undefined
-                : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
-                ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '2d1452a57f2def1eceef3891ce20be59e778b7ca', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: 'ccddb996d44004d751a01fcc3e91d3af6721c23b', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '386d993f384f35134637e68a253b7d14a0a62e51', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'f689abd02407a055ff79dc6522c4063fc65d7e9f' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'c4a59b8591a7f51ebc4dc297b678b5ecfc476f3a' }, h("span", { key: 'f4fe5f197cfaf4011021e0262bde61af4a7ef877', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'dfdc57fa9188b79cf5a46e0b594b0e41950535c2', class: "tree-view-item__label" }, this.label), h("span", { key: '76c3fd99cfcf2b3b8add25c18c1f6c0687cd3f78', class: "tree-view-item__tags" }, h("slot", { key: 'b4ef16885008da02d73c451dcd9af6be757ab771', name: "tags" }))), h("ul", { key: 'd9d948434e2bad6acd34681d1415688fecf5ef05', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
-                ? "tree-view-item__children--drop-zone"
-                : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
-                display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
-                    ? "none"
-                    : undefined,
-            } }, h("slot", { key: 'aad3dea9e876a4eb40c256d20f950a4e47e1cd46' })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlTreeViewItemCss; }
-}, [4, "swirl-tree-view-item", {
-        "active": [4],
-        "disableDrag": [4, "disable-drag"],
-        "expandable": [4],
-        "href": [1],
-        "icon": [1],
-        "iconColor": [1, "icon-color"],
-        "itemId": [1, "item-id"],
-        "label": [1],
-        "canDrop": [32],
-        "cannotKeyboardDropInCurrentPosition": [32],
-        "dragDropItemSelector": [32],
-        "enableDragDrop": [32],
-        "expanded": [32],
-        "level": [32],
-        "movingViaKeyboard": [32],
-        "selected": [32],
-        "expand": [64],
-        "collapse": [64],
-        "select": [64],
-        "unselect": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tree-view-item", "swirl-icon", "swirl-icon-chevron-right", "swirl-icon-drag-handle", "swirl-icon-expand-more"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tree-view-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTreeViewItem$1);
-            }
-            break;
-        case "swirl-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-icon-chevron-right":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-icon-drag-handle":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-icon-expand-more":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlTreeViewItem = SwirlTreeViewItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTreeViewItem, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,forceUpdate as r,h as s,Host as o,Fragment as a,transformTag as n}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{S as h}from"./sortable.esm.js";import{t as c}from"./swirl-tree-view.config.js";import{d as l}from"./swirl-icon2.js";import{d as m}from"./swirl-icon-chevron-right2.js";import{d as v}from"./swirl-icon-drag-handle2.js";import{d as w}from"./swirl-icon-expand-more2.js";const p=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.dropTreeViewItem=t(this,"dropTreeViewItem",7),this.expandedChange=t(this,"expandedChange",7),this.itemSelected=t(this,"itemSelected",7),this.startKeyboardMoveEvent=t(this,"startKeyboardMove",7),this.endKeyboardMoveEvent=t(this,"endKeyboardMove",7),this.keyboardMoveEvent=t(this,"keyboardMove",7),this.expandable=!0,this.cannotKeyboardDropInCurrentPosition=!1,this.dragDropItemSelector="swirl-tree-view-item",this.enableDragDrop=!1,this.expanded=!1,this.level=0,this.movingViaKeyboard=!1,this.selected=!1,this.onFocus=()=>{this.selected||"tree"!==this.getSemantics()||this.select()},this.onKeyDown=e=>{if("Space"===e.code)return e.preventDefault(),void this.toggleKeyboardMove();this.movingViaKeyboard&&("ArrowDown"===e.code?(e.preventDefault(),e.stopPropagation(),this.moveItem("down")):"ArrowUp"===e.code&&(e.preventDefault(),e.stopPropagation(),this.moveItem("up")))},this.onClickCollapse=e=>{e.preventDefault(),e.stopPropagation(),this.collapse()},this.onClickExpand=e=>{e.preventDefault(),e.stopPropagation(),this.expand()}}componentWillLoad(){this.updateLevel();const e=this.el.closest("swirl-tree-view");this.enableDragDrop=e?.enableDragDrop,this.canDrop=e?.canDrop,this.dragDropItemSelector=e?.dragDropItemSelector}componentDidLoad(){this.setUpDragDrop()}async expand(){!this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!0,this.expandedChange.emit(this.expanded))}async collapse(){this.expanded&&this.expandable&&"tree"===this.getSemantics()&&(this.expanded=!1,this.expandedChange.emit(this.expanded))}async select(e){"tree"===this.getSemantics()&&(this.selected=!0,e&&this.link?.focus(),this.itemSelected.emit(this.el))}async unselect(){"tree"===this.getSemantics()&&(this.selected=!1)}setUpDragDrop(){this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop&&this.childList&&(this.sortable=new h(this.childList,{...c,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)}),onStart:e=>{c.onStart?.(e)},onEnd:e=>{e.stopPropagation(),c.onEnd?.(e);const{from:i,to:t,newIndex:r,oldIndex:s,item:o}=e,a=i.closest("swirl-tree-view-item")?.itemId,n=t.closest("swirl-tree-view-item")?.itemId;this.dropTreeViewItem.emit({newIndex:r,oldIndex:s,item:o,itemId:o.id??o.querySelector(":scope > swirl-tree-view-item").id,newNextSiblingItemId:r<t.children.length-1?t.children[r+1].id:void 0,newPrevSiblingItemId:r>0?t.children[r-1].id:void 0,sourceParentItemId:a,targetParentItemId:n})}}))}updateLevel(){let e=this.el.parentElement?.closest("swirl-tree-view-item");for(;e;)this.level+=1,e=e.parentElement?.closest("swirl-tree-view-item")}getItemContext(){const e=this.getParentTreeViewItem()??this.el.closest("swirl-tree-view"),i=Array.from(e.querySelectorAll(`\n        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},\n        :scope > .tree-view > ${this.dragDropItemSelector}\n      `));return{canDrop:!this.cannotKeyboardDropInCurrentPosition,parent:e,position:i.indexOf(this.el),siblingCount:i.length}}getParentItem(){return this.getElementToMove().parentElement.closest(this.dragDropItemSelector)}getParentTreeViewItem(){return this.el.parentElement.closest("swirl-tree-view-item")}getElementToMove(){return this.dragDropItemSelector?this.el.closest(this.dragDropItemSelector):this.el}getKeyboardMoveEventData(){const{canDrop:e,parent:i,position:t,siblingCount:r}=this.getItemContext();if(i)return{canDrop:e,parentLabel:i.label,childrenCount:r,itemLabel:this.label,position:t}}toggleKeyboardMove(){this.movingViaKeyboard?this.endKeyboardMove():this.startKeyboardMove()}endKeyboardMove(){const{parent:e,position:i}=this.getItemContext();if("function"==typeof this.canDrop&&!this.canDrop({parentId:e.id,position:i}))return;this.movingViaKeyboard=!1;const t=this.getKeyboardMoveEventData();t&&(this.endKeyboardMoveEvent.emit(t),this.dropTreeViewItem.emit({item:this.getElementToMove(),itemId:this.itemId,newIndex:i,oldIndex:this.positionBeforeKeyboardMove.position,newNextSiblingItemId:t.position<t.childrenCount-1?this.getElementToMove().nextElementSibling?.id:void 0,newPrevSiblingItemId:t.position>0?this.getElementToMove().previousElementSibling?.id:void 0,sourceParentItemId:this.positionBeforeKeyboardMove.parent.id??void 0,targetParentItemId:this.getParentItem()?.id}))}startKeyboardMove(){if(this.disableDrag)return;const{parent:e,position:i}=this.getItemContext();this.positionBeforeKeyboardMove={parent:e,position:i},this.movingViaKeyboard=!0;const t=this.getKeyboardMoveEventData();t&&this.startKeyboardMoveEvent.emit(t)}moveItem(e){const i=this.getElementToMove(),t=this.getParentItem(),s=this.getParentTreeViewItem();if("down"===e){const e=i.nextElementSibling;if(e){e.querySelector(".tree-view-item__children").prepend(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t.nextElementSibling),s&&r(s))}else if("up"===e){const e=i.previousElementSibling;if(e){e.querySelector(".tree-view-item__children").appendChild(i),s&&r(s);const t="SWIRL-TREE-VIEW-ITEM"===e.tagName?e:e.querySelector("swirl-tree-view-item");r(t),t.expand()}else t&&(t.parentElement.insertBefore(i,t),s&&r(s))}requestAnimationFrame((()=>{this.link.focus()})),this.checkKeyboardDropStatus();const o=this.getKeyboardMoveEventData();o&&this.keyboardMoveEvent.emit(o)}checkKeyboardDropStatus(){const{parent:e,position:i}=this.getItemContext();if("function"!=typeof this.canDrop)this.cannotKeyboardDropInCurrentPosition=!1;else{const t=this.canDrop({parentId:e.id,position:i});this.cannotKeyboardDropInCurrentPosition=!t}}getSemantics(){return this.el.closest('[role="tree"]')?"tree":"list"}render(){const e=!!this.el.querySelector("swirl-tree-view-item"),i=!!this.el.querySelector('[slot="tags"]'),t=!!this.icon&&/\p{Extended_Pictographic}/u.test(this.icon),r=this.enableDragDrop&&!e,n=this.getSemantics(),h=this.expanded||"tree"!==n,c="tree"===n?this.selected?0:-1:void 0,l="tree"===n?"li":"div",m=d("tree-view-item",{"tree-view-item--active":this.active,"tree-view-item--cannot-keyboard-drop":this.cannotKeyboardDropInCurrentPosition,"tree-view-item--moving-via-keyboard":this.movingViaKeyboard,"tree-view-item--disable-drag":this.disableDrag,"tree-view-item--has-tags":i});return s(o,{key:"ef16c27d9282062e7eb8aa5fb45613e69a200aae",id:this.itemId,role:"tree"===n?"none":"listitem"},s(l,{key:"15e2503833c87d883c34a7b24ce17ab0e85a9e30",class:m,role:"tree"===n?"none":void 0},s("a",{key:"ce810959e7215357be6dc7d8880fe03e6e0be549","aria-current":this.active?"page":void 0,"aria-expanded":e&&"tree"===n?h+"":void 0,"aria-level":"tree"===n?this.level+1:void 0,"aria-owns":e&&"tree"===n?this.itemId+"-children":void 0,"aria-selected":"tree"===n?this.selected+"":void 0,class:"tree-view-item__link",href:this.href,onFocus:this.onFocus,onKeyDown:this.onKeyDown,ref:e=>this.link=e,role:"tree"===n?"treeitem":void 0,tabIndex:c},!this.disableDrag&&this.enableDragDrop&&s("span",{key:"2d1452a57f2def1eceef3891ce20be59e778b7ca",class:"tree-view-item__drag-handle"},s("swirl-icon-drag-handle",{key:"ccddb996d44004d751a01fcc3e91d3af6721c23b",size:20})),this.expandable&&"tree"===n&&s("span",{key:"386d993f384f35134637e68a253b7d14a0a62e51",class:"tree-view-item__toggle-icon"},e&&s(a,{key:"f689abd02407a055ff79dc6522c4063fc65d7e9f"},h?s("swirl-icon-expand-more",{onClick:this.onClickCollapse,size:24}):s("swirl-icon-chevron-right",{onClick:this.onClickExpand,size:24}))),!!this.icon&&s(a,{key:"c4a59b8591a7f51ebc4dc297b678b5ecfc476f3a"},s("span",{key:"f4fe5f197cfaf4011021e0262bde61af4a7ef877",class:"tree-view-item__icon"},t?this.icon:s("swirl-icon",{glyph:this.icon,size:24,color:this.iconColor}))),s("span",{key:"dfdc57fa9188b79cf5a46e0b594b0e41950535c2",class:"tree-view-item__label"},this.label),s("span",{key:"76c3fd99cfcf2b3b8add25c18c1f6c0687cd3f78",class:"tree-view-item__tags"},s("slot",{key:"b4ef16885008da02d73c451dcd9af6be757ab771",name:"tags"}))),s("ul",{key:"d9d948434e2bad6acd34681d1415688fecf5ef05","aria-label":this.label,class:"tree-view-item__children "+(r?"tree-view-item__children--drop-zone":""),id:this.itemId+"-children",ref:e=>this.childList=e,role:"tree"===n?"group":void 0,style:{display:h&&e||r?void 0:"none"}},s("slot",{key:"aad3dea9e876a4eb40c256d20f950a4e47e1cd46"}))))}get el(){return this}static get style(){return"swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-background-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-background-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-background-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}"}},[260,"swirl-tree-view-item",{active:[4],disableDrag:[4,"disable-drag"],expandable:[4],href:[1],icon:[1],iconColor:[1,"icon-color"],itemId:[1,"item-id"],label:[1],canDrop:[32],cannotKeyboardDropInCurrentPosition:[32],dragDropItemSelector:[32],enableDragDrop:[32],expanded:[32],level:[32],movingViaKeyboard:[32],selected:[32],expand:[64],collapse:[64],select:[64],unselect:[64]}]),g=p,f=function(){"undefined"!=typeof customElements&&["swirl-tree-view-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-drag-handle","swirl-icon-expand-more"].forEach((e=>{switch(e){case"swirl-tree-view-item":customElements.get(n(e))||customElements.define(n(e),p);break;case"swirl-icon":customElements.get(n(e))||l();break;case"swirl-icon-chevron-right":customElements.get(n(e))||m();break;case"swirl-icon-drag-handle":customElements.get(n(e))||v();break;case"swirl-icon-expand-more":customElements.get(n(e))||w()}}))};export{g as SwirlTreeViewItem,f as defineCustomElement}

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

@@ -1,21 +1 @@
-const treeViewDragDropConfig = {
-    animation: 100,
-    chosenClass: "tree-view-item--chosen",
-    direction: "vertical",
-    dragClass: "tree-view-item--drag",
-    emptyInsertThreshold: 0,
-    fallbackOnBody: true,
-    filter: ".tree-view-item--disable-drag",
-    ghostClass: "tree-view-item--ghost",
-    group: "swirl-tree-view",
-    invertSwap: true,
-    onEnd: (event) => {
-        event.item.closest(".tree-view")?.classList.remove("tree-view--dragging");
-    },
-    onStart: (event) => {
-        event.item.closest(".tree-view")?.classList.add("tree-view--dragging");
-    },
-    invertedSwapThreshold: 0.75,
-};
-
-export { treeViewDragDropConfig as t };
+const e={animation:100,chosenClass:"tree-view-item--chosen",direction:"vertical",dragClass:"tree-view-item--drag",emptyInsertThreshold:0,fallbackOnBody:!0,filter:".tree-view-item--disable-drag",ghostClass:"tree-view-item--ghost",group:"swirl-tree-view",invertSwap:!0,onEnd:e=>{e.item.closest(".tree-view")?.classList.remove("tree-view--dragging")},onStart:e=>{e.item.closest(".tree-view")?.classList.add("tree-view--dragging")},invertedSwapThreshold:.75};export{e as t}