@golemui/gui-lit 1.3.0-rc.0 → 1.4.0-rc.0

package/{range-date-time-input.element-Dr2VrYhG.js → range-date-time-input.element-Cq4IdW7N.js}

@@ -1,18 +1,18 @@
-import { InputWidgetAdapter as d, formContext as m, inputContext as n } from "@golemui/lit";
+import { InputWidgetAdapter as p, formContext as m, inputContext as n } from "@golemui/lit";
 import "@golemui/gui-components/range-date-time-input";
 import { consume as o, provide as h } from "@lit/context";
 import { LitElement as u, html as D } from "lit";
 import { property as c } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { unsubscribeAll as b, safeDefine as $ } from "@golemui/lit/internals";
 import "rxjs";
-var $ = Object.defineProperty, l = (i, e, t, g) => {
-  for (var a = void 0, r = i.length - 1, p; r >= 0; r--)
-    (p = i[r]) && (a = p(e, t, a) || a);
-  return a && $(e, t, a), a;
+var g = Object.defineProperty, l = (i, e, t, L) => {
+  for (var a = void 0, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (a = d(e, t, a) || a);
+  return a && g(e, t, a), a;
 };
 class s extends u {
   constructor() {
-    super(...arguments), this.adapter = new d(), this.subscriptions = [];
+    super(...arguments), this.adapter = new p(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -59,6 +59,14 @@ class s extends u {
         .minDateTimeMessage=${this.adapter.templateData.minDateTimeMessage}
         .maxDateTimeMessage=${this.adapter.templateData.maxDateTimeMessage}
         .incompleteMessage=${this.adapter.templateData.incompleteMessage}
+        ?allow-edit=${this.adapter.templateData.allowEdit}
+        .editLabel=${this.adapter.templateData.editLabel}
+        .editAriaLabel=${this.adapter.templateData.editAriaLabel}
+        .confirmEditLabel=${this.adapter.templateData.confirmEditLabel}
+        .cancelEditLabel=${this.adapter.templateData.cancelEditLabel}
+        .editStartedMessage=${this.adapter.templateData.editStartedMessage}
+        .editCommittedMessage=${this.adapter.templateData.editCommittedMessage}
+        .editCancelledMessage=${this.adapter.templateData.editCancelledMessage}
         @change=${this.valueChanged}
         @inputError=${this.onInputError}
       ></gui-range-date-time>
@@ -71,7 +79,7 @@ class s extends u {
     this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), b(this.subscriptions);
   }
 }
 l([
@@ -81,7 +89,7 @@ l([
 l([
   h({ context: n })
 ], s.prototype, "adapter");
-b("gui-range-date-time-input", s);
+$("gui-range-date-time-input", s);
 export {
   s as RangeDateTimeInputElement
 };

package/{range-date-time-picker.element-CYeIMWLp.js → range-date-time-picker.element-CnJcIN9C.js}

@@ -1,18 +1,18 @@
-import { InputWidgetAdapter as l, formContext as d, inputContext as m } from "@golemui/lit";
+import { InputWidgetAdapter as o, formContext as d, inputContext as m } from "@golemui/lit";
 import "@golemui/gui-components/range-date-time-picker";
-import { consume as p, provide as u } from "@lit/context";
-import { LitElement as b, html as h } from "lit";
-import { property as $ } from "lit/decorators.js";
-import { safeDefine as c } from "@golemui/lit/internals";
+import { consume as b, provide as p } from "@lit/context";
+import { LitElement as u, html as $ } from "lit";
+import { property as c } from "lit/decorators.js";
+import { unsubscribeAll as h, safeDefine as g } from "@golemui/lit/internals";
 import "rxjs";
-var g = Object.defineProperty, o = (i, e, t, L) => {
-  for (var a = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (a = n(e, t, a) || a);
-  return a && g(e, t, a), a;
+var L = Object.defineProperty, n = (i, e, t, A) => {
+  for (var a = void 0, r = i.length - 1, l; r >= 0; r--)
+    (l = i[r]) && (a = l(e, t, a) || a);
+  return a && L(e, t, a), a;
 };
-class s extends b {
+class s extends u {
   constructor() {
-    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+    super(...arguments), this.adapter = new o(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -30,7 +30,7 @@ class s extends b {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return h`
+    return $`
       <gui-range-date-time-picker
         .uid=${this.widget.uid}
         .label=${e.label}
@@ -78,6 +78,14 @@ class s extends b {
         .disabledRangeMessage=${e.disabledRangeMessage}
         .noAvailableTimesMessage=${e.noAvailableTimesMessage}
         .incompleteMessage=${e.incompleteMessage}
+        ?allow-edit=${e.allowEdit}
+        .editLabel=${e.editLabel}
+        .editAriaLabel=${e.editAriaLabel}
+        .confirmEditLabel=${e.confirmEditLabel}
+        .cancelEditLabel=${e.cancelEditLabel}
+        .editStartedMessage=${e.editStartedMessage}
+        .editCommittedMessage=${e.editCommittedMessage}
+        .editCancelledMessage=${e.editCancelledMessage}
         .dayCountAriaLabel=${e.dayCountAriaLabel}
         .disabledDayCountAriaLabel=${e.disabledDayCountAriaLabel}
         @change=${this.valueChanged}
@@ -93,17 +101,17 @@ class s extends b {
     this.adapter.injectValidationIssues([e.detail.message]), this.adapter.onBlur();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), h(this.subscriptions);
   }
 }
-o([
-  p({ context: d }),
-  $({ attribute: !1 })
+n([
+  b({ context: d }),
+  c({ attribute: !1 })
 ], s.prototype, "formContext");
-o([
-  u({ context: m })
+n([
+  p({ context: m })
 ], s.prototype, "adapter");
-c("gui-range-date-time-picker-input", s);
+g("gui-range-date-time-picker-input", s);
 export {
   s as RangeDateTimePickerElement
 };

package/{range-time-input.element-7OZhPQqx.js → range-time-input.element-Cq0TrGe9.js}

@@ -3,12 +3,12 @@ import "@golemui/gui-components/range-time-input";
 import { consume as o, provide as h } from "@lit/context";
 import { LitElement as u, html as c } from "lit";
 import { property as g } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { unsubscribeAll as b, safeDefine as $ } from "@golemui/lit/internals";
 import "rxjs";
-var $ = Object.defineProperty, d = (r, e, a, D) => {
-  for (var t = void 0, i = r.length - 1, p; i >= 0; i--)
-    (p = r[i]) && (t = p(e, a, t) || t);
-  return t && $(e, a, t), t;
+var D = Object.defineProperty, p = (i, e, a, f) => {
+  for (var t = void 0, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (t = d(e, a, t) || t);
+  return t && D(e, a, t), t;
 };
 class s extends u {
   constructor() {
@@ -56,6 +56,14 @@ class s extends u {
         .maxTimeMessage=${this.adapter.templateData.maxTimeMessage}
         .rangeOrderMessage=${this.adapter.templateData.rangeOrderMessage}
         .incompleteMessage=${this.adapter.templateData.incompleteMessage}
+        ?allow-edit=${this.adapter.templateData.allowEdit}
+        .editLabel=${this.adapter.templateData.editLabel}
+        .editAriaLabel=${this.adapter.templateData.editAriaLabel}
+        .confirmEditLabel=${this.adapter.templateData.confirmEditLabel}
+        .cancelEditLabel=${this.adapter.templateData.cancelEditLabel}
+        .editStartedMessage=${this.adapter.templateData.editStartedMessage}
+        .editCommittedMessage=${this.adapter.templateData.editCommittedMessage}
+        .editCancelledMessage=${this.adapter.templateData.editCancelledMessage}
         @change=${this.valueChanged}
         @inputError=${this.onInputError}
       ></gui-range-time>
@@ -68,17 +76,17 @@ class s extends u {
     this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), b(this.subscriptions);
   }
 }
-d([
+p([
   o({ context: m }),
   g({ attribute: !1 })
 ], s.prototype, "formContext");
-d([
+p([
   h({ context: n })
 ], s.prototype, "adapter");
-b("gui-range-time-input", s);
+$("gui-range-time-input", s);
 export {
   s as RangeTimeInputElement
 };

package/{range-time-picker.element-D0mRFZkK.js → range-time-picker.element-BzlIuZ6m.js}

@@ -1,18 +1,18 @@
-import { InputWidgetAdapter as o, formContext as d, inputContext as m } from "@golemui/lit";
+import { InputWidgetAdapter as n, formContext as o, inputContext as m } from "@golemui/lit";
 import "@golemui/gui-components/range-time-picker";
 import { consume as p, provide as u } from "@lit/context";
-import { LitElement as g, html as h } from "lit";
-import { property as c } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { LitElement as g, html as c } from "lit";
+import { property as b } from "lit/decorators.js";
+import { unsubscribeAll as $, safeDefine as h } from "@golemui/lit/internals";
 import "rxjs";
-var $ = Object.defineProperty, l = (i, e, t, f) => {
-  for (var a = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (a = n(e, t, a) || a);
-  return a && $(e, t, a), a;
+var L = Object.defineProperty, d = (i, e, t, f) => {
+  for (var a = void 0, r = i.length - 1, l; r >= 0; r--)
+    (l = i[r]) && (a = l(e, t, a) || a);
+  return a && L(e, t, a), a;
 };
 class s extends g {
   constructor() {
-    super(...arguments), this.adapter = new o(), this.subscriptions = [];
+    super(...arguments), this.adapter = new n(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -30,7 +30,7 @@ class s extends g {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return h`
+    return c`
       <gui-range-time-picker
         .uid=${this.widget.uid}
         .label=${e.label}
@@ -67,6 +67,14 @@ class s extends g {
         .disabledRangeMessage=${e.disabledRangeMessage}
         .noAvailableTimesMessage=${e.noAvailableTimesMessage}
         .incompleteMessage=${e.incompleteMessage}
+        ?allow-edit=${e.allowEdit}
+        .editLabel=${e.editLabel}
+        .editAriaLabel=${e.editAriaLabel}
+        .confirmEditLabel=${e.confirmEditLabel}
+        .cancelEditLabel=${e.cancelEditLabel}
+        .editStartedMessage=${e.editStartedMessage}
+        .editCommittedMessage=${e.editCommittedMessage}
+        .editCancelledMessage=${e.editCancelledMessage}
         @inputError=${this.onInputError}
         @blur=${() => this.adapter.onBlur()}
         @change=${this.valueChanged}
@@ -80,17 +88,17 @@ class s extends g {
     this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), $(this.subscriptions);
   }
 }
-l([
-  p({ context: d }),
-  c({ attribute: !1 })
+d([
+  p({ context: o }),
+  b({ attribute: !1 })
 ], s.prototype, "formContext");
-l([
+d([
   u({ context: m })
 ], s.prototype, "adapter");
-b("gui-range-time-picker-input", s);
+h("gui-range-time-picker-input", s);
 export {
   s as RangeTimePickerElement
 };

package/{renderer.element-DbsFoBba.js → renderer.element-BVwerbtL.js}

@@ -1,13 +1,13 @@
-import { DisplayWidgetAdapter as n, formContext as p, displayWidgetContext as c } from "@golemui/lit";
-import { consume as l, provide as u } from "@lit/context";
+import { DisplayWidgetAdapter as n, formContext as p, displayWidgetContext as l } from "@golemui/lit";
+import { consume as c, provide as u } from "@lit/context";
 import { LitElement as m, html as h } from "lit";
 import { property as f } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { unsubscribeAll as b, safeDefine as g } from "@golemui/lit/internals";
 import "rxjs";
-var g = Object.defineProperty, d = (i, e, r, x) => {
-  for (var t = void 0, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (t = o(e, r, t) || t);
-  return t && g(e, r, t), t;
+var x = Object.defineProperty, d = (i, r, t, C) => {
+  for (var e = void 0, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (e = o(r, t, e) || e);
+  return e && x(r, t, e), e;
 };
 class a extends m {
   constructor() {
@@ -16,10 +16,10 @@ class a extends m {
   createRenderRoot() {
     return this;
   }
-  updated(e) {
-    super.updated(e);
-    const r = this.adapter.templateData.size;
-    r ? this.style.flex = String(r) : this.style.removeProperty("flex");
+  updated(r) {
+    super.updated(r);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-renderer", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -32,17 +32,17 @@ class a extends m {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), b(this.subscriptions);
   }
 }
 d([
-  l({ context: p }),
+  c({ context: p }),
   f({ attribute: !1 })
 ], a.prototype, "formContext");
 d([
-  u({ context: c })
+  u({ context: l })
 ], a.prototype, "adapter");
-b("gui-renderer-component", a);
+g("gui-renderer-component", a);
 export {
   a as RendererElement
 };

package/repeater.element-DQNI4b7I.js

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

package/{select.element-Bb_9jAVB.js → select.element-RBtbAvLx.js}

@@ -2,13 +2,13 @@ import { InputWidgetAdapter as d, formContext as o, inputContext as n } from "@g
 import "@golemui/gui-components/select";
 import { consume as u, provide as h } from "@lit/context";
 import { LitElement as c, html as m } from "lit";
-import { property as f } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { property as b } from "lit/decorators.js";
+import { unsubscribeAll as f, safeDefine as $ } from "@golemui/lit/internals";
 import "rxjs";
-var $ = Object.defineProperty, l = (r, t, e, v) => {
-  for (var a = void 0, i = r.length - 1, p; i >= 0; i--)
-    (p = r[i]) && (a = p(t, e, a) || a);
-  return a && $(t, e, a), a;
+var v = Object.defineProperty, p = (i, t, e, g) => {
+  for (var a = void 0, r = i.length - 1, l; r >= 0; r--)
+    (l = i[r]) && (a = l(t, e, a) || a);
+  return a && v(t, e, a), a;
 };
 class s extends c {
   constructor() {
@@ -53,6 +53,7 @@ class s extends c {
     `;
   }
   valueChanged(t) {
+    this.adapter.injectValidationIssues(null);
     const e = t.detail.value;
     this.adapter.valueChanged(e);
   }
@@ -60,17 +61,17 @@ class s extends c {
     this.adapter.injectValidationIssues([t.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), f(this.subscriptions);
   }
 }
-l([
+p([
   u({ context: o }),
-  f({ attribute: !1 })
+  b({ attribute: !1 })
 ], s.prototype, "formContext");
-l([
+p([
   h({ context: n })
 ], s.prototype, "adapter");
-b("gui-select-input", s);
+$("gui-select-input", s);
 export {
   s as SelectElement
 };