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

package/dist/combobox-jak7Ac1m.js

@@ -0,0 +1,437 @@
+import { unsafeCSS as _, css as f, LitElement as g, html as a, nothing as d } from "lit";
+import { property as n, state as b, query as u, customElement as x } from "lit/decorators.js";
+import { createPopper as v } from "@popperjs/core";
+import "./badge-DsDxWEHx.js";
+import "./checkbox-CX0LgsWP.js";
+import "./formfield-O327HYt0.js";
+import "./ui-icon-BMJNdIOq.js";
+const y = '.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%;cursor:pointer}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-2);padding:0;border:none;border-radius:0;background-color:transparent;cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{min-height:20px}.combobox__trigger--large{min-height:24px;font-size:var(--font-size-base)}.combobox__trigger--open{color:var(--color-body-text)}.combobox__trigger--readonly{cursor:default;color:var(--color-tertiary)}.combobox__trigger--disabled{cursor:not-allowed;color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron,.combobox__trigger--disabled .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__trigger--not-clearable .combobox__single-value,.combobox__trigger--not-clearable .combobox__placeholder{padding-right:24px}.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);position:absolute;right:var(--spacing-3)}.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:var(--spacing-1) var(--spacing-2);background-color:var(--color-light);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 12px 0 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:disabled{cursor:not-allowed}.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[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none}.combobox__dropdown{width:auto;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-sm);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-2) 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__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) 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-light)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';
+var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
+  for (var s = l > 1 ? void 0 : l ? $(t, r) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (s = (l ? c(t, r, s) : c(s)) || s);
+  return l && s && w(t, r, s), s;
+};
+let o = class extends g {
+  constructor() {
+    super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.helper = "", this.error = "", this.placeholder = "Seçim yapınız", this.required = !1, this.disabled = !1, this.readOnly = !1, this.variant = "default", this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.clearable = !0, this.selected = [], this.inputValue = "", this.isOpen = !1, this.focusedIndex = -1, this._filteredItems = [], this._filteredGroups = [], this._handleOutsideClick = (e) => {
+      e.composedPath().includes(this) || this._closeDropdown();
+    }, this._handleKeydown = (e) => {
+      if (!(this.readOnly || this.disabled))
+        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((r) => r[this.optionValue] !== e[this.optionValue])
+      );
+    }, this._clearSelection = (e) => {
+      e.stopPropagation(), this.setSelected([]), this.inputValue = "";
+    }, this._onFilterFocus = () => {
+      this.readOnly || this.disabled || (this.inputValue = "", this.isOpen = !0, this.focusedIndex = 0);
+    }, this._onFilterInput = (e) => {
+      this.readOnly || this.disabled || (this.inputValue = e.target.value, this.focusedIndex = 0, this.isOpen || (this.isOpen = !0));
+    }, this._stopPropagation = (e) => e.stopPropagation(), this._onTriggerClick = () => {
+      this.readOnly || this.disabled || (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
+    }, this._onFieldClick = (e) => {
+      if (this.readOnly || this.disabled) return;
+      const t = e.composedPath();
+      if (!(t.some((s) => {
+        const p = s?.classList;
+        return p?.contains("combobox__trigger") || p?.contains("combobox__chevron");
+      }) || t.some(
+        (s) => s?.classList?.contains("combobox__dropdown")
+      ))) {
+        if (this.filterable && !this.multiple) {
+          this.isOpen = !0, this._focusFilterInput();
+          return;
+        }
+        this.isOpen = !this.isOpen;
+      }
+    }, this._onChevronClick = () => {
+      if (!(this.readOnly || this.disabled)) {
+        if (this.isOpen) {
+          this._closeDropdown();
+          return;
+        }
+        this.isOpen = !0, this.filterable && !this.multiple && this._focusFilterInput();
+      }
+    };
+  }
+  // ==================== LIFECYCLE ====================
+  willUpdate(e) {
+    if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
+      const t = this.inputValue.toLocaleLowerCase(), r = (c) => c.filter(
+        (h) => String(h[this.optionLabel] ?? "").toLocaleLowerCase().includes(t)
+      ), l = [];
+      let s = [];
+      const p = () => {
+        const c = r(s);
+        c.length && l.push({ label: "", items: c }), s = [];
+      };
+      this.items.forEach((c) => {
+        const h = this._getGroupItems(c);
+        if (!h) {
+          s = [...s, c];
+          return;
+        }
+        p();
+        const m = r(h);
+        m.length && l.push({
+          label: this._getGroupLabel(c),
+          items: m
+        });
+      }), p(), this._filteredGroups = l, this._filteredItems = this._filteredGroups.flatMap((c) => c.items);
+    }
+  }
+  updated(e) {
+    if (e.has("isOpen") && this.isOpen && this.filterable && this.multiple && this.shadowRoot?.querySelector(".combobox__search")?.focus(), e.has("isOpen")) {
+      this.isOpen ? this.updateComplete.then(() => {
+        this._showPopover(), this._updatePopper();
+      }) : (this._hidePopover(), this._destroyPopper());
+      return;
+    }
+    this.isOpen && this._updatePopper();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._destroyPopper();
+  }
+  // ==================== 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" });
+    });
+  }
+  _getGroupItems(e) {
+    if (Array.isArray(e.options)) return e.options;
+    if (Array.isArray(e.items)) return e.items;
+  }
+  _getGroupLabel(e) {
+    return String(e.label ?? e.title ?? e.name ?? e[this.optionLabel] ?? "");
+  }
+  // ==================== SELECTION ====================
+  selectedItems() {
+    return this.selected;
+  }
+  isSelected(e) {
+    return this.selected.some((t) => t[this.optionValue] === e[this.optionValue]);
+  }
+  _selectItem(e, t) {
+    t.stopPropagation();
+    let r;
+    this.multiple ? r = this.isSelected(e) ? this.selected.filter((l) => l[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (r = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(r);
+  }
+  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 a`
+      <div class="combobox__tags">
+        ${this.selected.map(
+      (e) => a`
+            <logosphere-badge
+              variant="default"
+              text=${String(e[this.optionLabel])}
+              ?closeable=${!this.readOnly}
+              @close=${(t) => this._removeTag(e, t)}
+            ></logosphere-badge>
+          `
+    )}
+      </div>
+    `;
+  }
+  _renderItemContent(e, t) {
+    return this.itemRenderer ? this.itemRenderer(e, {
+      index: t,
+      selected: this.isSelected(e),
+      focused: t === this.focusedIndex,
+      multiple: this.multiple
+    }) : e[this.optionLabel];
+  }
+  _renderTriggerContent() {
+    return this.filterable && !this.multiple ? a`
+        <input
+          class="combobox__filter-input"
+          type="text"
+          .value=${this._filterDisplayValue}
+          placeholder=${this.placeholder}
+          ?disabled=${this.readOnly || this.disabled}
+          @focus=${this._onFilterFocus}
+          @input=${this._onFilterInput}
+          @keydown=${this._handleKeydown}
+          @click=${this._stopPropagation}
+        />
+        ${this.clearable && !this.readOnly && this.selected.length ? a`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            ` : d}
+      ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? a`
+        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
+        ${this.clearable && !this.readOnly ? a`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            ` : d}
+      ` : a`<span class="combobox__placeholder">${this.placeholder}</span>`;
+  }
+  _renderDropdown() {
+    let e = 0;
+    return a`
+      <div data-combobox-popper popover="manual" class="combobox__dropdown">
+        ${this.filterable && this.multiple ? a`
+              <input
+                class="combobox__search"
+                type="text"
+                placeholder=${this.placeholder}
+                .value=${this.inputValue}
+                @input=${this._onFilterInput}
+                @keydown=${this._handleKeydown}
+                @click=${this._stopPropagation}
+              />
+            ` : d}
+
+        <div class="combobox__list">
+          ${this._filteredItems.length === 0 ? a`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredGroups.map(
+      (t) => a`
+                  <div class="combobox__group ${t.label ? "combobox__group--titled" : ""}">
+                    ${t.label ? a`<div class="combobox__group-title">${t.label}</div>` : d}
+                    ${t.items.map((r) => {
+        const l = e++;
+        return a`
+                        <div
+                          class="combobox__item
+                          ${!this.multiple && this.isSelected(r) ? "combobox__item--selected" : ""}
+                          ${l === this.focusedIndex ? "combobox__item--focused" : ""}"
+                          @click=${(s) => this._selectItem(r, s)}
+                          @mouseenter=${() => {
+          this.focusedIndex = l;
+        }}
+                        >
+                          ${this.multiple ? a`
+                                <logosphere-checkbox
+                                  .checked=${this.isSelected(r)}
+                                  .value=${r[this.optionValue]}
+                                  @click=${this._stopPropagation}
+                                ></logosphere-checkbox>
+                              ` : d}
+                          ${this._renderItemContent(r, l)}
+                        </div>
+                      `;
+      })}
+                  </div>
+                `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  _getPopperModifiers() {
+    return [
+      { name: "offset", options: { offset: [0, 8] } },
+      { name: "preventOverflow", options: { padding: 8 } },
+      {
+        name: "flip",
+        options: {
+          padding: 8,
+          fallbackPlacements: ["top-start", "right-start", "left-start", "bottom-end", "top-end"]
+        }
+      }
+    ];
+  }
+  _getPopperReferenceElement() {
+    return this._formFieldElement?.shadowRoot?.querySelector(
+      ".formfield__container"
+    ) ?? this._referenceElement;
+  }
+  _updatePopper() {
+    const e = this._getPopperReferenceElement(), t = this._dropdownElement;
+    if (!this.isOpen || !e || !t || !this.isConnected) return;
+    const r = Math.round(e.getBoundingClientRect().width);
+    if (t.style.width = `${r}px`, this._popperInstance) {
+      this._popperInstance.setOptions({
+        placement: "bottom-start",
+        strategy: "fixed",
+        modifiers: this._getPopperModifiers()
+      }), this._popperInstance.update();
+      return;
+    }
+    this._popperInstance = v(e, t, {
+      placement: "bottom-start",
+      strategy: "fixed",
+      modifiers: this._getPopperModifiers()
+    });
+  }
+  _destroyPopper() {
+    this._popperInstance && (this._popperInstance.destroy(), this._popperInstance = void 0);
+  }
+  _showPopover() {
+    this._dropdownElement?.showPopover?.();
+  }
+  _hidePopover() {
+    const e = this._dropdownElement;
+    try {
+      e?.hidePopover?.();
+    } catch {
+    }
+  }
+  // ==================== MAIN RENDER ====================
+  render() {
+    const e = [
+      "combobox__trigger",
+      `combobox__trigger--${this.size}`,
+      this.disabled ? "combobox__trigger--disabled" : "",
+      this.readOnly ? "combobox__trigger--readonly" : "",
+      !this.readOnly && !this.disabled && this.isOpen ? "combobox__trigger--open" : "",
+      this.clearable ? "" : "combobox__trigger--not-clearable"
+    ].filter(Boolean).join(" ");
+    return a`
+      <div class="combobox">
+        <logosphere-formfield
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          cursor="pointer"
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readOnly}
+          .size=${this.size}
+          .variant=${this.variant}
+          .forceFocused=${this.isOpen}
+          @click=${this._onFieldClick}
+        >
+          <div class="combobox__wrapper">
+            <div
+              class="${e}"
+              tabindex="${this.readOnly || this.filterable || this.disabled ? -1 : 0}"
+              @click=${this._onTriggerClick}
+              @keydown=${this.filterable ? d : this._handleKeydown}
+            >
+              ${this._renderTriggerContent()}
+            </div>
+
+            ${this._renderDropdown()}
+          </div>
+          <span
+            class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}"
+            @click=${this._onChevronClick}
+          >
+            <ui-icon name="uil-angle-down" size="16"></ui-icon>
+          </span>
+        </logosphere-formfield>
+      </div>
+    `;
+  }
+};
+o.styles = [
+  f`
+      ${_(y)}
+    `
+];
+i([
+  n({ type: String })
+], o.prototype, "label", 2);
+i([
+  n({ type: String })
+], o.prototype, "helper", 2);
+i([
+  n({ type: String })
+], o.prototype, "error", 2);
+i([
+  n({ type: String })
+], o.prototype, "placeholder", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "required", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "disabled", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "readOnly", 2);
+i([
+  n({ type: String })
+], o.prototype, "variant", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "multiple", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "filterable", 2);
+i([
+  n({ type: String })
+], o.prototype, "optionLabel", 2);
+i([
+  n({ type: String })
+], o.prototype, "optionValue", 2);
+i([
+  n({ type: String })
+], o.prototype, "emptyMessage", 2);
+i([
+  n({ type: Array })
+], o.prototype, "items", 2);
+i([
+  n({ attribute: !1 })
+], o.prototype, "itemRenderer", 2);
+i([
+  n({ type: String })
+], o.prototype, "size", 2);
+i([
+  n({ type: Boolean })
+], o.prototype, "clearable", 2);
+i([
+  b()
+], o.prototype, "selected", 2);
+i([
+  b()
+], o.prototype, "inputValue", 2);
+i([
+  b()
+], o.prototype, "isOpen", 2);
+i([
+  b()
+], o.prototype, "focusedIndex", 2);
+i([
+  u(".combobox__wrapper")
+], o.prototype, "_referenceElement", 2);
+i([
+  u("logosphere-formfield")
+], o.prototype, "_formFieldElement", 2);
+i([
+  u("[data-combobox-popper]")
+], o.prototype, "_dropdownElement", 2);
+o = i([
+  x("logosphere-combobox")
+], o);
+export {
+  o as C
+};

package/dist/combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-pmE7bgEL.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-BmIFPk8X.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});

package/dist/combobox.js

@@ -1,4 +1,4 @@
-import { C as m } from "./combobox-BJbI-Tgi.js";
+import { C as m } from "./combobox-jak7Ac1m.js";
 export {
   m as Combobox
 };