@lmvz-ds/components 0.30.0 → 0.32.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/{ds.constants-D3srqM9m.js → ds.constants-CKeXfK-s.js} +10 -0
- package/cjs/{component-C7cavwmZ.js → element.util-Cq4y-_iX.js} +42 -31
- package/cjs/index.cjs.js +7 -1
- package/cjs/{list-keyboard-controller-CzZdPBeH.js → list-keyboard-controller-StN6Yn8W.js} +13 -8
- package/cjs/lmvz-action-list.cjs.entry.js +79 -0
- package/cjs/lmvz-button-group.cjs.entry.js +43 -47
- package/cjs/lmvz-button_2.cjs.entry.js +10 -8
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +1 -1
- package/cjs/lmvz-chip.cjs.entry.js +2 -2
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +5 -5
- package/cjs/lmvz-link.cjs.entry.js +2 -2
- package/cjs/lmvz-menuitem.cjs.entry.js +1 -1
- package/cjs/lmvz-message.cjs.entry.js +1 -1
- package/cjs/lmvz-modal.cjs.entry.js +5 -5
- package/cjs/lmvz-radio.cjs.entry.js +1 -1
- package/cjs/lmvz-select.cjs.entry.js +1 -1
- 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 +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/stencil.util-DzvzXSwk.js +25 -0
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.css +93 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.js +104 -0
- package/collection/components/lmvz-button/lmvz-button.css +65 -45
- package/collection/components/lmvz-button/lmvz-button.js +28 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +33 -2
- package/collection/components/lmvz-button-group/lmvz-button-group.js +54 -38
- package/collection/components/lmvz-card/lmvz-card.css +58 -45
- package/collection/components/lmvz-card/lmvz-card.js +2 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +2 -2
- package/collection/components/lmvz-chip/lmvz-chip.js +7 -7
- package/collection/components/lmvz-header/lmvz-header.js +2 -2
- package/collection/components/lmvz-icon/lmvz-icon.js +2 -2
- package/collection/components/lmvz-input/lmvz-input.js +5 -5
- package/collection/components/lmvz-link/lmvz-link.js +3 -3
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +2 -2
- package/collection/components/lmvz-message/lmvz-message.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +7 -0
- package/collection/components/lmvz-modal/lmvz-modal.js +3 -3
- package/collection/components/lmvz-radio/lmvz-radio.js +2 -2
- package/collection/components/lmvz-select/lmvz-select.js +2 -2
- 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 +7 -0
- package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.css +7 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +2 -2
- package/collection/components/lmvz-toggle/lmvz-toggle.js +3 -3
- package/collection/index.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/aria/aria.constants.js +53 -0
- package/collection/utils/aria/list-keyboard-controller.js +12 -7
- package/collection/utils/async/async.util.js +62 -0
- package/collection/utils/data/event.utilt.js +19 -0
- package/collection/utils/data/number.util.js +6 -0
- package/collection/utils/data/object.util.js +20 -0
- package/collection/utils/data/time.util.js +3 -0
- package/collection/utils/element/element.util.js +117 -0
- package/collection/utils/{assets.js → stencil/assets.js} +1 -1
- package/collection/utils/stencil/stencil.util.js +12 -0
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-action-list.d.ts +11 -0
- package/components/lmvz-action-list.d.ts.bak +11 -0
- package/components/lmvz-action-list.js +1 -0
- package/components/lmvz-button-group.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-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-link.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.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-B0H9qIwE.js +1 -0
- package/components/p-B4m1n4et.js +1 -0
- package/components/p-CJRqhXjK.js +1 -0
- package/components/p-CxfT9IA1.js +1 -0
- package/components/{p-CXakymyP.js → p-DJ90327O.js} +1 -1
- package/components/p-DeO5Vbxh.js +1 -0
- package/components/p-DuEtnKRj.js +1 -0
- package/esm/{ds.constants-BLS5MjIu.js → ds.constants-DuEtnKRj.js} +5 -1
- package/esm/{component-DOTK1OW3.js → element.util-CxfT9IA1.js} +37 -31
- package/esm/index.js +1 -1
- package/esm/{list-keyboard-controller-Coi8XfUH.js → list-keyboard-controller-BKa9Kd2t.js} +12 -7
- package/esm/lmvz-action-list.entry.js +77 -0
- package/esm/lmvz-button-group.entry.js +35 -39
- package/esm/lmvz-button_2.entry.js +9 -7
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +1 -1
- package/esm/lmvz-chip.entry.js +2 -2
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-link.entry.js +2 -2
- package/esm/lmvz-menuitem.entry.js +1 -1
- package/esm/lmvz-message.entry.js +1 -1
- package/esm/lmvz-modal.entry.js +3 -3
- package/esm/lmvz-radio.entry.js +1 -1
- package/esm/lmvz-select.entry.js +1 -1
- 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 +4 -4
- package/esm/lmvz-toggle.entry.js +2 -2
- package/esm/loader.js +1 -1
- package/esm/stencil.util-CJRqhXjK.js +23 -0
- package/hydrate/index.js +501 -388
- package/hydrate/index.mjs +501 -388
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-f3c44dd4.entry.js → p-1ce90ea7.entry.js} +1 -1
- package/lmvz-components/{p-b08db5ad.entry.js → p-24125bcf.entry.js} +1 -1
- package/lmvz-components/p-25a78ead.entry.js +1 -0
- package/lmvz-components/p-4072b2fb.entry.js +1 -0
- package/lmvz-components/p-48109e1d.entry.js +1 -0
- package/lmvz-components/{p-3b3e532f.entry.js → p-582f44ff.entry.js} +1 -1
- package/lmvz-components/p-592d509b.entry.js +1 -0
- package/lmvz-components/{p-d7e99f03.entry.js → p-6f61c24d.entry.js} +1 -1
- package/lmvz-components/{p-58498d43.entry.js → p-703b10b5.entry.js} +1 -1
- package/lmvz-components/p-74c7521c.entry.js +1 -0
- package/lmvz-components/{p-b5254532.entry.js → p-80a26307.entry.js} +1 -1
- package/lmvz-components/{p-c60ab9c9.entry.js → p-8e1f66dd.entry.js} +1 -1
- package/lmvz-components/p-947e1fe6.entry.js +1 -0
- package/lmvz-components/p-B4m1n4et.js +1 -0
- package/lmvz-components/p-CJRqhXjK.js +1 -0
- package/lmvz-components/p-CxfT9IA1.js +1 -0
- package/lmvz-components/p-DuEtnKRj.js +1 -0
- package/lmvz-components/{p-230962c8.entry.js → p-b79af711.entry.js} +1 -1
- package/lmvz-components/p-c00f0d96.entry.js +1 -0
- package/lmvz-components/{p-5c951888.entry.js → p-c0d05a97.entry.js} +1 -1
- package/lmvz-components/{p-c0b1d0af.entry.js → p-c3e8092e.entry.js} +1 -1
- package/lmvz-components/{p-2ca85b7c.entry.js → p-ed3c2b13.entry.js} +1 -1
- package/lmvz-components/{p-35da6bfb.entry.js → p-fa2cd315.entry.js} +1 -1
- package/manifest.json +130 -18
- package/package.json +5 -1
- package/types/api/ds.constants.d.ts +0 -40
- package/types/api/ds.types.d.ts +68 -1
- package/types/components/lmvz-action-list/lmvz-action-list.d.ts +15 -0
- package/types/components/lmvz-button/lmvz-button.d.ts +6 -3
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +2 -0
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -1
- package/types/components/lmvz-chip/lmvz-chip.d.ts +2 -2
- package/types/components/lmvz-header/lmvz-header.d.ts +1 -1
- package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -1
- package/types/components/lmvz-input/lmvz-input.d.ts +1 -1
- package/types/components/lmvz-link/lmvz-link.d.ts +1 -1
- package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -1
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -1
- package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -1
- package/types/components/lmvz-select/lmvz-select.d.ts +1 -1
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -1
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -1
- package/types/components.d.ts +83 -2
- package/types/index.d.ts +1 -1
- package/types/utils/aria/aria-validation-controller.d.ts +3 -3
- package/types/utils/aria/aria.constants.d.ts +1 -0
- package/types/utils/aria/element-activation-controller.d.ts +1 -1
- package/types/utils/aria/list-keyboard-controller.d.ts +4 -1
- package/types/utils/async/async.util.d.ts +8 -0
- package/types/utils/data/event.utilt.d.ts +4 -0
- package/types/utils/data/number.util.d.ts +2 -0
- package/types/utils/data/object.util.d.ts +5 -0
- package/types/utils/data/time.util.d.ts +1 -0
- package/types/utils/element/element.util.d.ts +21 -0
- package/types/utils/radio/radio-group-controller.d.ts +1 -1
- package/types/utils/{reactive-controller-host.d.ts → stencil/reactive-controller-host.d.ts} +1 -1
- package/types/utils/stencil/stencil.util.d.ts +6 -0
- package/collection/utils/component.js +0 -270
- package/collection/utils/http.js +0 -21
- package/collection/utils/http.unit.js +0 -47
- package/components/p-BLS5MjIu.js +0 -1
- package/components/p-C0f2nNPZ.js +0 -1
- package/components/p-CtaMrBNE.js +0 -1
- package/components/p-DGlgVBPj.js +0 -1
- package/components/p-DOTK1OW3.js +0 -1
- package/lmvz-components/p-0d435e7b.entry.js +0 -1
- package/lmvz-components/p-44fea470.entry.js +0 -1
- package/lmvz-components/p-4dc44520.entry.js +0 -1
- package/lmvz-components/p-BLS5MjIu.js +0 -1
- package/lmvz-components/p-CtaMrBNE.js +0 -1
- package/lmvz-components/p-DOTK1OW3.js +0 -1
- package/lmvz-components/p-a4077c9f.entry.js +0 -1
- package/lmvz-components/p-dce6e41d.entry.js +0 -1
- package/lmvz-components/p-e3ce44a3.entry.js +0 -1
- package/types/utils/component.d.ts +0 -33
- package/types/utils/http.d.ts +0 -26
- package/types/utils/http.unit.d.ts +0 -1
- /package/collection/utils/{reactive-controller-host.js → stencil/reactive-controller-host.js} +0 -0
- /package/types/utils/{assets.d.ts → stencil/assets.d.ts} +0 -0
package/collection/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from '@lmvz-ds/aria-validation';
|
|
2
|
-
export
|
|
2
|
+
export * from './api/ds.constants';
|
|
3
3
|
export * from './components/lmvz-message/public';
|
|
4
4
|
export * from './components/lmvz-snackbar/public';
|
|
5
5
|
export * from './utils/public';
|
|
@@ -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: 'ebc2b4339568b47368f941f4b4771ccbaa6a4eeb' }, h("lmvz-header", { key: '85a1799f16e513db71e0475dd8d85d2fb880c002', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '6c50b1a6308c20e93ff93fe9a33ebee413b265c2', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '665c24100d40b0285bf0c6387e3d59bc2842ff51', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '15655bcb6e443837df2427d930b980fdb198a038', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '90f0fddc72671b948dc7fcedd2e1592aeeb97c1d', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '6997f5e88ae16639c72d3c65c5d37a690a4d8c22', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '8aefbaac518eb8ace38945cbaa892d4532e60f78', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '1ee162b6adeb0151815122edb35c245d77635697', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'bc40228254458c8ad5099d227e81f02e3cf760dd', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '57ead3b0ef5c3db1a1910827e3161e6030df9064', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '56b8c01e30764a6cc6687589034f580f359d4856', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'd0f3058017c06d7cf0a2301d6aec0a9fdb410685', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '39fe3ec2d11cc716ec385a7cd4ca9e1ef8fa05df', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '175bc0c4f5593b2a9f3985f5a487eeadf5e2e1fe', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '4873746ad3d8e2ee424c69074ec52e71844f7f2d', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "header-integration"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export const ariaAttributes = [
|
|
2
|
+
'role',
|
|
3
|
+
'aria-activedescendant',
|
|
4
|
+
'aria-atomic',
|
|
5
|
+
'aria-autocomplete',
|
|
6
|
+
'aria-braillelabel',
|
|
7
|
+
'aria-brailleroledescription',
|
|
8
|
+
'aria-busy',
|
|
9
|
+
'aria-checked',
|
|
10
|
+
'aria-colcount',
|
|
11
|
+
'aria-colindex',
|
|
12
|
+
'aria-colindextext',
|
|
13
|
+
'aria-colspan',
|
|
14
|
+
'aria-controls',
|
|
15
|
+
'aria-current',
|
|
16
|
+
'aria-describedby',
|
|
17
|
+
'aria-description',
|
|
18
|
+
'aria-details',
|
|
19
|
+
'aria-disabled',
|
|
20
|
+
'aria-errormessage',
|
|
21
|
+
'aria-expanded',
|
|
22
|
+
'aria-flowto',
|
|
23
|
+
'aria-haspopup',
|
|
24
|
+
'aria-hidden',
|
|
25
|
+
'aria-invalid',
|
|
26
|
+
'aria-keyshortcuts',
|
|
27
|
+
'aria-label',
|
|
28
|
+
'aria-labelledby',
|
|
29
|
+
'aria-level',
|
|
30
|
+
'aria-live',
|
|
31
|
+
'aria-multiline',
|
|
32
|
+
'aria-multiselectable',
|
|
33
|
+
'aria-orientation',
|
|
34
|
+
'aria-owns',
|
|
35
|
+
'aria-placeholder',
|
|
36
|
+
'aria-posinset',
|
|
37
|
+
'aria-pressed',
|
|
38
|
+
'aria-readonly',
|
|
39
|
+
'aria-relevant',
|
|
40
|
+
'aria-required',
|
|
41
|
+
'aria-roledescription',
|
|
42
|
+
'aria-rowcount',
|
|
43
|
+
'aria-rowindex',
|
|
44
|
+
'aria-rowindextext',
|
|
45
|
+
'aria-rowspan',
|
|
46
|
+
'aria-selected',
|
|
47
|
+
'aria-setsize',
|
|
48
|
+
'aria-sort',
|
|
49
|
+
'aria-valuemax',
|
|
50
|
+
'aria-valuemin',
|
|
51
|
+
'aria-valuenow',
|
|
52
|
+
'aria-valuetext',
|
|
53
|
+
];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getDeepActiveElement } from "../
|
|
1
|
+
import { getDeepActiveElement } from "../element/element.util";
|
|
2
2
|
const defaultConfig = {
|
|
3
3
|
orientation: 'both',
|
|
4
4
|
enableHomeAndEnd: false,
|
|
@@ -71,8 +71,10 @@ export class DirectionalFocusController {
|
|
|
71
71
|
}
|
|
72
72
|
getManagedActiveElement() {
|
|
73
73
|
const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
|
|
74
|
-
if (activeElement instanceof HTMLElement
|
|
75
|
-
|
|
74
|
+
if (activeElement instanceof HTMLElement) {
|
|
75
|
+
const match = this.elements.find((el) => resolveElement(el) === activeElement);
|
|
76
|
+
if (match && this.canMoveFocusTo(match))
|
|
77
|
+
return match;
|
|
76
78
|
}
|
|
77
79
|
if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
|
|
78
80
|
return this.currentElement;
|
|
@@ -160,10 +162,13 @@ export class DirectionalFocusController {
|
|
|
160
162
|
if (this.config.isFocusableElement)
|
|
161
163
|
return this.config.isFocusableElement(element);
|
|
162
164
|
const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
|
|
163
|
-
return
|
|
164
|
-
element.getAttribute('aria-hidden') !== 'true' &&
|
|
165
|
-
(element.checkVisibility?.() ?? true) &&
|
|
166
|
-
element.offsetParent !== null);
|
|
165
|
+
return isTabOrderable && element.getAttribute('aria-hidden') !== 'true' && (element.checkVisibility?.() ?? true) && element.offsetParent !== null;
|
|
167
166
|
}
|
|
168
167
|
}
|
|
168
|
+
function isDirectionalFocusReceiver(el) {
|
|
169
|
+
return typeof el.resolveFocusableElement === 'function';
|
|
170
|
+
}
|
|
171
|
+
function resolveElement(el) {
|
|
172
|
+
return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
|
|
173
|
+
}
|
|
169
174
|
export { DirectionalFocusController as ListKeyboardNavigationController };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
export const transitionEndAsync = (el, expectedDuration = 0) => {
|
|
2
|
+
return new Promise((resolve) => {
|
|
3
|
+
transitionEnd(el, expectedDuration, resolve);
|
|
4
|
+
});
|
|
5
|
+
};
|
|
6
|
+
const transitionEnd = (el, expectedDuration = 0, callback) => {
|
|
7
|
+
let unRegTrans;
|
|
8
|
+
let animationTimeout;
|
|
9
|
+
const opts = { passive: true };
|
|
10
|
+
const ANIMATION_FALLBACK_TIMEOUT = 500;
|
|
11
|
+
const unregister = () => {
|
|
12
|
+
if (unRegTrans) {
|
|
13
|
+
unRegTrans();
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const onTransitionEnd = (ev) => {
|
|
17
|
+
if (ev === undefined || el === ev.target) {
|
|
18
|
+
unregister();
|
|
19
|
+
callback(ev);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
if (el) {
|
|
23
|
+
el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
|
|
24
|
+
el.addEventListener('transitionend', onTransitionEnd, opts);
|
|
25
|
+
animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
|
|
26
|
+
unRegTrans = () => {
|
|
27
|
+
if (animationTimeout !== undefined) {
|
|
28
|
+
clearTimeout(animationTimeout);
|
|
29
|
+
animationTimeout = undefined;
|
|
30
|
+
}
|
|
31
|
+
el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
|
|
32
|
+
el.removeEventListener('transitionend', onTransitionEnd, opts);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
return unregister;
|
|
36
|
+
};
|
|
37
|
+
export const raf = (h) => {
|
|
38
|
+
if (typeof __zone_symbol__requestAnimationFrame === 'function') {
|
|
39
|
+
return __zone_symbol__requestAnimationFrame(h);
|
|
40
|
+
}
|
|
41
|
+
if (typeof requestAnimationFrame === 'function') {
|
|
42
|
+
return requestAnimationFrame(h);
|
|
43
|
+
}
|
|
44
|
+
return setTimeout(h);
|
|
45
|
+
};
|
|
46
|
+
export const deferEvent = (event) => {
|
|
47
|
+
return debounceEvent(event, 0);
|
|
48
|
+
};
|
|
49
|
+
export const debounceEvent = (event, wait) => {
|
|
50
|
+
const original = event._original ?? event;
|
|
51
|
+
return {
|
|
52
|
+
_original: event,
|
|
53
|
+
emit: debounce(original.emit.bind(original), wait),
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
export const debounce = (func, wait = 0) => {
|
|
57
|
+
let timer;
|
|
58
|
+
return (...args) => {
|
|
59
|
+
clearTimeout(timer);
|
|
60
|
+
timer = setTimeout(func, wait, ...args);
|
|
61
|
+
};
|
|
62
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const pointerCoord = (ev) => {
|
|
2
|
+
const deflt = { x: 0, y: 0 };
|
|
3
|
+
if (!ev)
|
|
4
|
+
return deflt;
|
|
5
|
+
if (hasChangedTouches(ev)) {
|
|
6
|
+
const touch = ev.changedTouches[0];
|
|
7
|
+
return { x: touch.clientX, y: touch.clientY };
|
|
8
|
+
}
|
|
9
|
+
if (isMouseEvent(ev)) {
|
|
10
|
+
return { x: ev.pageX, y: ev.pageY };
|
|
11
|
+
}
|
|
12
|
+
return deflt;
|
|
13
|
+
};
|
|
14
|
+
function hasChangedTouches(ev) {
|
|
15
|
+
return Boolean(ev.changedTouches?.length);
|
|
16
|
+
}
|
|
17
|
+
function isMouseEvent(ev) {
|
|
18
|
+
return Boolean(ev.pageX);
|
|
19
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export const shallowEqualStringMap = (map1, map2) => {
|
|
2
|
+
map1 ??= {};
|
|
3
|
+
map2 ??= {};
|
|
4
|
+
if (map1 === map2) {
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
7
|
+
const keys1 = Object.keys(map1);
|
|
8
|
+
if (keys1.length !== Object.keys(map2).length) {
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
11
|
+
for (const k1 of keys1) {
|
|
12
|
+
if (!(k1 in map2)) {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
if (map1[k1] !== map2[k1]) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return true;
|
|
20
|
+
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { ariaAttributes } from "../aria/aria.constants";
|
|
2
|
+
export function isActionButton(element) {
|
|
3
|
+
return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
4
|
+
}
|
|
5
|
+
export function isLmvzButton(element) {
|
|
6
|
+
return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
|
|
7
|
+
}
|
|
8
|
+
export function isDisabledButton(element) {
|
|
9
|
+
return element.hasAttribute('disabled') || element.disabled === true;
|
|
10
|
+
}
|
|
11
|
+
export function isVisible(element) {
|
|
12
|
+
return !element.hasAttribute('hidden');
|
|
13
|
+
}
|
|
14
|
+
export function getActionVariant(element) {
|
|
15
|
+
const variant = element.getAttribute('variant') ?? element.variant;
|
|
16
|
+
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
17
|
+
}
|
|
18
|
+
export function isPrimaryAction(element) {
|
|
19
|
+
return getActionVariant(element) === 'primary';
|
|
20
|
+
}
|
|
21
|
+
export function isSecondaryAction(element) {
|
|
22
|
+
return getActionVariant(element) === 'secondary';
|
|
23
|
+
}
|
|
24
|
+
export const inheritAttributes = (el, attributes = []) => {
|
|
25
|
+
const attributeObject = {};
|
|
26
|
+
attributes.forEach((attr) => {
|
|
27
|
+
if (el.hasAttribute(attr)) {
|
|
28
|
+
const value = el.getAttribute(attr);
|
|
29
|
+
if (value !== null) {
|
|
30
|
+
attributeObject[attr] = el.getAttribute(attr);
|
|
31
|
+
}
|
|
32
|
+
el.removeAttribute(attr);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
return attributeObject;
|
|
36
|
+
};
|
|
37
|
+
export const inheritAriaAttributes = (el, ignoreList) => {
|
|
38
|
+
let attributesToInherit = ariaAttributes;
|
|
39
|
+
if (ignoreList && ignoreList.length > 0) {
|
|
40
|
+
attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
|
|
41
|
+
}
|
|
42
|
+
return inheritAttributes(el, attributesToInherit);
|
|
43
|
+
};
|
|
44
|
+
export const addEventListener = (el, eventName, callback, options) => {
|
|
45
|
+
return el.addEventListener(eventName, callback, options);
|
|
46
|
+
};
|
|
47
|
+
export const removeEventListener = (el, eventName, callback, opts) => {
|
|
48
|
+
return el.removeEventListener(eventName, callback, opts);
|
|
49
|
+
};
|
|
50
|
+
export const getElementRoot = (el, fallback = el) => {
|
|
51
|
+
return el.shadowRoot || fallback;
|
|
52
|
+
};
|
|
53
|
+
export const hasShadowDom = (el) => {
|
|
54
|
+
return Boolean(el.shadowRoot && el.attachShadow);
|
|
55
|
+
};
|
|
56
|
+
export const focusVisibleElement = (el) => {
|
|
57
|
+
el.focus();
|
|
58
|
+
};
|
|
59
|
+
export const renderHiddenInput = (always, container, name, value, disabled) => {
|
|
60
|
+
if (!always && !hasShadowDom(container))
|
|
61
|
+
return;
|
|
62
|
+
let input = container.querySelector('input.aux-input');
|
|
63
|
+
if (!input) {
|
|
64
|
+
input = container.ownerDocument.createElement('input');
|
|
65
|
+
input.type = 'hidden';
|
|
66
|
+
input.classList.add('aux-input');
|
|
67
|
+
container.appendChild(input);
|
|
68
|
+
}
|
|
69
|
+
input.disabled = disabled;
|
|
70
|
+
input.name = name;
|
|
71
|
+
input.value = value || '';
|
|
72
|
+
};
|
|
73
|
+
export function getDeepActiveElement(root = document) {
|
|
74
|
+
let activeElement = root.activeElement;
|
|
75
|
+
if (!activeElement) {
|
|
76
|
+
return null;
|
|
77
|
+
}
|
|
78
|
+
while (activeElement?.shadowRoot) {
|
|
79
|
+
const next = activeElement.shadowRoot.activeElement;
|
|
80
|
+
if (!next) {
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
activeElement = next;
|
|
84
|
+
}
|
|
85
|
+
return activeElement;
|
|
86
|
+
}
|
|
87
|
+
export function canReceiveFocus(el) {
|
|
88
|
+
if (!el)
|
|
89
|
+
return false;
|
|
90
|
+
return (el instanceof HTMLElement && el.tabIndex >= 0 && !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true' && el.checkVisibility() && el.offsetParent !== null);
|
|
91
|
+
}
|
|
92
|
+
export function findFormByRef(form, el) {
|
|
93
|
+
if (form instanceof HTMLFormElement) {
|
|
94
|
+
return form;
|
|
95
|
+
}
|
|
96
|
+
if (typeof form === 'string') {
|
|
97
|
+
const el = document.getElementById(form);
|
|
98
|
+
if (el) {
|
|
99
|
+
if (el instanceof HTMLFormElement) {
|
|
100
|
+
return el;
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
console.warn(`No Form found with selector: "#${form}". Verify that the element with id exists and is actually a <form> element.`, el);
|
|
104
|
+
return null;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
console.warn(`No Form found with selector: "#${form}". Verify that the id is correct and the form is rendered in the DOM.`, el);
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
if (form !== undefined) {
|
|
113
|
+
console.warn(`The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, el);
|
|
114
|
+
return null;
|
|
115
|
+
}
|
|
116
|
+
return el.closest('form');
|
|
117
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getAssetPath } from "@stencil/core";
|
|
2
|
-
import { getLocationBase } from "
|
|
2
|
+
import { getLocationBase } from "../environment";
|
|
3
3
|
const relativeAssetsPath = '../../assets';
|
|
4
4
|
export const createAssetUrlSafely = (file, pathFromAssetRoot) => {
|
|
5
5
|
const relativeAssetPath = joinPath(relativeAssetsPath, pathFromAssetRoot, file);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { raf } from "../async/async.util";
|
|
2
|
+
export const componentOnReady = (stencilEl, callback) => {
|
|
3
|
+
if (hasLazyBuild(stencilEl)) {
|
|
4
|
+
stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
|
|
5
|
+
}
|
|
6
|
+
else {
|
|
7
|
+
raf(() => callback(stencilEl));
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
export const hasLazyBuild = (stencilEl) => {
|
|
11
|
+
return stencilEl.componentOnReady !== undefined;
|
|
12
|
+
};
|
package/components/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* LmvzComponents custom elements */
|
|
2
2
|
export { LmvzAction as LmvzAction } from '../../types/components/lmvz-action/lmvz-action';
|
|
3
3
|
export { defineCustomElement as defineCustomElementLmvzAction } from './lmvz-action';
|
|
4
|
+
export { LmvzActionList as LmvzActionList } from '../../types/components/lmvz-action-list/lmvz-action-list';
|
|
5
|
+
export { defineCustomElement as defineCustomElementLmvzActionList } from './lmvz-action-list';
|
|
4
6
|
export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmvz-button';
|
|
5
7
|
export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
|
|
6
8
|
export { LmvzButtonGroup as LmvzButtonGroup } from '../../types/components/lmvz-button-group/lmvz-button-group';
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* LmvzComponents custom elements */
|
|
2
2
|
export { LmvzAction as LmvzAction } from '../../types/components/lmvz-action/lmvz-action';
|
|
3
3
|
export { defineCustomElement as defineCustomElementLmvzAction } from './lmvz-action';
|
|
4
|
+
export { LmvzActionList as LmvzActionList } from '../../types/components/lmvz-action-list/lmvz-action-list';
|
|
5
|
+
export { defineCustomElement as defineCustomElementLmvzActionList } from './lmvz-action-list';
|
|
4
6
|
export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmvz-button';
|
|
5
7
|
export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
|
|
6
8
|
export { LmvzButtonGroup as LmvzButtonGroup } from '../../types/components/lmvz-button-group/lmvz-button-group';
|
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-DGg7OzDl.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-CdDO7mQa.js";export{
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DGg7OzDl.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-CdDO7mQa.js";export{g as chipSizes,f as chipTypes,d as iconSizes,e as iconWeights,b as inputSizes,i as inputTypes,l as linkTypes,m as messageTypes,s as scaleValues,c as selectSizes,a as sizes,k as snackbarDismissReasons,j as snackbarPriorities,h as snackbarStatuses,t as textSizes,v as variants}from"./p-DuEtnKRj.js";export{g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./p-DJ90327O.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzActionList,defineCustomElement as defineCustomElementLmvzActionList}from"./lmvz-action-list.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzButtonGroup,defineCustomElement as defineCustomElementLmvzButtonGroup}from"./lmvz-button-group.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{LmvzChip,defineCustomElement as defineCustomElementLmvzChip}from"./lmvz-chip.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzLink,defineCustomElement as defineCustomElementLmvzLink}from"./lmvz-link.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzMessage,defineCustomElement as defineCustomElementLmvzMessage}from"./lmvz-message.js";export{LmvzModal,defineCustomElement as defineCustomElementLmvzModal}from"./lmvz-modal.js";export{LmvzRadio,defineCustomElement as defineCustomElementLmvzRadio}from"./lmvz-radio.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzSnackbar,defineCustomElement as defineCustomElementLmvzSnackbar}from"./lmvz-snackbar.js";export{LmvzSpinner,defineCustomElement as defineCustomElementLmvzSpinner}from"./lmvz-spinner.js";export{LmvzTab,defineCustomElement as defineCustomElementLmvzTab}from"./lmvz-tab.js";export{LmvzTabs,defineCustomElement as defineCustomElementLmvzTabs}from"./lmvz-tabs.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";const o={low:0,normal:1,high:2},n={success:5e3,warning:5e3,error:8e3};let z=0;function p(){return z+=1,"snackbar-"+z}class C{hostEl=void 0;active=void 0;getHost(){return void 0===this.hostEl||this.hostEl.isConnected||(this.hostEl=void 0),void 0===this.hostEl&&(this.hostEl=function(){if("undefined"==typeof document)return;const e=document.querySelector("[data-snackbar-host]");if(e)return e;const s=document.createElement("lmvz-snackbar");return s.setAttribute("data-snackbar-host",""),document.body.appendChild(s),s}()),this.hostEl}clearTimer(e){void 0!==e.timerId&&(clearTimeout(e.timerId),e.timerId=void 0)}scheduleTimer(e,s){s<=0||(e.timerStartedAt=Date.now(),e.timerId=setTimeout((()=>{void 0!==this.active&&this.active.id===e.id&&this.dismissActive(e,"timeout")}),s))}dismissActive(e,s){this.clearTimer(e);const t=e.hostEl;t.removeEventListener("pointerenter",e.onPointerEnter),t.removeEventListener("pointerleave",e.onPointerLeave),t.removeEventListener("focusin",e.onFocusIn),t.removeEventListener("focusout",e.onFocusOut),e.onActionListener&&t.removeEventListener("lmvzAction",e.onActionListener),t.hide?.(),this.active?.id===e.id&&(this.active=void 0),"action"!==s&&t.dispatchEvent(new CustomEvent("lmvzClose",{detail:{reason:s},bubbles:!0,composed:!0})),e.resolve({reason:s})}pauseTimer(e){if(e.pauseCount+=1,e.pauseCount>1||void 0===e.timerId)return;const s=void 0!==e.timerStartedAt?Date.now()-e.timerStartedAt:0;e.remaining=Math.max(0,e.remaining-s),e.timerStartedAt=void 0,this.clearTimer(e)}resumeTimer(e){e.pauseCount>0&&(e.pauseCount-=1),e.pauseCount>0||e.remaining>0&&this.scheduleTimer(e,e.remaining)}applyToHost(e,s){e.setAttribute("status",s.status??"success"),void 0!==s.actionLabel?e.setAttribute("action-label",s.actionLabel):e.removeAttribute("action-label")}open(e){const s=o[e.priority??"normal"];if(void 0!==this.active&&s<this.active.priority){let e;const s=new Promise((s=>{e=s}));return e({reason:"swallowed"}),{id:p(),closed:s,dismiss(){}}}void 0!==this.active&&this.dismissActive(this.active,"overridden");const t=this.getHost();if(void 0===t){const e=p();let s;const t=new Promise((e=>{s=e}));return s({reason:"swallowed"}),{id:e,closed:t,dismiss(){}}}const i=p(),m=0===e.duration?0:e.duration??n[e.status??"success"];let a;const r=new Promise((e=>{a=e})),l={id:i,priority:s,resolve:a,timerId:void 0,remaining:m,timerStartedAt:void 0,pauseCount:0,hostEl:t,onPointerEnter:()=>this.pauseTimer(l),onPointerLeave:()=>this.resumeTimer(l),onFocusIn:()=>this.pauseTimer(l),onFocusOut:()=>this.resumeTimer(l)};this.active=l,t.addEventListener("pointerenter",l.onPointerEnter),t.addEventListener("pointerleave",l.onPointerLeave),t.addEventListener("focusin",l.onFocusIn),t.addEventListener("focusout",l.onFocusOut),this.applyToHost(t,e);const d=()=>{void 0!==this.active&&this.active.id===i&&(e.onAction?.(),this.dismissActive(l,"action"))};return l.onActionListener=d,t.addEventListener("lmvzAction",d,{once:!0}),t.show?.(),queueMicrotask((()=>t.setAttribute("message",e.message))),m>0&&this.scheduleTimer(l,m),{id:i,closed:r,dismiss:()=>{this.active?.id===i&&this.dismissActive(l,"manual")}}}dismiss(e){this.active&&(e&&this.active.id!==e||this.dismissActive(this.active,"manual"))}}export{C as SnackbarController}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../../types/components";
|
|
2
|
+
|
|
3
|
+
interface LmvzActionList extends Components.LmvzActionList, HTMLElement {}
|
|
4
|
+
export const LmvzActionList: {
|
|
5
|
+
prototype: LmvzActionList;
|
|
6
|
+
new (): LmvzActionList;
|
|
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 LmvzActionList extends Components.LmvzActionList, HTMLElement {}
|
|
4
|
+
export const LmvzActionList: {
|
|
5
|
+
prototype: LmvzActionList;
|
|
6
|
+
new (): LmvzActionList;
|
|
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 r,h as e,d as o,t}from"./p-DGg7OzDl.js";import{A as a}from"./p-C8znmF2h.js";import{D as n}from"./p-B4m1n4et.js";import{R as m}from"./p-DAMVH-31.js";const l=r(class extends m{get el(){return this}slotEl;get validationEl(){return this.el}get validationSlot(){return this.slotEl}focusController=new n(this,{orientation:"vertical",manageTabIndex:!0,enableHomeAndEnd:!0});label;constructor(r){super(!1),!1!==r&&this.__registerHost(),this.addController(this.focusController),this.addController(new a(this,{validationTiming:"slot"}))}componentDidLoad(){this.handleSlotChange(),super.componentDidLoad()}handleSlotChange=()=>{const r=this.slotEl;if(!r)return;const e=r.assignedElements(),o=[];for(const r of e)i(r,o);this.focusController.updateElements(o)};render(){return e(o,{key:"79e2d77c9aca02fb3ef2e58d241664598253334b",role:"menu","aria-label":this.label||void 0,class:"lmvz-wrapper-card-sm"},e("slot",{key:"941b875a5be536c3d0e2ff9287da5af1a416d356",onSlotchange:this.handleSlotChange,ref:r=>this.slotEl=r}))}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-4-8, 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); } } @layer lmvz-ds.components { .lmvz-wrapper-card-sm, .lmvz-wrapper-card-md, .lmvz-wrapper-card-lg { background: var(--lmvz-semantic-color-surface-primary, #ffffff); box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11)); } .lmvz-wrapper-card-sm { padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); } .lmvz-wrapper-card-md { padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); } .lmvz-wrapper-card-lg { padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; lmvz-button, button { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary, #000000); --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)); width: 100%; display: block; &:hover { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } &:active { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } } .lmvz-action-list-item--danger { --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); &:hover { --lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2); --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); } &:active { --lmvz-button-background-override: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2); --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); } } }"}},[774,"lmvz-action-list",{label:[1]}]);function i(r,e){const o=r.tagName.toLowerCase();return"lmvz-button"===o?(r.buttonRole="menuitem",void e.push(r)):"button"===o?(r.setAttribute("role","menuitem"),void e.push(r)):void("hr"!==o&&("group"!==r.getAttribute("role")?console.warn("Unexpected element encountered in ActionList:",o):r.querySelectorAll("lmvz-button, button").forEach((r=>i(r,e)))))}const d=l,v=function(){"undefined"!=typeof customElements&&["lmvz-action-list"].forEach((r=>{"lmvz-action-list"===r&&(customElements.get(t(r))||customElements.define(t(r),l))}))};export{d as LmvzActionList,v as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as o,d as s}from"./p-
|
|
1
|
+
import{L as o,d as s}from"./p-DeO5Vbxh.js";const p=o,r=s;export{p as LmvzButtonGroup,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as o,d as s}from"./p-
|
|
1
|
+
import{L as o,d as s}from"./p-B0H9qIwE.js";const p=o,r=s;export{p as LmvzButton,r as defineCustomElement}
|
package/components/lmvz-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as t,p as e,H as r,c as o,h as a,d as n,t as m}from"./p-DGg7OzDl.js";const l=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.primaryAction=o(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((e,r)=>{const o=function(...t){return t.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",r,e);try{return t(o)}catch{return console.warn(`Failed to create URL for asset "${e}" in path "${r}".\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(t){console.log(t)}render(){return a(n,{key:"2d9ecdeed986f142fb7ff477b56dece59549bbc7",role:"article"},a("div",{key:"34fc9c3a1338b31ce73424e8c07c79a291ead85c",class:"top"},a("div",{key:"1756e6b26d7f42499753c36ed0fc13755fe32bfe",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"cd8be8acc9e949092b6363024316d12d445a9fbc",class:"chip-slot"},a("slot",{key:"26389ab3b7031b948ff1701857e6028446662cf5",name:"chip"})))),a("div",{key:"2fa61cd7bef437f15929ae39be7fa294e8778321",class:"bottom"},a("header",{key:"b237ca025e42a29f528f827dc3c83b3b0f9267c0"},a("h2",{key:"ffd0a509ba97acb75d4c15d0fd01eef08689a2a7",class:"title"},this.cardTitle)),a("p",{key:"c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1",class:"description"},this.description),a("div",{key:"7663f93b41ef1e798b464bd6ad75ca8a53c0667b",class:"actions"},a("button",{key:"3348e6700aa1571183558ab8fe4f73393c1cc943",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"d3a12cdabbdd68c3b04e06984db44abd3bbd22ea",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"80e31e6b691e18d1b42a2b4831349c3abf8e02b0",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; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 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-secondary, #f0f0f0); 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); min-height: 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-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-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } 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-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .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: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 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-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.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=l,c=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((t=>{"lmvz-card"===t&&(customElements.get(m(t))||customElements.define(m(t),l))}))};export{i as LmvzCard,c 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-DGg7OzDl.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-4-8, 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-body-md-strong, 500 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: 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); 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-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.secondary { --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-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000)); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000)); } 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-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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-body-lg-strong, 500 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-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.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 c,d as r,t}from"./p-DGg7OzDl.js";import{t as a}from"./p-CcxjkCOx.js";import{A as l}from"./p-C8znmF2h.js";import{R as s}from"./p-DAMVH-31.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 c(r,{key:"cea4a962a76cab10c27adc6742fe0686b2ce6dbe"},c("div",{key:"1addfd795587de85ecbc632fbeb45026a4e46050",class:"pill"},c("input",{key:"8957359d0cc3f2c315badee7e20fcc81e85e0f00",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:"400dbe9379ceb4aceeb431fe6060c82b41009cda",class:"box","aria-hidden":"true"},this.checkedState&&c("span",{key:"9612093e65346b419ec8e4469fea7f00fe4c3ff4",class:"indicator",innerHTML:i})),c("span",{key:"fd1136ea0726941bc400b8970f7cae4bb3b59363",class:"content"},c("label",{key:"a06deb2d4bc76efb884701a17e4a28420a99965c",htmlFor:this.checkboxId},this.label),this.helperText&&c("span",{key:"2bd33f14062bedbb0609dff3ac7fbcee6fa16f21",onClick:this.retargetInnerClicks.bind(this),class:"helper-text",id:this.helperId,role:"status"},this.helperText))),this.errorMessage&&c("span",{key:"ac4fcb6f0a2de16a17f0287e42b70b6339a50acc",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, #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, #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, #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); 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.69rem, 0.67rem + 0.06vw, 0.75rem) / 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.69rem, 0.67rem + 0.06vw, 0.75rem) / 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}]}]),b=n,d=function(){"undefined"!=typeof customElements&&["lmvz-checkbox"].forEach((e=>{"lmvz-checkbox"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))};export{b as LmvzCheckbox,d as defineCustomElement}
|
|
1
|
+
import{p as e,c as o,h as r,d as c,t}from"./p-DGg7OzDl.js";import{t as a}from"./p-CcxjkCOx.js";import{A as l}from"./p-C8znmF2h.js";import{R as s}from"./p-DAMVH-31.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, #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, #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, #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); 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.69rem, 0.67rem + 0.06vw, 0.75rem) / 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.69rem, 0.67rem + 0.06vw, 0.75rem) / 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}
|
package/components/lmvz-chip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,h as o,d as r,t}from"./p-DGg7OzDl.js";import{
|
|
1
|
+
import{p as e,h as o,d as r,t}from"./p-DGg7OzDl.js";import{f as a,g as s}from"./p-DuEtnKRj.js";import{A as l}from"./p-C8znmF2h.js";import{R as c}from"./p-DAMVH-31.js";import{i as n}from"./p-CdDO7mQa.js";const i=e(class extends c{ariaValidationController=new l(this);beforeSlot;defaultSlot;afterSlot;get el(){return this}get validationEl(){return this.el}type="active";size="default";constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.addController(this.ariaValidationController)}normalizeType(e){const o=a.includes(e)?e:"active";o!==this.type&&(this.type=o)}normalizeSize(e){const o=s.includes(e)?e:"default";o!==this.size&&(this.size=o)}componentWillLoad(){this.normalizeType(this.type),this.normalizeSize(this.size),super.componentWillLoad()}connectedCallback(){super.connectedCallback(),this.checkContent()}checkContent=function(e){let o;return()=>{void 0!==o&&window.clearTimeout(o),o=window.setTimeout((()=>{e(),o=void 0}),500)}}((()=>{n()&&([...this.beforeSlot?.assignedElements()??[],...this.defaultSlot?.assignedElements()??[],...this.afterSlot?.assignedElements()??[]].length||console.warn("LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots."))}));render(){return o(r,{key:"f326ca8e4dba40941db6b9a711ba46989c4cf1b3",type:this.type,size:this.size},o("slot",{key:"f9925e107c2e474ecbaca756451dc4249000b0db",name:"before-text",ref:e=>this.beforeSlot=e,onSlotchange:()=>this.checkContent()}),o("span",{key:"0b6ea980e0b0500d2955a03088d08eb2ca67f64f",class:"content-overflow-wrapper"},o("slot",{key:"2b7f5c02e9a09128e0a404c7fe35f6278ce1fa61",ref:e=>this.defaultSlot=e,onSlotchange:()=>this.checkContent()})),o("slot",{key:"929291cdaccf26d332823f9a100c6b6a84dc04f2",name:"after-text",ref:e=>this.afterSlot=e,onSlotchange:()=>this.checkContent()}))}static get watchers(){return{type:[{normalizeType:0}],size:[{normalizeSize:0}]}}static get style(){return":host { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); border: 1px solid var(--lmvz-chip-border-color); border-radius: var(--lmvz-semantic-border-radius-round, 999px); font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5 Router); background-color: var(--lmvz-chip-background-color); color: var(--lmvz-chip-foreground-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); box-sizing: border-box; max-width: 100%; overflow: hidden; white-space: nowrap; > .content-overflow-wrapper { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } :host([size='small']) { padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } ::slotted(*) { display: inline; white-space: inherit; } ::slotted(lmvz-icon) { --lmvz-component-color: var(--lmvz-chip-foreground-color); --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } :host([type='warning']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00); } :host([type='success']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c); } :host([type='error']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } :host([type='neutral']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); } "}},[769,"lmvz-chip",{type:[1537],size:[1537]},void 0,{type:[{normalizeType:0}],size:[{normalizeSize:0}]}]),m=i,v=function(){"undefined"!=typeof customElements&&["lmvz-chip"].forEach((e=>{"lmvz-chip"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))};export{m as LmvzChip,v as defineCustomElement}
|