@kdcloudjs/shoelace 1.0.48 → 1.0.50

package/dist/chunks/chunk.DID52HC4.js

@@ -0,0 +1,1072 @@
+import {
+  SlTree
+} from "./chunk.QNOQ7TYN.js";
+import {
+  tree_select_styles_default
+} from "./chunk.5YZVM2QU.js";
+import {
+  SlTreeItem
+} from "./chunk.4EHP3TVL.js";
+import {
+  SlTag
+} from "./chunk.7LUVZRV6.js";
+import {
+  form_control_styles_default
+} from "./chunk.2ASGWQBH.js";
+import {
+  SlPopup
+} from "./chunk.BMJNOJA2.js";
+import {
+  FormControlController
+} from "./chunk.WBWPWG4N.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.WO7ALQNH.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.VHWATTYS.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  LocalizeController
+} from "./chunk.YO2LOYG6.js";
+import {
+  SlIcon
+} from "./chunk.WRA2N5YD.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.6LSM36Q2.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/tree-select/tree-select.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+var SlTreeSelect = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["sl-blur", "sl-input"]
+    });
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "label",
+      "tree-expand-icon",
+      "tree-collapse-icon"
+    );
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.isHovered = false;
+    this.displayLabel = "";
+    this.valueHasChanged = false;
+    this.searchValue = "";
+    /** Tracks which node values have been manually expanded (for lazy load). */
+    this.expandedNodes = /* @__PURE__ */ new Set();
+    this.name = "";
+    this._value = "";
+    this.defaultValue = "";
+    this.size = "medium";
+    this.placeholder = "";
+    this.multiple = false;
+    this.maxOptionsVisible = 3;
+    this.disabled = false;
+    this.clearable = false;
+    this.open = false;
+    this.hoist = false;
+    this.filled = false;
+    this.pill = false;
+    this.label = "";
+    this.layout = "vertical";
+    this.variant = "outlined";
+    this.placement = "bottom-start";
+    this.helpText = "";
+    this.required = false;
+    this.form = "";
+    this.treeData = [];
+    this.showSearch = false;
+    this.treeDefaultExpandAll = false;
+    this.treeCheckable = false;
+    this.showCheckedStrategy = "all";
+    this.treeLine = false;
+    this.getTag = (node) => {
+      return html`
+      <sl-tag
+        part="tag"
+        exportparts="
+          base:tag__base,
+          content:tag__content,
+          remove-button:tag__remove-button,
+          remove-button__base:tag__remove-button__base
+        "
+        size=${this.size}
+        removable
+      >
+        ${this.renderNodeTitle(node)}
+      </sl-tag>
+    `;
+    };
+  }
+  /** Whether search is enabled (showSearch is truthy). */
+  get isSearchEnabled() {
+    return !!this.showSearch;
+  }
+  /** Get the showSearch config object (or defaults if showSearch is just `true`). */
+  get searchConfig() {
+    if (typeof this.showSearch === "object") return this.showSearch;
+    return {};
+  }
+  /** Resolved autoClearSearchValue from showSearch config. Defaults to true. */
+  get autoClearSearchValue() {
+    var _a;
+    return (_a = this.searchConfig.autoClearSearchValue) != null ? _a : true;
+  }
+  /** Resolved filterTreeNode from showSearch config. Defaults to true. */
+  get filterTreeNode() {
+    var _a;
+    return (_a = this.searchConfig.filterTreeNode) != null ? _a : true;
+  }
+  /** Resolved treeNodeFilterProp from showSearch config. Defaults to 'value'. */
+  get treeNodeFilterProp() {
+    var _a;
+    return (_a = this.searchConfig.treeNodeFilterProp) != null ? _a : "value";
+  }
+  /** Resolved controlled search value from showSearch config. */
+  get searchValueProp() {
+    return this.searchConfig.searchValue;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    var _a;
+    if (this.multiple) {
+      val = Array.isArray(val) ? val : val ? val.split(" ") : [];
+    } else {
+      val = Array.isArray(val) ? (_a = val[0]) != null ? _a : "" : val;
+    }
+    if (this._value === val) return;
+    this.valueHasChanged = true;
+    this._value = val;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    var _a, _b;
+    return (_b = (_a = this.valueInput) == null ? void 0 : _a.validity) != null ? _b : { valid: true };
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    var _a, _b;
+    return (_b = (_a = this.valueInput) == null ? void 0 : _a.validationMessage) != null ? _b : "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+  }
+  addOpenListeners() {
+    var _a;
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+    if ("CloseWatcher" in window) {
+      (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        if (this.open) {
+          this.open = false;
+          this.displayInput.focus({ preventScroll: true });
+        }
+      };
+    }
+  }
+  removeOpenListeners() {
+    var _a;
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    if (this.isSearchEnabled && this.searchValue && this.searchValueProp === void 0) {
+      this.searchValue = "";
+    }
+    this.emit("sl-blur");
+  }
+  handleDocumentMouseDown(event) {
+    const path = event.composedPath();
+    if (this.combobox && !path.includes(this.combobox) && this.dropdown && !path.includes(this.dropdown)) {
+      this.open = false;
+    }
+  }
+  handleLabelClick() {
+    this.displayInput.focus();
+  }
+  handleComboboxMouseDown(event) {
+    const path = event.composedPath();
+    const isIconButton = path.some((el) => el instanceof Element && el.tagName.toLowerCase() === "sl-icon-button");
+    if (this.disabled || isIconButton) return;
+    if (!this.isSearchEnabled) {
+      event.preventDefault();
+    }
+    this.displayInput.focus({ preventScroll: true });
+    this.open = !this.open;
+  }
+  handleComboboxKeyDown(event) {
+    if (event.key === "Tab") return;
+    if (event.key === "Escape" && this.open) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.open = false;
+      this.displayInput.focus({ preventScroll: true });
+      return;
+    }
+    if (event.key === "Backspace" && this.multiple && !this.disabled) {
+      if (!this.searchValue) {
+        const values = Array.isArray(this.value) ? [...this.value] : [];
+        if (values.length > 0) {
+          event.preventDefault();
+          const removedValue = values[values.length - 1];
+          const node = this.findNodeByValue(removedValue);
+          if ((node == null ? void 0 : node.children) && node.children.length > 0) {
+            const descendantValues = new Set(this.getAllDescendantValues(node));
+            this.value = values.filter((v) => !descendantValues.has(v));
+          } else {
+            this.value = values.slice(0, -1);
+          }
+          this.valueHasChanged = true;
+          this.updateDisplayLabel();
+          this.updateComplete.then(() => {
+            this.emit("sl-input");
+            this.emit("sl-change");
+          });
+        }
+      }
+      return;
+    }
+    const openKeys = this.isSearchEnabled ? ["Enter", "ArrowDown", "ArrowUp"] : ["Enter", " ", "ArrowDown", "ArrowUp"];
+    if (openKeys.includes(event.key)) {
+      event.preventDefault();
+      if (!this.open) {
+        this.open = true;
+      }
+    }
+  }
+  handleClearClick(event) {
+    event.stopPropagation();
+    this.valueHasChanged = true;
+    if (this.value !== "" && this.value.length !== 0) {
+      this.value = this.multiple ? [] : "";
+      this.displayLabel = "";
+      this.clearTreeSelection();
+      this.displayInput.focus({ preventScroll: true });
+      this.updateComplete.then(() => {
+        this.emit("sl-clear");
+        this.emit("sl-input");
+        this.emit("sl-change");
+      });
+    }
+  }
+  /** Clear the selection state of all tree items including indeterminate state. */
+  clearTreeSelection() {
+    var _a;
+    const treeItems = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sl-tree-item");
+    treeItems == null ? void 0 : treeItems.forEach((item) => {
+      const treeItem = item;
+      treeItem.selected = false;
+      if ("indeterminate" in treeItem) {
+        treeItem.indeterminate = false;
+      }
+    });
+  }
+  handleClearMouseDown(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  findNodeByValue(value, nodes = this.treeData) {
+    for (const node of nodes) {
+      if (node.value === value) return node;
+      if (node.children) {
+        const found = this.findNodeByValue(value, node.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+  /** Get the plain text label for a node (for search filtering and form value). */
+  getNodeTextLabel(node) {
+    if (typeof node.title === "string") return node.title;
+    return node.value;
+  }
+  /** Render a node's title as content (supports string, HTMLElement, TemplateResult). */
+  renderNodeTitle(node) {
+    if (typeof node.title === "string") return node.title;
+    if (node.title instanceof HTMLElement) return html`${node.title.cloneNode(true)}`;
+    return node.title;
+  }
+  /** Get the value to display in the search input. */
+  getSearchInputValue() {
+    if (this.open) {
+      return this.searchValue;
+    }
+    if (typeof this.displayLabel === "string" && this.displayLabel) {
+      return this.displayLabel;
+    }
+    if (this.displayLabel && this.value) {
+      return Array.isArray(this.value) ? this.value.join(", ") : this.value;
+    }
+    return "";
+  }
+  /** Get the placeholder for the search input. Shows selected value text when focused, otherwise the default placeholder. */
+  getSearchInputPlaceholder() {
+    if (this.open && this.value && this.value.length > 0) {
+      if (typeof this.displayLabel === "string" && this.displayLabel) {
+        return this.displayLabel;
+      }
+      return Array.isArray(this.value) ? this.value.join(", ") : this.value;
+    }
+    return this.placeholder;
+  }
+  /** Highlight matching search text in a string title. */
+  highlightText(text, search) {
+    if (!search) return html`${text}`;
+    const index = text.toLowerCase().indexOf(search.toLowerCase());
+    if (index === -1) return html`${text}`;
+    const before = text.slice(0, index);
+    const match = text.slice(index, index + search.length);
+    const after = text.slice(index + search.length);
+    return html`${before}<span
+        style="color: var(--sl-color-primary-600, #5582f3); font-weight: 600; background: transparent;"
+        >${match}</span
+      >${after}`;
+  }
+  getAllLeafValues(node) {
+    if (!node.children || node.children.length === 0) return [node.value];
+    return node.children.flatMap((child) => this.getAllLeafValues(child));
+  }
+  getAllDescendantValues(node) {
+    const values = [node.value];
+    if (node.children) {
+      for (const child of node.children) {
+        values.push(...this.getAllDescendantValues(child));
+      }
+    }
+    return values;
+  }
+  isAllChildrenSelected(node, selectedSet) {
+    if (!node.children || node.children.length === 0) return selectedSet.has(node.value);
+    return node.children.every((child) => this.isAllChildrenSelected(child, selectedSet));
+  }
+  getDisplayValues() {
+    const values = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+    if (!this.multiple || this.showCheckedStrategy === "all") return values;
+    const selectedSet = new Set(values);
+    if (this.showCheckedStrategy === "parent") {
+      const result = [];
+      const addParentOnly = (nodes) => {
+        for (const node of nodes) {
+          if (selectedSet.has(node.value) && node.children && node.children.length > 0 && this.isAllChildrenSelected(node, selectedSet)) {
+            result.push(node.value);
+          } else if (node.children) {
+            addParentOnly(node.children);
+          } else if (selectedSet.has(node.value)) {
+            result.push(node.value);
+          }
+        }
+      };
+      addParentOnly(this.treeData);
+      return result;
+    }
+    if (this.showCheckedStrategy === "child") {
+      return values.filter((v) => {
+        const node = this.findNodeByValue(v);
+        return node && (!node.children || node.children.length === 0);
+      });
+    }
+    return values;
+  }
+  handleTreeSelectionChange(event) {
+    var _a;
+    event.stopPropagation();
+    const selection = event.detail.selection;
+    const oldValue = this.value;
+    this.valueHasChanged = true;
+    if (this.multiple) {
+      this.value = selection.map((item) => item.getAttribute("data-value") || "").filter(Boolean);
+    } else {
+      const selected = selection[0];
+      if (selected) {
+        this.value = selected.getAttribute("data-value") || "";
+        const node = this.findNodeByValue(this.value);
+        this.displayLabel = node ? node.title : ((_a = selected.textContent) == null ? void 0 : _a.trim()) || "";
+        this.open = false;
+      }
+    }
+    if (this.autoClearSearchValue && this.searchValue && this.searchValueProp === void 0) {
+      this.searchValue = "";
+    }
+    this.updateDisplayLabel();
+    if (this.value !== oldValue) {
+      this.updateComplete.then(() => {
+        this.emit("sl-input");
+        this.emit("sl-change");
+      });
+    }
+  }
+  updateDisplayLabel() {
+    if (this.multiple) {
+      const values = Array.isArray(this.value) ? this.value : [];
+      if (values.length === 0) {
+        this.displayLabel = "";
+      } else {
+        this.displayLabel = this.localize.term("numOptionsSelected", values.length);
+      }
+    } else {
+      const val = Array.isArray(this.value) ? this.value[0] : this.value;
+      if (!val) {
+        this.displayLabel = "";
+      } else {
+        const node = this.findNodeByValue(val);
+        this.displayLabel = node ? node.title : val;
+      }
+    }
+  }
+  handleTagRemove(event, nodeValue) {
+    event.stopPropagation();
+    this.valueHasChanged = true;
+    if (!this.disabled) {
+      const values = Array.isArray(this.value) ? [...this.value] : [];
+      const node = this.findNodeByValue(nodeValue);
+      if ((node == null ? void 0 : node.children) && node.children.length > 0) {
+        const descendantValues = new Set(this.getAllDescendantValues(node));
+        this.value = values.filter((v) => !descendantValues.has(v));
+      } else {
+        this.value = values.filter((v) => v !== nodeValue);
+      }
+      this.updateDisplayLabel();
+      this.updateComplete.then(() => {
+        this.emit("sl-input");
+        this.emit("sl-change");
+      });
+    }
+  }
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchValue = target.value;
+    this.emit("sl-search", { detail: { value: target.value } });
+    if (target.value && !this.open) {
+      this.open = true;
+    }
+  }
+  filterTreeData(nodes, search) {
+    if (!search || this.filterTreeNode === false) return nodes;
+    const matchNode = (node) => {
+      var _a;
+      if (typeof this.filterTreeNode === "function") {
+        return this.filterTreeNode(search, node);
+      }
+      const prop = this.treeNodeFilterProp;
+      const text = prop === "title" ? this.getNodeTextLabel(node) : String((_a = node[prop]) != null ? _a : node.value);
+      return text.toUpperCase().includes(search.toUpperCase());
+    };
+    const result = [];
+    for (const node of nodes) {
+      const titleMatch = matchNode(node);
+      const filteredChildren = node.children ? this.filterTreeData(node.children, search) : [];
+      if (titleMatch || filteredChildren.length > 0) {
+        result.push(__spreadProps(__spreadValues({}, node), {
+          children: filteredChildren.length > 0 ? filteredChildren : node.children && titleMatch ? node.children : void 0
+        }));
+      }
+    }
+    return result;
+  }
+  get tags() {
+    const displayValues = this.getDisplayValues();
+    return displayValues.map((val, index) => {
+      const node = this.findNodeByValue(val);
+      if (!node) return html``;
+      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const tag = this.getTag(node, index);
+        return html`<div @sl-remove=${(e) => this.handleTagRemove(e, val)}>
+          ${typeof tag === "string" ? unsafeHTML(tag) : tag}
+        </div>`;
+      } else if (index === this.maxOptionsVisible) {
+        return html`<sl-tag size=${this.size}>+${displayValues.length - index}</sl-tag>`;
+      }
+      return html``;
+    });
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.open = false;
+      this.handleOpenChange();
+    }
+  }
+  handleValueChange() {
+    if (!this.valueHasChanged) {
+      this.value = this.defaultValue;
+    }
+    this.updateDisplayLabel();
+  }
+  handleTreeDataChange() {
+    if (!this.valueHasChanged && this.defaultValue) {
+      const cached = this.valueHasChanged;
+      this.value = this.defaultValue;
+      this.valueHasChanged = cached;
+    }
+    this.updateDisplayLabel();
+  }
+  handleShowSearchChange() {
+    if (this.searchValueProp !== void 0) {
+      this.searchValue = this.searchValueProp;
+    }
+  }
+  async handleOpenChange() {
+    if (this.open && !this.disabled) {
+      this.emit("sl-show");
+      this.addOpenListeners();
+      if (this.searchValueProp === void 0) {
+        this.searchValue = "";
+      }
+      await stopAnimations(this);
+      this.dropdown.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, "tree-select.show", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide");
+      this.removeOpenListeners();
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, "tree-select.hide", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.dropdown.hidden = true;
+      this.popup.active = false;
+      this.emit("sl-after-hide");
+    }
+  }
+  async show() {
+    if (this.open || this.disabled) return void 0;
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  async hide() {
+    if (!this.open || this.disabled) return void 0;
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  checkValidity() {
+    var _a, _b;
+    return (_b = (_a = this.valueInput) == null ? void 0 : _a.checkValidity()) != null ? _b : true;
+  }
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  reportValidity() {
+    var _a, _b;
+    return (_b = (_a = this.valueInput) == null ? void 0 : _a.reportValidity()) != null ? _b : true;
+  }
+  setCustomValidity(message) {
+    if (this.valueInput) {
+      this.valueInput.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+  focus(options) {
+    var _a;
+    (_a = this.displayInput) == null ? void 0 : _a.focus(options);
+  }
+  blur() {
+    var _a;
+    (_a = this.displayInput) == null ? void 0 : _a.blur();
+  }
+  /**
+   * Load children for a lazy node. Call this from your `sl-lazy-load` event handler.
+   * It updates the node's children in `treeData`, removes `lazy`, and expands the node.
+   */
+  loadChildren(parentValue, children) {
+    const updateNode = (nodes) => {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].value === parentValue) {
+          nodes[i] = __spreadProps(__spreadValues({}, nodes[i]), { children, lazy: false });
+          return true;
+        }
+        if (nodes[i].children && updateNode(nodes[i].children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const newData = [...this.treeData];
+    updateNode(newData);
+    this.expandedNodes.add(parentValue);
+    this.treeData = newData;
+  }
+  handleLazyLoad(event) {
+    var _a;
+    const treeItem = event.target;
+    const nodeValue = ((_a = treeItem == null ? void 0 : treeItem.getAttribute) == null ? void 0 : _a.call(treeItem, "data-value")) || "";
+    this.emit("sl-lazy-load", { detail: { value: nodeValue, item: treeItem } });
+  }
+  handleTreeIconSlotChange() {
+    this.requestUpdate();
+  }
+  /** Clone the user-provided tree expand/collapse icons for the sl-tree's slots. */
+  getTreeIconSlotContent(slotName) {
+    var _a, _b;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
+    const nodes = (_b = slot == null ? void 0 : slot.assignedElements({ flatten: true })) != null ? _b : [];
+    if (nodes.length === 0) return nothing;
+    const targetSlot = slotName === "tree-expand-icon" ? "expand-icon" : "collapse-icon";
+    return html`${nodes.map((n) => {
+      const clone = n.cloneNode(true);
+      clone.setAttribute("slot", targetSlot);
+      return html`${clone}`;
+    })}`;
+  }
+  renderTreeItems(nodes, isFiltered = false) {
+    const selectedValues = new Set(Array.isArray(this.value) ? this.value : this.value ? [this.value] : []);
+    return nodes.map((node) => {
+      var _a, _b;
+      const hasChildren = node.children && node.children.length > 0;
+      const isExpanded = this.treeDefaultExpandAll || isFiltered || this.expandedNodes.has(node.value);
+      const isSelected = selectedValues.has(node.value);
+      const isDisabled = (_a = node.disabled) != null ? _a : false;
+      let titleContent;
+      if (typeof node.title === "string") {
+        titleContent = this.searchValue ? this.highlightText(node.title, this.searchValue) : node.title;
+      } else if (node.title instanceof HTMLElement) {
+        titleContent = html`${node.title.cloneNode(true)}`;
+      } else {
+        titleContent = node.title;
+      }
+      let iconContent = nothing;
+      if (node.icon) {
+        if (typeof node.icon === "string") {
+          iconContent = html`<sl-icon
+            name=${node.icon}
+            style="margin-inline-end: var(--sl-spacing-x-small, 0.5rem);"
+          ></sl-icon>`;
+        } else if (node.icon instanceof HTMLElement) {
+          iconContent = html`${node.icon.cloneNode(true)}`;
+        } else {
+          iconContent = node.icon;
+        }
+      }
+      return html`
+        <sl-tree-item
+          data-value=${node.value}
+          ?expanded=${isExpanded && hasChildren}
+          ?selected=${isSelected}
+          ?disabled=${isDisabled}
+          ?lazy=${(_b = node.lazy) != null ? _b : false}
+        >
+          ${iconContent}${titleContent} ${hasChildren ? this.renderTreeItems(node.children, isFiltered) : nothing}
+        </sl-tree-item>
+      `;
+    });
+  }
+  render() {
+    var _a, _b;
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0 && (this.hasFocus || this.isHovered);
+    const isPlaceholderVisible = this.placeholder && this.value && this.value.length <= 0;
+    const filterValue = this.searchValueProp !== void 0 ? this.searchValueProp : this.searchValue;
+    const filteredData = this.isSearchEnabled && filterValue ? this.filterTreeData(this.treeData, filterValue) : this.treeData;
+    const treeSelection = this.multiple ? "multiple" : "single";
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText,
+      "form-control--horizontal": this.layout === "horizontal"
+    })}
+      >
+        <label
+          id="label"
+          part="form-control-label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>${this.layout === "horizontal" && hasLabel ? html`<span class="form-control__label-colon">:</span>` : ""}
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <sl-popup
+            class=${classMap({
+      "tree-select": true,
+      "tree-select--standard": !this.filled && this.variant !== "underlined",
+      "tree-select--filled": this.filled,
+      "tree-select--underlined": this.variant === "underlined",
+      "tree-select--pill": this.pill,
+      "tree-select--open": this.open,
+      "tree-select--disabled": this.disabled,
+      "tree-select--multiple": this.multiple,
+      "tree-select--searchable": this.isSearchEnabled,
+      "tree-select--focused": this.hasFocus,
+      "tree-select--placeholder-visible": !!isPlaceholderVisible,
+      "tree-select--top": (_a = this.placement) == null ? void 0 : _a.startsWith("top"),
+      "tree-select--bottom": (_b = this.placement) == null ? void 0 : _b.startsWith("bottom"),
+      "tree-select--small": this.size === "small",
+      "tree-select--medium": this.size === "medium",
+      "tree-select--large": this.size === "large"
+    })}
+            placement=${this.placement}
+            strategy=${this.hoist ? "fixed" : "absolute"}
+            distance="4"
+            flip
+            shift
+            sync="min-width"
+            auto-size="vertical"
+            auto-size-padding="10"
+          >
+            <div
+              part="combobox"
+              class="tree-select__combobox"
+              slot="anchor"
+              @keydown=${this.handleComboboxKeyDown}
+              @mousedown=${this.handleComboboxMouseDown}
+              @mouseenter=${() => this.isHovered = true}
+              @mouseleave=${() => this.isHovered = false}
+            >
+              <slot part="prefix" name="prefix" class="tree-select__prefix"></slot>
+
+              ${this.multiple && this.isSearchEnabled ? html`
+                    <div part="tags" class="tree-select__tags">
+                      ${this.tags}
+                      <input
+                        part="display-input"
+                        class="tree-select__display-input tree-select__display-input--search"
+                        type="text"
+                        role="combobox"
+                        autocomplete="off"
+                        spellcheck="false"
+                        placeholder=${!this.value || this.value.length === 0 ? this.placeholder : ""}
+                        .value=${this.open ? this.searchValue : ""}
+                        aria-controls="tree-dropdown"
+                        aria-expanded=${this.open ? "true" : "false"}
+                        aria-haspopup="tree"
+                        aria-labelledby="label"
+                        aria-disabled=${this.disabled ? "true" : "false"}
+                        aria-describedby="help-text"
+                        ?disabled=${this.disabled}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                        @input=${this.handleSearchInput}
+                      />
+                    </div>
+                  ` : this.isSearchEnabled ? html`
+                      <input
+                        part="display-input"
+                        class="tree-select__display-input tree-select__display-input--search"
+                        type="text"
+                        role="combobox"
+                        autocomplete="off"
+                        spellcheck="false"
+                        placeholder=${this.getSearchInputPlaceholder()}
+                        .value=${this.getSearchInputValue()}
+                        aria-controls="tree-dropdown"
+                        aria-expanded=${this.open ? "true" : "false"}
+                        aria-haspopup="tree"
+                        aria-labelledby="label"
+                        aria-disabled=${this.disabled ? "true" : "false"}
+                        aria-describedby="help-text"
+                        ?disabled=${this.disabled}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                        @input=${this.handleSearchInput}
+                      />
+                    ` : html`
+                      <div
+                        part="display-input"
+                        class="tree-select__display-input"
+                        role="combobox"
+                        tabindex="0"
+                        aria-controls="tree-dropdown"
+                        aria-expanded=${this.open ? "true" : "false"}
+                        aria-haspopup="tree"
+                        aria-labelledby="label"
+                        aria-disabled=${this.disabled ? "true" : "false"}
+                        aria-describedby="help-text"
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                      >
+                        ${this.displayLabel ? typeof this.displayLabel === "string" ? this.displayLabel : this.displayLabel instanceof HTMLElement ? html`${this.displayLabel.cloneNode(true)}` : this.displayLabel : html`<span class="tree-select__placeholder">${this.placeholder}</span>`}
+                      </div>
+                    `}
+              ${this.multiple && !this.isSearchEnabled ? html`<div part="tags" class="tree-select__tags">${this.tags}</div>` : ""}
+
+              <input
+                class="tree-select__value-input"
+                type="text"
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value}
+                tabindex="-1"
+                aria-hidden="true"
+                @focus=${() => this.focus()}
+                @invalid=${this.handleInvalid}
+              />
+
+              ${hasClearIcon ? html`
+                    <button
+                      part="clear-button"
+                      class="tree-select__clear"
+                      type="button"
+                      aria-label=${this.localize.term("clearEntry")}
+                      @mousedown=${this.handleClearMouseDown}
+                      @click=${this.handleClearClick}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <sl-icon name="x-lg" library="system"></sl-icon>
+                      </slot>
+                    </button>
+                  ` : ""}
+
+              <slot name="suffix" part="suffix" class="tree-select__suffix"></slot>
+
+              <slot name="expand-icon" part="expand-icon" class="tree-select__expand-icon" ?hidden=${hasClearIcon}>
+                <sl-icon library="system" name="chevron-down"></sl-icon>
+              </slot>
+            </div>
+
+            <div
+              id="tree-dropdown"
+              part="dropdown"
+              class="tree-select__dropdown"
+              role="tree"
+              aria-labelledby="label"
+              tabindex="-1"
+              @mousedown=${(e) => e.preventDefault()}
+            >
+              ${filteredData.length > 0 ? html`
+                    <sl-tree
+                      part="tree"
+                      class=${this.multiple && !this.treeCheckable ? "tree-select__tree--hide-checkboxes" : ""}
+                      selection=${treeSelection}
+                      ?show-line=${this.treeLine}
+                      @sl-selection-change=${this.handleTreeSelectionChange}
+                      @sl-lazy-load=${this.handleLazyLoad}
+                    >
+                      ${this.getTreeIconSlotContent("tree-expand-icon")}
+                      ${this.getTreeIconSlotContent("tree-collapse-icon")}
+                      ${this.renderTreeItems(filteredData, !!filterValue)}
+                    </sl-tree>
+                  ` : html`<div class="tree-select__empty">No data</div>`}
+            </div>
+          </sl-popup>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+
+        <div hidden>
+          <slot name="tree-expand-icon" @slotchange=${this.handleTreeIconSlotChange}></slot>
+          <slot name="tree-collapse-icon" @slotchange=${this.handleTreeIconSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SlTreeSelect.styles = [component_styles_default, form_control_styles_default, tree_select_styles_default];
+SlTreeSelect.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-popup": SlPopup,
+  "sl-tag": SlTag,
+  "sl-tree": SlTree,
+  "sl-tree-item": SlTreeItem
+};
+__decorateClass([
+  query(".tree-select")
+], SlTreeSelect.prototype, "popup", 2);
+__decorateClass([
+  query(".tree-select__combobox")
+], SlTreeSelect.prototype, "combobox", 2);
+__decorateClass([
+  query(".tree-select__display-input")
+], SlTreeSelect.prototype, "displayInput", 2);
+__decorateClass([
+  query(".tree-select__value-input")
+], SlTreeSelect.prototype, "valueInput", 2);
+__decorateClass([
+  query(".tree-select__dropdown")
+], SlTreeSelect.prototype, "dropdown", 2);
+__decorateClass([
+  state()
+], SlTreeSelect.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], SlTreeSelect.prototype, "isHovered", 2);
+__decorateClass([
+  state()
+], SlTreeSelect.prototype, "displayLabel", 2);
+__decorateClass([
+  state()
+], SlTreeSelect.prototype, "valueHasChanged", 2);
+__decorateClass([
+  state()
+], SlTreeSelect.prototype, "searchValue", 2);
+__decorateClass([
+  property()
+], SlTreeSelect.prototype, "name", 2);
+__decorateClass([
+  state()
+], SlTreeSelect.prototype, "value", 1);
+__decorateClass([
+  property({ attribute: "value" })
+], SlTreeSelect.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTreeSelect.prototype, "size", 2);
+__decorateClass([
+  property()
+], SlTreeSelect.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTreeSelect.prototype, "multiple", 2);
+__decorateClass([
+  property({ attribute: "max-options-visible", type: Number })
+], SlTreeSelect.prototype, "maxOptionsVisible", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTreeSelect.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTreeSelect.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTreeSelect.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTreeSelect.prototype, "hoist", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTreeSelect.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTreeSelect.prototype, "pill", 2);
+__decorateClass([
+  property()
+], SlTreeSelect.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTreeSelect.prototype, "layout", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTreeSelect.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTreeSelect.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], SlTreeSelect.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTreeSelect.prototype, "required", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTreeSelect.prototype, "form", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlTreeSelect.prototype, "treeData", 2);
+__decorateClass([
+  property({
+    attribute: "show-search",
+    converter: {
+      fromAttribute: (value) => {
+        if (value === null || value === "false") return false;
+        return true;
+      },
+      toAttribute: (value) => {
+        if (!value) return null;
+        return "";
+      }
+    }
+  })
+], SlTreeSelect.prototype, "showSearch", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "tree-default-expand-all" })
+], SlTreeSelect.prototype, "treeDefaultExpandAll", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "tree-checkable" })
+], SlTreeSelect.prototype, "treeCheckable", 2);
+__decorateClass([
+  property({ attribute: "show-checked-strategy" })
+], SlTreeSelect.prototype, "showCheckedStrategy", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "tree-line" })
+], SlTreeSelect.prototype, "treeLine", 2);
+__decorateClass([
+  property()
+], SlTreeSelect.prototype, "getTag", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlTreeSelect.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch(["defaultValue", "value"], { waitUntilFirstUpdate: true })
+], SlTreeSelect.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("treeData")
+], SlTreeSelect.prototype, "handleTreeDataChange", 1);
+__decorateClass([
+  watch("showSearch")
+], SlTreeSelect.prototype, "handleShowSearchChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlTreeSelect.prototype, "handleOpenChange", 1);
+setDefaultAnimation("tree-select.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+setDefaultAnimation("tree-select.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+
+export {
+  SlTreeSelect
+};