@golemui/gui-lit 1.6.0 → 2.0.0-rc.1

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.
Files changed (96) hide show
  1. package/CHANGELOG.md +86 -0
  2. package/accordion.element-CE1gDRCy.js +84 -0
  3. package/alert.element-Bqcad7bR.js +43 -0
  4. package/{button.element-CKYv0Glr.js → button.element-CjeUWaly.js} +23 -24
  5. package/{calendar.element-DkHZFBNr.js → calendar.element-DXI9bfFN.js} +17 -22
  6. package/{checkbox.element-MukoziRw.js → checkbox.element-D8hXKLjW.js} +18 -22
  7. package/{currency.element-DNumeSKA.js → currency.element-D8t_MtIs.js} +22 -26
  8. package/{date-picker.element-DpQmremq.js → date-picker.element-X__hfSnj.js} +16 -21
  9. package/{date-time-calendar.element-GAr8VMGa.js → date-time-calendar.element-Dmyd7LQ0.js} +17 -21
  10. package/{date-time-picker.element-Bt0GYSpS.js → date-time-picker.element-QGn5dEbf.js} +23 -27
  11. package/{date-time.element-WfLnY_Cb.js → date-time.element-B0OuRjlf.js} +20 -25
  12. package/{date.element-ChpTi2AQ.js → date.element-Ba8wmaNU.js} +13 -18
  13. package/default-list-item-renderer-sJeXkSKR.js +15 -0
  14. package/{default-multi-list-item-renderer-Cv-guvEX.js → default-multi-list-item-renderer-CG3Fuye0.js} +7 -12
  15. package/{dropdown.element-Ckh9JvEK.js → dropdown.element-C55MHVq-.js} +98 -132
  16. package/{file-upload.element-l_l_ubxJ.js → file-upload.element-B3oBEQ_s.js} +18 -23
  17. package/grid.element-CwDdlQ4b.js +54 -0
  18. package/index.js +42 -42
  19. package/index.umd.cjs +287 -374
  20. package/lib/components/accordion.element.d.ts +2 -2
  21. package/lib/components/alert.element.d.ts +0 -1
  22. package/lib/components/calendar.element.d.ts +0 -1
  23. package/lib/components/checkbox.element.d.ts +0 -1
  24. package/lib/components/currency.element.d.ts +0 -1
  25. package/lib/components/date-picker.element.d.ts +0 -1
  26. package/lib/components/date-time-calendar.element.d.ts +0 -1
  27. package/lib/components/date-time-picker.element.d.ts +0 -1
  28. package/lib/components/date-time.element.d.ts +0 -1
  29. package/lib/components/date.element.d.ts +0 -1
  30. package/lib/components/dropdown.element.d.ts +2 -6
  31. package/lib/components/file-upload.element.d.ts +0 -1
  32. package/lib/components/grid.element.d.ts +3 -3
  33. package/lib/components/list.element.d.ts +2 -8
  34. package/lib/components/markdown-text.element.d.ts +0 -1
  35. package/lib/components/markdown.element.d.ts +0 -1
  36. package/lib/components/multi-dropdown.element.d.ts +2 -6
  37. package/lib/components/multi-file-upload.element.d.ts +0 -1
  38. package/lib/components/multi-list.element.d.ts +2 -8
  39. package/lib/components/number.element.d.ts +0 -1
  40. package/lib/components/password.element.d.ts +0 -1
  41. package/lib/components/radiogroup.element.d.ts +0 -1
  42. package/lib/components/range-calendar.element.d.ts +0 -1
  43. package/lib/components/range-date-input.element.d.ts +0 -1
  44. package/lib/components/range-date-picker.element.d.ts +0 -1
  45. package/lib/components/range-date-time-calendar.element.d.ts +0 -1
  46. package/lib/components/range-date-time-input.element.d.ts +0 -1
  47. package/lib/components/range-date-time-picker.element.d.ts +0 -1
  48. package/lib/components/range-time-input.element.d.ts +0 -1
  49. package/lib/components/range-time-picker.element.d.ts +0 -1
  50. package/lib/components/renderer.element.d.ts +0 -1
  51. package/lib/components/repeater.element.d.ts +0 -1
  52. package/lib/components/select.element.d.ts +0 -1
  53. package/lib/components/tabs.element.d.ts +4 -15
  54. package/lib/components/tags.element.d.ts +0 -1
  55. package/lib/components/textarea.element.d.ts +0 -1
  56. package/lib/components/textinput.element.d.ts +0 -1
  57. package/lib/components/time-picker.element.d.ts +0 -1
  58. package/lib/components/time.element.d.ts +0 -1
  59. package/lib/components/toggle.element.d.ts +0 -1
  60. package/list.element-CIrv32zU.js +125 -0
  61. package/{markdown-text.element-DflCQwAo.js → markdown-text.element-Jos6zKYy.js} +17 -22
  62. package/{markdown.element-DUHHoi2Y.js → markdown.element-7tvZ028P.js} +11 -15
  63. package/{multi-dropdown.element-mX06nBBb.js → multi-dropdown.element-nOsP8HUx.js} +99 -135
  64. package/{multi-file-upload.element-DzAZAfc1.js → multi-file-upload.element-4h6JQgRF.js} +16 -21
  65. package/multi-list.element-CZfmTbCf.js +139 -0
  66. package/{number.element-mQSFQsYC.js → number.element-WRHwQGZz.js} +19 -23
  67. package/package.json +6 -6
  68. package/{password.element-xw5gugEg.js → password.element-DnV_PqKI.js} +17 -21
  69. package/{radiogroup.element-TqfrxVyI.js → radiogroup.element-Cqn_48Ao.js} +20 -24
  70. package/{range-calendar.element-BJr97SVA.js → range-calendar.element-V_56ZeT9.js} +13 -18
  71. package/{range-date-input.element-DDRYvP9h.js → range-date-input.element-D3ZG8OW-.js} +15 -20
  72. package/{range-date-picker.element-rdEr0_wu.js → range-date-picker.element-CaNHjueS.js} +21 -26
  73. package/{range-date-time-calendar.element-UlL1BBRJ.js → range-date-time-calendar.element-DyiiUB5Q.js} +19 -24
  74. package/{range-date-time-input.element-Cq4IdW7N.js → range-date-time-input.element-CVCPS7FC.js} +20 -25
  75. package/{range-date-time-picker.element-CnJcIN9C.js → range-date-time-picker.element-6nBQ_NZs.js} +16 -21
  76. package/{range-time-input.element-Cq0TrGe9.js → range-time-input.element-GXw45kMr.js} +12 -17
  77. package/{range-time-picker.element-BzlIuZ6m.js → range-time-picker.element-CG4PJg3u.js} +24 -29
  78. package/{renderer.element-BVwerbtL.js → renderer.element-FWOUTePl.js} +16 -21
  79. package/{repeater.element-DQNI4b7I.js → repeater.element-V508AKTJ.js} +8 -13
  80. package/{select.element-RBtbAvLx.js → select.element-BPrqKmDM.js} +17 -20
  81. package/tabs.element-CeZOk5Bj.js +88 -0
  82. package/{tags.element-CGvxhMmX.js → tags.element-CVCUsKZ0.js} +12 -17
  83. package/{textarea.element-E2ntRBtE.js → textarea.element-DrWG3xvs.js} +23 -27
  84. package/{textinput.element-0q5F5ol3.js → textinput.element-CCgsbYTB.js} +25 -29
  85. package/{time-picker.element-BiLaLr_c.js → time-picker.element-Q_OWcBVy.js} +21 -26
  86. package/{time.element-92goKRwJ.js → time.element-B0L2sriD.js} +20 -25
  87. package/{toggle.element-zDUc9Vja.js → toggle.element-BTjo7IVK.js} +18 -22
  88. package/accordion.element-BEenQrCh.js +0 -102
  89. package/alert.element-Dzv49O-1.js +0 -55
  90. package/default-list-item-renderer-CuPJ9jUD.js +0 -24
  91. package/flex.element-BW0_kx8z.js +0 -79
  92. package/grid.element-C019lV76.js +0 -78
  93. package/lib/components/flex.element.d.ts +0 -16
  94. package/list.element-UIKmXzeH.js +0 -148
  95. package/multi-list.element-Bs-UN2Cy.js +0 -162
  96. package/tabs.element-BiVaQlvt.js +0 -171
@@ -1,25 +1,27 @@
1
- import { InputWidgetAdapter as F, formContext as x, inputContext as C } from "@golemui/lit";
2
- import { consume as D, provide as R } from "@lit/context";
3
- import { LitElement as L, nothing as p, html as _ } from "lit";
4
- import { classMap as v } from "lit/directives/class-map.js";
5
- import { property as k, state as d, query as $ } from "lit/decorators.js";
6
- import { unsubscribeAll as V, cspStyleMap as S, safeDefine as P } from "@golemui/lit/internals";
7
- import { Subject as T, debounceTime as j } from "rxjs";
8
- import { d as q } from "./default-list-item-renderer-CuPJ9jUD.js";
1
+ import { InputWidgetAdapter as b, formContext as $, inputContext as I } from "@golemui/lit";
2
+ import { searchItems as w } from "@golemui/gui-components/internals";
3
+ import { consume as v, provide as y } from "@lit/context";
4
+ import { LitElement as F, nothing as n, html as u } from "lit";
5
+ import { classMap as m } from "lit/directives/class-map.js";
6
+ import { property as D, state as d, query as p } from "lit/decorators.js";
7
+ import { unsubscribeAll as x, cspStyleMap as C, safeDefine as R } from "@golemui/lit/internals";
8
+ import { Subject as k, debounceTime as L } from "rxjs";
9
+ import { d as V } from "./default-list-item-renderer-sJeXkSKR.js";
9
10
  import "@golemui/gui-components/label";
10
11
  import "@golemui/gui-components/list";
11
12
  import "@golemui/gui-components/errors";
12
- var O = Object.defineProperty, l = (g, e, t, s) => {
13
- for (var i = void 0, u = g.length - 1, h; u >= 0; u--)
14
- (h = g[u]) && (i = h(e, t, i) || i);
15
- return i && O(e, t, i), i;
13
+ import { live as T } from "lit/directives/live.js";
14
+ var j = Object.defineProperty, o = (c, e, t, l) => {
15
+ for (var a = void 0, r = c.length - 1, h; r >= 0; r--)
16
+ (h = c[r]) && (a = h(e, t, a) || a);
17
+ return a && j(e, t, a), a;
16
18
  };
17
- class a extends L {
19
+ class s extends F {
18
20
  constructor() {
19
- super(...arguments), this.adapter = new F(), this.debouncer = new T(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
21
+ super(...arguments), this.adapter = new b(), this.debouncer = new k(), this.subscriptions = [], this._visibleItems = [], this._filteredItems = [], this._listItems = [], this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
20
22
  if (!this._isListVisible) return;
21
- const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._panelRef && t.includes(this._panelRef);
22
- !s && !i && (this._isListVisible = !1);
23
+ const t = e.composedPath(), l = this._inputRef && t.includes(this._inputRef), a = this._panelRef && t.includes(this._panelRef);
24
+ !l && !a && (this._isListVisible = !1);
23
25
  }, this._onToggleMouseDown = (e) => {
24
26
  e.preventDefault();
25
27
  }, this._onToggleClick = (e) => {
@@ -31,48 +33,35 @@ class a extends L {
31
33
  createRenderRoot() {
32
34
  return this;
33
35
  }
34
- updated(e) {
35
- super.updated(e);
36
- const t = this.adapter.templateData.size;
37
- t ? this.style.flex = String(t) : this.style.removeProperty("flex");
38
- }
39
36
  connectedCallback() {
40
37
  super.connectedCallback(), typeof document < "u" && document.addEventListener("click", this.onDocumentClick), this.classList.add("gui-dropdown", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this._filteredItems = this.adapter.templateData.items, this.subscriptions.push(
41
38
  this.adapter.templateDataChanged$.subscribe(() => {
42
39
  const e = this.adapter.templateData;
43
40
  e.items && this._listItems?.length === 0 && this._filteredItems?.length === 0 && (this._filteredItems = e.items, this._listItems = e.items), this.requestUpdate();
44
41
  }),
45
- this.debouncer.pipe(j(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
42
+ this.debouncer.pipe(L(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
46
43
  this._filterItems(e);
47
44
  })
48
45
  );
49
46
  }
50
47
  disconnectedCallback() {
51
- super.disconnectedCallback(), this.adapter.destroy(), V(this.subscriptions);
48
+ super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.adapter.destroy(), x(this.subscriptions);
52
49
  }
53
- _onRangeChange(e) {
54
- this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
50
+ _onVisibleItemsChange(e) {
51
+ this._visibleItems = e.detail;
55
52
  }
56
53
  _onUpdateItems(e) {
57
54
  const t = e.detail || [];
58
55
  if (this._listItems = t, !this._selectedItem && this.adapter.templateData.value != null) {
59
- const s = t.find(
60
- (i) => i.value === this.adapter.templateData.value
56
+ const l = t.find(
57
+ (a) => a.value === this.adapter.templateData.value
61
58
  );
62
- s && (this._selectedItem = s);
59
+ l && (this._selectedItem = l);
63
60
  }
64
61
  }
65
- _onFocusChange(e) {
66
- this._focusedIndex = e.detail.index;
67
- }
68
- _onClickItem(e, t) {
69
- if (this.adapter.templateData.readonly || e.disabled) return;
70
- const s = this.adapter.templateData;
71
- this.adapter.valueChanged(e.value), this.adapter.filterChanged(""), this._focusedIndex = t, this._selectedItem = e, this._isFiltering = !1, this._isListVisible = !1, this._listRef && (this._listRef.focusItemAtIndex(t), this._inputRef.value = s.valueField ? e.template[s.valueField] : e.template);
72
- }
73
62
  _onValueChange(e) {
74
63
  const t = e.detail.value;
75
- this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((s) => s.value === t), this._isFiltering = !1, this._isListVisible = !1;
64
+ this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((l) => l.value === t), this._isFiltering = !1, this._isListVisible = !1;
76
65
  }
77
66
  async _onKeyDown(e) {
78
67
  switch (e.key) {
@@ -89,20 +78,12 @@ class a extends L {
89
78
  this.debouncer.next(t);
90
79
  }
91
80
  _filterItems(e) {
92
- const t = this.adapter.templateData, s = !!this.widget.on?.filter;
93
- if (this.adapter.filterChanged(e), e && !s) {
94
- this._isFiltering = !0, this._isListVisible = !0;
95
- const i = t.searchFields ?? [t.labelField, t.valueField].filter(
96
- (o) => !!o
97
- ), u = i.length > 0, m = (t.items || []).filter((o) => {
98
- if (o === null || typeof o != "object")
99
- return o != null && o.toString().toLowerCase().includes(e.toLowerCase());
100
- const f = Object.keys(o), n = (c, b) => c || o[b].toString().toLowerCase().includes(e.toLowerCase());
101
- return u ? f.filter((c) => i.includes(c)).reduce(n, !1) : f.reduce(n, !1);
102
- });
103
- this._filteredItems = [...m];
104
- } else
105
- this._isFiltering = !1, this._filteredItems = [...t.items];
81
+ const t = this.adapter.templateData, l = !!this.widget.on?.filter;
82
+ this.adapter.filterChanged(e), e && !l ? (this._isFiltering = !0, this._isListVisible = !0, this._filteredItems = w(
83
+ t.items || [],
84
+ e,
85
+ t
86
+ )) : (this._isFiltering = !1, this._filteredItems = [...t.items]);
106
87
  }
107
88
  _onWidgetKeyDown(e) {
108
89
  e.key !== "Escape" || !this._isListVisible || (e.preventDefault(), e.stopPropagation(), this._isListVisible = !1, this._isFiltering = !1, this._ignoreNextFocus = !0, this._inputRef?.focus(), setTimeout(() => {
@@ -121,11 +102,11 @@ class a extends L {
121
102
  t && this.contains(t) || (this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1);
122
103
  }
123
104
  render() {
124
- const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, s = this._listItems.slice(this._range.start, this._range.end), i = this.adapter.getItemRenderer(
105
+ const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, l = this.adapter.getItemRenderer(
125
106
  e.itemRenderer,
126
- q
127
- ), h = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, m = h ? this._selectedItem?.template[h] : this._selectedItem?.template, o = !!this.widget.on?.filter;
128
- return _`
107
+ V
108
+ ), r = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, h = r ? this._selectedItem?.template[r] : this._selectedItem?.template, f = !!this.widget.on?.filter;
109
+ return u`
129
110
  <gui-label
130
111
  .targetElement=${[this._listRef, this._inputRef]}
131
112
  .uid=${this.widget.uid}
@@ -138,34 +119,34 @@ class a extends L {
138
119
  ></gui-label>
139
120
 
140
121
  <div class="gui-widget" @keydown=${this._onWidgetKeyDown} @focusout=${this._onFocusOut}>
141
- ${e.icon ? _`<span
142
- class=${v({ "gui-widget-icon": !0, [e.icon]: !0 })}
122
+ ${e.icon ? u`<span
123
+ class=${m({ "gui-widget-icon": !0, [e.icon]: !0 })}
143
124
  data-icon=${e.icon}
144
125
  aria-hidden="true"
145
- ></span>` : p}
126
+ ></span>` : n}
146
127
  <input
147
128
  type="text"
148
129
  role="combobox"
149
130
  id=${this.widget.uid}
150
131
  data-cy=${`${this.widget.uid}_textinput`}
151
- class=${v({
132
+ class=${m({
152
133
  "gui-widget-input": !0,
153
134
  "gui-dropdown--icon": !!e.icon
154
135
  })}
155
- .value=${m ?? e.value ?? ""}
136
+ .value=${h ?? e.value ?? ""}
156
137
  ?required=${e.validator?.required}
157
138
  ?disabled=${e.disabled}
158
139
  ?readonly=${e.readonly}
159
140
  placeholder=${e.placeholder ?? ""}
160
- autocomplete=${e.autocomplete || p}
141
+ autocomplete=${e.autocomplete || n}
161
142
  @keydown=${this._onKeyDown}
162
143
  @input=${this._onInput}
163
144
  @focus=${this._onFocus}
164
145
  aria-expanded=${this._isListVisible ? "true" : "false"}
165
146
  aria-controls=${`${this.widget.uid}-list`}
166
147
  aria-autocomplete="list"
167
- aria-labelledby=${e.label ? `${this.widget.uid}_label` : p}
168
- aria-describedby=${e.hint ? `${this.widget.uid}_hint` : p}
148
+ aria-labelledby=${e.label ? `${this.widget.uid}_label` : n}
149
+ aria-describedby=${e.hint ? `${this.widget.uid}_hint` : n}
169
150
  />
170
151
  <button
171
152
  type="button"
@@ -178,17 +159,7 @@ class a extends L {
178
159
  @mousedown=${this._onToggleMouseDown}
179
160
  @click=${this._onToggleClick}
180
161
  >
181
- <svg
182
- xmlns="http://www.w3.org/2000/svg"
183
- width="16"
184
- height="16"
185
- viewBox="0 0 256 256"
186
- aria-hidden="true"
187
- >
188
- <path
189
- d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
190
- ></path>
191
- </svg>
162
+ <span class="gui-caret" aria-hidden="true"></span>
192
163
  </button>
193
164
 
194
165
  <div
@@ -199,102 +170,97 @@ class a extends L {
199
170
  <gui-list
200
171
  id=${`${this.widget.uid}-list`}
201
172
  .uid=${this.widget.uid}
202
- .value=${e.value ?? ""}
173
+ .value=${T(e.value ?? "")}
203
174
  .valueField=${e.valueField}
204
- .items=${this._isFiltering && !o ? this._filteredItems : e.items}
175
+ .items=${this._isFiltering && !f ? this._filteredItems : e.items}
205
176
  .itemHeight=${e.itemHeight}
206
177
  .height=${e.height}
207
178
  ?required=${e.validator?.required}
208
- ?touched=${e.touched}
179
+ .touched=${e.touched}
209
180
  ?disabled=${e.disabled}
210
181
  ?readonly=${e.readonly}
211
182
  ?hidden=${!this._isListVisible}
212
- @gui-range-change=${this._onRangeChange}
183
+ @gui-visible-items-change=${this._onVisibleItemsChange}
213
184
  @gui-update-items=${this._onUpdateItems}
214
- @gui-focus-change=${this._onFocusChange}
215
185
  @focus=${this._onFocus}
216
- @change=${this._onValueChange}
186
+ @gui-input=${this._onValueChange}
217
187
  >
218
- ${s.map((r, f) => {
219
- const n = this._range.start + f, c = e.value === r.value, b = this._focusedIndex === n, w = !!e.disabled || !!r.disabled, I = e.labelField ?? "label", y = r.template !== null && typeof r.template == "object" && I && !e.itemRenderer ? r.template[I] : r.template;
220
- return _`
188
+ ${this._visibleItems.map((i) => {
189
+ const _ = e.labelField ?? "label", g = i.template !== null && typeof i.template == "object" && _ && !e.itemRenderer ? i.template[_] : i.template;
190
+ return u`
221
191
  <div
222
192
  role="option"
223
193
  tabindex="-1"
224
194
  class="gui-list__item-wrapper"
225
- id="${this.widget.uid}-item-${n}"
226
- style=${S({ height: `${e.itemHeight || 40}px` })}
227
- aria-selected=${c ? "true" : "false"}
228
- aria-disabled=${w ? "true" : "false"}
229
- @click=${() => this._onClickItem(r, n)}
195
+ id=${i.id}
196
+ style=${C({ height: `${e.itemHeight || 40}px` })}
197
+ aria-selected=${i.selected ? "true" : "false"}
198
+ aria-disabled=${i.disabled ? "true" : "false"}
230
199
  >
231
- ${i({
232
- template: y,
233
- value: r.value,
234
- index: n,
235
- selected: c,
236
- disabled: w,
237
- focused: b
200
+ ${l({
201
+ template: g,
202
+ value: i.value,
203
+ index: i.index,
204
+ selected: i.selected,
205
+ disabled: i.disabled,
206
+ focused: i.focused
238
207
  })}
239
208
  </div>
240
209
  `;
241
210
  })}
242
211
  </gui-list>
243
- ${t ? _`<gui-errors
212
+ ${t ? u`<gui-errors
244
213
  panel
245
214
  .uid=${this.widget.uid}
246
215
  .errors=${e.errors}
247
216
  .touched=${e.touched}
248
- ></gui-errors>` : p}
217
+ ></gui-errors>` : n}
249
218
  </div>
250
219
  </div>
251
220
 
252
- ${t ? _`<gui-errors
221
+ ${t ? u`<gui-errors
253
222
  .uid=${this.widget.uid}
254
223
  .errors=${e.errors}
255
224
  .touched=${e.touched}
256
- ></gui-errors>` : p}
225
+ ></gui-errors>` : n}
257
226
  `;
258
227
  }
259
228
  }
260
- l([
261
- D({ context: x }),
262
- k({ attribute: !1 })
263
- ], a.prototype, "formContext");
264
- l([
265
- R({ context: C })
266
- ], a.prototype, "adapter");
267
- l([
268
- d()
269
- ], a.prototype, "_range");
270
- l([
229
+ o([
230
+ v({ context: $ }),
231
+ D({ attribute: !1 })
232
+ ], s.prototype, "formContext");
233
+ o([
234
+ y({ context: I })
235
+ ], s.prototype, "adapter");
236
+ o([
271
237
  d()
272
- ], a.prototype, "_filteredItems");
273
- l([
238
+ ], s.prototype, "_visibleItems");
239
+ o([
274
240
  d()
275
- ], a.prototype, "_listItems");
276
- l([
241
+ ], s.prototype, "_filteredItems");
242
+ o([
277
243
  d()
278
- ], a.prototype, "_focusedIndex");
279
- l([
244
+ ], s.prototype, "_listItems");
245
+ o([
280
246
  d()
281
- ], a.prototype, "_isFiltering");
282
- l([
247
+ ], s.prototype, "_isFiltering");
248
+ o([
283
249
  d()
284
- ], a.prototype, "_isListVisible");
285
- l([
250
+ ], s.prototype, "_isListVisible");
251
+ o([
286
252
  d()
287
- ], a.prototype, "_selectedItem");
288
- l([
289
- $("input")
290
- ], a.prototype, "_inputRef");
291
- l([
292
- $("gui-list")
293
- ], a.prototype, "_listRef");
294
- l([
295
- $(".gui-picker__panel")
296
- ], a.prototype, "_panelRef");
297
- P("gui-dropdown-input", a);
253
+ ], s.prototype, "_selectedItem");
254
+ o([
255
+ p("input")
256
+ ], s.prototype, "_inputRef");
257
+ o([
258
+ p("gui-list")
259
+ ], s.prototype, "_listRef");
260
+ o([
261
+ p(".gui-picker__panel")
262
+ ], s.prototype, "_panelRef");
263
+ R("gui-dropdown-input", s);
298
264
  export {
299
- a as DropdownElement
265
+ s as DropdownElement
300
266
  };
@@ -1,27 +1,22 @@
1
- import { InputWidgetAdapter as l, formContext as d, inputContext as p } from "@golemui/lit";
1
+ import { InputWidgetAdapter as d, formContext as l, inputContext as p } from "@golemui/lit";
2
2
  import "@golemui/gui-components/file-upload";
3
3
  import { consume as u, provide as c } from "@lit/context";
4
- import { LitElement as m, html as h } from "lit";
5
- import { property as g } from "lit/decorators.js";
4
+ import { LitElement as m, html as g } from "lit";
5
+ import { property as h } from "lit/decorators.js";
6
6
  import { unsubscribeAll as $, safeDefine as b } from "@golemui/lit/internals";
7
7
  import "rxjs";
8
8
  var f = Object.defineProperty, n = (r, e, t, v) => {
9
- for (var a = void 0, s = r.length - 1, o; s >= 0; s--)
10
- (o = r[s]) && (a = o(e, t, a) || a);
9
+ for (var a = void 0, i = r.length - 1, o; i >= 0; i--)
10
+ (o = r[i]) && (a = o(e, t, a) || a);
11
11
  return a && f(e, t, a), a;
12
12
  };
13
- class i extends m {
13
+ class s extends m {
14
14
  constructor() {
15
- super(...arguments), this.adapter = new l(), this.subscriptions = [];
15
+ super(...arguments), this.adapter = new d(), this.subscriptions = [];
16
16
  }
17
17
  createRenderRoot() {
18
18
  return this;
19
19
  }
20
- updated(e) {
21
- super.updated(e);
22
- const t = this.adapter.templateData.size;
23
- t ? this.style.flex = String(t) : this.style.removeProperty("flex");
24
- }
25
20
  connectedCallback() {
26
21
  super.connectedCallback(), this.classList.add("gui-file-upload", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
27
22
  this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
@@ -30,14 +25,14 @@ class i extends m {
30
25
  render() {
31
26
  super.render();
32
27
  const e = this.adapter.templateData;
33
- return h`
28
+ return g`
34
29
  <gui-file-upload
35
30
  .uid=${this.widget.uid}
36
31
  .path=${this.widget.path}
37
32
  .label=${e.label}
38
33
  .hint=${e.hint}
39
34
  .errors=${e.errors}
40
- ?touched=${e.touched}
35
+ .touched=${e.touched}
41
36
  ?required=${e.validator?.required}
42
37
  ?disabled=${e.disabled}
43
38
  ?readonly=${e.readonly}
@@ -59,9 +54,9 @@ class i extends m {
59
54
  .uploadedMessage=${e.uploadedMessage}
60
55
  .removedMessage=${e.removedMessage}
61
56
  .failedMessage=${e.failedMessage}
62
- @change=${this.valueChanged}
63
- @blur=${() => this.adapter.onBlur()}
64
- @inputError=${this.onInputError}
57
+ @gui-input=${this.valueChanged}
58
+ @gui-blur=${() => this.adapter.onBlur()}
59
+ @gui-input-error=${this.onInputError}
65
60
  ></gui-file-upload>
66
61
  `;
67
62
  }
@@ -78,13 +73,13 @@ class i extends m {
78
73
  }
79
74
  }
80
75
  n([
81
- u({ context: d }),
82
- g({ attribute: !1 })
83
- ], i.prototype, "formContext");
76
+ u({ context: l }),
77
+ h({ attribute: !1 })
78
+ ], s.prototype, "formContext");
84
79
  n([
85
80
  c({ context: p })
86
- ], i.prototype, "adapter");
87
- b("gui-file-upload-input", i);
81
+ ], s.prototype, "adapter");
82
+ b("gui-file-upload-input", s);
88
83
  export {
89
- i as FileUploadElement
84
+ s as FileUploadElement
90
85
  };
@@ -0,0 +1,54 @@
1
+ import { LayoutWidgetAdapter as l, formContext as c, layoutContext as u } from "@golemui/lit";
2
+ import { resolveGrid as m, gridClasses as h, gridCellClasses as f } from "@golemui/gui-shared/internals";
3
+ import { consume as g, provide as b } from "@lit/context";
4
+ import { LitElement as C, html as n } from "lit";
5
+ import { property as v } from "lit/decorators.js";
6
+ import { unsubscribeAll as x, safeDefine as y } from "@golemui/lit/internals";
7
+ import "rxjs";
8
+ import { repeat as w } from "lit-html/directives/repeat.js";
9
+ var $ = Object.defineProperty, p = (s, e, r, i) => {
10
+ for (var t = void 0, a = s.length - 1, d; a >= 0; a--)
11
+ (d = s[a]) && (t = d(e, r, t) || t);
12
+ return t && $(e, r, t), t;
13
+ };
14
+ class o extends C {
15
+ constructor() {
16
+ super(...arguments), this.adapter = new l(), this.subscriptions = [];
17
+ }
18
+ createRenderRoot() {
19
+ return this;
20
+ }
21
+ connectedCallback() {
22
+ super.connectedCallback(), this.classList.add("gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
23
+ this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
24
+ );
25
+ }
26
+ render() {
27
+ const e = m(this.widget.type, this.adapter.templateData), r = this.adapter.templateData.children || [];
28
+ return n`
29
+ <div class=${h(e)} id=${this.widget?.uid}>
30
+ ${w(
31
+ r,
32
+ (i) => i?.uid,
33
+ (i) => n`<div class=${f(e, i.size)}>
34
+ <gui-widget .widget=${i}></gui-widget>
35
+ </div>`
36
+ )}
37
+ </div>
38
+ `;
39
+ }
40
+ disconnectedCallback() {
41
+ super.disconnectedCallback(), this.adapter.destroy(), x(this.subscriptions);
42
+ }
43
+ }
44
+ p([
45
+ g({ context: c }),
46
+ v({ attribute: !1 })
47
+ ], o.prototype, "formContext");
48
+ p([
49
+ b({ context: u })
50
+ ], o.prototype, "adapter");
51
+ y("gui-grid-layout", o);
52
+ export {
53
+ o as GridElement
54
+ };
package/index.js CHANGED
@@ -5,52 +5,52 @@ import { initValidators as t } from "@golemui/gui-validators";
5
5
  import { createFormComponent as i } from "@golemui/lit";
6
6
  const n = {
7
7
  // ACTION
8
- button: async () => (await import("./button.element-CKYv0Glr.js")).ButtonElement,
8
+ button: async () => (await import("./button.element-CjeUWaly.js")).ButtonElement,
9
9
  // INPUTS
10
- calendar: async () => (await import("./calendar.element-DkHZFBNr.js")).CalendarElement,
11
- dateTimeCalendar: async () => (await import("./date-time-calendar.element-GAr8VMGa.js")).DateTimeCalendarElement,
12
- rangeCalendar: async () => (await import("./range-calendar.element-BJr97SVA.js")).RangeCalendarElement,
13
- rangeDateInput: async () => (await import("./range-date-input.element-DDRYvP9h.js")).RangeDateInputElement,
14
- rangeTimeInput: async () => (await import("./range-time-input.element-Cq0TrGe9.js")).RangeTimeInputElement,
15
- rangeDateTimeInput: async () => (await import("./range-date-time-input.element-Cq4IdW7N.js")).RangeDateTimeInputElement,
16
- rangeDateTimeCalendar: async () => (await import("./range-date-time-calendar.element-UlL1BBRJ.js")).RangeDateTimeCalendarElement,
17
- rangeDateTimePicker: async () => (await import("./range-date-time-picker.element-CnJcIN9C.js")).RangeDateTimePickerElement,
18
- rangeDatePicker: async () => (await import("./range-date-picker.element-rdEr0_wu.js")).RangeDatePickerElement,
19
- rangeTimePicker: async () => (await import("./range-time-picker.element-BzlIuZ6m.js")).RangeTimePickerElement,
20
- currency: async () => (await import("./currency.element-DNumeSKA.js")).CurrencyElement,
21
- dateInput: async () => (await import("./date.element-ChpTi2AQ.js")).DateElement,
22
- datePicker: async () => (await import("./date-picker.element-DpQmremq.js")).DatePickerElement,
23
- dateTimePicker: async () => (await import("./date-time-picker.element-Bt0GYSpS.js")).DateTimePickerElement,
24
- dropdown: async () => (await import("./dropdown.element-Ckh9JvEK.js")).DropdownElement,
25
- fileUpload: async () => (await import("./file-upload.element-l_l_ubxJ.js")).FileUploadElement,
26
- list: async () => (await import("./list.element-UIKmXzeH.js")).ListElement,
27
- markdown: async () => (await import("./markdown.element-DUHHoi2Y.js")).MarkdownElement,
28
- multiDropdown: async () => (await import("./multi-dropdown.element-mX06nBBb.js")).MultiDropdownElement,
29
- multiFileUpload: async () => (await import("./multi-file-upload.element-DzAZAfc1.js")).MultiFileUploadElement,
30
- multiList: async () => (await import("./multi-list.element-Bs-UN2Cy.js")).MultiListElement,
31
- password: async () => (await import("./password.element-xw5gugEg.js")).PasswordElement,
32
- textinput: async () => (await import("./textinput.element-0q5F5ol3.js")).TextinputElement,
33
- timeInput: async () => (await import("./time.element-92goKRwJ.js")).TimeElement,
34
- timePicker: async () => (await import("./time-picker.element-BiLaLr_c.js")).TimePickerElement,
35
- dateTimeInput: async () => (await import("./date-time.element-WfLnY_Cb.js")).DateTimeElement,
36
- textarea: async () => (await import("./textarea.element-E2ntRBtE.js")).TextareaElement,
37
- toggle: async () => (await import("./toggle.element-zDUc9Vja.js")).ToggleElement,
38
- checkbox: async () => (await import("./checkbox.element-MukoziRw.js")).CheckboxElement,
39
- number: async () => (await import("./number.element-mQSFQsYC.js")).NumberElement,
40
- radiogroup: async () => (await import("./radiogroup.element-TqfrxVyI.js")).RadiogroupElement,
41
- select: async () => (await import("./select.element-RBtbAvLx.js")).SelectElement,
42
- tags: async () => (await import("./tags.element-CGvxhMmX.js")).TagsElement,
10
+ calendar: async () => (await import("./calendar.element-DXI9bfFN.js")).CalendarElement,
11
+ dateTimeCalendar: async () => (await import("./date-time-calendar.element-Dmyd7LQ0.js")).DateTimeCalendarElement,
12
+ rangeCalendar: async () => (await import("./range-calendar.element-V_56ZeT9.js")).RangeCalendarElement,
13
+ rangeDateInput: async () => (await import("./range-date-input.element-D3ZG8OW-.js")).RangeDateInputElement,
14
+ rangeTimeInput: async () => (await import("./range-time-input.element-GXw45kMr.js")).RangeTimeInputElement,
15
+ rangeDateTimeInput: async () => (await import("./range-date-time-input.element-CVCPS7FC.js")).RangeDateTimeInputElement,
16
+ rangeDateTimeCalendar: async () => (await import("./range-date-time-calendar.element-DyiiUB5Q.js")).RangeDateTimeCalendarElement,
17
+ rangeDateTimePicker: async () => (await import("./range-date-time-picker.element-6nBQ_NZs.js")).RangeDateTimePickerElement,
18
+ rangeDatePicker: async () => (await import("./range-date-picker.element-CaNHjueS.js")).RangeDatePickerElement,
19
+ rangeTimePicker: async () => (await import("./range-time-picker.element-CG4PJg3u.js")).RangeTimePickerElement,
20
+ currency: async () => (await import("./currency.element-D8t_MtIs.js")).CurrencyElement,
21
+ dateInput: async () => (await import("./date.element-Ba8wmaNU.js")).DateElement,
22
+ datePicker: async () => (await import("./date-picker.element-X__hfSnj.js")).DatePickerElement,
23
+ dateTimePicker: async () => (await import("./date-time-picker.element-QGn5dEbf.js")).DateTimePickerElement,
24
+ dropdown: async () => (await import("./dropdown.element-C55MHVq-.js")).DropdownElement,
25
+ fileUpload: async () => (await import("./file-upload.element-B3oBEQ_s.js")).FileUploadElement,
26
+ list: async () => (await import("./list.element-CIrv32zU.js")).ListElement,
27
+ markdown: async () => (await import("./markdown.element-7tvZ028P.js")).MarkdownElement,
28
+ multiDropdown: async () => (await import("./multi-dropdown.element-nOsP8HUx.js")).MultiDropdownElement,
29
+ multiFileUpload: async () => (await import("./multi-file-upload.element-4h6JQgRF.js")).MultiFileUploadElement,
30
+ multiList: async () => (await import("./multi-list.element-CZfmTbCf.js")).MultiListElement,
31
+ password: async () => (await import("./password.element-DnV_PqKI.js")).PasswordElement,
32
+ textinput: async () => (await import("./textinput.element-CCgsbYTB.js")).TextinputElement,
33
+ timeInput: async () => (await import("./time.element-B0L2sriD.js")).TimeElement,
34
+ timePicker: async () => (await import("./time-picker.element-Q_OWcBVy.js")).TimePickerElement,
35
+ dateTimeInput: async () => (await import("./date-time.element-B0OuRjlf.js")).DateTimeElement,
36
+ textarea: async () => (await import("./textarea.element-DrWG3xvs.js")).TextareaElement,
37
+ toggle: async () => (await import("./toggle.element-BTjo7IVK.js")).ToggleElement,
38
+ checkbox: async () => (await import("./checkbox.element-D8hXKLjW.js")).CheckboxElement,
39
+ number: async () => (await import("./number.element-WRHwQGZz.js")).NumberElement,
40
+ radiogroup: async () => (await import("./radiogroup.element-Cqn_48Ao.js")).RadiogroupElement,
41
+ select: async () => (await import("./select.element-BPrqKmDM.js")).SelectElement,
42
+ tags: async () => (await import("./tags.element-CVCUsKZ0.js")).TagsElement,
43
43
  // REPEATER
44
- repeater: async () => (await import("./repeater.element-DQNI4b7I.js")).RepeaterElement,
44
+ repeater: async () => (await import("./repeater.element-V508AKTJ.js")).RepeaterElement,
45
45
  // LAYOUTS
46
- flex: async () => (await import("./flex.element-BW0_kx8z.js")).FlexElement,
47
- grid: async () => (await import("./grid.element-C019lV76.js")).GridElement,
48
- tabs: async () => (await import("./tabs.element-BiVaQlvt.js")).TabsElement,
49
- accordion: async () => (await import("./accordion.element-BEenQrCh.js")).AccordionElement,
46
+ flex: async () => (await import("./grid.element-CwDdlQ4b.js")).GridElement,
47
+ grid: async () => (await import("./grid.element-CwDdlQ4b.js")).GridElement,
48
+ tabs: async () => (await import("./tabs.element-CeZOk5Bj.js")).TabsElement,
49
+ accordion: async () => (await import("./accordion.element-CE1gDRCy.js")).AccordionElement,
50
50
  // DISPLAY
51
- alert: async () => (await import("./alert.element-Dzv49O-1.js")).AlertElement,
52
- markdownText: async () => (await import("./markdown-text.element-DflCQwAo.js")).MarkdownTextElement,
53
- renderer: async () => (await import("./renderer.element-BVwerbtL.js")).RendererElement
51
+ alert: async () => (await import("./alert.element-Bqcad7bR.js")).AlertElement,
52
+ markdownText: async () => (await import("./markdown-text.element-Jos6zKYy.js")).MarkdownTextElement,
53
+ renderer: async () => (await import("./renderer.element-FWOUTePl.js")).RendererElement
54
54
  };
55
55
  class m extends i({
56
56
  widgetLoaders: n,