@golemui/lit 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.14.0 (2026-05-21)
+
+This was a version bump only for lit to align it with other projects, there were no code changes.
+
 ## 0.13.3 (2026-05-19)
 
 This was a version bump only for lit to align it with other projects, there were no code changes.

package/index.js

@@ -1,11 +1,11 @@
-import { createContext as h, consume as m, provide as I, ContextProvider as W } from "@lit/context";
-import { FormContext as A, calculatedWidgetsByUid$ as S, assertNoPropCollisions as O, dataByPath$ as N, validationByPath$ as R, injectedValidationByPath$ as P, touchedControlsByPath$ as L, calculatedLayoutChildrenByUid$ as j, makeRepeaterItemConfig as T, cloneObject as _, errorCodes as $, shortUUID as F, getDirectionFromLanguage as v, formHealth as U } from "@golemui/core";
-import { Subject as E, takeUntil as p, combineLatest as M } from "rxjs";
-import { LitElement as y, nothing as V, html as b } from "lit";
-import { property as n, customElement as f, state as B } from "lit/decorators.js";
+import { createContext as h, consume as m, provide as I, ContextProvider as S } from "@lit/context";
+import { FormContext as W, calculatedWidgetsByUid$ as A, assertNoPropCollisions as O, dataByPath$ as N, validationByPath$ as R, injectedValidationByPath$ as L, touchedControlsByPath$ as P, calculatedLayoutChildrenByUid$ as F, makeRepeaterItemConfig as C, cloneObject as D, errorCodes as $, shortUUID as M, getDirectionFromLanguage as w, formHealth as U } from "@golemui/core";
+import { Subject as E, takeUntil as p, combineLatest as j } from "rxjs";
+import { LitElement as f, nothing as V, html as b } from "lit";
+import { property as d, customElement as y, state as B } from "lit/decorators.js";
 import { when as H } from "lit/directives/when.js";
-const w = h("guiFormContext");
-class z extends A {
+const v = h("guiFormContext");
+class z extends W {
   // Just a subclass to make Core.FormContext Injectable
 }
 class g {
@@ -23,7 +23,7 @@ class g {
   }
   // Listen to the calculated props stream and keep all widget props merged in a flattened object
   templateDataUpdater() {
-    this.context.store.state$.pipe(p(this.destroy$), S(this.widget.uid)).subscribe((t) => {
+    this.context.store.state$.pipe(p(this.destroy$), A(this.widget.uid)).subscribe((t) => {
       const o = {
         ...t,
         lang: this.context.store.getState().lang,
@@ -78,21 +78,21 @@ class lt extends g {
     this.widget = t, this.addWidgetToTheStore(t), this.templateDataUpdater(), this.context.store.dispatch({
       type: "SET_WIDGET_INITIAL_DATA",
       payload: { data: t.defaultValue, path: t.path }
-    }), this.context.store.state$.pipe(p(this.destroy$), N(t.path)).subscribe((e) => this.setTemplateData({ value: e }));
+    }), this.context.store.state$.pipe(p(this.destroy$), N(t.path)).subscribe((i) => this.setTemplateData({ value: i }));
     const o = this.context.store.state$.pipe(
       p(this.destroy$),
       R(t.path)
     ), r = this.context.store.state$.pipe(
       p(this.destroy$),
-      P(t.path)
+      L(t.path)
     );
-    M([o, r]).subscribe(
-      ([e, i]) => {
+    j([o, r]).subscribe(
+      ([i, s]) => {
         this.setTemplateData({
-          errors: [...e ?? [], ...i ?? []]
+          errors: [...i ?? [], ...s ?? []]
         });
       }
-    ), this.context.store.state$.pipe(p(this.destroy$), L(t.path)).subscribe((e) => this.setTemplateData({ touched: e })), this.context.emitEvent("load", this.widget);
+    ), this.context.store.state$.pipe(p(this.destroy$), P(t.path)).subscribe((i) => this.setTemplateData({ touched: i })), this.context.emitEvent("load", this.widget);
   }
   valueChanged(t) {
     this.context.store.dispatch({
@@ -130,7 +130,7 @@ class mt extends g {
   init(t) {
     this.widget = t, this.setTemplateData({
       ...this.widget.props
-    }), this.context.store.state$.pipe(j(this.widget.uid)).pipe(p(this.destroy$)).subscribe((o) => {
+    }), this.context.store.state$.pipe(F(this.widget.uid)).pipe(p(this.destroy$)).subscribe((o) => {
       this.setTemplateData({
         children: o
       });
@@ -141,13 +141,13 @@ class mt extends g {
   }
 }
 const x = h("guiRepeaterIndexesContext");
-var G = Object.defineProperty, l = (s, t, o, r) => {
-  for (var e = void 0, i = s.length - 1, a; i >= 0; i--)
-    (a = s[i]) && (e = a(t, o, e) || e);
-  return e && G(t, o, e), e;
+var G = Object.defineProperty, l = (e, t, o, r) => {
+  for (var i = void 0, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = a(t, o, i) || i);
+  return i && G(t, o, i), i;
 };
-const k = (s) => {
-  class t extends s {
+const k = (e) => {
+  class t extends e {
     constructor() {
       super(...arguments), this.repeaterIndexes = [];
     }
@@ -157,18 +157,18 @@ const k = (s) => {
     async loadWidgetComponent() {
       if (this.widget)
         try {
-          const r = await this.formContext.widgetRegistry.loadWidget(this.widget.type), e = new r(), i = this.repeaterIndexes ?? [];
+          const r = await this.formContext.widgetRegistry.loadWidget(this.widget.type), i = new r(), s = this.repeaterIndexes ?? [];
           let a;
-          this.repeaterIndex !== void 0 ? a = [...i, this.repeaterIndex] : a = i, e.widget = a.length > 0 ? T(_(this.widget), a) : this.widget, e.id = `host-${this.widget.uid}`, this.replaceWith(e);
+          this.repeaterIndex !== void 0 ? a = [...s, this.repeaterIndex] : a = s, i.widget = a.length > 0 ? C(D(this.widget), a) : this.widget, i.id = `host-${this.widget.uid}`, this.replaceWith(i);
         } catch (r) {
           console.error(`Widget "${this.widget.type}" could not be loaded`, r);
-          const e = $.widgetCouldNotBeLoaded;
+          const i = $.widgetCouldNotBeLoaded;
           this.dispatchEvent(
             new CustomEvent("formHealth", {
               detail: {
                 status: "errored",
-                message: `[${e}] Widget "${this.widget.type}" could not be loaded`,
-                code: e
+                message: `[${i}] Widget "${this.widget.type}" could not be loaded`,
+                code: i
               },
               bubbles: !0,
               composed: !0
@@ -181,129 +181,152 @@ const k = (s) => {
     }
   }
   return l([
-    m({ context: w }),
-    n({ attribute: !1 })
+    m({ context: v }),
+    d({ attribute: !1 })
   ], t.prototype, "formContext"), l([
-    n({ type: Object })
+    d({ type: Object })
   ], t.prototype, "widget"), l([
-    n({ type: Number })
+    d({ type: Number })
   ], t.prototype, "repeaterIndex"), l([
     m({ context: x, subscribe: !0 }),
-    n({ attribute: !1 })
+    d({ attribute: !1 })
   ], t.prototype, "repeaterIndexes"), t;
 };
-var q = Object.getOwnPropertyDescriptor, J = (s, t, o, r) => {
-  for (var e = r > 1 ? void 0 : r ? q(t, o) : t, i = s.length - 1, a; i >= 0; i--)
-    (a = s[i]) && (e = a(e) || e);
-  return e;
+var q = Object.getOwnPropertyDescriptor, J = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? q(t, o) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = a(i) || i);
+  return i;
 };
-let C = class extends k(y) {
+let T = class extends k(f) {
 };
-C = J([
-  f("gui-widget")
-], C);
-var Z = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, c = (s, t, o, r) => {
-  for (var e = r > 1 ? void 0 : r ? Q(t, o) : t, i = s.length - 1, a; i >= 0; i--)
-    (a = s[i]) && (e = (r ? a(t, o, e) : a(e)) || e);
-  return r && e && Z(t, o, e), e;
+T = J([
+  y("gui-widget")
+], T);
+var Z = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, c = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Q(t, o) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = (r ? a(t, o, i) : a(i)) || i);
+  return r && i && Z(t, o, i), i;
 };
-let d = class extends y {
+let n = class extends f {
   constructor() {
-    super(...arguments), this.context = new z(), this.autocomplete = void 0, this.direction = "ltr", this.unsubscribeI18n = () => {
-    }, this._defaultFormName = F();
+    super(...arguments), this.context = new z(), this.autocomplete = void 0, this.direction = "ltr", this.eventSub = [], this.unsubscribeI18n = () => {
+    }, this._defaultFormName = M();
   }
   connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-form"), this.eventSub = this.context.events$.subscribe(
-      (s) => this.dispatchEvent(
-        new CustomEvent(d.FORM_EVENT, { detail: s, bubbles: !0 })
+    super.connectedCallback(), this.classList.add("gui-form"), this.configureLongLivedEvents();
+  }
+  /**
+   * Stable events subscriptions.
+   * ( Stable events are those that survive store replacements )
+   */
+  configureLongLivedEvents() {
+    this.eventSub.push(
+      this.context.events$.subscribe(
+        (e) => this.dispatchEvent(
+          new CustomEvent(n.FORM_EVENT, { detail: e, bubbles: !0 })
+        )
+      )
+    ), this.eventSub.push(
+      this.context.submit$.subscribe(
+        (e) => this.dispatchEvent(
+          new CustomEvent(n.FORM_SUBMIT_EVENT, {
+            detail: e,
+            bubbles: !0
+          })
+        )
       )
     );
   }
-  updated(s) {
-    super.updated(s), s.has("config") && this.config && this._reinitialize(this.config);
+  updated(e) {
+    super.updated(e), e.has("config") && this.config && this._reinitialize(this.config);
   }
-  _reinitialize(s) {
+  _reinitialize(e) {
     this.unsubscribeI18n(), this.stateSub?.unsubscribe(), this.healthSub?.unsubscribe(), this.context.initialize(
-      s.widgetLoaders,
-      s.middlewares ?? [],
+      e.widgetLoaders,
+      e.middlewares ?? [],
       this.validators,
-      s.validateOn ?? "eager",
-      s.itemRenderers ?? {},
-      s.localization,
-      s.dependencies ?? {}
-    ), this.direction = v(this.context.localization.lang), this.stateSub = this.context.store.state$.subscribe((t) => {
+      e.validateOn ?? "eager",
+      e.itemRenderers ?? {},
+      e.localization,
+      e.dependencies ?? {}
+    ), this.direction = w(this.context.localization.lang), this.stateSub = this.context.store.state$.subscribe((t) => {
       this.formState = t, this.requestUpdate();
     }), this.healthSub = U(this.context.store.state$).subscribe((t) => {
       this.dispatchEvent(
-        new CustomEvent(d.FORM_HEALTH_EVENT, {
+        new CustomEvent(n.FORM_HEALTH_EVENT, {
           detail: t,
           bubbles: !0
         })
       );
     }), this.context.store.dispatch({
       type: "INITIALIZE",
-      payload: { formName: s.formName ?? this._defaultFormName, formDef: s.formDef }
-    }), this.context.store.dispatch({ type: "SET_DATA", payload: { data: s.data ?? {} } }), this.context.store.dispatch({ type: "SET_META", payload: { meta: s.meta ?? {} } }), this.unsubscribeI18n = this.context.localization.subscribe((t) => {
-      this.direction = v(t), this.context.store.dispatch({ type: "SET_LANGUAGE", payload: { lang: t } });
+      payload: { formName: e.formName ?? this._defaultFormName, formDef: e.formDef }
+    }), this.context.store.dispatch({ type: "SET_DATA", payload: { data: e.data ?? {} } }), this.context.store.dispatch({ type: "SET_META", payload: { meta: e.meta ?? {} } }), this.unsubscribeI18n = this.context.localization.subscribe((t) => {
+      this.direction = w(t), this.context.store.dispatch({ type: "SET_LANGUAGE", payload: { lang: t } });
     });
   }
   createRenderRoot() {
     return this;
   }
   render() {
-    const s = this.formState?.formDef && this.context.widgetRegistry.ready, t = this.config?.formName ?? this._defaultFormName;
+    const e = this.formState?.formDef && this.context.widgetRegistry.ready, t = this.config?.formName ?? this._defaultFormName;
     return b`
       <form
         id=${t}
         novalidate
         dir=${this.direction}
         autocomplete=${this.autocomplete || V}
+        @submit=${this.onFormSubmit}
       >
         ${H(
-      s,
+      e,
       () => b` <gui-widget .widget=${this.formState?.formDef.form}></gui-widget>`,
       () => b` <div>Loading form...</div>`
     )}
       </form>
     `;
   }
-  setData(s) {
-    this.context.store.dispatch({ type: "SET_DATA", payload: { data: s } });
+  onFormSubmit(e) {
+    e.preventDefault(), this.context.emitSubmitEvent();
+  }
+  setData(e) {
+    this.context.store.dispatch({ type: "SET_DATA", payload: { data: e } });
   }
-  setMeta(s) {
-    this.context.store.dispatch({ type: "SET_META", payload: { meta: s } });
+  setMeta(e) {
+    this.context.store.dispatch({ type: "SET_META", payload: { meta: e } });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.stateSub?.unsubscribe(), this.healthSub?.unsubscribe(), this.eventSub?.unsubscribe(), this.unsubscribeI18n();
+    super.disconnectedCallback(), this.stateSub?.unsubscribe(), this.healthSub?.unsubscribe(), this.eventSub.map((e) => e.unsubscribe()), this.unsubscribeI18n();
   }
 };
-d.FORM_HEALTH_EVENT = "formHealth";
-d.FORM_EVENT = "formEvent";
+n.FORM_SUBMIT_EVENT = "formSubmit";
+n.FORM_HEALTH_EVENT = "formHealth";
+n.FORM_EVENT = "formEvent";
 c([
-  I({ context: w })
-], d.prototype, "context", 2);
+  I({ context: v })
+], n.prototype, "context", 2);
 c([
-  n({ attribute: !1 })
-], d.prototype, "config", 2);
+  d({ attribute: !1 })
+], n.prototype, "config", 2);
 c([
-  n({ attribute: !1 })
-], d.prototype, "validators", 2);
+  d({ attribute: !1 })
+], n.prototype, "validators", 2);
 c([
-  n({ type: String })
-], d.prototype, "autocomplete", 2);
+  d({ type: String })
+], n.prototype, "autocomplete", 2);
 c([
   B()
-], d.prototype, "direction", 2);
-d = c([
-  f("gui-core-form")
-], d);
-var X = Object.defineProperty, u = (s, t, o, r) => {
-  for (var e = void 0, i = s.length - 1, a; i >= 0; i--)
-    (a = s[i]) && (e = a(t, o, e) || e);
-  return e && X(t, o, e), e;
+], n.prototype, "direction", 2);
+n = c([
+  y("gui-core-form")
+], n);
+var X = Object.defineProperty, u = (e, t, o, r) => {
+  for (var i = void 0, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = a(t, o, i) || i);
+  return i && X(t, o, i), i;
 };
-const Y = (s) => {
-  class t extends s {
+const Y = (e) => {
+  class t extends e {
     constructor() {
       super(...arguments), this.repeaterIndex = -1, this.parentRepeaterIndexes = [];
     }
@@ -313,23 +336,23 @@ const Y = (s) => {
     async loadWidgetComponent(r) {
       if (this.widget)
         try {
-          const e = await this.formContext.widgetRegistry.loadWidget(this.widget.type), i = new e(), a = [...this.parentRepeaterIndexes ?? [], r];
-          new W(i, {
+          const i = await this.formContext.widgetRegistry.loadWidget(this.widget.type), s = new i(), a = [...this.parentRepeaterIndexes ?? [], r];
+          new S(s, {
             context: x,
             initialValue: a
-          }), i.widget = T(
-            _(this.widget),
+          }), s.widget = C(
+            D(this.widget),
             a
-          ), i.id = `host-${this.widget.uid}`, this.replaceWith(i);
-        } catch (e) {
-          console.error(`Widget "${this.widget.type}" could not be loaded`, e);
-          const i = $.widgetCouldNotBeLoaded;
+          ), s.id = `host-${this.widget.uid}`, this.replaceWith(s);
+        } catch (i) {
+          console.error(`Widget "${this.widget.type}" could not be loaded`, i);
+          const s = $.widgetCouldNotBeLoaded;
           this.dispatchEvent(
             new CustomEvent("formHealth", {
               detail: {
                 status: "errored",
-                message: `[${i}] Widget "${this.widget.type}" could not be loaded`,
-                code: i
+                message: `[${s}] Widget "${this.widget.type}" could not be loaded`,
+                code: s
               },
               bubbles: !0,
               composed: !0
@@ -342,40 +365,40 @@ const Y = (s) => {
     }
   }
   return u([
-    m({ context: w }),
-    n({ attribute: !1 })
+    m({ context: v }),
+    d({ attribute: !1 })
   ], t.prototype, "formContext"), u([
-    n({ type: Object })
+    d({ type: Object })
   ], t.prototype, "widget"), u([
-    n({ type: Number })
+    d({ type: Number })
   ], t.prototype, "repeaterIndex"), u([
     m({ context: x, subscribe: !0 }),
-    n({ attribute: !1 })
+    d({ attribute: !1 })
   ], t.prototype, "parentRepeaterIndexes"), t;
 };
-var K = Object.getOwnPropertyDescriptor, tt = (s, t, o, r) => {
-  for (var e = r > 1 ? void 0 : r ? K(t, o) : t, i = s.length - 1, a; i >= 0; i--)
-    (a = s[i]) && (e = a(e) || e);
-  return e;
+var K = Object.getOwnPropertyDescriptor, tt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? K(t, o) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = a(i) || i);
+  return i;
 };
-let D = class extends Y(y) {
+let _ = class extends Y(f) {
 };
-D = tt([
-  f("gui-repeater-widget")
-], D);
+_ = tt([
+  y("gui-repeater-widget")
+], _);
 export {
   dt as ActionWidgetAdapter,
   g as BaseWidgetAdapter,
   ht as DisplayWidgetAdapter,
-  d as FormElement,
+  n as FormElement,
   lt as InputWidgetAdapter,
   mt as LayoutWidgetAdapter,
   z as LitFormContext,
-  D as RepeaterWidgetElement,
-  C as WidgetElement,
+  _ as RepeaterWidgetElement,
+  T as WidgetElement,
   nt as actionContext,
   pt as displayWidgetContext,
-  w as formContext,
+  v as formContext,
   ct as inputContext,
   ut as layoutContext,
   x as repeaterIndexesContext

package/index.umd.cjs

@@ -1,10 +1,11 @@
-(function(i,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("@lit/context"),require("@golemui/core"),require("rxjs"),require("lit"),require("lit/decorators.js"),require("lit/directives/when.js")):typeof define=="function"&&define.amd?define(["exports","@lit/context","@golemui/core","rxjs","lit","lit/decorators.js","lit/directives/when.js"],p):(i=typeof globalThis<"u"?globalThis:i||self,p(i.lit={},i.context,i.core,i.rxjs,i.lit,i.decorators_js,i.when_js))})(this,(function(i,p,d,l,c,h,x){"use strict";const g=p.createContext("guiFormContext");class E extends d.FormContext{}class m{constructor(){this.templateData={},this.destroy$=new l.Subject,this.templateDataChanged$=new l.Subject}setTemplateData(t){this.templateData={...this.templateData,...t},this.templateDataChanged$.next()}addWidgetToTheStore(t){this.context.store.dispatch({type:"ADD_WIDGET",payload:{widget:t}})}templateDataUpdater(){this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.calculatedWidgetsByUid$(this.widget.uid)).subscribe(t=>{const s={...t,lang:this.context.store.getState().lang,deps:this.context.dependencies};d.assertNoPropCollisions(t.uid,t.props,s),this.setTemplateData({...s,...t.props})})}destroy(){this.context.store.dispatch({type:"REMOVE_WIDGET",payload:{uid:this.widget.uid}}),this.destroy$.next()}}const w=p.createContext("guiActionWidgetAdapter");class C extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.setTemplateData({label:this.widget.label,icon:this.widget.props?.icon,iconPosition:this.widget.props?.iconPosition}),this.addWidgetToTheStore(t),this.templateDataUpdater(),this.context.emitEvent("load",this.widget)}click(){this.context.emitEvent("click",this.widget)}}const v=p.createContext("guiDisplayWidgetAdapter");class T extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.setTemplateData({...this.widget.props}),this.addWidgetToTheStore(t),this.templateDataUpdater()}}const D=p.createContext("guiInputWidgetAdapter");class $ extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.addWidgetToTheStore(t),this.templateDataUpdater(),this.context.store.dispatch({type:"SET_WIDGET_INITIAL_DATA",payload:{data:t.defaultValue,path:t.path}}),this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.dataByPath$(t.path)).subscribe(e=>this.setTemplateData({value:e}));const s=this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.validationByPath$(t.path)),r=this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.injectedValidationByPath$(t.path));l.combineLatest([s,r]).subscribe(([e,a])=>{this.setTemplateData({errors:[...e??[],...a??[]]})}),this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.touchedControlsByPath$(t.path)).subscribe(e=>this.setTemplateData({touched:e})),this.context.emitEvent("load",this.widget)}valueChanged(t){this.context.store.dispatch({type:"SET_WIDGET_DATA",payload:{path:this.widget.path,data:t}}),this.context.emitEvent("change",this.widget)}filterChanged(t){this.context.emitEvent("filter",this.widget,t)}injectValidationIssues(t){this.context.store.dispatch({type:"INJECT_VALIDATION_ISSUES",payload:{path:this.widget.path,issues:t}})}getItemRenderer(t,s){return t?this.context.itemRenderers[t]:s}onBlur(){this.context.store.dispatch({type:"ATTEMPT_VALIDATION",payload:{reason:"blur",path:this.widget.path,uid:this.widget.uid}}),this.context.emitEvent("blur",this.widget)}}const W=p.createContext("guiLayoutWidgetAdapter");class I extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.setTemplateData({...this.widget.props}),this.context.store.state$.pipe(d.calculatedLayoutChildrenByUid$(this.widget.uid)).pipe(l.takeUntil(this.destroy$)).subscribe(s=>{this.setTemplateData({children:s})}),this.addWidgetToTheStore(t),this.templateDataUpdater()}change(t){this.context.emitEvent("change",this.widget,t)}}const y=p.createContext("guiRepeaterIndexesContext");var A=Object.defineProperty,b=(n,t,s,r)=>{for(var e=void 0,a=n.length-1,o;a>=0;a--)(o=n[a])&&(e=o(t,s,e)||e);return e&&A(t,s,e),e};const _=n=>{class t extends n{constructor(){super(...arguments),this.repeaterIndexes=[]}connectedCallback(){super.connectedCallback?.(),this.loadWidgetComponent()}async loadWidgetComponent(){if(this.widget)try{const r=await this.formContext.widgetRegistry.loadWidget(this.widget.type),e=new r,a=this.repeaterIndexes??[];let o;this.repeaterIndex!==void 0?o=[...a,this.repeaterIndex]:o=a,e.widget=o.length>0?d.makeRepeaterItemConfig(d.cloneObject(this.widget),o):this.widget,e.id=`host-${this.widget.uid}`,this.replaceWith(e)}catch(r){console.error(`Widget "${this.widget.type}" could not be loaded`,r);const e=d.errorCodes.widgetCouldNotBeLoaded;this.dispatchEvent(new CustomEvent("formHealth",{detail:{status:"errored",message:`[${e}] Widget "${this.widget.type}" could not be loaded`,code:e},bubbles:!0,composed:!0}))}}render(){return null}}return b([p.consume({context:g}),h.property({attribute:!1})],t.prototype,"formContext"),b([h.property({type:Object})],t.prototype,"widget"),b([h.property({type:Number})],t.prototype,"repeaterIndex"),b([p.consume({context:y,subscribe:!0}),h.property({attribute:!1})],t.prototype,"repeaterIndexes"),t};var S=Object.getOwnPropertyDescriptor,F=(n,t,s,r)=>{for(var e=r>1?void 0:r?S(t,s):t,a=n.length-1,o;a>=0;a--)(o=n[a])&&(e=o(e)||e);return e};i.WidgetElement=class extends _(c.LitElement){},i.WidgetElement=F([h.customElement("gui-widget")],i.WidgetElement);var R=Object.defineProperty,O=Object.getOwnPropertyDescriptor,u=(n,t,s,r)=>{for(var e=r>1?void 0:r?O(t,s):t,a=n.length-1,o;a>=0;a--)(o=n[a])&&(e=(r?o(t,s,e):o(e))||e);return r&&e&&R(t,s,e),e};i.FormElement=class extends c.LitElement{constructor(){super(...arguments),this.context=new E,this.autocomplete=void 0,this.direction="ltr",this.unsubscribeI18n=()=>{},this._defaultFormName=d.shortUUID()}connectedCallback(){super.connectedCallback(),this.classList.add("gui-form"),this.eventSub=this.context.events$.subscribe(t=>this.dispatchEvent(new CustomEvent(i.FormElement.FORM_EVENT,{detail:t,bubbles:!0})))}updated(t){super.updated(t),t.has("config")&&this.config&&this._reinitialize(this.config)}_reinitialize(t){this.unsubscribeI18n(),this.stateSub?.unsubscribe(),this.healthSub?.unsubscribe(),this.context.initialize(t.widgetLoaders,t.middlewares??[],this.validators,t.validateOn??"eager",t.itemRenderers??{},t.localization,t.dependencies??{}),this.direction=d.getDirectionFromLanguage(this.context.localization.lang),this.stateSub=this.context.store.state$.subscribe(s=>{this.formState=s,this.requestUpdate()}),this.healthSub=d.formHealth(this.context.store.state$).subscribe(s=>{this.dispatchEvent(new CustomEvent(i.FormElement.FORM_HEALTH_EVENT,{detail:s,bubbles:!0}))}),this.context.store.dispatch({type:"INITIALIZE",payload:{formName:t.formName??this._defaultFormName,formDef:t.formDef}}),this.context.store.dispatch({type:"SET_DATA",payload:{data:t.data??{}}}),this.context.store.dispatch({type:"SET_META",payload:{meta:t.meta??{}}}),this.unsubscribeI18n=this.context.localization.subscribe(s=>{this.direction=d.getDirectionFromLanguage(s),this.context.store.dispatch({type:"SET_LANGUAGE",payload:{lang:s}})})}createRenderRoot(){return this}render(){const t=this.formState?.formDef&&this.context.widgetRegistry.ready,s=this.config?.formName??this._defaultFormName;return c.html`
+(function(i,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("@lit/context"),require("@golemui/core"),require("rxjs"),require("lit"),require("lit/decorators.js"),require("lit/directives/when.js")):typeof define=="function"&&define.amd?define(["exports","@lit/context","@golemui/core","rxjs","lit","lit/decorators.js","lit/directives/when.js"],p):(i=typeof globalThis<"u"?globalThis:i||self,p(i.lit={},i.context,i.core,i.rxjs,i.lit,i.decorators_js,i.when_js))})(this,(function(i,p,d,l,u,h,v){"use strict";const g=p.createContext("guiFormContext");class E extends d.FormContext{}class m{constructor(){this.templateData={},this.destroy$=new l.Subject,this.templateDataChanged$=new l.Subject}setTemplateData(t){this.templateData={...this.templateData,...t},this.templateDataChanged$.next()}addWidgetToTheStore(t){this.context.store.dispatch({type:"ADD_WIDGET",payload:{widget:t}})}templateDataUpdater(){this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.calculatedWidgetsByUid$(this.widget.uid)).subscribe(t=>{const s={...t,lang:this.context.store.getState().lang,deps:this.context.dependencies};d.assertNoPropCollisions(t.uid,t.props,s),this.setTemplateData({...s,...t.props})})}destroy(){this.context.store.dispatch({type:"REMOVE_WIDGET",payload:{uid:this.widget.uid}}),this.destroy$.next()}}const w=p.createContext("guiActionWidgetAdapter");class x extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.setTemplateData({label:this.widget.label,icon:this.widget.props?.icon,iconPosition:this.widget.props?.iconPosition}),this.addWidgetToTheStore(t),this.templateDataUpdater(),this.context.emitEvent("load",this.widget)}click(){this.context.emitEvent("click",this.widget)}}const C=p.createContext("guiDisplayWidgetAdapter");class T extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.setTemplateData({...this.widget.props}),this.addWidgetToTheStore(t),this.templateDataUpdater()}}const D=p.createContext("guiInputWidgetAdapter");class $ extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.addWidgetToTheStore(t),this.templateDataUpdater(),this.context.store.dispatch({type:"SET_WIDGET_INITIAL_DATA",payload:{data:t.defaultValue,path:t.path}}),this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.dataByPath$(t.path)).subscribe(e=>this.setTemplateData({value:e}));const s=this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.validationByPath$(t.path)),r=this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.injectedValidationByPath$(t.path));l.combineLatest([s,r]).subscribe(([e,n])=>{this.setTemplateData({errors:[...e??[],...n??[]]})}),this.context.store.state$.pipe(l.takeUntil(this.destroy$),d.touchedControlsByPath$(t.path)).subscribe(e=>this.setTemplateData({touched:e})),this.context.emitEvent("load",this.widget)}valueChanged(t){this.context.store.dispatch({type:"SET_WIDGET_DATA",payload:{path:this.widget.path,data:t}}),this.context.emitEvent("change",this.widget)}filterChanged(t){this.context.emitEvent("filter",this.widget,t)}injectValidationIssues(t){this.context.store.dispatch({type:"INJECT_VALIDATION_ISSUES",payload:{path:this.widget.path,issues:t}})}getItemRenderer(t,s){return t?this.context.itemRenderers[t]:s}onBlur(){this.context.store.dispatch({type:"ATTEMPT_VALIDATION",payload:{reason:"blur",path:this.widget.path,uid:this.widget.uid}}),this.context.emitEvent("blur",this.widget)}}const I=p.createContext("guiLayoutWidgetAdapter");class W extends m{constructor(){super(...arguments),this.templateData={}}init(t){this.widget=t,this.setTemplateData({...this.widget.props}),this.context.store.state$.pipe(d.calculatedLayoutChildrenByUid$(this.widget.uid)).pipe(l.takeUntil(this.destroy$)).subscribe(s=>{this.setTemplateData({children:s})}),this.addWidgetToTheStore(t),this.templateDataUpdater()}change(t){this.context.emitEvent("change",this.widget,t)}}const b=p.createContext("guiRepeaterIndexesContext");var S=Object.defineProperty,y=(a,t,s,r)=>{for(var e=void 0,n=a.length-1,o;n>=0;n--)(o=a[n])&&(e=o(t,s,e)||e);return e&&S(t,s,e),e};const _=a=>{class t extends a{constructor(){super(...arguments),this.repeaterIndexes=[]}connectedCallback(){super.connectedCallback?.(),this.loadWidgetComponent()}async loadWidgetComponent(){if(this.widget)try{const r=await this.formContext.widgetRegistry.loadWidget(this.widget.type),e=new r,n=this.repeaterIndexes??[];let o;this.repeaterIndex!==void 0?o=[...n,this.repeaterIndex]:o=n,e.widget=o.length>0?d.makeRepeaterItemConfig(d.cloneObject(this.widget),o):this.widget,e.id=`host-${this.widget.uid}`,this.replaceWith(e)}catch(r){console.error(`Widget "${this.widget.type}" could not be loaded`,r);const e=d.errorCodes.widgetCouldNotBeLoaded;this.dispatchEvent(new CustomEvent("formHealth",{detail:{status:"errored",message:`[${e}] Widget "${this.widget.type}" could not be loaded`,code:e},bubbles:!0,composed:!0}))}}render(){return null}}return y([p.consume({context:g}),h.property({attribute:!1})],t.prototype,"formContext"),y([h.property({type:Object})],t.prototype,"widget"),y([h.property({type:Number})],t.prototype,"repeaterIndex"),y([p.consume({context:b,subscribe:!0}),h.property({attribute:!1})],t.prototype,"repeaterIndexes"),t};var A=Object.getOwnPropertyDescriptor,F=(a,t,s,r)=>{for(var e=r>1?void 0:r?A(t,s):t,n=a.length-1,o;n>=0;n--)(o=a[n])&&(e=o(e)||e);return e};i.WidgetElement=class extends _(u.LitElement){},i.WidgetElement=F([h.customElement("gui-widget")],i.WidgetElement);var L=Object.defineProperty,R=Object.getOwnPropertyDescriptor,c=(a,t,s,r)=>{for(var e=r>1?void 0:r?R(t,s):t,n=a.length-1,o;n>=0;n--)(o=a[n])&&(e=(r?o(t,s,e):o(e))||e);return r&&e&&L(t,s,e),e};i.FormElement=class extends u.LitElement{constructor(){super(...arguments),this.context=new E,this.autocomplete=void 0,this.direction="ltr",this.eventSub=[],this.unsubscribeI18n=()=>{},this._defaultFormName=d.shortUUID()}connectedCallback(){super.connectedCallback(),this.classList.add("gui-form"),this.configureLongLivedEvents()}configureLongLivedEvents(){this.eventSub.push(this.context.events$.subscribe(t=>this.dispatchEvent(new CustomEvent(i.FormElement.FORM_EVENT,{detail:t,bubbles:!0})))),this.eventSub.push(this.context.submit$.subscribe(t=>this.dispatchEvent(new CustomEvent(i.FormElement.FORM_SUBMIT_EVENT,{detail:t,bubbles:!0}))))}updated(t){super.updated(t),t.has("config")&&this.config&&this._reinitialize(this.config)}_reinitialize(t){this.unsubscribeI18n(),this.stateSub?.unsubscribe(),this.healthSub?.unsubscribe(),this.context.initialize(t.widgetLoaders,t.middlewares??[],this.validators,t.validateOn??"eager",t.itemRenderers??{},t.localization,t.dependencies??{}),this.direction=d.getDirectionFromLanguage(this.context.localization.lang),this.stateSub=this.context.store.state$.subscribe(s=>{this.formState=s,this.requestUpdate()}),this.healthSub=d.formHealth(this.context.store.state$).subscribe(s=>{this.dispatchEvent(new CustomEvent(i.FormElement.FORM_HEALTH_EVENT,{detail:s,bubbles:!0}))}),this.context.store.dispatch({type:"INITIALIZE",payload:{formName:t.formName??this._defaultFormName,formDef:t.formDef}}),this.context.store.dispatch({type:"SET_DATA",payload:{data:t.data??{}}}),this.context.store.dispatch({type:"SET_META",payload:{meta:t.meta??{}}}),this.unsubscribeI18n=this.context.localization.subscribe(s=>{this.direction=d.getDirectionFromLanguage(s),this.context.store.dispatch({type:"SET_LANGUAGE",payload:{lang:s}})})}createRenderRoot(){return this}render(){const t=this.formState?.formDef&&this.context.widgetRegistry.ready,s=this.config?.formName??this._defaultFormName;return u.html`
       <form
         id=${s}
         novalidate
         dir=${this.direction}
-        autocomplete=${this.autocomplete||c.nothing}
+        autocomplete=${this.autocomplete||u.nothing}
+        @submit=${this.onFormSubmit}
       >
-        ${x.when(t,()=>c.html` <gui-widget .widget=${this.formState?.formDef.form}></gui-widget>`,()=>c.html` <div>Loading form...</div>`)}
+        ${v.when(t,()=>u.html` <gui-widget .widget=${this.formState?.formDef.form}></gui-widget>`,()=>u.html` <div>Loading form...</div>`)}
       </form>
-    `}setData(t){this.context.store.dispatch({type:"SET_DATA",payload:{data:t}})}setMeta(t){this.context.store.dispatch({type:"SET_META",payload:{meta:t}})}disconnectedCallback(){super.disconnectedCallback(),this.stateSub?.unsubscribe(),this.healthSub?.unsubscribe(),this.eventSub?.unsubscribe(),this.unsubscribeI18n()}},i.FormElement.FORM_HEALTH_EVENT="formHealth",i.FormElement.FORM_EVENT="formEvent",u([p.provide({context:g})],i.FormElement.prototype,"context",2),u([h.property({attribute:!1})],i.FormElement.prototype,"config",2),u([h.property({attribute:!1})],i.FormElement.prototype,"validators",2),u([h.property({type:String})],i.FormElement.prototype,"autocomplete",2),u([h.state()],i.FormElement.prototype,"direction",2),i.FormElement=u([h.customElement("gui-core-form")],i.FormElement);var L=Object.defineProperty,f=(n,t,s,r)=>{for(var e=void 0,a=n.length-1,o;a>=0;a--)(o=n[a])&&(e=o(t,s,e)||e);return e&&L(t,s,e),e};const N=n=>{class t extends n{constructor(){super(...arguments),this.repeaterIndex=-1,this.parentRepeaterIndexes=[]}connectedCallback(){super.connectedCallback(),this.loadWidgetComponent(this.repeaterIndex)}async loadWidgetComponent(r){if(this.widget)try{const e=await this.formContext.widgetRegistry.loadWidget(this.widget.type),a=new e,o=[...this.parentRepeaterIndexes??[],r];new p.ContextProvider(a,{context:y,initialValue:o}),a.widget=d.makeRepeaterItemConfig(d.cloneObject(this.widget),o),a.id=`host-${this.widget.uid}`,this.replaceWith(a)}catch(e){console.error(`Widget "${this.widget.type}" could not be loaded`,e);const a=d.errorCodes.widgetCouldNotBeLoaded;this.dispatchEvent(new CustomEvent("formHealth",{detail:{status:"errored",message:`[${a}] Widget "${this.widget.type}" could not be loaded`,code:a},bubbles:!0,composed:!0}))}}render(){return null}}return f([p.consume({context:g}),h.property({attribute:!1})],t.prototype,"formContext"),f([h.property({type:Object})],t.prototype,"widget"),f([h.property({type:Number})],t.prototype,"repeaterIndex"),f([p.consume({context:y,subscribe:!0}),h.property({attribute:!1})],t.prototype,"parentRepeaterIndexes"),t};var P=Object.getOwnPropertyDescriptor,U=(n,t,s,r)=>{for(var e=r>1?void 0:r?P(t,s):t,a=n.length-1,o;a>=0;a--)(o=n[a])&&(e=o(e)||e);return e};i.RepeaterWidgetElement=class extends N(c.LitElement){},i.RepeaterWidgetElement=U([h.customElement("gui-repeater-widget")],i.RepeaterWidgetElement),i.ActionWidgetAdapter=C,i.BaseWidgetAdapter=m,i.DisplayWidgetAdapter=T,i.InputWidgetAdapter=$,i.LayoutWidgetAdapter=I,i.LitFormContext=E,i.actionContext=w,i.displayWidgetContext=v,i.formContext=g,i.inputContext=D,i.layoutContext=W,i.repeaterIndexesContext=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
+    `}onFormSubmit(t){t.preventDefault(),this.context.emitSubmitEvent()}setData(t){this.context.store.dispatch({type:"SET_DATA",payload:{data:t}})}setMeta(t){this.context.store.dispatch({type:"SET_META",payload:{meta:t}})}disconnectedCallback(){super.disconnectedCallback(),this.stateSub?.unsubscribe(),this.healthSub?.unsubscribe(),this.eventSub.map(t=>t.unsubscribe()),this.unsubscribeI18n()}},i.FormElement.FORM_SUBMIT_EVENT="formSubmit",i.FormElement.FORM_HEALTH_EVENT="formHealth",i.FormElement.FORM_EVENT="formEvent",c([p.provide({context:g})],i.FormElement.prototype,"context",2),c([h.property({attribute:!1})],i.FormElement.prototype,"config",2),c([h.property({attribute:!1})],i.FormElement.prototype,"validators",2),c([h.property({type:String})],i.FormElement.prototype,"autocomplete",2),c([h.state()],i.FormElement.prototype,"direction",2),i.FormElement=c([h.customElement("gui-core-form")],i.FormElement);var O=Object.defineProperty,f=(a,t,s,r)=>{for(var e=void 0,n=a.length-1,o;n>=0;n--)(o=a[n])&&(e=o(t,s,e)||e);return e&&O(t,s,e),e};const N=a=>{class t extends a{constructor(){super(...arguments),this.repeaterIndex=-1,this.parentRepeaterIndexes=[]}connectedCallback(){super.connectedCallback(),this.loadWidgetComponent(this.repeaterIndex)}async loadWidgetComponent(r){if(this.widget)try{const e=await this.formContext.widgetRegistry.loadWidget(this.widget.type),n=new e,o=[...this.parentRepeaterIndexes??[],r];new p.ContextProvider(n,{context:b,initialValue:o}),n.widget=d.makeRepeaterItemConfig(d.cloneObject(this.widget),o),n.id=`host-${this.widget.uid}`,this.replaceWith(n)}catch(e){console.error(`Widget "${this.widget.type}" could not be loaded`,e);const n=d.errorCodes.widgetCouldNotBeLoaded;this.dispatchEvent(new CustomEvent("formHealth",{detail:{status:"errored",message:`[${n}] Widget "${this.widget.type}" could not be loaded`,code:n},bubbles:!0,composed:!0}))}}render(){return null}}return f([p.consume({context:g}),h.property({attribute:!1})],t.prototype,"formContext"),f([h.property({type:Object})],t.prototype,"widget"),f([h.property({type:Number})],t.prototype,"repeaterIndex"),f([p.consume({context:b,subscribe:!0}),h.property({attribute:!1})],t.prototype,"parentRepeaterIndexes"),t};var P=Object.getOwnPropertyDescriptor,U=(a,t,s,r)=>{for(var e=r>1?void 0:r?P(t,s):t,n=a.length-1,o;n>=0;n--)(o=a[n])&&(e=o(e)||e);return e};i.RepeaterWidgetElement=class extends N(u.LitElement){},i.RepeaterWidgetElement=U([h.customElement("gui-repeater-widget")],i.RepeaterWidgetElement),i.ActionWidgetAdapter=x,i.BaseWidgetAdapter=m,i.DisplayWidgetAdapter=T,i.InputWidgetAdapter=$,i.LayoutWidgetAdapter=W,i.LitFormContext=E,i.actionContext=w,i.displayWidgetContext=C,i.formContext=g,i.inputContext=D,i.layoutContext=I,i.repeaterIndexesContext=b,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/lib/components/form/form.element.d.ts

@@ -14,13 +14,20 @@ export declare class FormElement extends LitElement {
     private eventSub;
     private unsubscribeI18n;
     private readonly _defaultFormName;
+    static FORM_SUBMIT_EVENT: string;
     static FORM_HEALTH_EVENT: string;
     static FORM_EVENT: string;
     connectedCallback(): void;
+    /**
+     * Stable events subscriptions.
+     * ( Stable events are those that survive store replacements )
+     */
+    private configureLongLivedEvents;
     updated(changed: Map<string, unknown>): void;
     private _reinitialize;
     createRenderRoot(): this;
     render(): import('lit-html').TemplateResult<1>;
+    private onFormSubmit;
     setData(data: Record<string, any>): void;
     setMeta(meta: Record<string, any>): void;
     disconnectedCallback(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golemui/lit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "main": "./index.umd.cjs",
   "module": "./index.js",
@@ -20,7 +20,7 @@
     "*.md"
   ],
   "peerDependencies": {
-    "@golemui/core": "0.14.0",
+    "@golemui/core": "0.15.0",
     "@lit/context": "^1.1.6",
     "lit": "^3.3.1",
     "rxjs": "^7.8.0"