@golemui/gui-lit 0.0.2 → 0.12.0

package/{dropdown.element-Cfj40aJz.js → dropdown.element-CebROj9s.js}

@@ -1,41 +1,41 @@
-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;
+import * as g from "@golemui/lit";
+import { consume as w, provide as y } from "@lit/context";
+import { LitElement as F, nothing as m, html as f } from "lit";
+import { property as C, state as c, query as $, customElement as x } from "lit/decorators.js";
+import { Subject as L, debounceTime as D } from "rxjs";
+import { d as R } from "./default-list-item-renderer-DNVEjKSX.js";
+var V = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
+  for (var n = s > 1 ? void 0 : s ? k(t, i) : t, d = e.length - 1, o; d >= 0; d--)
+    (o = e[d]) && (n = (s ? o(t, i, n) : o(n)) || n);
+  return s && n && V(t, i, n), n;
 };
-let s = class extends y {
+let a = class extends F {
   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) => {
+    super(...arguments), this.adapter = new g.InputWidgetAdapter(), this.debouncer = new L(), 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);
+      const t = e.composedPath(), i = this._inputRef && t.includes(this._inputRef), s = this._listRef && t.includes(this._listRef);
+      !i && !s && (this._isListVisible = !1);
     };
   }
   createRenderRoot() {
     return this;
   }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
   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(
+    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick), this.classList.add("gui-dropdown", "gui-field"), 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.debouncer.pipe(D(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());
   }
@@ -43,7 +43,13 @@ let s = class extends y {
     this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
   }
   _onUpdateItems(e) {
-    this._listItems = e.detail || [];
+    const t = e.detail || [];
+    if (this._listItems = t, !this._selectedItem && this.adapter.templateData.value != null) {
+      const i = t.find(
+        (s) => s.value === this.adapter.templateData.value
+      );
+      i && (this._selectedItem = i);
+    }
   }
   _onFocusChange(e) {
     this._focusedIndex = e.detail.index;
@@ -75,16 +81,16 @@ let s = class extends y {
     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);
+      const s = t.searchFields ?? [t.labelField, t.valueField].filter(
+        (h) => !!h
+      ), n = s.length > 0, o = (t.items || []).filter((h) => {
+        const r = Object.keys(h);
+        if (!r.length)
+          return h.toString().toLowerCase().includes(e.toLowerCase());
+        const u = (p, _) => p || h[_].toString().toLowerCase().includes(e.toLowerCase());
+        return n ? r.filter((p) => s.includes(p)).reduce(u, !1) : r.reduce(u, !1);
       });
-      this._filteredItems = [...n];
+      this._filteredItems = [...o];
     } else
       this._isFiltering = !1, this._filteredItems = [...t.items];
   }
@@ -99,11 +105,11 @@ let s = class extends y {
     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(
+    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, i = this._listItems.slice(this._range.start, this._range.end), s = 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`
+      R
+    ), d = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, o = d ? this._selectedItem?.template[d] : this._selectedItem?.template, h = !!this.widget.on?.filter;
+    return f`
       <gui-label
         .targetElement=${[this._listRef, this._inputRef]}
         .uid=${this.widget.uid}
@@ -115,30 +121,37 @@ let s = class extends y {
         .native=${!1}
       ></gui-label>
 
-      <div class="gui-widget">
+      <div class="gui-widget" aria-expanded=${this._isListVisible}>
         <input
           type="text"
           id=${this.widget.uid}
           data-cy=${`${this.widget.uid}_textinput`}
-          .value=${r ?? ""}
+          .value=${o ?? e.value ?? ""}
           ?required=${e.validator?.required}
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
           placeholder=${e.placeholder ?? ""}
+          autocomplete=${e.autocomplete || m}
           @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}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : m}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : m}
         />
+        <span class="gui-dropdown__arrow"
+          ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <path
+              d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+            ></path></svg
+        ></span>
 
         <gui-list
           id=${this.widget.uid}
           .uid=${this.widget.uid}
           .value=${e.value ?? ""}
           .valueField=${e.valueField}
-          .items=${this._isFiltering && !u ? this._filteredItems : e.items}
+          .items=${this._isFiltering && !h ? this._filteredItems : e.items}
           .itemHeight=${e.itemHeight}
           .height=${e.height}
           ?required=${e.validator?.required}
@@ -153,25 +166,25 @@ let s = class extends y {
           @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`
+          ${i.map((r, b) => {
+      const u = this._range.start + b, p = e.value === r.value, _ = this._focusedIndex === u, I = e.labelField ?? "label", v = r.template !== null && typeof r.template == "object" && I && !e.itemRenderer ? r.template[I] : r.template;
+      return f`
               <div
                 role="option"
                 tabindex="-1"
                 class="gui-list__item-wrapper"
-                id="${this.widget.uid}-item-${d}"
+                id="${this.widget.uid}-item-${u}"
                 style="height: ${e.itemHeight || 40}px"
                 aria-selected=${p ? "true" : "false"}
-                @click=${() => this._onClickItem(n, d)}
+                @click=${() => this._onClickItem(r, u)}
               >
-                ${i({
-        template: n.template,
-        value: n.value,
-        index: d,
+                ${s({
+        template: v,
+        value: r.value,
+        index: u,
         selected: p,
         disabled: !!e.disabled,
-        focused: c
+        focused: _
       })}
               </div>
             `;
@@ -179,47 +192,51 @@ let s = class extends y {
         </gui-list>
       </div>
 
-      <gui-errors .errors=${e.errors} .touched=${e.touched}></gui-errors>
+      ${t ? f`<gui-errors
+            .uid=${this.widget.uid}
+            .errors=${e.errors}
+            .touched=${e.touched}
+          ></gui-errors>` : m}
     `;
   }
 };
 l([
-  $({ context: m.formContext }),
-  F({ attribute: !1 })
-], s.prototype, "formContext", 2);
+  w({ context: g.formContext }),
+  C({ attribute: !1 })
+], a.prototype, "formContext", 2);
 l([
-  v({ context: m.inputContext })
-], s.prototype, "adapter", 2);
+  y({ context: g.inputContext })
+], a.prototype, "adapter", 2);
 l([
-  h()
-], s.prototype, "_range", 2);
+  c()
+], a.prototype, "_range", 2);
 l([
-  h()
-], s.prototype, "_filteredItems", 2);
+  c()
+], a.prototype, "_filteredItems", 2);
 l([
-  h()
-], s.prototype, "_listItems", 2);
+  c()
+], a.prototype, "_listItems", 2);
 l([
-  h()
-], s.prototype, "_focusedIndex", 2);
+  c()
+], a.prototype, "_focusedIndex", 2);
 l([
-  h()
-], s.prototype, "_isFiltering", 2);
+  c()
+], a.prototype, "_isFiltering", 2);
 l([
-  h()
-], s.prototype, "_isListVisible", 2);
+  c()
+], a.prototype, "_isListVisible", 2);
 l([
-  h()
-], s.prototype, "_selectedItem", 2);
+  c()
+], a.prototype, "_selectedItem", 2);
 l([
-  b("input")
-], s.prototype, "_inputRef", 2);
+  $("input")
+], a.prototype, "_inputRef", 2);
 l([
-  b("gui-list")
-], s.prototype, "_listRef", 2);
-s = l([
-  w("gui-dropdown-input")
-], s);
+  $("gui-list")
+], a.prototype, "_listRef", 2);
+a = l([
+  x("gui-dropdown-input")
+], a);
 export {
-  s as DropdownElement
+  a as DropdownElement
 };

package/flex.element-BMqqfxjI.js

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

package/grid.element-CBMoOuLt.js

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