@golemui/gui-lit 0.0.2

package/dropdown.element-Cfj40aJz.js

@@ -0,0 +1,225 @@
+import * as m from "@golemui/lit";
+import { consume as $, provide as v } from "@lit/context";
+import { LitElement as y, nothing as f, html as g } from "lit";
+import { property as F, state as h, query as b, customElement as w } from "lit/decorators.js";
+import { Subject as C, debounceTime as x } from "rxjs";
+import { d as L } from "./default-list-item-renderer-DNVEjKSX.js";
+var R = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, t, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? D(t, i) : t, u = e.length - 1, n; u >= 0; u--)
+    (n = e[u]) && (r = (a ? n(t, i, r) : n(r)) || r);
+  return a && r && R(t, i, r), r;
+};
+let s = class extends y {
+  constructor() {
+    super(...arguments), this.adapter = new m.InputWidgetAdapter(), this.debouncer = new C(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this.onDocumentClick = (e) => {
+      if (!this._isListVisible) return;
+      const t = e.composedPath(), i = this._inputRef && t.includes(this._inputRef), a = this._listRef && t.includes(this._listRef);
+      !i && !a && (this._isListVisible = !1);
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick), this.classList.add("gui-dropdown"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this._filteredItems = this.adapter.templateData.items, this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => {
+        const e = this.adapter.templateData;
+        e.items && this._listItems.length === 0 && this._filteredItems.length === 0 && (this._filteredItems = e.items, this._listItems = e.items), this.requestUpdate();
+      }),
+      this.debouncer.pipe(x(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+        this._filterItems(e);
+      })
+    );
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+  _onRangeChange(e) {
+    this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
+  }
+  _onUpdateItems(e) {
+    this._listItems = e.detail || [];
+  }
+  _onFocusChange(e) {
+    this._focusedIndex = e.detail.index;
+  }
+  _onClickItem(e, t) {
+    if (this.adapter.templateData.readonly) return;
+    const i = this.adapter.templateData;
+    this.adapter.valueChanged(e.value), this.adapter.filterChanged(""), this._focusedIndex = t, this._selectedItem = e, this._isFiltering = !1, this._isListVisible = !1, this._listRef && (this._listRef.focusItemAtIndex(t), this._inputRef.value = i.valueField ? e.template[i.valueField] : e.template);
+  }
+  _onValueChange(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((i) => i.value === t), this._isFiltering = !1, this._isListVisible = !1;
+  }
+  async _onKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this._isListVisible = !0, await this.updateComplete, this._listRef.focus(), this._listRef.scrollToSelectedIndex();
+        break;
+      case "Enter":
+        this._inputRef.value || (this.adapter.valueChanged(null), this._isListVisible = !1, this._isFiltering = !1);
+        break;
+    }
+  }
+  _onInput(e) {
+    const t = e.target.value;
+    this.debouncer.next(t);
+  }
+  _filterItems(e) {
+    const t = this.adapter.templateData, i = !!this.widget.on?.filter;
+    if (this.adapter.filterChanged(e), e && !i) {
+      this._isFiltering = !0, this._isListVisible = !0;
+      const a = t.searchFields ?? [t.labelField, t.valueField].filter(
+        (o) => !!o
+      ), r = a.length > 0, n = (t.items || []).filter((o) => {
+        const d = Object.keys(o);
+        if (!d.length)
+          return o.toString().toLowerCase().includes(e.toLowerCase());
+        const c = (_, I) => _ || o[I].toString().toLowerCase().includes(e.toLowerCase());
+        return r ? d.filter((_) => a.includes(_)).reduce(c, !1) : d.reduce(c, !1);
+      });
+      this._filteredItems = [...n];
+    } else
+      this._isFiltering = !1, this._filteredItems = [...t.items];
+  }
+  async _onFocus() {
+    this._isListVisible = !0, await this.updateComplete, this._listRef.scrollToSelectedIndex();
+  }
+  _onFocusOutInput(e) {
+    const t = e.relatedTarget;
+    t && this.contains(t) || (this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1);
+  }
+  _onBlur() {
+    this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1;
+  }
+  render() {
+    const e = this.adapter.templateData, t = this._listItems.slice(this._range.start, this._range.end), i = this.adapter.getItemRenderer(
+      e.itemRenderer,
+      L
+    ), a = e.labelField ?? e.valueField, r = a ? this._selectedItem?.template[a] : this._selectedItem?.template, u = !!this.widget.on?.filter;
+    return g`
+      <gui-label
+        .targetElement=${[this._listRef, this._inputRef]}
+        .uid=${this.widget.uid}
+        .label=${e.label}
+        .hint=${e.hint}
+        .errors=${e.errors}
+        .touched=${e.touched}
+        .required=${e.validator?.required}
+        .native=${!1}
+      ></gui-label>
+
+      <div class="gui-widget">
+        <input
+          type="text"
+          id=${this.widget.uid}
+          data-cy=${`${this.widget.uid}_textinput`}
+          .value=${r ?? ""}
+          ?required=${e.validator?.required}
+          ?disabled=${e.disabled}
+          ?readonly=${e.readonly}
+          placeholder=${e.placeholder ?? ""}
+          @keydown=${this._onKeyDown}
+          @input=${this._onInput}
+          @focusout=${this._onFocusOutInput}
+          @focus=${this._onFocus}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : f}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : f}
+        />
+
+        <gui-list
+          id=${this.widget.uid}
+          .uid=${this.widget.uid}
+          .value=${e.value ?? ""}
+          .valueField=${e.valueField}
+          .items=${this._isFiltering && !u ? this._filteredItems : e.items}
+          .itemHeight=${e.itemHeight}
+          .height=${e.height}
+          ?required=${e.validator?.required}
+          ?touched=${e.touched}
+          ?disabled=${e.disabled}
+          ?readonly=${e.readonly}
+          ?hidden=${!this._isListVisible}
+          @gui-range-change=${this._onRangeChange}
+          @gui-update-items=${this._onUpdateItems}
+          @gui-focus-change=${this._onFocusChange}
+          @focus=${this._onFocus}
+          @blur=${this._onBlur}
+          @change=${this._onValueChange}
+        >
+          ${t.map((n, o) => {
+      const d = this._range.start + o, p = e.value === n.value, c = this._focusedIndex === d;
+      return g`
+              <div
+                role="option"
+                tabindex="-1"
+                class="gui-list__item-wrapper"
+                id="${this.widget.uid}-item-${d}"
+                style="height: ${e.itemHeight || 40}px"
+                aria-selected=${p ? "true" : "false"}
+                @click=${() => this._onClickItem(n, d)}
+              >
+                ${i({
+        template: n.template,
+        value: n.value,
+        index: d,
+        selected: p,
+        disabled: !!e.disabled,
+        focused: c
+      })}
+              </div>
+            `;
+    })}
+        </gui-list>
+      </div>
+
+      <gui-errors .errors=${e.errors} .touched=${e.touched}></gui-errors>
+    `;
+  }
+};
+l([
+  $({ context: m.formContext }),
+  F({ attribute: !1 })
+], s.prototype, "formContext", 2);
+l([
+  v({ context: m.inputContext })
+], s.prototype, "adapter", 2);
+l([
+  h()
+], s.prototype, "_range", 2);
+l([
+  h()
+], s.prototype, "_filteredItems", 2);
+l([
+  h()
+], s.prototype, "_listItems", 2);
+l([
+  h()
+], s.prototype, "_focusedIndex", 2);
+l([
+  h()
+], s.prototype, "_isFiltering", 2);
+l([
+  h()
+], s.prototype, "_isListVisible", 2);
+l([
+  h()
+], s.prototype, "_selectedItem", 2);
+l([
+  b("input")
+], s.prototype, "_inputRef", 2);
+l([
+  b("gui-list")
+], s.prototype, "_listRef", 2);
+s = l([
+  w("gui-dropdown-input")
+], s);
+export {
+  s as DropdownElement
+};

package/flex.element-BSMOum-h.js

@@ -0,0 +1,65 @@
+import * as n from "@golemui/lit";
+import { consume as c, provide as u } from "@lit/context";
+import { LitElement as g, html as d } from "lit";
+import { property as h, customElement as m } from "lit/decorators.js";
+import { repeat as f } from "lit-html/directives/repeat.js";
+import { classMap as x } from "lit/directives/class-map.js";
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, t, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? w(t, s) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (a = (i ? p(t, s, a) : p(a)) || a);
+  return i && a && _(t, s, a), a;
+};
+let r = class extends g {
+  constructor() {
+    super(...arguments), this.adapter = new n.LayoutWidgetAdapter(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-flex"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  render() {
+    const e = {
+      "gui-flex__widget": !0,
+      "gui-flex__widget--horizontal": this.adapter.templateData.direction === "horizontal",
+      "gui-flex__widget--align-start": this.adapter.templateData.align === "start",
+      "gui-flex__widget--align-end": this.adapter.templateData.align === "end",
+      "gui-flex__widget--align-center": this.adapter.templateData.align === "center",
+      "gui-flex__widget--align-space-between": this.adapter.templateData.align === "space-between",
+      "gui-flex__widget--align-space-around": this.adapter.templateData.align === "space-around"
+    };
+    return d`
+      <div class=${x(e)} id=${this.widget?.uid}>
+        ${f(
+      this.adapter.templateData.children || [],
+      (t) => t?.uid,
+      (t) => d`<gui-widget .widget=${t}></gui-widget>`
+    )}
+      </div>
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+};
+o([
+  c({ context: n.formContext }),
+  h({ attribute: !1 })
+], r.prototype, "formContext", 2);
+o([
+  u({ context: n.layoutContext })
+], r.prototype, "adapter", 2);
+r = o([
+  m("gui-flex-layout")
+], r);
+export {
+  r as FlexElement
+};

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/widget.loaders';
+export * from './lib/components/form.element';