@threadlabs/looma 0.1.28 → 0.2.1

package/dist/looma/p-caa37be2.entry.js

@@ -1 +0,0 @@
-import{r as e,c as i,g as t,h as s,H as a}from"./p-8BGiMGQ0.js";const o=class{constructor(t){e(this,t),this.queryChange=i(this,"query-change"),this.addItem=i(this,"add-item"),this.removeItem=i(this,"remove-item"),this.createItem=i(this,"create-item"),this.optionsChange=i(this,"options-change")}get host(){return t(this)}label="";placeholder="";items=[];config={};query;defaultQuery="";tokenSeparators=[];disabled=!1;readOnly=!1;required=!1;name="";queryChange;addItem;removeItem;createItem;optionsChange;raw="";rows=[];combobox;filteredConfig;filteredConfigSource;filteredSelection="";componentWillLoad(){this.raw=this.query??this.defaultQuery}syncQuery(){void 0!==this.query&&(this.raw=this.query)}get selectedValues(){return new Set(this.items.map((e=>e.value)))}get comboboxConfig(){const e=this.items.map((e=>e.value)).join("\0");if(this.filteredConfig&&this.filteredConfigSource===this.config&&this.filteredSelection===e)return this.filteredConfig;const i=this.config.filter,t=this.selectedValues;return this.filteredConfigSource=this.config,this.filteredSelection=e,this.filteredConfig={...this.config,filter:(e,s,a)=>!t.has(e.value)&&(i?i(e,s,a):e.label.toLocaleLowerCase().includes(s.toLocaleLowerCase()))},this.filteredConfig}setQuery(e,i){void 0===this.query&&(this.raw=e),this.queryChange.emit({query:e,display:e,trigger:i})}clearCommittedQuery(e,i){e.value="",this.raw="",this.setQuery("",i)}onQueryChange=e=>{e.stopPropagation(),this.setQuery(e.detail.query,e.detail.trigger)};onOptionsChange=e=>{e.stopPropagation(),this.rows=e.detail,this.optionsChange.emit(e.detail)};onValueChange=e=>{e.stopPropagation(),"selection"===e.detail.kind&&e.detail.option&&(this.addItem.emit({item:e.detail.option,index:this.items.length,trigger:e.detail.trigger}),queueMicrotask((()=>this.setQuery("",e.detail.trigger))))};onCreateEntry=e=>{e.stopPropagation();const i=e.detail.query.trim();i&&(this.setQuery("",e.detail.trigger),this.createItem.emit({query:i,trigger:e.detail.trigger}))};commitQuery(e,i){const t=this.raw.trim();if(!t)return;const s=t.toLocaleLowerCase(),a=this.rows.find((e=>e.label.trim().toLocaleLowerCase()===s));a?(this.clearCommittedQuery(e,i),this.addItem.emit({item:a,index:this.items.length,trigger:i})):this.config.allowCreate&&(this.clearCommittedQuery(e,i),this.createItem.emit({query:t,trigger:i}))}remove(e,i){const t=this.items[e];!t||t.disabled||this.disabled||this.readOnly||(this.removeItem.emit({item:t,index:e,trigger:i}),requestAnimationFrame((()=>{const i=this.host.shadowRoot?.querySelectorAll('[part="item"]')??[],s=i[Math.min(e,i.length-1)]??i[e-1];s&&s.dataset.value!==t.value?s.focus():this.focusInput()})))}focusItem(e){this.host.shadowRoot?.querySelectorAll('[part="item"]')[e]?.focus()}onItemKeyDown=(e,i)=>{e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||("ArrowLeft"===e.key?(e.preventDefault(),e.stopPropagation(),this.focusItem(Math.max(0,i-1))):"ArrowRight"===e.key?(e.preventDefault(),e.stopPropagation(),i===this.items.length-1?this.focusInput():this.focusItem(i+1)):"Backspace"!==e.key&&"Delete"!==e.key||(e.preventDefault(),e.stopPropagation(),this.remove(i,"keyboard")))};onKeyDown=e=>{if(e.defaultPrevented||e.isComposing||this.disabled||this.readOnly||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)return;const i=e.composedPath().find((e=>e instanceof HTMLInputElement));return i?this.tokenSeparators.includes(e.key)?(e.preventDefault(),e.stopPropagation(),void this.commitQuery(i,"keyboard")):void(this.raw||(i.selectionStart??0)>0||("ArrowLeft"===e.key&&this.items.length?(e.preventDefault(),this.focusItem(this.items.length-1)):"Backspace"===e.key&&this.items.length&&(e.preventDefault(),this.remove(this.items.length-1,"keyboard")))):void 0};async focusInput(){await(this.combobox?.focusInput())}render(){return s(a,{key:"ba4db0fdca6cae344fe6b0bf06c933a9a90d2d3f",onKeyDown:this.onKeyDown},s("ui-combobox",{key:"f5901b0b078b479425114d998618828cc458e7dd",ref:e=>this.combobox=e,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},s("div",{key:"374c80862302d5c36f4849f42e5ed13222addd1c",slot:"start",class:"items",role:"group","aria-label":`Selected ${this.label}`},this.items.map(((e,i)=>s("button",{type:"button",part:"item",class:"item","data-value":e.value,tabIndex:-1,disabled:this.disabled||this.readOnly||e.disabled,"aria-label":`${e.label}, press Delete or Backspace to remove`,onKeyDown:e=>this.onItemKeyDown(e,i)},s("slot",{name:`item-${e.id}`},s("ui-chip",{appearance:"pill"},e.label)))))),this.rows.map((e=>s("span",{slot:`option-${e.id}`},s("slot",{name:`option-${e.id}`},e.label)))),s("span",{key:"a23781c153e154cdff7066868c2da956e26b7d52",slot:"create"},s("slot",{key:"e3bde0d1e549e785fff877a1a7aac10df308f7a3",name:"create"},"Create “",this.raw,"”")),s("span",{key:"5837c4cde35d5984aaf1d364f1b850b9d63ff8ca",slot:"loading"},s("slot",{key:"1bdfa30849bea752bc5c93268b3427c964d1b5d3",name:"loading"},"Loading suggestions…")),s("span",{key:"519d7b1a7f28f9d19cd441598a690c8b4fdacf5b",slot:"empty"},s("slot",{key:"3163150e0f1edebb50509a5dacd576e4568eaaae",name:"empty"},"No suggestions.")),s("span",{key:"655e4f85d70eb97f0f0ecb2bac7b4228f5cf580f",slot:"error"},s("slot",{key:"a22667db30ee30003855ee69774eff3a4aab8566",name:"error"},"Unable to load suggestions.")),s("div",{key:"b01b74f3fc7136a3bf1875c81b9f3a662f3e993c",slot:"footer"},s("slot",{key:"7565ee0798072eebc6d1c458f89ce6c7941577dd",name:"footer"}))))}static get watchers(){return{query:[{syncQuery:0}]}}};o.style=":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}";export{o as ui_multi_combobox}

package/dist/types/components/ui-multi-combobox/ui-multi-combobox.d.ts

@@ -1,51 +0,0 @@
-import { type EventEmitter } from '../../stencil-public-runtime';
-import type { ComboboxConfig, ComboboxOption } from '../../field/combobox';
-import type { MultiComboboxCreate, MultiComboboxItem, MultiComboboxItemChange } from '../../field/multi-combobox';
-/** A multi-value combobox with removable, customizable selected items. */
-export declare class UIMultiCombobox {
-    host: HTMLElement;
-    label: string;
-    placeholder: string;
-    items: readonly MultiComboboxItem[];
-    config: ComboboxConfig;
-    query?: string;
-    defaultQuery: string;
-    /** Characters that commit the current query and leave the input ready for the next item. */
-    tokenSeparators: readonly string[];
-    disabled: boolean;
-    readOnly: boolean;
-    required: boolean;
-    name: string;
-    queryChange: EventEmitter<{
-        query: string;
-        display: string;
-        trigger: 'keyboard' | 'pointer' | 'programmatic';
-    }>;
-    addItem: EventEmitter<MultiComboboxItemChange>;
-    removeItem: EventEmitter<MultiComboboxItemChange>;
-    createItem: EventEmitter<MultiComboboxCreate>;
-    optionsChange: EventEmitter<readonly ComboboxOption[]>;
-    raw: string;
-    rows: readonly ComboboxOption[];
-    private combobox?;
-    private filteredConfig?;
-    private filteredConfigSource?;
-    private filteredSelection;
-    componentWillLoad(): void;
-    syncQuery(): void;
-    private get selectedValues();
-    private get comboboxConfig();
-    private setQuery;
-    private clearCommittedQuery;
-    private onQueryChange;
-    private onOptionsChange;
-    private onValueChange;
-    private onCreateEntry;
-    private commitQuery;
-    private remove;
-    private focusItem;
-    private onItemKeyDown;
-    private onKeyDown;
-    focusInput(): Promise<void>;
-    render(): any;
-}

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
-};