@lmvz-ds/components 0.13.1 → 0.13.3
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/dist/cjs/{icons-FIfJEo6G.js → Effect-CpZhfb0D.js} +5153 -1359
- package/dist/cjs/aria-loader-BBKbBZLq.js +76 -0
- package/dist/cjs/{assets-CJzJZPzV.js → assets-BnJmIx_h.js} +2 -2
- package/dist/cjs/icons-Brr4vqiE.js +653 -0
- package/dist/cjs/{index-D3BMpL5w.js → index-9ZJx0550.js} +3 -0
- package/dist/cjs/index-QRnWYctw.js +35629 -0
- package/dist/cjs/index.cjs.js +12 -4
- package/dist/cjs/lmvz-action.cjs.entry.js +1 -1
- package/dist/cjs/lmvz-button.cjs.entry.js +6 -3
- package/dist/cjs/lmvz-card.cjs.entry.js +2 -2
- package/dist/cjs/lmvz-chip.cjs.entry.js +1 -1
- package/dist/cjs/lmvz-components.cjs.js +1 -1
- package/dist/cjs/lmvz-header.cjs.entry.js +8 -5
- package/dist/cjs/lmvz-icon.cjs.entry.js +20 -9
- package/dist/cjs/lmvz-input.cjs.entry.js +8 -5
- package/dist/cjs/lmvz-menuitem.cjs.entry.js +7 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{reactive-controller-host-BMDEj1kX.js → reactive-controller-host-DWpVosFu.js} +71 -50
- package/dist/collection/components/lmvz-button/lmvz-button.js +3 -1
- package/dist/collection/components/lmvz-header/lmvz-header.js +5 -3
- package/dist/collection/components/lmvz-icon/lmvz-icon.js +14 -5
- package/dist/collection/components/lmvz-input/lmvz-input.js +5 -3
- package/dist/collection/components/lmvz-menuitem/lmvz-menuitem.js +4 -2
- package/dist/collection/index.js +1 -0
- package/dist/collection/integration/header-integration.js +1 -3
- package/dist/collection/utils/aria/aria-validation-controller.js +68 -27
- package/dist/components/index.js +1 -1
- package/dist/components/lmvz-action.js +1 -1
- package/dist/components/lmvz-button.js +1 -1
- package/dist/components/lmvz-card.js +1 -1
- package/dist/components/lmvz-chip.js +1 -1
- package/dist/components/lmvz-header.js +1 -1
- package/dist/components/lmvz-icon.js +1 -1
- package/dist/components/lmvz-input.js +1 -1
- package/dist/components/lmvz-menuitem.js +1 -1
- package/dist/components/p-BaPwpeMs.js +1 -0
- package/dist/components/p-Bz0S2cGj.js +1 -0
- package/dist/components/p-CSRpdnrt.js +1 -0
- package/dist/components/p-DK2hpvEW.js +12 -0
- package/dist/{lmvz-components/p-CVf2C8dL.js → components/p-DcMNH3fv.js} +1 -1
- package/dist/components/p-DugBvwmd.js +1 -0
- package/dist/esm/{icons-CM7lsnuO.js → Effect-DyamyJqO.js} +4951 -1357
- package/dist/esm/aria-loader-DB71Xewa.js +69 -0
- package/dist/esm/{assets-BelZNJ1W.js → assets-CvV1KMMV.js} +1 -1
- package/dist/esm/icons-C69Um2xB.js +649 -0
- package/dist/esm/index-CekEw3_K.js +35626 -0
- package/dist/esm/{index-T5ljELGS.js → index-smGPjoDX.js} +3 -1
- package/dist/esm/index.js +5 -4
- package/dist/esm/lmvz-action.entry.js +1 -1
- package/dist/esm/lmvz-button.entry.js +6 -3
- package/dist/esm/lmvz-card.entry.js +2 -2
- package/dist/esm/lmvz-chip.entry.js +1 -1
- package/dist/esm/lmvz-components.js +2 -2
- package/dist/esm/lmvz-header.entry.js +8 -5
- package/dist/esm/lmvz-icon.entry.js +20 -9
- package/dist/esm/lmvz-input.entry.js +8 -5
- package/dist/esm/lmvz-menuitem.entry.js +7 -4
- package/dist/esm/loader.js +2 -2
- package/dist/esm/{reactive-controller-host-CZ3dGAjR.js → reactive-controller-host-1nFoJEdT.js} +65 -44
- package/dist/lmvz-components/index.esm.js +1 -1
- package/dist/lmvz-components/lmvz-components.esm.js +1 -1
- package/dist/lmvz-components/{p-d9dc29a1.entry.js → p-0e5aa1a3.entry.js} +1 -1
- package/dist/lmvz-components/p-5775a56c.entry.js +1 -0
- package/dist/lmvz-components/p-814ee542.entry.js +1 -0
- package/dist/lmvz-components/{p-feda2ec5.entry.js → p-9faac8f3.entry.js} +1 -1
- package/dist/lmvz-components/p-B3j8zrhV.js +1 -0
- package/dist/lmvz-components/p-BEoSvNlI.js +1 -0
- package/dist/lmvz-components/p-BTpia82J.js +1 -0
- package/dist/{components/p-CdYWDK7m.js → lmvz-components/p-D7GrtdQF.js} +1 -1
- package/dist/lmvz-components/p-DyamyJqO.js +1 -0
- package/dist/lmvz-components/p-c61f7daa.entry.js +1 -0
- package/dist/lmvz-components/p-c6bae21b.entry.js +1 -0
- package/dist/lmvz-components/p-cM67HC0Z.js +12 -0
- package/dist/lmvz-components/{p-980688a0.entry.js → p-d4b68381.entry.js} +1 -1
- package/dist/lmvz-components/p-f1559aa1.entry.js +1 -0
- package/dist/lmvz-components/p-smGPjoDX.js +2 -0
- package/dist/manifest.json +1 -1
- package/dist/types/components/lmvz-button/lmvz-button.d.ts +1 -0
- package/dist/types/components/lmvz-header/lmvz-header.d.ts +1 -0
- package/dist/types/components/lmvz-icon/lmvz-icon.d.ts +3 -0
- package/dist/types/components/lmvz-input/lmvz-input.d.ts +2 -1
- package/dist/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +3 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/utils/aria/aria-validation-controller.d.ts +8 -2
- package/hydrate/index.js +96 -39
- package/hydrate/index.mjs +96 -39
- package/package.json +6 -8
- package/dist/components/p-BsS3QvWn.js +0 -1
- package/dist/components/p-CMteT-Yo.js +0 -1
- package/dist/components/p-vi4YzJmv.js +0 -1
- package/dist/lmvz-components/p-16878d4c.entry.js +0 -1
- package/dist/lmvz-components/p-6e3314ab.entry.js +0 -1
- package/dist/lmvz-components/p-8ea1a349.entry.js +0 -1
- package/dist/lmvz-components/p-BoR31cjC.js +0 -1
- package/dist/lmvz-components/p-CZ3dGAjR.js +0 -1
- package/dist/lmvz-components/p-T5ljELGS.js +0 -2
- package/dist/lmvz-components/p-a34542fa.entry.js +0 -1
- package/dist/lmvz-components/p-d2bf6a3f.entry.js +0 -1
|
@@ -4,6 +4,7 @@ import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard
|
|
|
4
4
|
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
|
|
5
5
|
export class LmvzHeader extends ReactiveControllerHost {
|
|
6
6
|
el;
|
|
7
|
+
validationEl = this.el;
|
|
7
8
|
primarySlot;
|
|
8
9
|
secondarySlot;
|
|
9
10
|
secondaryNav;
|
|
@@ -33,6 +34,7 @@ export class LmvzHeader extends ReactiveControllerHost {
|
|
|
33
34
|
this.primarySlot.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));
|
|
34
35
|
this.handlePrimaryNavItemsChange();
|
|
35
36
|
this.secondarySlot.addEventListener('slotchange', this.handleSecondaryNavItemsChange.bind(this));
|
|
37
|
+
super.componentDidLoad();
|
|
36
38
|
}
|
|
37
39
|
handlePrimaryNavItemsChange() {
|
|
38
40
|
const items = this.primaryMenuitems;
|
|
@@ -40,7 +42,7 @@ export class LmvzHeader extends ReactiveControllerHost {
|
|
|
40
42
|
console.warn('Primary slot has no assigned elements. Please add navigation items to the primary slot.');
|
|
41
43
|
return;
|
|
42
44
|
}
|
|
43
|
-
items.forEach(el => {
|
|
45
|
+
items.forEach((el) => {
|
|
44
46
|
el.setAttribute('aria-haspopup', 'true');
|
|
45
47
|
el.setAttribute('aria-controls', `nav-secondary`);
|
|
46
48
|
});
|
|
@@ -59,7 +61,7 @@ export class LmvzHeader extends ReactiveControllerHost {
|
|
|
59
61
|
updateElementsActive() {
|
|
60
62
|
const items = this.primaryMenuitems;
|
|
61
63
|
let label;
|
|
62
|
-
items.forEach(el => {
|
|
64
|
+
items.forEach((el) => {
|
|
63
65
|
const isActive = el.id === this.lmvzActiveNav;
|
|
64
66
|
if (isActive)
|
|
65
67
|
label = el.textContent || el.id;
|
|
@@ -74,7 +76,7 @@ export class LmvzHeader extends ReactiveControllerHost {
|
|
|
74
76
|
}
|
|
75
77
|
}
|
|
76
78
|
render() {
|
|
77
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: '7c257913615a89b9be8f959b4dc43664ee474113', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '70f33263e629170d1b19cbfb1a00ca1adbbe91e0', class: 'brand' }, h("slot", { key: 'd9c99c51da3210e5459684e59e66baf1622a8946', name: 'brand' }, h("lmvz-icon", { key: '18bd0e88032c023d319bc3fac43c2b09d5098893', id: 'fallback-logo-lmvz', icon: 'Logo', size: 'inherit', "aria-label": 'Lehrmittelverlag Z\u00FCrich' }))), h("nav", { key: 'c56a1e63344e42b1be26fe817705f0265bdb2bcf', "aria-label": 'Hauptnavigation' }, h("div", { key: 'fbaebcb4857b0fba7b81cc35ef6092bb98ae89f8', role: 'menubar', class: 'primary-menubar' }, h("slot", { key: '4a408eacbb41fa57d838581c18389241dce0e634', name: 'nav-primary', ref: (el) => (this.primarySlot = el) }), h("div", { key: '6229842569958c724478c6aa15adc75b07d8417e', role: 'menu', id: 'nav-secondary', class: 'secondary-menubar', hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '4dd4278eaa77cfc984e338da6bb1aa7321c6a545', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '98b7802b0dc2dfe3a7a38bf89ae2b68994734396', class: 'actions' }, h("slot", { key: '5f7682fe0ad34496b887baab7b19641a86c01acb', name: 'actions' }))));
|
|
78
80
|
}
|
|
79
81
|
static get is() { return "lmvz-header"; }
|
|
80
82
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,7 +5,9 @@ import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
|
|
|
5
5
|
import { emptyDefaultSvg, fetchIconSvg } from "./icons";
|
|
6
6
|
export class LmvzIcon extends ReactiveControllerHost {
|
|
7
7
|
intersectionObserver;
|
|
8
|
+
ariaValidationController = new AriaValidationController(this);
|
|
8
9
|
el;
|
|
10
|
+
validationEl;
|
|
9
11
|
icon;
|
|
10
12
|
weight = 'medium';
|
|
11
13
|
size = 'md';
|
|
@@ -17,37 +19,44 @@ export class LmvzIcon extends ReactiveControllerHost {
|
|
|
17
19
|
}
|
|
18
20
|
constructor() {
|
|
19
21
|
super();
|
|
20
|
-
this.addController(
|
|
22
|
+
this.addController(this.ariaValidationController);
|
|
21
23
|
}
|
|
22
24
|
connectedCallback() {
|
|
23
25
|
this.waitUntilVisible(() => {
|
|
24
26
|
this.visible = true;
|
|
25
27
|
this.loadIconPathData();
|
|
26
28
|
});
|
|
29
|
+
super.connectedCallback();
|
|
27
30
|
}
|
|
28
31
|
disconnectedCallback() {
|
|
29
32
|
if (this.intersectionObserver) {
|
|
30
33
|
this.intersectionObserver.disconnect();
|
|
31
34
|
this.intersectionObserver = null;
|
|
32
35
|
}
|
|
36
|
+
super.disconnectedCallback();
|
|
33
37
|
}
|
|
34
38
|
async loadIconPathData() {
|
|
35
39
|
const { icon, visible } = this;
|
|
36
40
|
if (!Build.isBrowser || !icon || !visible) {
|
|
37
41
|
return;
|
|
38
42
|
}
|
|
39
|
-
this.iconData = await Effect.runPromise(fetchIconSvg(this.icon).pipe(Effect.tapError(error => Effect.logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), Effect.catchAll(() => Effect.succeed(emptyDefaultSvg()))));
|
|
43
|
+
this.iconData = await Effect.runPromise(fetchIconSvg(this.icon).pipe(Effect.tapError((error) => Effect.logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), Effect.catchAll(() => Effect.succeed(emptyDefaultSvg()))));
|
|
44
|
+
}
|
|
45
|
+
componentDidRender() {
|
|
46
|
+
this.validationEl = this.el.querySelector('svg');
|
|
47
|
+
this.ariaValidationController.revalidateAria();
|
|
48
|
+
super.componentDidRender();
|
|
40
49
|
}
|
|
41
50
|
render() {
|
|
42
|
-
return h(Host, { key: '
|
|
51
|
+
return h(Host, { key: '8b1ce550253e994650fe91de38496aff7c7eccc2', role: 'img', "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
43
52
|
}
|
|
44
53
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
45
54
|
if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {
|
|
46
55
|
callback();
|
|
47
56
|
return;
|
|
48
57
|
}
|
|
49
|
-
this.intersectionObserver = new IntersectionObserver(entries => {
|
|
50
|
-
entries.some(entry => {
|
|
58
|
+
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
59
|
+
entries.some((entry) => {
|
|
51
60
|
if (entry.isIntersecting) {
|
|
52
61
|
this.intersectionObserver.disconnect();
|
|
53
62
|
this.intersectionObserver = null;
|
|
@@ -6,6 +6,7 @@ import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
|
|
|
6
6
|
let inputIdCounter = 0;
|
|
7
7
|
export class LmvzInput extends ReactiveControllerHost {
|
|
8
8
|
el;
|
|
9
|
+
validationEl = this.el;
|
|
9
10
|
lmvzInput;
|
|
10
11
|
internals;
|
|
11
12
|
nativeInputElement;
|
|
@@ -82,7 +83,7 @@ export class LmvzInput extends ReactiveControllerHost {
|
|
|
82
83
|
}
|
|
83
84
|
async getInputElement() {
|
|
84
85
|
if (!this.nativeInputElement) {
|
|
85
|
-
await new Promise(resolve => componentOnReady(this.el, resolve));
|
|
86
|
+
await new Promise((resolve) => componentOnReady(this.el, resolve));
|
|
86
87
|
}
|
|
87
88
|
return Promise.resolve(this.nativeInputElement);
|
|
88
89
|
}
|
|
@@ -94,6 +95,7 @@ export class LmvzInput extends ReactiveControllerHost {
|
|
|
94
95
|
}
|
|
95
96
|
componentWillLoad() {
|
|
96
97
|
this.initialValue = this.value;
|
|
98
|
+
super.componentWillLoad();
|
|
97
99
|
}
|
|
98
100
|
formAssociatedCallback(form) {
|
|
99
101
|
if (!form)
|
|
@@ -142,9 +144,9 @@ export class LmvzInput extends ReactiveControllerHost {
|
|
|
142
144
|
render() {
|
|
143
145
|
const hasValue = Boolean(this.value);
|
|
144
146
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
145
|
-
return (h("div", { key: '
|
|
147
|
+
return (h("div", { key: '79ab97e1e1d0217d5302ca1dea7087292ef19fc7', class: classNames('input-container', {
|
|
146
148
|
'interaction-filled': hasValue,
|
|
147
|
-
}) }, h("div", { key: '
|
|
149
|
+
}) }, h("div", { key: '9e59a33c261f610f93e1d6db3a07107f9300bbda', class: 'input-wrapper' }, h("slot", { key: 'fadb3f5e49afa817014cdbd44774462b467827f4', name: 'before-input' }), h("div", { key: '27d592787bb841fbd430c2e8ce0adc10f59b68ec', class: 'label-input-group' }, h("label", { key: 'f83f154f356660ecafde254b5437ce6c42898b54', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'b51463179a2099ecd687ccd2480136379b0d0502', class: 'required-indicator', "aria-hidden": 'true' }, ' ', "*"))), h("input", { key: '30d8308f286e82fba5d2ebdad972509c06294543', id: this.inputId, ref: (el) => (this.nativeInputElement = el), 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 })), h("slot", { key: 'a8448a0827ce24194b21b8281d2b54eb76f24652', name: 'after-input' })), h("div", { key: '79413854b97380812c84f3128d1db053d4154008', id: this.helperId, role: 'status' }, this.helperText || null), h("div", { key: 'd34c6b421688934b69917f6da1f9bb22c220a6f9', id: this.errorId, role: 'alert' }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
148
150
|
}
|
|
149
151
|
static get is() { return "lmvz-input"; }
|
|
150
152
|
static get encapsulation() { return "scoped"; }
|
|
@@ -4,6 +4,8 @@ import { ElementActivationController } from "../../utils/aria/element-activation
|
|
|
4
4
|
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
|
|
5
5
|
export class LmvzMenuItem extends ReactiveControllerHost {
|
|
6
6
|
el;
|
|
7
|
+
validationEl = this.el;
|
|
8
|
+
validationSlot;
|
|
7
9
|
get role() {
|
|
8
10
|
return 'menuitem';
|
|
9
11
|
}
|
|
@@ -13,11 +15,11 @@ export class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
13
15
|
lmvzActivation;
|
|
14
16
|
constructor() {
|
|
15
17
|
super();
|
|
16
|
-
this.addController(new AriaValidationController(this));
|
|
18
|
+
this.addController(new AriaValidationController(this, { validationTiming: 'slot' }));
|
|
17
19
|
this.addController(new ElementActivationController(this));
|
|
18
20
|
}
|
|
19
21
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: 'a022a198618ac628cb39c97b29cf0c332b522e79' }, h("slot", { key: 'c8dab82b31b49db3d966cacb1cf9ef5cb1763797', ref: e => (this.validationSlot = e) })));
|
|
21
23
|
}
|
|
22
24
|
static get is() { return "lmvz-menuitem"; }
|
|
23
25
|
static get encapsulation() { return "scoped"; }
|
package/dist/collection/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import { enableAriaValidation } from "@lmvz-ds/aria-validation";
|
|
2
1
|
import { h, Host } from "@stencil/core";
|
|
3
|
-
enableAriaValidation();
|
|
4
2
|
export class HeaderIntegration {
|
|
5
3
|
activeNav;
|
|
6
4
|
activate(event) {
|
|
@@ -17,7 +15,7 @@ export class HeaderIntegration {
|
|
|
17
15
|
this.activeNav = navId;
|
|
18
16
|
}
|
|
19
17
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '75fb60387c32835c7b7ef3cc30db812abfb9367e' }, h("lmvz-header", { key: '91149faea6215e9f1aed260462bbeb230b73b855', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'd5d7dcc462e262c511eff6b90bd798d514632057', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '4ac381b41e28f822c78da0056dac5e246f7e918b', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '8ae037a821128c3cb2f36373c449636e2bfcc007', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '6c0fec0e451812f0721d426bf6b991b5fb25d9cd', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'c43f7d2bbf035f2375b3def77cecc397b3cd8de6', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '9c9c4d86c5027901c8cdfa0d66d615342034ff7b', icon: "book" }), "Deutsch 7"), h("lmvz-menuitem", { key: '7a91ed4e5aaf13a0d3e03e183dcf57f9c3d0f322', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'f1dea525f81b168de5db345d5f1dc978e63fbda8', icon: "book" }), "Mathe 2"), h("lmvz-menuitem", { key: '7fafd65317c833c22888ab57a28d0f28f314e92b', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '47b11e1ee520fd0898052071b52d1a89e5b54d43', icon: "cog" }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '42d5fc054af9032a5f0ae185b2db2ef1fb565b11', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'f962c1a573e72ee5e1ec67195e26be3b59185efb', icon: "cog" })), h("lmvz-button", { key: '31675becc7bc819577f9aeda2c474637a65e5949', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '87f52382c676820e8e5d981fc4ac7824b892e923', icon: "user" }))), h("main", { key: 'b5949edfd76c42f5e654cf04a6e1f5cd3654ed0d' }, h("h1", { key: '75228585f485f33349c780ad82b22449811761ec' }, "Content"))));
|
|
21
19
|
}
|
|
22
20
|
static get is() { return "header-integration"; }
|
|
23
21
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
import { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, isAriaValidationEnabled, queueValidation } from "@lmvz-ds/aria-validation";
|
|
1
|
+
import { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, enableAriaValidation, isAriaValidationEnabled, queueValidation, useVerboseLogging, } from "@lmvz-ds/aria-validation";
|
|
2
|
+
import { Build } from "@stencil/core";
|
|
3
|
+
if (Build.isDev) {
|
|
4
|
+
enableAriaValidation();
|
|
5
|
+
}
|
|
2
6
|
export class AriaValidationController {
|
|
3
7
|
host;
|
|
4
8
|
config;
|
|
5
9
|
visibilityObserver;
|
|
6
10
|
elementQueued = false;
|
|
7
11
|
elementValidated = false;
|
|
8
|
-
|
|
12
|
+
elementLoaded = false;
|
|
13
|
+
static knownValidationErrors = [];
|
|
9
14
|
get disabled() {
|
|
10
15
|
return !isAriaValidationEnabled();
|
|
11
16
|
}
|
|
17
|
+
get useVerboseLogging() {
|
|
18
|
+
return this.config?.verboseLogging || Build.isDev || useVerboseLogging();
|
|
19
|
+
}
|
|
12
20
|
constructor(host, config) {
|
|
13
21
|
this.host = host;
|
|
14
22
|
this.config = config;
|
|
@@ -19,12 +27,17 @@ export class AriaValidationController {
|
|
|
19
27
|
this.checkLazyValidation();
|
|
20
28
|
};
|
|
21
29
|
hostDidLoad() {
|
|
30
|
+
this.elementLoaded = true;
|
|
22
31
|
if (typeof window !== 'undefined') {
|
|
23
32
|
window.addEventListener(ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, this.onRuntimeConfigChange);
|
|
24
33
|
}
|
|
25
34
|
if (this.elementQueued || this.elementValidated)
|
|
26
35
|
return;
|
|
27
|
-
if (
|
|
36
|
+
if (this.config?.validationTiming === 'slot') {
|
|
37
|
+
this.observeSlot();
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (!this.host.validationEl?.checkVisibility() || this.config?.validationTiming !== 'load') {
|
|
28
41
|
this.observeVisibilityOnce();
|
|
29
42
|
return;
|
|
30
43
|
}
|
|
@@ -39,26 +52,40 @@ export class AriaValidationController {
|
|
|
39
52
|
window.removeEventListener(ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, this.onRuntimeConfigChange);
|
|
40
53
|
}
|
|
41
54
|
}
|
|
55
|
+
revalidateAria() {
|
|
56
|
+
this.enqueueValidation();
|
|
57
|
+
}
|
|
58
|
+
observeSlot() {
|
|
59
|
+
this.host.validationSlot?.addEventListener('slotchange', this.enqueueValidation.bind(this));
|
|
60
|
+
}
|
|
42
61
|
observeVisibilityOnce() {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
62
|
+
window.setTimeout(() => {
|
|
63
|
+
if (!this.host.validationEl)
|
|
64
|
+
return;
|
|
65
|
+
this.visibilityObserver = new IntersectionObserver((entries) => {
|
|
66
|
+
for (const entry of entries) {
|
|
67
|
+
if (entry.target !== this.host.validationEl)
|
|
68
|
+
continue;
|
|
69
|
+
if (!entry.isIntersecting)
|
|
70
|
+
continue;
|
|
71
|
+
this.checkLazyValidation();
|
|
72
|
+
this.discardVisibilityObserver();
|
|
73
|
+
}
|
|
74
|
+
}, {
|
|
75
|
+
root: this.host.validationEl?.parentElement,
|
|
76
|
+
rootMargin: '0px',
|
|
77
|
+
threshold: 0.01,
|
|
78
|
+
});
|
|
79
|
+
this.visibilityObserver.observe(this.host.validationEl);
|
|
56
80
|
});
|
|
57
|
-
this.visibilityObserver.observe(this.host.el);
|
|
58
81
|
}
|
|
59
82
|
checkLazyValidation() {
|
|
83
|
+
if (!this.elementLoaded)
|
|
84
|
+
return;
|
|
60
85
|
if (!this.config?.reValidateOnPropChanges && (this.elementQueued || this.elementValidated))
|
|
61
86
|
return;
|
|
87
|
+
if (!this.host.validationEl?.checkVisibility())
|
|
88
|
+
return;
|
|
62
89
|
this.enqueueValidation();
|
|
63
90
|
}
|
|
64
91
|
enqueueValidation() {
|
|
@@ -66,33 +93,47 @@ export class AriaValidationController {
|
|
|
66
93
|
return;
|
|
67
94
|
this.elementQueued = true;
|
|
68
95
|
queueValidation({
|
|
69
|
-
context: { include: this.host.
|
|
96
|
+
context: { include: this.host.validationEl, exclude: AriaValidationController.knownValidationErrors },
|
|
70
97
|
onComplete: (error, results) => {
|
|
71
98
|
this.elementValidated = true;
|
|
99
|
+
const elementName = this.host.tagName || this.host.validationEl?.tagName || 'Element';
|
|
72
100
|
if (error) {
|
|
73
|
-
console.error('Error running ARIA validation:', error);
|
|
101
|
+
console.error('Error running ARIA validation:', error, elementName);
|
|
102
|
+
if (!this.host.validationEl?.tagName) {
|
|
103
|
+
console.dir(this.host);
|
|
104
|
+
}
|
|
74
105
|
return;
|
|
75
106
|
}
|
|
107
|
+
const message = [elementName];
|
|
76
108
|
if (!results?.violations.length) {
|
|
77
|
-
if (this.
|
|
78
|
-
console.log(
|
|
109
|
+
if (this.useVerboseLogging) {
|
|
110
|
+
console.log(...message, 'has no ARIA violations');
|
|
111
|
+
if (!this.host.validationEl?.tagName) {
|
|
112
|
+
console.dir(this.host);
|
|
113
|
+
}
|
|
79
114
|
}
|
|
80
115
|
return;
|
|
81
116
|
}
|
|
82
|
-
const
|
|
83
|
-
|
|
117
|
+
const count = results.violations.length;
|
|
118
|
+
const label = [...message, results.violations.at(0).id, count > 1 ? `(+${count - 1} more)` : ''].filter(Boolean).join(' ');
|
|
119
|
+
if (this.useVerboseLogging) {
|
|
84
120
|
console.group(label);
|
|
85
121
|
}
|
|
86
122
|
else {
|
|
87
123
|
console.groupCollapsed(label);
|
|
88
124
|
}
|
|
89
|
-
const targets = results.violations.flatMap(violation => {
|
|
125
|
+
const targets = results.violations.flatMap((violation) => {
|
|
90
126
|
console.dir(violation, { showHidden: true, compact: false });
|
|
91
|
-
return violation.nodes.map(node => node.target);
|
|
127
|
+
return violation.nodes.map((node) => node.target);
|
|
92
128
|
});
|
|
93
|
-
|
|
129
|
+
if (this.host.validationEl) {
|
|
130
|
+
console.log('element:', this.host.validationEl);
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
console.dir(this.host);
|
|
134
|
+
}
|
|
94
135
|
console.groupEnd();
|
|
95
|
-
|
|
136
|
+
AriaValidationController.knownValidationErrors.push(...targets);
|
|
96
137
|
},
|
|
97
138
|
});
|
|
98
139
|
}
|
package/dist/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-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BaPwpeMs.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-DugBvwmd.js";export{c as clearIconCache}from"./p-Bz0S2cGj.js";import{r as t}from"./p-CSRpdnrt.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{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{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";const o=["primary","secondary","tertiary"],n=["small","default","large"],m=["xs","sm","md","lg"],l=[...m,"xl"],p=["text","email","password","tel","url","search","number"],f=[...m,"inherit"],v=["thin","medium","bold","filled"],h=["Logo","actions","adduser","alert","apple","arrow-down","arrow-left","arrow-right","arrow-up","book","bookmark","checkmark","chevron-down","chevron-left","chevron-right","chevron-up","close-l","close-sm","cog","computer","dashboard","delete","download","edit","external","facebook","favorite","filter","group","hide","home","info","instagram","letter","linkedin","logout","map","minus","navigation","plus","qr-scan","question","reader","reset","school","search","send","settings","share","shopping-cart","show","snapchat","sort","speech-bubble","star","student","upload","user","warn-circle","warn-triangle","whatsapp","world","x","youtube"];function z(e){return t(e).catch((e=>{console.error("Unhandled error in Effect:",e)}))}export{h as iconNames,f as iconSizes,v as iconWeights,p as inputTypes,z as run,n as scaleValues,m as sizes,l as textSizes,o as variants}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,c as s,h as c,d as i,t as o}from"./p-
|
|
1
|
+
import{p as t,H as e,c as s,h as c,d as i,t as o}from"./p-BaPwpeMs.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.actionClick=s(this,"actionClick")}actionClick;_onClick(t){this.actionClick.emit(t)}render(){return c(i,{key:"71303bfe6ac64a96edd21800ae5e8c43a3a38c23",onClick:this._onClick.bind(this)},c("slot",{key:"94922fdfd355e7e4d1b78bedb80ae814c186b199"}))}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 e,d as r,t as n}from"./p-
|
|
1
|
+
import{p as t,c as o,h as e,d as r,t as n}from"./p-BaPwpeMs.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,a as m}from"./p-DugBvwmd.js";import{E as i}from"./p-CN0JX9-m.js";import{i as s,f as d}from"./p-B3JVFwO1.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:"3f3eda78349322ce5160d7aac1290a73f0adcd4a","aria-disabled":this.disabled?"true":null},e("button",{key:"b132404d8d5f5bf0fa7e845b562c953c5ceec36c",ref:t=>this.validationEl=t,disabled:this.disabled,class:a(this.variant,{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"ce63f7f1061ec9c3f10cbcfc67998ddbf3e04c3d"})))}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 { 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-selected, #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, #d4d4d4); } 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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as r,c as t,h as a,d as o,t as m}from"./p-
|
|
1
|
+
import{p as e,H as r,c as t,h as a,d as o,t as m}from"./p-BaPwpeMs.js";import{c as n}from"./p-DcMNH3fv.js";const l=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.primaryAction=t(this,"primaryAction")}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return n("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(e){console.log(e)}render(){return a(o,{key:"ba2e8d9e25428c744da2470cbd677306c56b09ae",role:"article"},a("div",{key:"54ff7545559a4b6fb00c94909717234f4dfedd7c",class:"top"},a("div",{key:"7bff35f247b6e8aca9b6346103139daa65ca16a3",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"c2c3d21227175b9dc0a55c75294f6c21bc713a26",class:"chip-slot"},a("slot",{key:"1a7002aab5fc3f9f698c3d1678f8819ea36f91d3",name:"chip"})))),a("div",{key:"a313321abe4da83db4b2ba64fdefa28edde93d41",class:"bottom"},a("header",{key:"f5ba333fcaa59d5b4f61dee94aba4628f49db9d7"},a("h2",{key:"b7d9ad6944b136476703cde89f885b189583eef1",class:"title"},this.cardTitle)),a("p",{key:"6594626904a4f9fbc53d5956b71bbdefe00add8c",class:"description"},this.description),a("div",{key:"d8bbfebeb572fcf6990160a0dba7c5ae8a5a7fc7",class:"actions"},a("button",{key:"6311a97a18412f8fbf8eb33e8a0f7a17700e71c6",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"12033ad5018d100f84f0149d83dc965d8e5b2c66",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"e11f8008542b4f7f70d1273bb31200c50d02aabb",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 { 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-selected, #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, #d4d4d4); } 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-other-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-other-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(2rem, 1.94rem + 0.26vw, 2.25rem) / 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=l,c=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((e=>{"lmvz-card"===e&&(customElements.get(m(e))||customElements.define(m(e),l))}))};export{i as LmvzCard,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,h as e,d as c,t as n}from"./p-
|
|
1
|
+
import{p as t,H as s,h as e,d as c,t as n}from"./p-BaPwpeMs.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}text;render(){return e(c,{key:"b247f41d22bcf77998bf5a49669f1aa8d7fd3a63"},this.text)}static get style(){return":host{display:block}"}},[513,"lmvz-chip",{text:[1]}]),r=o,a=function(){"undefined"!=typeof customElements&&["lmvz-chip"].forEach((t=>{"lmvz-chip"===t&&(customElements.get(n(t))||customElements.define(n(t),o))}))};export{r as LmvzChip,a as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,h as a,d as t,t as r}from"./p-
|
|
1
|
+
import{p as e,h as a,d as t,t as r}from"./p-BaPwpeMs.js";import{R as n,a as s}from"./p-DugBvwmd.js";import{g as i,c as l}from"./p-B3JVFwO1.js";import{d as o}from"./p-Bz0S2cGj.js";class c{host;elements=[];constructor(e){this.host=e}hostDidRender(){this.host.el.addEventListener("keydown",this.handleKeydown)}updateElements(e){this.elements=e}handleKeydown=e=>{const{key:a}=e;if(!["ArrowDown","ArrowRight","ArrowUp","ArrowLeft"].includes(a))return;const t=i(document),r=this.getNextFocusableElement(t,["ArrowDown","ArrowRight"].includes(a)?"down":"up");r&&(e.preventDefault(),r.focus?.())};getNextFocusableElement(e,a){const{elements:t}=this,r=t.indexOf(e);if(-1===r)return null;let n=null;if("down"===a?n=(r+1)%t.length:"up"===a&&(n=(r-1+t.length)%t.length),null==n)return null;const s=t[n];return l(s)?s:this.getNextFocusableElement(s,a)}}const d=e(class extends n{get el(){return this}validationEl=this.el;primarySlot;secondarySlot;secondaryNav;keyboardNavigationController=new c(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(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.addController(new s(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 e=this.primaryMenuitems;e.length?(e.forEach((e=>{e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-controls","nav-secondary")})),this.updateElementsActive()):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(){let e;this.primaryMenuitems.forEach((a=>{const t=a.id===this.lmvzActiveNav;t&&(e=a.textContent||a.id),a.setAttribute("aria-expanded",t?"true":"false")})),this.secondaryNav.setAttribute("aria-label","Untermenü für "+e)}delegateFocus(){const e=this.primaryMenuitems[0];e&&e.focus()}render(){return a(t,{key:"7c257913615a89b9be8f959b4dc43664ee474113",onFocus:this.delegateFocus.bind(this)},a("div",{key:"70f33263e629170d1b19cbfb1a00ca1adbbe91e0",class:"brand"},a("slot",{key:"d9c99c51da3210e5459684e59e66baf1622a8946",name:"brand"},a("lmvz-icon",{key:"18bd0e88032c023d319bc3fac43c2b09d5098893",id:"fallback-logo-lmvz",icon:"Logo",size:"inherit","aria-label":"Lehrmittelverlag Zürich"}))),a("nav",{key:"c56a1e63344e42b1be26fe817705f0265bdb2bcf","aria-label":"Hauptnavigation"},a("div",{key:"fbaebcb4857b0fba7b81cc35ef6092bb98ae89f8",role:"menubar",class:"primary-menubar"},a("slot",{key:"4a408eacbb41fa57d838581c18389241dce0e634",name:"nav-primary",ref:e=>this.primarySlot=e}),a("div",{key:"6229842569958c724478c6aa15adc75b07d8417e",role:"menu",id:"nav-secondary",class:"secondary-menubar",hidden:!this.lmvzActiveNav,ref:e=>this.secondaryNav=e},a("slot",{key:"4dd4278eaa77cfc984e338da6bb1aa7321c6a545",name:this.secondarySlotName,ref:e=>this.secondarySlot=e})))),a("div",{key:"98b7802b0dc2dfe3a7a38bf89ae2b68994734396",class:"actions"},a("slot",{key:"5f7682fe0ad34496b887baab7b19641a86c01acb",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}]}]),m=d,h=function(){"undefined"!=typeof customElements&&["lmvz-header","lmvz-icon"].forEach((e=>{switch(e){case"lmvz-header":customElements.get(r(e))||customElements.define(r(e),d);break;case"lmvz-icon":customElements.get(r(e))||o()}}))};export{m as LmvzHeader,h as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as
|
|
1
|
+
import{L as o,d as s}from"./p-Bz0S2cGj.js";const p=o,r=s;export{p as LmvzIcon,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,c as e,h as r,t as i}from"./p-vi4YzJmv.js";import{c as o}from"./p-BfTCfPZ1.js";import{R as a,A as n}from"./p-CMteT-Yo.js";import{a as l}from"./p-B3JVFwO1.js";let s=0;const c=t(class extends a{get el(){return this}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){this.value=this.nativeInputElement.value=t??"",this.internals.setFormValue?.(t),this.lmvzInput.emit(t)}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}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:"4dffa432df9b8ca5d89c02b59cfe25b9321ca162",class:o("input-container",{"interaction-filled":t})},r("div",{key:"ade1cd1137acce218d458c1b66b2eb29cf887b70",class:"input-wrapper"},r("slot",{key:"013dff3540481724658ff754bf3db0585ec3b6f4",name:"before-input"}),r("div",{key:"6587bb63c79f97c31abff5be0a91eb16374971d5",class:"label-input-group"},r("label",{key:"2ef0a35fbd38b255423d2793415568a661476db3",htmlFor:this.inputId,class:o({floating:e})},this.label,this.required&&r("span",{key:"0785826710ee4ecea96037cc689c34a43113552e",class:"required-indicator","aria-hidden":"true"}," ","*")),r("input",{key:"5ad0d4b2d1c11dd89824db87e331232ba703a05e",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:"a23676cc830cac7fbf87fef81a8d05b50b831725",name:"after-input"})),r("div",{key:"e0a05138954d70508f840b6d5c4f53e74c2f2979",id:this.helperId,role:"status"},this.helperText||null),r("div",{key:"fcba57be2d596b3b8aa0ac97b2fd31dc3e77e14b",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-selected, #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-BaPwpeMs.js";import{c as o}from"./p-BfTCfPZ1.js";import{R as a,a as n}from"./p-DugBvwmd.js";import{a as l}from"./p-B3JVFwO1.js";let s=0;const p=t(class extends a{get el(){return this}validationEl=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){this.value=this.nativeInputElement.value=t??"",this.internals.setFormValue?.(t),this.lmvzInput.emit(t)}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:"79ab97e1e1d0217d5302ca1dea7087292ef19fc7",class:o("input-container",{"interaction-filled":t})},r("div",{key:"9e59a33c261f610f93e1d6db3a07107f9300bbda",class:"input-wrapper"},r("slot",{key:"fadb3f5e49afa817014cdbd44774462b467827f4",name:"before-input"}),r("div",{key:"27d592787bb841fbd430c2e8ce0adc10f59b68ec",class:"label-input-group"},r("label",{key:"f83f154f356660ecafde254b5437ce6c42898b54",htmlFor:this.inputId,class:o({floating:e})},this.label,this.required&&r("span",{key:"b51463179a2099ecd687ccd2480136379b0d0502",class:"required-indicator","aria-hidden":"true"}," ","*")),r("input",{key:"30d8308f286e82fba5d2ebdad972509c06294543",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:"a8448a0827ce24194b21b8281d2b54eb76f24652",name:"after-input"})),r("div",{key:"79413854b97380812c84f3128d1db053d4154008",id:this.helperId,role:"status"},this.helperText||null),r("div",{key:"d34c6b421688934b69917f6da1f9bb22c220a6f9",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-selected, #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}]}]),c=p,u=function(){"undefined"!=typeof customElements&&["lmvz-input"].forEach((t=>{"lmvz-input"===t&&(customElements.get(i(t))||customElements.define(i(t),p))}))};export{c as LmvzInput,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,c as t,h as m,d as o,t as r}from"./p-
|
|
1
|
+
import{p as e,c as t,h as m,d as o,t as r}from"./p-BaPwpeMs.js";import{R as n,a}from"./p-DugBvwmd.js";import{E as l}from"./p-CN0JX9-m.js";const i=e(class extends n{get el(){return this}validationEl=this.el;validationSlot;get role(){return"menuitem"}get ti(){return 0}lmvzActivation;constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzActivation=t(this,"lmvzActivation"),this.addController(new a(this,{validationTiming:"slot"})),this.addController(new l(this))}render(){return m(o,{key:"a022a198618ac628cb39c97b29cf0c332b522e79"},m("slot",{key:"c8dab82b31b49db3d966cacb1cf9ef5cb1763797",ref:e=>this.validationSlot=e}))}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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-selected, #f1f9fe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4); }"}},[774,"lmvz-menuitem",{role:[2561],ti:[2562,"tabindex"]}]),s=i,c=function(){"undefined"!=typeof customElements&&["lmvz-menuitem"].forEach((e=>{"lmvz-menuitem"===e&&(customElements.get(r(e))||customElements.define(r(e),i))}))};export{s as LmvzMenuitem,c as defineCustomElement}
|