@golemui/gui-lit 0.12.2 → 0.13.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.
Files changed (83) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/abstract-calendar-YDgwwbqe.js +528 -0
  3. package/{accordion.element-81uTv6Ms.js → accordion.element-ChLmV6QT.js} +24 -22
  4. package/{alert.element-DWrS5ggK.js → alert.element-9QFlqjj9.js} +23 -21
  5. package/button.element-ATNRRDN3.js +121 -0
  6. package/calendar-P9DzVryu.js +96 -0
  7. package/{calendar.element-C1rLK7aY.js → calendar.element-O2of7VBr.js} +25 -22
  8. package/checkbox.element-DMmer4Jw.js +199 -0
  9. package/currency.element-C7SZkoPP.js +266 -0
  10. package/date-CG1562vW.js +786 -0
  11. package/date-input-VJG8lMVN.js +266 -0
  12. package/{date-picker.element-GNC8f3Qi.js → date-picker.element-Bcyhc0fb.js} +29 -25
  13. package/{date.element-Dzw-UJzC.js → date.element-DfXmcgZi.js} +25 -22
  14. package/{dropdown.element-CebROj9s.js → dropdown.element-DCUI5Y7I.js} +24 -22
  15. package/errors-QjKhr6mA.js +109 -0
  16. package/{flex.element-BMqqfxjI.js → flex.element-B0sG0YT1.js} +24 -22
  17. package/{grid.element-CBMoOuLt.js → grid.element-Bf5aEjkj.js} +24 -22
  18. package/index.js +2708 -1174
  19. package/index.umd.cjs +982 -108
  20. package/lib/components/accordion.element.d.ts +7 -7
  21. package/lib/components/alert.element.d.ts +6 -6
  22. package/lib/components/button.element.d.ts +6 -6
  23. package/lib/components/calendar.element.d.ts +6 -6
  24. package/lib/components/checkbox.element.d.ts +6 -6
  25. package/lib/components/currency.element.d.ts +6 -6
  26. package/lib/components/date-picker.element.d.ts +6 -6
  27. package/lib/components/date.element.d.ts +6 -6
  28. package/lib/components/dropdown.element.d.ts +6 -6
  29. package/lib/components/flex.element.d.ts +6 -6
  30. package/lib/components/grid.element.d.ts +6 -6
  31. package/lib/components/list.element.d.ts +6 -6
  32. package/lib/components/markdown-text.element.d.ts +6 -6
  33. package/lib/components/markdown.element.d.ts +6 -6
  34. package/lib/components/number.element.d.ts +6 -6
  35. package/lib/components/password.element.d.ts +6 -6
  36. package/lib/components/radiogroup.element.d.ts +6 -6
  37. package/lib/components/range-calendar.element.d.ts +6 -6
  38. package/lib/components/range-date-input.element.d.ts +6 -6
  39. package/lib/components/range-date-picker.element.d.ts +6 -6
  40. package/lib/components/renderer.element.d.ts +6 -6
  41. package/lib/components/repeater.element.d.ts +6 -6
  42. package/lib/components/select.element.d.ts +6 -6
  43. package/lib/components/tabs.element.d.ts +6 -6
  44. package/lib/components/textarea.element.d.ts +6 -6
  45. package/lib/components/textinput.element.d.ts +6 -6
  46. package/lib/components/toggle.element.d.ts +6 -6
  47. package/lib/widget.loaders.d.ts +2 -2
  48. package/list-CtFsv7GB.js +284 -0
  49. package/{list.element-DIIgN_Ww.js → list.element-G8RNRZXU.js} +30 -27
  50. package/markdown-text-X-BRJT6K.js +30 -0
  51. package/{markdown-text.element-DY7b-dU5.js → markdown-text.element-C_1OqrGa.js} +23 -20
  52. package/markdown.element-CT1JOOM3.js +596 -0
  53. package/number.element-HaXEg_7U.js +282 -0
  54. package/one-of-DifUsEYY.js +48 -0
  55. package/package.json +6 -6
  56. package/password.element-B4-0SCe4.js +238 -0
  57. package/radiogroup.element-DzHLgRh1.js +232 -0
  58. package/range-calendar-qpakwAba.js +326 -0
  59. package/{range-calendar.element-Bli9UfhN.js → range-calendar.element-C-4qqRGK.js} +20 -17
  60. package/range-date-input-CrNpOVHt.js +507 -0
  61. package/{range-date-input.element-BwPvGk5F.js → range-date-input.element-Iq5Y7uLQ.js} +20 -17
  62. package/{range-date-picker.element-DJQOwDPh.js → range-date-picker.element-4bg4Uraq.js} +29 -25
  63. package/{renderer.element-B99qD2mz.js → renderer.element-DMsheQGi.js} +19 -17
  64. package/{repeater.element-AaifWsOB.js → repeater.element-Ry8HyMfW.js} +41 -27
  65. package/select.element-DuGZjlZY.js +257 -0
  66. package/tabs-DzSCq_98.js +13 -0
  67. package/{tabs.element-k8JMNDXi.js → tabs.element-VLrtF1j5.js} +31 -29
  68. package/templates-Dk1jxLwS.js +75 -0
  69. package/textarea.element-C8yx2u0o.js +237 -0
  70. package/textinput.element-DKuplF1A.js +204 -0
  71. package/toggle.element-NXRrhALB.js +201 -0
  72. package/button.element-hjhVBamJ.js +0 -56
  73. package/checkbox.element-bu9_MvED.js +0 -65
  74. package/currency.element-Bxv2WxAx.js +0 -72
  75. package/default-list-item-renderer-DNVEjKSX.js +0 -23
  76. package/markdown.element-ZD_n4ObO.js +0 -73
  77. package/number.element-B0E7W2TK.js +0 -70
  78. package/password.element-C4_eLdUO.js +0 -71
  79. package/radiogroup.element-BD8qBNoO.js +0 -68
  80. package/select.element-BLxtqB0A.js +0 -74
  81. package/textarea.element-DgDwfzYP.js +0 -70
  82. package/textinput.element-DSLFDjfb.js +0 -67
  83. package/toggle.element-BLu6F99u.js +0 -65
@@ -0,0 +1,237 @@
1
+ import { InputWidgetAdapter as v, formContext as b, inputContext as x } from "@golemui/lit";
2
+ import "@golemui/gui-shared";
3
+ import { LitElement as c, html as n, nothing as m } from "lit";
4
+ import { property as i, customElement as g } from "lit/decorators.js";
5
+ import { classMap as $ } from "lit/directives/class-map.js";
6
+ import { G as f, b as C, c as w } from "./templates-Dk1jxLwS.js";
7
+ import { styleMap as D } from "lit-html/directives/style-map.js";
8
+ import { consume as _, provide as L } from "@lit/context";
9
+ import "rxjs";
10
+ var S = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, a, d, s) => {
11
+ for (var e = s > 1 ? void 0 : s ? O(a, d) : a, l = t.length - 1, p; l >= 0; l--)
12
+ (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
13
+ return s && e && S(a, d, e), e;
14
+ };
15
+ let r = class extends c {
16
+ constructor() {
17
+ super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.maxLength = void 0, this.ariaController = new f(this, {
18
+ getTargets: () => this.querySelectorAll(`textarea[id="${this.uid}"]`),
19
+ getState: () => ({
20
+ uid: this.uid,
21
+ templateData: {
22
+ hint: this.hint,
23
+ errors: this.errors,
24
+ readonly: this.readOnly,
25
+ disabled: this.disabled,
26
+ touched: this.touched
27
+ }
28
+ })
29
+ });
30
+ }
31
+ createRenderRoot() {
32
+ return this;
33
+ }
34
+ connectedCallback() {
35
+ super.connectedCallback(), this.classList.add("gui-field");
36
+ }
37
+ render() {
38
+ super.render();
39
+ const t = {
40
+ uid: this.uid,
41
+ label: this.label,
42
+ errors: this.errors,
43
+ touched: this.touched,
44
+ required: this.required,
45
+ disabled: this.disabled,
46
+ readonly: this.readOnly,
47
+ value: this.value,
48
+ hint: this.hint,
49
+ placeholder: this.placeholder,
50
+ autocomplete: this.autocomplete,
51
+ counterMode: this.counterMode ?? "remaining",
52
+ minimumHeight: this.minimumHeight ?? 120,
53
+ autoGrow: this.autoGrow ?? !1,
54
+ maxLength: this.maxLength
55
+ };
56
+ let a = n``;
57
+ if (t.counterMode && t.maxLength) {
58
+ const e = {
59
+ "gui-textarea--counter": !0,
60
+ "gui-textarea--counter__error": (t.value?.length ?? 0) > t.maxLength
61
+ }, l = t.counterMode === "current" ? n`<span>${t.value?.length ?? 0}</span>` : n`<span>${t.maxLength - (t.value?.length ?? 0)}</span>`;
62
+ a = n`<div class=${$(e)}>
63
+ ${l}
64
+ <span> / ${t.maxLength}</span>
65
+ </div>`;
66
+ }
67
+ const d = {
68
+ height: `${t.minimumHeight}px`,
69
+ "min-height": `${t.minimumHeight}px`
70
+ }, s = this.querySelector(`textarea[id="${this.uid}"]`);
71
+ if (this.autoGrow && s) {
72
+ const e = window.getComputedStyle(s), l = parseFloat(e.paddingTop), p = parseFloat(e.paddingBottom), y = l + p;
73
+ s.style.height = "auto", d.height = `${Math.max(this.minimumHeight ?? 120, s.scrollHeight - y)}px`;
74
+ }
75
+ return n`
76
+ ${C(this.uid, t)}
77
+
78
+ <div class="gui-widget">
79
+ <textarea
80
+ id=${this.uid}
81
+ data-cy=${`${this.uid}_textarea`}
82
+ style=${D(d)}
83
+ ?required=${t.required}
84
+ ?disabled=${t.disabled}
85
+ ?readonly=${t.readonly}
86
+ placeholder=${t.placeholder || m}
87
+ autocomplete=${this.autocomplete || m}
88
+ @input=${this.valueChanged}
89
+ @blur=${this.onBlur}
90
+ ></textarea>
91
+ </div>
92
+
93
+ <div class="gui-textarea--validation">
94
+ <div>${w(this.uid, t)}</div>
95
+ ${a}
96
+ </div>
97
+ `;
98
+ }
99
+ valueChanged(t) {
100
+ if (t.stopPropagation(), !this.readOnly) {
101
+ const a = t.target;
102
+ this.dispatchEvent(
103
+ new CustomEvent("input", {
104
+ detail: { value: a.value },
105
+ bubbles: !0,
106
+ composed: !0
107
+ })
108
+ );
109
+ }
110
+ }
111
+ onBlur() {
112
+ this.dispatchEvent(
113
+ new CustomEvent("blur", {
114
+ bubbles: !0,
115
+ composed: !0
116
+ })
117
+ );
118
+ }
119
+ };
120
+ o([
121
+ i({ type: String })
122
+ ], r.prototype, "uid", 2);
123
+ o([
124
+ i({ type: String })
125
+ ], r.prototype, "label", 2);
126
+ o([
127
+ i({ type: String, attribute: "locale-id" })
128
+ ], r.prototype, "localeId", 2);
129
+ o([
130
+ i({ type: Array })
131
+ ], r.prototype, "errors", 2);
132
+ o([
133
+ i({ type: Boolean })
134
+ ], r.prototype, "touched", 2);
135
+ o([
136
+ i({ type: Boolean })
137
+ ], r.prototype, "required", 2);
138
+ o([
139
+ i({ type: Boolean })
140
+ ], r.prototype, "disabled", 2);
141
+ o([
142
+ i({ type: Boolean, attribute: "readonly" })
143
+ ], r.prototype, "readOnly", 2);
144
+ o([
145
+ i({ type: String })
146
+ ], r.prototype, "value", 2);
147
+ o([
148
+ i({ type: String })
149
+ ], r.prototype, "hint", 2);
150
+ o([
151
+ i({ type: String })
152
+ ], r.prototype, "placeholder", 2);
153
+ o([
154
+ i({ type: String })
155
+ ], r.prototype, "autocomplete", 2);
156
+ o([
157
+ i({ type: String, attribute: "countermode" })
158
+ ], r.prototype, "counterMode", 2);
159
+ o([
160
+ i({ type: Number, attribute: "minimumheight" })
161
+ ], r.prototype, "minimumHeight", 2);
162
+ o([
163
+ i({ type: Boolean, attribute: "autogrow" })
164
+ ], r.prototype, "autoGrow", 2);
165
+ o([
166
+ i({ type: Number, attribute: "maxlength" })
167
+ ], r.prototype, "maxLength", 2);
168
+ r = o([
169
+ g("gui-textarea")
170
+ ], r);
171
+ typeof customElements < "u" && !customElements.get("gui-textarea") && customElements.define("gui-textarea", r);
172
+ var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, h = (t, a, d, s) => {
173
+ for (var e = s > 1 ? void 0 : s ? q(a, d) : a, l = t.length - 1, p; l >= 0; l--)
174
+ (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
175
+ return s && e && E(a, d, e), e;
176
+ };
177
+ let u = class extends c {
178
+ constructor() {
179
+ super(...arguments), this.adapter = new v(), this.subscriptions = [];
180
+ }
181
+ createRenderRoot() {
182
+ return this;
183
+ }
184
+ updated(t) {
185
+ super.updated(t);
186
+ const a = this.adapter.templateData.size;
187
+ a ? this.style.flex = String(a) : this.style.removeProperty("flex");
188
+ }
189
+ connectedCallback() {
190
+ super.connectedCallback(), this.classList.add("gui-textarea", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
191
+ this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
192
+ );
193
+ }
194
+ render() {
195
+ return super.render(), n`
196
+ <gui-textarea
197
+ .uid=${this.widget.uid}
198
+ .label=${this.adapter.templateData.label}
199
+ .errors=${this.adapter.templateData.errors}
200
+ ?touched=${this.adapter.templateData.touched}
201
+ ?required=${this.adapter.templateData.validator?.required}
202
+ ?disabled=${this.adapter.templateData.disabled}
203
+ ?readonly=${this.adapter.templateData.readonly}
204
+ .value=${this.adapter.templateData.value}
205
+ .hint=${this.adapter.templateData.hint}
206
+ .placeholder=${this.adapter.templateData.placeholder}
207
+ .autocomplete=${this.adapter.templateData.autocomplete}
208
+ .counterMode=${this.adapter.templateData.counterMode}
209
+ .minimumHeight=${this.adapter.templateData.minimumHeight}
210
+ .autoGrow=${this.adapter.templateData.autoGrow}
211
+ .maxLength=${this.adapter.templateData.validator?.maxLength}
212
+ @input=${this.valueChanged}
213
+ @blur=${() => this.adapter.onBlur()}
214
+ ></gui-textarea>
215
+ `;
216
+ }
217
+ valueChanged(t) {
218
+ const a = t.detail.value;
219
+ this.adapter.valueChanged(a);
220
+ }
221
+ disconnectedCallback() {
222
+ super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
223
+ }
224
+ };
225
+ h([
226
+ _({ context: b }),
227
+ i({ attribute: !1 })
228
+ ], u.prototype, "formContext", 2);
229
+ h([
230
+ L({ context: x })
231
+ ], u.prototype, "adapter", 2);
232
+ u = h([
233
+ g("gui-textarea-input")
234
+ ], u);
235
+ export {
236
+ u as TextareaElement
237
+ };
@@ -0,0 +1,204 @@
1
+ import { InputWidgetAdapter as b, formContext as v, inputContext as g } from "@golemui/lit";
2
+ import "@golemui/gui-shared";
3
+ import { LitElement as c, nothing as h, html as m } from "lit";
4
+ import { property as r, customElement as y } from "lit/decorators.js";
5
+ import { classMap as f } from "lit/directives/class-map.js";
6
+ import { G as $, a as x, b as C, c as D } from "./templates-Dk1jxLwS.js";
7
+ import { consume as O, provide as _ } from "@lit/context";
8
+ import "rxjs";
9
+ var E = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
10
+ for (var a = l > 1 ? void 0 : l ? w(e, o) : e, p = t.length - 1, d; p >= 0; p--)
11
+ (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
12
+ return l && a && E(e, o, a), a;
13
+ };
14
+ let i = class extends c {
15
+ constructor() {
16
+ super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.icon = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.ariaController = new $(this, {
17
+ getTargets: () => this.querySelectorAll(`input[id="${this.uid}"]`),
18
+ getState: () => ({
19
+ uid: this.uid,
20
+ templateData: {
21
+ hint: this.hint,
22
+ errors: this.errors,
23
+ readonly: this.readOnly,
24
+ disabled: this.disabled,
25
+ touched: this.touched
26
+ }
27
+ })
28
+ });
29
+ }
30
+ createRenderRoot() {
31
+ return this;
32
+ }
33
+ connectedCallback() {
34
+ super.connectedCallback(), this.classList.add("gui-field");
35
+ }
36
+ render() {
37
+ super.render();
38
+ const t = {
39
+ uid: this.uid,
40
+ label: this.label,
41
+ hint: this.hint,
42
+ errors: this.errors,
43
+ touched: this.touched,
44
+ required: this.required,
45
+ disabled: this.disabled,
46
+ readonly: this.readOnly,
47
+ value: this.value,
48
+ icon: this.icon,
49
+ placeholder: this.placeholder,
50
+ autocomplete: this.autocomplete
51
+ }, e = x("textinput", t), o = {
52
+ "gui-textinput--icon": !!this.icon
53
+ };
54
+ return m`
55
+ ${C(this.uid, t)}
56
+
57
+ <div class="gui-widget">
58
+ <input
59
+ type="text"
60
+ id=${this.uid}
61
+ data-cy=${`${this.uid}_textinput`}
62
+ class=${f(o)}
63
+ value=${this.value}
64
+ ?required=${this.disabled}
65
+ ?disabled=${this.disabled}
66
+ ?readonly=${this.readOnly}
67
+ placeholder=${this.placeholder || h}
68
+ autocomplete=${this.autocomplete || h}
69
+ @input=${this.valueChanged}
70
+ @blur=${this.onBlur}
71
+ />
72
+ ${e.html}
73
+ </div>
74
+
75
+ ${D(this.uid, t)}
76
+ `;
77
+ }
78
+ valueChanged(t) {
79
+ if (t.stopPropagation(), !this.readOnly) {
80
+ const e = t.target;
81
+ this.dispatchEvent(
82
+ new CustomEvent("input", {
83
+ detail: { value: e.value },
84
+ bubbles: !0,
85
+ composed: !0
86
+ })
87
+ );
88
+ }
89
+ }
90
+ onBlur() {
91
+ this.dispatchEvent(
92
+ new CustomEvent("blur", {
93
+ bubbles: !0,
94
+ composed: !0
95
+ })
96
+ );
97
+ }
98
+ };
99
+ s([
100
+ r({ type: String })
101
+ ], i.prototype, "uid", 2);
102
+ s([
103
+ r({ type: String })
104
+ ], i.prototype, "label", 2);
105
+ s([
106
+ r({ type: String, attribute: "locale-id" })
107
+ ], i.prototype, "localeId", 2);
108
+ s([
109
+ r({ type: Array })
110
+ ], i.prototype, "errors", 2);
111
+ s([
112
+ r({ type: Boolean })
113
+ ], i.prototype, "touched", 2);
114
+ s([
115
+ r({ type: Boolean })
116
+ ], i.prototype, "required", 2);
117
+ s([
118
+ r({ type: Boolean })
119
+ ], i.prototype, "disabled", 2);
120
+ s([
121
+ r({ type: Boolean, attribute: "readonly" })
122
+ ], i.prototype, "readOnly", 2);
123
+ s([
124
+ r({ type: String })
125
+ ], i.prototype, "value", 2);
126
+ s([
127
+ r({ type: String })
128
+ ], i.prototype, "hint", 2);
129
+ s([
130
+ r({ type: String })
131
+ ], i.prototype, "icon", 2);
132
+ s([
133
+ r({ type: String })
134
+ ], i.prototype, "placeholder", 2);
135
+ s([
136
+ r({ type: String })
137
+ ], i.prototype, "autocomplete", 2);
138
+ i = s([
139
+ y("gui-textinput")
140
+ ], i);
141
+ typeof customElements < "u" && !customElements.get("gui-textinput") && customElements.define("gui-textinput", i);
142
+ var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, u = (t, e, o, l) => {
143
+ for (var a = l > 1 ? void 0 : l ? P(e, o) : e, p = t.length - 1, d; p >= 0; p--)
144
+ (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
145
+ return l && a && S(e, o, a), a;
146
+ };
147
+ let n = class extends c {
148
+ constructor() {
149
+ super(...arguments), this.adapter = new b(), this.subscriptions = [];
150
+ }
151
+ createRenderRoot() {
152
+ return this;
153
+ }
154
+ updated(t) {
155
+ super.updated(t);
156
+ const e = this.adapter.templateData.size;
157
+ e ? this.style.flex = String(e) : this.style.removeProperty("flex");
158
+ }
159
+ connectedCallback() {
160
+ super.connectedCallback(), this.classList.add("gui-textinput", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
161
+ this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
162
+ );
163
+ }
164
+ render() {
165
+ return super.render(), m`
166
+ <gui-textinput
167
+ .uid=${this.widget.uid}
168
+ .label=${this.adapter.templateData.label}
169
+ .hint=${this.adapter.templateData.hint}
170
+ .errors=${this.adapter.templateData.errors}
171
+ ?touched=${this.adapter.templateData.touched}
172
+ ?required=${this.adapter.templateData.validator?.required}
173
+ ?disabled=${this.adapter.templateData.disabled}
174
+ ?readonly=${this.adapter.templateData.readonly}
175
+ .value=${this.adapter.templateData.value}
176
+ .icon=${this.adapter.templateData.icon}
177
+ .placeholder=${this.adapter.templateData.placeholder}
178
+ .autocomplete=${this.adapter.templateData.autocomplete}
179
+ @input=${this.valueChanged}
180
+ @blur=${() => this.adapter.onBlur()}
181
+ ></gui-textinput>
182
+ `;
183
+ }
184
+ valueChanged(t) {
185
+ const e = t.detail.value;
186
+ this.adapter.valueChanged(e);
187
+ }
188
+ disconnectedCallback() {
189
+ super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
190
+ }
191
+ };
192
+ u([
193
+ O({ context: v }),
194
+ r({ attribute: !1 })
195
+ ], n.prototype, "formContext", 2);
196
+ u([
197
+ _({ context: g })
198
+ ], n.prototype, "adapter", 2);
199
+ n = u([
200
+ y("gui-textinput-input")
201
+ ], n);
202
+ export {
203
+ n as TextinputElement
204
+ };
@@ -0,0 +1,201 @@
1
+ import { InputWidgetAdapter as b, formContext as m, inputContext as y } from "@golemui/lit";
2
+ import "@golemui/gui-shared";
3
+ import { G as v, c as f } from "./templates-Dk1jxLwS.js";
4
+ import { LitElement as h, nothing as $, html as g } from "lit";
5
+ import { property as r, customElement as c } from "lit/decorators.js";
6
+ import { consume as C, provide as _ } from "@lit/context";
7
+ import "rxjs";
8
+ var D = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (t, e, l, o) => {
9
+ for (var i = o > 1 ? void 0 : o ? P(e, l) : e, d = t.length - 1, n; d >= 0; d--)
10
+ (n = t[d]) && (i = (o ? n(e, l, i) : n(i)) || i);
11
+ return o && i && D(e, l, i), i;
12
+ };
13
+ let a = class extends h {
14
+ constructor() {
15
+ super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.togglePosition = "left", this.ariaController = new v(this, {
16
+ getTargets: () => this.querySelectorAll('span[role="presentation"]'),
17
+ getState: () => ({
18
+ uid: this.uid,
19
+ templateData: {
20
+ hint: this.hint,
21
+ errors: this.errors,
22
+ touched: this.touched,
23
+ // Checkboxes can't have aria-readonly
24
+ readonly: !1,
25
+ disabled: !1
26
+ }
27
+ })
28
+ });
29
+ }
30
+ createRenderRoot() {
31
+ return this;
32
+ }
33
+ connectedCallback() {
34
+ super.connectedCallback(), this.classList.add("gui-field");
35
+ }
36
+ render() {
37
+ super.render();
38
+ const t = {
39
+ uid: this.uid,
40
+ label: this.label,
41
+ hint: this.hint,
42
+ errors: this.errors,
43
+ touched: this.touched,
44
+ required: this.required,
45
+ disabled: this.disabled,
46
+ readonly: this.readOnly,
47
+ value: this.value,
48
+ togglePosition: this.togglePosition
49
+ };
50
+ return t.togglePosition === "right" ? this.classList.add("gui-toggle--right") : this.classList.contains("gui-toggle--right") && this.classList.remove("gui-toggle--right"), g`
51
+ <label
52
+ class="gui-label"
53
+ for=${this.uid}
54
+ data-cy=${`${this.uid}_label`}
55
+ id=${`${this.uid}_label`}
56
+ >
57
+ <div class="gui-widget gui-widget--horizontal gui-toggle--switch">
58
+ <input
59
+ type="checkbox"
60
+ tabindex="0"
61
+ id=${this.uid}
62
+ data-cy=${`${this.uid}_toggle`}
63
+ ?checked=${t.value}
64
+ ?required=${t.required}
65
+ ?disabled=${t.disabled || t.readonly}
66
+ @change=${this.valueChanged}
67
+ @blur=${this.onBlur}
68
+ />
69
+
70
+ <span class="gui-toggle--slider" role="presentation"></span>
71
+ </div>
72
+
73
+ <span class="gui-label__container">
74
+ ${t.label + (t.required ? " *" : "")}
75
+ </span>
76
+ </label>
77
+
78
+ <div class="gui-widget-hint" id=${`${t.uid}_hint`}>
79
+ ${t.hint ?? $} ${f(this.uid, t)}
80
+ </div>
81
+ `;
82
+ }
83
+ valueChanged(t) {
84
+ if (t?.stopPropagation(), !this.readOnly) {
85
+ const e = t?.target;
86
+ this.dispatchEvent(
87
+ new CustomEvent("change", {
88
+ detail: { value: e.checked },
89
+ bubbles: !0,
90
+ composed: !0
91
+ })
92
+ );
93
+ }
94
+ }
95
+ onBlur() {
96
+ this.dispatchEvent(
97
+ new CustomEvent("blur", {
98
+ bubbles: !0,
99
+ composed: !0
100
+ })
101
+ );
102
+ }
103
+ };
104
+ s([
105
+ r({ type: String })
106
+ ], a.prototype, "uid", 2);
107
+ s([
108
+ r({ type: String })
109
+ ], a.prototype, "label", 2);
110
+ s([
111
+ r({ type: String, attribute: "locale-id" })
112
+ ], a.prototype, "localeId", 2);
113
+ s([
114
+ r({ type: Array })
115
+ ], a.prototype, "errors", 2);
116
+ s([
117
+ r({ type: Boolean })
118
+ ], a.prototype, "touched", 2);
119
+ s([
120
+ r({ type: Boolean })
121
+ ], a.prototype, "required", 2);
122
+ s([
123
+ r({ type: Boolean })
124
+ ], a.prototype, "disabled", 2);
125
+ s([
126
+ r({ type: Boolean, attribute: "readonly" })
127
+ ], a.prototype, "readOnly", 2);
128
+ s([
129
+ r({ type: String })
130
+ ], a.prototype, "value", 2);
131
+ s([
132
+ r({ type: String })
133
+ ], a.prototype, "hint", 2);
134
+ s([
135
+ r({ type: String })
136
+ ], a.prototype, "togglePosition", 2);
137
+ a = s([
138
+ c("gui-toggle")
139
+ ], a);
140
+ typeof customElements < "u" && !customElements.get("gui-toggle") && customElements.define("gui-toggle", a);
141
+ var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, u = (t, e, l, o) => {
142
+ for (var i = o > 1 ? void 0 : o ? x(e, l) : e, d = t.length - 1, n; d >= 0; d--)
143
+ (n = t[d]) && (i = (o ? n(e, l, i) : n(i)) || i);
144
+ return o && i && w(e, l, i), i;
145
+ };
146
+ let p = class extends h {
147
+ constructor() {
148
+ super(...arguments), this.adapter = new b(), this.subscriptions = [];
149
+ }
150
+ createRenderRoot() {
151
+ return this;
152
+ }
153
+ updated(t) {
154
+ super.updated(t);
155
+ const e = this.adapter.templateData.size;
156
+ e ? this.style.flex = String(e) : this.style.removeProperty("flex");
157
+ }
158
+ connectedCallback() {
159
+ super.connectedCallback(), this.classList.add("gui-toggle", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
160
+ this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
161
+ );
162
+ }
163
+ render() {
164
+ return super.render(), g`
165
+ <gui-toggle
166
+ .uid=${this.widget.uid}
167
+ .label=${this.adapter.templateData.label}
168
+ .errors=${this.adapter.templateData.errors}
169
+ ?touched=${this.adapter.templateData.touched}
170
+ ?required=${this.adapter.templateData.validator?.required}
171
+ ?disabled=${this.adapter.templateData.disabled}
172
+ ?readonly=${this.adapter.templateData.readonly}
173
+ .value=${this.adapter.templateData.value}
174
+ .hint=${this.adapter.templateData.hint}
175
+ .togglePosition=${this.adapter.templateData.togglePosition}
176
+ @change=${this.valueChanged}
177
+ @blur=${() => this.adapter.onBlur()}
178
+ ></gui-toggle>
179
+ `;
180
+ }
181
+ valueChanged(t) {
182
+ const e = t.detail.value;
183
+ this.adapter.valueChanged(e);
184
+ }
185
+ disconnectedCallback() {
186
+ super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
187
+ }
188
+ };
189
+ u([
190
+ C({ context: m }),
191
+ r({ attribute: !1 })
192
+ ], p.prototype, "formContext", 2);
193
+ u([
194
+ _({ context: y })
195
+ ], p.prototype, "adapter", 2);
196
+ p = u([
197
+ c("gui-toggle-input")
198
+ ], p);
199
+ export {
200
+ p as ToggleElement
201
+ };
@@ -1,56 +0,0 @@
1
- import * as p from "@golemui/lit";
2
- import { consume as d, provide as l } from "@lit/context";
3
- import { LitElement as u, html as h } from "lit";
4
- import { property as m, customElement as b } from "lit/decorators.js";
5
- var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (a, t, s, i) => {
6
- for (var e = i > 1 ? void 0 : i ? g(t, s) : t, o = a.length - 1, n; o >= 0; o--)
7
- (n = a[o]) && (e = (i ? n(t, s, e) : n(e)) || e);
8
- return i && e && f(t, s, e), e;
9
- };
10
- let r = class extends u {
11
- constructor() {
12
- super(...arguments), this.adapter = new p.ActionWidgetAdapter(), this.subscriptions = [];
13
- }
14
- createRenderRoot() {
15
- return this;
16
- }
17
- updated(a) {
18
- super.updated(a);
19
- const t = this.adapter.templateData.size;
20
- t ? this.style.flex = String(t) : this.style.removeProperty("flex");
21
- }
22
- connectedCallback() {
23
- super.connectedCallback(), this.classList.add("gui-button", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
24
- this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
25
- );
26
- }
27
- render() {
28
- return h`
29
- <gui-button
30
- .uid=${this.widget.uid}
31
- .label=${this.adapter.templateData.label}
32
- ?disabled=${this.adapter.templateData.disabled === !0}
33
- .variant=${this.adapter.templateData.variant}
34
- .icon=${this.adapter.templateData.icon}
35
- .iconPosition=${this.adapter.templateData.iconPosition}
36
- @click=${() => this.adapter.click()}
37
- ></gui-button>
38
- `;
39
- }
40
- disconnectedCallback() {
41
- super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((a) => a.unsubscribe());
42
- }
43
- };
44
- c([
45
- d({ context: p.formContext }),
46
- m({ attribute: !1 })
47
- ], r.prototype, "formContext", 2);
48
- c([
49
- l({ context: p.actionContext })
50
- ], r.prototype, "adapter", 2);
51
- r = c([
52
- b("gui-button-interactive")
53
- ], r);
54
- export {
55
- r as ButtonElement
56
- };