@lmvz-ds/components 0.19.0 → 0.21.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 +16 -0
- package/assets/icons/checkmark.svg +4 -0
- package/cjs/{aria-loader-CfFuAbJn.js → aria-loader-Cec1zR2g.js} +1 -1
- package/cjs/icons-BQASWgk-.js +80 -0
- package/cjs/{index--7IqZZqn.js → index-3g9Z9sfF.js} +765 -2854
- package/cjs/index.cjs.js +4 -3
- package/cjs/lmvz-button.cjs.entry.js +3 -3
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +113 -0
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-icon.cjs.entry.js +9 -7
- package/cjs/lmvz-input.cjs.entry.js +4 -4
- package/cjs/lmvz-menuitem.cjs.entry.js +4 -4
- package/cjs/lmvz-select.cjs.entry.js +3 -3
- package/cjs/lmvz-toggle.cjs.entry.js +96 -0
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{logger-Bn2yoZGP.js → logger-DsM6xg6V.js} +3063 -833
- package/cjs/{reactive-controller-host-Bi9eu2bV.js → reactive-controller-host-BA4ZhjKA.js} +1 -1
- package/cjs/{icons-Tg7ySOh-.js → svg-BMBduILB.js} +31 -85
- package/collection/assets/icons/checkmark.svg +4 -0
- package/collection/collection-manifest.json +2 -0
- package/collection/components/lmvz-button/lmvz-button.css +1 -2
- package/collection/components/lmvz-card/lmvz-card.css +1 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +207 -0
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +424 -0
- package/collection/components/lmvz-chip/lmvz-chip.js +1 -1
- package/collection/components/lmvz-header/lmvz-header.js +1 -1
- package/collection/components/lmvz-icon/lmvz-icon.js +5 -5
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +1 -1
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +118 -0
- package/collection/components/lmvz-toggle/lmvz-toggle.js +358 -0
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/icons/icons.js +2 -13
- package/collection/utils/icons/icons.unit.js +3 -15
- package/components/index.d.ts +4 -0
- package/components/index.d.ts.bak +4 -0
- package/components/index.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.d.ts +11 -0
- package/components/lmvz-checkbox.d.ts.bak +11 -0
- package/components/lmvz-checkbox.js +1 -0
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.d.ts +11 -0
- package/components/lmvz-toggle.d.ts.bak +11 -0
- package/components/lmvz-toggle.js +1 -0
- package/components/p-0s99QfRy.js +12 -0
- package/components/{p-DbeHBSOe.js → p-BuFx0tTm.js} +1 -1
- package/components/p-CGmJG63p.js +1 -0
- package/components/p-CcxjkCOx.js +1 -0
- package/esm/{aria-loader-CES8Ae1e.js → aria-loader-BVolm0lC.js} +1 -1
- package/esm/icons-CmuFKDRz.js +75 -0
- package/esm/{index-BvxaUA12.js → index-Dh_9sN0q.js} +389 -2478
- package/esm/index.js +4 -3
- package/esm/lmvz-button.entry.js +3 -3
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +111 -0
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-icon.entry.js +9 -7
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-menuitem.entry.js +4 -4
- package/esm/lmvz-select.entry.js +3 -3
- package/esm/lmvz-toggle.entry.js +94 -0
- package/esm/loader.js +1 -1
- package/esm/{logger-0bL3pydp.js → logger-CGmJG63p.js} +2870 -765
- package/esm/{reactive-controller-host-J2thAxVH.js → reactive-controller-host-DHcPpJW7.js} +1 -1
- package/esm/{icons-Bj4dF1-I.js → svg-B2YoIRuh.js} +29 -80
- package/hydrate/index.js +2551 -165
- package/hydrate/index.mjs +2551 -165
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-ec96c6b6.entry.js → p-0f7a4236.entry.js} +1 -1
- package/lmvz-components/p-0s99QfRy.js +12 -0
- package/lmvz-components/p-2f83d7a2.entry.js +1 -0
- package/lmvz-components/{p-6e8acbd9.entry.js → p-32171f4f.entry.js} +1 -1
- package/lmvz-components/{p-9212bd23.entry.js → p-400b2318.entry.js} +1 -1
- package/lmvz-components/{p-9626e951.entry.js → p-851969bd.entry.js} +1 -1
- package/lmvz-components/p-9f9d845d.entry.js +1 -0
- package/lmvz-components/p-CFsC37ww.js +1 -0
- package/lmvz-components/p-CGmJG63p.js +1 -0
- package/lmvz-components/p-CcxjkCOx.js +1 -0
- package/lmvz-components/{p-BxHnZA0M.js → p-GdMr6Qlp.js} +1 -1
- package/lmvz-components/p-a12f95da.entry.js +1 -0
- package/lmvz-components/{p-e1b847d2.entry.js → p-ab4437dc.entry.js} +1 -1
- package/lmvz-components/p-c3b7890d.entry.js +1 -0
- package/lmvz-components/{p-7a6bec13.entry.js → p-d0a0e206.entry.js} +1 -1
- package/lmvz-components/{p-DYaffOLo.js → p-dhVSUYqd.js} +1 -1
- package/manifest.json +833 -77
- package/package.json +9 -1
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +39 -0
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +31 -0
- package/types/components.d.ts +270 -0
- package/types/utils/icons/icons.d.ts +0 -1
- package/components/p-DXOTa5VF.js +0 -12
- package/components/p-fiRXhuXK.js +0 -1
- package/lmvz-components/p-0bL3pydp.js +0 -1
- package/lmvz-components/p-40569208.entry.js +0 -1
- package/lmvz-components/p-49ab22bd.entry.js +0 -1
- package/lmvz-components/p-Bu4Z_PMf.js +0 -1
- package/lmvz-components/p-DHZwxmLb.js +0 -12
|
@@ -0,0 +1,358 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
|
|
3
|
+
import { componentOnReady } from "../../utils/component";
|
|
4
|
+
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
|
|
5
|
+
let toggleIdCounter = 0;
|
|
6
|
+
export class LmvzToggle extends ReactiveControllerHost {
|
|
7
|
+
el;
|
|
8
|
+
get validationEl() {
|
|
9
|
+
return this.el;
|
|
10
|
+
}
|
|
11
|
+
internals;
|
|
12
|
+
nativeInputElement;
|
|
13
|
+
toggleId = `lmvz-toggle-${toggleIdCounter++}`;
|
|
14
|
+
lmvzChange;
|
|
15
|
+
label;
|
|
16
|
+
checked = false;
|
|
17
|
+
disabled = false;
|
|
18
|
+
required = false;
|
|
19
|
+
name;
|
|
20
|
+
value = 'on';
|
|
21
|
+
form;
|
|
22
|
+
constructor() {
|
|
23
|
+
super();
|
|
24
|
+
this.addController(new AriaValidationController(this));
|
|
25
|
+
}
|
|
26
|
+
formAssociatedCallback(_form) {
|
|
27
|
+
this.internals.setFormValue?.(this.checked ? this.value : null);
|
|
28
|
+
}
|
|
29
|
+
formResetCallback() {
|
|
30
|
+
this.checked = false;
|
|
31
|
+
}
|
|
32
|
+
formStateRestoreCallback(state) {
|
|
33
|
+
this.checked = state === this.value;
|
|
34
|
+
this.internals.setFormValue?.(this.checked ? this.value : null);
|
|
35
|
+
}
|
|
36
|
+
handleCheckedChange(checked) {
|
|
37
|
+
this.internals.setFormValue?.(checked ? this.value : null);
|
|
38
|
+
}
|
|
39
|
+
handleDisabledChange(disabled) {
|
|
40
|
+
if (disabled && this.nativeInputElement) {
|
|
41
|
+
this.nativeInputElement.blur();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
async focusToggle() {
|
|
45
|
+
this.nativeInputElement?.focus();
|
|
46
|
+
}
|
|
47
|
+
async blurToggle() {
|
|
48
|
+
this.nativeInputElement?.blur();
|
|
49
|
+
}
|
|
50
|
+
async checkValidity() {
|
|
51
|
+
return this.nativeInputElement?.checkValidity?.() ?? false;
|
|
52
|
+
}
|
|
53
|
+
async reportValidity() {
|
|
54
|
+
return this.nativeInputElement?.reportValidity?.() ?? false;
|
|
55
|
+
}
|
|
56
|
+
async getInputElement() {
|
|
57
|
+
if (!this.nativeInputElement) {
|
|
58
|
+
await new Promise((resolve) => componentOnReady(this.el, resolve));
|
|
59
|
+
}
|
|
60
|
+
return Promise.resolve(this.nativeInputElement);
|
|
61
|
+
}
|
|
62
|
+
handleChange = (event) => {
|
|
63
|
+
const newChecked = event.target.checked;
|
|
64
|
+
this.checked = newChecked;
|
|
65
|
+
this.lmvzChange.emit(newChecked);
|
|
66
|
+
};
|
|
67
|
+
render() {
|
|
68
|
+
return (h(Host, { key: '0a0f0e278a0ccd6739e7e9e82267c047efad74ad' }, h("span", { key: 'da93a2dd256c72171e7a423223a3738d6ca13ebb', class: "track" }, h("input", { key: '6e90ec39ec856fa38097e6224c7fed50b23088e5', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '8fca08269e216b9a2840e7707fa5562220f8b36c', class: "thumb", "aria-hidden": "true" })), h("label", { key: 'f0a0842fef8c9fa3981b6d8c373a79fe0c33fad3', htmlFor: this.toggleId }, this.label)));
|
|
69
|
+
}
|
|
70
|
+
static get is() { return "lmvz-toggle"; }
|
|
71
|
+
static get encapsulation() { return "scoped"; }
|
|
72
|
+
static get formAssociated() { return true; }
|
|
73
|
+
static get originalStyleUrls() {
|
|
74
|
+
return {
|
|
75
|
+
"$": ["./lmvz-toggle.css"]
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
static get styleUrls() {
|
|
79
|
+
return {
|
|
80
|
+
"$": ["lmvz-toggle.css"]
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
static get properties() {
|
|
84
|
+
return {
|
|
85
|
+
"label": {
|
|
86
|
+
"type": "string",
|
|
87
|
+
"mutable": false,
|
|
88
|
+
"complexType": {
|
|
89
|
+
"original": "string",
|
|
90
|
+
"resolved": "string",
|
|
91
|
+
"references": {}
|
|
92
|
+
},
|
|
93
|
+
"required": true,
|
|
94
|
+
"optional": false,
|
|
95
|
+
"docs": {
|
|
96
|
+
"tags": [],
|
|
97
|
+
"text": "Label text for the toggle"
|
|
98
|
+
},
|
|
99
|
+
"getter": false,
|
|
100
|
+
"setter": false,
|
|
101
|
+
"reflect": false,
|
|
102
|
+
"attribute": "label"
|
|
103
|
+
},
|
|
104
|
+
"checked": {
|
|
105
|
+
"type": "boolean",
|
|
106
|
+
"mutable": true,
|
|
107
|
+
"complexType": {
|
|
108
|
+
"original": "boolean",
|
|
109
|
+
"resolved": "boolean",
|
|
110
|
+
"references": {}
|
|
111
|
+
},
|
|
112
|
+
"required": false,
|
|
113
|
+
"optional": false,
|
|
114
|
+
"docs": {
|
|
115
|
+
"tags": [{
|
|
116
|
+
"name": "default",
|
|
117
|
+
"text": "false"
|
|
118
|
+
}],
|
|
119
|
+
"text": "Whether the toggle is checked"
|
|
120
|
+
},
|
|
121
|
+
"getter": false,
|
|
122
|
+
"setter": false,
|
|
123
|
+
"reflect": true,
|
|
124
|
+
"attribute": "checked",
|
|
125
|
+
"defaultValue": "false"
|
|
126
|
+
},
|
|
127
|
+
"disabled": {
|
|
128
|
+
"type": "boolean",
|
|
129
|
+
"mutable": false,
|
|
130
|
+
"complexType": {
|
|
131
|
+
"original": "boolean",
|
|
132
|
+
"resolved": "boolean",
|
|
133
|
+
"references": {}
|
|
134
|
+
},
|
|
135
|
+
"required": false,
|
|
136
|
+
"optional": false,
|
|
137
|
+
"docs": {
|
|
138
|
+
"tags": [{
|
|
139
|
+
"name": "default",
|
|
140
|
+
"text": "false"
|
|
141
|
+
}],
|
|
142
|
+
"text": "Whether the toggle is disabled"
|
|
143
|
+
},
|
|
144
|
+
"getter": false,
|
|
145
|
+
"setter": false,
|
|
146
|
+
"reflect": true,
|
|
147
|
+
"attribute": "disabled",
|
|
148
|
+
"defaultValue": "false"
|
|
149
|
+
},
|
|
150
|
+
"required": {
|
|
151
|
+
"type": "boolean",
|
|
152
|
+
"mutable": false,
|
|
153
|
+
"complexType": {
|
|
154
|
+
"original": "boolean",
|
|
155
|
+
"resolved": "boolean",
|
|
156
|
+
"references": {}
|
|
157
|
+
},
|
|
158
|
+
"required": false,
|
|
159
|
+
"optional": false,
|
|
160
|
+
"docs": {
|
|
161
|
+
"tags": [{
|
|
162
|
+
"name": "default",
|
|
163
|
+
"text": "false"
|
|
164
|
+
}],
|
|
165
|
+
"text": "Whether the toggle is required"
|
|
166
|
+
},
|
|
167
|
+
"getter": false,
|
|
168
|
+
"setter": false,
|
|
169
|
+
"reflect": true,
|
|
170
|
+
"attribute": "required",
|
|
171
|
+
"defaultValue": "false"
|
|
172
|
+
},
|
|
173
|
+
"name": {
|
|
174
|
+
"type": "string",
|
|
175
|
+
"mutable": false,
|
|
176
|
+
"complexType": {
|
|
177
|
+
"original": "string",
|
|
178
|
+
"resolved": "string | undefined",
|
|
179
|
+
"references": {}
|
|
180
|
+
},
|
|
181
|
+
"required": false,
|
|
182
|
+
"optional": true,
|
|
183
|
+
"docs": {
|
|
184
|
+
"tags": [],
|
|
185
|
+
"text": "Name attribute for form integration"
|
|
186
|
+
},
|
|
187
|
+
"getter": false,
|
|
188
|
+
"setter": false,
|
|
189
|
+
"reflect": false,
|
|
190
|
+
"attribute": "name"
|
|
191
|
+
},
|
|
192
|
+
"value": {
|
|
193
|
+
"type": "string",
|
|
194
|
+
"mutable": false,
|
|
195
|
+
"complexType": {
|
|
196
|
+
"original": "string",
|
|
197
|
+
"resolved": "string",
|
|
198
|
+
"references": {}
|
|
199
|
+
},
|
|
200
|
+
"required": false,
|
|
201
|
+
"optional": false,
|
|
202
|
+
"docs": {
|
|
203
|
+
"tags": [{
|
|
204
|
+
"name": "default",
|
|
205
|
+
"text": "'on'"
|
|
206
|
+
}],
|
|
207
|
+
"text": "Value submitted with the form when checked"
|
|
208
|
+
},
|
|
209
|
+
"getter": false,
|
|
210
|
+
"setter": false,
|
|
211
|
+
"reflect": false,
|
|
212
|
+
"attribute": "value",
|
|
213
|
+
"defaultValue": "'on'"
|
|
214
|
+
},
|
|
215
|
+
"form": {
|
|
216
|
+
"type": "string",
|
|
217
|
+
"mutable": false,
|
|
218
|
+
"complexType": {
|
|
219
|
+
"original": "string",
|
|
220
|
+
"resolved": "string | undefined",
|
|
221
|
+
"references": {}
|
|
222
|
+
},
|
|
223
|
+
"required": false,
|
|
224
|
+
"optional": true,
|
|
225
|
+
"docs": {
|
|
226
|
+
"tags": [],
|
|
227
|
+
"text": "Form id to associate with"
|
|
228
|
+
},
|
|
229
|
+
"getter": false,
|
|
230
|
+
"setter": false,
|
|
231
|
+
"reflect": false,
|
|
232
|
+
"attribute": "form"
|
|
233
|
+
}
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
static get events() {
|
|
237
|
+
return [{
|
|
238
|
+
"method": "lmvzChange",
|
|
239
|
+
"name": "lmvzChange",
|
|
240
|
+
"bubbles": true,
|
|
241
|
+
"cancelable": true,
|
|
242
|
+
"composed": true,
|
|
243
|
+
"docs": {
|
|
244
|
+
"tags": [],
|
|
245
|
+
"text": "Emitted when the toggle is switched. Event detail is the new checked state."
|
|
246
|
+
},
|
|
247
|
+
"complexType": {
|
|
248
|
+
"original": "boolean",
|
|
249
|
+
"resolved": "boolean",
|
|
250
|
+
"references": {}
|
|
251
|
+
}
|
|
252
|
+
}];
|
|
253
|
+
}
|
|
254
|
+
static get methods() {
|
|
255
|
+
return {
|
|
256
|
+
"focusToggle": {
|
|
257
|
+
"complexType": {
|
|
258
|
+
"signature": "() => Promise<void>",
|
|
259
|
+
"parameters": [],
|
|
260
|
+
"references": {
|
|
261
|
+
"Promise": {
|
|
262
|
+
"location": "global",
|
|
263
|
+
"id": "global::Promise"
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
"return": "Promise<void>"
|
|
267
|
+
},
|
|
268
|
+
"docs": {
|
|
269
|
+
"text": "Sets focus on the toggle",
|
|
270
|
+
"tags": []
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
"blurToggle": {
|
|
274
|
+
"complexType": {
|
|
275
|
+
"signature": "() => Promise<void>",
|
|
276
|
+
"parameters": [],
|
|
277
|
+
"references": {
|
|
278
|
+
"Promise": {
|
|
279
|
+
"location": "global",
|
|
280
|
+
"id": "global::Promise"
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
"return": "Promise<void>"
|
|
284
|
+
},
|
|
285
|
+
"docs": {
|
|
286
|
+
"text": "Removes focus from the toggle",
|
|
287
|
+
"tags": []
|
|
288
|
+
}
|
|
289
|
+
},
|
|
290
|
+
"checkValidity": {
|
|
291
|
+
"complexType": {
|
|
292
|
+
"signature": "() => Promise<boolean>",
|
|
293
|
+
"parameters": [],
|
|
294
|
+
"references": {
|
|
295
|
+
"Promise": {
|
|
296
|
+
"location": "global",
|
|
297
|
+
"id": "global::Promise"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"return": "Promise<boolean>"
|
|
301
|
+
},
|
|
302
|
+
"docs": {
|
|
303
|
+
"text": "Returns whether the toggle satisfies its validation constraints",
|
|
304
|
+
"tags": []
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
"reportValidity": {
|
|
308
|
+
"complexType": {
|
|
309
|
+
"signature": "() => Promise<boolean>",
|
|
310
|
+
"parameters": [],
|
|
311
|
+
"references": {
|
|
312
|
+
"Promise": {
|
|
313
|
+
"location": "global",
|
|
314
|
+
"id": "global::Promise"
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
"return": "Promise<boolean>"
|
|
318
|
+
},
|
|
319
|
+
"docs": {
|
|
320
|
+
"text": "Reports validation errors to the user",
|
|
321
|
+
"tags": []
|
|
322
|
+
}
|
|
323
|
+
},
|
|
324
|
+
"getInputElement": {
|
|
325
|
+
"complexType": {
|
|
326
|
+
"signature": "() => Promise<HTMLInputElement | undefined>",
|
|
327
|
+
"parameters": [],
|
|
328
|
+
"references": {
|
|
329
|
+
"Promise": {
|
|
330
|
+
"location": "global",
|
|
331
|
+
"id": "global::Promise"
|
|
332
|
+
},
|
|
333
|
+
"HTMLInputElement": {
|
|
334
|
+
"location": "global",
|
|
335
|
+
"id": "global::HTMLInputElement"
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
"return": "Promise<HTMLInputElement | undefined>"
|
|
339
|
+
},
|
|
340
|
+
"docs": {
|
|
341
|
+
"text": "Returns the native HTMLInputElement.\n\nPromise resolves when the element is ready and the input is available.",
|
|
342
|
+
"tags": []
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
};
|
|
346
|
+
}
|
|
347
|
+
static get elementRef() { return "el"; }
|
|
348
|
+
static get watchers() {
|
|
349
|
+
return [{
|
|
350
|
+
"propName": "checked",
|
|
351
|
+
"methodName": "handleCheckedChange"
|
|
352
|
+
}, {
|
|
353
|
+
"propName": "disabled",
|
|
354
|
+
"methodName": "handleDisabledChange"
|
|
355
|
+
}];
|
|
356
|
+
}
|
|
357
|
+
static get attachInternalsMemberName() { return "internals"; }
|
|
358
|
+
}
|
|
@@ -20,7 +20,7 @@ export class HeaderIntegration {
|
|
|
20
20
|
this.activeNav = navId;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '591e69a796357032fdefd54e81977cb6b818b653' }, h("lmvz-header", { key: 'bfc51bdc2979100082f210ad020ad3884837a1e7', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '808ee90cc2dbcaf59b1490ac4d59f0b8d445dace', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '08e8f747bae27ab19e58c44a28d3661ea4a019f6', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '5419724b8b29543206c33716bdd38edbb9e0ef25', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '04ea3fe11c3f64a1d023b71b496c44e8b6b4662b', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '4a0dc144d0e429d21fa8817973d5882aac6f11bb', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'b5e34ca29bb787409f1ff2d73e150e1f47e32afb', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '53ffb0fa8d8bcd35c5860d1594ec23edd4b64102', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '7959e991e4414173530efa34b2e12cb402a1c866', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '572a57ebfb71241913aa77c63ac21117aa66800a', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '758cc39b1cf02168a11090f393d51e18a36b0d01', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '47e14b75d64977fb871c907e199d37e5695c8d2d', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '19c4ca2458449afa9eeceb5b8aea972f85b9be0a', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '272b2252ae3890f09b7c380579f856990c8167a9', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'c32fa138419eec95caabfcffbc22cc6e25b24559', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "header-integration"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,16 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Micro } from "effect";
|
|
1
|
+
import { emptyDefaultSvg, toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
|
|
3
2
|
import { getRegisteredIconProvider } from "./icons-registry";
|
|
4
|
-
export const emptyDefaultSvg = () => SVGFactory(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`);
|
|
5
|
-
async function toValidSvgStringWithFallback(value) {
|
|
6
|
-
try {
|
|
7
|
-
return await Micro.runPromise(createValidSVGString(value));
|
|
8
|
-
}
|
|
9
|
-
catch {
|
|
10
|
-
console.error('Invalid SVG string:', value);
|
|
11
|
-
return emptyDefaultSvg();
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
3
|
export async function resolveIconSvg(options) {
|
|
15
4
|
const { icon, iconset } = options;
|
|
16
5
|
const iconSvg = await (async () => {
|
|
@@ -25,7 +14,7 @@ export async function resolveIconSvg(options) {
|
|
|
25
14
|
console.warn(`Icon "${icon}"${iconset ? ` from set "${iconset}"` : ''} not found in provider. Using default icon.`);
|
|
26
15
|
return;
|
|
27
16
|
}
|
|
28
|
-
const validated =
|
|
17
|
+
const validated = toValidSvgStringWithFallback(resolved.svg);
|
|
29
18
|
if (validated) {
|
|
30
19
|
return validated;
|
|
31
20
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { SVGString } from "@lmvz-ds/lib-ts/validation/svg.js";
|
|
1
|
+
import { emptyDefaultSvg, SVGString } from "@lmvz-ds/lib-ts/validation/svg.js";
|
|
2
2
|
import { beforeAll, beforeEach, describe, expect, test, vi } from "@stencil/vitest";
|
|
3
|
-
import {
|
|
3
|
+
import { resolveIconSvg } from "./icons";
|
|
4
4
|
import { registerIconProvider } from "./icons-registry";
|
|
5
5
|
const fetchMock = vi.fn();
|
|
6
6
|
describe('icon utils:', () => {
|
|
@@ -20,18 +20,6 @@ describe('icon utils:', () => {
|
|
|
20
20
|
fetchMock.mockReset();
|
|
21
21
|
vi.stubGlobal('fetch', fetchMock);
|
|
22
22
|
});
|
|
23
|
-
const validSvg = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>';
|
|
24
|
-
const invalidSvg = '<div>not an svg</div>';
|
|
25
|
-
test('SVGString branding enforces valid SVG', () => {
|
|
26
|
-
expect(() => SVGString(validSvg)).not.toThrow();
|
|
27
|
-
expect(() => SVGString(invalidSvg)).toThrow();
|
|
28
|
-
expect(() => SVGString('')).toThrow();
|
|
29
|
-
expect(() => SVGString(123)).toThrow();
|
|
30
|
-
});
|
|
31
|
-
test('emptyDefaultSvg is a valid branded SVGString', () => {
|
|
32
|
-
expect(() => SVGString(emptyDefaultSvg())).not.toThrow();
|
|
33
|
-
expect(emptyDefaultSvg()).toContain('<svg');
|
|
34
|
-
});
|
|
35
23
|
test('resolveIconSvg fails loading "book" with no iconset/provider and falls back to default', async () => {
|
|
36
24
|
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
|
|
37
25
|
const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
|
|
@@ -46,7 +34,7 @@ describe('icon utils:', () => {
|
|
|
46
34
|
registerIconProvider('test-set-success', {
|
|
47
35
|
resolve(name) {
|
|
48
36
|
if (name === 'test-icon') {
|
|
49
|
-
return { name, svg:
|
|
37
|
+
return { name, svg: emptyDefaultSvg() };
|
|
50
38
|
}
|
|
51
39
|
return undefined;
|
|
52
40
|
},
|
package/components/index.d.ts
CHANGED
|
@@ -5,6 +5,8 @@ export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmv
|
|
|
5
5
|
export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
|
|
6
6
|
export { LmvzCard as LmvzCard } from '../../types/components/lmvz-card/lmvz-card';
|
|
7
7
|
export { defineCustomElement as defineCustomElementLmvzCard } from './lmvz-card';
|
|
8
|
+
export { LmvzCheckbox as LmvzCheckbox } from '../../types/components/lmvz-checkbox/lmvz-checkbox';
|
|
9
|
+
export { defineCustomElement as defineCustomElementLmvzCheckbox } from './lmvz-checkbox';
|
|
8
10
|
export { LmvzChip as LmvzChip } from '../../types/components/lmvz-chip/lmvz-chip';
|
|
9
11
|
export { defineCustomElement as defineCustomElementLmvzChip } from './lmvz-chip';
|
|
10
12
|
export { LmvzHeader as LmvzHeader } from '../../types/components/lmvz-header/lmvz-header';
|
|
@@ -17,6 +19,8 @@ export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuit
|
|
|
17
19
|
export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
|
|
18
20
|
export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmvz-select';
|
|
19
21
|
export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
|
|
22
|
+
export { LmvzToggle as LmvzToggle } from '../../types/components/lmvz-toggle/lmvz-toggle';
|
|
23
|
+
export { defineCustomElement as defineCustomElementLmvzToggle } from './lmvz-toggle';
|
|
20
24
|
|
|
21
25
|
/**
|
|
22
26
|
* Get the base path to where the assets can be found. Use "setAssetPath(path)"
|
|
@@ -5,6 +5,8 @@ export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmv
|
|
|
5
5
|
export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
|
|
6
6
|
export { LmvzCard as LmvzCard } from '../../types/components/lmvz-card/lmvz-card';
|
|
7
7
|
export { defineCustomElement as defineCustomElementLmvzCard } from './lmvz-card';
|
|
8
|
+
export { LmvzCheckbox as LmvzCheckbox } from '../../types/components/lmvz-checkbox/lmvz-checkbox';
|
|
9
|
+
export { defineCustomElement as defineCustomElementLmvzCheckbox } from './lmvz-checkbox';
|
|
8
10
|
export { LmvzChip as LmvzChip } from '../../types/components/lmvz-chip/lmvz-chip';
|
|
9
11
|
export { defineCustomElement as defineCustomElementLmvzChip } from './lmvz-chip';
|
|
10
12
|
export { LmvzHeader as LmvzHeader } from '../../types/components/lmvz-header/lmvz-header';
|
|
@@ -17,6 +19,8 @@ export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuit
|
|
|
17
19
|
export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
|
|
18
20
|
export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmvz-select';
|
|
19
21
|
export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
|
|
22
|
+
export { LmvzToggle as LmvzToggle } from '../../types/components/lmvz-toggle/lmvz-toggle';
|
|
23
|
+
export { defineCustomElement as defineCustomElementLmvzToggle } from './lmvz-toggle';
|
|
20
24
|
|
|
21
25
|
/**
|
|
22
26
|
* Get the base path to where the assets can be found. Use "setAssetPath(path)"
|
package/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-C_bScbrd.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-C_bScbrd.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-BuFx0tTm.js";export{LmvzChip,c as chipSizes,a as chipTypes,defineCustomElement as defineCustomElementLmvzChip,i as iconSizes,b as iconWeights,d as inputTypes,t as textSizes}from"./lmvz-chip.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon,g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./lmvz-icon.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,c as o,h as e,d as r,t as n}from"./p-C_bScbrd.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,a as m}from"./p-
|
|
1
|
+
import{p as t,c as o,h as e,d as r,t as n}from"./p-C_bScbrd.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,a as m}from"./p-BuFx0tTm.js";import{E as i}from"./p-CN0JX9-m.js";import{i as s,f as d}from"./p-DIrAQ4IB.js";const c=t(class extends l{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant="secondary";disabled=!1;type="button";form;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation"),this.addController(new m(this)),this.addController(new i(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=s(this.el),super.connectedCallback()}renderHiddenButton(){const t=this.formEl=d(this.form,this.el);if(!t)return;const{formButtonEl:o}=this;if(null!==o&&t.contains(o))return;const e=this.formButtonEl=document.createElement("button");e.type="submit",e.style.display="none",e.disabled=this.disabled,t.appendChild(e)}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),e(r,{key:"ce82e749ffb9172a9421d303e0d7cc02de58dff9","aria-disabled":this.disabled?"true":null},e("button",{key:"acd0773f72e76139ec5495eb15fc3a5949029e40",ref:t=>this.validationEl=t,disabled:this.disabled,class:a(this.variant,{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"f519e0f82e68811a8831214e83e609bd9501fed0"})))}static get delegatesFocus(){return!0}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: contents; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1]}]),v=c,u=function(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))};export{v as LmvzButton,u as defineCustomElement}
|
package/components/lmvz-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as e,p as r,H as t,c as a,h as o,d as n,t as l}from"./p-C_bScbrd.js";const m=r(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.primaryAction=a(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((r,t)=>{const a=function(...e){return e.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",t,r);try{return e(a)}catch{return console.warn(`Failed to create URL for asset "${r}" in path "${t}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(a,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){return o(n,{key:"46c2832b4f90b9eb222749632bc7ad59cd645e10",role:"article"},o("div",{key:"cc387fe96cff2dd04c24f75cf838a2bf6f438279",class:"top"},o("div",{key:"f9a54a5f81378ef4265e1d74c36c78af002e8874",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},o("div",{key:"76daed00408f7ae9ee46977637ddcd3d4f846380",class:"chip-slot"},o("slot",{key:"6ad522ef7428166b876d0218ef8d801c4ef337f1",name:"chip"})))),o("div",{key:"9c9799668ac199cfecbe10061e271d70d70e2d07",class:"bottom"},o("header",{key:"1bec743235bea5c7ab163225ffbd7bc6cf11f754"},o("h2",{key:"06f8e14153328bc5ca920e71e09d9343047c440c",class:"title"},this.cardTitle)),o("p",{key:"86b95db4e6464ca3236b4a03798013c3580819bf",class:"description"},this.description),o("div",{key:"553dc998d5318a4730196baa0b9baff3a0a3369f",class:"actions"},o("button",{key:"7532d01b46769198c23a1b1015c187fdefce146a",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),o("button",{key:"633d679ae59b1896aa2a06e04b4564569cf27a7d",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},o("span",{key:"b72c45f93d259502b9d7c5ffb19e292a53c60ec6",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),c=m,i=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((e=>{"lmvz-card"===e&&(customElements.get(l(e))||customElements.define(l(e),m))}))};export{c as LmvzCard,i as defineCustomElement}
|
|
1
|
+
import{g as e,p as r,H as t,c as a,h as o,d as n,t as l}from"./p-C_bScbrd.js";const m=r(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.primaryAction=a(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((r,t)=>{const a=function(...e){return e.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",t,r);try{return e(a)}catch{return console.warn(`Failed to create URL for asset "${r}" in path "${t}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(a,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){return o(n,{key:"46c2832b4f90b9eb222749632bc7ad59cd645e10",role:"article"},o("div",{key:"cc387fe96cff2dd04c24f75cf838a2bf6f438279",class:"top"},o("div",{key:"f9a54a5f81378ef4265e1d74c36c78af002e8874",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},o("div",{key:"76daed00408f7ae9ee46977637ddcd3d4f846380",class:"chip-slot"},o("slot",{key:"6ad522ef7428166b876d0218ef8d801c4ef337f1",name:"chip"})))),o("div",{key:"9c9799668ac199cfecbe10061e271d70d70e2d07",class:"bottom"},o("header",{key:"1bec743235bea5c7ab163225ffbd7bc6cf11f754"},o("h2",{key:"06f8e14153328bc5ca920e71e09d9343047c440c",class:"title"},this.cardTitle)),o("p",{key:"86b95db4e6464ca3236b4a03798013c3580819bf",class:"description"},this.description),o("div",{key:"553dc998d5318a4730196baa0b9baff3a0a3369f",class:"actions"},o("button",{key:"7532d01b46769198c23a1b1015c187fdefce146a",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),o("button",{key:"633d679ae59b1896aa2a06e04b4564569cf27a7d",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},o("span",{key:"b72c45f93d259502b9d7c5ffb19e292a53c60ec6",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),c=m,i=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((e=>{"lmvz-card"===e&&(customElements.get(l(e))||customElements.define(l(e),m))}))};export{c as LmvzCard,i as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../../types/components";
|
|
2
|
+
|
|
3
|
+
interface LmvzCheckbox extends Components.LmvzCheckbox, HTMLElement {}
|
|
4
|
+
export const LmvzCheckbox: {
|
|
5
|
+
prototype: LmvzCheckbox;
|
|
6
|
+
new (): LmvzCheckbox;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../../types/components";
|
|
2
|
+
|
|
3
|
+
interface LmvzCheckbox extends Components.LmvzCheckbox, HTMLElement {}
|
|
4
|
+
export const LmvzCheckbox: {
|
|
5
|
+
prototype: LmvzCheckbox;
|
|
6
|
+
new (): LmvzCheckbox;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as e,c as o,h as c,d as r,t as a}from"./p-C_bScbrd.js";import{t}from"./p-CcxjkCOx.js";import{R as l,a as s}from"./p-BuFx0tTm.js";const i=t("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPgogICAgPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+");let h=0;const n=e(class extends l{get el(){return this}get validationEl(){return this.el}internals;nativeInput;checkboxId="lmvz-checkbox-"+h++;initialChecked=!1;get helperId(){return this.helperText?this.checkboxId+"-helper":void 0}get errorId(){return this.errorMessage?this.checkboxId+"-error":void 0}get ariaDescribedBy(){const e=[this.errorId,this.helperId].filter(Boolean);return e.length>0?e.join(" "):void 0}label;checked=!1;value="on";name;disabled=!1;required=!1;error=!1;errorMessage;helperText;form;autofocus=!1;checkedState=!1;handleCheckedChange(e){this.checkedState=e,this.internals.setFormValue?.(e?this.value??"on":null)}lmvzChange;async focusInput(){this.nativeInput?.focus()}async checkValidity(){return this.internals?.checkValidity()??!0}async reportValidity(){return this.internals?.reportValidity()??!0}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzChange=o(this,"lmvzChange"),this.internals=this.attachInternals(),this.addController(new s(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialChecked=this.checked,this.checkedState=this.checked,this.internals.setFormValue?.(this.checked?this.value??"on":null),super.componentWillLoad()}componentWillRender(){this.error&&!this.errorMessage&&console.warn("lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users."),super.componentWillRender()}formAssociatedCallback(){this.internals.setFormValue?.(this.checked?this.value??"on":null)}formResetCallback(){this.checked=this.initialChecked}formStateRestoreCallback(e){this.checked=e===(this.value??"on")}handleChange=e=>{this.checked=e.target.checked,this.lmvzChange.emit(this.checked)};render(){return c(r,{key:"6014c885305bc9824f7a6d4f0ba8c642125f3a5b"},c("div",{key:"cbc6de2b684acfb00b77a366e707d73de74a0b8a",class:"pill"},c("input",{key:"5b442512b6cab2e60a1d62fd40e4c868b1bf87ac",type:"checkbox",id:this.checkboxId,checked:this.checkedState,disabled:this.disabled,required:this.required,"aria-required":this.required?"true":"false","aria-invalid":this.error?"true":"false","aria-describedby":this.ariaDescribedBy,"aria-errormessage":this.error&&this.errorId?this.errorId:void 0,ref:e=>this.nativeInput=e,onChange:this.handleChange,autoFocus:this.autofocus}),c("span",{key:"09c534b7c5642c620129ea05a4468bd584c56ce7",class:"box","aria-hidden":"true"},this.checkedState&&c("span",{key:"eaa49e1a60054f8efc62ade0446a4704f0bb46e9",class:"indicator",innerHTML:i})),c("span",{key:"8fb836d71cbb3d4eadaf67284f5bb52906549275",class:"content"},c("label",{key:"8df862f11e9885158264908fdac6599f21ecba07",htmlFor:this.checkboxId},this.label),this.helperText&&c("span",{key:"1e45e6177774e937311cddacd1a3d3379c9c6af5",class:"helper-text",id:this.helperId,role:"status"},this.helperText))),this.errorMessage&&c("span",{key:"83fc1f7cd6828973e52ef27604f12f94f41d7f4b",class:"error-text",id:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f1f9fe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } [disabled].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { cursor: not-allowed; } [disabled].sc-lmvz-checkbox-h input.sc-lmvz-checkbox { cursor: not-allowed; } input.sc-lmvz-checkbox:focus-visible ~ .box.sc-lmvz-checkbox { outline: 2px solid var(--checkbox-focus-color); outline-offset: 2px; box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) 0 var(--lmvz-semantic-shadow-l1-1-blur, 4px) var(--lmvz-semantic-color-shadow-l1-colored, rgba(175, 223, 249, 0.42)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } input.sc-lmvz-checkbox:focus-visible ~ .box.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }"}},[578,"lmvz-checkbox",{label:[1],checked:[1540],value:[1],name:[1],disabled:[516],required:[516],error:[516],errorMessage:[1,"error-message"],helperText:[1,"helper-text"],form:[1],autofocus:[4],checkedState:[32],focusInput:[64],checkValidity:[64],reportValidity:[64]},void 0,{checked:[{handleCheckedChange:0}]}]),b=n,d=function(){"undefined"!=typeof customElements&&["lmvz-checkbox"].forEach((e=>{"lmvz-checkbox"===e&&(customElements.get(a(e))||customElements.define(a(e),n))}))};export{b as LmvzCheckbox,d as defineCustomElement}
|