@golemui/gui-lit 0.0.2 → 0.12.0

package/repeater.element-AaifWsOB.js

@@ -0,0 +1,136 @@
+import * as c from "@golemui/lit";
+import { getItemKey as l } from "@golemui/gui-shared";
+import { consume as h, provide as m } from "@lit/context";
+import { LitElement as g, nothing as n, html as s } from "lit";
+import { repeat as b } from "lit-html/directives/repeat.js";
+import { property as $, state as v, query as f, customElement as _ } from "lit/decorators.js";
+var I = Object.defineProperty, w = Object.getOwnPropertyDescriptor, u = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? w(t, a) : t, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (i = (r ? p(t, a, i) : p(i)) || i);
+  return r && i && I(t, a, i), i;
+};
+let C = 0;
+const y = () => C++;
+let o = class extends g {
+  constructor() {
+    super(...arguments), this.adapter = new c.InputWidgetAdapter(), this.isFocused = !1, 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-repeater", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  onFocusIn(e) {
+    e.stopPropagation(), this.isFocused = !0;
+  }
+  onFocusOut(e) {
+    e.stopPropagation(), this.adapter.onBlur(), this.isFocused = !1;
+  }
+  render() {
+    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0;
+    return s`
+      <div
+        id=${this.widget.uid}
+        class=${`gui-repeater__main-card gui-repeater__card ${this.isFocused ? "gui-repeater__card--focused" : ""}`}
+        @focusin=${this.onFocusIn}
+        @focusout=${this.onFocusOut}
+      >
+        <gui-label
+          .targetElement=${[this._repeaterRef]}
+          .uid=${this.widget.uid}
+          .label=${e.label}
+          .errors=${e.errors}
+          .touched=${e.touched}
+          .required=${e.validator?.required}
+          .native=${!1}
+        ></gui-label>
+        ${e.value ? b(
+      e.value,
+      (a) => l(a, y),
+      (a, r) => s`
+                <div class="gui-repeater__card">
+                  <div class="gui-repeater__card-header">
+                    ${e.title ? s`<span class="gui-repeater__card-title"
+                          >${e.title} ${r + 1}</span
+                        >` : n}
+                    <button
+                      type="button"
+                      tabindex="0"
+                      class="gui-button gui-button--sm gui-repeater__remove-btn"
+                      @click=${() => this.removeItem(r)}
+                    >
+                      ${e.removeButtonIcon ? s`<span
+                            class="gui-widget-icon gui-button-icon ${e.removeButtonIcon}"
+                            data-icon=${e.removeButtonIcon}
+                          ></span>` : n}
+                      ${e.removeLabel ?? "Remove"}
+                    </button>
+                  </div>
+                  <gui-repeater-widget
+                    .repeaterIndex=${r}
+                    .widget=${e.template}
+                  ></gui-repeater-widget>
+                </div>
+              `
+    ) : n}
+
+        <button
+          type="button"
+          tabindex="0"
+          class="gui-button gui-repeater__add-btn"
+          @click=${() => this.addItem()}
+          ?disabled=${!!(e.limit && e.limit === e.value?.length)}
+        >
+          ${e.addButtonIcon ? s`<span
+                class="gui-widget-icon gui-button-icon ${e.addButtonIcon}"
+                data-icon=${e.addButtonIcon}
+              ></span>` : n}
+          ${e.addLabel ?? "Add"}
+        </button>
+      </div>
+      ${t ? s`<gui-errors
+            .uid=${this.widget.uid}
+            .errors=${e.errors}
+            .touched=${e.touched}
+          ></gui-errors>` : n}
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+  addItem() {
+    const e = [...this.adapter.templateData.value ?? [], {}];
+    this.adapter.valueChanged(e), this.requestUpdate();
+  }
+  removeItem(e) {
+    const t = (this.adapter.templateData.value ?? []).filter((a, r) => e !== r);
+    "structuredClone" in window ? this.adapter.valueChanged(structuredClone(t)) : this.adapter.valueChanged(JSON.parse(JSON.stringify(t))), this.requestUpdate();
+  }
+};
+u([
+  h({ context: c.formContext }),
+  $({ attribute: !1 })
+], o.prototype, "formContext", 2);
+u([
+  m({ context: c.inputContext })
+], o.prototype, "adapter", 2);
+u([
+  v()
+], o.prototype, "isFocused", 2);
+u([
+  f(".gui-repeater__main-card")
+], o.prototype, "_repeaterRef", 2);
+o = u([
+  _("gui-repeater-input")
+], o);
+export {
+  o as RepeaterElement
+};

package/{select.element-LWiqYxzA.js → select.element-BLxtqB0A.js}

@@ -2,10 +2,10 @@ import * as d from "@golemui/lit";
 import { consume as n, provide as u } from "@lit/context";
 import { LitElement as h, html as c } from "lit";
 import { property as m, customElement as b } from "lit/decorators.js";
-var v = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(e, i) : e, l = t.length - 1, p; l >= 0; l--)
+var $ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(e, i) : e, l = t.length - 1, p; l >= 0; l--)
     (p = t[l]) && (a = (r ? p(e, i, a) : p(a)) || a);
-  return r && a && v(e, i, a), a;
+  return r && a && $(e, i, a), a;
 };
 let s = class extends h {
   constructor() {
@@ -14,16 +14,16 @@ let s = class extends h {
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-select"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
   updated(t) {
     super.updated(t);
     const e = this.adapter.templateData.size;
     e ? this.style.flex = String(e) : this.style.removeProperty("flex");
   }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-select", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
   render() {
     return super.render(), c`
       <gui-select
@@ -38,6 +38,7 @@ let s = class extends h {
         .hint=${this.adapter.templateData.hint}
         .icon=${this.adapter.templateData.icon}
         .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
         .options=${this.adapter.templateData.options}
         .labelField=${this.adapter.templateData.labelField}
         .valueField=${this.adapter.templateData.valueField}

package/{tabs.element-DYg1wAz9.js → tabs.element-k8JMNDXi.js}

@@ -3,13 +3,12 @@ import { createIntersectionObserver as p } from "@golemui/gui-components";
 import { consume as m, provide as v } from "@lit/context";
 import { LitElement as w, html as d, nothing as $ } from "lit";
 import { repeat as u } from "lit-html/directives/repeat.js";
-import { query as b, state as g, queryAll as y, property as f, customElement as T } from "lit/decorators.js";
+import { query as b, state as g, queryAll as y, property as f, customElement as _ } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
-import { ifDefined as _ } from "lit-html/directives/if-defined.js";
-var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (s, i, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? C(i, e) : i, a = s.length - 1, l; a >= 0; a--)
+var T = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (s, i, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? x(i, e) : i, a = s.length - 1, l; a >= 0; a--)
     (l = s[a]) && (r = (t ? l(i, e, r) : l(r)) || r);
-  return t && r && x(i, e, r), r;
+  return t && r && T(i, e, r), r;
 };
 let n = class extends w {
   constructor() {
@@ -18,8 +17,13 @@ let n = class extends w {
   createRenderRoot() {
     return this;
   }
+  updated(s) {
+    super.updated(s);
+    const i = this.adapter.templateData.size;
+    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
+  }
   connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-tabs");
+    super.connectedCallback(), this.classList.add("gui-tabs", "gui-field");
     const s = this.widget.props;
     this.adapter.context = this.formContext, this.adapter.init(this.widget), this.activeTab = s.defaultOpen ?? s.tabs[0].uid, this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => {
@@ -27,11 +31,6 @@ let n = class extends w {
       })
     );
   }
-  updated(s) {
-    super.updated(s);
-    const i = this.adapter.templateData.size;
-    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
-  }
   firstUpdated(s) {
     this.startObserver = p(
       this.startSentinel,
@@ -41,7 +40,7 @@ let n = class extends w {
       (t) => this.isEndVisible = t
     );
     const e = this.widget.props.tabs.findIndex((t) => t.uid === this.activeTab);
-    this.tabButtons[e].scrollIntoView();
+    this.tabButtons[e].scrollIntoView({ block: "nearest", inline: "nearest" });
   }
   render() {
     if (!this.adapter.templateData) return d``;
@@ -63,7 +62,7 @@ let n = class extends w {
                     <button
                       type="button"
                       role="tab"
-                      tabindex=${_(e.uid === this.activeTab ? void 0 : -1)}
+                      tabindex=${e.uid === this.activeTab ? "0" : "-1"}
                       data-cy=${`tab_${this.widget.uid}_${t}`}
                       id=${`tab_${this.widget.uid}_${t}`}
                       aria-controls=${`tabpanel_${this.widget.uid}_${t}`}
@@ -71,14 +70,17 @@ let n = class extends w {
                       class=${h({ active: e.uid === this.activeTab })}
                       @click=${() => this.onClickTab(e.uid)}
                       @keydown=${this.onKeyDown}
-                      @focus=${(r) => r.target.scrollIntoView()}
+                      @focus=${(r) => r.target.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      })}
                     >
                       ${e.label}
                     </button>
                   </li>
                 `
     ) : $}
-          <li role="presentation" id="end-sentinel" class="gui-sentinel"></li>
+          <li role="presentation" id="end-sentinel" class="gui-sentinel gui-sentinel__end"></li>
         </ul>
       </nav>
       ${u(
@@ -151,7 +153,7 @@ o([
   v({ context: c.layoutContext })
 ], n.prototype, "adapter", 2);
 n = o([
-  T("gui-tabs-layout")
+  _("gui-tabs-layout")
 ], n);
 export {
   n as TabsElement

package/{textarea.element-BXc-rLZE.js → textarea.element-DgDwfzYP.js}

@@ -1,29 +1,29 @@
-import * as o from "@golemui/lit";
+import * as d from "@golemui/lit";
 import { consume as n, provide as u } from "@lit/context";
 import { LitElement as h, html as m } from "lit";
 import { property as c, customElement as b } from "lit/decorators.js";
-var x = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? D(t, s) : t, p = e.length - 1, d; p >= 0; p--)
-    (d = e[p]) && (a = (r ? d(t, s, a) : d(a)) || a);
-  return r && a && x(t, s, a), a;
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? g(t, s) : t, p = e.length - 1, o; p >= 0; p--)
+    (o = e[p]) && (a = (r ? o(t, s, a) : o(a)) || a);
+  return r && a && f(t, s, a), a;
 };
 let i = class extends h {
   constructor() {
-    super(...arguments), this.adapter = new o.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d.InputWidgetAdapter(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-textarea"), 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");
   }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-textarea", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
   render() {
     return super.render(), m`
       <gui-textarea
@@ -37,7 +37,7 @@ let i = class extends h {
         .value=${this.adapter.templateData.value}
         .hint=${this.adapter.templateData.hint}
         .placeholder=${this.adapter.templateData.placeholder}
-        .icon=${this.adapter.templateData.icon}
+        .autocomplete=${this.adapter.templateData.autocomplete}
         .counterMode=${this.adapter.templateData.counterMode}
         .minimumHeight=${this.adapter.templateData.minimumHeight}
         .autoGrow=${this.adapter.templateData.autoGrow}
@@ -56,11 +56,11 @@ let i = class extends h {
   }
 };
 l([
-  n({ context: o.formContext }),
+  n({ context: d.formContext }),
   c({ attribute: !1 })
 ], i.prototype, "formContext", 2);
 l([
-  u({ context: o.inputContext })
+  u({ context: d.inputContext })
 ], i.prototype, "adapter", 2);
 i = l([
   b("gui-textarea-input")

package/{textinput.element-x9LYeW8B.js → textinput.element-DSLFDjfb.js}

@@ -1,29 +1,29 @@
-import * as l from "@golemui/lit";
-import { consume as o, provide as u } from "@lit/context";
+import * as d from "@golemui/lit";
+import { consume as n, provide as u } from "@lit/context";
 import { LitElement as h, html as c } from "lit";
 import { property as m, customElement as b } from "lit/decorators.js";
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (e, t, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? v(t, s) : t, p = e.length - 1, d; p >= 0; p--)
-    (d = e[p]) && (a = (r ? d(t, s, a) : d(a)) || a);
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? v(t, s) : t, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (a = (r ? l(t, s, a) : l(a)) || a);
   return r && a && f(t, s, a), a;
 };
 let i = class extends h {
   constructor() {
-    super(...arguments), this.adapter = new l.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d.InputWidgetAdapter(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-textinput"), 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");
   }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-textinput", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
   render() {
     return super.render(), c`
       <gui-textinput
@@ -38,6 +38,7 @@ let i = class extends h {
         .value=${this.adapter.templateData.value}
         .icon=${this.adapter.templateData.icon}
         .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
         @input=${this.valueChanged}
         @blur=${() => this.adapter.onBlur()}
       ></gui-textinput>
@@ -51,14 +52,14 @@ let i = class extends h {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
-n([
-  o({ context: l.formContext }),
+o([
+  n({ context: d.formContext }),
   m({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-n([
-  u({ context: l.inputContext })
+o([
+  u({ context: d.inputContext })
 ], i.prototype, "adapter", 2);
-i = n([
+i = o([
   b("gui-textinput-input")
 ], i);
 export {

package/{toggle.element-BP4YKWyR.js → toggle.element-BLu6F99u.js}

@@ -14,16 +14,16 @@ let s = class extends h {
   createRenderRoot() {
     return this;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-toggle"), 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");
   }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-toggle", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
   render() {
     return super.render(), c`
       <gui-toggle