@lmvz-ds/components 0.36.0 → 0.37.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 +10 -0
- package/cjs/aria.constants-DPK5mQEL.js +65 -0
- package/cjs/{stencil.util-TjS8_DoU.js → async.util-Dnl6c82X.js} +1 -13
- package/cjs/{directional-focus-controller-3uDoin45.js → directional-focus-controller-8Xd_7MHT.js} +1 -1
- package/cjs/{element-activation-controller-BWtUKzu2.js → element-activation-controller-DzTUocEO.js} +1 -1
- package/cjs/{element.util-CctmBvUY.js → element.util-BlhcwmfR.js} +2 -62
- package/cjs/lmvz-action-list.cjs.entry.js +4 -3
- package/cjs/lmvz-button-group.cjs.entry.js +2 -1
- package/cjs/lmvz-button_2.cjs.entry.js +4 -3
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +38 -4
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-datepicker.cjs.entry.js +10 -3
- package/cjs/lmvz-header_2.cjs.entry.js +4 -3
- package/cjs/lmvz-input.cjs.entry.js +242 -0
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
- package/cjs/lmvz-modal.cjs.entry.js +3 -2
- package/cjs/{lmvz-input_2.cjs.entry.js → lmvz-popover.cjs.entry.js} +24 -228
- package/cjs/lmvz-radio.cjs.entry.js +61 -3
- package/cjs/lmvz-select.cjs.entry.js +423 -16
- package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
- package/cjs/lmvz-spinner.cjs.entry.js +1 -1
- package/cjs/lmvz-tab.cjs.entry.js +2 -2
- package/cjs/lmvz-tabs.cjs.entry.js +5 -4
- package/cjs/lmvz-toggle.cjs.entry.js +7 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/stencil.util-CBrPLd-F.js +17 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.css +11 -0
- package/collection/components/lmvz-button/lmvz-button.css +11 -0
- package/collection/components/lmvz-card/lmvz-card.css +11 -0
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +4 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +68 -8
- package/collection/components/lmvz-datepicker/lmvz-datepicker.css +0 -5
- package/collection/components/lmvz-datepicker/lmvz-datepicker.js +17 -3
- package/collection/components/lmvz-input/lmvz-input.css +1 -1
- package/collection/components/lmvz-input/lmvz-input.js +47 -12
- package/collection/components/lmvz-modal/lmvz-modal.css +11 -0
- package/collection/components/lmvz-popover/lmvz-popover.css +1 -1
- package/collection/components/lmvz-popover/lmvz-popover.js +45 -5
- package/collection/components/lmvz-radio/lmvz-radio.js +77 -9
- package/collection/components/lmvz-select/lmvz-select.css +96 -34
- package/collection/components/lmvz-select/lmvz-select.js +412 -21
- package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
- package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
- package/collection/components/lmvz-tab/lmvz-tab.css +11 -0
- package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.css +11 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.js +21 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/styles/fragments/_focus-within.css +2 -2
- package/collection/utils/aria/listbox-controller.js +154 -0
- package/collection/utils/radio/radio-group-controller.js +17 -0
- package/components/lmvz-action-list.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-datepicker.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-popover.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-spinner.js +1 -1
- package/components/lmvz-tab.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-BApwCp0R.js +1 -0
- package/components/p-C5gRiLRR.js +1 -0
- package/components/p-DiRcp9V6.js +1 -0
- package/esm/aria.constants-DIyiticz.js +62 -0
- package/esm/{stencil.util-C3QOYC8E.js → async.util-DZj20TV1.js} +1 -13
- package/esm/{directional-focus-controller-Bhu7RqYE.js → directional-focus-controller-QukTTWBE.js} +1 -1
- package/esm/{element-activation-controller-BuwyVq4A.js → element-activation-controller-dxJZKMag.js} +1 -1
- package/esm/{element.util-Bd9JyKJZ.js → element.util-3ydVsxUW.js} +2 -61
- package/esm/lmvz-action-list.entry.js +4 -3
- package/esm/lmvz-button-group.entry.js +2 -1
- package/esm/lmvz-button_2.entry.js +4 -3
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +38 -4
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-datepicker.entry.js +10 -3
- package/esm/lmvz-header_2.entry.js +4 -3
- package/esm/lmvz-input.entry.js +240 -0
- package/esm/lmvz-menuitem.entry.js +3 -2
- package/esm/lmvz-modal.entry.js +3 -2
- package/esm/{lmvz-input_2.entry.js → lmvz-popover.entry.js} +23 -226
- package/esm/lmvz-radio.entry.js +61 -3
- package/esm/lmvz-select.entry.js +423 -16
- package/esm/lmvz-snackbar.entry.js +1 -1
- package/esm/lmvz-spinner.entry.js +1 -1
- package/esm/lmvz-tab.entry.js +2 -2
- package/esm/lmvz-tabs.entry.js +5 -4
- package/esm/lmvz-toggle.entry.js +7 -3
- package/esm/loader.js +1 -1
- package/esm/stencil.util-D2-5rsN3.js +15 -0
- package/hydrate/index.js +631 -74
- package/hydrate/index.mjs +631 -74
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-00489151.entry.js +1 -0
- package/lmvz-components/{p-544e3ccb.entry.js → p-0f65d001.entry.js} +1 -1
- package/lmvz-components/p-137b1fe1.entry.js +1 -0
- package/lmvz-components/p-26dd9684.entry.js +1 -0
- package/lmvz-components/p-398b5cf4.entry.js +1 -0
- package/lmvz-components/p-40716828.entry.js +1 -0
- package/lmvz-components/p-4deaa010.entry.js +1 -0
- package/lmvz-components/p-57a366e6.entry.js +1 -0
- package/lmvz-components/p-70f1e31a.entry.js +1 -0
- package/lmvz-components/p-7872a6b4.entry.js +1 -0
- package/lmvz-components/{p-d280d21a.entry.js → p-88661c50.entry.js} +1 -1
- package/lmvz-components/p-91eb71bb.entry.js +1 -0
- package/lmvz-components/p-BA3wizqg.js +1 -0
- package/lmvz-components/{p-GGkwaiT6.js → p-CHxiS3ja.js} +1 -1
- package/lmvz-components/{p-UhNgD4L3.js → p-CPSyM_e-.js} +1 -1
- package/lmvz-components/p-DIyiticz.js +1 -0
- package/lmvz-components/p-DZj20TV1.js +1 -0
- package/lmvz-components/p-a680a7b2.entry.js +1 -0
- package/lmvz-components/{p-d48203f9.entry.js → p-a6fe9b61.entry.js} +1 -1
- package/lmvz-components/p-bh9cItsP.js +1 -0
- package/lmvz-components/p-e14058e1.entry.js +1 -0
- package/lmvz-components/p-eabbf901.entry.js +1 -0
- package/lmvz-components/p-f3f0ed49.entry.js +1 -0
- package/lmvz-components/p-f516a949.entry.js +1 -0
- package/manifest.json +366 -30
- package/package.json +1 -1
- package/types/api/ds.types.d.ts +1 -0
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +9 -1
- package/types/components/lmvz-datepicker/lmvz-datepicker.d.ts +2 -0
- package/types/components/lmvz-input/lmvz-input.d.ts +3 -0
- package/types/components/lmvz-popover/lmvz-popover.d.ts +2 -0
- package/types/components/lmvz-radio/lmvz-radio.d.ts +12 -2
- package/types/components/lmvz-select/lmvz-select.d.ts +53 -4
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -0
- package/types/components.d.ts +96 -12
- package/types/utils/aria/listbox-controller.d.ts +42 -0
- package/types/utils/radio/radio-group-controller.d.ts +3 -0
- package/components/p-Bnri3fEI.js +0 -1
- package/components/p-CPuI0_r_.js +0 -1
- package/components/p-CWpl0WaZ.js +0 -1
- package/lmvz-components/p-63f6a596.entry.js +0 -1
- package/lmvz-components/p-7a7aa922.entry.js +0 -1
- package/lmvz-components/p-8022c6dc.entry.js +0 -1
- package/lmvz-components/p-Bd9JyKJZ.js +0 -1
- package/lmvz-components/p-C3QOYC8E.js +0 -1
- package/lmvz-components/p-a611c110.entry.js +0 -1
- package/lmvz-components/p-b1bb4393.entry.js +0 -1
- package/lmvz-components/p-b50b1cb5.entry.js +0 -1
- package/lmvz-components/p-b932cf91.entry.js +0 -1
- package/lmvz-components/p-bff115d4.entry.js +0 -1
- package/lmvz-components/p-d9aede81.entry.js +0 -1
- package/lmvz-components/p-dbfbcb74.entry.js +0 -1
- package/lmvz-components/p-f0e28f3a.entry.js +0 -1
- package/lmvz-components/p-f853faae.entry.js +0 -1
- package/lmvz-components/p-fa2efc42.entry.js +0 -1
- package/lmvz-components/p-fe6f5bdc.entry.js +0 -1
|
@@ -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: 'fcade3c1829fa6c3c1911c7a98dffd57e08ce1fe' }, h("lmvz-header", { key: '69a4966cbd57347e693b2a28d71c3a711a27dece', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'c9fe5ea860f09a7bfb10742ca59494a56a929634', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '509de0e603fd7caab3c9afb3c33ba426687af626', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '4b71922d9b24e498ffb9fad4ed51fe8129cdd24b', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'f2748efdad33464b699d149658bffa081dfd40fc', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '928f2938d1869daff7392eae819d35915b3b354f', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '4c685e59db6250418fbd4158ab4e3b9e220e6515', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '904f4f480f313df8bb0d90ff871fa81d4e456bcd', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '6048794171f6f5a121bd49ac9c74eb08d67cb714', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: 'd27207e37a1f3c2a1190ef4f226e95447f3d5be2', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: 'ab52392ef4174e0dca7db6e827169e6d6b96ef72', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '80ee897b06f16a11b4bc8cbaefa47c5e91982248', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '62abb091e83d38a9b092609c4b4077d743c71238', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '97432e879cbad971666621c9fce3c83c8e380c6c', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '991b8c9569eae3e9e073b421066369c62b348797', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "header-integration"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
:host(:focus-
|
|
1
|
+
:host:has(:focus-visible) {
|
|
2
2
|
outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
|
|
3
3
|
outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
|
|
4
4
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
/* Forced Colors / Windows High Contrast */
|
|
7
7
|
|
|
8
8
|
@media (forced-colors: active) {
|
|
9
|
-
:host(:focus-
|
|
9
|
+
:host:has(:focus-visible) {
|
|
10
10
|
outline-color: Highlight;
|
|
11
11
|
box-shadow: none;
|
|
12
12
|
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
const defaultConfig = {
|
|
2
|
+
wrap: true,
|
|
3
|
+
typeaheadTimeoutMs: 500,
|
|
4
|
+
};
|
|
5
|
+
export class ListboxController {
|
|
6
|
+
options = [];
|
|
7
|
+
_activeId;
|
|
8
|
+
_selectedId;
|
|
9
|
+
config;
|
|
10
|
+
typeaheadBuffer = '';
|
|
11
|
+
typeaheadTimer;
|
|
12
|
+
constructor(config = {}) {
|
|
13
|
+
this.config = { ...defaultConfig, ...config };
|
|
14
|
+
}
|
|
15
|
+
hostDisconnected() {
|
|
16
|
+
this.clearTypeaheadTimer();
|
|
17
|
+
}
|
|
18
|
+
get activeId() {
|
|
19
|
+
return this._activeId;
|
|
20
|
+
}
|
|
21
|
+
get activeDescendantId() {
|
|
22
|
+
return this._activeId;
|
|
23
|
+
}
|
|
24
|
+
get selectedId() {
|
|
25
|
+
return this._selectedId;
|
|
26
|
+
}
|
|
27
|
+
setOptions(options) {
|
|
28
|
+
this.options = options;
|
|
29
|
+
if (this._activeId && this.findEnabledIndex(this._activeId) !== -1)
|
|
30
|
+
return;
|
|
31
|
+
const fallback = (this._selectedId && this.findEnabledIndex(this._selectedId) !== -1 ? this._selectedId : undefined) ?? this.firstEnabledOption()?.id;
|
|
32
|
+
this.setActiveId(fallback);
|
|
33
|
+
}
|
|
34
|
+
setActiveId(id) {
|
|
35
|
+
if (id !== undefined && !this.isEnabledId(id))
|
|
36
|
+
return;
|
|
37
|
+
if (id === this._activeId)
|
|
38
|
+
return;
|
|
39
|
+
this._activeId = id;
|
|
40
|
+
this.config.onActiveChange?.(id);
|
|
41
|
+
}
|
|
42
|
+
setSelectedId(id) {
|
|
43
|
+
this._selectedId = id;
|
|
44
|
+
}
|
|
45
|
+
selectOption(id) {
|
|
46
|
+
if (!this.isEnabledId(id))
|
|
47
|
+
return;
|
|
48
|
+
this._selectedId = id;
|
|
49
|
+
this.config.onSelect?.(id);
|
|
50
|
+
}
|
|
51
|
+
selectActive() {
|
|
52
|
+
if (this._activeId)
|
|
53
|
+
this.selectOption(this._activeId);
|
|
54
|
+
}
|
|
55
|
+
handleKeydown(event) {
|
|
56
|
+
switch (event.key) {
|
|
57
|
+
case 'ArrowDown':
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
this.moveActive('next');
|
|
60
|
+
return true;
|
|
61
|
+
case 'ArrowUp':
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
this.moveActive('previous');
|
|
64
|
+
return true;
|
|
65
|
+
case 'Home':
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
this.setActiveId(this.firstEnabledOption()?.id);
|
|
68
|
+
return true;
|
|
69
|
+
case 'End':
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
this.setActiveId(this.lastEnabledOption()?.id);
|
|
72
|
+
return true;
|
|
73
|
+
case 'Enter':
|
|
74
|
+
case ' ':
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
this.selectActive();
|
|
77
|
+
return true;
|
|
78
|
+
case 'Escape':
|
|
79
|
+
event.preventDefault();
|
|
80
|
+
this.config.onClose?.();
|
|
81
|
+
return true;
|
|
82
|
+
default:
|
|
83
|
+
return this.handleTypeahead(event);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
clearTypeahead() {
|
|
87
|
+
this.typeaheadBuffer = '';
|
|
88
|
+
this.clearTypeaheadTimer();
|
|
89
|
+
}
|
|
90
|
+
moveActive(direction) {
|
|
91
|
+
const enabledOptions = this.enabledOptions();
|
|
92
|
+
if (!enabledOptions.length)
|
|
93
|
+
return;
|
|
94
|
+
const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
|
|
95
|
+
if (currentIndex === -1) {
|
|
96
|
+
this.setActiveId((direction === 'next' ? enabledOptions[0] : enabledOptions[enabledOptions.length - 1])?.id);
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
const step = direction === 'next' ? 1 : -1;
|
|
100
|
+
const rawIndex = currentIndex + step;
|
|
101
|
+
if (rawIndex < 0 || rawIndex >= enabledOptions.length) {
|
|
102
|
+
if (!this.config.wrap)
|
|
103
|
+
return;
|
|
104
|
+
const wrappedIndex = (rawIndex + enabledOptions.length) % enabledOptions.length;
|
|
105
|
+
this.setActiveId(enabledOptions[wrappedIndex]?.id);
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
this.setActiveId(enabledOptions[rawIndex]?.id);
|
|
109
|
+
}
|
|
110
|
+
handleTypeahead(event) {
|
|
111
|
+
if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
|
|
112
|
+
return false;
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
this.typeaheadBuffer += event.key.toLowerCase();
|
|
115
|
+
this.restartTypeaheadTimer();
|
|
116
|
+
const enabledOptions = this.enabledOptions();
|
|
117
|
+
if (!enabledOptions.length)
|
|
118
|
+
return true;
|
|
119
|
+
const currentIndex = this._activeId ? enabledOptions.findIndex((option) => option.id === this._activeId) : -1;
|
|
120
|
+
const orderedFromCurrent = [...enabledOptions.slice(currentIndex + 1), ...enabledOptions.slice(0, currentIndex + 1)];
|
|
121
|
+
const match = orderedFromCurrent.find((option) => option.label.toLowerCase().startsWith(this.typeaheadBuffer));
|
|
122
|
+
if (match)
|
|
123
|
+
this.setActiveId(match.id);
|
|
124
|
+
return true;
|
|
125
|
+
}
|
|
126
|
+
restartTypeaheadTimer() {
|
|
127
|
+
this.clearTypeaheadTimer();
|
|
128
|
+
this.typeaheadTimer = setTimeout(() => {
|
|
129
|
+
this.typeaheadBuffer = '';
|
|
130
|
+
}, this.config.typeaheadTimeoutMs);
|
|
131
|
+
}
|
|
132
|
+
clearTypeaheadTimer() {
|
|
133
|
+
if (this.typeaheadTimer !== undefined) {
|
|
134
|
+
clearTimeout(this.typeaheadTimer);
|
|
135
|
+
this.typeaheadTimer = undefined;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
enabledOptions() {
|
|
139
|
+
return this.options.filter((option) => !option.disabled);
|
|
140
|
+
}
|
|
141
|
+
firstEnabledOption() {
|
|
142
|
+
return this.enabledOptions()[0];
|
|
143
|
+
}
|
|
144
|
+
lastEnabledOption() {
|
|
145
|
+
const enabledOptions = this.enabledOptions();
|
|
146
|
+
return enabledOptions[enabledOptions.length - 1];
|
|
147
|
+
}
|
|
148
|
+
isEnabledId(id) {
|
|
149
|
+
return this.findEnabledIndex(id) !== -1;
|
|
150
|
+
}
|
|
151
|
+
findEnabledIndex(id) {
|
|
152
|
+
return this.enabledOptions().findIndex((option) => option.id === id);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
@@ -29,6 +29,7 @@ class RadioGroup {
|
|
|
29
29
|
if (wasEmpty) {
|
|
30
30
|
document.addEventListener('focusin', this._focusinHandler, true);
|
|
31
31
|
}
|
|
32
|
+
this.refreshValidity();
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
unregister(host) {
|
|
@@ -39,10 +40,19 @@ class RadioGroup {
|
|
|
39
40
|
if (this.hosts.length === 0) {
|
|
40
41
|
document.removeEventListener('focusin', this._focusinHandler, true);
|
|
41
42
|
}
|
|
43
|
+
this.refreshValidity();
|
|
42
44
|
}
|
|
43
45
|
get sortedEnabled() {
|
|
44
46
|
return this.hosts.filter((h) => !h.disabled);
|
|
45
47
|
}
|
|
48
|
+
isAnyChecked() {
|
|
49
|
+
return this.hosts.some((host) => host.checked);
|
|
50
|
+
}
|
|
51
|
+
refreshValidity() {
|
|
52
|
+
for (const host of this.hosts) {
|
|
53
|
+
host.updateValidity();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
46
56
|
setFocused(host) {
|
|
47
57
|
this._focusedHost = host;
|
|
48
58
|
this.updateTabindex();
|
|
@@ -58,6 +68,7 @@ class RadioGroup {
|
|
|
58
68
|
host.checked = host === selectedHost;
|
|
59
69
|
}
|
|
60
70
|
this.updateTabindex();
|
|
71
|
+
this.refreshValidity();
|
|
61
72
|
}
|
|
62
73
|
updateTabindex() {
|
|
63
74
|
const enabled = this.sortedEnabled;
|
|
@@ -119,6 +130,12 @@ export class RadioGroupController {
|
|
|
119
130
|
select(selectedHost) {
|
|
120
131
|
this.group?.select(selectedHost);
|
|
121
132
|
}
|
|
133
|
+
isAnyChecked() {
|
|
134
|
+
return this.group?.isAnyChecked() ?? false;
|
|
135
|
+
}
|
|
136
|
+
refreshValidity() {
|
|
137
|
+
this.group?.refreshValidity();
|
|
138
|
+
}
|
|
122
139
|
setFocused(host) {
|
|
123
140
|
this.group?.setFocused(host);
|
|
124
141
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,h as r,d as o,t as n}from"./p-BPYBmylI.js";import{A as e}from"./p-BAj4FkUt.js";import{D as a}from"./p-DqdrUt_G.js";import{i as v}from"./p-BhALzK62.js";import{R as l}from"./p-diOze8wI.js";const m=t(class extends l{get el(){return this}slotEl;get validationEl(){return this.el}get validationSlot(){return this.slotEl}focusController=new a(this,{orientation:"vertical",manageTabIndex:!0,enableHomeAndEnd:!0});label;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.addController(this.focusController),this.addController(new e(this,{validationTiming:"slot"}))}componentDidLoad(){this.handleSlotChange(),super.componentDidLoad()}async initFocus(){this.focusController.initFocus()}handleSlotChange=()=>{const t=this.slotEl;if(!t)return;const r=t.assignedElements(),o=[];for(const t of r)i(t,o);for(const t of o)v(t)&&(t.variant||(t.variant="tertiary"));this.focusController.updateElements(o)};render(){return r(o,{key:"9dee495856e733cb17f30d0d8588362a8dcb28ce",role:"menu","aria-label":this.label||void 0},r("slot",{key:"c6454dbbe63eed5be01f3247934245d1cc1ad6e2",onSlotchange:this.handleSlotChange,ref:t=>this.slotEl=t}))}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; min-width: 15vw; button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); 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-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-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } lmvz-button, button { --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-content-justification-override: normal; width: 100%; display: block; } button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); &:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } } }"}},[774,"lmvz-action-list",{label:[1],initFocus:[64]}]);function i(t,r){const o=t.tagName.toLowerCase();return"lmvz-button"===o?(t.buttonRole="menuitem",void r.push(t)):"button"===o?(t.setAttribute("role","menuitem"),void r.push(t)):void("hr"!==o&&("group"!==t.getAttribute("role")?console.warn("Unexpected element encountered in ActionList:",o):t.querySelectorAll("lmvz-button, button").forEach((t=>i(t,r)))))}const d=m,b=function(){"undefined"!=typeof customElements&&["lmvz-action-list"].forEach((t=>{"lmvz-action-list"===t&&(customElements.get(n(t))||customElements.define(n(t),m))}))};export{d as LmvzActionList,b as defineCustomElement}
|
|
1
|
+
import{p as t,h as r,d as o,t as n}from"./p-BPYBmylI.js";import{A as e}from"./p-BAj4FkUt.js";import{D as a}from"./p-DqdrUt_G.js";import{i as v}from"./p-BhALzK62.js";import{R as l}from"./p-diOze8wI.js";const i=t(class extends l{get el(){return this}slotEl;get validationEl(){return this.el}get validationSlot(){return this.slotEl}focusController=new a(this,{orientation:"vertical",manageTabIndex:!0,enableHomeAndEnd:!0});label;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.addController(this.focusController),this.addController(new e(this,{validationTiming:"slot"}))}componentDidLoad(){this.handleSlotChange(),super.componentDidLoad()}async initFocus(){this.focusController.initFocus()}handleSlotChange=()=>{const t=this.slotEl;if(!t)return;const r=t.assignedElements(),o=[];for(const t of r)m(t,o);for(const t of o)v(t)&&(t.variant||(t.variant="tertiary"));this.focusController.updateElements(o)};render(){return r(o,{key:"9dee495856e733cb17f30d0d8588362a8dcb28ce",role:"menu","aria-label":this.label||void 0},r("slot",{key:"c6454dbbe63eed5be01f3247934245d1cc1ad6e2",onSlotchange:this.handleSlotChange,ref:t=>this.slotEl=t}))}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; min-width: 15vw; button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); 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-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-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } lmvz-button, button { --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-content-justification-override: normal; width: 100%; display: block; } button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); &:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } } }"}},[774,"lmvz-action-list",{label:[1],initFocus:[64]}]);function m(t,r){const o=t.tagName.toLowerCase();return"lmvz-button"===o?(t.buttonRole="menuitem",void r.push(t)):"button"===o?(t.setAttribute("role","menuitem"),void r.push(t)):void("hr"!==o&&("group"!==t.getAttribute("role")?console.warn("Unexpected element encountered in ActionList:",o):t.querySelectorAll("lmvz-button, button").forEach((t=>m(t,r)))))}const d=i,b=function(){"undefined"!=typeof customElements&&["lmvz-action-list"].forEach((t=>{"lmvz-action-list"===t&&(customElements.get(n(t))||customElements.define(n(t),i))}))};export{d as LmvzActionList,b as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as o,d as
|
|
1
|
+
import{L as o,d as p}from"./p-DiRcp9V6.js";const s=o,r=p;export{s as LmvzButton,r as defineCustomElement}
|
package/components/lmvz-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as r,p as t,H as e,c as o,h as a,d as n,t as l}from"./p-BPYBmylI.js";const m=t(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.primaryAction=o(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((t,e)=>{const o=function(...r){return r.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",e,t);try{return r(o)}catch{return console.warn(`Failed to create URL for asset "${t}" in path "${e}".\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(o,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(r){console.log(r)}render(){return a(n,{key:"1dd819fd7c752af8d15001c08f7f60c6ea7278b9",role:"article"},a("div",{key:"e0cc822e627b6bbe665e4faa705cc46a09bac7c6",class:"top"},a("div",{key:"db79cb5a67ebdd6097f985e4b4bd27665b6329ef",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"90facc8595ddbbf31e3768faa8254a82ab8d3e65",class:"chip-slot"},a("slot",{key:"cb2e6a1053aae2b2ca90c52c175e3c4174c89d23",name:"chip"})))),a("div",{key:"cb11069a329385178677e92d08044e0fe8e5b982",class:"bottom"},a("header",{key:"1e6076352124ca03de2fb13c17a565b4f492567e"},a("h2",{key:"73f11099fb751bd4f967dbe49b79763b6a8268f3",class:"title"},this.cardTitle)),a("p",{key:"36cf87b4c2004bff1e65feedd13e137d67115de3",class:"description"},this.description),a("div",{key:"6c1d82f4968ce8252307858e6ad0681274f06397",class:"actions"},a("button",{key:"0366e0caaf9235a3eaf7bfcab116e6a828fb248d",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"4f435e79d75a621d6fe065471a915b55308ad15d",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"7dec97e0b0ca58c40fc5308cc7863acafa8c5147",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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); 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-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-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 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.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 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.5 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"]}]),i=m,v=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((r=>{"lmvz-card"===r&&(customElements.get(l(r))||customElements.define(l(r),m))}))};export{i as LmvzCard,v as defineCustomElement}
|
|
1
|
+
import{g as r,p as e,H as t,c as o,h as a,d as n,t as l}from"./p-BPYBmylI.js";const m=e(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.primaryAction=o(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((e,t)=>{const o=function(...r){return r.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",t,e);try{return r(o)}catch{return console.warn(`Failed to create URL for asset "${e}" 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(o,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(r){console.log(r)}render(){return a(n,{key:"1dd819fd7c752af8d15001c08f7f60c6ea7278b9",role:"article"},a("div",{key:"e0cc822e627b6bbe665e4faa705cc46a09bac7c6",class:"top"},a("div",{key:"db79cb5a67ebdd6097f985e4b4bd27665b6329ef",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"90facc8595ddbbf31e3768faa8254a82ab8d3e65",class:"chip-slot"},a("slot",{key:"cb2e6a1053aae2b2ca90c52c175e3c4174c89d23",name:"chip"})))),a("div",{key:"cb11069a329385178677e92d08044e0fe8e5b982",class:"bottom"},a("header",{key:"1e6076352124ca03de2fb13c17a565b4f492567e"},a("h2",{key:"73f11099fb751bd4f967dbe49b79763b6a8268f3",class:"title"},this.cardTitle)),a("p",{key:"36cf87b4c2004bff1e65feedd13e137d67115de3",class:"description"},this.description),a("div",{key:"6c1d82f4968ce8252307858e6ad0681274f06397",class:"actions"},a("button",{key:"0366e0caaf9235a3eaf7bfcab116e6a828fb248d",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"4f435e79d75a621d6fe065471a915b55308ad15d",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"7dec97e0b0ca58c40fc5308cc7863acafa8c5147",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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); 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-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-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 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.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 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.5 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"]}]),i=m,v=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((r=>{"lmvz-card"===r&&(customElements.get(l(r))||customElements.define(l(r),m))}))};export{i as LmvzCard,v as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,c as o,h as r,d as c,t}from"./p-BPYBmylI.js";import{t as a}from"./p-DjvtQE7c.js";import{A as l}from"./p-BAj4FkUt.js";import{R as s}from"./p-diOze8wI.js";const i=a("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");let h=0;const n=e(class extends s{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",7),this.internals=this.attachInternals(),this.addController(new l(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)};retargetInnerClicks(){this.nativeInput?.click()}render(){return r(c,{key:"b6b4153dbf80af15cb15799889ca23b621b4ef73"},r("div",{key:"f11d6baaa4b04ee74b201be8c4e125ccd5c366aa",class:"pill"},r("input",{key:"d61dccfa163ecf4fffa95a5d44be35adbb8ee8ff",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}),r("span",{key:"87d62f1e0572e174e6d15f30ff59e37f6a5333cb",class:"box","aria-hidden":"true"},this.checkedState&&r("span",{key:"74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d",class:"indicator",innerHTML:i})),r("span",{key:"544990c81b3f7f90b53902d580d2eb2197edfa8b",class:"content"},r("label",{key:"1884744656a280f85bec91b27315d3a6b70e8238",htmlFor:this.checkboxId},this.label),this.helperText&&r("span",{key:"6783ff413a884c78dbd52e07cc7b433f5a9dcf29",onClick:this.retargetInnerClicks.bind(this),class:"helper-text",id:this.helperId,role:"status"},this.helperText))),this.errorMessage&&r("span",{key:"7c19fe406223a11e25df54cdfa304bc000eb421f",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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .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, #a1a1a1); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --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, #545454); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --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-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); 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); cursor: pointer; 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; cursor: pointer; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); cursor: pointer; } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 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.72rem + 0.13vw, 0.88rem) / 1.5 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; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @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; } .sc-lmvz-checkbox-h:focus-within .pill.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}]}]),d=n,b=function(){"undefined"!=typeof customElements&&["lmvz-checkbox"].forEach((e=>{"lmvz-checkbox"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))};export{d as LmvzCheckbox,b as defineCustomElement}
|
|
1
|
+
import{p as e,c as o,h as r,d as c,t}from"./p-BPYBmylI.js";import{t as a}from"./p-DjvtQE7c.js";import{A as s}from"./p-BAj4FkUt.js";import{R as l}from"./p-diOze8wI.js";const i=a("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");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;nativeError=!1;errorFromProp=!1;get error(){return this.errorFromProp||this.nativeError}set error(e){this.errorFromProp=e}errorMessage;helperText;form;autofocus=!1;checkedState=!1;handleCheckedChange(e){this.checkedState=e,this.internals.setFormValue?.(e?this.value??"on":null),this.updateValidity()}handleRequiredChange(){this.updateValidity()}lmvzChange;async focusInput(){this.nativeInput?.focus()}async checkValidity(){return this.internals?.checkValidity()??!0}async reportValidity(){return this.internals?.reportValidity()??!0}async getValidationMessage(){return this.internals?.validationMessage??""}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzChange=o(this,"lmvzChange",7),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),this.updateValidity(),super.componentWillLoad()}componentDidLoad(){this.updateValidity(),super.componentDidLoad()}componentWillRender(){this.errorFromProp&&!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,this.updateValidity()}formStateRestoreCallback(e){this.checked=e===(this.value??"on")}handleChange=e=>{this.checked=e.target.checked,this.lmvzChange.emit(this.checked)};retargetInnerClicks(){this.nativeInput?.click()}updateValidity(){!this.required||this.checked?(this.internals.setValidity?.({}),this.nativeError=!1):this.internals.setValidity?.({valueMissing:!0},"Please check this box.",this.nativeInput)}handleInvalid(){this.nativeError=!0}render(){return r(c,{key:"089b23f8034fa089f358cc37923182c34f528cd2"},r("div",{key:"0af011ebf062332c330b49fa3076828204433ac4",class:"pill"},r("input",{key:"a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff",type:"checkbox",id:this.checkboxId,checked:this.checkedState,disabled:this.disabled,"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}),r("span",{key:"f21d34ab625c7eef23bd2761b399e8770cd62275",class:"box","aria-hidden":"true"},this.checkedState&&r("span",{key:"de2680ea17f34ab0124c529d88d4191c97d0a4c5",class:"indicator",innerHTML:i})),r("span",{key:"1b2d24e43603033a5a77340164e002de326db11a",class:"content"},r("label",{key:"b18f17abb4459b3783dc41d0031f4b26795fdcf5",htmlFor:this.checkboxId},this.label),this.helperText&&r("span",{key:"f32591c55fcc88d130815780a9999fcb235afd88",onClick:this.retargetInnerClicks.bind(this),class:"helper-text",id:this.helperId,role:"status"},this.helperText))),this.errorMessage&&r("span",{key:"076489f5baadab07d95fc787e9ac71bae0a6ab68",onClick:this.retargetInnerClicks.bind(this),class:"error-text",id:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}],required:[{handleRequiredChange: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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .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, #a1a1a1); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --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, #545454); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --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-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); 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; appearance: none; } .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); cursor: pointer; 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; cursor: pointer; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); cursor: pointer; } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 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.72rem + 0.13vw, 0.88rem) / 1.5 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; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:has(:focus-visible) .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @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; } .sc-lmvz-checkbox-h:has(:focus-visible) .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }"}},[578,"lmvz-checkbox",{label:[1],checked:[1540],value:[1],name:[513],disabled:[516],required:[516],error:[6660],errorMessage:[1,"error-message"],helperText:[1,"helper-text"],form:[1],autofocus:[4],nativeError:[32],checkedState:[32],focusInput:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"invalid","handleInvalid"]],{checked:[{handleCheckedChange:0}],required:[{handleRequiredChange:0}]}]),d=n,b=function(){"undefined"!=typeof customElements&&["lmvz-checkbox"].forEach((e=>{"lmvz-checkbox"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))};export{d as LmvzCheckbox,b as defineCustomElement}
|