@threadlabs/looma 0.1.28 → 0.2.0

package/dist/ui-multi-combobox.entry-MEX7MU7P.js

@@ -1,196 +0,0 @@
-import {
-  Host,
-  createEvent,
-  getElement,
-  h,
-  registerInstance
-} from "./chunk-G5AWV77V.js";
-
-// dist/esm/ui-multi-combobox.entry.js
-var uiMultiComboboxCss = () => `:host{display:block;min-inline-size:0;color:var(--ui-text-primary);font:inherit}ui-combobox::part(field){flex-wrap:wrap;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-multi-combobox-min-block-size, 2.5rem);padding:var(--ui-space-1)}ui-combobox::part(input){flex:1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);width:auto;min-block-size:1.75rem;padding:var(--ui-space-0-5) var(--ui-space-1)}.items{display:contents}.item{appearance:none;display:inline-flex;min-inline-size:0;max-inline-size:min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));overflow:hidden;padding:0;border:0;border-radius:var(--ui-radius-1);background:transparent;color:inherit;font:inherit;cursor:default}.item>slot{display:block;min-inline-size:0;max-inline-size:100%;overflow:hidden}.item>slot::slotted(*){min-inline-size:0;max-inline-size:100%}.item:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:1px}.item:disabled{opacity:.6}`;
-var UIMultiCombobox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.queryChange = createEvent(this, "query-change");
-    this.addItem = createEvent(this, "add-item");
-    this.removeItem = createEvent(this, "remove-item");
-    this.createItem = createEvent(this, "create-item");
-    this.optionsChange = createEvent(this, "options-change");
-  }
-  get host() {
-    return getElement(this);
-  }
-  label = "";
-  placeholder = "";
-  items = [];
-  config = {};
-  query;
-  defaultQuery = "";
-  /** Characters that commit the current query and leave the input ready for the next item. */
-  tokenSeparators = [];
-  disabled = false;
-  readOnly = false;
-  required = false;
-  name = "";
-  queryChange;
-  addItem;
-  removeItem;
-  createItem;
-  optionsChange;
-  raw = "";
-  rows = [];
-  combobox;
-  filteredConfig;
-  filteredConfigSource;
-  filteredSelection = "";
-  componentWillLoad() {
-    this.raw = this.query ?? this.defaultQuery;
-  }
-  syncQuery() {
-    if (this.query !== void 0)
-      this.raw = this.query;
-  }
-  get selectedValues() {
-    return new Set(this.items.map((item) => item.value));
-  }
-  get comboboxConfig() {
-    const selectionKey = this.items.map((item) => item.value).join("\0");
-    if (this.filteredConfig && this.filteredConfigSource === this.config && this.filteredSelection === selectionKey) {
-      return this.filteredConfig;
-    }
-    const ownerFilter = this.config.filter;
-    const selected = this.selectedValues;
-    this.filteredConfigSource = this.config;
-    this.filteredSelection = selectionKey;
-    this.filteredConfig = {
-      ...this.config,
-      filter: (option, query, context) => !selected.has(option.value) && (ownerFilter ? ownerFilter(option, query, context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()))
-    };
-    return this.filteredConfig;
-  }
-  setQuery(query, trigger) {
-    if (this.query === void 0)
-      this.raw = query;
-    this.queryChange.emit({ query, display: query, trigger });
-  }
-  clearCommittedQuery(input, trigger) {
-    input.value = "";
-    this.raw = "";
-    this.setQuery("", trigger);
-  }
-  onQueryChange = (event) => {
-    event.stopPropagation();
-    this.setQuery(event.detail.query, event.detail.trigger);
-  };
-  onOptionsChange = (event) => {
-    event.stopPropagation();
-    this.rows = event.detail;
-    this.optionsChange.emit(event.detail);
-  };
-  onValueChange = (event) => {
-    event.stopPropagation();
-    if (event.detail.kind !== "selection" || !event.detail.option)
-      return;
-    const item = event.detail.option;
-    this.addItem.emit({ item, index: this.items.length, trigger: event.detail.trigger });
-    queueMicrotask(() => this.setQuery("", event.detail.trigger));
-  };
-  onCreateEntry = (event) => {
-    event.stopPropagation();
-    const query = event.detail.query.trim();
-    if (!query)
-      return;
-    this.setQuery("", event.detail.trigger);
-    this.createItem.emit({ query, trigger: event.detail.trigger });
-  };
-  commitQuery(input, trigger) {
-    const query = this.raw.trim();
-    if (!query)
-      return;
-    const normalizedQuery = query.toLocaleLowerCase();
-    const option = this.rows.find((row) => row.label.trim().toLocaleLowerCase() === normalizedQuery);
-    if (option) {
-      this.clearCommittedQuery(input, trigger);
-      this.addItem.emit({ item: option, index: this.items.length, trigger });
-    } else if (this.config.allowCreate) {
-      this.clearCommittedQuery(input, trigger);
-      this.createItem.emit({ query, trigger });
-    }
-  }
-  remove(index, trigger) {
-    const item = this.items[index];
-    if (!item || item.disabled || this.disabled || this.readOnly)
-      return;
-    this.removeItem.emit({ item, index, trigger });
-    requestAnimationFrame(() => {
-      const buttons = this.host.shadowRoot?.querySelectorAll('[part="item"]') ?? [];
-      const next = buttons[Math.min(index, buttons.length - 1)] ?? buttons[index - 1];
-      if (next && next.dataset.value !== item.value)
-        next.focus();
-      else
-        void this.focusInput();
-    });
-  }
-  focusItem(index) {
-    this.host.shadowRoot?.querySelectorAll('[part="item"]')[index]?.focus();
-  }
-  onItemKeyDown = (event, index) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.focusItem(Math.max(0, index - 1));
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault();
-      event.stopPropagation();
-      if (index === this.items.length - 1)
-        void this.focusInput();
-      else
-        this.focusItem(index + 1);
-    } else if (event.key === "Backspace" || event.key === "Delete") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.remove(index, "keyboard");
-    }
-  };
-  onKeyDown = (event) => {
-    if (event.defaultPrevented || event.isComposing || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
-    const input = event.composedPath().find((node) => node instanceof HTMLInputElement);
-    if (!input)
-      return;
-    if (this.tokenSeparators.includes(event.key)) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.commitQuery(input, "keyboard");
-      return;
-    }
-    if (this.raw || (input.selectionStart ?? 0) > 0)
-      return;
-    if (event.key === "ArrowLeft" && this.items.length) {
-      event.preventDefault();
-      this.focusItem(this.items.length - 1);
-    } else if (event.key === "Backspace" && this.items.length) {
-      event.preventDefault();
-      this.remove(this.items.length - 1, "keyboard");
-    }
-  };
-  async focusInput() {
-    await this.combobox?.focusInput();
-  }
-  render() {
-    return h(Host, { key: "ba4db0fdca6cae344fe6b0bf06c933a9a90d2d3f", onKeyDown: this.onKeyDown }, h("ui-combobox", { key: "f5901b0b078b479425114d998618828cc458e7dd", ref: (element) => this.combobox = element, label: this.label, "label-visibility": "sr-only", placeholder: this.placeholder, name: this.name, value: null, query: this.raw, config: this.comboboxConfig, size: "sm", disabled: this.disabled, readOnly: this.readOnly, required: this.required, "onQuery-change": this.onQueryChange, "onValue-change": this.onValueChange, "onCreate-entry": this.onCreateEntry, "onOptions-change": this.onOptionsChange }, h("div", { key: "374c80862302d5c36f4849f42e5ed13222addd1c", slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: (event) => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map((option) => h("span", { slot: `option-${option.id}` }, h("slot", { name: `option-${option.id}` }, option.label))), h("span", { key: "a23781c153e154cdff7066868c2da956e26b7d52", slot: "create" }, h("slot", { key: "e3bde0d1e549e785fff877a1a7aac10df308f7a3", name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: "5837c4cde35d5984aaf1d364f1b850b9d63ff8ca", slot: "loading" }, h("slot", { key: "1bdfa30849bea752bc5c93268b3427c964d1b5d3", name: "loading" }, "Loading suggestions\u2026")), h("span", { key: "519d7b1a7f28f9d19cd441598a690c8b4fdacf5b", slot: "empty" }, h("slot", { key: "3163150e0f1edebb50509a5dacd576e4568eaaae", name: "empty" }, "No suggestions.")), h("span", { key: "655e4f85d70eb97f0f0ecb2bac7b4228f5cf580f", slot: "error" }, h("slot", { key: "a22667db30ee30003855ee69774eff3a4aab8566", name: "error" }, "Unable to load suggestions.")), h("div", { key: "b01b74f3fc7136a3bf1875c81b9f3a662f3e993c", slot: "footer" }, h("slot", { key: "7565ee0798072eebc6d1c458f89ce6c7941577dd", name: "footer" }))));
-  }
-  static get watchers() {
-    return {
-      "query": [{
-        "syncQuery": 0
-      }]
-    };
-  }
-};
-UIMultiCombobox.style = uiMultiComboboxCss();
-export {
-  UIMultiCombobox as ui_multi_combobox
-};