@kdcloudjs/shoelace 1.0.50 → 1.0.52

package/dist/chunks/chunk.DID52HC4.js

@@ -1,1072 +0,0 @@
-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
-};