@golemui/lit 0.16.2 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/index.js +69 -63
- package/index.umd.cjs +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { createContext as h, consume as m, provide as I, ContextProvider as S } from "@lit/context";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { LitElement as f, nothing as
|
|
5
|
-
import { property as d, customElement as y, state as
|
|
6
|
-
import { when as
|
|
2
|
+
import { Subject as w, takeUntil as p, map as W, distinctUntilChanged as A, combineLatest as O } from "rxjs";
|
|
3
|
+
import { FormContext as N, calculatedWidgetsByUid$ as R, assertNoPropCollisions as L, dataByPath$ as P, validationByPath$ as F, injectedValidationByPath$ as M, touchedControlsByPath$ as U, calculatedLayoutChildrenByUid$ as V, makeRepeaterItemConfig as D, cloneObject as _, errorCodes as $, shortUUID as j, getDirectionFromLanguage as E, formHealth as B } from "@golemui/core";
|
|
4
|
+
import { LitElement as f, nothing as H, html as b } from "lit";
|
|
5
|
+
import { property as d, customElement as y, state as z } from "lit/decorators.js";
|
|
6
|
+
import { when as G } from "lit/directives/when.js";
|
|
7
7
|
const v = h("guiFormContext");
|
|
8
|
-
class
|
|
8
|
+
class k extends N {
|
|
9
9
|
// Just a subclass to make Core.FormContext Injectable
|
|
10
10
|
}
|
|
11
11
|
class g {
|
|
12
12
|
constructor() {
|
|
13
|
-
this.templateData = {}, this.destroy$ = new
|
|
13
|
+
this.templateData = {}, this.destroy$ = new w(), this.templateDataChanged$ = new w();
|
|
14
14
|
}
|
|
15
15
|
setTemplateData(t) {
|
|
16
16
|
this.templateData = { ...this.templateData, ...t }, this.templateDataChanged$.next();
|
|
@@ -23,13 +23,13 @@ class g {
|
|
|
23
23
|
}
|
|
24
24
|
// Listen to the calculated props stream and keep all widget props merged in a flattened object
|
|
25
25
|
templateDataUpdater() {
|
|
26
|
-
this.context.store.state$.pipe(p(this.destroy$),
|
|
26
|
+
this.context.store.state$.pipe(p(this.destroy$), R(this.widget.uid)).subscribe((t) => {
|
|
27
27
|
const o = {
|
|
28
28
|
...t,
|
|
29
29
|
lang: this.context.store.getState().lang,
|
|
30
30
|
deps: this.context.dependencies
|
|
31
31
|
};
|
|
32
|
-
|
|
32
|
+
L(t.uid, t.props, o), this.setTemplateData({
|
|
33
33
|
...o,
|
|
34
34
|
...t.props
|
|
35
35
|
});
|
|
@@ -42,8 +42,8 @@ class g {
|
|
|
42
42
|
}), this.destroy$.next();
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
const
|
|
46
|
-
class
|
|
45
|
+
const pt = h("guiActionWidgetAdapter");
|
|
46
|
+
class ht extends g {
|
|
47
47
|
constructor() {
|
|
48
48
|
super(...arguments), this.templateData = {};
|
|
49
49
|
}
|
|
@@ -52,14 +52,20 @@ class dt extends g {
|
|
|
52
52
|
label: this.widget.label,
|
|
53
53
|
icon: this.widget.props?.icon,
|
|
54
54
|
iconPosition: this.widget.props?.iconPosition
|
|
55
|
-
}), this.addWidgetToTheStore(t), this.templateDataUpdater(), this.context.
|
|
55
|
+
}), this.addWidgetToTheStore(t), this.templateDataUpdater(), this.context.store.state$.pipe(
|
|
56
|
+
p(this.destroy$),
|
|
57
|
+
W((o) => o.touched && !o.isFormValid),
|
|
58
|
+
A()
|
|
59
|
+
).subscribe((o) => {
|
|
60
|
+
this.setTemplateData({ invalid: o });
|
|
61
|
+
}), this.context.emitEvent("load", this.widget);
|
|
56
62
|
}
|
|
57
63
|
click() {
|
|
58
64
|
this.context.emitEvent("click", this.widget);
|
|
59
65
|
}
|
|
60
66
|
}
|
|
61
|
-
const
|
|
62
|
-
class
|
|
67
|
+
const ct = h("guiDisplayWidgetAdapter");
|
|
68
|
+
class lt extends g {
|
|
63
69
|
constructor() {
|
|
64
70
|
super(...arguments), this.templateData = {};
|
|
65
71
|
}
|
|
@@ -69,8 +75,8 @@ class ht extends g {
|
|
|
69
75
|
}), this.addWidgetToTheStore(t), this.templateDataUpdater();
|
|
70
76
|
}
|
|
71
77
|
}
|
|
72
|
-
const
|
|
73
|
-
class
|
|
78
|
+
const ut = h("guiInputWidgetAdapter");
|
|
79
|
+
class mt extends g {
|
|
74
80
|
constructor() {
|
|
75
81
|
super(...arguments), this.templateData = {};
|
|
76
82
|
}
|
|
@@ -78,21 +84,21 @@ class lt extends g {
|
|
|
78
84
|
this.widget = t, this.addWidgetToTheStore(t), this.templateDataUpdater(), this.context.store.dispatch({
|
|
79
85
|
type: "SET_WIDGET_INITIAL_DATA",
|
|
80
86
|
payload: { data: t.defaultValue, path: t.path }
|
|
81
|
-
}), this.context.store.state$.pipe(p(this.destroy$),
|
|
87
|
+
}), this.context.store.state$.pipe(p(this.destroy$), P(t.path)).subscribe((i) => this.setTemplateData({ value: i }));
|
|
82
88
|
const o = this.context.store.state$.pipe(
|
|
83
89
|
p(this.destroy$),
|
|
84
|
-
|
|
90
|
+
F(t.path)
|
|
85
91
|
), r = this.context.store.state$.pipe(
|
|
86
92
|
p(this.destroy$),
|
|
87
|
-
|
|
93
|
+
M(t.path)
|
|
88
94
|
);
|
|
89
|
-
|
|
95
|
+
O([o, r]).subscribe(
|
|
90
96
|
([i, s]) => {
|
|
91
97
|
this.setTemplateData({
|
|
92
98
|
errors: [...i ?? [], ...s ?? []]
|
|
93
99
|
});
|
|
94
100
|
}
|
|
95
|
-
), this.context.store.state$.pipe(p(this.destroy$),
|
|
101
|
+
), this.context.store.state$.pipe(p(this.destroy$), U(t.path)).subscribe((i) => this.setTemplateData({ touched: i })), this.context.emitEvent("load", this.widget);
|
|
96
102
|
}
|
|
97
103
|
valueChanged(t) {
|
|
98
104
|
this.context.store.dispatch({
|
|
@@ -122,15 +128,15 @@ class lt extends g {
|
|
|
122
128
|
}), this.context.emitEvent("blur", this.widget);
|
|
123
129
|
}
|
|
124
130
|
}
|
|
125
|
-
const
|
|
126
|
-
class
|
|
131
|
+
const gt = h("guiLayoutWidgetAdapter");
|
|
132
|
+
class bt extends g {
|
|
127
133
|
constructor() {
|
|
128
134
|
super(...arguments), this.templateData = {};
|
|
129
135
|
}
|
|
130
136
|
init(t) {
|
|
131
137
|
this.widget = t, this.setTemplateData({
|
|
132
138
|
...this.widget.props
|
|
133
|
-
}), this.context.store.state$.pipe(
|
|
139
|
+
}), this.context.store.state$.pipe(V(this.widget.uid)).pipe(p(this.destroy$)).subscribe((o) => {
|
|
134
140
|
this.setTemplateData({
|
|
135
141
|
children: o
|
|
136
142
|
});
|
|
@@ -141,12 +147,12 @@ class mt extends g {
|
|
|
141
147
|
}
|
|
142
148
|
}
|
|
143
149
|
const x = h("guiRepeaterIndexesContext");
|
|
144
|
-
var
|
|
150
|
+
var q = Object.defineProperty, l = (e, t, o, r) => {
|
|
145
151
|
for (var i = void 0, s = e.length - 1, a; s >= 0; s--)
|
|
146
152
|
(a = e[s]) && (i = a(t, o, i) || i);
|
|
147
|
-
return i &&
|
|
153
|
+
return i && q(t, o, i), i;
|
|
148
154
|
};
|
|
149
|
-
const
|
|
155
|
+
const J = (e) => {
|
|
150
156
|
class t extends e {
|
|
151
157
|
constructor() {
|
|
152
158
|
super(...arguments), this.repeaterIndexes = [];
|
|
@@ -159,7 +165,7 @@ const k = (e) => {
|
|
|
159
165
|
try {
|
|
160
166
|
const r = await this.formContext.widgetRegistry.loadWidget(this.widget.type), i = new r(), s = this.repeaterIndexes ?? [];
|
|
161
167
|
let a;
|
|
162
|
-
this.repeaterIndex !== void 0 ? a = [...s, this.repeaterIndex] : a = s, i.widget = a.length > 0 ?
|
|
168
|
+
this.repeaterIndex !== void 0 ? a = [...s, this.repeaterIndex] : a = s, i.widget = a.length > 0 ? D(_(this.widget), a) : this.widget, i.id = `host-${this.widget.uid}`, this.replaceWith(i);
|
|
163
169
|
} catch (r) {
|
|
164
170
|
console.error(`Widget "${this.widget.type}" could not be loaded`, r);
|
|
165
171
|
const i = $.widgetCouldNotBeLoaded;
|
|
@@ -192,25 +198,25 @@ const k = (e) => {
|
|
|
192
198
|
d({ attribute: !1 })
|
|
193
199
|
], t.prototype, "repeaterIndexes"), t;
|
|
194
200
|
};
|
|
195
|
-
var
|
|
196
|
-
for (var i = r > 1 ? void 0 : r ?
|
|
201
|
+
var Z = Object.getOwnPropertyDescriptor, Q = (e, t, o, r) => {
|
|
202
|
+
for (var i = r > 1 ? void 0 : r ? Z(t, o) : t, s = e.length - 1, a; s >= 0; s--)
|
|
197
203
|
(a = e[s]) && (i = a(i) || i);
|
|
198
204
|
return i;
|
|
199
205
|
};
|
|
200
|
-
let T = class extends
|
|
206
|
+
let T = class extends J(f) {
|
|
201
207
|
};
|
|
202
|
-
T =
|
|
208
|
+
T = Q([
|
|
203
209
|
y("gui-widget")
|
|
204
210
|
], T);
|
|
205
|
-
var
|
|
206
|
-
for (var i = r > 1 ? void 0 : r ?
|
|
211
|
+
var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, c = (e, t, o, r) => {
|
|
212
|
+
for (var i = r > 1 ? void 0 : r ? Y(t, o) : t, s = e.length - 1, a; s >= 0; s--)
|
|
207
213
|
(a = e[s]) && (i = (r ? a(t, o, i) : a(i)) || i);
|
|
208
|
-
return r && i &&
|
|
214
|
+
return r && i && X(t, o, i), i;
|
|
209
215
|
};
|
|
210
216
|
let n = class extends f {
|
|
211
217
|
constructor() {
|
|
212
|
-
super(...arguments), this.context = new
|
|
213
|
-
}, this._defaultFormName =
|
|
218
|
+
super(...arguments), this.context = new k(), this.autocomplete = void 0, this.direction = "ltr", this.eventSub = [], this.unsubscribeI18n = () => {
|
|
219
|
+
}, this._defaultFormName = j();
|
|
214
220
|
}
|
|
215
221
|
connectedCallback() {
|
|
216
222
|
super.connectedCallback(), this.classList.add("gui-form"), this.configureLongLivedEvents();
|
|
@@ -249,9 +255,9 @@ let n = class extends f {
|
|
|
249
255
|
e.itemRenderers ?? {},
|
|
250
256
|
e.localization,
|
|
251
257
|
e.dependencies ?? {}
|
|
252
|
-
), this.direction =
|
|
258
|
+
), this.direction = E(this.context.localization.lang), this.stateSub = this.context.store.state$.subscribe((t) => {
|
|
253
259
|
this.formState = t, this.requestUpdate();
|
|
254
|
-
}), this.healthSub =
|
|
260
|
+
}), this.healthSub = B(this.context.store.state$).subscribe((t) => {
|
|
255
261
|
this.dispatchEvent(
|
|
256
262
|
new CustomEvent(n.FORM_HEALTH_EVENT, {
|
|
257
263
|
detail: t,
|
|
@@ -262,7 +268,7 @@ let n = class extends f {
|
|
|
262
268
|
type: "INITIALIZE",
|
|
263
269
|
payload: { formName: e.formName ?? this._defaultFormName, formDef: e.formDef }
|
|
264
270
|
}), 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) => {
|
|
265
|
-
this.direction =
|
|
271
|
+
this.direction = E(t), this.context.store.dispatch({ type: "SET_LANGUAGE", payload: { lang: t } });
|
|
266
272
|
});
|
|
267
273
|
}
|
|
268
274
|
createRenderRoot() {
|
|
@@ -275,10 +281,10 @@ let n = class extends f {
|
|
|
275
281
|
id=${t}
|
|
276
282
|
novalidate
|
|
277
283
|
dir=${this.direction}
|
|
278
|
-
autocomplete=${this.autocomplete ||
|
|
284
|
+
autocomplete=${this.autocomplete || H}
|
|
279
285
|
@submit=${this.onFormSubmit}
|
|
280
286
|
>
|
|
281
|
-
${
|
|
287
|
+
${G(
|
|
282
288
|
e,
|
|
283
289
|
() => b` <gui-widget .widget=${this.formState?.formDef.form}></gui-widget>`,
|
|
284
290
|
() => b` <div>Loading form...</div>`
|
|
@@ -315,17 +321,17 @@ c([
|
|
|
315
321
|
d({ type: String })
|
|
316
322
|
], n.prototype, "autocomplete", 2);
|
|
317
323
|
c([
|
|
318
|
-
|
|
324
|
+
z()
|
|
319
325
|
], n.prototype, "direction", 2);
|
|
320
326
|
n = c([
|
|
321
327
|
y("gui-core-form")
|
|
322
328
|
], n);
|
|
323
|
-
var
|
|
329
|
+
var K = Object.defineProperty, u = (e, t, o, r) => {
|
|
324
330
|
for (var i = void 0, s = e.length - 1, a; s >= 0; s--)
|
|
325
331
|
(a = e[s]) && (i = a(t, o, i) || i);
|
|
326
|
-
return i &&
|
|
332
|
+
return i && K(t, o, i), i;
|
|
327
333
|
};
|
|
328
|
-
const
|
|
334
|
+
const tt = (e) => {
|
|
329
335
|
class t extends e {
|
|
330
336
|
constructor() {
|
|
331
337
|
super(...arguments), this.repeaterIndex = -1, this.parentRepeaterIndexes = [];
|
|
@@ -340,8 +346,8 @@ const Y = (e) => {
|
|
|
340
346
|
new S(s, {
|
|
341
347
|
context: x,
|
|
342
348
|
initialValue: a
|
|
343
|
-
}), s.widget =
|
|
344
|
-
|
|
349
|
+
}), s.widget = D(
|
|
350
|
+
_(this.widget),
|
|
345
351
|
a
|
|
346
352
|
), s.id = `host-${this.widget.uid}`, this.replaceWith(s);
|
|
347
353
|
} catch (i) {
|
|
@@ -376,30 +382,30 @@ const Y = (e) => {
|
|
|
376
382
|
d({ attribute: !1 })
|
|
377
383
|
], t.prototype, "parentRepeaterIndexes"), t;
|
|
378
384
|
};
|
|
379
|
-
var
|
|
380
|
-
for (var i = r > 1 ? void 0 : r ?
|
|
385
|
+
var et = Object.getOwnPropertyDescriptor, it = (e, t, o, r) => {
|
|
386
|
+
for (var i = r > 1 ? void 0 : r ? et(t, o) : t, s = e.length - 1, a; s >= 0; s--)
|
|
381
387
|
(a = e[s]) && (i = a(i) || i);
|
|
382
388
|
return i;
|
|
383
389
|
};
|
|
384
|
-
let
|
|
390
|
+
let C = class extends tt(f) {
|
|
385
391
|
};
|
|
386
|
-
|
|
392
|
+
C = it([
|
|
387
393
|
y("gui-repeater-widget")
|
|
388
|
-
],
|
|
394
|
+
], C);
|
|
389
395
|
export {
|
|
390
|
-
|
|
396
|
+
ht as ActionWidgetAdapter,
|
|
391
397
|
g as BaseWidgetAdapter,
|
|
392
|
-
|
|
398
|
+
lt as DisplayWidgetAdapter,
|
|
393
399
|
n as FormElement,
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
400
|
+
mt as InputWidgetAdapter,
|
|
401
|
+
bt as LayoutWidgetAdapter,
|
|
402
|
+
k as LitFormContext,
|
|
403
|
+
C as RepeaterWidgetElement,
|
|
398
404
|
T as WidgetElement,
|
|
399
|
-
|
|
400
|
-
|
|
405
|
+
pt as actionContext,
|
|
406
|
+
ct as displayWidgetContext,
|
|
401
407
|
v as formContext,
|
|
402
|
-
|
|
403
|
-
|
|
408
|
+
ut as inputContext,
|
|
409
|
+
gt as layoutContext,
|
|
404
410
|
x as repeaterIndexesContext
|
|
405
411
|
};
|
package/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(i,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("@lit/context"),require("
|
|
1
|
+
(function(i,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("@lit/context"),require("rxjs"),require("@golemui/core"),require("lit"),require("lit/decorators.js"),require("lit/directives/when.js")):typeof define=="function"&&define.amd?define(["exports","@lit/context","rxjs","@golemui/core","lit","lit/decorators.js","lit/directives/when.js"],p):(i=typeof globalThis<"u"?globalThis:i||self,p(i.lit={},i.context,i.rxjs,i.core,i.lit,i.decorators_js,i.when_js))})(this,(function(i,p,l,d,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 C=p.createContext("guiActionWidgetAdapter");class w 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.store.state$.pipe(l.takeUntil(this.destroy$),l.map(s=>s.touched&&!s.isFormValid),l.distinctUntilChanged()).subscribe(s=>{this.setTemplateData({invalid:s})}),this.context.emitEvent("load",this.widget)}click(){this.context.emitEvent("click",this.widget)}}const x=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`
|
|
2
2
|
<form
|
|
3
3
|
id=${s}
|
|
4
4
|
novalidate
|
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
>
|
|
9
9
|
${v.when(t,()=>u.html` <gui-widget .widget=${this.formState?.formDef.form}></gui-widget>`,()=>u.html` <div>Loading form...</div>`)}
|
|
10
10
|
</form>
|
|
11
|
-
`}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=
|
|
11
|
+
`}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=w,i.BaseWidgetAdapter=m,i.DisplayWidgetAdapter=T,i.InputWidgetAdapter=$,i.LayoutWidgetAdapter=W,i.LitFormContext=E,i.actionContext=C,i.displayWidgetContext=x,i.formContext=g,i.inputContext=D,i.layoutContext=I,i.repeaterIndexesContext=b,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@golemui/lit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.umd.cjs",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"*.md"
|
|
21
21
|
],
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"@golemui/core": "0.
|
|
23
|
+
"@golemui/core": "0.17.0",
|
|
24
24
|
"@lit/context": "^1.1.6",
|
|
25
25
|
"lit": "^3.3.1",
|
|
26
26
|
"rxjs": "^7.8.0"
|