@liwe3/webcomponents 1.0.0

package/dist/SmartSelect.js

@@ -0,0 +1,452 @@
+class g extends HTMLElement {
+  constructor() {
+    super(), this.isOpen = !1, this.selectedOptions = [], this.filteredOptions = [], this.focusedIndex = -1, this.searchValue = "", this.keyboardNavigating = !1, this.attachShadow({ mode: "open" }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.render(), this.bindEvents();
+  }
+  static get observedAttributes() {
+    return ["multiple", "searchable", "placeholder", "disabled", "value", "options"];
+  }
+  attributeChangedCallback(e, t, s) {
+    t !== s && (e === "options" && (this.filteredOptions = [...this.options]), this.render());
+  }
+  get multiple() {
+    return this.hasAttribute("multiple");
+  }
+  set multiple(e) {
+    e ? this.setAttribute("multiple", "") : this.removeAttribute("multiple");
+  }
+  get searchable() {
+    return this.hasAttribute("searchable");
+  }
+  set searchable(e) {
+    e ? this.setAttribute("searchable", "") : this.removeAttribute("searchable");
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") || "Select an option";
+  }
+  set placeholder(e) {
+    this.setAttribute("placeholder", e);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get value() {
+    return this.multiple ? this.selectedOptions.map((e) => e.value) : this.selectedOptions.length > 0 ? this.selectedOptions[0].value : "";
+  }
+  set value(e) {
+    if (this.multiple && Array.isArray(e))
+      this.selectedOptions = this.options.filter((t) => e.includes(t.value));
+    else {
+      const t = this.options.find((s) => s.value === e);
+      this.selectedOptions = t ? [t] : [];
+    }
+    this.render();
+  }
+  get options() {
+    const e = this.getAttribute("options");
+    if (e)
+      try {
+        return JSON.parse(e);
+      } catch (t) {
+        return console.error("Invalid options format:", t), [];
+      }
+    return [];
+  }
+  set options(e) {
+    this.setAttribute("options", JSON.stringify(e));
+  }
+  /**
+   * Opens the dropdown
+   */
+  open() {
+    this.disabled || (this.isOpen = !0, this.focusedIndex = -1, this.options.length > 0 && (this.filteredOptions = [...this.options]), this.render(), this._updateDropdownPosition(), this.searchable && requestAnimationFrame(() => {
+      const e = this.shadowRoot.querySelector(".search-input");
+      e && e.focus();
+    }), this.dispatchEvent(new CustomEvent("open")));
+  }
+  /**
+   * Closes the dropdown
+   */
+  close() {
+    this.isOpen = !1, this.focusedIndex = -1, this.searchValue = "", this.searchable && this.options.length > 0 && (this.filteredOptions = [...this.options]);
+    const e = this.shadowRoot.querySelector(".dropdown");
+    e && (e.style.top = "", e.style.left = "", e.style.width = "", e.style.maxHeight = ""), this.render(), this.dispatchEvent(new CustomEvent("close"));
+  }
+  /**
+   * Toggles the dropdown open/closed state
+   */
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  /**
+   * Selects an option by its value
+   */
+  selectOption(e) {
+    const t = this.options.find((s) => s.value === e);
+    t && (this.multiple ? this.selectedOptions.find((s) => s.value === e) || this.selectedOptions.push(t) : (this.selectedOptions = [t], this.close()), this.render(), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } })));
+  }
+  /**
+   * Deselects an option by its value
+   */
+  deselectOption(e) {
+    this.selectedOptions = this.selectedOptions.filter((t) => t.value !== e), this.render(), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+  }
+  /**
+   * Returns an array of currently selected options
+   */
+  getSelectedOptions() {
+    return [...this.selectedOptions];
+  }
+  /**
+   * Sets the options for the select component
+   */
+  setOptions(e) {
+    this.options = e, this.filteredOptions = [...e], this.selectedOptions = [], this.render();
+  }
+  /**
+   * Handles search functionality
+   */
+  handleSearch(e) {
+    this.searchValue = e, this.filteredOptions = this.options.filter(
+      (t) => t.label.toLowerCase().includes(e.toLowerCase())
+    ), this.focusedIndex = -1, this.render(), this.dispatchEvent(new CustomEvent("search", { detail: { query: e } }));
+  }
+  /**
+   * Updates the visual focus state without full re-render
+   */
+  updateFocusedOption() {
+    const e = this.shadowRoot.querySelectorAll(".option");
+    e.forEach((t) => t.classList.remove("focused")), this.focusedIndex >= 0 && this.focusedIndex < e.length && e[this.focusedIndex].classList.add("focused"), this.scrollToFocusedOption();
+  }
+  /**
+   * Scrolls the focused option into view
+   */
+  scrollToFocusedOption() {
+    this.focusedIndex < 0 || requestAnimationFrame(() => {
+      const e = this.shadowRoot.querySelector(".dropdown"), t = this.shadowRoot.querySelector(".option.focused");
+      if (e && t) {
+        const s = e.getBoundingClientRect(), o = t.getBoundingClientRect();
+        o.top < s.top ? e.scrollTop -= s.top - o.top : o.bottom > s.bottom && (e.scrollTop += o.bottom - s.bottom);
+      }
+    });
+  }
+  /**
+   * Calculates the optimal dropdown position based on viewport constraints
+   */
+  _calculateDropdownPosition() {
+    const e = this.shadowRoot.querySelector(".select-trigger");
+    if (!e) return null;
+    const t = e.getBoundingClientRect(), s = window.innerHeight, o = window.innerWidth, i = 200, n = 10, r = 2, l = s - t.bottom, h = t.top, u = l < i + n && h > l, p = t.width, f = Math.max(0, Math.min(t.left, o - p));
+    let c, a;
+    return u ? (a = Math.min(i, h - n), c = t.top - a - r) : (a = Math.min(i, l - n), c = t.bottom + r), {
+      top: Math.max(0, c),
+      left: f,
+      width: p,
+      maxHeight: Math.max(100, a)
+      // Ensure minimum height
+    };
+  }
+  /**
+   * Updates dropdown position using fixed positioning relative to viewport
+   */
+  _updateDropdownPosition() {
+    requestAnimationFrame(() => {
+      const e = this.shadowRoot.querySelector(".dropdown");
+      if (!e) return;
+      const t = this._calculateDropdownPosition();
+      t && (e.style.top = `${t.top}px`, e.style.left = `${t.left}px`, e.style.width = `${t.width}px`, e.style.maxHeight = `${t.maxHeight}px`);
+    });
+  }
+  /**
+   * Handles keyboard navigation
+   */
+  handleKeydown(e) {
+    if (!this.disabled && !e._smartSelectHandled)
+      switch (e._smartSelectHandled = !0, e.key) {
+        case "ArrowDown":
+          if (e.preventDefault(), this.keyboardNavigating = !0, clearTimeout(this.keyboardTimer), this.keyboardTimer = window.setTimeout(() => {
+            this.keyboardNavigating = !1;
+          }, 100), !this.isOpen)
+            this.open();
+          else {
+            const t = this.shadowRoot.querySelector(".search-input");
+            if (this.searchable && t === this.shadowRoot.activeElement) {
+              this.focusedIndex = 0, t.blur(), this.focus(), this.updateFocusedOption();
+              return;
+            }
+            const o = Math.min(this.focusedIndex + 1, this.filteredOptions.length - 1);
+            this.focusedIndex = o, this.updateFocusedOption();
+          }
+          break;
+        case "ArrowUp":
+          if (e.preventDefault(), this.keyboardNavigating = !0, clearTimeout(this.keyboardTimer), this.keyboardTimer = window.setTimeout(() => {
+            this.keyboardNavigating = !1;
+          }, 100), this.isOpen) {
+            if (this.focusedIndex === 0 && this.searchable) {
+              this.focusedIndex = -1, this.updateFocusedOption(), requestAnimationFrame(() => {
+                const i = this.shadowRoot.querySelector(".search-input");
+                i && (i.focus(), i.setSelectionRange(i.value.length, i.value.length));
+              });
+              return;
+            }
+            const t = this.shadowRoot.querySelector(".search-input");
+            if (this.searchable && t === this.shadowRoot.activeElement)
+              return;
+            const o = Math.max(this.focusedIndex - 1, -1);
+            this.focusedIndex = o, this.updateFocusedOption();
+          }
+          break;
+        case "Enter":
+          e.preventDefault(), this.isOpen && this.focusedIndex >= 0 && this.focusedIndex < this.filteredOptions.length ? this.selectOption(this.filteredOptions[this.focusedIndex].value) : this.isOpen || this.open();
+          break;
+        case "Escape":
+          e.preventDefault(), this.close();
+          break;
+        case "Tab":
+          this.close();
+          break;
+      }
+  }
+  /**
+   * Binds all event listeners
+   */
+  bindEvents() {
+    const e = this.handleKeydown.bind(this);
+    this.addEventListener("keydown", e), this.shadowRoot.addEventListener("keydown", e), this.shadowRoot.addEventListener("click", (t) => {
+      t.stopPropagation();
+      const s = t.target;
+      if (s.closest(".remove-tag")) {
+        const o = s.closest(".remove-tag").dataset.value;
+        o && this.deselectOption(o);
+      } else if (s.closest(".option")) {
+        const o = s.closest(".option").dataset.value;
+        o && this.selectOption(o);
+      } else s.closest(".select-trigger") && this.toggle();
+    }), this.shadowRoot.addEventListener("mouseover", (t) => {
+      if (this.keyboardNavigating) return;
+      const s = t.target;
+      if (s.closest(".option")) {
+        const o = s.closest(".option"), n = Array.from(this.shadowRoot.querySelectorAll(".option")).indexOf(o);
+        if (this.focusedIndex !== n) {
+          const r = this.shadowRoot.querySelector(".option.focused");
+          r && r.classList.remove("focused"), o.classList.add("focused"), this.focusedIndex = n;
+        }
+      }
+    }), this.shadowRoot.addEventListener("mouseleave", (t) => {
+      if (this.keyboardNavigating) return;
+      if (t.target.closest(".dropdown")) {
+        const o = this.shadowRoot.querySelector(".option.focused");
+        o && o.classList.remove("focused"), this.focusedIndex = -1;
+      }
+    }), this.shadowRoot.addEventListener("input", (t) => {
+      const s = t.target;
+      s.classList.contains("search-input") && this.handleSearch(s.value);
+    }), document.addEventListener("click", (t) => {
+      this.contains(t.target) || this.close();
+    }), window.addEventListener("resize", () => {
+      this.isOpen && this._updateDropdownPosition();
+    }), window.addEventListener("scroll", () => {
+      this.isOpen && this._updateDropdownPosition();
+    }, !0);
+  }
+  /**
+   * Renders the component
+   */
+  render() {
+    this.filteredOptions.length === 0 && this.options.length > 0 && (this.filteredOptions = [...this.options]);
+    const e = this.shadowRoot.querySelector(".search-input") === this.shadowRoot.activeElement, t = this.selectedOptions.length > 0 ? this.multiple ? `${this.selectedOptions.length} selected` : this.selectedOptions[0].label : this.placeholder;
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          position: relative;
+          min-width: 200px;
+          font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+          font-size: var(--font-size, 14px);
+          outline: none;
+        }
+
+        :host(:focus) .select-trigger {
+          border-color: var(--focus-color, #007bff);
+          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }
+
+        :host([disabled]) {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .select-container {
+          position: relative;
+        }
+
+        .select-trigger {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: var(--padding, 8px 12px);
+          border: var(--border, 1px solid #ccc);
+          border-radius: var(--border-radius, 4px);
+          background: var(--background, white);
+          cursor: pointer;
+          min-height: 36px;
+          box-sizing: border-box;
+          color: #333;
+        }
+
+        .select-trigger:focus {
+          outline: none;
+          border-color: var(--focus-color, #007bff);
+          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+        }
+
+        .select-trigger[disabled] {
+          cursor: not-allowed;
+        }
+
+        .selected-content {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          flex-wrap: wrap;
+          flex: 1;
+        }
+
+        .tag {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          padding: 2px 8px;
+          background: var(--tag-background, #e9ecef);
+          border-radius: var(--tag-border-radius, 12px);
+          font-size: 12px;
+          color: var(--tag-color, #495057);
+        }
+
+        .remove-tag {
+          cursor: pointer;
+          color: var(--remove-color, #6c757d);
+          font-weight: bold;
+          font-size: 14px;
+        }
+
+        .remove-tag:hover {
+          color: var(--remove-hover-color, #dc3545);
+        }
+
+        .arrow {
+          width: 0;
+          height: 0;
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top: 5px solid var(--arrow-color, #666);
+          transition: transform 0.2s;
+        }
+
+        .arrow.open {
+          transform: rotate(180deg);
+        }
+
+        .dropdown {
+          position: fixed;
+          z-index: 99999;
+          background: var(--dropdown-background, white);
+          border: var(--dropdown-border, 1px solid #ccc);
+          border-radius: var(--dropdown-border-radius, 4px);
+          box-shadow: var(--dropdown-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
+          max-height: 200px;
+          overflow-y: auto;
+          scroll-behavior: smooth;
+          color: #333;
+        }
+
+        .search-input {
+          width: 100%;
+          padding: 8px 12px;
+          border: none;
+          border-bottom: 1px solid #eee;
+          font-size: 14px;
+          outline: none;
+          box-sizing: border-box;
+        }
+
+        .option {
+          padding: 8px 12px;
+          cursor: pointer;
+          color: var(--option-color, #333);
+          transition: background-color 0.2s;
+        }
+
+        .option:hover {
+          background-color: var(--option-hover-background, #f8f9fa);
+        }
+
+        .option.focused {
+          background-color: var(--option-focused-background, #007bff);
+          color: var(--option-focused-color, white);
+        }
+
+        .option.selected {
+          background-color: var(--option-selected-background, #e3f2fd);
+          color: var(--option-selected-color, #1976d2);
+        }
+
+        .no-options {
+          padding: 8px 12px;
+          color: var(--no-options-color, #6c757d);
+          font-style: italic;
+        }
+      </style>
+
+      <div class="select-container">
+        <div class="select-trigger" tabindex="-1">
+          <div class="selected-content">
+            ${this.multiple && this.selectedOptions.length > 0 ? this.selectedOptions.map((s) => `
+                  <span class="tag">
+                    ${s.label}
+                    <span class="remove-tag" data-value="${s.value}">×</span>
+                  </span>
+                `).join("") : `<span>${t}</span>`}
+          </div>
+          <div class="arrow ${this.isOpen ? "open" : ""}"></div>
+        </div>
+
+        ${this.isOpen ? `
+          <div class="dropdown">
+            ${this.searchable ? `
+              <input
+                type="text"
+                class="search-input"
+                placeholder="Search options..."
+                value="${this.searchValue}"
+              >
+            ` : ""}
+
+            ${this.filteredOptions.length > 0 ? this.filteredOptions.map((s, o) => `
+                  <div
+                    class="option ${this.selectedOptions.find((i) => i.value === s.value) ? "selected" : ""} ${o === this.focusedIndex ? "focused" : ""}"
+                    data-value="${s.value}"
+                  >
+                    ${s.label}
+                  </div>
+                `).join("") : '<div class="no-options">No options available</div>'}
+          </div>
+        ` : ""}
+      </div>
+    `, e && this.searchable && this.isOpen && requestAnimationFrame(() => {
+      const s = this.shadowRoot.querySelector(".search-input");
+      s && (s.focus(), s.setSelectionRange(s.value.length, s.value.length));
+    });
+  }
+}
+const b = (d = "liwe3-select") => {
+  typeof window < "u" && !window.customElements.get(d) && customElements.define(d, g);
+};
+b();
+export {
+  g as SmartSelectElement,
+  b as defineSmartSelect
+};
+//# sourceMappingURL=SmartSelect.js.map

package/dist/SmartSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartSelect.js","sources":["../src/SmartSelect.ts"],"sourcesContent":["/**\n * SmartSelect Web Component\n * A customizable select dropdown with search, multi-select, and keyboard navigation\n */\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport class SmartSelectElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private isOpen: boolean = false;\n  private selectedOptions: SelectOption[] = [];\n  private filteredOptions: SelectOption[] = [];\n  private focusedIndex: number = -1;\n  private searchValue: string = '';\n  private keyboardNavigating: boolean = false;\n  private keyboardTimer?: number;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n\n    // Make component focusable\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n\n    this.render();\n    this.bindEvents();\n  }\n\n  static get observedAttributes(): string[] {\n    return ['multiple', 'searchable', 'placeholder', 'disabled', 'value', 'options'];\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (oldValue !== newValue) {\n      if (name === 'options') {\n        this.filteredOptions = [...this.options];\n      }\n      this.render();\n    }\n  }\n\n  get multiple(): boolean {\n    return this.hasAttribute('multiple');\n  }\n\n  set multiple(value: boolean) {\n    if (value) {\n      this.setAttribute('multiple', '');\n    } else {\n      this.removeAttribute('multiple');\n    }\n  }\n\n  get searchable(): boolean {\n    return this.hasAttribute('searchable');\n  }\n\n  set searchable(value: boolean) {\n    if (value) {\n      this.setAttribute('searchable', '');\n    } else {\n      this.removeAttribute('searchable');\n    }\n  }\n\n  get placeholder(): string {\n    return this.getAttribute('placeholder') || 'Select an option';\n  }\n\n  set placeholder(value: string) {\n    this.setAttribute('placeholder', value);\n  }\n\n  get disabled(): boolean {\n    return this.hasAttribute('disabled');\n  }\n\n  set disabled(value: boolean) {\n    if (value) {\n      this.setAttribute('disabled', '');\n    } else {\n      this.removeAttribute('disabled');\n    }\n  }\n\n  get value(): string | string[] {\n    if (this.multiple) {\n      return this.selectedOptions.map(opt => opt.value);\n    }\n    return this.selectedOptions.length > 0 ? this.selectedOptions[0].value : '';\n  }\n\n  set value(val: string | string[]) {\n    if (this.multiple && Array.isArray(val)) {\n      this.selectedOptions = this.options.filter(opt => val.includes(opt.value));\n    } else {\n      const option = this.options.find(opt => opt.value === val);\n      this.selectedOptions = option ? [option] : [];\n    }\n    this.render();\n  }\n\n  get options(): SelectOption[] {\n    const optionsAttr = this.getAttribute('options');\n    if (optionsAttr) {\n      try {\n        return JSON.parse(optionsAttr);\n      } catch (e) {\n        console.error('Invalid options format:', e);\n        return [];\n      }\n    }\n    return [];\n  }\n\n  set options(opts: SelectOption[]) {\n    this.setAttribute('options', JSON.stringify(opts));\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  open(): void {\n    if (this.disabled) return;\n    this.isOpen = true;\n    this.focusedIndex = -1;\n    if (this.options.length > 0) {\n      this.filteredOptions = [...this.options];\n    }\n    this.render();\n\n    // Update dropdown position based on viewport\n    this._updateDropdownPosition();\n\n    // Focus search input if searchable\n    if (this.searchable) {\n      requestAnimationFrame(() => {\n        const searchInput = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;\n        if (searchInput) {\n          searchInput.focus();\n        }\n      });\n    }\n\n    this.dispatchEvent(new CustomEvent('open'));\n  }\n\n  /**\n   * Closes the dropdown\n   */\n  close(): void {\n    this.isOpen = false;\n    this.focusedIndex = -1;\n    this.searchValue = '';\n\n    // Reset filtered options when closing\n    if (this.searchable && this.options.length > 0) {\n      this.filteredOptions = [...this.options];\n    }\n\n    // Clear any inline positioning styles\n    const dropdown = this.shadowRoot.querySelector('.dropdown') as HTMLElement;\n    if (dropdown) {\n      dropdown.style.top = '';\n      dropdown.style.left = '';\n      dropdown.style.width = '';\n      dropdown.style.maxHeight = '';\n    }\n\n    this.render();\n    this.dispatchEvent(new CustomEvent('close'));\n  }\n\n  /**\n   * Toggles the dropdown open/closed state\n   */\n  toggle(): void {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Selects an option by its value\n   */\n  selectOption(value: string): void {\n    const option = this.options.find(opt => opt.value === value);\n    if (!option) return;\n\n    if (this.multiple) {\n      if (!this.selectedOptions.find(opt => opt.value === value)) {\n        this.selectedOptions.push(option);\n      }\n    } else {\n      this.selectedOptions = [option];\n      this.close();\n    }\n\n    this.render();\n    this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));\n  }\n\n  /**\n   * Deselects an option by its value\n   */\n  deselectOption(value: string): void {\n    this.selectedOptions = this.selectedOptions.filter(opt => opt.value !== value);\n    this.render();\n    this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));\n  }\n\n  /**\n   * Returns an array of currently selected options\n   */\n  getSelectedOptions(): SelectOption[] {\n    return [...this.selectedOptions];\n  }\n\n  /**\n   * Sets the options for the select component\n   */\n  setOptions(options: SelectOption[]): void {\n    this.options = options;\n    this.filteredOptions = [...options];\n    this.selectedOptions = [];\n    this.render();\n  }\n\n  /**\n   * Handles search functionality\n   */\n  private handleSearch(query: string): void {\n    this.searchValue = query;\n    this.filteredOptions = this.options.filter(option =>\n      option.label.toLowerCase().includes(query.toLowerCase())\n    );\n    this.focusedIndex = -1;\n    this.render();\n    this.dispatchEvent(new CustomEvent('search', { detail: { query } }));\n  }\n\n  /**\n   * Updates the visual focus state without full re-render\n   */\n  private updateFocusedOption(): void {\n    const options = this.shadowRoot.querySelectorAll('.option');\n\n    // Remove focused class from all options\n    options.forEach(option => option.classList.remove('focused'));\n\n    // Add focused class to current option\n    if (this.focusedIndex >= 0 && this.focusedIndex < options.length) {\n      options[this.focusedIndex].classList.add('focused');\n    }\n\n    this.scrollToFocusedOption();\n  }\n\n  /**\n   * Scrolls the focused option into view\n   */\n  private scrollToFocusedOption(): void {\n    if (this.focusedIndex < 0) return;\n\n    requestAnimationFrame(() => {\n      const dropdown = this.shadowRoot.querySelector('.dropdown') as HTMLElement;\n      const focusedOption = this.shadowRoot.querySelector('.option.focused') as HTMLElement;\n\n      if (dropdown && focusedOption) {\n        const dropdownRect = dropdown.getBoundingClientRect();\n        const optionRect = focusedOption.getBoundingClientRect();\n\n        // Check if option is above visible area\n        if (optionRect.top < dropdownRect.top) {\n          dropdown.scrollTop -= (dropdownRect.top - optionRect.top);\n        }\n        // Check if option is below visible area\n        else if (optionRect.bottom > dropdownRect.bottom) {\n          dropdown.scrollTop += (optionRect.bottom - dropdownRect.bottom);\n        }\n      }\n    });\n  }\n\n  /**\n   * Calculates the optimal dropdown position based on viewport constraints\n   */\n  private _calculateDropdownPosition(): { top: number; left: number; width: number; maxHeight: number } | null {\n    const trigger = this.shadowRoot.querySelector('.select-trigger') as HTMLElement;\n    if (!trigger) return null;\n\n    const triggerRect = trigger.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportWidth = window.innerWidth;\n    const dropdownMaxHeight = 200;\n    const dropdownPadding = 10;\n    const margin = 2;\n\n    // Calculate available space\n    const spaceBelow = viewportHeight - triggerRect.bottom;\n    const spaceAbove = triggerRect.top;\n\n    // Determine if dropdown should open upward\n    const shouldOpenUpward = spaceBelow < dropdownMaxHeight + dropdownPadding && spaceAbove > spaceBelow;\n\n    // Calculate dimensions\n    const width = triggerRect.width;\n    const left = Math.max(0, Math.min(triggerRect.left, viewportWidth - width));\n\n    let top: number;\n    let maxHeight: number;\n\n    if (shouldOpenUpward) {\n      // Position above the trigger\n      maxHeight = Math.min(dropdownMaxHeight, spaceAbove - dropdownPadding);\n      top = triggerRect.top - maxHeight - margin;\n    } else {\n      // Position below the trigger\n      maxHeight = Math.min(dropdownMaxHeight, spaceBelow - dropdownPadding);\n      top = triggerRect.bottom + margin;\n    }\n\n    return {\n      top: Math.max(0, top),\n      left,\n      width,\n      maxHeight: Math.max(100, maxHeight) // Ensure minimum height\n    };\n  }\n\n  /**\n   * Updates dropdown position using fixed positioning relative to viewport\n   */\n  private _updateDropdownPosition(): void {\n    requestAnimationFrame(() => {\n      const dropdown = this.shadowRoot.querySelector('.dropdown') as HTMLElement;\n      if (!dropdown) return;\n\n      const position = this._calculateDropdownPosition();\n      if (!position) return;\n\n      // Apply calculated position as inline styles\n      dropdown.style.top = `${position.top}px`;\n      dropdown.style.left = `${position.left}px`;\n      dropdown.style.width = `${position.width}px`;\n      dropdown.style.maxHeight = `${position.maxHeight}px`;\n    });\n  }\n\n  /**\n   * Handles keyboard navigation\n   */\n  private handleKeydown(event: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    // Prevent double execution if event has already been handled\n    if ((event as any)._smartSelectHandled) return;\n    (event as any)._smartSelectHandled = true;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.keyboardNavigating = true;\n        clearTimeout(this.keyboardTimer);\n        this.keyboardTimer = window.setTimeout(() => { this.keyboardNavigating = false; }, 100);\n\n        if (!this.isOpen) {\n          this.open();\n        } else {\n          // If searchable and search input is focused, move to first option\n          const searchInput = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;\n          const isSearchFocused = this.searchable && searchInput === this.shadowRoot.activeElement;\n\n          if (isSearchFocused) {\n            this.focusedIndex = 0;\n            searchInput.blur(); // Blur search input to allow normal navigation\n            // Focus the component to ensure it receives keyboard events\n            this.focus();\n            this.updateFocusedOption();\n            return;\n          }\n          // Navigate through options\n          const newIndex = Math.min(this.focusedIndex + 1, this.filteredOptions.length - 1);\n          this.focusedIndex = newIndex;\n          this.updateFocusedOption();\n        }\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.keyboardNavigating = true;\n        clearTimeout(this.keyboardTimer);\n        this.keyboardTimer = window.setTimeout(() => { this.keyboardNavigating = false; }, 100);\n\n        if (this.isOpen) {\n          // If at first option and searchable, focus search input\n          if (this.focusedIndex === 0 && this.searchable) {\n            this.focusedIndex = -1;\n            this.updateFocusedOption();\n            requestAnimationFrame(() => {\n              const searchInput = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;\n              if (searchInput) {\n                searchInput.focus();\n                searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length);\n              }\n            });\n            return;\n          }\n          // If searchable and search input is focused, do nothing\n          const searchInput = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;\n          const isSearchFocused = this.searchable && searchInput === this.shadowRoot.activeElement;\n\n          if (isSearchFocused) {\n            return;\n          }\n          // Navigate through options\n          const newIndex = Math.max(this.focusedIndex - 1, -1);\n          this.focusedIndex = newIndex;\n          this.updateFocusedOption();\n        }\n        break;\n\n      case 'Enter':\n        event.preventDefault();\n        if (this.isOpen && this.focusedIndex >= 0 && this.focusedIndex < this.filteredOptions.length) {\n          this.selectOption(this.filteredOptions[this.focusedIndex].value);\n        } else if (!this.isOpen) {\n          this.open();\n        }\n        break;\n\n      case 'Escape':\n        event.preventDefault();\n        this.close();\n        break;\n\n      case 'Tab':\n        this.close();\n        break;\n    }\n  }\n\n  /**\n   * Binds all event listeners\n   */\n  private bindEvents(): void {\n    // Listen for keydown events on both the component and shadow root\n    const keydownHandler = this.handleKeydown.bind(this);\n    this.addEventListener('keydown', keydownHandler);\n    this.shadowRoot.addEventListener('keydown', keydownHandler as EventListener);\n\n    // Use event delegation on the shadow root\n    this.shadowRoot.addEventListener('click', (e) => {\n      e.stopPropagation();\n      const target = e.target as HTMLElement;\n\n      if (target.closest('.remove-tag')) {\n        const value = (target.closest('.remove-tag') as HTMLElement).dataset.value;\n        if (value) this.deselectOption(value);\n      } else if (target.closest('.option')) {\n        const value = (target.closest('.option') as HTMLElement).dataset.value;\n        if (value) this.selectOption(value);\n      } else if (target.closest('.select-trigger')) {\n        this.toggle();\n      }\n    });\n\n    // Handle mouse hover on options to update focused index\n    this.shadowRoot.addEventListener('mouseover', (e) => {\n      // Don't interfere with keyboard navigation\n      if (this.keyboardNavigating) return;\n\n      const target = e.target as HTMLElement;\n      if (target.closest('.option')) {\n        const option = target.closest('.option') as HTMLElement;\n        const options = Array.from(this.shadowRoot.querySelectorAll('.option'));\n        const newFocusedIndex = options.indexOf(option);\n\n        // Only update if the focused index actually changed\n        if (this.focusedIndex !== newFocusedIndex) {\n          // Remove focused class from current option\n          const currentFocused = this.shadowRoot.querySelector('.option.focused');\n          if (currentFocused) {\n            currentFocused.classList.remove('focused');\n          }\n\n          // Add focused class to new option\n          option.classList.add('focused');\n          this.focusedIndex = newFocusedIndex;\n        }\n      }\n    });\n\n    // Handle mouse leaving dropdown to clear focus\n    this.shadowRoot.addEventListener('mouseleave', (e) => {\n      // Don't interfere with keyboard navigation\n      if (this.keyboardNavigating) return;\n\n      const target = e.target as HTMLElement;\n      if (target.closest('.dropdown')) {\n        const currentFocused = this.shadowRoot.querySelector('.option.focused');\n        if (currentFocused) {\n          currentFocused.classList.remove('focused');\n        }\n        this.focusedIndex = -1;\n      }\n    });\n\n    // Handle search input\n    this.shadowRoot.addEventListener('input', (e) => {\n      const target = e.target as HTMLInputElement;\n      if (target.classList.contains('search-input')) {\n        this.handleSearch(target.value);\n      }\n    });\n\n    // Close dropdown when clicking outside\n    document.addEventListener('click', (e) => {\n      if (!this.contains(e.target as Node)) {\n        this.close();\n      }\n    });\n\n    // Update dropdown position on window resize or scroll\n    window.addEventListener('resize', () => {\n      if (this.isOpen) {\n        this._updateDropdownPosition();\n      }\n    });\n\n    window.addEventListener('scroll', () => {\n      if (this.isOpen) {\n        this._updateDropdownPosition();\n      }\n    }, true); // Use capture to catch all scroll events\n  }\n\n  /**\n   * Renders the component\n   */\n  private render(): void {\n    // Initialize filteredOptions if not set\n    if (this.filteredOptions.length === 0 && this.options.length > 0) {\n      this.filteredOptions = [...this.options];\n    }\n\n    // Remember if search input was focused before render\n    const wasSearchFocused = this.shadowRoot.querySelector('.search-input') === this.shadowRoot.activeElement;\n\n    const displayText = this.selectedOptions.length > 0\n      ? (this.multiple\n        ? `${this.selectedOptions.length} selected`\n        : this.selectedOptions[0].label)\n      : this.placeholder;\n\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: inline-block;\n          position: relative;\n          min-width: 200px;\n          font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n          font-size: var(--font-size, 14px);\n          outline: none;\n        }\n\n        :host(:focus) .select-trigger {\n          border-color: var(--focus-color, #007bff);\n          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n        }\n\n        :host([disabled]) {\n          opacity: 0.6;\n          cursor: not-allowed;\n        }\n\n        .select-container {\n          position: relative;\n        }\n\n        .select-trigger {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: var(--padding, 8px 12px);\n          border: var(--border, 1px solid #ccc);\n          border-radius: var(--border-radius, 4px);\n          background: var(--background, white);\n          cursor: pointer;\n          min-height: 36px;\n          box-sizing: border-box;\n          color: #333;\n        }\n\n        .select-trigger:focus {\n          outline: none;\n          border-color: var(--focus-color, #007bff);\n          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n        }\n\n        .select-trigger[disabled] {\n          cursor: not-allowed;\n        }\n\n        .selected-content {\n          display: flex;\n          align-items: center;\n          gap: 4px;\n          flex-wrap: wrap;\n          flex: 1;\n        }\n\n        .tag {\n          display: inline-flex;\n          align-items: center;\n          gap: 4px;\n          padding: 2px 8px;\n          background: var(--tag-background, #e9ecef);\n          border-radius: var(--tag-border-radius, 12px);\n          font-size: 12px;\n          color: var(--tag-color, #495057);\n        }\n\n        .remove-tag {\n          cursor: pointer;\n          color: var(--remove-color, #6c757d);\n          font-weight: bold;\n          font-size: 14px;\n        }\n\n        .remove-tag:hover {\n          color: var(--remove-hover-color, #dc3545);\n        }\n\n        .arrow {\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid var(--arrow-color, #666);\n          transition: transform 0.2s;\n        }\n\n        .arrow.open {\n          transform: rotate(180deg);\n        }\n\n        .dropdown {\n          position: fixed;\n          z-index: 99999;\n          background: var(--dropdown-background, white);\n          border: var(--dropdown-border, 1px solid #ccc);\n          border-radius: var(--dropdown-border-radius, 4px);\n          box-shadow: var(--dropdown-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));\n          max-height: 200px;\n          overflow-y: auto;\n          scroll-behavior: smooth;\n          color: #333;\n        }\n\n        .search-input {\n          width: 100%;\n          padding: 8px 12px;\n          border: none;\n          border-bottom: 1px solid #eee;\n          font-size: 14px;\n          outline: none;\n          box-sizing: border-box;\n        }\n\n        .option {\n          padding: 8px 12px;\n          cursor: pointer;\n          color: var(--option-color, #333);\n          transition: background-color 0.2s;\n        }\n\n        .option:hover {\n          background-color: var(--option-hover-background, #f8f9fa);\n        }\n\n        .option.focused {\n          background-color: var(--option-focused-background, #007bff);\n          color: var(--option-focused-color, white);\n        }\n\n        .option.selected {\n          background-color: var(--option-selected-background, #e3f2fd);\n          color: var(--option-selected-color, #1976d2);\n        }\n\n        .no-options {\n          padding: 8px 12px;\n          color: var(--no-options-color, #6c757d);\n          font-style: italic;\n        }\n      </style>\n\n      <div class=\"select-container\">\n        <div class=\"select-trigger\" tabindex=\"-1\">\n          <div class=\"selected-content\">\n            ${this.multiple && this.selectedOptions.length > 0\n              ? this.selectedOptions.map(option => `\n                  <span class=\"tag\">\n                    ${option.label}\n                    <span class=\"remove-tag\" data-value=\"${option.value}\">×</span>\n                  </span>\n                `).join('')\n              : `<span>${displayText}</span>`\n            }\n          </div>\n          <div class=\"arrow ${this.isOpen ? 'open' : ''}\"></div>\n        </div>\n\n        ${this.isOpen ? `\n          <div class=\"dropdown\">\n            ${this.searchable ? `\n              <input\n                type=\"text\"\n                class=\"search-input\"\n                placeholder=\"Search options...\"\n                value=\"${this.searchValue}\"\n              >\n            ` : ''}\n\n            ${this.filteredOptions.length > 0\n              ? this.filteredOptions.map((option, index) => `\n                  <div\n                    class=\"option ${this.selectedOptions.find(selected => selected.value === option.value) ? 'selected' : ''} ${index === this.focusedIndex ? 'focused' : ''}\"\n                    data-value=\"${option.value}\"\n                  >\n                    ${option.label}\n                  </div>\n                `).join('')\n              : '<div class=\"no-options\">No options available</div>'\n            }\n          </div>\n        ` : ''}\n      </div>\n    `;\n\n    // Re-focus search input if it was previously focused\n    if (wasSearchFocused && this.searchable && this.isOpen) {\n      requestAnimationFrame(() => {\n        const searchInput = this.shadowRoot.querySelector('.search-input') as HTMLInputElement;\n        if (searchInput) {\n          searchInput.focus();\n          // Restore cursor position to the end\n          searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length);\n        }\n      });\n    }\n  }\n}\n\n/**\n * Conditionally defines the custom element if in a browser environment.\n */\nconst defineSmartSelect = (tagName: string = 'liwe3-select'): void => {\n  if (typeof window !== 'undefined' && !window.customElements.get(tagName)) {\n    customElements.define(tagName, SmartSelectElement);\n  }\n};\n\n// Auto-register with default tag name\ndefineSmartSelect();\n\nexport { defineSmartSelect };\n"],"names":["SmartSelectElement","name","oldValue","newValue","value","opt","val","option","optionsAttr","e","opts","searchInput","dropdown","options","query","focusedOption","dropdownRect","optionRect","trigger","triggerRect","viewportHeight","viewportWidth","dropdownMaxHeight","dropdownPadding","margin","spaceBelow","spaceAbove","shouldOpenUpward","width","left","top","maxHeight","position","event","newIndex","keydownHandler","target","newFocusedIndex","currentFocused","wasSearchFocused","displayText","index","selected","defineSmartSelect","tagName"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,13 @@
+import { SmartSelectElement as i, defineSmartSelect as r } from "./SmartSelect.js";
+import { AITextEditorElement as f, defineAITextEditor as m } from "./AITextEditor.js";
+const t = () => {
+  typeof window < "u" && (import("./SmartSelect.js").then(({ defineSmartSelect: e }) => e()), import("./AITextEditor.js").then(({ defineAITextEditor: e }) => e()));
+};
+export {
+  f as AITextEditorElement,
+  i as SmartSelectElement,
+  m as defineAITextEditor,
+  t as defineAllComponents,
+  r as defineSmartSelect
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * @liwe3/webcomponents\n * A collection of reusable web components\n */\n\n// Export SmartSelect\nexport {\n  SmartSelectElement,\n  defineSmartSelect,\n  type SelectOption\n} from './SmartSelect';\n\n// Export AITextEditor\nexport {\n  AITextEditorElement,\n  defineAITextEditor,\n  type AITextEditorConfig\n} from './AITextEditor';\n\n// Convenience function to register all components at once\nexport const defineAllComponents = (): void => {\n  if (typeof window !== 'undefined') {\n    import('./SmartSelect').then(({ defineSmartSelect }) => defineSmartSelect());\n    import('./AITextEditor').then(({ defineAITextEditor }) => defineAITextEditor());\n  }\n};\n"],"names":["defineAllComponents","defineSmartSelect","defineAITextEditor"],"mappings":";;AAoBO,MAAMA,IAAsB,MAAY;AAC7C,EAAI,OAAO,SAAW,QACpB,OAAO,kBAAe,EAAE,KAAK,CAAC,EAAE,mBAAAC,EAAAA,MAAwBA,GAAmB,GAC3E,OAAO,mBAAgB,EAAE,KAAK,CAAC,EAAE,oBAAAC,EAAAA,MAAyBA,GAAoB;AAElF;"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@liwe3/webcomponents",
+  "version": "1.0.0",
+  "description": "A collection of reusable web components including SmartSelect and AITextEditor",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./smart-select": {
+      "types": "./dist/SmartSelect.d.ts",
+      "import": "./dist/SmartSelect.js",
+      "default": "./dist/SmartSelect.js"
+    },
+    "./ai-text-editor": {
+      "types": "./dist/AITextEditor.d.ts",
+      "import": "./dist/AITextEditor.js",
+      "default": "./dist/AITextEditor.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "select",
+    "dropdown",
+    "ai-editor",
+    "text-editor",
+    "liwe3"
+  ],
+  "author": "Liwe3",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liwe3/webcomponents.git"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.16.0"
+}