@lmvz-ds/components 0.24.0 → 0.25.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 +11 -0
- package/cjs/{index-lW-SEvL7.js → index-BCFBLj0e.js} +1 -1
- package/cjs/lmvz-action.cjs.entry.js +1 -1
- package/cjs/lmvz-button_3.cjs.entry.js +4 -4
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +5 -5
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +3 -3
- package/cjs/lmvz-header_2.cjs.entry.js +2 -2
- package/cjs/lmvz-input.cjs.entry.js +3 -3
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -3
- package/cjs/lmvz-modal.cjs.entry.js +5 -5
- package/cjs/lmvz-radio.cjs.entry.js +334 -0
- package/cjs/lmvz-select.cjs.entry.js +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +7 -5
- package/cjs/loader.cjs.js +2 -2
- package/cjs/{reactive-controller-host-BOFg4vL-.js → reactive-controller-host-DrtMkMd7.js} +1 -1
- package/collection/collection-manifest.json +2 -1
- package/collection/components/lmvz-button/lmvz-button.css +7 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +1 -1
- package/collection/components/lmvz-card/lmvz-card.css +7 -7
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +8 -11
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +2 -2
- package/collection/components/lmvz-chip/lmvz-chip.css +3 -3
- package/collection/components/lmvz-input/lmvz-input.css +5 -9
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +2 -2
- package/collection/components/lmvz-modal/lmvz-modal.css +28 -10
- package/collection/components/lmvz-modal/lmvz-modal.js +2 -2
- package/collection/components/lmvz-radio/lmvz-radio.css +182 -0
- package/collection/components/lmvz-radio/lmvz-radio.js +487 -0
- package/collection/components/lmvz-select/lmvz-select.css +3 -3
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +4 -9
- package/collection/components/lmvz-toggle/lmvz-toggle.js +3 -3
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/styles/fragments/_focus-within.css +13 -0
- package/collection/utils/radio/radio-group-controller.js +160 -0
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-action.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-modal.js +1 -1
- package/components/lmvz-radio.d.ts +11 -0
- package/components/lmvz-radio.d.ts.bak +11 -0
- package/components/lmvz-radio.js +1 -0
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-Bb-kEOmU.js +1 -0
- package/components/{p-Cg2XX_J-.js → p-CCcoDnH-.js} +1 -1
- package/components/{p-slgmfnHm.js → p-CNmHnJ1D.js} +1 -1
- package/components/p-vUYpZZoR.js +1 -0
- package/esm/{index-Aa_425iY.js → index-CKYszC64.js} +1 -1
- package/esm/lmvz-action.entry.js +1 -1
- package/esm/lmvz-button_3.entry.js +4 -4
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +5 -5
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +4 -4
- package/esm/lmvz-header_2.entry.js +2 -2
- package/esm/lmvz-input.entry.js +3 -3
- package/esm/lmvz-menuitem.entry.js +3 -3
- package/esm/lmvz-modal.entry.js +5 -5
- package/esm/lmvz-radio.entry.js +332 -0
- package/esm/lmvz-select.entry.js +4 -4
- package/esm/lmvz-toggle.entry.js +7 -5
- package/esm/loader.js +3 -3
- package/esm/{reactive-controller-host-CroMsXdS.js → reactive-controller-host-ZrGf1F2-.js} +1 -1
- package/hydrate/index.js +371 -19
- package/hydrate/index.mjs +371 -19
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-d1dacf7e.entry.js → p-01aeca60.entry.js} +1 -1
- package/lmvz-components/p-0dced359.entry.js +1 -0
- package/lmvz-components/{p-f6d1d9df.entry.js → p-2044a9ac.entry.js} +1 -1
- package/lmvz-components/p-3c2adbb4.entry.js +1 -0
- package/lmvz-components/{p-4263c9b2.entry.js → p-3df070b0.entry.js} +1 -1
- package/lmvz-components/{p-6f8cbc4f.entry.js → p-758078db.entry.js} +1 -1
- package/lmvz-components/p-90f5a19d.entry.js +1 -0
- package/lmvz-components/{p-BRl6zKXT.js → p-CwX1wKkM.js} +1 -1
- package/lmvz-components/p-acfeae08.entry.js +1 -0
- package/lmvz-components/{p-88adb9fa.entry.js → p-c01a6c70.entry.js} +1 -1
- package/lmvz-components/{p-a7c3074a.entry.js → p-e1eaa7a2.entry.js} +1 -1
- package/lmvz-components/p-e23d0054.entry.js +1 -0
- package/lmvz-components/p-fe607f10.entry.js +1 -0
- package/manifest.json +410 -2
- package/package.json +5 -1
- package/types/components/lmvz-radio/lmvz-radio.d.ts +42 -0
- package/types/components.d.ts +176 -0
- package/types/stencil-public-runtime.d.ts +1 -0
- package/types/utils/radio/radio-group-controller.d.ts +26 -0
- package/assets/icons/checkmark.svg +0 -4
- package/assets/icons/close-sm.svg +0 -3
- package/collection/assets/icons/checkmark.svg +0 -4
- package/collection/assets/icons/close-sm.svg +0 -3
- package/components/p-CcnyKhAw.js +0 -1
- package/components/p-DSvYtVoD.js +0 -1
- package/lmvz-components/p-2824a56b.entry.js +0 -1
- package/lmvz-components/p-3846ba08.entry.js +0 -1
- package/lmvz-components/p-4f5c3c4a.entry.js +0 -1
- package/lmvz-components/p-b3b04d46.entry.js +0 -1
- package/lmvz-components/p-fefefc54.entry.js +0 -1
- /package/components/{p-CK8cAKcB.js → p-DYr7Jc0V.js} +0 -0
- /package/lmvz-components/{p-Aa_425iY.js → p-CKYszC64.js} +0 -0
package/types/components.d.ts
CHANGED
|
@@ -402,6 +402,87 @@ export declare namespace Components {
|
|
|
402
402
|
*/
|
|
403
403
|
"open": boolean;
|
|
404
404
|
}
|
|
405
|
+
/**
|
|
406
|
+
* Radio button component with form association, ARIA validation, accessible label support,
|
|
407
|
+
* and ARIA APG-compliant Arrow-key keyboard navigation.
|
|
408
|
+
* **Consumer responsibility — `role="radiogroup"`:**
|
|
409
|
+
* Wrap a group of `lmvz-radio` elements in a container element with `role="radiogroup"` and
|
|
410
|
+
* an accessible label via `aria-label` or `aria-labelledby`. `lmvz-radio` must not carry
|
|
411
|
+
* `role="radiogroup"` itself because a radio cannot also be a radiogroup.
|
|
412
|
+
* **Arrow-key navigation and roving tabindex:**
|
|
413
|
+
* When multiple `lmvz-radio` elements share the same `name` attribute, this component
|
|
414
|
+
* automatically handles Arrow Down / Arrow Right (next), Arrow Up / Arrow Left (previous),
|
|
415
|
+
* Home (first), and End (last) navigation with wrapping. Disabled radios are skipped.
|
|
416
|
+
* The checked radio has `tabindex="0"`. When no radio is checked, the first enabled radio
|
|
417
|
+
* in DOM order receives `tabindex="0"`, ensuring the group is always reachable by Tab.
|
|
418
|
+
* @example ```html
|
|
419
|
+
* <div role="radiogroup" aria-label="Choose an option">
|
|
420
|
+
* <lmvz-radio label="Option A" name="choice" checked></lmvz-radio>
|
|
421
|
+
* <lmvz-radio label="Option B" name="choice"></lmvz-radio>
|
|
422
|
+
* </div>
|
|
423
|
+
* ```
|
|
424
|
+
*/
|
|
425
|
+
export interface LmvzRadio {
|
|
426
|
+
/**
|
|
427
|
+
* Whether the radio should autofocus.
|
|
428
|
+
* @default false
|
|
429
|
+
*/
|
|
430
|
+
"autofocus": boolean;
|
|
431
|
+
/**
|
|
432
|
+
* Returns whether the radio satisfies its validation constraints.
|
|
433
|
+
*/
|
|
434
|
+
"checkValidity": () => Promise<boolean>;
|
|
435
|
+
/**
|
|
436
|
+
* Whether the radio is checked. Setting this prop programmatically (e.g. `element.checked = true`) fires `lmvzChange` with the new value, unless the change occurs during native form lifecycle callbacks (`formResetCallback` or `formStateRestoreCallback`), in which case emission is suppressed to match native `<input type="radio">` behavior. Internal form state is always updated regardless of emission suppression.
|
|
437
|
+
* @default false
|
|
438
|
+
*/
|
|
439
|
+
"checked": boolean;
|
|
440
|
+
/**
|
|
441
|
+
* Whether the radio is disabled.
|
|
442
|
+
* @default false
|
|
443
|
+
*/
|
|
444
|
+
"disabled": boolean;
|
|
445
|
+
/**
|
|
446
|
+
* Whether the radio is in an error state.
|
|
447
|
+
* @default false
|
|
448
|
+
*/
|
|
449
|
+
"error": boolean;
|
|
450
|
+
/**
|
|
451
|
+
* Sets focus on the native radio input.
|
|
452
|
+
*/
|
|
453
|
+
"focusInput": () => Promise<void>;
|
|
454
|
+
/**
|
|
455
|
+
* Form id to associate with (for out-of-form usage). Reflected to the host attribute so both HTML attribute and programmatic assignment work.
|
|
456
|
+
*/
|
|
457
|
+
"form"?: string;
|
|
458
|
+
/**
|
|
459
|
+
* Helper / description text displayed below the label.
|
|
460
|
+
*/
|
|
461
|
+
"helperText"?: string;
|
|
462
|
+
/**
|
|
463
|
+
* Label text for the radio. Required for accessibility.
|
|
464
|
+
*/
|
|
465
|
+
"label": string;
|
|
466
|
+
/**
|
|
467
|
+
* Name attribute for form submission via ElementInternals. When multiple `lmvz-radio` elements share the same `name` and form scope, the `name` is forwarded directly to the native `<input type="radio">`, enabling browser-native mutual exclusion: selecting one radio automatically deselects all others with the same name in that form. If a radio is outside any form, its scope defaults to the document level — same-name radios outside forms form a document-scoped group. Radios with the same `name` in different forms are independent groups. The `RadioGroupController` automatically manages roving tabindex (only the checked radio has `tabindex="0"`) and keyboard navigation (Arrow keys, Home, End) within the form-scoped group.
|
|
468
|
+
* @remarks A value of `""` (empty string) is forwarded to the native `<input>`, but `RadioGroupController` treats it as unnamed — no group coordination occurs between radios with `name=""`.
|
|
469
|
+
*/
|
|
470
|
+
"name"?: string;
|
|
471
|
+
/**
|
|
472
|
+
* Reports validation errors to the user.
|
|
473
|
+
*/
|
|
474
|
+
"reportValidity": () => Promise<boolean>;
|
|
475
|
+
/**
|
|
476
|
+
* Whether the radio is required.
|
|
477
|
+
* @default false
|
|
478
|
+
*/
|
|
479
|
+
"required": boolean;
|
|
480
|
+
/**
|
|
481
|
+
* Form submission value when checked.
|
|
482
|
+
* @default 'on'
|
|
483
|
+
*/
|
|
484
|
+
"value": string;
|
|
485
|
+
}
|
|
405
486
|
/**
|
|
406
487
|
* Select component with floating label and pill-shaped trigger.
|
|
407
488
|
* Wraps a native `<select>` element for full keyboard and form support.
|
|
@@ -906,6 +987,83 @@ export declare namespace JSX {
|
|
|
906
987
|
*/
|
|
907
988
|
"open"?: boolean;
|
|
908
989
|
}
|
|
990
|
+
/**
|
|
991
|
+
* Radio button component with form association, ARIA validation, accessible label support,
|
|
992
|
+
* and ARIA APG-compliant Arrow-key keyboard navigation.
|
|
993
|
+
* **Consumer responsibility — `role="radiogroup"`:**
|
|
994
|
+
* Wrap a group of `lmvz-radio` elements in a container element with `role="radiogroup"` and
|
|
995
|
+
* an accessible label via `aria-label` or `aria-labelledby`. `lmvz-radio` must not carry
|
|
996
|
+
* `role="radiogroup"` itself because a radio cannot also be a radiogroup.
|
|
997
|
+
* **Arrow-key navigation and roving tabindex:**
|
|
998
|
+
* When multiple `lmvz-radio` elements share the same `name` attribute, this component
|
|
999
|
+
* automatically handles Arrow Down / Arrow Right (next), Arrow Up / Arrow Left (previous),
|
|
1000
|
+
* Home (first), and End (last) navigation with wrapping. Disabled radios are skipped.
|
|
1001
|
+
* The checked radio has `tabindex="0"`. When no radio is checked, the first enabled radio
|
|
1002
|
+
* in DOM order receives `tabindex="0"`, ensuring the group is always reachable by Tab.
|
|
1003
|
+
* @example ```html
|
|
1004
|
+
* <div role="radiogroup" aria-label="Choose an option">
|
|
1005
|
+
* <lmvz-radio label="Option A" name="choice" checked></lmvz-radio>
|
|
1006
|
+
* <lmvz-radio label="Option B" name="choice"></lmvz-radio>
|
|
1007
|
+
* </div>
|
|
1008
|
+
* ```
|
|
1009
|
+
*/
|
|
1010
|
+
export interface LmvzRadio {
|
|
1011
|
+
/**
|
|
1012
|
+
* Whether the radio should autofocus.
|
|
1013
|
+
* @default false
|
|
1014
|
+
*/
|
|
1015
|
+
"autofocus"?: boolean;
|
|
1016
|
+
/**
|
|
1017
|
+
* Whether the radio is checked. Setting this prop programmatically (e.g. `element.checked = true`) fires `lmvzChange` with the new value, unless the change occurs during native form lifecycle callbacks (`formResetCallback` or `formStateRestoreCallback`), in which case emission is suppressed to match native `<input type="radio">` behavior. Internal form state is always updated regardless of emission suppression.
|
|
1018
|
+
* @default false
|
|
1019
|
+
*/
|
|
1020
|
+
"checked"?: boolean;
|
|
1021
|
+
/**
|
|
1022
|
+
* Whether the radio is disabled.
|
|
1023
|
+
* @default false
|
|
1024
|
+
*/
|
|
1025
|
+
"disabled"?: boolean;
|
|
1026
|
+
/**
|
|
1027
|
+
* Whether the radio is in an error state.
|
|
1028
|
+
* @default false
|
|
1029
|
+
*/
|
|
1030
|
+
"error"?: boolean;
|
|
1031
|
+
/**
|
|
1032
|
+
* Form id to associate with (for out-of-form usage). Reflected to the host attribute so both HTML attribute and programmatic assignment work.
|
|
1033
|
+
*/
|
|
1034
|
+
"form"?: string;
|
|
1035
|
+
/**
|
|
1036
|
+
* Helper / description text displayed below the label.
|
|
1037
|
+
*/
|
|
1038
|
+
"helperText"?: string;
|
|
1039
|
+
/**
|
|
1040
|
+
* Label text for the radio. Required for accessibility.
|
|
1041
|
+
*/
|
|
1042
|
+
"label": string;
|
|
1043
|
+
/**
|
|
1044
|
+
* Name attribute for form submission via ElementInternals. When multiple `lmvz-radio` elements share the same `name` and form scope, the `name` is forwarded directly to the native `<input type="radio">`, enabling browser-native mutual exclusion: selecting one radio automatically deselects all others with the same name in that form. If a radio is outside any form, its scope defaults to the document level — same-name radios outside forms form a document-scoped group. Radios with the same `name` in different forms are independent groups. The `RadioGroupController` automatically manages roving tabindex (only the checked radio has `tabindex="0"`) and keyboard navigation (Arrow keys, Home, End) within the form-scoped group.
|
|
1045
|
+
* @remarks A value of `""` (empty string) is forwarded to the native `<input>`, but `RadioGroupController` treats it as unnamed — no group coordination occurs between radios with `name=""`.
|
|
1046
|
+
*/
|
|
1047
|
+
"name"?: string;
|
|
1048
|
+
/**
|
|
1049
|
+
* Fired on every explicit user activation of this radio — via click or Space key on the native input. Fires even when the radio is already checked (re-activation). Use this event to react to user intent; use `lmvzChange` to react to state transitions.
|
|
1050
|
+
*/
|
|
1051
|
+
"onLmvzActivation"?: (event: LmvzRadioCustomEvent<void>) => void;
|
|
1052
|
+
/**
|
|
1053
|
+
* Emitted whenever the radio checked state changes. Event detail contains the new checked boolean value. Emission contract: - Fires `true` on user selection (native `change` event). - Fires on programmatic external prop transitions: `true → false` (emits `false`) and `false → true` (emits `true`), e.g. `element.checked = false` or `element.checked = true`. - Does NOT fire during browser-driven form lifecycle callbacks: `formResetCallback` and `formStateRestoreCallback` (autofill / session restore). This matches native `<input type="radio">` behaviour, which does not fire `change` on form reset. Note that internal form state (`ElementInternals.setFormValue`) is always updated regardless of suppression — only the event channel is silenced. - Does NOT re-fire from the `@Watch('checked')` watcher during the same tick as the native `change` handler, preventing a double-emission when the user clicks the radio.
|
|
1054
|
+
*/
|
|
1055
|
+
"onLmvzChange"?: (event: LmvzRadioCustomEvent<boolean>) => void;
|
|
1056
|
+
/**
|
|
1057
|
+
* Whether the radio is required.
|
|
1058
|
+
* @default false
|
|
1059
|
+
*/
|
|
1060
|
+
"required"?: boolean;
|
|
1061
|
+
/**
|
|
1062
|
+
* Form submission value when checked.
|
|
1063
|
+
* @default 'on'
|
|
1064
|
+
*/
|
|
1065
|
+
"value"?: string;
|
|
1066
|
+
}
|
|
909
1067
|
/**
|
|
910
1068
|
* Select component with floating label and pill-shaped trigger.
|
|
911
1069
|
* Wraps a native `<select>` element for full keyboard and form support.
|
|
@@ -1080,6 +1238,18 @@ export declare namespace JSX {
|
|
|
1080
1238
|
"open": boolean;
|
|
1081
1239
|
"closeLabel": string;
|
|
1082
1240
|
}
|
|
1241
|
+
export interface LmvzRadioAttributes {
|
|
1242
|
+
"label": string;
|
|
1243
|
+
"checked": boolean;
|
|
1244
|
+
"value": string;
|
|
1245
|
+
"name": string;
|
|
1246
|
+
"disabled": boolean;
|
|
1247
|
+
"required": boolean;
|
|
1248
|
+
"error": boolean;
|
|
1249
|
+
"helperText": string;
|
|
1250
|
+
"form": string;
|
|
1251
|
+
"autofocus": boolean;
|
|
1252
|
+
}
|
|
1083
1253
|
export interface LmvzSelectAttributes {
|
|
1084
1254
|
"value": string;
|
|
1085
1255
|
"label": string;
|
|
@@ -1110,6 +1280,7 @@ export declare namespace JSX {
|
|
|
1110
1280
|
"lmvz-input": Omit<LmvzInput, keyof LmvzInputAttributes> & { [K in keyof LmvzInput & keyof LmvzInputAttributes]?: LmvzInput[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `attr:${K}`]?: LmvzInputAttributes[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `prop:${K}`]?: LmvzInput[K] } & OneOf<"label", LmvzInput["label"], LmvzInputAttributes["label"]>;
|
|
1111
1281
|
"lmvz-menuitem": Omit<LmvzMenuitem, keyof LmvzMenuitemAttributes> & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes]?: LmvzMenuitem[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `attr:${K}`]?: LmvzMenuitemAttributes[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `prop:${K}`]?: LmvzMenuitem[K] };
|
|
1112
1282
|
"lmvz-modal": Omit<LmvzModal, keyof LmvzModalAttributes> & { [K in keyof LmvzModal & keyof LmvzModalAttributes]?: LmvzModal[K] } & { [K in keyof LmvzModal & keyof LmvzModalAttributes as `attr:${K}`]?: LmvzModalAttributes[K] } & { [K in keyof LmvzModal & keyof LmvzModalAttributes as `prop:${K}`]?: LmvzModal[K] };
|
|
1283
|
+
"lmvz-radio": Omit<LmvzRadio, keyof LmvzRadioAttributes> & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes]?: LmvzRadio[K] } & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes as `attr:${K}`]?: LmvzRadioAttributes[K] } & { [K in keyof LmvzRadio & keyof LmvzRadioAttributes as `prop:${K}`]?: LmvzRadio[K] } & OneOf<"label", LmvzRadio["label"], LmvzRadioAttributes["label"]>;
|
|
1113
1284
|
"lmvz-select": Omit<LmvzSelect, keyof LmvzSelectAttributes> & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes]?: LmvzSelect[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `attr:${K}`]?: LmvzSelectAttributes[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `prop:${K}`]?: LmvzSelect[K] } & OneOf<"label", LmvzSelect["label"], LmvzSelectAttributes["label"]>;
|
|
1114
1285
|
"lmvz-toggle": Omit<LmvzToggle, keyof LmvzToggleAttributes> & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes]?: LmvzToggle[K] } & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes as `attr:${K}`]?: LmvzToggleAttributes[K] } & { [K in keyof LmvzToggle & keyof LmvzToggleAttributes as `prop:${K}`]?: LmvzToggle[K] } & OneOf<"label", LmvzToggle["label"], LmvzToggleAttributes["label"]>;
|
|
1115
1286
|
}
|
|
@@ -1155,6 +1326,11 @@ export declare interface LmvzModalCustomEvent<T> extends CustomEvent<T> {
|
|
|
1155
1326
|
target: HTMLLmvzModalElement;
|
|
1156
1327
|
}
|
|
1157
1328
|
|
|
1329
|
+
export declare interface LmvzRadioCustomEvent<T> extends CustomEvent<T> {
|
|
1330
|
+
detail: T;
|
|
1331
|
+
target: HTMLLmvzRadioElement;
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1158
1334
|
export declare interface LmvzSelectCustomEvent<T> extends CustomEvent<T> {
|
|
1159
1335
|
detail: T;
|
|
1160
1336
|
target: HTMLLmvzSelectElement;
|
|
@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
|
|
|
1070
1070
|
importance?: 'low' | 'auto' | 'high';
|
|
1071
1071
|
height?: number | string;
|
|
1072
1072
|
loading?: 'lazy' | 'auto' | 'eager';
|
|
1073
|
+
referrerPolicy?: ReferrerPolicy;
|
|
1073
1074
|
sizes?: string;
|
|
1074
1075
|
src?: string;
|
|
1075
1076
|
srcSet?: string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactiveController } from '../reactive-controller-host';
|
|
2
|
+
export interface RadioHost {
|
|
3
|
+
el: HTMLElement;
|
|
4
|
+
name?: string;
|
|
5
|
+
checked: boolean;
|
|
6
|
+
disabled: boolean;
|
|
7
|
+
focusInput(): Promise<void>;
|
|
8
|
+
}
|
|
9
|
+
export declare class RadioGroupController implements ReactiveController {
|
|
10
|
+
private readonly host;
|
|
11
|
+
private static registry;
|
|
12
|
+
private group;
|
|
13
|
+
private _groupKey;
|
|
14
|
+
private _scope;
|
|
15
|
+
constructor(host: RadioHost);
|
|
16
|
+
hostConnected(): void;
|
|
17
|
+
hostDidRender(): void;
|
|
18
|
+
hostDisconnected(): void;
|
|
19
|
+
get sortedEnabled(): RadioHost[];
|
|
20
|
+
select(selectedHost: RadioHost): void;
|
|
21
|
+
setFocused(host: RadioHost): void;
|
|
22
|
+
clearFocused(): void;
|
|
23
|
+
updateTabindex(): void;
|
|
24
|
+
private static acquireGroup;
|
|
25
|
+
private static releaseGroup;
|
|
26
|
+
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
|
|
2
|
-
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
|
3
|
-
<path d="M3.75 12.5625L8.83079 17.625L20.4375 6.375" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
|
|
2
|
-
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
|
3
|
-
<path d="M3.75 12.5625L8.83079 17.625L20.4375 6.375" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
</svg>
|
package/components/p-CcnyKhAw.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,c as o,h as n,H as r,t as e}from"./p-CK8cAKcB.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,A as i}from"./p-slgmfnHm.js";import{E as m}from"./p-CN0JX9-m.js";import{i as s,f as v}from"./p-DOTK1OW3.js";const c=t(class extends l{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant;disabled=!1;type="button";form;formMethod;name;value;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation",7),this.addController(new i(this)),this.addController(new m(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=s(this.el),super.connectedCallback()}disconnectedCallback(){this.formButtonEl?.remove(),this.formButtonEl=null,this.formEl=null,super.disconnectedCallback()}renderHiddenButton(){if("submit"!==this.type)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);const t=v(this.form,this.el);if(!t)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);this.formEl=t;const o=this.formButtonEl??document.createElement("button");o.type="submit",o.style.display="none",o.disabled=this.disabled,o.name=this.name??"",o.value=this.value??"",this.formMethod?o.setAttribute("formmethod",this.formMethod):o.removeAttribute("formmethod"),this.formButtonEl!==o&&(this.formButtonEl=o),o.parentElement!==t&&(o.remove(),t.appendChild(o))}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),n(r,{key:"8196de85afc3878c6f38e582d7c031f5d19bcd36","aria-disabled":this.disabled?"true":null},n("button",{key:"8d73f979fa227de22a03403a2a3938684911060a",ref:t=>this.validationEl=t,part:"button",disabled:this.disabled,type:this.type,class:a(this.variant??"secondary",{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},n("slot",{key:"18e91a2f94ba0d7e5cf13150191003e2f0b2a03a"})))}static get delegatesFocus(){return!0}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1],formMethod:[1,"form-method"],name:[1],value:[1]}]);function d(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(e(t))||customElements.define(e(t),c))}))}export{c as L,d}
|
package/components/p-DSvYtVoD.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,d as e,h as n,H as s,t as i}from"./p-CK8cAKcB.js";import{a as o,i as a}from"./p-CdDO7mQa.js";import{a as r}from"./p-DOTK1OW3.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}actionsSlot;validationMessageCache=[];actionsStateObserver;get primaryEnabledAction(){return this.enabledButtons.find(p)??this.enabledButtons[0]}get hasActions(){return this.assignedButtons.some((t=>l(t)&&u(t)&&!h(t)))}componentDidLoad(){this.handleActionsSlotChange()}disconnectedCallback(){this.actionsStateObserver?.disconnect()}get assignedElements(){return this.actionsSlot?.assignedElements({flatten:!0})??[]}get assignedButtons(){return this.assignedElements.filter(u)}get visibleButtons(){return this.assignedButtons.filter(l)}get enabledButtons(){return this.visibleButtons.filter((t=h,(...e)=>{const n=t(...e);return o(n)?n.then((t=>!t)):!n}));var t}getActionValidationResult(){if(!this.visibleButtons.length)return[];const t=this.visibleButtons.filter(p),e=this.visibleButtons.filter(f),n=[],s=this.visibleButtons.toReversed();if(1!==t.length&&n.push("LmvzModal actions slot must contain exactly one primary action."),e.length>1&&n.push(`LmvzModal actions slot must contain at most one secondary action (received ${e.length})`),t.length){const i=e[0];0!==s.indexOf(t[0])&&n.push("Primary action must be the last focusable element in the actions slot (i.e. rightmost button)."),i&&1!==s.indexOf(i)&&n.push("Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).")}else e.length&&0!==s.indexOf(e[0])&&n.push("Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).");return n}handleActionsSlotChange=()=>{this.observeActionState(),this.syncActionsState()};observeActionState(){"undefined"!=typeof MutationObserver&&(this.actionsStateObserver?.disconnect(),this.assignedButtons.length&&(this.actionsStateObserver=new MutationObserver((()=>{this.syncActionsState()})),this.assignedButtons.forEach((t=>{this.actionsStateObserver?.observe(t,{attributes:!0,attributeFilter:["disabled","hidden","variant"]})}))))}syncActionsState(){this.assignedElements.forEach((t=>{["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())||(t.hasAttribute("hidden")||t.setAttribute("hidden",""),"true"!==t.getAttribute("aria-hidden")&&t.setAttribute("aria-hidden","true"))})),this.checkActions();const t=this.visibleButtons.length;for(let e=0;e<t;e++){const n=e===t-1?"primary":e===t-2?"secondary":"tertiary",s=this.visibleButtons.at(e);s&&(d(s)?s.getAttribute("variant")||s.setAttribute("variant",n):s.classList.add(n))}this.focusPrimaryAction()}focusPrimaryAction(){const t=this.primaryEnabledAction;t&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{r(t)&&t.focus()}))}checkActions(){if(!a())return;const t=this.getActionValidationResult();t.length&&t.forEach((t=>{this.validationMessageCache.includes(t)||(console.warn(t),this.validationMessageCache.push(t))}))}render(){return n(s,{key:"56b60821ecaa2301d13e78d621e873aa74cd170e"},n("slot",{key:"e6a1422950fa5b0026356b7788a607a690116186",ref:t=>this.actionsSlot=t,onSlotchange:this.handleActionsSlotChange}))}static get style(){return":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}"}},[257,"lmvz-button-group",{primaryEnabledAction:[2064],hasActions:[2052,"has-actions"]}]);function u(t){return["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())}function d(t){return"LMVZ-BUTTON"===t?.tagName.toUpperCase()}function h(t){return t.hasAttribute("disabled")||!0===t.disabled}function l(t){return!t.hasAttribute("hidden")}function m(t){const e=t.getAttribute("variant")??t.variant;return"primary"===e||"secondary"===e||"tertiary"===e?e:"secondary"}function p(t){return"primary"===m(t)}function f(t){return"secondary"===m(t)}function y(){"undefined"!=typeof customElements&&["lmvz-button-group"].forEach((t=>{"lmvz-button-group"===t&&(customElements.get(i(t))||customElements.define(i(t),c))}))}export{c as L,y as d}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{g as t,r as o,c as e,h as n,H as i}from"./p-Aa_425iY.js";import{c as r}from"./p-BfTCfPZ1.js";import{R as a,A as s}from"./p-BRl6zKXT.js";import{E as l}from"./p-CN0JX9-m.js";import{i as m,f as c,a as d}from"./p-DOTK1OW3.js";import{a as v,i as u}from"./p-CdDO7mQa.js";import{p as h}from"./p-CcxjkCOx.js";import{a as b}from"./p-CFsC37ww.js";import"./p-CGmJG63p.js";const p=class extends a{get el(){return t(this)}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant;disabled=!1;type="button";form;formMethod;name;value;constructor(t){super(),o(this,t),this.lmvzActivation=e(this,"lmvzActivation",7),this.addController(new s(this)),this.addController(new l(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=m(this.el),super.connectedCallback()}disconnectedCallback(){this.formButtonEl?.remove(),this.formButtonEl=null,this.formEl=null,super.disconnectedCallback()}renderHiddenButton(){if("submit"!==this.type)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);const t=c(this.form,this.el);if(!t)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);this.formEl=t;const o=this.formButtonEl??document.createElement("button");o.type="submit",o.style.display="none",o.disabled=this.disabled,o.name=this.name??"",o.value=this.value??"",this.formMethod?o.setAttribute("formmethod",this.formMethod):o.removeAttribute("formmethod"),this.formButtonEl!==o&&(this.formButtonEl=o),o.parentElement!==t&&(o.remove(),t.appendChild(o))}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),n(i,{key:"8196de85afc3878c6f38e582d7c031f5d19bcd36","aria-disabled":this.disabled?"true":null},n("button",{key:"8d73f979fa227de22a03403a2a3938684911060a",ref:t=>this.validationEl=t,part:"button",disabled:this.disabled,type:this.type,class:r(this.variant??"secondary",{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},n("slot",{key:"18e91a2f94ba0d7e5cf13150191003e2f0b2a03a"})))}static get delegatesFocus(){return!0}};p.style=" @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); } ";const z=class{constructor(t){o(this,t)}actionsSlot;validationMessageCache=[];actionsStateObserver;get primaryEnabledAction(){return this.enabledButtons.find(R)??this.enabledButtons[0]}get hasActions(){return this.assignedButtons.some((t=>w(t)&&f(t)&&!y(t)))}componentDidLoad(){this.handleActionsSlotChange()}disconnectedCallback(){this.actionsStateObserver?.disconnect()}get assignedElements(){return this.actionsSlot?.assignedElements({flatten:!0})??[]}get assignedButtons(){return this.assignedElements.filter(f)}get visibleButtons(){return this.assignedButtons.filter(w)}get enabledButtons(){return this.visibleButtons.filter((t=y,(...o)=>{const e=t(...o);return v(e)?e.then((t=>!t)):!e}));var t}getActionValidationResult(){if(!this.visibleButtons.length)return[];const t=this.visibleButtons.filter(R),o=this.visibleButtons.filter(x),e=[],n=this.visibleButtons.toReversed();if(1!==t.length&&e.push("LmvzModal actions slot must contain exactly one primary action."),o.length>1&&e.push(`LmvzModal actions slot must contain at most one secondary action (received ${o.length})`),t.length){const i=o[0];0!==n.indexOf(t[0])&&e.push("Primary action must be the last focusable element in the actions slot (i.e. rightmost button)."),i&&1!==n.indexOf(i)&&e.push("Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).")}else o.length&&0!==n.indexOf(o[0])&&e.push("Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).");return e}handleActionsSlotChange=()=>{this.observeActionState(),this.syncActionsState()};observeActionState(){"undefined"!=typeof MutationObserver&&(this.actionsStateObserver?.disconnect(),this.assignedButtons.length&&(this.actionsStateObserver=new MutationObserver((()=>{this.syncActionsState()})),this.assignedButtons.forEach((t=>{this.actionsStateObserver?.observe(t,{attributes:!0,attributeFilter:["disabled","hidden","variant"]})}))))}syncActionsState(){this.assignedElements.forEach((t=>{["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())||(t.hasAttribute("hidden")||t.setAttribute("hidden",""),"true"!==t.getAttribute("aria-hidden")&&t.setAttribute("aria-hidden","true"))})),this.checkActions();const t=this.visibleButtons.length;for(let o=0;o<t;o++){const e=o===t-1?"primary":o===t-2?"secondary":"tertiary",n=this.visibleButtons.at(o);n&&(g(n)?n.getAttribute("variant")||n.setAttribute("variant",e):n.classList.add(e))}this.focusPrimaryAction()}focusPrimaryAction(){const t=this.primaryEnabledAction;t&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{d(t)&&t.focus()}))}checkActions(){if(!u())return;const t=this.getActionValidationResult();t.length&&t.forEach((t=>{this.validationMessageCache.includes(t)||(console.warn(t),this.validationMessageCache.push(t))}))}render(){return n(i,{key:"56b60821ecaa2301d13e78d621e873aa74cd170e"},n("slot",{key:"e6a1422950fa5b0026356b7788a607a690116186",ref:t=>this.actionsSlot=t,onSlotchange:this.handleActionsSlotChange}))}};function f(t){return["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())}function g(t){return"LMVZ-BUTTON"===t?.tagName.toUpperCase()}function y(t){return t.hasAttribute("disabled")||!0===t.disabled}function w(t){return!t.hasAttribute("hidden")}function k(t){const o=t.getAttribute("variant")??t.variant;return"primary"===o||"secondary"===o||"tertiary"===o?o:"secondary"}function R(t){return"primary"===k(t)}function x(t){return"secondary"===k(t)}z.style=":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}";const B=class extends a{intersectionObserver;ariaValidationController=new s(this);get el(){return t(this)}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(t){super(),o(this,t),this.addController(this.ariaValidationController)}connectedCallback(){this.waitUntilVisible((()=>{this.visible=!0,this.loadIconPathData()})),super.connectedCallback()}disconnectedCallback(){this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,super.disconnectedCallback()}async loadIconPathData(){const{icon:t,iconset:o,visible:e}=this;if(!t||!e)return;const n=h(t);this.iconData=n||await b({icon:t,iconset:o})}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return n(i,{key:"03b4391d02a77409257bcda51c2b65ad9a9e0a0c",role:"img","aria-hidden":`${this.ariaHidden}`,innerHTML:this.iconData})}waitUntilVisible(t,o=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((o=>{o.some((o=>!!o.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,t(),!0)))}),{rootMargin:`${o}px`}),this.intersectionObserver.observe(this.el)):t()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}};B.style=".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)}}";export{p as lmvz_button,z as lmvz_button_group,B as lmvz_icon}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as c,c as s,h as t,H as i}from"./p-Aa_425iY.js";const a=class{constructor(t){c(this,t),this.actionClick=s(this,"actionClick",7)}actionClick;_onClick(c){this.actionClick.emit(c)}render(){return t(i,{key:"15c0f20e08cd5019abfd3bb71ec69d175dc5ba48",onClick:this._onClick.bind(this)},t("slot",{key:"f71a7853168d1b66b0a50b0f971d140385530ac3"}))}};a.style=":host{display:block}";export{a as lmvz_action}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{g as e,r as t,c as o,h as r,H as a}from"./p-Aa_425iY.js";import{R as l,A as s}from"./p-BRl6zKXT.js";import{c}from"./p-DOTK1OW3.js";import"./p-CdDO7mQa.js";let i=0;const n=class extends l{get el(){return e(this)}get validationEl(){return this.el}internals;nativeInputElement;toggleId="lmvz-toggle-"+i++;lmvzChange;label;checked=!1;disabled=!1;required=!1;name;value="on";form;constructor(e){super(),t(this,e),this.lmvzChange=o(this,"lmvzChange",7),e.$hostElement$["s-ei"]?this.internals=e.$hostElement$["s-ei"]:(this.internals=e.$hostElement$.attachInternals(),e.$hostElement$["s-ei"]=this.internals),this.addController(new s(this))}formAssociatedCallback(e){this.internals.setFormValue?.(this.checked?this.value:null)}formResetCallback(){this.checked=!1}formStateRestoreCallback(e){this.checked=e===this.value,this.internals.setFormValue?.(this.checked?this.value:null)}handleCheckedChange(e){this.internals.setFormValue?.(e?this.value:null)}handleDisabledChange(e){e&&this.nativeInputElement&&this.nativeInputElement.blur()}async focusToggle(){this.nativeInputElement?.focus()}async blurToggle(){this.nativeInputElement?.blur()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((e=>c(this.el,e))),Promise.resolve(this.nativeInputElement)}handleChange=e=>{const t=e.target.checked;this.checked=t,this.lmvzChange.emit(t)};render(){return r(a,{key:"b7d3c3d2ae30744669032797b2fefcd1e7fe0b61"},r("span",{key:"93dc128b588e19a5e322cb93efae33669375709a",class:"track"},r("input",{key:"80650720ac6276f7c8996e071d8104e98002e06e",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:e=>this.nativeInputElement=e,onChange:this.handleChange}),r("span",{key:"59838c27a032d7a116faea67fa1dc75cf9ee92cd",class:"thumb","aria-hidden":"true"})),r("label",{key:"809057cf268adf05c8163a802a6020dca9b666b9",htmlFor:this.toggleId},this.label))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}],disabled:[{handleDisabledChange:0}]}}};n.style="@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-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); 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; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .sc-lmvz-toggle-h:focus-within { outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc); outline-offset: 2px; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }";export{n as lmvz_toggle}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{a as t,r as e,c as r,h as o,H as a}from"./p-Aa_425iY.js";const n=class{constructor(t){e(this,t),this.primaryAction=r(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 o(a,{key:"2d9ecdeed986f142fb7ff477b56dece59549bbc7",role:"article"},o("div",{key:"34fc9c3a1338b31ce73424e8c07c79a291ead85c",class:"top"},o("div",{key:"1756e6b26d7f42499753c36ed0fc13755fe32bfe",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},o("div",{key:"cd8be8acc9e949092b6363024316d12d445a9fbc",class:"chip-slot"},o("slot",{key:"26389ab3b7031b948ff1701857e6028446662cf5",name:"chip"})))),o("div",{key:"2fa61cd7bef437f15929ae39be7fa294e8778321",class:"bottom"},o("header",{key:"b237ca025e42a29f528f827dc3c83b3b0f9267c0"},o("h2",{key:"ffd0a509ba97acb75d4c15d0fd01eef08689a2a7",class:"title"},this.cardTitle)),o("p",{key:"c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1",class:"description"},this.description),o("div",{key:"7663f93b41ef1e798b464bd6ad75ca8a53c0667b",class:"actions"},o("button",{key:"3348e6700aa1571183558ab8fe4f73393c1cc943",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),o("button",{key:"d3a12cdabbdd68c3b04e06984db44abd3bbd22ea",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},o("span",{key:"80e31e6b691e18d1b42a2b4831349c3abf8e02b0",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}};n.style="@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; }";export{n as lmvz_card}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{g as e,r as t,c as i,h as o,H as a}from"./p-Aa_425iY.js";import{t as s}from"./p-CcxjkCOx.js";import{R as l,A as n}from"./p-BRl6zKXT.js";import{i as r,g as d}from"./p-DOTK1OW3.js";import"./p-CGmJG63p.js";import"./p-CdDO7mQa.js";const c=s("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");let h=0;const m=class extends l{get el(){return e(this)}inheritedAriaAttributes={};dialogEl;dialogStateObserver;headerSlot;buttonGroupEl;closeButtonEl;previouslyFocusedElement=null;wrappedDialogShowModal;pendingCloseReturnValue;dialogTitleId="lmvz-modal-title-"+h++;hasHeader=!1;open=!1;closeLabel="Schliessen";dialogClose;dialogCancel;get dialog(){return this.dialogEl}get validationEl(){return this.dialogEl??this.el}constructor(e){super(),t(this,e),this.dialogClose=i(this,"close",6),this.dialogCancel=i(this,"cancel",1),this.addController(new n(this,{validationTiming:"slot"}))}handleFormDialogSubmit(e){const t=e.submitter;("dialog"===e.target.method||"dialog"===t?.getAttribute("formmethod"))&&(e.preventDefault(),this.dialogEl?.close(t?.value??""))}connectedCallback(){this.inheritedAriaAttributes=r(this.el,["role"]),Object.defineProperty(this.el,"dialog",{configurable:!0,enumerable:!0,get:()=>(this.ensureDialogShowModalCapture(),this.dialogEl)}),super.connectedCallback()}componentDidLoad(){this.handleHeaderSlotChange(),this.observeDialogState(),this.syncDialogVisibility(),super.componentDidLoad()}disconnectedCallback(){this.dialogStateObserver?.disconnect(),super.disconnectedCallback()}componentDidRender(){this.open&&this.focusPrimaryAction(),super.componentDidRender()}handleOpenChange(){this.syncDialogVisibility()}get dialogAccessibilityAttributes(){const e={...this.inheritedAriaAttributes};if(delete e["aria-label"],delete e["aria-labelledby"],this.hasHeader)return e["aria-labelledby"]=this.dialogTitleId,e;const t=this.inheritedAriaAttributes["aria-labelledby"];if("string"==typeof t)return e["aria-labelledby"]=t,e;const i=this.inheritedAriaAttributes["aria-label"];return"string"==typeof i&&(e["aria-label"]=i),e}hasAssignedContent(e){return Boolean(e?.assignedNodes({flatten:!0}).some((e=>e.nodeType===Node.TEXT_NODE?Boolean(e.textContent?.trim()):e.nodeType===Node.ELEMENT_NODE)))}observeDialogState(){this.dialogEl&&"undefined"!=typeof MutationObserver&&(this.dialogStateObserver?.disconnect(),this.dialogStateObserver=new MutationObserver((()=>{this.dialogEl&&this.dialogEl.open!==this.open&&(this.open=!!this.dialogEl.open)})),this.dialogStateObserver.observe(this.dialogEl,{attributes:!0,attributeFilter:["open"]}))}capturePreviouslyFocusedElement(){const e=this.dialogEl,t=d(document);e&&t&&!e.contains(t)&&(this.previouslyFocusedElement=t)}ensureDialogShowModalCapture(){const e=this.dialogEl;if(!e||"function"!=typeof e.showModal)return;const t=e.showModal;if(t===this.wrappedDialogShowModal)return;const i=()=>(this.capturePreviouslyFocusedElement(),t.call(e));Object.defineProperty(e,"showModal",{configurable:!0,value:i}),this.wrappedDialogShowModal=i}syncDialogVisibility(){const e=this.dialogEl;if(e)return this.open?(e.open||(this.capturePreviouslyFocusedElement(),"function"==typeof e.showModal?e.showModal():e.setAttribute("open","")),void this.focusPrimaryAction()):void(e.open&&("function"==typeof e.close?e.close():(e.removeAttribute("open"),this.handleDialogClose())))}focusPrimaryAction(){const e=this.buttonGroupEl?.primaryEnabledAction??this.closeButtonEl;e&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{this.open&&e.focus()}))}restoreFocus(){this.previouslyFocusedElement?.isConnected&&(this.previouslyFocusedElement.focus(),this.previouslyFocusedElement=null)}handleCloseButtonClick=()=>{if(!this.dialogEl)return;const e=this.dialogEl;if("function"==typeof e.requestClose)return this.pendingCloseReturnValue="close",void e.requestClose("close");"function"!=typeof this.dialogEl.close?this.handleDialogClose():this.dialogEl.close("close")};handleDialogCancel=e=>{if(e.preventDefault(),this.dialogCancel.emit().defaultPrevented)return void(this.pendingCloseReturnValue=void 0);const t=this.pendingCloseReturnValue;this.pendingCloseReturnValue=void 0,this.dialogEl?.close(t)};handleDialogClose=()=>{console.log("Dialog close handler called"),this.open&&(this.open=!1),this.restoreFocus(),this.dialogClose.emit()};handleHeaderSlotChange=()=>{this.hasHeader=this.hasAssignedContent(this.headerSlot)};render(){return o(a,{key:"f014c692b82fae6dd96dffdbda4043aa9174004f"},o("dialog",{key:"8939eda4aba44f1b6c9e8983cacddba83f668692",ref:e=>this.dialogEl=e,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose,...this.dialogAccessibilityAttributes},o("div",{key:"93f43c5f7c258494c86f9604b7eeac0046f912d6",class:"modal-shell"},o("header",{key:"2e8177a5e0812007fede430533e6a0aa9b7bc0ea",class:{header:!0,"has-title":this.hasHeader}},o("div",{key:"fb4b537386077b837758f4b61c45433ad6c747cc",class:"title",id:this.dialogTitleId,hidden:!this.hasHeader},o("slot",{key:"2507b2b7af3b18e859e87b7d682bdf189c4df53d",name:"header",ref:e=>this.headerSlot=e,onSlotchange:this.handleHeaderSlotChange})),o("lmvz-button",{key:"5e4bcd8771babae9a9dc34fc908eb9210639a497",ref:e=>this.closeButtonEl=e,type:"button",class:"close-button","aria-label":this.closeLabel,onClick:this.handleCloseButtonClick,variant:"tertiary"},o("lmvz-icon",{key:"32aada0eea679fd1610eb704ac02cca1f27168ff",icon:c}))),o("div",{key:"1dc811f3edcd9ab1611483c90345483fee94b318",class:"body"},o("slot",{key:"cf870234c54d659cdd85d1a736626707f65cca4a"})),o("footer",{key:"c2ed7badb41a09d1187af2221f33fc2a87bcb606",class:"actions",hidden:!this.buttonGroupEl?.hasActions},o("lmvz-button-group",{key:"c4846b44ff94b0411d79d88b3bb8447dd2a5967a",ref:e=>this.buttonGroupEl=e},o("slot",{key:"3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff",name:"actions"}))))))}static get watchers(){return{open:[{handleOpenChange:0}]}}};m.style=" @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 { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { position: relative; display: flex; flex-direction: column; inline-size: fit-content; max-inline-size: clamp(40rem, 100%, 80vw); gap: var(--lmvz-modal-shell-gap); padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)); padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-modal-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); overflow: auto; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } @media (min-width: 768px) { .modal-shell { max-inline-size: 100vw; } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } ";export{m as lmvz_modal}
|
|
File without changes
|
|
File without changes
|