wj-elements 0.7.6 → 0.8.0

package/dist/wje-tree-item.js

@@ -1,369 +1,138 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            position: relative;\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            border-width: var(--wje-tree-item-border-width);\n            border-style: var(--wje-tree-item-border-style);\n            border-color: var(--wje-tree-item-border-color);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &::before,\n            &::after {\n                content: '';\n                position: absolute;\n                box-sizing: border-box;\n                pointer-events: none;\n                opacity: 0;\n                z-index: 2;\n            }\n\n            &:hover {\n                border-color: var(--wje-tree-item-border-color-hover);\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: calc(var(--wje-tree-item-indent) * var(--wje-tree-item-depth));\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n\n            slot[name='start']::slotted(.wje-tree-drag-handle) {\n                cursor: grab;\n            }\n        }\n        .children {\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(\n                        (var(--wje-tree-item-indent) * var(--wje-tree-item-depth)) +\n                        1em -\n                        (var(--wje-spacing-3x-small) * 2) -\n                        (var(--wje-tree-item-indent-guid-width) / 2)\n                    );\n                    border-inline-end-width: var(--wje-tree-item-indent-guid-width);\n                    border-inline-end-style: var(--wje-tree-item-indent-guid-style);\n                    border-inline-end-color: var(--wje-tree-item-indent-guid-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        border-color: var(--wje-tree-item-border-color-selected);\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n\n:host(.wje-tree-dragging) {\n    opacity: 0.35;\n\n    .item {\n        slot[name='start']::slotted(.wje-tree-drag-handle) {\n            cursor: grabbing;\n        }\n    }\n}\n\n:host(.wje-tree-drop-before) {\n    .item {\n        &::before {\n            inset-inline: 0;\n            top: -1px;\n            height: var(--wje-tree-item-drop-line-width);\n            background-color: var(--wje-tree-item-drop-color);\n            border-radius: var(--wje-tree-item-drop-line-border-radius);\n            opacity: 1;\n        }\n    }\n}\n\n:host(.wje-tree-drop-after) {\n    .item {\n        &::after {\n            inset-inline: 0;\n            bottom: -1px;\n            height: var(--wje-tree-item-drop-line-width);\n            background-color: var(--wje-tree-item-drop-color);\n            border-radius: var(--wje-tree-item-drop-line-border-radius);\n            opacity: 1;\n        }\n    }\n}\n\n:host(.wje-tree-drop-inside) {\n    .item {\n        &::before {\n            inset: 0;\n            border-width: var(--wje-tree-item-drop-border-width);\n            border-style: var(--wje-tree-item-drop-border-style);\n            border-color: var(--wje-tree-item-drop-border-color);\n            border-radius: var(--wje-tree-item-drop-border-radius);\n            opacity: 1;\n        }\n    }\n}\n\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
-class TreeItem extends WJElement {
-  /**
-   * Creates an instance of TreeItem.
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "TreeItem");
     this._selection = "single";
   }
-  /**
-   * Sets the expanded state of the element. When set to a truthy value,
-   * the 'expanded' attribute will be added to the element. When set to a falsy
-   * value, the 'expanded' attribute will be removed.
-   * @param {boolean} value A boolean value indicating whether the
-   * element should be expanded (true) or collapsed (false).
-   */
-  set expanded(value) {
-    if (value) {
-      this.setAttribute("expanded", "");
-    } else {
-      this.removeAttribute("expanded");
-    }
+  set expanded(e2) {
+    e2 ? this.setAttribute("expanded", "") : this.removeAttribute("expanded");
   }
-  /**
-   * Retrieves the value of the 'expanded' state for the current element.
-   * This getter checks whether the 'expanded' attribute is present on the element.
-   * If the attribute exists, it returns true, representing that the element is expanded.
-   * Otherwise, it returns false, indicating that the element is not expanded.
-   * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.
-   */
   get expanded() {
     return this.hasAttribute("expanded");
   }
-  /**
-   * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.
-   * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.
-   */
-  set selected(value) {
-    this.removeAttribute("selected");
-    if (value) this.setAttribute("selected", "");
+  set selected(e2) {
+    this.removeAttribute("selected"), e2 && this.setAttribute("selected", "");
   }
-  /**
-   * Getter method for determining if the 'selected' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.
-   */
   get selected() {
     return this.hasAttribute("selected");
   }
-  /**
-   * Sets the selection mode for the component.
-   * @param {string} value The selection mode to apply. Defaults to 'single'
-   * if no value is provided. Possible options may be
-   * specific to the implementation of the component
-   * (e.g., 'single', 'multiple').
-   */
-  set selection(value) {
-    this._selection = value || "single";
+  set selection(e2) {
+    this._selection = e2 || "single";
   }
-  /**
-   * Retrieves the current selection.
-   * @returns {*} The value of the current selection.
-   */
   get selection() {
     return this._selection;
   }
-  /**
-   * Sets or removes the 'indeterminate' attribute based on the provided value.
-   * This can be used to visually indicate an indeterminate state for elements like checkboxes.
-   * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.
-   * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.
-   */
-  set indeterminate(value) {
-    this.removeAttribute("indeterminate");
-    if (value) this.setAttribute("indeterminate", "");
+  set indeterminate(e2) {
+    this.removeAttribute("indeterminate"), e2 && this.setAttribute("indeterminate", "");
   }
-  /**
-   * Retrieves the state of the indeterminate attribute.
-   * @returns {boolean} True if the indeterminate attribute is present, otherwise false.
-   */
   get indeterminate() {
     return this.hasAttribute("indeterminate");
   }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host .native-tree-item{position:relative;display:flex;align-items:stretch;flex-direction:column}:host .native-tree-item.multiple .item{border-radius:0!important}:host .native-tree-item .item{position:relative;display:flex;align-items:center;padding-inline:var(--wje-tree-item-padding-inline);padding-block:var(--wje-tree-item-padding-block);border-radius:var(--wje-tree-item-border-radius);border-width:var(--wje-tree-item-border-width);border-style:var(--wje-tree-item-border-style);border-color:var(--wje-tree-item-border-color);background-color:var(--wje-tree-item-background);color:var(--wje-tree-item-color)}:host .native-tree-item .item:before,:host .native-tree-item .item:after{content:"";position:absolute;box-sizing:border-box;pointer-events:none;opacity:0;z-index:2}:host .native-tree-item .item:hover{border-color:var(--wje-tree-item-border-color-hover);background-color:var(--wje-tree-item-background-hover);color:var(--wje-tree-item-color-hover)}:host .native-tree-item .item .indent{display:block;width:calc(var(--wje-tree-item-indent) * var(--wje-tree-item-depth));flex-shrink:0}:host .native-tree-item .item .toggle{font-size:var(--wje-tree-item-font-size);display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:var(--wje-tree-item-indent);height:var(--wje-tree-item-indent);flex-shrink:0}:host .native-tree-item .item wje-checkbox{font-size:var(--wje-tree-item-font-size);margin:0}:host .native-tree-item .item .content{font-size:var(--wje-tree-item-font-size)}:host .native-tree-item .item slot{display:flex;align-items:center}:host .native-tree-item .item slot:not([name])::slotted(wje-icon){margin-right:var(--wje-spacing-2x-small)}:host .native-tree-item .item slot[name=end]{margin-inline-start:auto}:host .native-tree-item .item slot[name=start]::slotted(.wje-tree-drag-handle){cursor:grab}:host .native-tree-item .children{display:none}:host .native-tree-item .children.open{font-size:var(--wje-tree-item-font-size);display:block}:host .native-tree-item .children.open :before{content:"";position:absolute;top:var(--wje-tree-item-indent);bottom:5px;left:calc((var(--wje-tree-item-indent) * var(--wje-tree-item-depth)) + 1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));border-inline-end-width:var(--wje-tree-item-indent-guid-width);border-inline-end-style:var(--wje-tree-item-indent-guid-style);border-inline-end-color:var(--wje-tree-item-indent-guid-color);z-index:1}:host .native-tree-item.expanded .item slot[name=expand],:host .native-tree-item:not(.expanded) slot[name=collapse]{display:none}:host([selected]) .item{border-color:var(--wje-tree-item-border-color-selected);background-color:var(--wje-tree-item-background-selected);color:var(--wje-tree-item-color-selected)}:host(.wje-tree-dragging){opacity:.35}:host(.wje-tree-dragging) .item slot[name=start]::slotted(.wje-tree-drag-handle){cursor:grabbing}:host(.wje-tree-drop-before) .item:before{inset-inline:0;top:-1px;height:var(--wje-tree-item-drop-line-width);background-color:var(--wje-tree-item-drop-color);border-radius:var(--wje-tree-item-drop-line-border-radius);opacity:1}:host(.wje-tree-drop-after) .item:after{inset-inline:0;bottom:-1px;height:var(--wje-tree-item-drop-line-width);background-color:var(--wje-tree-item-drop-color);border-radius:var(--wje-tree-item-drop-line-border-radius);opacity:1}:host(.wje-tree-drop-inside) .item:before{top:0;right:0;bottom:0;left:0;border-width:var(--wje-tree-item-drop-border-width);border-style:var(--wje-tree-item-drop-border-style);border-color:var(--wje-tree-item-drop-border-color);border-radius:var(--wje-tree-item-drop-border-radius);opacity:1}:host([slot-hover-visible]) .item:hover slot[name=start],:host([slot-hover-visible]) .item:hover slot[name=end]{visibility:visible}:host([slot-hover-visible]) .item slot[name=start],:host([slot-hover-visible]) .item slot[name=end]{visibility:hidden}';
   }
-  /**
-   * Setup attributes for the Button element.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
   connectedCallback() {
     var _a;
-    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    this.syncNestingState();
+    (_a = super.connectedCallback) == null ? void 0 : _a.call(this), this.syncNestingState();
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["selected", "indeterminate", "expanded"];
   }
-  /**
-   * Handles updates when observed attributes of the element are changed.
-   * Updates the checkbox state based on changes to the "selected" or "indeterminate" attributes.
-   * @param {string} name The name of the attribute that was changed.
-   * @param {string|null} oldValue The previous value of the attribute before the change.
-   * @param {string|null} newValue The new value of the attribute after the change.
-   * @returns {void}
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "expanded") {
-      this.setChildrenExpanded(this.expanded, { syncAttribute: false });
-      return;
-    }
-    if (!this.checkbox) {
-      this.syncAria();
-      return;
-    }
-    if (name === "selected") {
-      if (this.selected) {
-        this.checkbox.checked = true;
-      } else {
-        this.checkbox.checked = false;
-      }
-    }
-    if (name === "indeterminate" && !this.selected) {
-      this.checkbox.removeAttribute("indeterminate");
-      this.checkbox.removeAttribute("checked");
-      if (this.indeterminate) this.checkbox.setAttribute("indeterminate", "");
-    }
-    this.syncAria();
+  attributeChangedCallback(e2, t2, i) {
+    "expanded" !== e2 ? this.checkbox ? ("selected" === e2 && (this.selected ? this.checkbox.checked = true : this.checkbox.checked = false), "indeterminate" !== e2 || this.selected || (this.checkbox.removeAttribute("indeterminate"), this.checkbox.removeAttribute("checked"), this.indeterminate && this.checkbox.setAttribute("indeterminate", "")), this.syncAria()) : this.syncAria() : this.setChildrenExpanded(this.expanded, { syncAttribute: false });
   }
-  /**
-   * Custom logic executed before the draw process begins.
-   * Determines and sets the appropriate slot if the current item is nested.
-   * @returns {void} No return value.
-   */
   beforeDraw() {
     var _a;
-    this.syncNestingState();
-    if ((_a = this.closest("wje-tree")) == null ? void 0 : _a.hasAttribute("slot-hover-visible"))
-      this.setAttribute("slot-hover-visible", "");
+    this.syncNestingState(), ((_a = this.closest("wje-tree")) == null ? void 0 : _a.hasAttribute("slot-hover-visible")) && this.setAttribute("slot-hover-visible", "");
   }
-  /**
-   * Synchronizes the nesting-related state on the host element.
-   * Sets the "slot" to children for nested items and updates
-   * the nesting depth used to compute visual indentation.
-   * @returns {void}
-   */
   syncNestingState() {
-    const depth = this.getNestingDepth();
-    this.style.setProperty("--wje-tree-item-depth", String(depth));
-    if (depth > 0) {
-      this.slot = "children";
-    } else if (this.getAttribute("slot") === "children") {
-      this.removeAttribute("slot");
-    }
+    const e2 = this.getNestingDepth();
+    this.style.setProperty("--wje-tree-item-depth", String(e2)), e2 > 0 ? this.slot = "children" : "children" === this.getAttribute("slot") && this.removeAttribute("slot");
   }
-  /**
-   * Creates and returns a document fragment representing the structure of a tree item component.
-   * The method constructs the DOM elements including the native container, indentation, toggle button,
-   * selection checkbox, label, and children container, along with their respective slots and attributes.
-   * It dynamically handles the creation of expand and collapse icons, as well as appending slots for
-   * child components.
-   * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-tree-item", this.selection === "multiple" ? "multiple" : "single");
-    let slotStart = document.createElement("slot");
-    slotStart.setAttribute("name", "start");
-    let item = document.createElement("div");
-    item.setAttribute("part", "item");
-    item.classList.add("item");
-    let indent = document.createElement("div");
-    indent.classList.add("indent");
-    let button = document.createElement("div");
-    button.classList.add("toggle");
-    let checkbox = document.createElement("wje-checkbox");
-    if (this.selected) checkbox.setAttribute("checked", "");
-    let label = document.createElement("div");
-    label.setAttribute("part", "label");
-    label.classList.add("content");
-    let slotElement = document.createElement("slot");
-    let children = document.createElement("div");
-    children.classList.add("children");
-    let slot = document.createElement("slot");
-    slot.setAttribute("name", "children");
-    children.appendChild(slot);
-    let slotEnd = document.createElement("slot");
-    slotEnd.setAttribute("name", "end");
-    item.appendChild(slotStart);
-    item.appendChild(indent);
-    if (this.querySelectorAll(":scope > wje-tree-item").length > 0) {
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.setAttribute("part", "native"), t2.classList.add("native-tree-item", "multiple" === this.selection ? "multiple" : "single");
+    let i = document.createElement("slot");
+    i.setAttribute("name", "start");
+    let r = document.createElement("div");
+    r.setAttribute("part", "item"), r.classList.add("item");
+    let n = document.createElement("div");
+    n.classList.add("indent");
+    let s = document.createElement("div");
+    s.classList.add("toggle");
+    let o = document.createElement("wje-checkbox");
+    this.selected && o.setAttribute("checked", "");
+    let l = document.createElement("div");
+    l.setAttribute("part", "label"), l.classList.add("content");
+    let d = document.createElement("slot"), a = document.createElement("div");
+    a.classList.add("children");
+    let c = document.createElement("slot");
+    c.setAttribute("name", "children"), a.appendChild(c);
+    let h = document.createElement("slot");
+    if (h.setAttribute("name", "end"), r.appendChild(i), r.appendChild(n), this.querySelectorAll(":scope > wje-tree-item").length > 0) {
       if (this.querySelectorAll('[slot="expand"]').length < 1) {
-        let expandIcon = document.createElement("wje-icon");
-        expandIcon.setAttribute("name", "chevron-right");
-        expandIcon.setAttribute("slot", "expand");
-        this.appendChild(expandIcon);
+        let e4 = document.createElement("wje-icon");
+        e4.setAttribute("name", "chevron-right"), e4.setAttribute("slot", "expand"), this.appendChild(e4);
       }
       if (this.querySelectorAll('[slot="collapse"]').length < 1) {
-        let collapseIcon = document.createElement("wje-icon");
-        collapseIcon.setAttribute("name", "chevron-down");
-        collapseIcon.setAttribute("slot", "collapse");
-        this.appendChild(collapseIcon);
+        let e4 = document.createElement("wje-icon");
+        e4.setAttribute("name", "chevron-down"), e4.setAttribute("slot", "collapse"), this.appendChild(e4);
       }
-      let expandSlot = document.createElement("slot");
-      expandSlot.setAttribute("name", "expand");
-      let collapseSlot = document.createElement("slot");
-      collapseSlot.setAttribute("name", "collapse");
-      button.appendChild(expandSlot);
-      button.appendChild(collapseSlot);
+      let e3 = document.createElement("slot");
+      e3.setAttribute("name", "expand");
+      let t3 = document.createElement("slot");
+      t3.setAttribute("name", "collapse"), s.appendChild(e3), s.appendChild(t3);
     }
-    item.appendChild(button);
-    if (this.selection === "multiple") item.appendChild(checkbox);
-    label.appendChild(slotElement);
-    item.appendChild(label);
-    item.appendChild(slotEnd);
-    native.appendChild(item);
-    native.appendChild(children);
-    fragment.appendChild(native);
-    this.checkbox = checkbox;
-    this.native = native;
-    this.button = button;
-    this.childrenElement = children;
-    this.childrenSlot = slot;
-    return fragment;
+    return r.appendChild(s), "multiple" === this.selection && r.appendChild(o), l.appendChild(d), r.appendChild(l), r.appendChild(h), t2.appendChild(r), t2.appendChild(a), e2.appendChild(t2), this.checkbox = o, this.native = t2, this.button = s, this.childrenElement = a, this.childrenSlot = c, e2;
   }
-  /**
-   * Executes operations to be performed after the draw action is completed.
-   * If the state indicates it is expanded, toggles its children.
-   * Additionally, sets up an event listener on the button element to handle toggling children upon click.
-   * @returns {void} Does not return a value.
-   */
   afterDraw() {
-    this.setChildrenExpanded(this.expanded, { syncAttribute: false });
-    this.button.addEventListener("click", this.toggleChildren.bind(this));
-    this.setAttribute("tabindex", "0");
-    this.syncAria();
+    this.setChildrenExpanded(this.expanded, { syncAttribute: false }), this.button.addEventListener("click", this.toggleChildren.bind(this)), this.setAttribute("tabindex", "0"), this.syncAria();
   }
-  /**
-   * Determines if the current item is a nested item within a tree structure.
-   * Checks if the item's parent element exists and is also a tree item.
-   * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.
-   */
   isNestedItem() {
-    const parent = this.parentElement;
-    return !!parent && this.isTreeItem(parent);
+    const e2 = this.parentElement;
+    return !!e2 && this.isTreeItem(e2);
   }
-  /**
-   * Calculates nesting depth based on ancestor tree items.
-   * Root items have depth 0, direct children depth 1, etc.
-   * @returns {number}
-   */
   getNestingDepth() {
-    let depth = 0;
-    let current = this.parentElement;
-    while (current) {
-      if (this.isTreeItem(current)) depth += 1;
-      current = current.parentElement;
-    }
-    return depth;
+    let e2 = 0, t2 = this.parentElement;
+    for (; t2; ) this.isTreeItem(t2) && (e2 += 1), t2 = t2.parentElement;
+    return e2;
   }
-  /**
-   * Checks whether the given node is a tree item.
-   * @param {object} node The node to check.
-   * @returns {boolean} Returns true when the node is a tree item element.
-   */
-  isTreeItem(node) {
-    return node instanceof Element && node.localName === "wje-tree-item";
+  isTreeItem(e2) {
+    return e2 instanceof Element && "wje-tree-item" === e2.localName;
   }
-  /**
-   * Toggles the visibility state of the children element and updates the class of the parent element.
-   * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,
-   * effectively showing or hiding the children and indicating the expanded state.
-   * @returns {void} Does not return a value.
-   */
   toggleChildren() {
     this.setChildrenExpanded(!this.childrenElement.classList.contains("open"));
   }
-  /**
-   * Sets the rendered children visibility and optionally mirrors it to the expanded attribute.
-   * @param {boolean} expanded Whether child items should be visible.
-   * @param {object} [options] Configuration for attribute syncing.
-   * @param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.
-   * @returns {void}
-   */
-  setChildrenExpanded(expanded, options = {}) {
+  setChildrenExpanded(e2, t2 = {}) {
     var _a, _b;
-    const syncAttribute = options.syncAttribute ?? true;
-    (_a = this.childrenElement) == null ? void 0 : _a.classList.toggle("open", expanded);
-    (_b = this.native) == null ? void 0 : _b.classList.toggle("expanded", expanded);
-    if (syncAttribute) {
-      if (expanded) this.setAttribute("expanded", "");
-      else this.removeAttribute("expanded");
-    }
-    this.syncAria();
+    const i = t2.syncAttribute ?? true;
+    (_a = this.childrenElement) == null ? void 0 : _a.classList.toggle("open", e2), (_b = this.native) == null ? void 0 : _b.classList.toggle("expanded", e2), i && (e2 ? this.setAttribute("expanded", "") : this.removeAttribute("expanded")), this.syncAria();
   }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
   syncAria() {
     var _a, _b;
-    const hasChildren = this.querySelectorAll(":scope > wje-tree-item").length > 0;
-    const expanded = hasChildren ? (_b = (_a = this.native) == null ? void 0 : _a.classList) == null ? void 0 : _b.contains("expanded") : void 0;
-    if (this.selection === "multiple") {
-      const checked = this.indeterminate ? "mixed" : this.selected ? "true" : "false";
-      this.setAriaState({
-        role: "treeitem",
-        checked,
-        expanded
-      });
-    } else {
-      this.setAriaState({
-        role: "treeitem",
-        selected: this.selected,
-        expanded
-      });
-    }
+    const e2 = this.querySelectorAll(":scope > wje-tree-item").length > 0 ? (_b = (_a = this.native) == null ? void 0 : _a.classList) == null ? void 0 : _b.contains("expanded") : void 0;
+    if ("multiple" === this.selection) {
+      const t2 = this.indeterminate ? "mixed" : this.selected ? "true" : "false";
+      this.setAriaState({ role: "treeitem", checked: t2, expanded: e2 });
+    } else this.setAriaState({ role: "treeitem", selected: this.selected, expanded: e2 });
   }
-  /**
-   * Retrieves the child items from the `childrenSlot` that match specific criteria.
-   * @param {object} [options] Configuration options.
-   * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.
-   * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.
-   */
-  getChildrenItems(options = {}) {
-    const includeDisabled = options.includeDisabled ?? true;
-    const assigned = this.childrenSlot ? this.childrenSlot.assignedElements({ flatten: true }) : [];
-    const direct = assigned.length ? assigned : Array.from(this.querySelectorAll(":scope > wje-tree-item"));
-    return direct.filter(
-      (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)
-    );
+  getChildrenItems(e2 = {}) {
+    const t2 = e2.includeDisabled ?? true, i = this.childrenSlot ? this.childrenSlot.assignedElements({ flatten: true }) : [];
+    return (i.length ? i : Array.from(this.querySelectorAll(":scope > wje-tree-item"))).filter((e3) => this.isTreeItem(e3) && (t2 || !e3.disabled));
   }
-  /**
-   * Retrieves all descendant children of the current object in a flattened array structure.
-   * @param {object} [options] An optional object specifying filters or configurations for retrieving children.
-   * @returns {Array} An array containing all children and their descendants in a flat structure.
-   */
-  getAllChildrenFlat(options = {}) {
-    const directChildren = this.getChildrenItems(options);
-    return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);
+  getAllChildrenFlat(e2 = {}) {
+    return this.getChildrenItems(e2).flatMap((t2) => [t2, ...t2.getAllChildrenFlat(e2)]);
   }
 }
-TreeItem.define("wje-tree-item", TreeItem);
+t.define("wje-tree-item", t);
 export {
-  TreeItem as default
+  t as default
 };
 //# sourceMappingURL=wje-tree-item.js.map

package/dist/wje-tree-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-indent-guid-style=solid] - Defines the guide border style for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-color=var(--wje-border-color)] - Defines the guide border color for nested tree items.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item's container.\n * @cssproperty [--wje-tree-item-border-width=0px] - Sets the border width of the tree item row.\n * @cssproperty [--wje-tree-item-border-style=solid] - Sets the border style of the tree item row.\n * @cssproperty [--wje-tree-item-border-color=transparent] - Sets the border color of the tree item row.\n * @cssproperty [--wje-tree-item-border-color-hover=transparent] - Sets the border color of the hovered tree item row.\n * @cssproperty [--wje-tree-item-border-color-selected=transparent] - Sets the border color of the selected tree item row.\n * @cssproperty [--wje-tree-item-drop-color=var(--wje-color-primary)] - Sets the color of reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-line-width=2px] - Sets the thickness of before/after reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-line-border-radius=var(--wje-border-radius-pill)] - Sets the radius of before/after reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-border-width=1px] - Sets the width of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-style=solid] - Sets the style of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-color=var(--wje-tree-item-drop-color)] - Sets the color of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-radius=inherit] - Sets the radius of the inside reorder drop border.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of TreeItem.\n     */\n    constructor() {\n        super();\n\n        this._selection = 'single';\n    }\n\n    /**\n     * Sets the expanded state of the element. When set to a truthy value,\n     * the 'expanded' attribute will be added to the element. When set to a falsy\n     * value, the 'expanded' attribute will be removed.\n     * @param {boolean} value A boolean value indicating whether the\n     * element should be expanded (true) or collapsed (false).\n     */\n    set expanded(value) {\n        if (value) {\n            this.setAttribute('expanded', '');\n        } else {\n            this.removeAttribute('expanded');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'expanded' state for the current element.\n     * This getter checks whether the 'expanded' attribute is present on the element.\n     * If the attribute exists, it returns true, representing that the element is expanded.\n     * Otherwise, it returns false, indicating that the element is not expanded.\n     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n     */\n    get expanded() {\n        return this.hasAttribute('expanded');\n    }\n\n    /**\n     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n     */\n    set selected(value) {\n        this.removeAttribute('selected');\n\n        if (value) this.setAttribute('selected', '');\n    }\n\n    /**\n     * Getter method for determining if the 'selected' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n     */\n    get selected() {\n        return this.hasAttribute('selected');\n    }\n\n    /**\n     * Sets the selection mode for the component.\n     * @param {string} value The selection mode to apply. Defaults to 'single'\n     * if no value is provided. Possible options may be\n     * specific to the implementation of the component\n     * (e.g., 'single', 'multiple').\n     */\n    set selection(value) {\n        this._selection = value || 'single';\n    }\n\n    /**\n     * Retrieves the current selection.\n     * @returns {*} The value of the current selection.\n     */\n    get selection() {\n        return this._selection;\n    }\n\n    /**\n     * Sets or removes the 'indeterminate' attribute based on the provided value.\n     * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n     */\n    set indeterminate(value) {\n        this.removeAttribute('indeterminate');\n\n        if (value) this.setAttribute('indeterminate', '');\n    }\n\n    /**\n     * Retrieves the state of the indeterminate attribute.\n     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n     */\n    get indeterminate() {\n        return this.hasAttribute('indeterminate');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'TreeItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    connectedCallback() {\n        super.connectedCallback?.();\n        this.syncNestingState();\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['selected', 'indeterminate', 'expanded'];\n    }\n\n    /**\n     * Handles updates when observed attributes of the element are changed.\n     * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change.\n     * @param {string|null} newValue The new value of the attribute after the change.\n     * @returns {void}\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'expanded') {\n            this.setChildrenExpanded(this.expanded, { syncAttribute: false });\n            return;\n        }\n\n        if (!this.checkbox) {\n            this.syncAria();\n            return;\n        }\n        if (name === 'selected') {\n            // this.checkbox.removeAttribute('indeterminate');\n            if (this.selected) {\n                this.checkbox.checked = true;\n            } else {\n                this.checkbox.checked = false;\n            }\n        }\n\n        if (name === 'indeterminate' && !this.selected) {\n            this.checkbox.removeAttribute('indeterminate');\n            this.checkbox.removeAttribute('checked');\n\n            if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Custom logic executed before the draw process begins.\n     * Determines and sets the appropriate slot if the current item is nested.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.syncNestingState();\n\n        if (this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Synchronizes the nesting-related state on the host element.\n     * Sets the \"slot\" to children for nested items and updates\n     * the nesting depth used to compute visual indentation.\n     * @returns {void}\n     */\n    syncNestingState() {\n        const depth = this.getNestingDepth();\n        this.style.setProperty('--wje-tree-item-depth', String(depth));\n\n        if (depth > 0) {\n            this.slot = 'children';\n        } else if (this.getAttribute('slot') === 'children') {\n            this.removeAttribute('slot');\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment representing the structure of a tree item component.\n     * The method constructs the DOM elements including the native container, indentation, toggle button,\n     * selection checkbox, label, and children container, along with their respective slots and attributes.\n     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n     * child components.\n     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let item = document.createElement('div');\n        item.setAttribute('part', 'item');\n        item.classList.add('item');\n\n        let indent = document.createElement('div');\n        indent.classList.add('indent');\n\n        let button = document.createElement('div');\n        button.classList.add('toggle');\n\n        let checkbox = document.createElement('wje-checkbox');\n        if (this.selected) checkbox.setAttribute('checked', '');\n\n        let label = document.createElement('div');\n        label.setAttribute('part', 'label');\n        label.classList.add('content');\n\n        let slotElement = document.createElement('slot');\n\n        let children = document.createElement('div');\n        children.classList.add('children');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'children');\n        children.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        item.appendChild(slotStart);\n        item.appendChild(indent);\n\n        if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n            if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n                let expandIcon = document.createElement('wje-icon');\n                expandIcon.setAttribute('name', 'chevron-right');\n                expandIcon.setAttribute('slot', 'expand');\n\n                this.appendChild(expandIcon);\n            }\n\n            if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n                let collapseIcon = document.createElement('wje-icon');\n                collapseIcon.setAttribute('name', 'chevron-down');\n                collapseIcon.setAttribute('slot', 'collapse');\n\n                this.appendChild(collapseIcon);\n            }\n\n            let expandSlot = document.createElement('slot');\n            expandSlot.setAttribute('name', 'expand');\n\n            let collapseSlot = document.createElement('slot');\n            collapseSlot.setAttribute('name', 'collapse');\n\n            button.appendChild(expandSlot);\n            button.appendChild(collapseSlot);\n        }\n\n        item.appendChild(button);\n\n        if (this.selection === 'multiple') item.appendChild(checkbox);\n\n        label.appendChild(slotElement);\n        item.appendChild(label);\n        item.appendChild(slotEnd);\n\n        native.appendChild(item);\n        native.appendChild(children);\n\n        fragment.appendChild(native);\n\n        this.checkbox = checkbox;\n        this.native = native;\n        this.button = button;\n        this.childrenElement = children;\n        this.childrenSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Executes operations to be performed after the draw action is completed.\n     * If the state indicates it is expanded, toggles its children.\n     * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        this.setChildrenExpanded(this.expanded, { syncAttribute: false });\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n        this.setAttribute('tabindex', '0');\n        this.syncAria();\n    }\n\n    /**\n     * Determines if the current item is a nested item within a tree structure.\n     * Checks if the item's parent element exists and is also a tree item.\n     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n     */\n    isNestedItem() {\n        const parent = this.parentElement;\n        return !!parent && this.isTreeItem(parent);\n    }\n\n    /**\n     * Calculates nesting depth based on ancestor tree items.\n     * Root items have depth 0, direct children depth 1, etc.\n     * @returns {number}\n     */\n    getNestingDepth() {\n        let depth = 0;\n        let current = this.parentElement;\n\n        while (current) {\n            if (this.isTreeItem(current)) depth += 1;\n            current = current.parentElement;\n        }\n\n        return depth;\n    }\n\n    /**\n     * Checks whether the given node is a tree item.\n     * @param {object} node The node to check.\n     * @returns {boolean} Returns true when the node is a tree item element.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.localName === 'wje-tree-item';\n    }\n\n    /**\n     * Toggles the visibility state of the children element and updates the class of the parent element.\n     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n     * effectively showing or hiding the children and indicating the expanded state.\n     * @returns {void} Does not return a value.\n     */\n    toggleChildren() {\n        this.setChildrenExpanded(!this.childrenElement.classList.contains('open'));\n    }\n\n    /**\n     * Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n     * @param {boolean} expanded Whether child items should be visible.\n     * @param {object} [options] Configuration for attribute syncing.\n     * @param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * @returns {void}\n     */\n    setChildrenExpanded(expanded, options = {}) {\n        const syncAttribute = options.syncAttribute ?? true;\n\n        this.childrenElement?.classList.toggle('open', expanded);\n        this.native?.classList.toggle('expanded', expanded);\n\n        if (syncAttribute) {\n            if (expanded) this.setAttribute('expanded', '');\n            else this.removeAttribute('expanded');\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n        const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n        if (this.selection === 'multiple') {\n            const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n            this.setAriaState({\n                role: 'treeitem',\n                checked,\n                expanded,\n            });\n        } else {\n            this.setAriaState({\n                role: 'treeitem',\n                selected: this.selected,\n                expanded,\n            });\n        }\n    }\n\n    /**\n     * Retrieves the child items from the `childrenSlot` that match specific criteria.\n     * @param {object} [options] Configuration options.\n     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n     */\n    getChildrenItems(options = {}) {\n        const includeDisabled = options.includeDisabled ?? true;\n\n        const assigned = this.childrenSlot\n            ? this.childrenSlot.assignedElements({ flatten: true })\n            : [];\n        const direct = assigned.length\n            ? assigned\n            : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n        return direct.filter(\n            (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n        );\n    }\n\n    /**\n     * Retrieves all descendant children of the current object in a flattened array structure.\n     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n     * @returns {Array} An array containing all children and their descendants in a flat structure.\n     */\n    getAllChildrenFlat(options = {}) {\n        const directChildren = this.getChildrenItems(options);\n        return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n    }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-indent-guid-style=solid] - Defines the guide border style for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-color=var(--wje-border-color)] - Defines the guide border color for nested tree items.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item's container.\n * @cssproperty [--wje-tree-item-border-width=0px] - Sets the border width of the tree item row.\n * @cssproperty [--wje-tree-item-border-style=solid] - Sets the border style of the tree item row.\n * @cssproperty [--wje-tree-item-border-color=transparent] - Sets the border color of the tree item row.\n * @cssproperty [--wje-tree-item-border-color-hover=transparent] - Sets the border color of the hovered tree item row.\n * @cssproperty [--wje-tree-item-border-color-selected=transparent] - Sets the border color of the selected tree item row.\n * @cssproperty [--wje-tree-item-drop-color=var(--wje-color-primary)] - Sets the color of reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-line-width=2px] - Sets the thickness of before/after reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-line-border-radius=var(--wje-border-radius-pill)] - Sets the radius of before/after reorder drop indicators.\n * @cssproperty [--wje-tree-item-drop-border-width=1px] - Sets the width of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-style=solid] - Sets the style of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-color=var(--wje-tree-item-drop-color)] - Sets the color of the inside reorder drop border.\n * @cssproperty [--wje-tree-item-drop-border-radius=inherit] - Sets the radius of the inside reorder drop border.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n    /**\n     * Creates an instance of TreeItem.\n     */\n    constructor() {\n        super();\n\n        this._selection = 'single';\n    }\n\n    /**\n     * Sets the expanded state of the element. When set to a truthy value,\n     * the 'expanded' attribute will be added to the element. When set to a falsy\n     * value, the 'expanded' attribute will be removed.\n     * @param {boolean} value A boolean value indicating whether the\n     * element should be expanded (true) or collapsed (false).\n     */\n    set expanded(value) {\n        if (value) {\n            this.setAttribute('expanded', '');\n        } else {\n            this.removeAttribute('expanded');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'expanded' state for the current element.\n     * This getter checks whether the 'expanded' attribute is present on the element.\n     * If the attribute exists, it returns true, representing that the element is expanded.\n     * Otherwise, it returns false, indicating that the element is not expanded.\n     * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n     */\n    get expanded() {\n        return this.hasAttribute('expanded');\n    }\n\n    /**\n     * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n     * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n     */\n    set selected(value) {\n        this.removeAttribute('selected');\n\n        if (value) this.setAttribute('selected', '');\n    }\n\n    /**\n     * Getter method for determining if the 'selected' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n     */\n    get selected() {\n        return this.hasAttribute('selected');\n    }\n\n    /**\n     * Sets the selection mode for the component.\n     * @param {string} value The selection mode to apply. Defaults to 'single'\n     * if no value is provided. Possible options may be\n     * specific to the implementation of the component\n     * (e.g., 'single', 'multiple').\n     */\n    set selection(value) {\n        this._selection = value || 'single';\n    }\n\n    /**\n     * Retrieves the current selection.\n     * @returns {*} The value of the current selection.\n     */\n    get selection() {\n        return this._selection;\n    }\n\n    /**\n     * Sets or removes the 'indeterminate' attribute based on the provided value.\n     * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n     * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n     * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n     */\n    set indeterminate(value) {\n        this.removeAttribute('indeterminate');\n\n        if (value) this.setAttribute('indeterminate', '');\n    }\n\n    /**\n     * Retrieves the state of the indeterminate attribute.\n     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n     */\n    get indeterminate() {\n        return this.hasAttribute('indeterminate');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'TreeItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    connectedCallback() {\n        super.connectedCallback?.();\n        this.syncNestingState();\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['selected', 'indeterminate', 'expanded'];\n    }\n\n    /**\n     * Handles updates when observed attributes of the element are changed.\n     * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before the change.\n     * @param {string|null} newValue The new value of the attribute after the change.\n     * @returns {void}\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'expanded') {\n            this.setChildrenExpanded(this.expanded, { syncAttribute: false });\n            return;\n        }\n\n        if (!this.checkbox) {\n            this.syncAria();\n            return;\n        }\n        if (name === 'selected') {\n            // this.checkbox.removeAttribute('indeterminate');\n            if (this.selected) {\n                this.checkbox.checked = true;\n            } else {\n                this.checkbox.checked = false;\n            }\n        }\n\n        if (name === 'indeterminate' && !this.selected) {\n            this.checkbox.removeAttribute('indeterminate');\n            this.checkbox.removeAttribute('checked');\n\n            if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Custom logic executed before the draw process begins.\n     * Determines and sets the appropriate slot if the current item is nested.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.syncNestingState();\n\n        if (this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n            this.setAttribute('slot-hover-visible', '');\n    }\n\n    /**\n     * Synchronizes the nesting-related state on the host element.\n     * Sets the \"slot\" to children for nested items and updates\n     * the nesting depth used to compute visual indentation.\n     * @returns {void}\n     */\n    syncNestingState() {\n        const depth = this.getNestingDepth();\n        this.style.setProperty('--wje-tree-item-depth', String(depth));\n\n        if (depth > 0) {\n            this.slot = 'children';\n        } else if (this.getAttribute('slot') === 'children') {\n            this.removeAttribute('slot');\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment representing the structure of a tree item component.\n     * The method constructs the DOM elements including the native container, indentation, toggle button,\n     * selection checkbox, label, and children container, along with their respective slots and attributes.\n     * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n     * child components.\n     * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n        let slotStart = document.createElement('slot');\n        slotStart.setAttribute('name', 'start');\n\n        let item = document.createElement('div');\n        item.setAttribute('part', 'item');\n        item.classList.add('item');\n\n        let indent = document.createElement('div');\n        indent.classList.add('indent');\n\n        let button = document.createElement('div');\n        button.classList.add('toggle');\n\n        let checkbox = document.createElement('wje-checkbox');\n        if (this.selected) checkbox.setAttribute('checked', '');\n\n        let label = document.createElement('div');\n        label.setAttribute('part', 'label');\n        label.classList.add('content');\n\n        let slotElement = document.createElement('slot');\n\n        let children = document.createElement('div');\n        children.classList.add('children');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'children');\n        children.appendChild(slot);\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        item.appendChild(slotStart);\n        item.appendChild(indent);\n\n        if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n            if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n                let expandIcon = document.createElement('wje-icon');\n                expandIcon.setAttribute('name', 'chevron-right');\n                expandIcon.setAttribute('slot', 'expand');\n\n                this.appendChild(expandIcon);\n            }\n\n            if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n                let collapseIcon = document.createElement('wje-icon');\n                collapseIcon.setAttribute('name', 'chevron-down');\n                collapseIcon.setAttribute('slot', 'collapse');\n\n                this.appendChild(collapseIcon);\n            }\n\n            let expandSlot = document.createElement('slot');\n            expandSlot.setAttribute('name', 'expand');\n\n            let collapseSlot = document.createElement('slot');\n            collapseSlot.setAttribute('name', 'collapse');\n\n            button.appendChild(expandSlot);\n            button.appendChild(collapseSlot);\n        }\n\n        item.appendChild(button);\n\n        if (this.selection === 'multiple') item.appendChild(checkbox);\n\n        label.appendChild(slotElement);\n        item.appendChild(label);\n        item.appendChild(slotEnd);\n\n        native.appendChild(item);\n        native.appendChild(children);\n\n        fragment.appendChild(native);\n\n        this.checkbox = checkbox;\n        this.native = native;\n        this.button = button;\n        this.childrenElement = children;\n        this.childrenSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Executes operations to be performed after the draw action is completed.\n     * If the state indicates it is expanded, toggles its children.\n     * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        this.setChildrenExpanded(this.expanded, { syncAttribute: false });\n\n        this.button.addEventListener('click', this.toggleChildren.bind(this));\n        this.setAttribute('tabindex', '0');\n        this.syncAria();\n    }\n\n    /**\n     * Determines if the current item is a nested item within a tree structure.\n     * Checks if the item's parent element exists and is also a tree item.\n     * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n     */\n    isNestedItem() {\n        const parent = this.parentElement;\n        return !!parent && this.isTreeItem(parent);\n    }\n\n    /**\n     * Calculates nesting depth based on ancestor tree items.\n     * Root items have depth 0, direct children depth 1, etc.\n     * @returns {number}\n     */\n    getNestingDepth() {\n        let depth = 0;\n        let current = this.parentElement;\n\n        while (current) {\n            if (this.isTreeItem(current)) depth += 1;\n            current = current.parentElement;\n        }\n\n        return depth;\n    }\n\n    /**\n     * Checks whether the given node is a tree item.\n     * @param {object} node The node to check.\n     * @returns {boolean} Returns true when the node is a tree item element.\n     */\n    isTreeItem(node) {\n        return node instanceof Element && node.localName === 'wje-tree-item';\n    }\n\n    /**\n     * Toggles the visibility state of the children element and updates the class of the parent element.\n     * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n     * effectively showing or hiding the children and indicating the expanded state.\n     * @returns {void} Does not return a value.\n     */\n    toggleChildren() {\n        this.setChildrenExpanded(!this.childrenElement.classList.contains('open'));\n    }\n\n    /**\n     * Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n     * @param {boolean} expanded Whether child items should be visible.\n     * @param {object} [options] Configuration for attribute syncing.\n     * @param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * @returns {void}\n     */\n    setChildrenExpanded(expanded, options = {}) {\n        const syncAttribute = options.syncAttribute ?? true;\n\n        this.childrenElement?.classList.toggle('open', expanded);\n        this.native?.classList.toggle('expanded', expanded);\n\n        if (syncAttribute) {\n            if (expanded) this.setAttribute('expanded', '');\n            else this.removeAttribute('expanded');\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n        const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n        if (this.selection === 'multiple') {\n            const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n            this.setAriaState({\n                role: 'treeitem',\n                checked,\n                expanded,\n            });\n        } else {\n            this.setAriaState({\n                role: 'treeitem',\n                selected: this.selected,\n                expanded,\n            });\n        }\n    }\n\n    /**\n     * Retrieves the child items from the `childrenSlot` that match specific criteria.\n     * @param {object} [options] Configuration options.\n     * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n     */\n    getChildrenItems(options = {}) {\n        const includeDisabled = options.includeDisabled ?? true;\n\n        const assigned = this.childrenSlot\n            ? this.childrenSlot.assignedElements({ flatten: true })\n            : [];\n        const direct = assigned.length\n            ? assigned\n            : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n        return direct.filter(\n            (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n        );\n    }\n\n    /**\n     * Retrieves all descendant children of the current object in a flattened array structure.\n     * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n     * @returns {Array} An array containing all children and their descendants in a flat structure.\n     */\n    getAllChildrenFlat(options = {}) {\n        const directChildren = this.getChildrenItems(options);\n        return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n    }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":["TreeItem","WJElement","super","className","this","_selection","value","setAttribute","removeAttribute","expanded","hasAttribute","selected","cssStyleSheet","setupAttributes","isShadowRoot","syncAria","connectedCallback","syncNestingState","name","oldValue","newValue","checkbox","checked","indeterminate","setChildrenExpanded","syncAttribute","beforeDraw","closest","depth","getNestingDepth","style","setProperty","String","slot","getAttribute","draw","fragment","document","createDocumentFragment","native","createElement","classList","add","selection","slotStart","item","indent","button","label","slotElement","children","appendChild","slotEnd","querySelectorAll","length","expandIcon","collapseIcon","expandSlot","collapseSlot","childrenElement","childrenSlot","addEventListener","toggleChildren","bind","parent","parentElement","isTreeItem","current","node","Element","localName","contains","options","toggle","setAriaState","role","includeDisabled","assigned","assignedElements","flatten","Array","from","filter","disabled","getChildrenItems","flatMap","child","getAllChildrenFlat","define"],"mappings":"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"}