@logosphere-ui/core 0.0.0-alpha.4 → 0.0.0-alpha.40

package/dist/combobox-BJbI-Tgi.js

@@ -1,268 +0,0 @@
-import { LitElement as b, nothing as n, html as r, unsafeCSS as u, css as m } from "lit";
-import { property as l, state as d, customElement as _ } from "lit/decorators.js";
-const f = '.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{height:32px}.combobox__trigger--large{height:40px;font-size:var(--font-size-base)}.combobox__trigger--open{border-color:var(--color-secondary-hover)}.combobox__trigger--readonly{cursor:default;background-color:var(--color-tertiary-bg);color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:0 var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown{position:absolute;top:calc(100% + var(--spacing-1));left:0;width:100%;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-base);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-1-5) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1-5) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-tertiary-bg)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, o, s, c) => {
-  for (var a = c > 1 ? void 0 : c ? x(o, s) : o, p = e.length - 1, h; p >= 0; p--)
-    (h = e[p]) && (a = (c ? h(o, s, a) : h(a)) || a);
-  return c && a && g(o, s, a), a;
-};
-let t = class extends b {
-  constructor() {
-    super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.placeholder = "Seçim yapınız", this.required = !1, this.readOnly = !1, this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.selected = [], this.inputValue = "", this.isOpen = !1, this.focusedIndex = -1, this._filteredItems = [], this._handleOutsideClick = (e) => {
-      e.composedPath().includes(this) || this._closeDropdown();
-    }, this._handleKeydown = (e) => {
-      if (!this.readOnly)
-        switch (e.key) {
-          case "ArrowDown":
-            e.preventDefault(), this.isOpen ? this.focusedIndex = Math.min(this.focusedIndex + 1, this._filteredItems.length - 1) : (this.isOpen = !0, this.focusedIndex = 0), this._scrollFocusedIntoView();
-            break;
-          case "ArrowUp":
-            e.preventDefault(), this.isOpen && (this.focusedIndex = Math.max(this.focusedIndex - 1, 0), this._scrollFocusedIntoView());
-            break;
-          case "Enter":
-            e.preventDefault(), this.isOpen ? this.focusedIndex >= 0 && this.focusedIndex < this._filteredItems.length && this._selectItem(this._filteredItems[this.focusedIndex], e) : (this.isOpen = !0, this.focusedIndex = 0);
-            break;
-          case "Escape":
-            e.preventDefault(), this._closeDropdown();
-            break;
-        }
-    }, this._removeTag = (e, o) => {
-      o.stopPropagation(), this.setSelected(
-        this.selected.filter((s) => s[this.optionValue] !== e[this.optionValue])
-      );
-    }, this._clearSelection = (e) => {
-      e.stopPropagation(), this.setSelected([]), this.inputValue = "";
-    }, this._onFilterFocus = () => {
-      this.inputValue = "", this.isOpen = !0, this.focusedIndex = 0;
-    }, this._onFilterInput = (e) => {
-      this.inputValue = e.target.value, this.focusedIndex = 0, this.isOpen || (this.isOpen = !0);
-    }, this._stopPropagation = (e) => e.stopPropagation(), this._onTriggerClick = () => {
-      this.readOnly || (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
-    };
-  }
-  // ==================== LIFECYCLE ====================
-  willUpdate(e) {
-    if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
-      const o = this.inputValue.toLocaleLowerCase();
-      this._filteredItems = this.items.filter(
-        (s) => String(s[this.optionLabel] ?? "").toLocaleLowerCase().includes(o)
-      );
-    }
-  }
-  updated(e) {
-    e.has("isOpen") && this.isOpen && this.filterable && this.multiple && this.shadowRoot?.querySelector(".combobox__search")?.focus();
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
-  }
-  // ==================== HELPERS ====================
-  _closeDropdown() {
-    this.isOpen = !1, this.focusedIndex = -1, this.filterable && (this.inputValue = "");
-  }
-  get _filterDisplayValue() {
-    return this.isOpen ? this.inputValue : !this.multiple && this.selected.length ? String(this.selected[0][this.optionLabel]) : "";
-  }
-  _focusFilterInput() {
-    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector(".combobox__filter-input")?.focus();
-    });
-  }
-  _scrollFocusedIntoView() {
-    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({ block: "nearest" });
-    });
-  }
-  // ==================== SELECTION ====================
-  selectedItems() {
-    return this.selected;
-  }
-  isSelected(e) {
-    return this.selected.some((o) => o[this.optionValue] === e[this.optionValue]);
-  }
-  _selectItem(e, o) {
-    o.stopPropagation();
-    let s;
-    this.multiple ? s = this.isSelected(e) ? this.selected.filter((c) => c[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (s = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(s);
-  }
-  setSelected(e) {
-    this.selected = e, this.dispatchEvent(new CustomEvent("selected", { detail: { selected: e }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 }));
-  }
-  // ==================== RENDER PARTS ====================
-  _renderTagList() {
-    return r`
-      <div class="combobox__tags">
-        ${this.selected.map((e) => r`
-          <span class="combobox__tag">
-            ${e[this.optionLabel]}
-            ${this.readOnly ? n : r`
-              <button
-                class="combobox__tag-remove"
-                @click=${(o) => this._removeTag(e, o)}
-                aria-label="Remove"
-              >
-                <ui-icon name="uil-times" size="12"></ui-icon>
-              </button>
-            `}
-          </span>
-        `)}
-      </div>
-    `;
-  }
-  _renderTriggerContent() {
-    return this.filterable && !this.multiple ? r`
-        <input
-          class="combobox__filter-input"
-          type="text"
-          .value=${this._filterDisplayValue}
-          placeholder=${this.placeholder}
-          ?disabled=${this.readOnly}
-          @focus=${this._onFilterFocus}
-          @input=${this._onFilterInput}
-          @keydown=${this._handleKeydown}
-          @click=${this._stopPropagation}
-        />
-        ${!this.readOnly && this.selected.length ? r`
-          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        ` : n}
-      ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? r`
-        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
-        ${this.readOnly ? n : r`
-          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        `}
-      ` : r`<span class="combobox__placeholder">${this.placeholder}</span>`;
-  }
-  _renderDropdown() {
-    return this.isOpen ? r`
-      <div class="combobox__dropdown">
-        ${this.filterable && this.multiple ? r`
-          <input
-            class="combobox__search"
-            type="text"
-            placeholder=${this.placeholder}
-            .value=${this.inputValue}
-            @input=${this._onFilterInput}
-            @keydown=${this._handleKeydown}
-            @click=${this._stopPropagation}
-          />
-        ` : n}
-
-        <div class="combobox__list">
-          ${this._filteredItems.length === 0 ? r`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map((e, o) => r`
-                <div
-                  class="combobox__item
-                    ${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
-                    ${o === this.focusedIndex ? "combobox__item--focused" : ""}"
-                  @click=${(s) => this._selectItem(e, s)}
-                  @mouseenter=${() => {
-      this.focusedIndex = o;
-    }}
-                >
-                  ${this.multiple ? r`
-                    <logosphere-checkbox
-                      .checked=${this.isSelected(e)}
-                      .value=${e[this.optionValue]}
-                      @click=${this._stopPropagation}
-                    ></logosphere-checkbox>
-                  ` : n}
-                  ${e[this.optionLabel]}
-                </div>
-              `)}
-        </div>
-      </div>
-    ` : n;
-  }
-  // ==================== MAIN RENDER ====================
-  render() {
-    const e = [
-      "combobox__label",
-      this.required && !this.readOnly ? "combobox__label--required" : ""
-    ].filter(Boolean).join(" "), o = [
-      "combobox__trigger",
-      `combobox__trigger--${this.size}`,
-      this.readOnly ? "combobox__trigger--readonly" : "",
-      !this.readOnly && this.isOpen ? "combobox__trigger--open" : ""
-    ].filter(Boolean).join(" ");
-    return r`
-      <div class="combobox">
-        ${this.label ? r`
-          <label for="${this.inputId}" class="${e}">${this.label}</label>
-        ` : n}
-
-        <div class="combobox__wrapper">
-          <div
-            class="${o}"
-            tabindex="${this.readOnly || this.filterable ? -1 : 0}"
-            @click=${this._onTriggerClick}
-            @keydown=${this.filterable ? n : this._handleKeydown}
-          >
-            ${this._renderTriggerContent()}
-            <span class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}">
-              <ui-icon name="uil-angle-down" size="16"></ui-icon>
-            </span>
-          </div>
-
-          ${this._renderDropdown()}
-        </div>
-      </div>
-    `;
-  }
-};
-t.styles = [m`${u(f)}`];
-i([
-  l({ type: String })
-], t.prototype, "label", 2);
-i([
-  l({ type: String })
-], t.prototype, "placeholder", 2);
-i([
-  l({ type: Boolean })
-], t.prototype, "required", 2);
-i([
-  l({ type: Boolean })
-], t.prototype, "readOnly", 2);
-i([
-  l({ type: Boolean })
-], t.prototype, "multiple", 2);
-i([
-  l({ type: Boolean })
-], t.prototype, "filterable", 2);
-i([
-  l({ type: String })
-], t.prototype, "optionLabel", 2);
-i([
-  l({ type: String })
-], t.prototype, "optionValue", 2);
-i([
-  l({ type: String })
-], t.prototype, "emptyMessage", 2);
-i([
-  l({ type: Array })
-], t.prototype, "items", 2);
-i([
-  l({ type: String })
-], t.prototype, "size", 2);
-i([
-  d()
-], t.prototype, "selected", 2);
-i([
-  d()
-], t.prototype, "inputValue", 2);
-i([
-  d()
-], t.prototype, "isOpen", 2);
-i([
-  d()
-], t.prototype, "focusedIndex", 2);
-t = i([
-  _("logosphere-combobox")
-], t);
-export {
-  t as C
-};

package/dist/combobox-pmE7bgEL.cjs

@@ -1,99 +0,0 @@
-"use strict";const o=require("lit"),i=require("lit/decorators.js"),p='.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{height:32px}.combobox__trigger--large{height:40px;font-size:var(--font-size-base)}.combobox__trigger--open{border-color:var(--color-secondary-hover)}.combobox__trigger--readonly{cursor:default;background-color:var(--color-tertiary-bg);color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:0 var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown{position:absolute;top:calc(100% + var(--spacing-1));left:0;width:100%;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-base);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-1-5) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1-5) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-tertiary-bg)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';var b=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(n,e,t,s)=>{for(var l=s>1?void 0:s?d(e,t):e,a=n.length-1,c;a>=0;a--)(c=n[a])&&(l=(s?c(e,t,l):c(l))||l);return s&&l&&b(e,t,l),l};exports.Combobox=class extends o.LitElement{constructor(){super(...arguments),this.inputId="combo-"+Math.random().toString(36).substring(2),this.label="",this.placeholder="Seçim yapınız",this.required=!1,this.readOnly=!1,this.multiple=!1,this.filterable=!1,this.optionLabel="label",this.optionValue="value",this.emptyMessage="Sonuç yok",this.items=[],this.size="default",this.selected=[],this.inputValue="",this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._closeDropdown()},this._handleKeydown=e=>{if(!this.readOnly)switch(e.key){case"ArrowDown":e.preventDefault(),this.isOpen?this.focusedIndex=Math.min(this.focusedIndex+1,this._filteredItems.length-1):(this.isOpen=!0,this.focusedIndex=0),this._scrollFocusedIntoView();break;case"ArrowUp":e.preventDefault(),this.isOpen&&(this.focusedIndex=Math.max(this.focusedIndex-1,0),this._scrollFocusedIntoView());break;case"Enter":e.preventDefault(),this.isOpen?this.focusedIndex>=0&&this.focusedIndex<this._filteredItems.length&&this._selectItem(this._filteredItems[this.focusedIndex],e):(this.isOpen=!0,this.focusedIndex=0);break;case"Escape":e.preventDefault(),this._closeDropdown();break}},this._removeTag=(e,t)=>{t.stopPropagation(),this.setSelected(this.selected.filter(s=>s[this.optionValue]!==e[this.optionValue]))},this._clearSelection=e=>{e.stopPropagation(),this.setSelected([]),this.inputValue=""},this._onFilterFocus=()=>{this.inputValue="",this.isOpen=!0,this.focusedIndex=0},this._onFilterInput=e=>{this.inputValue=e.target.value,this.focusedIndex=0,this.isOpen||(this.isOpen=!0)},this._stopPropagation=e=>e.stopPropagation(),this._onTriggerClick=()=>{this.readOnly||(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const t=this.inputValue.toLocaleLowerCase();this._filteredItems=this.items.filter(s=>String(s[this.optionLabel]??"").toLocaleLowerCase().includes(t))}}updated(e){e.has("isOpen")&&this.isOpen&&this.filterable&&this.multiple&&this.shadowRoot?.querySelector(".combobox__search")?.focus()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_closeDropdown(){this.isOpen=!1,this.focusedIndex=-1,this.filterable&&(this.inputValue="")}get _filterDisplayValue(){return this.isOpen?this.inputValue:!this.multiple&&this.selected.length?String(this.selected[0][this.optionLabel]):""}_focusFilterInput(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".combobox__filter-input")?.focus()})}_scrollFocusedIntoView(){this.updateComplete.then(()=>{this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({block:"nearest"})})}selectedItems(){return this.selected}isSelected(e){return this.selected.some(t=>t[this.optionValue]===e[this.optionValue])}_selectItem(e,t){t.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(l=>l[this.optionValue]!==e[this.optionValue]):[...this.selected,e]:(s=[e],this.isOpen=!1,this.filterable&&(this.inputValue="")),this.setSelected(s)}setSelected(e){this.selected=e,this.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}_renderTagList(){return o.html`
-      <div class="combobox__tags">
-        ${this.selected.map(e=>o.html`
-          <span class="combobox__tag">
-            ${e[this.optionLabel]}
-            ${this.readOnly?o.nothing:o.html`
-              <button
-                class="combobox__tag-remove"
-                @click=${t=>this._removeTag(e,t)}
-                aria-label="Remove"
-              >
-                <ui-icon name="uil-times" size="12"></ui-icon>
-              </button>
-            `}
-          </span>
-        `)}
-      </div>
-    `}_renderTriggerContent(){return this.filterable&&!this.multiple?o.html`
-        <input
-          class="combobox__filter-input"
-          type="text"
-          .value=${this._filterDisplayValue}
-          placeholder=${this.placeholder}
-          ?disabled=${this.readOnly}
-          @focus=${this._onFilterFocus}
-          @input=${this._onFilterInput}
-          @keydown=${this._handleKeydown}
-          @click=${this._stopPropagation}
-        />
-        ${!this.readOnly&&this.selected.length?o.html`
-          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        `:o.nothing}
-      `:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?o.html`
-        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
-        ${this.readOnly?o.nothing:o.html`
-          <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        `}
-      `:o.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){return this.isOpen?o.html`
-      <div class="combobox__dropdown">
-        ${this.filterable&&this.multiple?o.html`
-          <input
-            class="combobox__search"
-            type="text"
-            placeholder=${this.placeholder}
-            .value=${this.inputValue}
-            @input=${this._onFilterInput}
-            @keydown=${this._handleKeydown}
-            @click=${this._stopPropagation}
-          />
-        `:o.nothing}
-
-        <div class="combobox__list">
-          ${this._filteredItems.length===0?o.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredItems.map((e,t)=>o.html`
-                <div
-                  class="combobox__item
-                    ${!this.multiple&&this.isSelected(e)?"combobox__item--selected":""}
-                    ${t===this.focusedIndex?"combobox__item--focused":""}"
-                  @click=${s=>this._selectItem(e,s)}
-                  @mouseenter=${()=>{this.focusedIndex=t}}
-                >
-                  ${this.multiple?o.html`
-                    <logosphere-checkbox
-                      .checked=${this.isSelected(e)}
-                      .value=${e[this.optionValue]}
-                      @click=${this._stopPropagation}
-                    ></logosphere-checkbox>
-                  `:o.nothing}
-                  ${e[this.optionLabel]}
-                </div>
-              `)}
-        </div>
-      </div>
-    `:o.nothing}render(){const e=["combobox__label",this.required&&!this.readOnly?"combobox__label--required":""].filter(Boolean).join(" "),t=["combobox__trigger",`combobox__trigger--${this.size}`,this.readOnly?"combobox__trigger--readonly":"",!this.readOnly&&this.isOpen?"combobox__trigger--open":""].filter(Boolean).join(" ");return o.html`
-      <div class="combobox">
-        ${this.label?o.html`
-          <label for="${this.inputId}" class="${e}">${this.label}</label>
-        `:o.nothing}
-
-        <div class="combobox__wrapper">
-          <div
-            class="${t}"
-            tabindex="${this.readOnly||this.filterable?-1:0}"
-            @click=${this._onTriggerClick}
-            @keydown=${this.filterable?o.nothing:this._handleKeydown}
-          >
-            ${this._renderTriggerContent()}
-            <span class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}">
-              <ui-icon name="uil-angle-down" size="16"></ui-icon>
-            </span>
-          </div>
-
-          ${this._renderDropdown()}
-        </div>
-      </div>
-    `}};exports.Combobox.styles=[o.css`${o.unsafeCSS(p)}`];r([i.property({type:String})],exports.Combobox.prototype,"label",2);r([i.property({type:String})],exports.Combobox.prototype,"placeholder",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"required",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);r([i.property({type:String})],exports.Combobox.prototype,"optionLabel",2);r([i.property({type:String})],exports.Combobox.prototype,"optionValue",2);r([i.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);r([i.property({type:Array})],exports.Combobox.prototype,"items",2);r([i.property({type:String})],exports.Combobox.prototype,"size",2);r([i.state()],exports.Combobox.prototype,"selected",2);r([i.state()],exports.Combobox.prototype,"inputValue",2);r([i.state()],exports.Combobox.prototype,"isOpen",2);r([i.state()],exports.Combobox.prototype,"focusedIndex",2);exports.Combobox=r([i.customElement("logosphere-combobox")],exports.Combobox);