@duskmoon-dev/el-cascader 0.5.0

package/dist/cjs/index.js

@@ -0,0 +1,1089 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmCascader: () => ElDmCascader
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-cascader.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var chevronDownIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+var chevronRightIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`;
+var checkIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
+var closeIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
+var searchIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`;
+var loadingIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spinner"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`;
+var styles = import_el_core.css`
+  :host {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .cascader {
+    position: relative;
+    width: 100%;
+  }
+
+  /* Trigger Button */
+  .cascader-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-height: 2.75rem;
+    padding: 0.5rem 0.75rem;
+    font-size: var(--font-size-md, 1rem);
+    line-height: 1.5;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-outline);
+    border-radius: var(--radius-md, 0.5rem);
+    cursor: pointer;
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  .cascader-trigger:hover:not(:disabled) {
+    border-color: var(--color-on-surface-variant);
+  }
+
+  .cascader-trigger:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 15%, transparent);
+  }
+
+  .cascader-trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--color-surface-container);
+  }
+
+  /* Value Display */
+  .cascader-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  .cascader-placeholder {
+    color: var(--color-on-surface-variant);
+    opacity: 0.7;
+  }
+
+  /* Tags Container (for multiple mode) */
+  .cascader-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cascader-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    max-width: 100%;
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: 1.25rem;
+    background-color: var(--color-surface-container-high, #e8e8e8);
+    color: var(--color-on-surface);
+    border-radius: 1rem;
+  }
+
+  .cascader-tag-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cascader-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 150ms ease, background-color 150ms ease;
+  }
+
+  .cascader-tag-remove svg {
+    width: 10px;
+    height: 10px;
+    display: block;
+  }
+
+  .cascader-tag-remove:hover {
+    opacity: 1;
+    background-color: color-mix(in oklch, currentColor 15%, transparent);
+  }
+
+  .cascader-tag-overflow {
+    padding: 0.125rem 0.5rem;
+    background-color: var(--color-surface-container);
+    color: var(--color-on-surface-variant);
+  }
+
+  /* Icons */
+  .cascader-arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: var(--color-on-surface-variant);
+    transition: transform 150ms ease;
+  }
+
+  .cascader-arrow svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+  }
+
+  .cascader.open .cascader-arrow {
+    transform: rotate(180deg);
+  }
+
+  .cascader-clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    color: var(--color-on-surface-variant);
+    background-color: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 150ms ease;
+  }
+
+  .cascader-clear svg {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  .cascader-clear:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  /* Dropdown - uses Popover API (top-layer requires position: fixed) */
+  .cascader-dropdown {
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-md, 0.5rem);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+    overflow: hidden;
+    display: none;
+    flex-direction: column;
+    z-index: 1000;
+  }
+
+  .cascader-dropdown:popover-open {
+    display: flex;
+  }
+
+  /* Search */
+  .cascader-search {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--color-outline-variant);
+  }
+
+  .cascader-search-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: var(--color-on-surface-variant);
+    flex-shrink: 0;
+  }
+
+  .cascader-search-icon svg {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  .cascader-search-input {
+    flex: 1;
+    padding: 0.375rem 0.5rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+    border: none;
+    border-radius: var(--radius-sm, 0.25rem);
+    outline: none;
+  }
+
+  .cascader-search-input:focus {
+    background-color: var(--color-surface-container-high);
+  }
+
+  .cascader-search-input::placeholder {
+    color: var(--color-on-surface-variant);
+    opacity: 0.7;
+  }
+
+  /* Panels Container */
+  .cascader-panels {
+    display: flex;
+    max-height: 18rem;
+  }
+
+  /* Panel */
+  .cascader-panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 10rem;
+    max-width: 14rem;
+    max-height: 18rem;
+    overflow-y: auto;
+    border-right: 1px solid var(--color-outline-variant);
+  }
+
+  .cascader-panel:last-child {
+    border-right: none;
+  }
+
+  .cascader-panel-options {
+    padding: 0.25rem;
+  }
+
+  /* Option */
+  .cascader-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-on-surface);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-sm, 0.25rem);
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 150ms ease;
+  }
+
+  .cascader-option:hover:not(.disabled) {
+    background-color: var(--color-surface-container);
+  }
+
+  .cascader-option.active {
+    background-color: var(--color-surface-container-high);
+  }
+
+  .cascader-option.selected {
+    background-color: var(--color-primary-container, #e8def8);
+    color: var(--color-on-primary-container, #1d1b20);
+  }
+
+  .cascader-option.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .cascader-option-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    background-color: transparent;
+    border: 2px solid var(--color-on-surface-variant);
+    border-radius: 0.125rem;
+    flex-shrink: 0;
+  }
+
+  .cascader-option.selected .cascader-option-checkbox {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-on-primary, white);
+  }
+
+  .cascader-option-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cascader-option-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-on-surface-variant);
+    flex-shrink: 0;
+  }
+
+  .cascader-option-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .cascader-option-loading .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* Search Results */
+  .cascader-search-results {
+    padding: 0.25rem;
+    max-height: 18rem;
+    overflow-y: auto;
+  }
+
+  .cascader-search-result {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-on-surface);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-sm, 0.25rem);
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 150ms ease;
+  }
+
+  .cascader-search-result:hover {
+    background-color: var(--color-surface-container);
+  }
+
+  .cascader-search-result.selected {
+    background-color: var(--color-primary-container, #e8def8);
+    color: var(--color-on-primary-container, #1d1b20);
+  }
+
+  .cascader-search-result-path {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cascader-search-result-separator {
+    color: var(--color-on-surface-variant);
+    margin: 0 0.25rem;
+  }
+
+  /* Empty State */
+  .cascader-empty {
+    padding: 1.5rem;
+    text-align: center;
+    color: var(--color-on-surface-variant);
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+
+  /* Size Variants */
+  :host([size="sm"]) .cascader-trigger {
+    min-height: 2.25rem;
+    padding: 0.375rem 0.5rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    border-radius: var(--radius-sm, 0.375rem);
+  }
+
+  :host([size="lg"]) .cascader-trigger {
+    min-height: 3.25rem;
+    padding: 0.625rem 1rem;
+    font-size: var(--font-size-lg, 1.125rem);
+    border-radius: var(--radius-lg, 0.625rem);
+  }
+
+  /* Validation States */
+  :host([validation-state="invalid"]) .cascader-trigger {
+    border-color: var(--color-error);
+  }
+
+  :host([validation-state="invalid"]) .cascader-trigger:focus {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 15%, transparent);
+  }
+
+  :host([validation-state="valid"]) .cascader-trigger {
+    border-color: var(--color-success);
+  }
+
+  /* Disabled State */
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .cascader-trigger {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--color-surface-container);
+  }
+`;
+
+class ElDmCascader extends import_el_core.BaseElement {
+  static properties = {
+    value: { type: String, reflect: true, default: "" },
+    placeholder: { type: String, default: "Select..." },
+    disabled: { type: Boolean, reflect: true, default: false },
+    multiple: { type: Boolean, reflect: true, default: false },
+    searchable: { type: Boolean, reflect: true, default: false },
+    clearable: { type: Boolean, reflect: true, default: false },
+    changeOnSelect: { type: Boolean, reflect: true, attribute: "change-on-select", default: false },
+    expandTrigger: { type: String, attribute: "expand-trigger", default: "click" },
+    separator: { type: String, default: " / " },
+    showAllLevels: { type: Boolean, reflect: true, attribute: "show-all-levels", default: true },
+    showCheckedStrategy: { type: String, attribute: "show-checked-strategy", default: "all" },
+    size: { type: String, reflect: true, default: "md" },
+    validationState: { type: String, reflect: true, attribute: "validation-state" },
+    options: { type: String, default: "" }
+  };
+  _isOpen = false;
+  _searchValue = "";
+  _activePath = [];
+  _selectedPaths = [];
+  _loadingKeys = new Set;
+  _options = [];
+  _loadDataFn = null;
+  _handleOutsideClick = this._onOutsideClick.bind(this);
+  _handleKeyDown = this._onKeyDown.bind(this);
+  _handleScroll = this._onScroll.bind(this);
+  _handleResize = this._onResize.bind(this);
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this._handleOutsideClick);
+    document.addEventListener("keydown", this._handleKeyDown);
+    this._parseOptionsFromAttribute();
+    this._parseValue();
+    this._setupEventDelegation();
+  }
+  _parseOptionsFromAttribute() {
+    if (this.options) {
+      try {
+        const parsed = JSON.parse(this.options);
+        if (Array.isArray(parsed)) {
+          this._options = parsed;
+        }
+      } catch {}
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._handleOutsideClick);
+    document.removeEventListener("keydown", this._handleKeyDown);
+    this._removeScrollListeners();
+  }
+  _addScrollListeners() {
+    window.addEventListener("scroll", this._handleScroll, true);
+    window.addEventListener("resize", this._handleResize);
+  }
+  _removeScrollListeners() {
+    window.removeEventListener("scroll", this._handleScroll, true);
+    window.removeEventListener("resize", this._handleResize);
+  }
+  _onScroll() {
+    if (this._isOpen) {
+      const dropdown = this.shadowRoot?.querySelector(".cascader-dropdown");
+      const trigger = this.shadowRoot?.querySelector(".cascader-trigger");
+      if (dropdown && trigger) {
+        this._positionDropdown(dropdown, trigger);
+      }
+    }
+  }
+  _onResize() {
+    if (this._isOpen) {
+      this._close();
+    }
+  }
+  setOptions(options) {
+    this._options = options;
+    this.update();
+  }
+  setLoadData(fn) {
+    this._loadDataFn = fn;
+  }
+  _parseValue() {
+    if (!this.value) {
+      this._selectedPaths = [];
+      return;
+    }
+    try {
+      const parsed = JSON.parse(this.value);
+      if (this.multiple) {
+        this._selectedPaths = Array.isArray(parsed[0]) ? parsed : [parsed];
+      } else {
+        this._selectedPaths = Array.isArray(parsed) ? [parsed] : [];
+      }
+    } catch {
+      this._selectedPaths = [];
+    }
+  }
+  _getPanels() {
+    const panels = [this._options];
+    let currentOptions = this._options;
+    for (const value of this._activePath) {
+      const option = currentOptions.find((o) => o.value === value);
+      if (option?.children && option.children.length > 0) {
+        panels.push(option.children);
+        currentOptions = option.children;
+      } else {
+        break;
+      }
+    }
+    return panels;
+  }
+  _getDisplayLabel() {
+    if (this._selectedPaths.length === 0) {
+      return "";
+    }
+    const path = this._selectedPaths[0];
+    const labels = this._getPathLabels(path);
+    if (this.showAllLevels) {
+      return labels.join(this.separator);
+    }
+    return labels[labels.length - 1] || "";
+  }
+  _getPathLabels(path) {
+    const labels = [];
+    let currentOptions = this._options;
+    for (const value of path) {
+      const option = currentOptions.find((o) => o.value === value);
+      if (option) {
+        labels.push(option.label);
+        currentOptions = option.children || [];
+      }
+    }
+    return labels;
+  }
+  _findOptionByPath(path) {
+    let currentOptions = this._options;
+    let option;
+    for (const value of path) {
+      option = currentOptions.find((o) => o.value === value);
+      if (option?.children) {
+        currentOptions = option.children;
+      }
+    }
+    return option;
+  }
+  _isLeaf(option) {
+    if (option.leaf === true)
+      return true;
+    if (option.leaf === false)
+      return false;
+    return !option.children || option.children.length === 0;
+  }
+  _searchOptions() {
+    const results = [];
+    const search = this._searchValue.toLowerCase();
+    const searchRecursive = (options, path, pathValues) => {
+      for (const option of options) {
+        const newPath = [...path, option];
+        const newPathValues = [...pathValues, option.value];
+        if (option.label.toLowerCase().includes(search)) {
+          if (this._isLeaf(option) || this.changeOnSelect) {
+            results.push({
+              path: newPath,
+              pathLabels: newPath.map((o) => o.label),
+              pathValues: newPathValues
+            });
+          }
+        }
+        if (option.children) {
+          searchRecursive(option.children, newPath, newPathValues);
+        }
+      }
+    };
+    searchRecursive(this._options, [], []);
+    return results;
+  }
+  _onOutsideClick(e) {
+    if (!this.contains(e.target)) {
+      this._close();
+    }
+  }
+  _onKeyDown(e) {
+    if (!this._isOpen) {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        if (document.activeElement === this || this.contains(document.activeElement)) {
+          e.preventDefault();
+          this._open();
+        }
+      }
+      return;
+    }
+    switch (e.key) {
+      case "Escape":
+        e.preventDefault();
+        this._close();
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (this._activePath.length > 0) {
+          this._activePath = this._activePath.slice(0, -1);
+          this.update();
+        }
+        break;
+      case "ArrowRight":
+        break;
+    }
+  }
+  _open() {
+    if (this.disabled)
+      return;
+    this._isOpen = true;
+    this._activePath = this._selectedPaths[0] ? [...this._selectedPaths[0]] : [];
+    this.update();
+    this._addScrollListeners();
+    requestAnimationFrame(() => {
+      const dropdown = this.shadowRoot?.querySelector(".cascader-dropdown");
+      const trigger = this.shadowRoot?.querySelector(".cascader-trigger");
+      if (dropdown && trigger) {
+        const triggerRect = trigger.getBoundingClientRect();
+        dropdown.style.top = `${triggerRect.bottom + 4}px`;
+        dropdown.style.left = `${triggerRect.left}px`;
+        dropdown.style.minWidth = `${triggerRect.width}px`;
+        dropdown.showPopover();
+        requestAnimationFrame(() => {
+          this._positionDropdown(dropdown, trigger);
+        });
+      }
+      const searchInput = this.shadowRoot?.querySelector(".cascader-search-input");
+      if (searchInput) {
+        searchInput.focus();
+      }
+    });
+  }
+  _close() {
+    this._isOpen = false;
+    this._searchValue = "";
+    this._activePath = [];
+    this._removeScrollListeners();
+    const dropdown = this.shadowRoot?.querySelector(".cascader-dropdown");
+    if (dropdown) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
+    this.update();
+  }
+  _positionDropdown(dropdown, trigger) {
+    const triggerRect = trigger.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    let top = triggerRect.bottom + 4;
+    let left = triggerRect.left;
+    const dropdownRect = dropdown.getBoundingClientRect();
+    if (top + dropdownRect.height > viewportHeight && triggerRect.top > dropdownRect.height) {
+      top = triggerRect.top - dropdownRect.height - 4;
+    }
+    if (left + dropdownRect.width > viewportWidth) {
+      left = viewportWidth - dropdownRect.width - 8;
+    }
+    if (left < 8) {
+      left = 8;
+    }
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${left}px`;
+    dropdown.style.minWidth = `${triggerRect.width}px`;
+  }
+  _toggle() {
+    if (this._isOpen) {
+      this._close();
+    } else {
+      this._open();
+    }
+  }
+  async _handleOptionClick(value, level) {
+    this._activePath = this._activePath.slice(0, level);
+    this._activePath.push(value);
+    const option = this._findOptionByPath(this._activePath);
+    if (!option) {
+      return;
+    }
+    if (this._loadDataFn && !option.children && !option.leaf) {
+      this._loadingKeys.add(value);
+      this.update();
+      try {
+        const children = await this._loadDataFn(option);
+        option.children = children;
+      } finally {
+        this._loadingKeys.delete(value);
+      }
+    }
+    this.emit("expand", { option, level });
+    const isLeaf = this._isLeaf(option);
+    if (isLeaf || this.changeOnSelect) {
+      this._selectPath([...this._activePath]);
+      if (isLeaf && !this.multiple) {
+        this._close();
+      }
+    }
+    this.update();
+  }
+  _handleOptionHover(value, level) {
+    if (this.expandTrigger !== "hover")
+      return;
+    this._activePath = this._activePath.slice(0, level);
+    this._activePath.push(value);
+    this.update();
+    const option = this._findOptionByPath(this._activePath);
+    if (option && this._loadDataFn && !option.children && !option.leaf) {
+      this._handleOptionClick(value, level);
+    }
+  }
+  _selectPath(path) {
+    if (this.multiple) {
+      const pathStr = JSON.stringify(path);
+      const index = this._selectedPaths.findIndex((p) => JSON.stringify(p) === pathStr);
+      if (index >= 0) {
+        this._selectedPaths.splice(index, 1);
+      } else {
+        this._selectedPaths.push(path);
+      }
+      this.value = JSON.stringify(this._selectedPaths);
+    } else {
+      this._selectedPaths = [path];
+      this.value = JSON.stringify(path);
+    }
+    this._emitChange();
+  }
+  _selectSearchResult(result) {
+    this._selectPath(result.pathValues);
+    if (!this.multiple) {
+      this._close();
+    }
+    this.update();
+  }
+  _removeTag(pathIndex) {
+    this._selectedPaths.splice(pathIndex, 1);
+    this.value = this._selectedPaths.length > 0 ? JSON.stringify(this._selectedPaths) : "";
+    this._emitChange();
+    this.update();
+  }
+  _handleSearch(e) {
+    const input = e.target;
+    this._searchValue = input.value;
+    this.emit("search", { searchValue: this._searchValue });
+    this.update();
+  }
+  _handleClear(e) {
+    e.stopPropagation();
+    this.value = "";
+    this._selectedPaths = [];
+    this.emit("clear", {});
+    this._emitChange();
+    this.update();
+  }
+  _emitChange() {
+    const selectedOptions = this._selectedPaths.map((path) => this._findOptionByPath(path)).filter((o) => o !== undefined);
+    this.emit("change", {
+      value: this.value,
+      selectedOptions,
+      path: this._selectedPaths[0] || []
+    });
+  }
+  render() {
+    return `
+      <div class="cascader ${this._isOpen ? "open" : ""}">
+        ${this._renderTrigger()}
+        ${this._renderDropdown()}
+      </div>
+    `;
+  }
+  _renderTrigger() {
+    const hasValue = this._selectedPaths.length > 0;
+    const showClear = this.clearable && hasValue && !this.disabled;
+    return `
+      <button
+        type="button"
+        class="cascader-trigger"
+        aria-haspopup="listbox"
+        aria-expanded="${this._isOpen}"
+        ${this.disabled ? "disabled" : ""}
+        data-action="toggle"
+      >
+        ${this.multiple && hasValue ? this._renderTags() : this._renderValue()}
+        ${showClear ? `<span class="cascader-clear" role="button" tabindex="-1" data-action="clear">${closeIcon}</span>` : ""}
+        <span class="cascader-arrow">${chevronDownIcon}</span>
+      </button>
+    `;
+  }
+  _renderValue() {
+    const displayLabel = this._getDisplayLabel();
+    if (!displayLabel) {
+      return `<span class="cascader-value cascader-placeholder">${this.placeholder}</span>`;
+    }
+    return `<span class="cascader-value">${this._escapeHtml(displayLabel)}</span>`;
+  }
+  _renderTags() {
+    const tagsHtml = this._selectedPaths.map((path, index) => {
+      const labels = this._getPathLabels(path);
+      const displayLabel = this.showAllLevels ? labels.join(this.separator) : labels[labels.length - 1];
+      return `
+          <span class="cascader-tag">
+            <span class="cascader-tag-text">${this._escapeHtml(displayLabel)}</span>
+            <span class="cascader-tag-remove" role="button" tabindex="-1" data-action="remove-tag" data-index="${index}">${closeIcon}</span>
+          </span>
+        `;
+    }).join("");
+    return `<div class="cascader-tags">${tagsHtml || `<span class="cascader-placeholder">${this.placeholder}</span>`}</div>`;
+  }
+  _renderDropdown() {
+    const showSearch = this.searchable && this._searchValue;
+    return `
+      <div class="cascader-dropdown" role="listbox" popover="manual">
+        ${this.searchable ? this._renderSearch() : ""}
+        ${showSearch ? this._renderSearchResults() : this._renderPanels()}
+      </div>
+    `;
+  }
+  _renderSearch() {
+    return `
+      <div class="cascader-search">
+        <span class="cascader-search-icon">${searchIcon}</span>
+        <input
+          type="text"
+          class="cascader-search-input"
+          placeholder="Search..."
+          value="${this._escapeHtml(this._searchValue)}"
+          data-action="search"
+        />
+      </div>
+    `;
+  }
+  _renderPanels() {
+    const panels = this._getPanels();
+    if (panels.length === 0 || panels[0].length === 0) {
+      return `<div class="cascader-empty">No options available</div>`;
+    }
+    return `
+      <div class="cascader-panels">
+        ${panels.map((options, level) => this._renderPanel(options, level)).join("")}
+      </div>
+    `;
+  }
+  _renderPanel(options, level) {
+    const selectedValue = this._activePath[level];
+    const selectedPathValues = this._selectedPaths.flatMap((p) => p);
+    const optionsHtml = options.map((option) => {
+      const isActive = option.value === selectedValue;
+      const isSelected = this.multiple ? selectedPathValues.includes(option.value) : JSON.stringify(this._selectedPaths[0]) === JSON.stringify([...this._activePath.slice(0, level), option.value]);
+      const isLoading = this._loadingKeys.has(option.value);
+      const hasChildren = !this._isLeaf(option);
+      const classes = [
+        "cascader-option",
+        isActive ? "active" : "",
+        isSelected ? "selected" : "",
+        option.disabled ? "disabled" : ""
+      ].filter(Boolean).join(" ");
+      return `
+          <button
+            type="button"
+            class="${classes}"
+            data-action="option"
+            data-value="${this._escapeHtml(option.value)}"
+            data-level="${level}"
+            ${option.disabled ? "disabled" : ""}
+          >
+            ${this.multiple ? `<span class="cascader-option-checkbox">${isSelected ? checkIcon : ""}</span>` : ""}
+            <span class="cascader-option-label">${this._escapeHtml(option.label)}</span>
+            ${isLoading ? `<span class="cascader-option-loading">${loadingIcon}</span>` : ""}
+            ${hasChildren && !isLoading ? `<span class="cascader-option-arrow">${chevronRightIcon}</span>` : ""}
+          </button>
+        `;
+    }).join("");
+    return `
+      <div class="cascader-panel">
+        <div class="cascader-panel-options">${optionsHtml}</div>
+      </div>
+    `;
+  }
+  _renderSearchResults() {
+    const results = this._searchOptions();
+    if (results.length === 0) {
+      return `<div class="cascader-empty">No results found</div>`;
+    }
+    const selectedPathStrs = this._selectedPaths.map((p) => JSON.stringify(p));
+    const resultsHtml = results.map((result) => {
+      const isSelected = selectedPathStrs.includes(JSON.stringify(result.pathValues));
+      const classes = ["cascader-search-result", isSelected ? "selected" : ""].filter(Boolean).join(" ");
+      const pathHtml = result.pathLabels.map((label, i) => {
+        const separator = i < result.pathLabels.length - 1 ? `<span class="cascader-search-result-separator">${this.separator}</span>` : "";
+        return `<span>${this._escapeHtml(label)}</span>${separator}`;
+      }).join("");
+      return `
+          <button
+            type="button"
+            class="${classes}"
+            data-action="search-result"
+            data-path="${this._escapeHtml(JSON.stringify(result.pathValues))}"
+          >
+            ${this.multiple ? `<span class="cascader-option-checkbox">${isSelected ? checkIcon : ""}</span>` : ""}
+            <span class="cascader-search-result-path">${pathHtml}</span>
+          </button>
+        `;
+    }).join("");
+    return `<div class="cascader-search-results">${resultsHtml}</div>`;
+  }
+  _escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+  update() {
+    const searchInput = this.shadowRoot?.querySelector(".cascader-search-input");
+    const hadFocus = searchInput && this.shadowRoot?.activeElement === searchInput;
+    const cursorPosition = hadFocus ? searchInput.selectionStart : null;
+    super.update();
+    if (this._isOpen) {
+      const dropdown = this.shadowRoot?.querySelector(".cascader-dropdown");
+      const trigger = this.shadowRoot?.querySelector(".cascader-trigger");
+      if (dropdown && trigger) {
+        try {
+          dropdown.showPopover();
+          this._positionDropdown(dropdown, trigger);
+        } catch {}
+      }
+      if (hadFocus) {
+        const newSearchInput = this.shadowRoot?.querySelector(".cascader-search-input");
+        if (newSearchInput) {
+          newSearchInput.focus();
+          if (cursorPosition !== null) {
+            newSearchInput.setSelectionRange(cursorPosition, cursorPosition);
+          }
+        }
+      }
+    }
+  }
+  _setupEventDelegation() {
+    this.shadowRoot?.addEventListener("click", (e) => {
+      const target = e.target;
+      const trigger = target.closest('[data-action="toggle"]');
+      if (trigger && !target.closest('[data-action="clear"]') && !target.closest('[data-action="remove-tag"]')) {
+        this._toggle();
+        return;
+      }
+      if (target.closest('[data-action="clear"]')) {
+        this._handleClear(e);
+        return;
+      }
+      const removeTag = target.closest('[data-action="remove-tag"]');
+      if (removeTag) {
+        e.stopPropagation();
+        const index = parseInt(removeTag.getAttribute("data-index") || "0", 10);
+        this._removeTag(index);
+        return;
+      }
+      const option = target.closest('[data-action="option"]');
+      if (option) {
+        const value = option.getAttribute("data-value");
+        const level = parseInt(option.getAttribute("data-level") || "0", 10);
+        if (value) {
+          this._handleOptionClick(value, level);
+        }
+        return;
+      }
+      const searchResult = target.closest('[data-action="search-result"]');
+      if (searchResult) {
+        const pathStr = searchResult.getAttribute("data-path");
+        if (pathStr) {
+          try {
+            const pathValues = JSON.parse(pathStr);
+            const result = {
+              pathValues,
+              path: [],
+              pathLabels: this._getPathLabels(pathValues)
+            };
+            this._selectSearchResult(result);
+          } catch {}
+        }
+        return;
+      }
+    });
+    this.shadowRoot?.addEventListener("input", (e) => {
+      const target = e.target;
+      if (target.matches('[data-action="search"]')) {
+        this._handleSearch(e);
+      }
+    });
+    this.shadowRoot?.addEventListener("mouseenter", (e) => {
+      if (this.expandTrigger !== "hover")
+        return;
+      const target = e.target;
+      const option = target.closest('[data-action="option"]');
+      if (option) {
+        const value = option.getAttribute("data-value");
+        const level = parseInt(option.getAttribute("data-level") || "0", 10);
+        if (value) {
+          this._handleOptionHover(value, level);
+        }
+      }
+    }, true);
+  }
+}
+function register() {
+  if (!customElements.get("el-dm-cascader")) {
+    customElements.define("el-dm-cascader", ElDmCascader);
+  }
+}
+
+//# debugId=563AC9BF97CC5E2A64756E2164756E21
+//# sourceMappingURL=index.js.map