@lmvz-ds/components 0.22.1 → 0.24.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 +13 -0
- package/cjs/{aria-loader-Cec1zR2g.js → aria-loader-BRo2FTGh.js} +1 -0
- package/cjs/index.cjs.js +1 -1
- package/cjs/lmvz-button_3.cjs.entry.js +375 -0
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +4 -4
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +5 -5
- package/cjs/lmvz-menuitem.cjs.entry.js +4 -4
- package/cjs/lmvz-modal.cjs.entry.js +6 -109
- package/cjs/lmvz-select.cjs.entry.js +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +4 -4
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{reactive-controller-host-DnSTWHCF.js → reactive-controller-host-BOFg4vL-.js} +1 -1
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-button/lmvz-button.css +60 -41
- package/collection/components/lmvz-button/lmvz-button.js +6 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +14 -0
- package/collection/components/lmvz-button-group/lmvz-button-group.js +216 -0
- package/collection/components/lmvz-card/lmvz-card.css +59 -40
- package/collection/components/lmvz-card/lmvz-card.js +1 -1
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +12 -8
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +1 -1
- package/collection/components/lmvz-header/lmvz-header.js +1 -1
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-input/lmvz-input.css +12 -8
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +12 -8
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +36 -38
- package/collection/components/lmvz-modal/lmvz-modal.js +4 -108
- package/collection/components/lmvz-select/lmvz-select.css +12 -8
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +12 -8
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-button-group.d.ts +11 -0
- package/components/lmvz-button-group.d.ts.bak +11 -0
- package/components/lmvz-button-group.js +1 -0
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-CcnyKhAw.js +1 -0
- package/components/p-CdDO7mQa.js +1 -0
- package/components/p-Cg2XX_J-.js +1 -0
- package/components/p-DSvYtVoD.js +1 -0
- package/components/p-slgmfnHm.js +1 -0
- package/esm/{aria-loader-BVolm0lC.js → aria-loader-GfsGHZHY.js} +1 -1
- package/esm/index.js +1 -1
- package/esm/lmvz-button_3.entry.js +371 -0
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +4 -4
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +5 -5
- package/esm/lmvz-menuitem.entry.js +4 -4
- package/esm/lmvz-modal.entry.js +6 -109
- package/esm/lmvz-select.entry.js +4 -4
- package/esm/lmvz-toggle.entry.js +4 -4
- package/esm/loader.js +1 -1
- package/esm/{reactive-controller-host-lF2kXM1x.js → reactive-controller-host-CroMsXdS.js} +1 -1
- package/hydrate/index.js +273 -189
- package/hydrate/index.mjs +273 -189
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-2824a56b.entry.js +1 -0
- package/lmvz-components/p-4263c9b2.entry.js +1 -0
- package/lmvz-components/p-4f5c3c4a.entry.js +1 -0
- package/lmvz-components/p-6f8cbc4f.entry.js +1 -0
- package/lmvz-components/p-88adb9fa.entry.js +1 -0
- package/lmvz-components/{p-DCTzMRMQ.js → p-BRl6zKXT.js} +1 -1
- package/lmvz-components/p-CdDO7mQa.js +1 -0
- package/lmvz-components/p-a7c3074a.entry.js +1 -0
- package/lmvz-components/p-b3b04d46.entry.js +1 -0
- package/lmvz-components/p-d1dacf7e.entry.js +1 -0
- package/lmvz-components/{p-d984e118.entry.js → p-f6d1d9df.entry.js} +1 -1
- package/lmvz-components/p-fefefc54.entry.js +1 -0
- package/manifest.json +111 -12
- package/package.json +5 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +1 -1
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +20 -0
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -16
- package/types/components.d.ts +27 -3
- package/cjs/lmvz-button_2.cjs.entry.js +0 -198
- package/components/p-Boj0PCdB.js +0 -1
- package/components/p-Cc6dOWwS.js +0 -1
- package/components/p-DBc1BzQb.js +0 -1
- package/esm/lmvz-button_2.entry.js +0 -195
- package/lmvz-components/p-08a08b63.entry.js +0 -1
- package/lmvz-components/p-1b181e90.entry.js +0 -1
- package/lmvz-components/p-23fb2476.entry.js +0 -1
- package/lmvz-components/p-6bb145e4.entry.js +0 -1
- package/lmvz-components/p-7a310b1e.entry.js +0 -1
- package/lmvz-components/p-b7940687.entry.js +0 -1
- package/lmvz-components/p-db8306a5.entry.js +0 -1
- package/lmvz-components/p-dhVSUYqd.js +0 -1
- package/lmvz-components/p-ea335543.entry.js +0 -1
- package/lmvz-components/p-f8ea0eb2.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @lmvz-ds/components
|
|
2
2
|
|
|
3
|
+
## 0.24.0
|
|
4
|
+
|
|
5
|
+
## 0.23.0
|
|
6
|
+
|
|
7
|
+
### Minor Changes
|
|
8
|
+
|
|
9
|
+
- 55e884f: Button-Group Komponente hinzugefügt
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 55e884f: Button-Attribut Variant ist nun optional
|
|
14
|
+
- 09e454c: Generierung von @custom-media Breakpoints aus Supernova Tokens hinzugefügt
|
|
15
|
+
|
|
3
16
|
## 0.22.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -117,5 +117,6 @@ exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = ARIA_VALIDATION_RUNTIME_CHANGED_
|
|
|
117
117
|
exports.disableAriaValidation = disableAriaValidation;
|
|
118
118
|
exports.enableAriaValidation = enableAriaValidation;
|
|
119
119
|
exports.isAriaValidationEnabled = isAriaValidationEnabled;
|
|
120
|
+
exports.isPromise = isPromise;
|
|
120
121
|
exports.queueValidation = queueValidation;
|
|
121
122
|
exports.useVerboseLogging = useVerboseLogging;
|
package/cjs/index.cjs.js
CHANGED
|
@@ -0,0 +1,375 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-lW-SEvL7.js');
|
|
4
|
+
var index$1 = require('./index-Bp6Dd2i1.js');
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
6
|
+
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
7
|
+
var component = require('./component-C7cavwmZ.js');
|
|
8
|
+
var ariaLoader = require('./aria-loader-BRo2FTGh.js');
|
|
9
|
+
var svg = require('./svg-BMBduILB.js');
|
|
10
|
+
var icons = require('./icons-BQASWgk-.js');
|
|
11
|
+
require('./logger-DsM6xg6V.js');
|
|
12
|
+
|
|
13
|
+
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.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-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc); outline-offset: 2px; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
14
|
+
|
|
15
|
+
const LmvzButton = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
16
|
+
get el() { return index.getElement(this); }
|
|
17
|
+
validationEl;
|
|
18
|
+
inheritedAttributes = {};
|
|
19
|
+
formEl = null;
|
|
20
|
+
formButtonEl = null;
|
|
21
|
+
lmvzActivation;
|
|
22
|
+
get ti() {
|
|
23
|
+
return 0;
|
|
24
|
+
}
|
|
25
|
+
scale = 'default';
|
|
26
|
+
variant;
|
|
27
|
+
disabled = false;
|
|
28
|
+
type = 'button';
|
|
29
|
+
form;
|
|
30
|
+
formMethod;
|
|
31
|
+
name;
|
|
32
|
+
value;
|
|
33
|
+
constructor(hostRef) {
|
|
34
|
+
super();
|
|
35
|
+
index.registerInstance(this, hostRef);
|
|
36
|
+
this.lmvzActivation = index.createEvent(this, "lmvzActivation", 7);
|
|
37
|
+
this.addController(new reactiveControllerHost.AriaValidationController(this));
|
|
38
|
+
this.addController(new elementActivationController.ElementActivationController(this, {
|
|
39
|
+
localHandler: this.handleClick.bind(this),
|
|
40
|
+
keys: ['Enter'],
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
43
|
+
connectedCallback() {
|
|
44
|
+
this.inheritedAttributes = component.inheritAriaAttributes(this.el);
|
|
45
|
+
super.connectedCallback();
|
|
46
|
+
}
|
|
47
|
+
disconnectedCallback() {
|
|
48
|
+
this.formButtonEl?.remove();
|
|
49
|
+
this.formButtonEl = null;
|
|
50
|
+
this.formEl = null;
|
|
51
|
+
super.disconnectedCallback();
|
|
52
|
+
}
|
|
53
|
+
renderHiddenButton() {
|
|
54
|
+
if (this.type !== 'submit') {
|
|
55
|
+
this.formButtonEl?.remove();
|
|
56
|
+
this.formButtonEl = null;
|
|
57
|
+
this.formEl = null;
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const formEl = component.findFormByRef(this.form, this.el);
|
|
61
|
+
if (!formEl) {
|
|
62
|
+
this.formButtonEl?.remove();
|
|
63
|
+
this.formButtonEl = null;
|
|
64
|
+
this.formEl = null;
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
this.formEl = formEl;
|
|
68
|
+
const formButtonEl = this.formButtonEl ?? document.createElement('button');
|
|
69
|
+
formButtonEl.type = 'submit';
|
|
70
|
+
formButtonEl.style.display = 'none';
|
|
71
|
+
formButtonEl.disabled = this.disabled;
|
|
72
|
+
formButtonEl.name = this.name ?? '';
|
|
73
|
+
formButtonEl.value = this.value ?? '';
|
|
74
|
+
if (this.formMethod) {
|
|
75
|
+
formButtonEl.setAttribute('formmethod', this.formMethod);
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
formButtonEl.removeAttribute('formmethod');
|
|
79
|
+
}
|
|
80
|
+
if (this.formButtonEl !== formButtonEl) {
|
|
81
|
+
this.formButtonEl = formButtonEl;
|
|
82
|
+
}
|
|
83
|
+
if (formButtonEl.parentElement !== formEl) {
|
|
84
|
+
formButtonEl.remove();
|
|
85
|
+
formEl.appendChild(formButtonEl);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
submitForm(ev) {
|
|
89
|
+
if (this.formEl && this.formButtonEl) {
|
|
90
|
+
ev.preventDefault();
|
|
91
|
+
this.formButtonEl.click();
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
handleClick = (ev) => {
|
|
95
|
+
if (this.type === 'submit') {
|
|
96
|
+
this.submitForm(ev);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
render() {
|
|
100
|
+
this.renderHiddenButton();
|
|
101
|
+
return (index.h(index.Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, index.h("button", { key: '8d73f979fa227de22a03403a2a3938684911060a', ref: (e) => (this.validationEl = e), part: "button", disabled: this.disabled, type: this.type, class: index$1.classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, index.h("slot", { key: '18e91a2f94ba0d7e5cf13150191003e2f0b2a03a' }))));
|
|
102
|
+
}
|
|
103
|
+
static get delegatesFocus() { return true; }
|
|
104
|
+
};
|
|
105
|
+
LmvzButton.style = lmvzButtonCss();
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Returns a function that delegates to the given predicate/filter and negates its result.
|
|
109
|
+
* The returned function preserves the input function's types, arguments and timing.
|
|
110
|
+
*
|
|
111
|
+
* @param delegate - The predicate/filter function to negate.
|
|
112
|
+
* @returns A function that returns the negated result.
|
|
113
|
+
*/
|
|
114
|
+
function negate(delegate) {
|
|
115
|
+
return (...args) => {
|
|
116
|
+
const result = delegate(...args);
|
|
117
|
+
return ariaLoader.isPromise(result) ? result.then((res) => !res) : !result;
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
|
|
122
|
+
|
|
123
|
+
const LmvzButtonGroup = class {
|
|
124
|
+
constructor(hostRef) {
|
|
125
|
+
index.registerInstance(this, hostRef);
|
|
126
|
+
}
|
|
127
|
+
actionsSlot;
|
|
128
|
+
validationMessageCache = [];
|
|
129
|
+
actionsStateObserver;
|
|
130
|
+
get primaryEnabledAction() {
|
|
131
|
+
return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
|
|
132
|
+
}
|
|
133
|
+
get hasActions() {
|
|
134
|
+
return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
|
|
135
|
+
}
|
|
136
|
+
componentDidLoad() {
|
|
137
|
+
this.handleActionsSlotChange();
|
|
138
|
+
}
|
|
139
|
+
disconnectedCallback() {
|
|
140
|
+
this.actionsStateObserver?.disconnect();
|
|
141
|
+
}
|
|
142
|
+
get assignedElements() {
|
|
143
|
+
return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
|
|
144
|
+
}
|
|
145
|
+
get assignedButtons() {
|
|
146
|
+
return this.assignedElements.filter(isActionButton);
|
|
147
|
+
}
|
|
148
|
+
get visibleButtons() {
|
|
149
|
+
return this.assignedButtons.filter(isVisible);
|
|
150
|
+
}
|
|
151
|
+
get enabledButtons() {
|
|
152
|
+
return this.visibleButtons.filter(negate(isDisabledButton));
|
|
153
|
+
}
|
|
154
|
+
getActionValidationResult() {
|
|
155
|
+
if (!this.visibleButtons.length) {
|
|
156
|
+
return [];
|
|
157
|
+
}
|
|
158
|
+
const primaryActions = this.visibleButtons.filter(isPrimaryAction);
|
|
159
|
+
const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
|
|
160
|
+
const issues = [];
|
|
161
|
+
const order = this.visibleButtons.toReversed();
|
|
162
|
+
if (primaryActions.length !== 1)
|
|
163
|
+
issues.push('LmvzModal actions slot must contain exactly one primary action.');
|
|
164
|
+
if (secondaryActions.length > 1)
|
|
165
|
+
issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
|
|
166
|
+
if (primaryActions.length) {
|
|
167
|
+
const primaryAction = primaryActions[0];
|
|
168
|
+
const secondaryAction = secondaryActions[0];
|
|
169
|
+
if (order.indexOf(primaryAction) !== 0)
|
|
170
|
+
issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
|
|
171
|
+
if (secondaryAction && order.indexOf(secondaryAction) !== 1)
|
|
172
|
+
issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
|
|
173
|
+
}
|
|
174
|
+
else if (secondaryActions.length) {
|
|
175
|
+
const secondaryAction = secondaryActions[0];
|
|
176
|
+
if (order.indexOf(secondaryAction) !== 0)
|
|
177
|
+
issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
|
|
178
|
+
}
|
|
179
|
+
return issues;
|
|
180
|
+
}
|
|
181
|
+
handleActionsSlotChange = () => {
|
|
182
|
+
this.observeActionState();
|
|
183
|
+
this.syncActionsState();
|
|
184
|
+
};
|
|
185
|
+
observeActionState() {
|
|
186
|
+
if (typeof MutationObserver === 'undefined')
|
|
187
|
+
return;
|
|
188
|
+
this.actionsStateObserver?.disconnect();
|
|
189
|
+
if (!this.assignedButtons.length)
|
|
190
|
+
return;
|
|
191
|
+
this.actionsStateObserver = new MutationObserver(() => {
|
|
192
|
+
this.syncActionsState();
|
|
193
|
+
});
|
|
194
|
+
this.assignedButtons.forEach((element) => {
|
|
195
|
+
this.actionsStateObserver?.observe(element, {
|
|
196
|
+
attributes: true,
|
|
197
|
+
attributeFilter: ['disabled', 'hidden', 'variant'],
|
|
198
|
+
});
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
syncActionsState() {
|
|
202
|
+
const assignedElements = this.assignedElements;
|
|
203
|
+
assignedElements.forEach((element) => {
|
|
204
|
+
const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
205
|
+
if (isAllowedAction)
|
|
206
|
+
return;
|
|
207
|
+
if (!element.hasAttribute('hidden')) {
|
|
208
|
+
element.setAttribute('hidden', '');
|
|
209
|
+
}
|
|
210
|
+
if (element.getAttribute('aria-hidden') !== 'true') {
|
|
211
|
+
element.setAttribute('aria-hidden', 'true');
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
this.checkActions();
|
|
215
|
+
const length = this.visibleButtons.length;
|
|
216
|
+
for (let i = 0; i < length; i++) {
|
|
217
|
+
const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
|
|
218
|
+
const element = this.visibleButtons.at(i);
|
|
219
|
+
if (!element)
|
|
220
|
+
continue;
|
|
221
|
+
if (isLmvzButton(element)) {
|
|
222
|
+
if (!element.getAttribute('variant'))
|
|
223
|
+
element.setAttribute('variant', variant);
|
|
224
|
+
}
|
|
225
|
+
else {
|
|
226
|
+
element.classList.add(variant);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
this.focusPrimaryAction();
|
|
230
|
+
}
|
|
231
|
+
focusPrimaryAction() {
|
|
232
|
+
const focusTarget = this.primaryEnabledAction;
|
|
233
|
+
if (!focusTarget || typeof window === 'undefined')
|
|
234
|
+
return;
|
|
235
|
+
window.requestAnimationFrame(() => {
|
|
236
|
+
if (component.canReceiveFocus(focusTarget)) {
|
|
237
|
+
focusTarget.focus();
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
checkActions() {
|
|
242
|
+
if (!ariaLoader.isAriaValidationEnabled())
|
|
243
|
+
return;
|
|
244
|
+
const issues = this.getActionValidationResult();
|
|
245
|
+
if (!issues.length) {
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
issues.forEach((issue) => {
|
|
249
|
+
if (this.validationMessageCache.includes(issue))
|
|
250
|
+
return;
|
|
251
|
+
console.warn(issue);
|
|
252
|
+
this.validationMessageCache.push(issue);
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
render() {
|
|
256
|
+
return (index.h(index.Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, index.h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
function isActionButton(element) {
|
|
260
|
+
return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
261
|
+
}
|
|
262
|
+
function isLmvzButton(element) {
|
|
263
|
+
return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
|
|
264
|
+
}
|
|
265
|
+
function isDisabledButton(element) {
|
|
266
|
+
return element.hasAttribute('disabled') || element.disabled === true;
|
|
267
|
+
}
|
|
268
|
+
function isVisible(element) {
|
|
269
|
+
return !element.hasAttribute('hidden');
|
|
270
|
+
}
|
|
271
|
+
function getActionVariant(element) {
|
|
272
|
+
const variant = element.getAttribute('variant') ?? element.variant;
|
|
273
|
+
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
274
|
+
}
|
|
275
|
+
function isPrimaryAction(element) {
|
|
276
|
+
return getActionVariant(element) === 'primary';
|
|
277
|
+
}
|
|
278
|
+
function isSecondaryAction(element) {
|
|
279
|
+
return getActionVariant(element) === 'secondary';
|
|
280
|
+
}
|
|
281
|
+
LmvzButtonGroup.style = lmvzButtonGroupCss();
|
|
282
|
+
|
|
283
|
+
const lmvzIconCss = () => `.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)}}`;
|
|
284
|
+
|
|
285
|
+
const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
286
|
+
intersectionObserver;
|
|
287
|
+
ariaValidationController = new reactiveControllerHost.AriaValidationController(this);
|
|
288
|
+
get el() { return index.getElement(this); }
|
|
289
|
+
validationEl;
|
|
290
|
+
icon;
|
|
291
|
+
weight = 'medium';
|
|
292
|
+
size = 'md';
|
|
293
|
+
iconset;
|
|
294
|
+
iconData;
|
|
295
|
+
visible = false;
|
|
296
|
+
ariaLabel;
|
|
297
|
+
get ariaHidden() {
|
|
298
|
+
return !this.ariaLabel;
|
|
299
|
+
}
|
|
300
|
+
constructor(hostRef) {
|
|
301
|
+
super();
|
|
302
|
+
index.registerInstance(this, hostRef);
|
|
303
|
+
this.addController(this.ariaValidationController);
|
|
304
|
+
}
|
|
305
|
+
connectedCallback() {
|
|
306
|
+
this.waitUntilVisible(() => {
|
|
307
|
+
this.visible = true;
|
|
308
|
+
this.loadIconPathData();
|
|
309
|
+
});
|
|
310
|
+
super.connectedCallback();
|
|
311
|
+
}
|
|
312
|
+
disconnectedCallback() {
|
|
313
|
+
if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
|
|
314
|
+
this.intersectionObserver.disconnect();
|
|
315
|
+
}
|
|
316
|
+
this.intersectionObserver = undefined;
|
|
317
|
+
super.disconnectedCallback();
|
|
318
|
+
}
|
|
319
|
+
async loadIconPathData() {
|
|
320
|
+
const { icon, iconset, visible } = this;
|
|
321
|
+
if (!icon || !visible) {
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
const maybeIcon = svg.parseSvgString(icon);
|
|
325
|
+
if (maybeIcon) {
|
|
326
|
+
this.iconData = maybeIcon;
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
this.iconData = await icons.resolveIconSvg({
|
|
330
|
+
icon,
|
|
331
|
+
iconset,
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
componentDidRender() {
|
|
335
|
+
this.validationEl = this.el.querySelector('svg');
|
|
336
|
+
this.ariaValidationController.revalidateAria();
|
|
337
|
+
super.componentDidRender();
|
|
338
|
+
}
|
|
339
|
+
render() {
|
|
340
|
+
return index.h(index.Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
341
|
+
}
|
|
342
|
+
waitUntilVisible(callback, rootMargin = 50) {
|
|
343
|
+
if (typeof window === 'undefined' || !window.IntersectionObserver) {
|
|
344
|
+
callback();
|
|
345
|
+
return;
|
|
346
|
+
}
|
|
347
|
+
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
348
|
+
entries.some((entry) => {
|
|
349
|
+
if (entry.isIntersecting) {
|
|
350
|
+
if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
|
|
351
|
+
this.intersectionObserver.disconnect();
|
|
352
|
+
}
|
|
353
|
+
this.intersectionObserver = undefined;
|
|
354
|
+
callback();
|
|
355
|
+
return true;
|
|
356
|
+
}
|
|
357
|
+
return false;
|
|
358
|
+
});
|
|
359
|
+
}, { rootMargin: `${rootMargin}px` });
|
|
360
|
+
this.intersectionObserver.observe(this.el);
|
|
361
|
+
}
|
|
362
|
+
static get watchers() { return {
|
|
363
|
+
"icon": [{
|
|
364
|
+
"loadIconPathData": 0
|
|
365
|
+
}],
|
|
366
|
+
"iconset": [{
|
|
367
|
+
"loadIconPathData": 0
|
|
368
|
+
}]
|
|
369
|
+
}; }
|
|
370
|
+
};
|
|
371
|
+
LmvzIcon.style = lmvzIconCss();
|
|
372
|
+
|
|
373
|
+
exports.lmvz_button = LmvzButton;
|
|
374
|
+
exports.lmvz_button_group = LmvzButtonGroup;
|
|
375
|
+
exports.lmvz_icon = LmvzIcon;
|
|
@@ -23,7 +23,7 @@ function joinPath(...parts) {
|
|
|
23
23
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
26
|
+
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.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-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc); outline-offset: 2px; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.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; }`;
|
|
27
27
|
|
|
28
28
|
const LmvzCard = class {
|
|
29
29
|
constructor(hostRef) {
|
|
@@ -48,7 +48,7 @@ const LmvzCard = class {
|
|
|
48
48
|
const imgStyle = {
|
|
49
49
|
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
50
50
|
};
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
51
|
+
return (index.h(index.Host, { key: '2d9ecdeed986f142fb7ff477b56dece59549bbc7', role: "article" }, index.h("div", { key: '34fc9c3a1338b31ce73424e8c07c79a291ead85c', class: "top" }, index.h("div", { key: '1756e6b26d7f42499753c36ed0fc13755fe32bfe', class: "image-wrapper", style: imgStyle }, index.h("div", { key: 'cd8be8acc9e949092b6363024316d12d445a9fbc', class: "chip-slot" }, index.h("slot", { key: '26389ab3b7031b948ff1701857e6028446662cf5', name: "chip" })))), index.h("div", { key: '2fa61cd7bef437f15929ae39be7fa294e8778321', class: "bottom" }, index.h("header", { key: 'b237ca025e42a29f528f827dc3c83b3b0f9267c0' }, index.h("h2", { key: 'ffd0a509ba97acb75d4c15d0fd01eef08689a2a7', class: "title" }, this.cardTitle)), index.h("p", { key: 'c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1', class: "description" }, this.description), index.h("div", { key: '7663f93b41ef1e798b464bd6ad75ca8a53c0667b', class: "actions" }, index.h("button", { key: '3348e6700aa1571183558ab8fe4f73393c1cc943', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), index.h("button", { key: 'd3a12cdabbdd68c3b04e06984db44abd3bbd22ea', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, index.h("span", { key: '80e31e6b691e18d1b42a2b4831349c3abf8e02b0', class: "icon-placeholder" }, "..."))))));
|
|
52
52
|
}
|
|
53
53
|
static get assetsDirs() { return ["../../assets"]; }
|
|
54
54
|
};
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
4
|
var svg = require('./svg-BMBduILB.js');
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
6
6
|
require('./logger-DsM6xg6V.js');
|
|
7
|
-
require('./aria-loader-
|
|
7
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
8
8
|
|
|
9
9
|
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPgogICAgPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
|
|
10
10
|
|
|
11
|
-
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
11
|
+
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f1f9fe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } [disabled].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { cursor: not-allowed; } [disabled].sc-lmvz-checkbox-h input.sc-lmvz-checkbox { cursor: not-allowed; } input.sc-lmvz-checkbox:focus-visible ~ .box.sc-lmvz-checkbox { outline: 2px solid var(--checkbox-focus-color); outline-offset: 2px; box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) 0 var(--lmvz-semantic-shadow-l1-1-blur, 4px) var(--lmvz-semantic-color-shadow-l1-colored, rgba(175, 223, 249, 0.42)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } input.sc-lmvz-checkbox:focus-visible ~ .box.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }`;
|
|
12
12
|
|
|
13
13
|
const CHECKMARK_SVG = svg.toValidSvgStringWithFallback(checkmarkSvg);
|
|
14
14
|
let checkboxIdCounter = 0;
|
|
@@ -99,7 +99,7 @@ const LmvzCheckbox = class extends reactiveControllerHost.ReactiveControllerHost
|
|
|
99
99
|
this.lmvzChange.emit(this.checked);
|
|
100
100
|
};
|
|
101
101
|
render() {
|
|
102
|
-
return (index.h(index.Host, { key: '
|
|
102
|
+
return (index.h(index.Host, { key: '70201fa49465f1e29b98bb251ea254be0293b1df' }, index.h("div", { key: 'dfeb788e3e2d9a8329e7798954c744eee616692e', class: "pill" }, index.h("input", { key: '79fefaa297a5fbbb1b7f180c7cf4cccf8650a1f0', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), index.h("span", { key: '8808a026274979678515b3e750065af38d62fff9', class: "box", "aria-hidden": "true" }, this.checkedState && index.h("span", { key: '861c08fb2a5cc6f24d3ae0a9f28cb6d2f51beda4', class: "indicator", innerHTML: CHECKMARK_SVG })), index.h("span", { key: '6dc36656d76bd3a6816553b4dcbdbea2c9bd2b0f', class: "content" }, index.h("label", { key: 'c343c4261e2eb231925d0f3ca0a83f9f3cdd0b9b', htmlFor: this.checkboxId }, this.label), this.helperText && (index.h("span", { key: '8473ed19adfe975b715a5e0b78c949c6b11de99e', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (index.h("span", { key: 'e934cec1cc622908188cf9090e24988e5df45799', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
103
103
|
}
|
|
104
104
|
static get formAssociated() { return true; }
|
|
105
105
|
static get watchers() { return {
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
4
|
var ds_constants = require('./ds.constants-DSnxZ3ia.js');
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
6
|
-
var ariaLoader = require('./aria-loader-
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
6
|
+
var ariaLoader = require('./aria-loader-BRo2FTGh.js');
|
|
7
7
|
|
|
8
8
|
function debounce(func, wait) {
|
|
9
9
|
let timeout;
|
|
@@ -66,7 +66,7 @@ const LmvzChip = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
66
66
|
}
|
|
67
67
|
}, 500);
|
|
68
68
|
render() {
|
|
69
|
-
return (index.h(index.Host, { key: '
|
|
69
|
+
return (index.h(index.Host, { key: '70654d69189e77f9356853a921366083b2c4b969', type: this.type, size: this.size }, index.h("slot", { key: 'c7e667b93166286fe68a812dd8eec82885e3fc5e', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), index.h("span", { key: 'af38dd0429b42685a114e26175ce42d09f5fdcc1', class: "content-overflow-wrapper" }, index.h("slot", { key: '924158498d65b9ac7c912b6b1a479016176e0b78', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), index.h("slot", { key: '9ff0394dbfb2131fafe513d0f2d8ce26c7781f20', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
70
70
|
}
|
|
71
71
|
static get watchers() { return {
|
|
72
72
|
"type": [{
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"
|
|
22
|
+
return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[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]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button_3.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
5
5
|
var component = require('./component-C7cavwmZ.js');
|
|
6
6
|
var lmvzMenuitem_entry = require('./lmvz-menuitem.cjs.entry.js');
|
|
7
|
-
require('./aria-loader-
|
|
7
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
8
8
|
require('./element-activation-controller-DC_6T0Rt.js');
|
|
9
9
|
|
|
10
10
|
class ListKeyboardNavigationController {
|
|
@@ -139,7 +139,7 @@ const LmvzHeader = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
render() {
|
|
142
|
-
return (index.h(index.Host, { key: '
|
|
142
|
+
return (index.h(index.Host, { key: '323b7b13ef147f48e5f06537c7f27ab6e8a649ca', onFocus: this.delegateFocus.bind(this) }, index.h("div", { key: '518434d55b7bfc5c1a8988f707984b8e2a41163c', class: "brand" }, index.h("slot", { key: '1829a1ba10ba3a4e1a0e32564c534e960dc652d1', name: "brand" }, index.h("img", { key: '485c217a7fc920646ec531cac9744a10f29dab4e', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), index.h("nav", { key: 'df2cea9f42427c0bb51a498cc2627f0113a608a0', "aria-label": "Hauptnavigation" }, index.h("div", { key: '93d6e0edc45c0032c5d3c93ea5f22e204fb0617e', role: "menubar", class: "primary-menubar" }, index.h("slot", { key: '1b0238ca89023cc9a0ec4453e79a4597aaa92f2a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), index.h("div", { key: 'd7576b23a5f9268a106c98052a869825493e0485', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, index.h("slot", { key: 'ada5f271c58350c44bb55c3bd976450214795f2b', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), index.h("div", { key: 'db47039ebf932942210fd3f0920f9f86f9d2b09b', class: "actions" }, index.h("slot", { key: '2d220a2946f26e69052d20dd4524e60fafbfe137', name: "actions" }))));
|
|
143
143
|
}
|
|
144
144
|
static get watchers() { return {
|
|
145
145
|
"lmvzActiveNav": [{
|