@lmvz-ds/components 0.18.1 → 0.19.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 +12 -0
- package/README.md +45 -100
- package/cjs/ds.constants-DSnxZ3ia.js +16 -0
- package/cjs/{icons-swqMn6s2.js → icons-Tg7ySOh-.js} +54 -38
- package/cjs/index.cjs.js +9 -10
- package/cjs/lmvz-action.cjs.entry.js +1 -1
- package/cjs/lmvz-button.cjs.entry.js +2 -2
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-chip.cjs.entry.js +68 -4
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +2 -2
- package/cjs/lmvz-icon.cjs.entry.js +6 -6
- package/cjs/lmvz-input.cjs.entry.js +3 -3
- package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
- package/cjs/lmvz-select.cjs.entry.js +2 -2
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{reactive-controller-host-CtaVAiYJ.js → reactive-controller-host-Bi9eu2bV.js} +9 -9
- package/collection/api/ds.constants.js +2 -0
- package/collection/components/lmvz-action/lmvz-action.js +1 -1
- package/collection/components/lmvz-button/lmvz-button.js +6 -3
- package/collection/components/lmvz-card/lmvz-card.js +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.css +84 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +110 -13
- package/collection/components/lmvz-header/lmvz-header.js +2 -2
- package/collection/components/lmvz-icon/lmvz-icon.css +11 -10
- package/collection/components/lmvz-icon/lmvz-icon.js +7 -6
- package/collection/components/lmvz-input/lmvz-input.js +4 -4
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +11 -5
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/index.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/aria/aria-validation-controller.js +1 -0
- package/collection/utils/reactive-controller-host.js +9 -9
- package/components/index.d.ts +9 -9
- package/components/index.d.ts.bak +10 -10
- package/components/index.js +1 -1
- package/components/lmvz-action.d.ts +1 -1
- package/components/lmvz-action.d.ts.bak +1 -1
- package/components/lmvz-action.js +1 -1
- package/components/lmvz-button.d.ts +1 -1
- package/components/lmvz-button.d.ts.bak +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.d.ts +1 -1
- package/components/lmvz-card.d.ts.bak +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-chip.d.ts +1 -1
- package/components/lmvz-chip.d.ts.bak +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.d.ts +1 -1
- package/components/lmvz-header.d.ts.bak +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.d.ts +1 -1
- package/components/lmvz-icon.d.ts.bak +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.d.ts +1 -1
- package/components/lmvz-input.d.ts.bak +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.d.ts +1 -1
- package/components/lmvz-menuitem.d.ts.bak +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-select.d.ts +1 -1
- package/components/lmvz-select.d.ts.bak +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/{p-DQEkWkMh.js → p-DIrAQ4IB.js} +1 -1
- package/esm/{aria-loader-BF_AYtbb.js → aria-loader-CES8Ae1e.js} +1 -1
- package/esm/ds.constants-Bmi89ll1.js +9 -0
- package/esm/{icons-Ca8oMiRa.js → icons-Bj4dF1-I.js} +55 -40
- package/esm/{index-7Ru1khgk.js → index-BvxaUA12.js} +1 -1
- package/esm/index.js +4 -11
- package/esm/lmvz-action.entry.js +1 -1
- package/esm/lmvz-button.entry.js +3 -3
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-chip.entry.js +69 -5
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-icon.entry.js +7 -7
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-menuitem.entry.js +3 -3
- package/esm/lmvz-select.entry.js +3 -3
- package/esm/loader.js +1 -1
- package/esm/{logger-fiRXhuXK.js → logger-0bL3pydp.js} +1 -1
- package/esm/{reactive-controller-host-sR2jJxNG.js → reactive-controller-host-J2thAxVH.js} +10 -10
- package/hydrate/index.js +94 -29
- package/hydrate/index.mjs +94 -29
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-fiRXhuXK.js → p-0bL3pydp.js} +1 -1
- package/lmvz-components/p-40569208.entry.js +1 -0
- package/lmvz-components/p-43e295ba.entry.js +1 -0
- package/lmvz-components/p-49ab22bd.entry.js +1 -0
- package/lmvz-components/{p-bbab5471.entry.js → p-6e8acbd9.entry.js} +1 -1
- package/lmvz-components/{p-872e2106.entry.js → p-7a6bec13.entry.js} +1 -1
- package/lmvz-components/{p-ff6a0267.entry.js → p-9212bd23.entry.js} +1 -1
- package/lmvz-components/p-9626e951.entry.js +1 -0
- package/lmvz-components/p-Bmi89ll1.js +1 -0
- package/lmvz-components/p-Bu4Z_PMf.js +1 -0
- package/lmvz-components/{p-Bkfdgg0T.js → p-BxHnZA0M.js} +1 -1
- package/lmvz-components/{p-DXOTa5VF.js → p-DHZwxmLb.js} +1 -1
- package/lmvz-components/{p-B3dnXEPG.js → p-DYaffOLo.js} +1 -1
- package/lmvz-components/{p-c7e368c4.entry.js → p-e1b847d2.entry.js} +1 -1
- package/lmvz-components/{p-80675ee5.entry.js → p-ec96c6b6.entry.js} +1 -1
- package/manifest.json +139 -32
- package/package.json +1 -1
- package/types/api/ds.constants.d.ts +6 -1
- package/types/components/lmvz-action/lmvz-action.d.ts +0 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +0 -1
- package/types/components/lmvz-card/lmvz-card.d.ts +0 -1
- package/types/components/lmvz-chip/lmvz-chip.d.ts +18 -3
- package/types/components/lmvz-header/lmvz-header.d.ts +0 -1
- package/types/components/lmvz-icon/lmvz-icon.d.ts +0 -1
- package/types/components/lmvz-input/lmvz-input.d.ts +0 -1
- package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +0 -1
- package/types/components/lmvz-select/lmvz-select.d.ts +0 -1
- package/types/components.d.ts +70 -12
- package/types/index.d.ts +1 -2
- package/types/utils/aria/aria-validation-controller.d.ts +1 -2
- package/types/utils/aria/element-activation-controller.d.ts +0 -1
- package/types/utils/aria/list-keyboard-controller.d.ts +0 -1
- package/types/utils/assets.d.ts +0 -1
- package/types/utils/component.d.ts +0 -1
- package/types/utils/environment.d.ts +0 -1
- package/types/utils/http.d.ts +0 -1
- package/types/utils/http.unit.d.ts +0 -1
- package/types/utils/icons/icons-registry.d.ts +0 -1
- package/types/utils/icons/icons.d.ts +0 -1
- package/types/utils/icons/icons.unit.d.ts +0 -1
- package/types/utils/icons/public.d.ts +0 -1
- package/types/utils/public.d.ts +0 -1
- package/types/utils/reactive-controller-host.d.ts +0 -1
- package/lmvz-components/p-0f645295.entry.js +0 -1
- package/lmvz-components/p-1506fa34.entry.js +0 -1
- package/lmvz-components/p-658c5c34.entry.js +0 -1
- package/lmvz-components/p-93038c98.entry.js +0 -1
- package/lmvz-components/p-Bh2Epkwf.js +0 -1
- /package/components/{p-CBLAeife.js → p-DbeHBSOe.js} +0 -0
|
@@ -21,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
21
21
|
this.addController(new ElementActivationController(this));
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: '0878343aec1c98c16c073c6cdd3382ee5c980799' }, h("slot", { key: 'f7a87d4c9d786bb4686d406d4313e9b5d79701d6', ref: (e) => (this.validationSlot = e) })));
|
|
25
25
|
}
|
|
26
26
|
static get is() { return "lmvz-menuitem"; }
|
|
27
27
|
static get encapsulation() { return "scoped"; }
|
|
@@ -48,8 +48,11 @@ export class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
48
48
|
"required": false,
|
|
49
49
|
"optional": false,
|
|
50
50
|
"docs": {
|
|
51
|
-
"tags": [
|
|
52
|
-
|
|
51
|
+
"tags": [{
|
|
52
|
+
"name": "default",
|
|
53
|
+
"text": "'menuitem'"
|
|
54
|
+
}],
|
|
55
|
+
"text": "Accessibility role exposed by the host element."
|
|
53
56
|
},
|
|
54
57
|
"getter": true,
|
|
55
58
|
"setter": false,
|
|
@@ -68,8 +71,11 @@ export class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
68
71
|
"required": false,
|
|
69
72
|
"optional": false,
|
|
70
73
|
"docs": {
|
|
71
|
-
"tags": [
|
|
72
|
-
|
|
74
|
+
"tags": [{
|
|
75
|
+
"name": "default",
|
|
76
|
+
"text": "0"
|
|
77
|
+
}],
|
|
78
|
+
"text": "Keeps the host focusable for keyboard navigation inside `lmvz-header`."
|
|
73
79
|
},
|
|
74
80
|
"getter": true,
|
|
75
81
|
"setter": false,
|
|
@@ -50,7 +50,7 @@ export class LmvzSelect extends ReactiveControllerHost {
|
|
|
50
50
|
render() {
|
|
51
51
|
const hasValue = this.hasValue;
|
|
52
52
|
const shouldShowLabel = hasValue;
|
|
53
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: 'b9f6211fec35e7c03cc9c462cb1f8eb60fc6c96c' }, h("div", { key: '43d22daa1492f87f89f9479687b82ee893f10faa', class: "select-wrapper" }, h("label", { key: 'cf399d80e31a345cea60286db4aea2d7dd7973d1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '6bdd8e0d652f126eb1c64c2a647ac0816cc61b05', "aria-hidden": "true" }, " *")), h("div", { key: '5d8497c64e197a71003a0c8e11149993fcefd684', "aria-hidden": "true" }, h("span", { key: '95b73705ad81d000ce415a377002e4ae4d63aae6' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '2ff855f0fa89d3c66c59a176f855fdbf18ecb6c2', "aria-hidden": "true" }, " *")), h("span", { key: 'a66d4ec65c95b1463223c07aecb17d65a45c6b24' }, h("img", { key: '4cd21532ff13a3ecbd229cd79d0a3fa7b3eafc60', src: chevronDownSvg, alt: "" }))), h("select", { key: '2a9e46e29f8ef7d116989b58abfacee840dd2275', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '5c5fa4d5e3b120a0085f6fc408d20a56f6547441', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'e11909e901624af7d9d5275f2e9715007960eab9' }))), this.helperText && h("div", { key: 'fa0d06d3294f303081fd5ffb9aeaff6a8e297901', role: "status" }, this.helperText)));
|
|
54
54
|
}
|
|
55
55
|
static get is() { return "lmvz-select"; }
|
|
56
56
|
static get encapsulation() { return "scoped"; }
|
package/collection/index.js
CHANGED
|
@@ -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: 'c34834b520d3afa96808822af5e54f8b6f0bff93' }, h("lmvz-header", { key: '044a5a293052e2c850623e38a49a32ce6df599bf', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '37b0bf2ed85fd36bbf98e4701d03e5f0786d8989', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '7c8d2de074662a27b72bea957c836fcc354ee1d9', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '64f27e03234382ccc0cfa52b8e71537fb6f67bc3', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '5d4f53495f8ce7d10940598a0c97e767b857ec58', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'f74f6e81fc894c0ff9882e32af9e6c01c388cb54', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'b4be5b1a26f47d6163811ad273bc1d556e2f5230', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '376bc7fa9720ff23cf596c990ab611de9721b512', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '4b74f0bc6c470d91193370b17bcc985bd530997c', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '3918a6354633b65e3fcad1fddca2e540a84356e3', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '9d2fdf3bf79a49c2c69447c37e1e0c324fbfaebe', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '8724a35093a6e5e100b55355f5490e5aed510bb8', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'cbf0ac1cd107415949b7f2e7ea9ee188211a3e80', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '68d6b62bdcae2250e9385663358b1c10a7a58afc', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '38eb509264c242cad252f6bd633b48747c4c71ca', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "header-integration"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, enableAriaValidation, isAriaValidationEnabled, queueValidation, useVerboseLogging, } from "@lmvz-ds/aria-validation";
|
|
2
2
|
import { Build } from "@stencil/core";
|
|
3
|
+
export { isAriaValidationEnabled } from '@lmvz-ds/aria-validation';
|
|
3
4
|
if (Build.isDev && Build.isBrowser) {
|
|
4
5
|
enableAriaValidation();
|
|
5
6
|
}
|
|
@@ -7,33 +7,33 @@ export class ReactiveControllerHost {
|
|
|
7
7
|
this.controllers.delete(controller);
|
|
8
8
|
}
|
|
9
9
|
get activeControllers() {
|
|
10
|
-
return Array.from(this.controllers).filter(controller => !controller.disabled);
|
|
10
|
+
return Array.from(this.controllers).filter((controller) => !controller.disabled);
|
|
11
11
|
}
|
|
12
12
|
connectedCallback() {
|
|
13
13
|
if (!this.controllers.size) {
|
|
14
14
|
console.warn('ReactiveControllerHost connected with no controllers registered.', this);
|
|
15
15
|
}
|
|
16
|
-
this.activeControllers.forEach(controller => controller.hostConnected?.());
|
|
16
|
+
this.activeControllers.forEach((controller) => controller.hostConnected?.());
|
|
17
17
|
}
|
|
18
18
|
disconnectedCallback() {
|
|
19
|
-
this.activeControllers.forEach(controller => controller.hostDisconnected?.());
|
|
19
|
+
this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
|
|
20
20
|
}
|
|
21
21
|
componentWillLoad() {
|
|
22
|
-
this.activeControllers.forEach(controller => controller.hostWillLoad?.());
|
|
22
|
+
this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
|
|
23
23
|
}
|
|
24
24
|
componentDidLoad() {
|
|
25
|
-
this.activeControllers.forEach(controller => controller.hostDidLoad?.());
|
|
25
|
+
this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
|
|
26
26
|
}
|
|
27
27
|
componentWillRender() {
|
|
28
|
-
this.activeControllers.forEach(controller => controller.hostWillRender?.());
|
|
28
|
+
this.activeControllers.forEach((controller) => controller.hostWillRender?.());
|
|
29
29
|
}
|
|
30
30
|
componentDidRender() {
|
|
31
|
-
this.activeControllers.forEach(controller => controller.hostDidRender?.());
|
|
31
|
+
this.activeControllers.forEach((controller) => controller.hostDidRender?.());
|
|
32
32
|
}
|
|
33
33
|
componentWillUpdate() {
|
|
34
|
-
this.activeControllers.forEach(controller => controller.hostWillUpdate?.());
|
|
34
|
+
this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
|
|
35
35
|
}
|
|
36
36
|
componentDidUpdate() {
|
|
37
|
-
this.activeControllers.forEach(controller => controller.hostDidUpdate?.());
|
|
37
|
+
this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
|
|
38
38
|
}
|
|
39
39
|
}
|
package/components/index.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
/* LmvzComponents custom elements */
|
|
2
|
-
export { LmvzAction as LmvzAction } from '
|
|
2
|
+
export { LmvzAction as LmvzAction } from '../../types/components/lmvz-action/lmvz-action';
|
|
3
3
|
export { defineCustomElement as defineCustomElementLmvzAction } from './lmvz-action';
|
|
4
|
-
export { LmvzButton as LmvzButton } from '
|
|
4
|
+
export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmvz-button';
|
|
5
5
|
export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
|
|
6
|
-
export { LmvzCard as LmvzCard } from '
|
|
6
|
+
export { LmvzCard as LmvzCard } from '../../types/components/lmvz-card/lmvz-card';
|
|
7
7
|
export { defineCustomElement as defineCustomElementLmvzCard } from './lmvz-card';
|
|
8
|
-
export { LmvzChip as LmvzChip } from '
|
|
8
|
+
export { LmvzChip as LmvzChip } from '../../types/components/lmvz-chip/lmvz-chip';
|
|
9
9
|
export { defineCustomElement as defineCustomElementLmvzChip } from './lmvz-chip';
|
|
10
|
-
export { LmvzHeader as LmvzHeader } from '
|
|
10
|
+
export { LmvzHeader as LmvzHeader } from '../../types/components/lmvz-header/lmvz-header';
|
|
11
11
|
export { defineCustomElement as defineCustomElementLmvzHeader } from './lmvz-header';
|
|
12
|
-
export { LmvzIcon as LmvzIcon } from '
|
|
12
|
+
export { LmvzIcon as LmvzIcon } from '../../types/components/lmvz-icon/lmvz-icon';
|
|
13
13
|
export { defineCustomElement as defineCustomElementLmvzIcon } from './lmvz-icon';
|
|
14
|
-
export { LmvzInput as LmvzInput } from '
|
|
14
|
+
export { LmvzInput as LmvzInput } from '../../types/components/lmvz-input/lmvz-input';
|
|
15
15
|
export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
|
|
16
|
-
export { LmvzMenuItem as LmvzMenuitem } from '
|
|
16
|
+
export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuitem/lmvz-menuitem';
|
|
17
17
|
export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
|
|
18
|
-
export { LmvzSelect as LmvzSelect } from '
|
|
18
|
+
export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmvz-select';
|
|
19
19
|
export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
/* LmvzComponents custom elements */
|
|
2
|
-
export { LmvzAction as LmvzAction } from '
|
|
2
|
+
export { LmvzAction as LmvzAction } from '../../types/components/lmvz-action/lmvz-action';
|
|
3
3
|
export { defineCustomElement as defineCustomElementLmvzAction } from './lmvz-action';
|
|
4
|
-
export { LmvzButton as LmvzButton } from '
|
|
4
|
+
export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmvz-button';
|
|
5
5
|
export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
|
|
6
|
-
export { LmvzCard as LmvzCard } from '
|
|
6
|
+
export { LmvzCard as LmvzCard } from '../../types/components/lmvz-card/lmvz-card';
|
|
7
7
|
export { defineCustomElement as defineCustomElementLmvzCard } from './lmvz-card';
|
|
8
|
-
export { LmvzChip as LmvzChip } from '
|
|
8
|
+
export { LmvzChip as LmvzChip } from '../../types/components/lmvz-chip/lmvz-chip';
|
|
9
9
|
export { defineCustomElement as defineCustomElementLmvzChip } from './lmvz-chip';
|
|
10
|
-
export { LmvzHeader as LmvzHeader } from '
|
|
10
|
+
export { LmvzHeader as LmvzHeader } from '../../types/components/lmvz-header/lmvz-header';
|
|
11
11
|
export { defineCustomElement as defineCustomElementLmvzHeader } from './lmvz-header';
|
|
12
|
-
export { LmvzIcon as LmvzIcon } from '
|
|
12
|
+
export { LmvzIcon as LmvzIcon } from '../../types/components/lmvz-icon/lmvz-icon';
|
|
13
13
|
export { defineCustomElement as defineCustomElementLmvzIcon } from './lmvz-icon';
|
|
14
|
-
export { LmvzInput as LmvzInput } from '
|
|
14
|
+
export { LmvzInput as LmvzInput } from '../../types/components/lmvz-input/lmvz-input';
|
|
15
15
|
export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
|
|
16
|
-
export { LmvzMenuItem as LmvzMenuitem } from '
|
|
16
|
+
export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuitem/lmvz-menuitem';
|
|
17
17
|
export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
|
|
18
|
-
export { LmvzSelect as LmvzSelect } from '
|
|
18
|
+
export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmvz-select';
|
|
19
19
|
export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -52,4 +52,4 @@ export interface SetPlatformOptions {
|
|
|
52
52
|
}
|
|
53
53
|
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
54
54
|
|
|
55
|
-
export * from '
|
|
55
|
+
export * from '../../types';
|
package/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-C_bScbrd.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-C_bScbrd.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-DbeHBSOe.js";export{LmvzChip,c as chipSizes,a as chipTypes,defineCustomElement as defineCustomElementLmvzChip,i as iconSizes,b as iconWeights,d as inputTypes,t as textSizes}from"./lmvz-chip.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon,g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./lmvz-icon.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,c,h as e,d as i,t as o}from"./p-C_bScbrd.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.actionClick=c(this,"actionClick")}actionClick;_onClick(t){this.actionClick.emit(t)}render(){return e(i,{key:"
|
|
1
|
+
import{p as t,H as s,c,h as e,d as i,t as o}from"./p-C_bScbrd.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.actionClick=c(this,"actionClick")}actionClick;_onClick(t){this.actionClick.emit(t)}render(){return e(i,{key:"15c0f20e08cd5019abfd3bb71ec69d175dc5ba48",onClick:this._onClick.bind(this)},e("slot",{key:"f71a7853168d1b66b0a50b0f971d140385530ac3"}))}static get style(){return":host{display:block}"}},[257,"lmvz-action"]),a=n,l=function(){"undefined"!=typeof customElements&&["lmvz-action"].forEach((t=>{"lmvz-action"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))};export{a as LmvzAction,l as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,c as o,h as
|
|
1
|
+
import{p as t,c as o,h as e,d as r,t as n}from"./p-C_bScbrd.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,a as m}from"./p-DbeHBSOe.js";import{E as i}from"./p-CN0JX9-m.js";import{i as s,f as d}from"./p-DIrAQ4IB.js";const c=t(class extends l{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant="secondary";disabled=!1;type="button";form;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation"),this.addController(new m(this)),this.addController(new i(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=s(this.el),super.connectedCallback()}renderHiddenButton(){const t=this.formEl=d(this.form,this.el);if(!t)return;const{formButtonEl:o}=this;if(null!==o&&t.contains(o))return;const e=this.formButtonEl=document.createElement("button");e.type="submit",e.style.display="none",e.disabled=this.disabled,t.appendChild(e)}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),e(r,{key:"ce82e749ffb9172a9421d303e0d7cc02de58dff9","aria-disabled":this.disabled?"true":null},e("button",{key:"acd0773f72e76139ec5495eb15fc3a5949029e40",ref:t=>this.validationEl=t,disabled:this.disabled,class:a(this.variant,{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"f519e0f82e68811a8831214e83e609bd9501fed0"})))}static get delegatesFocus(){return!0}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: contents; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1]}]),v=c,u=function(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))};export{v as LmvzButton,u as defineCustomElement}
|
package/components/lmvz-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as e,p as r,H as t,c as a,h as o,d as n,t as l}from"./p-C_bScbrd.js";const m=r(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.primaryAction=a(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((r,t)=>{const a=function(...e){return e.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",t,r);try{return e(a)}catch{return console.warn(`Failed to create URL for asset "${r}" in path "${t}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(a,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){return o(n,{key:"fceb19eb0d7ad6c6aecfa6fbd5bb6425c7c3e312",role:"article"},o("div",{key:"4cb516b5dee1f2f84f21984fa350f61fd83c771c",class:"top"},o("div",{key:"713b2a3245d885a9b99f6c7d54a35053699c1be8",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},o("div",{key:"e8ea65e7f5d11a2335cab950d6bf02208d0b18a1",class:"chip-slot"},o("slot",{key:"e9a039742107fdf56216186ddcdf367c4432790b",name:"chip"})))),o("div",{key:"9549e46a1872e0edf298b79435d298aa1ae96a37",class:"bottom"},o("header",{key:"3bbfb72ecec519d16380ae7e00da4b1ccb6f1cf3"},o("h2",{key:"f5a33e498893e61b407c10ab36c9a93b7eecf9f1",class:"title"},this.cardTitle)),o("p",{key:"19709bb100d014369c836a5a7174772f2d095d2e",class:"description"},this.description),o("div",{key:"06b5acab3c80cc91865f3aa39da32d42f470348e",class:"actions"},o("button",{key:"4e954452ac9771359c881aa6b43f11e89e38aecf",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),o("button",{key:"b6a682bf95eb26468c450bed494290565288a515",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},o("span",{key:"70a526d1fafd8b7051f6e7107b35d6f594e10d68",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),i=m,c=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((e=>{"lmvz-card"===e&&(customElements.get(l(e))||customElements.define(l(e),m))}))};export{i as LmvzCard,c as defineCustomElement}
|
|
1
|
+
import{g as e,p as r,H as t,c as a,h as o,d as n,t as l}from"./p-C_bScbrd.js";const m=r(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.primaryAction=a(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((r,t)=>{const a=function(...e){return e.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",t,r);try{return e(a)}catch{return console.warn(`Failed to create URL for asset "${r}" in path "${t}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(a,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){return o(n,{key:"46c2832b4f90b9eb222749632bc7ad59cd645e10",role:"article"},o("div",{key:"cc387fe96cff2dd04c24f75cf838a2bf6f438279",class:"top"},o("div",{key:"f9a54a5f81378ef4265e1d74c36c78af002e8874",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},o("div",{key:"76daed00408f7ae9ee46977637ddcd3d4f846380",class:"chip-slot"},o("slot",{key:"6ad522ef7428166b876d0218ef8d801c4ef337f1",name:"chip"})))),o("div",{key:"9c9799668ac199cfecbe10061e271d70d70e2d07",class:"bottom"},o("header",{key:"1bec743235bea5c7ab163225ffbd7bc6cf11f754"},o("h2",{key:"06f8e14153328bc5ca920e71e09d9343047c440c",class:"title"},this.cardTitle)),o("p",{key:"86b95db4e6464ca3236b4a03798013c3580819bf",class:"description"},this.description),o("div",{key:"553dc998d5318a4730196baa0b9baff3a0a3369f",class:"actions"},o("button",{key:"7532d01b46769198c23a1b1015c187fdefce146a",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),o("button",{key:"633d679ae59b1896aa2a06e04b4564569cf27a7d",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},o("span",{key:"b72c45f93d259502b9d7c5ffb19e292a53c60ec6",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),c=m,i=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((e=>{"lmvz-card"===e&&(customElements.get(l(e))||customElements.define(l(e),m))}))};export{c as LmvzCard,i as defineCustomElement}
|
package/components/lmvz-chip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,h as o,d as r,t}from"./p-C_bScbrd.js";import{R as a,a as s,i as l}from"./p-DbeHBSOe.js";const c=["xs","sm","md","lg"],n=[...c,"xl"],i=["text","email","password","tel","url","search","number"],m=[...c,"inherit"],v=["thin","medium","bold","filled"],d=["active","warning","success","error","neutral"],p=["default","small"],u=e(class extends a{ariaValidationController=new s(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=d.includes(e)?e:"active";o!==this.type&&(this.type=o)}normalizeSize(e){const o=p.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)}}((()=>{l&&([...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:"d34b677a3f6ac2cdb53453c774badb837a3b9e25",type:this.type,size:this.size},o("slot",{key:"c6f8beea28cd847f8d8b7c7a075c774f58e39262",name:"before-text",ref:e=>this.beforeSlot=e,onSlotchange:()=>this.checkContent()}),o("span",{key:"be784ef977bc1d0eae2fd2d9377642636bd325bc",class:"content-overflow-wrapper"},o("slot",{key:"3730f2902bcae7917979dedd91264670fbff00de",ref:e=>this.defaultSlot=e,onSlotchange:()=>this.checkContent()})),o("slot",{key:"f827a03e407385c7bdfd483073453d97f6f73afb",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.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 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.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4 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, #f1f9fe); --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}]}]),h=u,z=function(){"undefined"!=typeof customElements&&["lmvz-chip"].forEach((e=>{"lmvz-chip"===e&&(customElements.get(t(e))||customElements.define(t(e),u))}))};export{h as LmvzChip,d as a,v as b,p as c,i as d,z as defineCustomElement,m as i,n as t}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as M,h as N,d as e,t as I}from"./p-C_bScbrd.js";import{R as j,a as D}from"./p-
|
|
1
|
+
import{p as M,h as N,d as e,t as I}from"./p-C_bScbrd.js";import{R as j,a as D}from"./p-DbeHBSOe.js";import{g,a}from"./p-DIrAQ4IB.js";class i{host;elements=[];constructor(M){this.host=M}hostDidRender(){this.host.el.addEventListener("keydown",this.handleKeydown)}updateElements(M){this.elements=M}handleKeydown=M=>{const{key:N}=M;if(!["ArrowDown","ArrowRight","ArrowUp","ArrowLeft"].includes(N))return;const e=g(document),I=this.getNextFocusableElement(e,["ArrowDown","ArrowRight"].includes(N)?"down":"up");I&&(M.preventDefault(),I.focus?.())};getNextFocusableElement(M,N){if(!M)return;const{elements:e}=this,I=e.indexOf(M);if(-1===I)return;let j;if("down"===N?j=(I+1)%e.length:"up"===N&&(j=(I-1+e.length)%e.length),null==j)return;const D=e[j];return a(D)?D:this.getNextFocusableElement(D,N)}}const u=M(class extends j{get el(){return this}get validationEl(){return this.el}primarySlot;secondarySlot;secondaryNav;keyboardNavigationController=new i(this);get primaryMenuitems(){return this.primarySlot?.assignedElements({flatten:!1})||[]}get secondaryMenuitems(){return this.secondarySlot?.assignedElements({flatten:!0})||[]}get role(){return"banner"}lmvzActiveNav;get secondarySlotName(){return"connect-nav-"+this.lmvzActiveNav}constructor(M){super(!1),!1!==M&&this.__registerHost(),this.__attachShadow(),this.addController(new D(this,{reValidateOnPropChanges:!0})),this.addController(this.keyboardNavigationController)}handleActiveNavChange(){this.updateElementsActive()}componentDidLoad(){this.primarySlot?.addEventListener("slotchange",this.handlePrimaryNavItemsChange.bind(this)),this.handlePrimaryNavItemsChange(),this.secondarySlot?.addEventListener("slotchange",this.handleSecondaryNavItemsChange.bind(this)),super.componentDidLoad()}handlePrimaryNavItemsChange(){const M=this.primaryMenuitems;M.length?(M.forEach((M=>{M.setAttribute("aria-haspopup","true"),M.setAttribute("aria-controls","nav-secondary")})),this.updateElementsActive(),this.updateKeyboardNavSubjects()):console.warn("Primary slot has no assigned elements. Please add navigation items to the primary slot.")}handleSecondaryNavItemsChange(){this.secondaryMenuitems.length&&this.updateKeyboardNavSubjects()}updateKeyboardNavSubjects(){this.keyboardNavigationController.updateElements([...this.primaryMenuitems,...this.secondaryMenuitems])}updateElementsActive(){const M=this.primaryMenuitems;if(!M.length)return;let N="";M.forEach((M=>{const e=M.id===this.lmvzActiveNav;e&&(N=M.textContent||M.id),M.setAttribute("aria-expanded",e?"true":"false")})),N&&this.secondaryNav?.setAttribute("aria-label","Untermenü für "+N)}delegateFocus(){const M=this.primaryMenuitems[0];M&&M.focus()}render(){return N(e,{key:"74061d97a6d4cdec1f445a91b9e819bb12565681",onFocus:this.delegateFocus.bind(this)},N("div",{key:"af7f08ff48a20b7d36df5ee233da7027cd30a047",class:"brand"},N("slot",{key:"46be4fcf2798ac374ac967bc2742260c4d7e082b",name:"brand"},N("img",{key:"3ee79f9732758a6ca5dd6e8264c67707917b358b",id:"fallback-logo-lmvz",src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=",alt:"Lehrmittelverlag Zürich"}))),N("nav",{key:"8f37883454544a384bb35a151c4e24bb12c35f40","aria-label":"Hauptnavigation"},N("div",{key:"a3166ad7e924dd72148d05c01160c889c8f07529",role:"menubar",class:"primary-menubar"},N("slot",{key:"aa600791e4d8f3463fefbc3b366831e3b3a3eaac",name:"nav-primary",ref:M=>this.primarySlot=M}),N("div",{key:"6471256967f4d14c454205a330b2a97ecfcad7a8",role:"menu",id:"nav-secondary",class:"secondary-menubar",hidden:!this.lmvzActiveNav,ref:M=>this.secondaryNav=M},N("slot",{key:"1b9b461b958e76184938a1c65d032b296894e2dd",name:this.secondarySlotName,ref:M=>this.secondarySlot=M})))),N("div",{key:"019d87472272df09ce99eeed405771229f326f1a",class:"actions"},N("slot",{key:"18035fb0a51a26c96dc687547d17d57118a88e87",name:"actions"})))}static get watchers(){return{lmvzActiveNav:[{handleActiveNavChange:0}]}}static get style(){return":host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}"}},[769,"lmvz-header",{role:[2561],lmvzActiveNav:[1,"lmvz-active-nav"]},void 0,{lmvzActiveNav:[{handleActiveNavChange:0}]}]),t=u,A=function(){"undefined"!=typeof customElements&&["lmvz-header"].forEach((M=>{"lmvz-header"===M&&(customElements.get(I(M))||customElements.define(I(M),u))}))};export{t as LmvzHeader,A as defineCustomElement}
|
package/components/lmvz-icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as i,h as e,d as
|
|
1
|
+
import{p as i,h as e,d as n,t}from"./p-C_bScbrd.js";import{g as o,r as s,l as r,i as c,a,b as l,m,t as v,T as d,c as h}from"./p-fiRXhuXK.js";import{R as u,a as g}from"./p-DbeHBSOe.js";const p=Symbol.for("LMVZ__iconProviderRegistry"),f={};function z(){return"undefined"==typeof window?f:window[p]??(window[p]={})}function w(i,e){const n=z(),t=i;Object.prototype.hasOwnProperty.call(n,t)&&console.warn(`Icon provider with name "${t}" is already registered. Overwriting existing provider.`),n[t]=e}function b(i){const e=z();if(i)return e[i];const n=Object.keys(e);if(0===n.length)return;n.length>1&&console.warn(`Multiple icon providers registered (${n.join(", ")}). Using the first one: "${n[0]}".`);const t=n[0];return t?e[t]:void 0}const y=Symbol.for("effect/Brand/Refined"),$=function(...i){const e=2===i.length?e=>i[0](e)?s(e):r(i[1](e)):e=>m(i[0](e),{onNone:()=>s(e),onSome:r});return Object.assign((i=>o(e(i),c)),{[y]:y,option:i=>l(e(i)),either:e,is:i=>a(e(i))})}(k,(()=>[{message:"SVG data is malformed",meta:void 0}]));class x extends(d("BrandValidationError")){constructor(i,e){super(Error(`Brand validation failed for type ${e}.`,{cause:i}))}}const I=i=>v({try:()=>$(D(i)),catch:i=>new x(i,"SVGString")});function k(i){if("string"!=typeof i)return!1;const e=D(i);try{return"svg"===(new DOMParser).parseFromString(e,"image/svg+xml").documentElement.nodeName}catch{return!1}}function D(i){const e=i.trim();return e.startsWith("data:image/svg+xml,")?decodeURIComponent(e.slice(19)):e}const S=()=>$('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>');function O(i,e){return{iconset:i,icon:e}}const P=i(class extends u{intersectionObserver;ariaValidationController=new g(this);get el(){return this}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(i){super(!1),!1!==i&&this.__registerHost(),this.addController(this.ariaValidationController)}connectedCallback(){this.waitUntilVisible((()=>{this.visible=!0,this.loadIconPathData()})),super.connectedCallback()}disconnectedCallback(){this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,super.disconnectedCallback()}async loadIconPathData(){const{icon:i,iconset:e,visible:n}=this;i&&n&&(this.iconData=k(i)?await h(I(i)):await async function(i){const{icon:e,iconset:n}=i;return await(async()=>{const i=b(n);if(i)try{const t=await Promise.resolve(i.resolve(e));if(!t?.svg)return void console.warn(`Icon "${e}"${n?` from set "${n}"`:""} not found in provider. Using default icon.`);const o=await async function(i){try{return await h(I(i))}catch{return console.error("Invalid SVG string:",i),S()}}(t.svg);if(o)return o}catch(i){return void console.error(`Error resolving icon "${e}" with provider:`,i)}else console.warn(`No icon provider registered. Unable to resolve icon "${e}"${n?` from set "${n}"`:""}. Using default icon.`)})()||(console.error(`Icon "${e}" not found${n?` in set "${n}"`:""}. Using default icon.`),S())}({icon:i,iconset:e}))}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return e(n,{key:"c1e952e00df287c66c49eb043408514c07c3dc39",role:"img","aria-hidden":""+this.ariaHidden,innerHTML:this.iconData})}waitUntilVisible(i,e=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((e=>{e.some((e=>!!e.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,i(),!0)))}),{rootMargin:e+"px"}),this.intersectionObserver.observe(this.el)):i()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}static get style(){return".sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}"}},[514,"lmvz-icon",{icon:[513],weight:[513],size:[513],iconset:[513],ariaLabel:[513,"aria-label"],iconData:[32],visible:[32]},void 0,{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}]),E=P,U=function(){"undefined"!=typeof customElements&&["lmvz-icon"].forEach((i=>{"lmvz-icon"===i&&(customElements.get(t(i))||customElements.define(t(i),P))}))};export{E as LmvzIcon,U as defineCustomElement,b as g,w as r,O as t}
|
package/components/lmvz-input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,c as e,h as r,t as i}from"./p-C_bScbrd.js";import{c as o}from"./p-BfTCfPZ1.js";import{R as a,a as n}from"./p-CBLAeife.js";import{a as l}from"./p-DQEkWkMh.js";let s=0;const c=t(class extends a{get el(){return this}get validationEl(){return this.el}lmvzInput;internals;nativeInputElement;inputId="lmvz-input-"+s++;initialValue="";nativeError=!1;errorFromProp=!1;get helperId(){return this.helperText?this.inputId+"-helper":void 0}get showErrorMessage(){return this.error&&!!this.errorMessage}get errorId(){return this.inputId+"-error"}get describedBy(){const t=[];return this.helperId&&t.push(this.helperId),this.showErrorMessage&&t.push(this.errorId),t.length>0?t.join(" "):void 0}value;label;helperText;placeholder;disabled=!1;readonly=!1;required=!1;name;type="text";errorMessage;autocomplete;inputmode;autocorrect;autocapitalize;spellcheck;autofocus=!1;minlength;maxlength;pattern;min;max;step;form;get error(){return this.errorFromProp||this.nativeError}set error(t){this.errorFromProp=t}async setValue(t){const e=this.nativeInputElement,r=t??"";e&&(e.value=r),this.value=r,this.internals.setFormValue?.(r),this.lmvzInput.emit(r)}async focusInput(){this.nativeInputElement?.focus()}async blurInput(){this.nativeInputElement?.blur()}async select(){this.nativeInputElement?.select()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((t=>l(this.el,t))),Promise.resolve(this.nativeInputElement)}constructor(t){super(!1),!1!==t&&this.__registerHost(),this.lmvzInput=e(this,"lmvzInput"),this.internals=this.attachInternals(),this.addController(new n(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialValue=this.value??"",super.componentWillLoad()}formAssociatedCallback(t){t&&this.internals.setFormValue?.(this.value??"")}formResetCallback(){this.internals.setValidity({}),this.setValue(this.initialValue)}formStateRestoreCallback(t){this.setValue(t)}handleValueChange(t){this.nativeInputElement&&(this.nativeInputElement.value===t||this.setValue(t))}handleDisabledChange(t){t&&this.nativeInputElement&&this.nativeInputElement.blur()}handleInput=t=>{this.setValue(t.target.value)};handleChange=t=>{this.updateNativeError(t.target??this.nativeInputElement)};handleFocus=()=>{};handleBlur=t=>{const e=t.target;e.reportValidity?.()};updateNativeError(t){const e=t??this.nativeInputElement;e&&(this.nativeError=!(e.checkValidity?.()??1))}render(){const t=!!this.value,e=t||!!this.placeholder;return r("div",{key:"9de2e4dd202edc937e96ff6ebdc8d0270851c4ca",class:o("input-container",{"interaction-filled":t})},r("div",{key:"0c9f92778e1c52dca13ed9175a09d757fc6eedc9",class:"input-wrapper"},r("slot",{key:"9cf29c45afdb127917a68ed6752faf3d50004c7d",name:"before-input"}),r("div",{key:"e7e6c54b6ee6db108ac3f8ddb676bb9fcf10517e",class:"label-input-group"},r("label",{key:"68eb29e585741971aae58c7693d011ba587f1c1b",htmlFor:this.inputId,class:o({floating:e})},this.label,this.required&&r("span",{key:"274d992a43c2de45af7172608fb1581c6ee771d2",class:"required-indicator","aria-hidden":"true"}," ","*")),r("input",{key:"a26b95dee9781e0e13db16d6e09681e36cab0230",id:this.inputId,ref:t=>this.nativeInputElement=t,type:this.type,min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,required:this.required,form:this.form,autocomplete:this.autocomplete,inputmode:this.inputmode,autocorrect:this.autocorrect,autocapitalize:this.autocapitalize,spellcheck:this.spellcheck,autofocus:this.autofocus,minlength:this.minlength,maxlength:this.maxlength,pattern:this.pattern,"aria-invalid":this.error?"true":"false","aria-required":this.required?"true":"false","aria-describedby":this.describedBy,"aria-errormessage":this.errorId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("slot",{key:"5b77b87ba1da3b8e71c7f6825eecf2216a93e4f9",name:"after-input"})),r("div",{key:"cac334a1e88d4136e923ef1355196997bfe97099",id:this.helperId,role:"status"},this.helperText||null),r("div",{key:"b3ea662fa0a57ed0d8c3f35e36aad6b2513af8ab",id:this.errorId,role:"alert"},this.showErrorMessage&&this.errorMessage||null))}static get formAssociated(){return!0}static get watchers(){return{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: 48px; --input-padding-x: 16px; --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-floating-scale: 0.85; --label-minimized-top: -6px; --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: 8px; } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: 2px solid var(--input-border-color-focus); outline-offset: 2px; } .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input { box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); outline-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: 14px; font-family: Router, sans-serif; font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: normal; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0; transform: translateY(-50%) scale(0.85); transform-origin: left top; background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 500; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: 14px; outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--helper-text-color); font-family: Router, sans-serif; font-weight: 500; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--error-text-color); font-family: Router, sans-serif; font-weight: 500; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }"}},[838,"lmvz-input",{value:[1025],label:[1],helperText:[1,"helper-text"],placeholder:[1],disabled:[516],readonly:[516],required:[516],name:[1],type:[1],errorMessage:[1,"error-message"],autocomplete:[1],inputmode:[1],autocorrect:[1],autocapitalize:[1],spellcheck:[4],autofocus:[4],minlength:[2],maxlength:[2],pattern:[1],min:[8],max:[8],step:[8],form:[1],error:[6660],nativeError:[32],setValue:[64],focusInput:[64],blurInput:[64],select:[64],checkValidity:[64],reportValidity:[64],getInputElement:[64]},void 0,{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}]),p=c,u=function(){"undefined"!=typeof customElements&&["lmvz-input"].forEach((t=>{"lmvz-input"===t&&(customElements.get(i(t))||customElements.define(i(t),c))}))};export{p as LmvzInput,u as defineCustomElement}
|
|
1
|
+
import{p as t,c as e,h as r,t as i}from"./p-C_bScbrd.js";import{c as o}from"./p-BfTCfPZ1.js";import{R as a,a as n}from"./p-DbeHBSOe.js";import{c as l}from"./p-DIrAQ4IB.js";let s=0;const c=t(class extends a{get el(){return this}get validationEl(){return this.el}lmvzInput;internals;nativeInputElement;inputId="lmvz-input-"+s++;initialValue="";nativeError=!1;errorFromProp=!1;get helperId(){return this.helperText?this.inputId+"-helper":void 0}get showErrorMessage(){return this.error&&!!this.errorMessage}get errorId(){return this.inputId+"-error"}get describedBy(){const t=[];return this.helperId&&t.push(this.helperId),this.showErrorMessage&&t.push(this.errorId),t.length>0?t.join(" "):void 0}value;label;helperText;placeholder;disabled=!1;readonly=!1;required=!1;name;type="text";errorMessage;autocomplete;inputmode;autocorrect;autocapitalize;spellcheck;autofocus=!1;minlength;maxlength;pattern;min;max;step;form;get error(){return this.errorFromProp||this.nativeError}set error(t){this.errorFromProp=t}async setValue(t){const e=this.nativeInputElement,r=t??"";e&&(e.value=r),this.value=r,this.internals.setFormValue?.(r),this.lmvzInput.emit(r)}async focusInput(){this.nativeInputElement?.focus()}async blurInput(){this.nativeInputElement?.blur()}async select(){this.nativeInputElement?.select()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((t=>l(this.el,t))),Promise.resolve(this.nativeInputElement)}constructor(t){super(!1),!1!==t&&this.__registerHost(),this.lmvzInput=e(this,"lmvzInput"),this.internals=this.attachInternals(),this.addController(new n(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialValue=this.value??"",super.componentWillLoad()}formAssociatedCallback(t){t&&this.internals.setFormValue?.(this.value??"")}formResetCallback(){this.internals.setValidity({}),this.setValue(this.initialValue)}formStateRestoreCallback(t){this.setValue(t)}handleValueChange(t){this.nativeInputElement&&(this.nativeInputElement.value===t||this.setValue(t))}handleDisabledChange(t){t&&this.nativeInputElement&&this.nativeInputElement.blur()}handleInput=t=>{this.setValue(t.target.value)};handleChange=t=>{this.updateNativeError(t.target??this.nativeInputElement)};handleFocus=()=>{};handleBlur=t=>{const e=t.target;e.reportValidity?.()};updateNativeError(t){const e=t??this.nativeInputElement;e&&(this.nativeError=!(e.checkValidity?.()??1))}render(){const t=!!this.value,e=t||!!this.placeholder;return r("div",{key:"22be29e5fcd4976fc6c4d125781be00acef0b359",class:o("input-container",{"interaction-filled":t})},r("div",{key:"ffeb620419316976e800b16b4a9fd9538f1efd26",class:"input-wrapper"},r("slot",{key:"2a1a67f7fde0232b2bb5ce3cc228b869e5ac3516",name:"before-input"}),r("div",{key:"3bbe623cae67d376c60a28306164293a712b1bb5",class:"label-input-group"},r("label",{key:"c260b3eb249d5c785fe3b6e223c7428a8c147f50",htmlFor:this.inputId,class:o({floating:e})},this.label,this.required&&r("span",{key:"f43dd77efe7e319428dd72ec8933b7587635e767",class:"required-indicator","aria-hidden":"true"}," ","*")),r("input",{key:"eeb821a74a5ac7aab3fab65a48a37d21a22744e6",id:this.inputId,ref:t=>this.nativeInputElement=t,type:this.type,min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,required:this.required,form:this.form,autocomplete:this.autocomplete,inputmode:this.inputmode,autocorrect:this.autocorrect,autocapitalize:this.autocapitalize,spellcheck:this.spellcheck,autofocus:this.autofocus,minlength:this.minlength,maxlength:this.maxlength,pattern:this.pattern,"aria-invalid":this.error?"true":"false","aria-required":this.required?"true":"false","aria-describedby":this.describedBy,"aria-errormessage":this.errorId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("slot",{key:"dd36a212c05c43ab2a8249750c14a7475b6d65d3",name:"after-input"})),r("div",{key:"c2aedd67036faf4d3dc459c3c1fab8d07ee5a991",id:this.helperId,role:"status"},this.helperText||null),r("div",{key:"01d2a6d6df9b3804a595711c7b57b6177d311c39",id:this.errorId,role:"alert"},this.showErrorMessage&&this.errorMessage||null))}static get formAssociated(){return!0}static get watchers(){return{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: 48px; --input-padding-x: 16px; --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-floating-scale: 0.85; --label-minimized-top: -6px; --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: 8px; } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: 2px solid var(--input-border-color-focus); outline-offset: 2px; } .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input { box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); outline-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: 14px; font-family: Router, sans-serif; font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: normal; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0; transform: translateY(-50%) scale(0.85); transform-origin: left top; background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 500; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: 14px; outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--helper-text-color); font-family: Router, sans-serif; font-weight: 500; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--error-text-color); font-family: Router, sans-serif; font-weight: 500; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }"}},[838,"lmvz-input",{value:[1025],label:[1],helperText:[1,"helper-text"],placeholder:[1],disabled:[516],readonly:[516],required:[516],name:[1],type:[1],errorMessage:[1,"error-message"],autocomplete:[1],inputmode:[1],autocorrect:[1],autocapitalize:[1],spellcheck:[4],autofocus:[4],minlength:[2],maxlength:[2],pattern:[1],min:[8],max:[8],step:[8],form:[1],error:[6660],nativeError:[32],setValue:[64],focusInput:[64],blurInput:[64],select:[64],checkValidity:[64],reportValidity:[64],getInputElement:[64]},void 0,{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}]),p=c,u=function(){"undefined"!=typeof customElements&&["lmvz-input"].forEach((t=>{"lmvz-input"===t&&(customElements.get(i(t))||customElements.define(i(t),c))}))};export{p as LmvzInput,u as defineCustomElement}
|