@lmvz-ds/components 0.27.1 → 0.28.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/assets/icons/chevron-down.svg +1 -1
- package/cjs/{aria-validation-controller-BMV2tv9-.js → aria-validation-controller-Z4TtOp2l.js} +1 -1
- package/cjs/close-sm-CATLoxxd.js +5 -0
- package/cjs/{ds.constants-BbWUmoDv.js → ds.constants-JXqgKnXL.js} +5 -0
- package/cjs/{index-BCFBLj0e.js → index-TGsVZNDP.js} +26 -2
- package/cjs/index.cjs.js +3 -1
- package/cjs/lmvz-action.cjs.entry.js +1 -1
- package/cjs/lmvz-button-group.cjs.entry.js +1 -1
- package/cjs/lmvz-button_2.cjs.entry.js +2 -2
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +2 -2
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +2 -2
- package/cjs/lmvz-header_2.cjs.entry.js +2 -2
- package/cjs/lmvz-input.cjs.entry.js +2 -2
- package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
- package/cjs/lmvz-message.cjs.entry.js +78 -0
- package/cjs/lmvz-modal.cjs.entry.js +5 -6
- package/cjs/lmvz-radio.cjs.entry.js +3 -3
- package/cjs/lmvz-select.cjs.entry.js +6 -6
- package/cjs/lmvz-snackbar.cjs.entry.js +5 -8
- package/cjs/lmvz-spinner.cjs.entry.js +20 -0
- package/cjs/lmvz-tab.cjs.entry.js +2 -2
- package/cjs/lmvz-tabs.cjs.entry.js +2 -2
- package/cjs/lmvz-toggle.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +2 -2
- package/cjs/warning-WEX_ABWL.js +8 -0
- package/collection/api/ds.constants.js +2 -0
- package/collection/assets/icons/chevron-down.svg +1 -1
- package/collection/collection-manifest.json +2 -0
- package/collection/components/lmvz-message/lmvz-message.css +50 -0
- package/collection/components/lmvz-message/lmvz-message.js +240 -0
- package/collection/components/lmvz-message/public.js +1 -0
- package/collection/components/lmvz-modal/lmvz-modal.js +1 -1
- package/collection/components/lmvz-radio/lmvz-radio.js +1 -1
- package/collection/components/lmvz-select/lmvz-select.css +63 -20
- package/collection/components/lmvz-select/lmvz-select.js +53 -2
- package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
- package/collection/components/lmvz-spinner/lmvz-spinner.css +40 -0
- package/collection/components/lmvz-spinner/lmvz-spinner.js +64 -0
- package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/index.js +2 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.d.ts +4 -0
- package/components/index.d.ts.bak +4 -0
- package/components/index.js +1 -1
- package/components/lmvz-action.js +1 -1
- package/components/lmvz-button-group.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.d.ts +11 -0
- package/components/lmvz-message.d.ts.bak +11 -0
- package/components/lmvz-message.js +1 -0
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-spinner.d.ts +11 -0
- package/components/lmvz-spinner.d.ts.bak +11 -0
- package/components/lmvz-spinner.js +1 -0
- package/components/lmvz-tab.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-BSV3KDWl.js +1 -0
- package/components/{p-2VdcUIrr.js → p-C0f2nNPZ.js} +1 -1
- package/components/{p-BJEQw1Sz.js → p-C8znmF2h.js} +1 -1
- package/components/{p-DjvbwRyl.js → p-CXakymyP.js} +1 -1
- package/components/{p-0P2Wb3pE.js → p-DAMVH-31.js} +1 -1
- package/components/p-DGg7OzDl.js +1 -0
- package/components/{p-Cs7RCOHZ.js → p-DGlgVBPj.js} +1 -1
- package/components/p-DsT_K3_I.js +1 -0
- package/esm/{aria-validation-controller-D-KO0Asb.js → aria-validation-controller-BnyUKeJ6.js} +1 -1
- package/esm/close-sm-BSV3KDWl.js +3 -0
- package/esm/{ds.constants-HeV_qTCr.js → ds.constants-DWePb-zu.js} +4 -1
- package/esm/{index-CKYszC64.js → index-BPeerEwm.js} +26 -2
- package/esm/index.js +1 -1
- package/esm/lmvz-action.entry.js +1 -1
- package/esm/lmvz-button-group.entry.js +1 -1
- package/esm/lmvz-button_2.entry.js +2 -2
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +2 -2
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +3 -3
- package/esm/lmvz-header_2.entry.js +2 -2
- package/esm/lmvz-input.entry.js +2 -2
- package/esm/lmvz-menuitem.entry.js +2 -2
- package/esm/lmvz-message.entry.js +76 -0
- package/esm/lmvz-modal.entry.js +4 -5
- package/esm/lmvz-radio.entry.js +3 -3
- package/esm/lmvz-select.entry.js +6 -6
- package/esm/lmvz-snackbar.entry.js +3 -6
- package/esm/lmvz-spinner.entry.js +18 -0
- package/esm/lmvz-tab.entry.js +2 -2
- package/esm/lmvz-tabs.entry.js +2 -2
- package/esm/lmvz-toggle.entry.js +3 -3
- package/esm/loader.js +3 -3
- package/esm/warning-DsT_K3_I.js +5 -0
- package/hydrate/index.js +154 -17
- package/hydrate/index.mjs +154 -17
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-6484fbc6.entry.js → p-211ee69d.entry.js} +1 -1
- package/lmvz-components/{p-c6228cee.entry.js → p-3b3e532f.entry.js} +1 -1
- package/lmvz-components/p-4484ab62.entry.js +1 -0
- package/lmvz-components/{p-cb756f95.entry.js → p-44fea470.entry.js} +1 -1
- package/lmvz-components/p-45c3ccb6.entry.js +1 -0
- package/lmvz-components/{p-758dbb82.entry.js → p-4dc44520.entry.js} +1 -1
- package/lmvz-components/{p-c5c064f1.entry.js → p-5ace2c2d.entry.js} +1 -1
- package/lmvz-components/p-5c951888.entry.js +1 -0
- package/lmvz-components/{p-8874ff19.entry.js → p-5fcc6f84.entry.js} +1 -1
- package/lmvz-components/p-61752dcd.entry.js +1 -0
- package/lmvz-components/p-84edbe53.entry.js +1 -0
- package/lmvz-components/{p-43b463bf.entry.js → p-877d0f3e.entry.js} +1 -1
- package/lmvz-components/{p-bd23eab3.entry.js → p-8b4740bb.entry.js} +1 -1
- package/lmvz-components/p-8fc25ee2.entry.js +1 -0
- package/lmvz-components/p-BPeerEwm.js +2 -0
- package/lmvz-components/p-BSV3KDWl.js +1 -0
- package/lmvz-components/{p-hRb38wX6.js → p-CPOia2kT.js} +1 -1
- package/lmvz-components/p-DWePb-zu.js +1 -0
- package/lmvz-components/p-DsT_K3_I.js +1 -0
- package/lmvz-components/{p-25f045b2.entry.js → p-a4077c9f.entry.js} +1 -1
- package/lmvz-components/{p-a5c921dc.entry.js → p-d53f8afe.entry.js} +1 -1
- package/lmvz-components/p-dc28c6d8.entry.js +1 -0
- package/lmvz-components/{p-6de9981f.entry.js → p-e3ce44a3.entry.js} +1 -1
- package/manifest.json +430 -2
- package/package.json +9 -1
- package/types/api/ds.constants.d.ts +8 -0
- package/types/components/lmvz-message/lmvz-message.d.ts +20 -0
- package/types/components/lmvz-message/public.d.ts +1 -0
- package/types/components/lmvz-select/lmvz-select.d.ts +3 -0
- package/types/components/lmvz-spinner/lmvz-spinner.d.ts +5 -0
- package/types/components.d.ts +133 -0
- package/types/index.d.ts +2 -1
- package/components/p-c7OzBK8f.js +0 -1
- package/lmvz-components/p-0a37e0f2.entry.js +0 -1
- package/lmvz-components/p-6988c3ea.entry.js +0 -1
- package/lmvz-components/p-7b15cdce.entry.js +0 -1
- package/lmvz-components/p-CKYszC64.js +0 -2
- package/lmvz-components/p-HeV_qTCr.js +0 -1
- package/lmvz-components/p-da16ff58.entry.js +0 -1
- package/lmvz-components/p-fe607f10.entry.js +0 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
|
-
import chevronDownSvg from "../../assets/icons/chevron-down.svg";
|
|
3
2
|
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
|
|
4
3
|
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
|
|
5
4
|
let selectIdCounter = 0;
|
|
@@ -21,6 +20,8 @@ export class LmvzSelect extends ReactiveControllerHost {
|
|
|
21
20
|
disabled = false;
|
|
22
21
|
required = false;
|
|
23
22
|
name;
|
|
23
|
+
size = 'default';
|
|
24
|
+
highlighted = false;
|
|
24
25
|
selectedLabel = '';
|
|
25
26
|
get hasValue() {
|
|
26
27
|
return Boolean(this.value);
|
|
@@ -50,7 +51,7 @@ export class LmvzSelect extends ReactiveControllerHost {
|
|
|
50
51
|
render() {
|
|
51
52
|
const hasValue = this.hasValue;
|
|
52
53
|
const shouldShowLabel = hasValue;
|
|
53
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: 'ce6cbd48640762e2d2c41f939c2bd0d400ada7a6', "data-highlighted": String(this.highlighted) }, h("div", { key: 'b89edad5195bfe39e1a236e67cd03ea61d20556e', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '29b4b78a8dd6e67107c6ae3bcfbf105f5f70de32', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '0a6f4af49a0e842470b6babace9201a995dc625d', "aria-hidden": "true" }, " *")), h("div", { key: '277e73e2cc7aca046c66c6516e48cbcdec86b544', "aria-hidden": "true" }, h("span", { key: '763dbccfb4624f4996fb7f412e8792a1cc006f34' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '1881c6bdbb577aed043fb19069398ca096c4cbc9', "aria-hidden": "true" }, " *")), h("span", { key: 'bcb3202de388bccb82882af748c7275327bb615b' }, h("svg", { key: '6a06e9eacb4c1e726b06b26243541c99f8b4ca1f', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '4984bd9b193183b03ab4858b4e8bea1ec3d2f471', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: '24b57f7ad6a3f2c010485ecd0e7aa4749d204320', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '8fc22471bb91bb1ec62bc49ec2c07bf3abb39b5c', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '5273b6fae866178fa7c334c7d12d228634f65279' }))), this.helperText && h("div", { key: 'd3b93cac08ca5e74f335d6d867ac587036810482', role: "status" }, this.helperText)));
|
|
54
55
|
}
|
|
55
56
|
static get is() { return "lmvz-select"; }
|
|
56
57
|
static get encapsulation() { return "scoped"; }
|
|
@@ -187,6 +188,56 @@ export class LmvzSelect extends ReactiveControllerHost {
|
|
|
187
188
|
"setter": false,
|
|
188
189
|
"reflect": false,
|
|
189
190
|
"attribute": "name"
|
|
191
|
+
},
|
|
192
|
+
"size": {
|
|
193
|
+
"type": "string",
|
|
194
|
+
"mutable": false,
|
|
195
|
+
"complexType": {
|
|
196
|
+
"original": "Select.Size",
|
|
197
|
+
"resolved": "\"default\" | \"large\" | \"small\"",
|
|
198
|
+
"references": {
|
|
199
|
+
"Select": {
|
|
200
|
+
"location": "import",
|
|
201
|
+
"path": "../../api",
|
|
202
|
+
"id": "src/api/index.d.ts::Select",
|
|
203
|
+
"referenceLocation": "Select"
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
"required": false,
|
|
208
|
+
"optional": false,
|
|
209
|
+
"docs": {
|
|
210
|
+
"tags": [],
|
|
211
|
+
"text": "Visual size variant of the select field.\n- `small` \u2014 compact height\n- `default` \u2014 standard height (default)\n- `large` \u2014 increased height"
|
|
212
|
+
},
|
|
213
|
+
"getter": false,
|
|
214
|
+
"setter": false,
|
|
215
|
+
"reflect": true,
|
|
216
|
+
"attribute": "size",
|
|
217
|
+
"defaultValue": "'default'"
|
|
218
|
+
},
|
|
219
|
+
"highlighted": {
|
|
220
|
+
"type": "boolean",
|
|
221
|
+
"mutable": false,
|
|
222
|
+
"complexType": {
|
|
223
|
+
"original": "boolean",
|
|
224
|
+
"resolved": "boolean",
|
|
225
|
+
"references": {}
|
|
226
|
+
},
|
|
227
|
+
"required": false,
|
|
228
|
+
"optional": false,
|
|
229
|
+
"docs": {
|
|
230
|
+
"tags": [{
|
|
231
|
+
"name": "default",
|
|
232
|
+
"text": "false"
|
|
233
|
+
}],
|
|
234
|
+
"text": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n consumers that observe data attributes. When `false`, `data-highlighted` is\n set to `\"false\"`.\n\nNote: `aria-pressed` and `aria-selected` are intentionally not used here.\n`aria-pressed` is reserved for toggle-button roles; `aria-selected` is\nreserved for option/listbox roles. The `data-highlighted` attribute provides\nthe accessible contract without conflicting with native `<select>` semantics."
|
|
235
|
+
},
|
|
236
|
+
"getter": false,
|
|
237
|
+
"setter": false,
|
|
238
|
+
"reflect": true,
|
|
239
|
+
"attribute": "highlighted",
|
|
240
|
+
"defaultValue": "false"
|
|
190
241
|
}
|
|
191
242
|
};
|
|
192
243
|
}
|
|
@@ -58,7 +58,7 @@ export class LmvzSnackbar {
|
|
|
58
58
|
this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
|
|
59
59
|
};
|
|
60
60
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '4018b33b7d4263c1e138217d5181231e3562a2ad', class: this.animationClass }, h("lmvz-icon", { key: '351f90e1fd9eb7b4f5e864bccd46a643cd158bf1', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'fea43a01e328c7922d563e73256d7c3012b49fd9', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: '5ef8589a379ccbcfaf42197227dc95ba51c225fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
|
|
62
62
|
}
|
|
63
63
|
static get is() { return "lmvz-snackbar"; }
|
|
64
64
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--spinner-size: 1rem; /* token-gap: pending component.spinner.spinner-size-sm */
|
|
3
|
+
|
|
4
|
+
display: inline-block;
|
|
5
|
+
width: var(--spinner-size);
|
|
6
|
+
height: var(--spinner-size);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:host([size='large']) {
|
|
10
|
+
--spinner-size: 2rem; /* token-gap: pending component.spinner.spinner-size-lg */
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
svg {
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
transform-origin: center;
|
|
17
|
+
animation: lmvz-spinner-rotate var(--lmvz-global-duration-slow, 800ms) linear infinite;
|
|
18
|
+
color: var(--lmvz-semantic-color-border-active, #0f8acc);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
circle {
|
|
22
|
+
fill: none;
|
|
23
|
+
stroke: currentcolor;
|
|
24
|
+
stroke-width: var(--lmvz-component-icon-border-width-strong, 1.5px);
|
|
25
|
+
stroke-linecap: round;
|
|
26
|
+
stroke-dasharray: 75 25;
|
|
27
|
+
vector-effect: non-scaling-stroke;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes lmvz-spinner-rotate {
|
|
31
|
+
to {
|
|
32
|
+
transform: rotate(360deg);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (prefers-reduced-motion: reduce) {
|
|
37
|
+
svg {
|
|
38
|
+
animation: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
export class LmvzSpinner {
|
|
3
|
+
size = 'small';
|
|
4
|
+
ariaLabel;
|
|
5
|
+
render() {
|
|
6
|
+
const hasLabel = !!this.ariaLabel?.trim();
|
|
7
|
+
return (h(Host, { key: 'c788616cdce6548fe228671cb78dfcd98740c42b', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '01d2fd9a20454ae051f63fc3403e4b1679db2697', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: '1bc55615f8fc46b26031d4dc24a24b6e79ca8b98', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
|
|
8
|
+
}
|
|
9
|
+
static get is() { return "lmvz-spinner"; }
|
|
10
|
+
static get encapsulation() { return "shadow"; }
|
|
11
|
+
static get originalStyleUrls() {
|
|
12
|
+
return {
|
|
13
|
+
"$": ["lmvz-spinner.css"]
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
static get styleUrls() {
|
|
17
|
+
return {
|
|
18
|
+
"$": ["lmvz-spinner.css"]
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
static get properties() {
|
|
22
|
+
return {
|
|
23
|
+
"size": {
|
|
24
|
+
"type": "string",
|
|
25
|
+
"mutable": false,
|
|
26
|
+
"complexType": {
|
|
27
|
+
"original": "'small' | 'large'",
|
|
28
|
+
"resolved": "\"large\" | \"small\"",
|
|
29
|
+
"references": {}
|
|
30
|
+
},
|
|
31
|
+
"required": false,
|
|
32
|
+
"optional": false,
|
|
33
|
+
"docs": {
|
|
34
|
+
"tags": [],
|
|
35
|
+
"text": "Size of the spinner."
|
|
36
|
+
},
|
|
37
|
+
"getter": false,
|
|
38
|
+
"setter": false,
|
|
39
|
+
"reflect": true,
|
|
40
|
+
"attribute": "size",
|
|
41
|
+
"defaultValue": "'small'"
|
|
42
|
+
},
|
|
43
|
+
"ariaLabel": {
|
|
44
|
+
"type": "string",
|
|
45
|
+
"mutable": false,
|
|
46
|
+
"complexType": {
|
|
47
|
+
"original": "string",
|
|
48
|
+
"resolved": "string | undefined",
|
|
49
|
+
"references": {}
|
|
50
|
+
},
|
|
51
|
+
"required": false,
|
|
52
|
+
"optional": true,
|
|
53
|
+
"docs": {
|
|
54
|
+
"tags": [],
|
|
55
|
+
"text": "Accessible name for assistive technology.\nLeave unset for decorative spinners so the element stays hidden from the accessibility tree."
|
|
56
|
+
},
|
|
57
|
+
"getter": false,
|
|
58
|
+
"setter": false,
|
|
59
|
+
"reflect": true,
|
|
60
|
+
"attribute": "aria-label"
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -14,7 +14,7 @@ export class LmvzTab {
|
|
|
14
14
|
this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: '1232c42d1e4b0a22710076dcd021e910e9b71c3c' }, h("button", { key: 'a5d85b761836038a93b102052ff9b09cab04bd7f', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'ce429f5e6d05ed4ef506276231aa0a54cd9f050f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '637e0da61c21950b0b1c8d5622315c8921007fdb', class: "label" }, h("slot", { key: '1c035b6763d0fa894d9dadb1407b87ca3e2f0da5' })), h("span", { key: '88c6e4d8fe990e6b722664641d23310748afd7c0', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
|
|
18
18
|
}
|
|
19
19
|
static get is() { return "lmvz-tab"; }
|
|
20
20
|
static get encapsulation() { return "shadow"; }
|
|
@@ -232,7 +232,7 @@ export class LmvzTabs extends ReactiveControllerHost {
|
|
|
232
232
|
this.selectTab(value);
|
|
233
233
|
};
|
|
234
234
|
render() {
|
|
235
|
-
return (h(Host, { key: '
|
|
235
|
+
return (h(Host, { key: '5f15ece5a15ef010e84c169171acc3647386ac76', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '38fca070606c4e15fe3218d818c9c271619088c6', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: 'a18f16a5fbcd5bdd7694abfd362cd601e852b546', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '2d84a819e13e658a677835e629e057f7a19556a0', part: "panels-container", class: "panels-container" }, h("slot", { key: 'e66d34d3f861b23700ad5a29076744fa1f93a5f2', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
236
236
|
}
|
|
237
237
|
static get is() { return "lmvz-tabs"; }
|
|
238
238
|
static get encapsulation() { return "shadow"; }
|
|
@@ -65,7 +65,7 @@ export class LmvzToggle extends ReactiveControllerHost {
|
|
|
65
65
|
this.lmvzChange.emit(newChecked);
|
|
66
66
|
};
|
|
67
67
|
render() {
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '0b0266a50b2307a13c635ee1a2c1b7e44cacccb4' }, h("span", { key: 'e8cf4c4e35e013627bb6eeb4b7bae46060c3a846', class: "track" }, h("input", { key: '6dc43e819aa89c5b6394c3d2eed0e8852213766a', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '7e57a501ebcb9f560d0a03c35dbaa7744933246b', class: "thumb", "aria-hidden": "true" })), h("label", { key: '0e8d733132e72593048ce3eb1f8c2049f3420b2a', htmlFor: this.toggleId }, this.label)));
|
|
69
69
|
}
|
|
70
70
|
static get is() { return "lmvz-toggle"; }
|
|
71
71
|
static get encapsulation() { return "scoped"; }
|
package/collection/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from '@lmvz-ds/aria-validation';
|
|
2
|
-
export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, textSizes } from './api/ds.constants';
|
|
2
|
+
export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, messageTypes, selectSizes, textSizes } from './api/ds.constants';
|
|
3
|
+
export * from './components/lmvz-message/public';
|
|
3
4
|
export * from './components/lmvz-snackbar/public';
|
|
4
5
|
export * from './utils/public';
|
|
@@ -20,7 +20,7 @@ export class HeaderIntegration {
|
|
|
20
20
|
this.activeNav = navId;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '486f50ef3557f03de1dc65bf15dd57dfd2c87320' }, h("lmvz-header", { key: 'b211695fa242ab94fdce20ac81124947863a7b4b', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'e115102451abce94e6379dc2b6720f9c9bafaf8c', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'cb6a95e74dd1c5b8573a39c065c6db15c5d61202', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '97aa26d9baf88298471bc71b990deae3b60e7676', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'f3bf5d14a42d34ad6db9002eb7d6c08f9494a582', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '701662627e73569de837fb5fbaed29d5876f32b5', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '7bdb0638da817f9dbabe485d63e6cf1fc2855648', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '75c6ee450059c8222e47ffc011b29450bb7cdb31', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '8b2a7a3025841a898b1143f3fc96a1cf42660e8e', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '473f408b189415cbffbde216a2c3e73500a3b133', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '103c8189dc41562c45ac980725001f282b7b1992', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '1a142f62810aa0fb3da4c1b4a41189f058bc845b', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '424be6810c1333c4b048fdf002d7957c2c66aca2', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: 'cd47ed633202cb0da71fc5d1607509c246816436', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '95ed21547f113346bf50b3d5d5617b2c4b8e1794', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "header-integration"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
package/components/index.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ export { LmvzInput as LmvzInput } from '../../types/components/lmvz-input/lmvz-i
|
|
|
19
19
|
export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
|
|
20
20
|
export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuitem/lmvz-menuitem';
|
|
21
21
|
export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
|
|
22
|
+
export { LmvzMessage as LmvzMessage } from '../../types/components/lmvz-message/lmvz-message';
|
|
23
|
+
export { defineCustomElement as defineCustomElementLmvzMessage } from './lmvz-message';
|
|
22
24
|
export { LmvzModal as LmvzModal } from '../../types/components/lmvz-modal/lmvz-modal';
|
|
23
25
|
export { defineCustomElement as defineCustomElementLmvzModal } from './lmvz-modal';
|
|
24
26
|
export { LmvzRadio as LmvzRadio } from '../../types/components/lmvz-radio/lmvz-radio';
|
|
@@ -27,6 +29,8 @@ export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmv
|
|
|
27
29
|
export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
|
|
28
30
|
export { LmvzSnackbar as LmvzSnackbar } from '../../types/components/lmvz-snackbar/lmvz-snackbar';
|
|
29
31
|
export { defineCustomElement as defineCustomElementLmvzSnackbar } from './lmvz-snackbar';
|
|
32
|
+
export { LmvzSpinner as LmvzSpinner } from '../../types/components/lmvz-spinner/lmvz-spinner';
|
|
33
|
+
export { defineCustomElement as defineCustomElementLmvzSpinner } from './lmvz-spinner';
|
|
30
34
|
export { LmvzTab as LmvzTab } from '../../types/components/lmvz-tab/lmvz-tab';
|
|
31
35
|
export { defineCustomElement as defineCustomElementLmvzTab } from './lmvz-tab';
|
|
32
36
|
export { LmvzTabs as LmvzTabs } from '../../types/components/lmvz-tabs/lmvz-tabs';
|
|
@@ -19,6 +19,8 @@ export { LmvzInput as LmvzInput } from '../../types/components/lmvz-input/lmvz-i
|
|
|
19
19
|
export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
|
|
20
20
|
export { LmvzMenuItem as LmvzMenuitem } from '../../types/components/lmvz-menuitem/lmvz-menuitem';
|
|
21
21
|
export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
|
|
22
|
+
export { LmvzMessage as LmvzMessage } from '../../types/components/lmvz-message/lmvz-message';
|
|
23
|
+
export { defineCustomElement as defineCustomElementLmvzMessage } from './lmvz-message';
|
|
22
24
|
export { LmvzModal as LmvzModal } from '../../types/components/lmvz-modal/lmvz-modal';
|
|
23
25
|
export { defineCustomElement as defineCustomElementLmvzModal } from './lmvz-modal';
|
|
24
26
|
export { LmvzRadio as LmvzRadio } from '../../types/components/lmvz-radio/lmvz-radio';
|
|
@@ -27,6 +29,8 @@ export { LmvzSelect as LmvzSelect } from '../../types/components/lmvz-select/lmv
|
|
|
27
29
|
export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
|
|
28
30
|
export { LmvzSnackbar as LmvzSnackbar } from '../../types/components/lmvz-snackbar/lmvz-snackbar';
|
|
29
31
|
export { defineCustomElement as defineCustomElementLmvzSnackbar } from './lmvz-snackbar';
|
|
32
|
+
export { LmvzSpinner as LmvzSpinner } from '../../types/components/lmvz-spinner/lmvz-spinner';
|
|
33
|
+
export { defineCustomElement as defineCustomElementLmvzSpinner } from './lmvz-spinner';
|
|
30
34
|
export { LmvzTab as LmvzTab } from '../../types/components/lmvz-tab/lmvz-tab';
|
|
31
35
|
export { defineCustomElement as defineCustomElementLmvzTab } from './lmvz-tab';
|
|
32
36
|
export { LmvzTabs as LmvzTabs } from '../../types/components/lmvz-tabs/lmvz-tabs';
|
package/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DGg7OzDl.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-CdDO7mQa.js";export{LmvzChip,c as chipSizes,a as chipTypes,defineCustomElement as defineCustomElementLmvzChip,i as iconSizes,b as iconWeights,d as inputSizes,e as inputTypes,m as messageTypes,s as selectSizes,t as textSizes}from"./lmvz-chip.js";export{g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./p-CXakymyP.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzButtonGroup,defineCustomElement as defineCustomElementLmvzButtonGroup}from"./lmvz-button-group.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{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";export{LmvzMessage,defineCustomElement as defineCustomElementLmvzMessage}from"./lmvz-message.js";export{LmvzModal,defineCustomElement as defineCustomElementLmvzModal}from"./lmvz-modal.js";export{LmvzRadio,defineCustomElement as defineCustomElementLmvzRadio}from"./lmvz-radio.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzSnackbar,defineCustomElement as defineCustomElementLmvzSnackbar}from"./lmvz-snackbar.js";export{LmvzSpinner,defineCustomElement as defineCustomElementLmvzSpinner}from"./lmvz-spinner.js";export{LmvzTab,defineCustomElement as defineCustomElementLmvzTab}from"./lmvz-tab.js";export{LmvzTabs,defineCustomElement as defineCustomElementLmvzTabs}from"./lmvz-tabs.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";const o={low:0,normal:1,high:2},n={success:5e3,warning:5e3,error:8e3};let l=0;function v(){return l+=1,"snackbar-"+l}class f{hostEl=void 0;active=void 0;getHost(){return void 0===this.hostEl||this.hostEl.isConnected||(this.hostEl=void 0),void 0===this.hostEl&&(this.hostEl=function(){if("undefined"==typeof document)return;const e=document.querySelector("[data-snackbar-host]");if(e)return e;const t=document.createElement("lmvz-snackbar");return t.setAttribute("data-snackbar-host",""),document.body.appendChild(t),t}()),this.hostEl}clearTimer(e){void 0!==e.timerId&&(clearTimeout(e.timerId),e.timerId=void 0)}scheduleTimer(e,t){t<=0||(e.timerStartedAt=Date.now(),e.timerId=setTimeout((()=>{void 0!==this.active&&this.active.id===e.id&&this.dismissActive(e,"timeout")}),t))}dismissActive(e,t){this.clearTimer(e);const s=e.hostEl;s.removeEventListener("pointerenter",e.onPointerEnter),s.removeEventListener("pointerleave",e.onPointerLeave),s.removeEventListener("focusin",e.onFocusIn),s.removeEventListener("focusout",e.onFocusOut),e.onActionListener&&s.removeEventListener("lmvzAction",e.onActionListener),s.hide?.(),this.active?.id===e.id&&(this.active=void 0),"action"!==t&&s.dispatchEvent(new CustomEvent("lmvzClose",{detail:{reason:t},bubbles:!0,composed:!0})),e.resolve({reason:t})}pauseTimer(e){if(e.pauseCount+=1,e.pauseCount>1||void 0===e.timerId)return;const t=void 0!==e.timerStartedAt?Date.now()-e.timerStartedAt:0;e.remaining=Math.max(0,e.remaining-t),e.timerStartedAt=void 0,this.clearTimer(e)}resumeTimer(e){e.pauseCount>0&&(e.pauseCount-=1),e.pauseCount>0||e.remaining>0&&this.scheduleTimer(e,e.remaining)}applyToHost(e,t){e.setAttribute("status",t.status??"success"),void 0!==t.actionLabel?e.setAttribute("action-label",t.actionLabel):e.removeAttribute("action-label")}open(e){const t=o[e.priority??"normal"];if(void 0!==this.active&&t<this.active.priority){let e;const t=new Promise((t=>{e=t}));return e({reason:"swallowed"}),{id:v(),closed:t,dismiss(){}}}void 0!==this.active&&this.dismissActive(this.active,"overridden");const s=this.getHost();if(void 0===s){const e=v();let t;const s=new Promise((e=>{t=e}));return t({reason:"swallowed"}),{id:e,closed:s,dismiss(){}}}const i=v(),m=0===e.duration?0:e.duration??n[e.status??"success"];let a;const r=new Promise((e=>{a=e})),l={id:i,priority:t,resolve:a,timerId:void 0,remaining:m,timerStartedAt:void 0,pauseCount:0,hostEl:s,onPointerEnter:()=>this.pauseTimer(l),onPointerLeave:()=>this.resumeTimer(l),onFocusIn:()=>this.pauseTimer(l),onFocusOut:()=>this.resumeTimer(l)};this.active=l,s.addEventListener("pointerenter",l.onPointerEnter),s.addEventListener("pointerleave",l.onPointerLeave),s.addEventListener("focusin",l.onFocusIn),s.addEventListener("focusout",l.onFocusOut),this.applyToHost(s,e);const d=()=>{void 0!==this.active&&this.active.id===i&&(e.onAction?.(),this.dismissActive(l,"action"))};return l.onActionListener=d,s.addEventListener("lmvzAction",d,{once:!0}),s.show?.(),queueMicrotask((()=>s.setAttribute("message",e.message))),m>0&&this.scheduleTimer(l,m),{id:i,closed:r,dismiss:()=>{this.active?.id===i&&this.dismissActive(l,"manual")}}}dismiss(e){this.active&&(e&&this.active.id!==e||this.dismissActive(this.active,"manual"))}}export{f as SnackbarController}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,c,h as e,d as i,t as o}from"./p-
|
|
1
|
+
import{p as t,H as s,c,h as e,d as i,t as o}from"./p-DGg7OzDl.js";const n=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.actionClick=c(this,"actionClick",7)}actionClick;_onClick(t){this.actionClick.emit(t)}render(){return e(i,{key:"15c0f20e08cd5019abfd3bb71ec69d175dc5ba48",onClick:this._onClick.bind(this)},e("slot",{key:"f71a7853168d1b66b0a50b0f971d140385530ac3"}))}static get style(){return":host{display:block}"}},[257,"lmvz-action"]),a=n,l=function(){"undefined"!=typeof customElements&&["lmvz-action"].forEach((t=>{"lmvz-action"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))};export{a as LmvzAction,l as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as
|
|
1
|
+
import{L as o,d as s}from"./p-DGlgVBPj.js";const p=o,r=s;export{p as LmvzButtonGroup,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as
|
|
1
|
+
import{L as o,d as s}from"./p-C0f2nNPZ.js";const p=o,r=s;export{p as LmvzButton,r as defineCustomElement}
|
package/components/lmvz-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as t,p as e,H as r,c as o,h as a,d as n,t as m}from"./p-c7OzBK8f.js";const l=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.primaryAction=o(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((e,r)=>{const o=function(...t){return t.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",r,e);try{return t(o)}catch{return console.warn(`Failed to create URL for asset "${e}" in path "${r}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(o,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(t){console.log(t)}render(){return a(n,{key:"2d9ecdeed986f142fb7ff477b56dece59549bbc7",role:"article"},a("div",{key:"34fc9c3a1338b31ce73424e8c07c79a291ead85c",class:"top"},a("div",{key:"1756e6b26d7f42499753c36ed0fc13755fe32bfe",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"cd8be8acc9e949092b6363024316d12d445a9fbc",class:"chip-slot"},a("slot",{key:"26389ab3b7031b948ff1701857e6028446662cf5",name:"chip"})))),a("div",{key:"2fa61cd7bef437f15929ae39be7fa294e8778321",class:"bottom"},a("header",{key:"b237ca025e42a29f528f827dc3c83b3b0f9267c0"},a("h2",{key:"ffd0a509ba97acb75d4c15d0fd01eef08689a2a7",class:"title"},this.cardTitle)),a("p",{key:"c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1",class:"description"},this.description),a("div",{key:"7663f93b41ef1e798b464bd6ad75ca8a53c0667b",class:"actions"},a("button",{key:"3348e6700aa1571183558ab8fe4f73393c1cc943",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"d3a12cdabbdd68c3b04e06984db44abd3bbd22ea",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"80e31e6b691e18d1b42a2b4831349c3abf8e02b0",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),i=l,c=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((t=>{"lmvz-card"===t&&(customElements.get(m(t))||customElements.define(m(t),l))}))};export{i as LmvzCard,c as defineCustomElement}
|
|
1
|
+
import{g as t,p as e,H as r,c as o,h as a,d as n,t as m}from"./p-DGg7OzDl.js";const l=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.primaryAction=o(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((e,r)=>{const o=function(...t){return t.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",r,e);try{return t(o)}catch{return console.warn(`Failed to create URL for asset "${e}" in path "${r}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(o,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(t){console.log(t)}render(){return a(n,{key:"2d9ecdeed986f142fb7ff477b56dece59549bbc7",role:"article"},a("div",{key:"34fc9c3a1338b31ce73424e8c07c79a291ead85c",class:"top"},a("div",{key:"1756e6b26d7f42499753c36ed0fc13755fe32bfe",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},a("div",{key:"cd8be8acc9e949092b6363024316d12d445a9fbc",class:"chip-slot"},a("slot",{key:"26389ab3b7031b948ff1701857e6028446662cf5",name:"chip"})))),a("div",{key:"2fa61cd7bef437f15929ae39be7fa294e8778321",class:"bottom"},a("header",{key:"b237ca025e42a29f528f827dc3c83b3b0f9267c0"},a("h2",{key:"ffd0a509ba97acb75d4c15d0fd01eef08689a2a7",class:"title"},this.cardTitle)),a("p",{key:"c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1",class:"description"},this.description),a("div",{key:"7663f93b41ef1e798b464bd6ad75ca8a53c0667b",class:"actions"},a("button",{key:"3348e6700aa1571183558ab8fe4f73393c1cc943",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),a("button",{key:"d3a12cdabbdd68c3b04e06984db44abd3bbd22ea",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},a("span",{key:"80e31e6b691e18d1b42a2b4831349c3abf8e02b0",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }"}},[774,"lmvz-card",{cardTitle:[1,"card-title"],imageUrl:[1,"image-url"],description:[1],primaryActionLabel:[1,"primary-action-label"]}]),i=l,c=function(){"undefined"!=typeof customElements&&["lmvz-card"].forEach((t=>{"lmvz-card"===t&&(customElements.get(m(t))||customElements.define(m(t),l))}))};export{i as LmvzCard,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,c as o,h as c,d as r,t}from"./p-c7OzBK8f.js";import{t as a}from"./p-CcxjkCOx.js";import{A as l}from"./p-BJEQw1Sz.js";import{R as s}from"./p-0P2Wb3pE.js";const i=a("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");let h=0;const n=e(class extends s{get el(){return this}get validationEl(){return this.el}internals;nativeInput;checkboxId="lmvz-checkbox-"+h++;initialChecked=!1;get helperId(){return this.helperText?this.checkboxId+"-helper":void 0}get errorId(){return this.errorMessage?this.checkboxId+"-error":void 0}get ariaDescribedBy(){const e=[this.errorId,this.helperId].filter(Boolean);return e.length>0?e.join(" "):void 0}label;checked=!1;value="on";name;disabled=!1;required=!1;error=!1;errorMessage;helperText;form;autofocus=!1;checkedState=!1;handleCheckedChange(e){this.checkedState=e,this.internals.setFormValue?.(e?this.value??"on":null)}lmvzChange;async focusInput(){this.nativeInput?.focus()}async checkValidity(){return this.internals?.checkValidity()??!0}async reportValidity(){return this.internals?.reportValidity()??!0}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzChange=o(this,"lmvzChange",7),this.internals=this.attachInternals(),this.addController(new l(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialChecked=this.checked,this.checkedState=this.checked,this.internals.setFormValue?.(this.checked?this.value??"on":null),super.componentWillLoad()}componentWillRender(){this.error&&!this.errorMessage&&console.warn("lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users."),super.componentWillRender()}formAssociatedCallback(){this.internals.setFormValue?.(this.checked?this.value??"on":null)}formResetCallback(){this.checked=this.initialChecked}formStateRestoreCallback(e){this.checked=e===(this.value??"on")}handleChange=e=>{this.checked=e.target.checked,this.lmvzChange.emit(this.checked)};retargetInnerClicks(){this.nativeInput?.click()}render(){return c(r,{key:"cea4a962a76cab10c27adc6742fe0686b2ce6dbe"},c("div",{key:"1addfd795587de85ecbc632fbeb45026a4e46050",class:"pill"},c("input",{key:"8957359d0cc3f2c315badee7e20fcc81e85e0f00",type:"checkbox",id:this.checkboxId,checked:this.checkedState,disabled:this.disabled,required:this.required,"aria-required":this.required?"true":"false","aria-invalid":this.error?"true":"false","aria-describedby":this.ariaDescribedBy,"aria-errormessage":this.error&&this.errorId?this.errorId:void 0,ref:e=>this.nativeInput=e,onChange:this.handleChange,autoFocus:this.autofocus}),c("span",{key:"400dbe9379ceb4aceeb431fe6060c82b41009cda",class:"box","aria-hidden":"true"},this.checkedState&&c("span",{key:"9612093e65346b419ec8e4469fea7f00fe4c3ff4",class:"indicator",innerHTML:i})),c("span",{key:"fd1136ea0726941bc400b8970f7cae4bb3b59363",class:"content"},c("label",{key:"a06deb2d4bc76efb884701a17e4a28420a99965c",htmlFor:this.checkboxId},this.label),this.helperText&&c("span",{key:"2bd33f14062bedbb0609dff3ac7fbcee6fa16f21",onClick:this.retargetInnerClicks.bind(this),class:"helper-text",id:this.helperId,role:"status"},this.helperText))),this.errorMessage&&c("span",{key:"ac4fcb6f0a2de16a17f0287e42b70b6339a50acc",class:"error-text",id:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); cursor: pointer; transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; cursor: pointer; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); cursor: pointer; } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }"}},[578,"lmvz-checkbox",{label:[1],checked:[1540],value:[1],name:[1],disabled:[516],required:[516],error:[516],errorMessage:[1,"error-message"],helperText:[1,"helper-text"],form:[1],autofocus:[4],checkedState:[32],focusInput:[64],checkValidity:[64],reportValidity:[64]},void 0,{checked:[{handleCheckedChange:0}]}]),b=n,d=function(){"undefined"!=typeof customElements&&["lmvz-checkbox"].forEach((e=>{"lmvz-checkbox"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))};export{b as LmvzCheckbox,d as defineCustomElement}
|
|
1
|
+
import{p as e,c as o,h as c,d as r,t}from"./p-DGg7OzDl.js";import{t as a}from"./p-CcxjkCOx.js";import{A as l}from"./p-C8znmF2h.js";import{R as s}from"./p-DAMVH-31.js";const i=a("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");let h=0;const n=e(class extends s{get el(){return this}get validationEl(){return this.el}internals;nativeInput;checkboxId="lmvz-checkbox-"+h++;initialChecked=!1;get helperId(){return this.helperText?this.checkboxId+"-helper":void 0}get errorId(){return this.errorMessage?this.checkboxId+"-error":void 0}get ariaDescribedBy(){const e=[this.errorId,this.helperId].filter(Boolean);return e.length>0?e.join(" "):void 0}label;checked=!1;value="on";name;disabled=!1;required=!1;error=!1;errorMessage;helperText;form;autofocus=!1;checkedState=!1;handleCheckedChange(e){this.checkedState=e,this.internals.setFormValue?.(e?this.value??"on":null)}lmvzChange;async focusInput(){this.nativeInput?.focus()}async checkValidity(){return this.internals?.checkValidity()??!0}async reportValidity(){return this.internals?.reportValidity()??!0}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzChange=o(this,"lmvzChange",7),this.internals=this.attachInternals(),this.addController(new l(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialChecked=this.checked,this.checkedState=this.checked,this.internals.setFormValue?.(this.checked?this.value??"on":null),super.componentWillLoad()}componentWillRender(){this.error&&!this.errorMessage&&console.warn("lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users."),super.componentWillRender()}formAssociatedCallback(){this.internals.setFormValue?.(this.checked?this.value??"on":null)}formResetCallback(){this.checked=this.initialChecked}formStateRestoreCallback(e){this.checked=e===(this.value??"on")}handleChange=e=>{this.checked=e.target.checked,this.lmvzChange.emit(this.checked)};retargetInnerClicks(){this.nativeInput?.click()}render(){return c(r,{key:"cea4a962a76cab10c27adc6742fe0686b2ce6dbe"},c("div",{key:"1addfd795587de85ecbc632fbeb45026a4e46050",class:"pill"},c("input",{key:"8957359d0cc3f2c315badee7e20fcc81e85e0f00",type:"checkbox",id:this.checkboxId,checked:this.checkedState,disabled:this.disabled,required:this.required,"aria-required":this.required?"true":"false","aria-invalid":this.error?"true":"false","aria-describedby":this.ariaDescribedBy,"aria-errormessage":this.error&&this.errorId?this.errorId:void 0,ref:e=>this.nativeInput=e,onChange:this.handleChange,autoFocus:this.autofocus}),c("span",{key:"400dbe9379ceb4aceeb431fe6060c82b41009cda",class:"box","aria-hidden":"true"},this.checkedState&&c("span",{key:"9612093e65346b419ec8e4469fea7f00fe4c3ff4",class:"indicator",innerHTML:i})),c("span",{key:"fd1136ea0726941bc400b8970f7cae4bb3b59363",class:"content"},c("label",{key:"a06deb2d4bc76efb884701a17e4a28420a99965c",htmlFor:this.checkboxId},this.label),this.helperText&&c("span",{key:"2bd33f14062bedbb0609dff3ac7fbcee6fa16f21",onClick:this.retargetInnerClicks.bind(this),class:"helper-text",id:this.helperId,role:"status"},this.helperText))),this.errorMessage&&c("span",{key:"ac4fcb6f0a2de16a17f0287e42b70b6339a50acc",class:"error-text",id:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); cursor: pointer; transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; cursor: pointer; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); cursor: pointer; } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }"}},[578,"lmvz-checkbox",{label:[1],checked:[1540],value:[1],name:[1],disabled:[516],required:[516],error:[516],errorMessage:[1,"error-message"],helperText:[1,"helper-text"],form:[1],autofocus:[4],checkedState:[32],focusInput:[64],checkValidity:[64],reportValidity:[64]},void 0,{checked:[{handleCheckedChange:0}]}]),b=n,d=function(){"undefined"!=typeof customElements&&["lmvz-checkbox"].forEach((e=>{"lmvz-checkbox"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))};export{b as LmvzCheckbox,d as defineCustomElement}
|
package/components/lmvz-chip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,h as o,d as r,t}from"./p-
|
|
1
|
+
import{p as e,h as o,d as r,t}from"./p-DGg7OzDl.js";import{A as s}from"./p-C8znmF2h.js";import{R as a}from"./p-DAMVH-31.js";import{i as l}from"./p-CdDO7mQa.js";const n=["xs","sm","md","lg"],c=[...n,"xl"],i=["text","email","password","tel","url","search","number"],m=["sm","md","lg"],v=["small","default","large"],d=[...n,"inherit"],p=["thin","medium","bold"],u=["active","warning","success","error","neutral"],h=["default","small"],z=["neutral","warning"],f=e(class extends a{ariaValidationController=new s(this);beforeSlot;defaultSlot;afterSlot;get el(){return this}get validationEl(){return this.el}type="active";size="default";constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.addController(this.ariaValidationController)}normalizeType(e){const o=u.includes(e)?e:"active";o!==this.type&&(this.type=o)}normalizeSize(e){const o=h.includes(e)?e:"default";o!==this.size&&(this.size=o)}componentWillLoad(){this.normalizeType(this.type),this.normalizeSize(this.size),super.componentWillLoad()}connectedCallback(){super.connectedCallback(),this.checkContent()}checkContent=function(e){let o;return()=>{void 0!==o&&window.clearTimeout(o),o=window.setTimeout((()=>{e(),o=void 0}),500)}}((()=>{l()&&([...this.beforeSlot?.assignedElements()??[],...this.defaultSlot?.assignedElements()??[],...this.afterSlot?.assignedElements()??[]].length||console.warn("LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots."))}));render(){return o(r,{key:"70654d69189e77f9356853a921366083b2c4b969",type:this.type,size:this.size},o("slot",{key:"c7e667b93166286fe68a812dd8eec82885e3fc5e",name:"before-text",ref:e=>this.beforeSlot=e,onSlotchange:()=>this.checkContent()}),o("span",{key:"af38dd0429b42685a114e26175ce42d09f5fdcc1",class:"content-overflow-wrapper"},o("slot",{key:"924158498d65b9ac7c912b6b1a479016176e0b78",ref:e=>this.defaultSlot=e,onSlotchange:()=>this.checkContent()})),o("slot",{key:"9ff0394dbfb2131fafe513d0f2d8ce26c7781f20",name:"after-text",ref:e=>this.afterSlot=e,onSlotchange:()=>this.checkContent()}))}static get watchers(){return{type:[{normalizeType:0}],size:[{normalizeSize:0}]}}static get style(){return":host { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); border: 1px solid var(--lmvz-chip-border-color); border-radius: var(--lmvz-semantic-border-radius-round, 999px); font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5 Router); background-color: var(--lmvz-chip-background-color); color: var(--lmvz-chip-foreground-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); box-sizing: border-box; max-width: 100%; overflow: hidden; white-space: nowrap; > .content-overflow-wrapper { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } :host([size='small']) { padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } ::slotted(*) { display: inline; white-space: inherit; } ::slotted(lmvz-icon) { --lmvz-component-color: var(--lmvz-chip-foreground-color); --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } :host([type='warning']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00); } :host([type='success']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c); } :host([type='error']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } :host([type='neutral']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); } "}},[769,"lmvz-chip",{type:[1537],size:[1537]},void 0,{type:[{normalizeType:0}],size:[{normalizeSize:0}]}]),b=f,g=function(){"undefined"!=typeof customElements&&["lmvz-chip"].forEach((e=>{"lmvz-chip"===e&&(customElements.get(t(e))||customElements.define(t(e),f))}))};export{b as LmvzChip,u as a,p as b,h as c,m as d,g as defineCustomElement,i as e,d as i,z as m,v as s,c as t}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as M,h as N,d as e,t as I}from"./p-
|
|
1
|
+
import{p as M,h as N,d as e,t as I}from"./p-DGg7OzDl.js";import{A as j}from"./p-C8znmF2h.js";import{D}from"./p-CtaMrBNE.js";import{R as g}from"./p-DAMVH-31.js";const a=M(class extends g{get el(){return this}get validationEl(){return this.el}primarySlot;secondarySlot;secondaryNav;keyboardNavigationController=new D(this,{orientation:"both"});get primaryMenuitems(){return this.primarySlot?.assignedElements({flatten:!1})||[]}get secondaryMenuitems(){return this.secondarySlot?.assignedElements({flatten:!0})||[]}get role(){return"banner"}lmvzActiveNav;get secondarySlotName(){return"connect-nav-"+this.lmvzActiveNav}constructor(M){super(!1),!1!==M&&this.__registerHost(),this.__attachShadow(),this.addController(new j(this,{reValidateOnPropChanges:!0})),this.addController(this.keyboardNavigationController)}handleActiveNavChange(){this.updateElementsActive()}componentDidLoad(){this.primarySlot?.addEventListener("slotchange",this.handlePrimaryNavItemsChange.bind(this)),this.handlePrimaryNavItemsChange(),this.secondarySlot?.addEventListener("slotchange",this.handleSecondaryNavItemsChange.bind(this)),super.componentDidLoad()}handlePrimaryNavItemsChange(){const M=this.primaryMenuitems;M.length?(M.forEach((M=>{M.setAttribute("aria-haspopup","true"),M.setAttribute("aria-controls","nav-secondary")})),this.updateElementsActive(),this.updateKeyboardNavSubjects()):console.warn("Primary slot has no assigned elements. Please add navigation items to the primary slot.")}handleSecondaryNavItemsChange(){this.secondaryMenuitems.length&&this.updateKeyboardNavSubjects()}updateKeyboardNavSubjects(){this.keyboardNavigationController.updateElements([...this.primaryMenuitems,...this.secondaryMenuitems])}updateElementsActive(){const M=this.primaryMenuitems;if(!M.length)return;let N="";M.forEach((M=>{const e=M.id===this.lmvzActiveNav;e&&(N=M.textContent||M.id),M.setAttribute("aria-expanded",e?"true":"false")})),N&&this.secondaryNav?.setAttribute("aria-label","Untermenü für "+N)}delegateFocus(){const M=this.primaryMenuitems[0];M&&M.focus()}render(){return N(e,{key:"0152283363802ea854334e0349e145e7d6219e09",onFocus:this.delegateFocus.bind(this)},N("div",{key:"cdc1d52dbfb658f99bffa2df2353b6a1ad232f97",class:"brand"},N("slot",{key:"25a039ea2224058f97f8ec1cb1aa310b388f2b2e",name:"brand"},N("img",{key:"9ca6f39b6e41382a438b3afd36348ee17b36d346",id:"fallback-logo-lmvz",src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=",alt:"Lehrmittelverlag Zürich"}))),N("nav",{key:"a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac","aria-label":"Hauptnavigation"},N("div",{key:"eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96",role:"menubar",class:"primary-menubar"},N("slot",{key:"b8a2b3c031158ce73ada65995b0d4e6e0e4eac72",name:"nav-primary",ref:M=>this.primarySlot=M}),N("div",{key:"87dabdc52e40163b35e8c7681d3e4aa3a17d6d82",role:"menu",id:"nav-secondary",class:"secondary-menubar",hidden:!this.lmvzActiveNav,ref:M=>this.secondaryNav=M},N("slot",{key:"6cb38c14357ef682f1c804ab77cd70514308b6d4",name:this.secondarySlotName,ref:M=>this.secondarySlot=M})))),N("div",{key:"9e46e6e484556c5fbe0f2c573188e845fbca801b",class:"actions"},N("slot",{key:"4c1ea348528ccc3722c2dbbe0795e9f61d67edee",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}]}]),i=a,u=function(){"undefined"!=typeof customElements&&["lmvz-header"].forEach((M=>{"lmvz-header"===M&&(customElements.get(I(M))||customElements.define(I(M),a))}))};export{i as LmvzHeader,u as defineCustomElement}
|
package/components/lmvz-icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{L as o,d as s}from"./p-
|
|
1
|
+
import{L as o,d as s}from"./p-CXakymyP.js";const a=o,m=s;export{a as LmvzIcon,m as defineCustomElement}
|