@lmvz-ds/components 0.23.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 +13 -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 +5 -5
- 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 +35 -27
- package/collection/components/lmvz-button/lmvz-button.js +1 -1
- package/collection/components/lmvz-button-group/lmvz-button-group.css +1 -1
- package/collection/components/lmvz-card/lmvz-card.css +35 -27
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +20 -19
- 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 +17 -17
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +14 -10
- package/collection/components/lmvz-modal/lmvz-modal.css +40 -18
- 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 +15 -11
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +16 -17
- 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 +5 -5
- 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 +372 -20
- package/hydrate/index.mjs +372 -20
- 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-3df070b0.entry.js +1 -0
- package/lmvz-components/p-758078db.entry.js +1 -0
- 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-c01a6c70.entry.js +1 -0
- package/lmvz-components/p-e1eaa7a2.entry.js +1 -0
- package/lmvz-components/p-e23d0054.entry.js +1 -0
- package/lmvz-components/p-fe607f10.entry.js +1 -0
- package/manifest.json +416 -3
- 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-DSvYtVoD.js +0 -1
- package/components/p-K_EPq-vy.js +0 -1
- package/lmvz-components/p-05896617.entry.js +0 -1
- package/lmvz-components/p-267344a7.entry.js +0 -1
- package/lmvz-components/p-2b09b8bc.entry.js +0 -1
- package/lmvz-components/p-3846ba08.entry.js +0 -1
- package/lmvz-components/p-3df92762.entry.js +0 -1
- package/lmvz-components/p-5f550b9f.entry.js +0 -1
- package/lmvz-components/p-8e43fabb.entry.js +0 -1
- package/lmvz-components/p-f7f32879.entry.js +0 -1
- package/lmvz-components/p-fa4e00cf.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/hydrate/index.mjs
CHANGED
|
@@ -134,7 +134,7 @@ const NAMESPACE = 'lmvz-components';
|
|
|
134
134
|
const BUILD = /* lmvz-components */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
135
135
|
|
|
136
136
|
/*
|
|
137
|
-
Stencil Hydrate Platform v4.43.
|
|
137
|
+
Stencil Hydrate Platform v4.43.5 | MIT Licensed | https://stenciljs.com
|
|
138
138
|
*/
|
|
139
139
|
var __create = Object.create;
|
|
140
140
|
var __defProp = Object.defineProperty;
|
|
@@ -5884,7 +5884,7 @@ class ReactiveControllerHost {
|
|
|
5884
5884
|
}
|
|
5885
5885
|
}
|
|
5886
5886
|
|
|
5887
|
-
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
5887
|
+
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --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: 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.5rem, 0.44rem + 0.26vw, 0.75rem)); --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.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(1rem, 0.94rem + 0.26vw, 1.25rem)); --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); } `;
|
|
5888
5888
|
|
|
5889
5889
|
class LmvzButton extends ReactiveControllerHost {
|
|
5890
5890
|
get el() { return getElement(this); }
|
|
@@ -5972,7 +5972,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5972
5972
|
};
|
|
5973
5973
|
render() {
|
|
5974
5974
|
this.renderHiddenButton();
|
|
5975
|
-
return (hAsync(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, hAsync("button", { key: '
|
|
5975
|
+
return (hAsync(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, hAsync("button", { key: '8d73f979fa227de22a03403a2a3938684911060a', ref: (e) => (this.validationEl = e), part: "button", disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '18e91a2f94ba0d7e5cf13150191003e2f0b2a03a' }))));
|
|
5976
5976
|
}
|
|
5977
5977
|
static get delegatesFocus() { return true; }
|
|
5978
5978
|
static get style() { return lmvzButtonCss(); }
|
|
@@ -8163,7 +8163,7 @@ function toValidSvgStringWithFallback(value) {
|
|
|
8163
8163
|
}
|
|
8164
8164
|
}
|
|
8165
8165
|
|
|
8166
|
-
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.
|
|
8166
|
+
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));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}`;
|
|
8167
8167
|
|
|
8168
8168
|
class LmvzButtonGroup {
|
|
8169
8169
|
constructor(hostRef) {
|
|
@@ -8356,7 +8356,7 @@ function joinPath(...parts) {
|
|
|
8356
8356
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
8357
8357
|
}
|
|
8358
8358
|
|
|
8359
|
-
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
8359
|
+
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --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: 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.5rem, 0.44rem + 0.26vw, 0.75rem)); --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.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(1rem, 0.94rem + 0.26vw, 1.25rem)); --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; }`;
|
|
8360
8360
|
|
|
8361
8361
|
class LmvzCard {
|
|
8362
8362
|
constructor(hostRef) {
|
|
@@ -8400,9 +8400,9 @@ class LmvzCard {
|
|
|
8400
8400
|
}; }
|
|
8401
8401
|
}
|
|
8402
8402
|
|
|
8403
|
-
const checkmarkSvg = 'data:image/svg+xml;base64,
|
|
8403
|
+
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
|
|
8404
8404
|
|
|
8405
|
-
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
8405
|
+
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #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, #545454); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } [disabled].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { cursor: not-allowed; } [disabled].sc-lmvz-checkbox-h input.sc-lmvz-checkbox { cursor: not-allowed; } .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; } }`;
|
|
8406
8406
|
|
|
8407
8407
|
const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
|
|
8408
8408
|
let checkboxIdCounter = 0;
|
|
@@ -8493,7 +8493,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
|
|
|
8493
8493
|
this.lmvzChange.emit(this.checked);
|
|
8494
8494
|
};
|
|
8495
8495
|
render() {
|
|
8496
|
-
return (hAsync(Host, { key: '
|
|
8496
|
+
return (hAsync(Host, { key: '158efacac5c28a18003149d4acb0d1cf5385cef4' }, hAsync("div", { key: '5deaf853f9c465b70b7e5472579c5d5212105c34', class: "pill" }, hAsync("input", { key: '7e8da452d41cd48293569ec60dad0585ff3290f1', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: 'd1ee72be8e3fc2b4e70ff64b70bfcec93f08f063', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '73e123aa8c91e9098b4d8bbd48bbc7bae6c12383', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '2a161e6db9e792dca1fa24c1562bd0b79d62235b', class: "content" }, hAsync("label", { key: 'fb38792095bf6da433867472d866d6700db45dac', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: 'b8c16fc4782f67e1dca82329d081943a7d75a524', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '87d6940217d379777e26c578cff761dcfd96e79a', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
8497
8497
|
}
|
|
8498
8498
|
static get formAssociated() { return true; }
|
|
8499
8499
|
static get watchers() { return {
|
|
@@ -8541,7 +8541,7 @@ function debounce(func, wait) {
|
|
|
8541
8541
|
};
|
|
8542
8542
|
}
|
|
8543
8543
|
|
|
8544
|
-
const lmvzChipCss = () => `: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.
|
|
8544
|
+
const lmvzChipCss = () => `: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.4 Router); background-color: var(--lmvz-chip-background-color); color: var(--lmvz-chip-foreground-color); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); box-sizing: border-box; max-width: 100%; overflow: hidden; white-space: nowrap; > .content-overflow-wrapper { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } :host([size='small']) { padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.4 Router); gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } ::slotted(*) { display: inline; white-space: inherit; } ::slotted(lmvz-icon) { --lmvz-component-color: var(--lmvz-chip-foreground-color); --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #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); } `;
|
|
8545
8545
|
|
|
8546
8546
|
class LmvzChip extends ReactiveControllerHost {
|
|
8547
8547
|
ariaValidationController = new AriaValidationController(this);
|
|
@@ -8848,7 +8848,7 @@ class LmvzIcon extends ReactiveControllerHost {
|
|
|
8848
8848
|
}; }
|
|
8849
8849
|
}
|
|
8850
8850
|
|
|
8851
|
-
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
8851
|
+
const lmvzInputCss = () => `@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-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: 48px; --input-padding-x: 16px; --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-floating-scale: 0.85; --label-minimized-top: -6px; --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: 8px; } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); outline-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: 14px; font-family: Router, sans-serif; font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: normal; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0; transform: translateY(-50%) scale(0.85); transform-origin: left top; background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 500; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: 14px; outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--helper-text-color); font-family: Router, sans-serif; font-weight: 500; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--error-text-color); font-family: Router, sans-serif; font-weight: 500; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
|
|
8852
8852
|
|
|
8853
8853
|
let inputIdCounter = 0;
|
|
8854
8854
|
class LmvzInput extends ReactiveControllerHost {
|
|
@@ -9063,7 +9063,7 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
9063
9063
|
}; }
|
|
9064
9064
|
}
|
|
9065
9065
|
|
|
9066
|
-
const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
9066
|
+
const lmvzMenuitemCss = () => `@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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
|
|
9067
9067
|
|
|
9068
9068
|
class LmvzMenuItem extends ReactiveControllerHost {
|
|
9069
9069
|
get el() { return getElement(this); }
|
|
@@ -9102,9 +9102,9 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
9102
9102
|
}; }
|
|
9103
9103
|
}
|
|
9104
9104
|
|
|
9105
|
-
const closeSmSvg = 'data:image/svg+xml;base64,
|
|
9105
|
+
const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
|
|
9106
9106
|
|
|
9107
|
-
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
9107
|
+
const lmvzModalCss = () => ` @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; height: 100vh; width: 100vw; contain: layout size; } 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 { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-card-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-card-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-card-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .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 (max-width: 402px) { dialog { margin: 0; max-width: unset; max-height: unset; } .modal-shell { max-width: 100vw; border-radius: 0; height: 100%; } } .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); flex: 1; overflow: scroll; } `;
|
|
9108
9108
|
|
|
9109
9109
|
const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
|
|
9110
9110
|
let modalIdCounter = 0;
|
|
@@ -9328,7 +9328,7 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9328
9328
|
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
9329
9329
|
};
|
|
9330
9330
|
render() {
|
|
9331
|
-
return (hAsync(Host, { key: '
|
|
9331
|
+
return (hAsync(Host, { key: '1fbdbb1ab2d3ad423075465108d4ff807d07404e' }, hAsync("dialog", { key: '622dd60366ad594e16471cc8921c97d23af14ccb', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: 'bcdfbefbd5f380e2bf946aed479d542a33927af1', class: "modal-shell" }, hAsync("header", { key: 'dcd23467473d58b51bddaf613b3ac8c922eecdc6', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: 'b2aa21fda4a80d2ea003e6ec876c2b74df5d29fd', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: 'b7238e5b24c0822a94087d4ff0567e6406542c73', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: '5059671fb4d81c685becd3adb0be52dd92ec4dec', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '498447e60e0e33fc165f39cea35434080e869d3c', icon: closeIconSvg }))), hAsync("div", { key: '39ecefb52d5990cb689b0e4f18a8b6fc501c840d', class: "body" }, hAsync("slot", { key: 'b014d0633c28fb6b399f11f2323e102949548776' })), hAsync("footer", { key: '201dae98bcf810f369d77b7e9f36d7cc71ed5db4', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: 'e4559d383992e059f915670a0874cc3b9ef655a3', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: '88b007e139d4a166a2ee886dcd0256293d5d33c9', name: "actions" })))))));
|
|
9332
9332
|
}
|
|
9333
9333
|
static get watchers() { return {
|
|
9334
9334
|
"open": [{
|
|
@@ -9350,9 +9350,358 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9350
9350
|
}; }
|
|
9351
9351
|
}
|
|
9352
9352
|
|
|
9353
|
+
function groupKey(name, scope) {
|
|
9354
|
+
if (scope instanceof HTMLFormElement) {
|
|
9355
|
+
if (!scope.dataset['lmvzRadioGroupId']) {
|
|
9356
|
+
scope.dataset['lmvzRadioGroupId'] = String(Math.random());
|
|
9357
|
+
}
|
|
9358
|
+
return `${name}::form::${scope.dataset['lmvzRadioGroupId']}`;
|
|
9359
|
+
}
|
|
9360
|
+
return `${name}::document`;
|
|
9361
|
+
}
|
|
9362
|
+
function getScope(el) {
|
|
9363
|
+
return el.closest('form') ?? document;
|
|
9364
|
+
}
|
|
9365
|
+
function getNativeInput(host) {
|
|
9366
|
+
return host.el.shadowRoot?.querySelector('input') ?? host.el.querySelector('input') ?? null;
|
|
9367
|
+
}
|
|
9368
|
+
class RadioGroup {
|
|
9369
|
+
hosts = [];
|
|
9370
|
+
_focusedHost = null;
|
|
9371
|
+
_focusinHandler = (event) => {
|
|
9372
|
+
if (!this.hosts.some((h) => h.el.contains(event.target))) {
|
|
9373
|
+
this.clearFocused();
|
|
9374
|
+
}
|
|
9375
|
+
};
|
|
9376
|
+
register(host) {
|
|
9377
|
+
if (!this.hosts.includes(host)) {
|
|
9378
|
+
const wasEmpty = this.hosts.length === 0;
|
|
9379
|
+
this.hosts.push(host);
|
|
9380
|
+
this.sortHosts();
|
|
9381
|
+
if (wasEmpty) {
|
|
9382
|
+
document.addEventListener('focusin', this._focusinHandler, true);
|
|
9383
|
+
}
|
|
9384
|
+
}
|
|
9385
|
+
}
|
|
9386
|
+
unregister(host) {
|
|
9387
|
+
if (host === this._focusedHost) {
|
|
9388
|
+
this._focusedHost = null;
|
|
9389
|
+
}
|
|
9390
|
+
this.hosts = this.hosts.filter((h) => h !== host);
|
|
9391
|
+
if (this.hosts.length === 0) {
|
|
9392
|
+
document.removeEventListener('focusin', this._focusinHandler, true);
|
|
9393
|
+
}
|
|
9394
|
+
}
|
|
9395
|
+
get sortedEnabled() {
|
|
9396
|
+
return this.hosts.filter((h) => !h.disabled);
|
|
9397
|
+
}
|
|
9398
|
+
setFocused(host) {
|
|
9399
|
+
this._focusedHost = host;
|
|
9400
|
+
this.updateTabindex();
|
|
9401
|
+
host.focusInput();
|
|
9402
|
+
}
|
|
9403
|
+
clearFocused() {
|
|
9404
|
+
this._focusedHost = null;
|
|
9405
|
+
this.updateTabindex();
|
|
9406
|
+
}
|
|
9407
|
+
select(selectedHost) {
|
|
9408
|
+
this._focusedHost = null;
|
|
9409
|
+
for (const host of this.hosts) {
|
|
9410
|
+
host.checked = host === selectedHost;
|
|
9411
|
+
}
|
|
9412
|
+
this.updateTabindex();
|
|
9413
|
+
}
|
|
9414
|
+
updateTabindex() {
|
|
9415
|
+
const enabled = this.sortedEnabled;
|
|
9416
|
+
const checkedHost = this.hosts.find((h) => h.checked);
|
|
9417
|
+
let tabbableHost;
|
|
9418
|
+
if (this._focusedHost && enabled.includes(this._focusedHost)) {
|
|
9419
|
+
tabbableHost = this._focusedHost;
|
|
9420
|
+
}
|
|
9421
|
+
else {
|
|
9422
|
+
tabbableHost = checkedHost ?? enabled[0] ?? null;
|
|
9423
|
+
}
|
|
9424
|
+
for (const host of this.hosts) {
|
|
9425
|
+
const input = getNativeInput(host);
|
|
9426
|
+
if (input) {
|
|
9427
|
+
input.tabIndex = host === tabbableHost ? 0 : -1;
|
|
9428
|
+
}
|
|
9429
|
+
}
|
|
9430
|
+
}
|
|
9431
|
+
sortHosts() {
|
|
9432
|
+
this.hosts.sort((a, b) => {
|
|
9433
|
+
const pos = a.el.compareDocumentPosition(b.el);
|
|
9434
|
+
return pos & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
|
9435
|
+
});
|
|
9436
|
+
}
|
|
9437
|
+
}
|
|
9438
|
+
class RadioGroupController {
|
|
9439
|
+
host;
|
|
9440
|
+
static registry = new Map();
|
|
9441
|
+
group = null;
|
|
9442
|
+
_groupKey = null;
|
|
9443
|
+
_scope = null;
|
|
9444
|
+
constructor(host) {
|
|
9445
|
+
this.host = host;
|
|
9446
|
+
}
|
|
9447
|
+
hostConnected() {
|
|
9448
|
+
const { group, key, scope } = RadioGroupController.acquireGroup(this.host);
|
|
9449
|
+
this._groupKey = key;
|
|
9450
|
+
this._scope = scope;
|
|
9451
|
+
this.group = group;
|
|
9452
|
+
this.group.register(this.host);
|
|
9453
|
+
this.group.updateTabindex();
|
|
9454
|
+
}
|
|
9455
|
+
hostDidRender() {
|
|
9456
|
+
this.group?.updateTabindex();
|
|
9457
|
+
}
|
|
9458
|
+
hostDisconnected() {
|
|
9459
|
+
if (this.group) {
|
|
9460
|
+
this.group.unregister(this.host);
|
|
9461
|
+
this.group.updateTabindex();
|
|
9462
|
+
RadioGroupController.releaseGroup(this._groupKey, this._scope);
|
|
9463
|
+
this._groupKey = null;
|
|
9464
|
+
this._scope = null;
|
|
9465
|
+
this.group = null;
|
|
9466
|
+
}
|
|
9467
|
+
}
|
|
9468
|
+
get sortedEnabled() {
|
|
9469
|
+
return this.group?.sortedEnabled ?? [];
|
|
9470
|
+
}
|
|
9471
|
+
select(selectedHost) {
|
|
9472
|
+
this.group?.select(selectedHost);
|
|
9473
|
+
}
|
|
9474
|
+
setFocused(host) {
|
|
9475
|
+
this.group?.setFocused(host);
|
|
9476
|
+
}
|
|
9477
|
+
clearFocused() {
|
|
9478
|
+
this.group?.clearFocused();
|
|
9479
|
+
}
|
|
9480
|
+
updateTabindex() {
|
|
9481
|
+
this.group?.updateTabindex();
|
|
9482
|
+
}
|
|
9483
|
+
static acquireGroup(host) {
|
|
9484
|
+
const name = host.name;
|
|
9485
|
+
if (!name) {
|
|
9486
|
+
return { group: new RadioGroup(), key: null, scope: null };
|
|
9487
|
+
}
|
|
9488
|
+
const scope = getScope(host.el);
|
|
9489
|
+
const key = groupKey(name, scope);
|
|
9490
|
+
let entry = RadioGroupController.registry.get(key);
|
|
9491
|
+
if (!entry) {
|
|
9492
|
+
entry = { group: new RadioGroup(), refCount: 0 };
|
|
9493
|
+
RadioGroupController.registry.set(key, entry);
|
|
9494
|
+
}
|
|
9495
|
+
entry.refCount++;
|
|
9496
|
+
return { group: entry.group, key, scope };
|
|
9497
|
+
}
|
|
9498
|
+
static releaseGroup(key, scope) {
|
|
9499
|
+
if (!key)
|
|
9500
|
+
return;
|
|
9501
|
+
const entry = RadioGroupController.registry.get(key);
|
|
9502
|
+
if (!entry)
|
|
9503
|
+
return;
|
|
9504
|
+
entry.refCount--;
|
|
9505
|
+
if (entry.refCount <= 0) {
|
|
9506
|
+
RadioGroupController.registry.delete(key);
|
|
9507
|
+
if (scope instanceof HTMLFormElement) {
|
|
9508
|
+
scope.removeAttribute('data-lmvz-radio-group-id');
|
|
9509
|
+
}
|
|
9510
|
+
}
|
|
9511
|
+
}
|
|
9512
|
+
}
|
|
9513
|
+
|
|
9514
|
+
const lmvzRadioCss = () => `@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-radio-h { display: inline-block; --radio-circle-size: var(--lmvz-global-s18, 18px); --radio-dot-size: 0.5rem; --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454); --radio-easing: var(--lmvz-global-easing-default, ease); --radio-duration: 0.2s; display: flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: clip; cursor: pointer; background-color: transparent; position: relative; transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio { position: absolute; inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); opacity: 0; width: var(--radio-circle-size); height: var(--radio-circle-size); margin: 0; cursor: pointer; z-index: 1; } .circle.sc-lmvz-radio { width: var(--radio-circle-size); height: var(--radio-circle-size); border-radius: 50%; border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color); background-color: var(--radio-bg); pointer-events: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio { width: var(--radio-dot-size); height: var(--radio-dot-size); border-radius: 50%; background-color: var(--radio-dot-color); } .content.sc-lmvz-radio { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-radio { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--radio-label-color); cursor: pointer; transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio { display: block; font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 Router); color: var(--radio-helper-color); margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty { display: none; } @media (hover: hover) { .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio { border-color: var(--radio-border-color-hover); } .sc-lmvz-radio-h:hover { background-color: var(--radio-wrapper-bg-hover); } } .sc-lmvz-radio-h:active { background-color: var(--radio-wrapper-bg-active); } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio { color: var(--radio-label-color-checked); } [error].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio { color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } [disabled].sc-lmvz-radio-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } @media (forced-colors: active) { .circle.sc-lmvz-radio { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: Highlight; } .dot.sc-lmvz-radio { background-color: ButtonText; } [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio { background-color: HighlightText; } }`;
|
|
9515
|
+
|
|
9516
|
+
const focusWithinCss$1 = () => `.sc-lmvz-radio-h:focus-within{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){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
9517
|
+
|
|
9518
|
+
let radioIdCounter = 0;
|
|
9519
|
+
class LmvzRadio extends ReactiveControllerHost {
|
|
9520
|
+
get el() { return getElement(this); }
|
|
9521
|
+
get validationEl() {
|
|
9522
|
+
return this.el;
|
|
9523
|
+
}
|
|
9524
|
+
internals;
|
|
9525
|
+
nativeInput;
|
|
9526
|
+
radioId = `lmvz-radio-${radioIdCounter++}`;
|
|
9527
|
+
initialChecked = false;
|
|
9528
|
+
radioGroupController;
|
|
9529
|
+
get helperId() {
|
|
9530
|
+
return this.helperText ? `${this.radioId}-helper` : undefined;
|
|
9531
|
+
}
|
|
9532
|
+
label;
|
|
9533
|
+
checked = false;
|
|
9534
|
+
value = 'on';
|
|
9535
|
+
name;
|
|
9536
|
+
disabled = false;
|
|
9537
|
+
required = false;
|
|
9538
|
+
error = false;
|
|
9539
|
+
helperText;
|
|
9540
|
+
form;
|
|
9541
|
+
autofocus = false;
|
|
9542
|
+
_handlingNativeChange = false;
|
|
9543
|
+
_handlingFormReset = false;
|
|
9544
|
+
handleCheckedChange(newVal, oldVal) {
|
|
9545
|
+
this.internals.setFormValue?.(newVal ? this.value : null);
|
|
9546
|
+
if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
|
|
9547
|
+
this.lmvzChange.emit(false);
|
|
9548
|
+
}
|
|
9549
|
+
if (newVal && !oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
|
|
9550
|
+
this.lmvzChange.emit(true);
|
|
9551
|
+
}
|
|
9552
|
+
}
|
|
9553
|
+
handleValueChange(newVal) {
|
|
9554
|
+
if (this.checked) {
|
|
9555
|
+
this.internals.setFormValue?.(newVal);
|
|
9556
|
+
}
|
|
9557
|
+
}
|
|
9558
|
+
handleLabelChange(newVal) {
|
|
9559
|
+
if (!newVal) {
|
|
9560
|
+
console.warn('[lmvz-radio] label prop is required and must not be empty');
|
|
9561
|
+
}
|
|
9562
|
+
}
|
|
9563
|
+
lmvzChange;
|
|
9564
|
+
lmvzActivation;
|
|
9565
|
+
async focusInput() {
|
|
9566
|
+
this.nativeInput?.focus();
|
|
9567
|
+
}
|
|
9568
|
+
async checkValidity() {
|
|
9569
|
+
return this.internals?.checkValidity() ?? true;
|
|
9570
|
+
}
|
|
9571
|
+
async reportValidity() {
|
|
9572
|
+
return this.internals?.reportValidity() ?? true;
|
|
9573
|
+
}
|
|
9574
|
+
constructor(hostRef) {
|
|
9575
|
+
super();
|
|
9576
|
+
registerInstance(this, hostRef);
|
|
9577
|
+
this.lmvzChange = createEvent(this, "lmvzChange", 7);
|
|
9578
|
+
this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
|
|
9579
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
9580
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
9581
|
+
}
|
|
9582
|
+
else {
|
|
9583
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
9584
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
9585
|
+
}
|
|
9586
|
+
this.addController(new AriaValidationController(this, {
|
|
9587
|
+
reValidateOnPropChanges: true,
|
|
9588
|
+
}));
|
|
9589
|
+
this.radioGroupController = new RadioGroupController(this);
|
|
9590
|
+
this.addController(this.radioGroupController);
|
|
9591
|
+
}
|
|
9592
|
+
componentWillLoad() {
|
|
9593
|
+
this.initialChecked = this.checked;
|
|
9594
|
+
this.internals.setFormValue?.(this.checked ? this.value : null);
|
|
9595
|
+
super.componentWillLoad();
|
|
9596
|
+
}
|
|
9597
|
+
formAssociatedCallback() {
|
|
9598
|
+
this.internals.setFormValue?.(this.checked ? this.value : null);
|
|
9599
|
+
}
|
|
9600
|
+
formResetCallback() {
|
|
9601
|
+
this._handlingFormReset = true;
|
|
9602
|
+
try {
|
|
9603
|
+
this.checked = this.initialChecked;
|
|
9604
|
+
}
|
|
9605
|
+
finally {
|
|
9606
|
+
this._handlingFormReset = false;
|
|
9607
|
+
}
|
|
9608
|
+
}
|
|
9609
|
+
formStateRestoreCallback(state) {
|
|
9610
|
+
if (typeof state !== 'string')
|
|
9611
|
+
return;
|
|
9612
|
+
this._handlingFormReset = true;
|
|
9613
|
+
try {
|
|
9614
|
+
this.checked = state === this.value;
|
|
9615
|
+
}
|
|
9616
|
+
finally {
|
|
9617
|
+
this._handlingFormReset = false;
|
|
9618
|
+
}
|
|
9619
|
+
}
|
|
9620
|
+
handleChange = (event) => {
|
|
9621
|
+
this._handlingNativeChange = true;
|
|
9622
|
+
try {
|
|
9623
|
+
const input = event.target;
|
|
9624
|
+
this.checked = input.checked;
|
|
9625
|
+
this.lmvzChange.emit(this.checked);
|
|
9626
|
+
this.radioGroupController.select(this);
|
|
9627
|
+
this.lmvzActivation.emit();
|
|
9628
|
+
}
|
|
9629
|
+
finally {
|
|
9630
|
+
this._handlingNativeChange = false;
|
|
9631
|
+
}
|
|
9632
|
+
};
|
|
9633
|
+
handleKeydown(event) {
|
|
9634
|
+
const { key } = event;
|
|
9635
|
+
if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'].includes(key))
|
|
9636
|
+
return;
|
|
9637
|
+
event.preventDefault();
|
|
9638
|
+
const radios = this.radioGroupController.sortedEnabled;
|
|
9639
|
+
if (radios.length === 0)
|
|
9640
|
+
return;
|
|
9641
|
+
const currentIndex = radios.indexOf(this);
|
|
9642
|
+
if (currentIndex === -1)
|
|
9643
|
+
return;
|
|
9644
|
+
let targetIndex;
|
|
9645
|
+
if (key === 'ArrowDown' || key === 'ArrowRight') {
|
|
9646
|
+
targetIndex = (currentIndex + 1) % radios.length;
|
|
9647
|
+
}
|
|
9648
|
+
else if (key === 'ArrowUp' || key === 'ArrowLeft') {
|
|
9649
|
+
targetIndex = (currentIndex - 1 + radios.length) % radios.length;
|
|
9650
|
+
}
|
|
9651
|
+
else if (key === 'Home') {
|
|
9652
|
+
targetIndex = 0;
|
|
9653
|
+
}
|
|
9654
|
+
else {
|
|
9655
|
+
targetIndex = radios.length - 1;
|
|
9656
|
+
}
|
|
9657
|
+
const target = radios[targetIndex];
|
|
9658
|
+
if (!target)
|
|
9659
|
+
return;
|
|
9660
|
+
this.radioGroupController.setFocused(target);
|
|
9661
|
+
}
|
|
9662
|
+
render() {
|
|
9663
|
+
return (hAsync(Host, { key: '0226e313fcf4fe3c3cf343cfe0776cf71da169a6' }, hAsync("input", { key: '5bb1f733d2f29217bc7544d8fd24f6b21bedc654', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: 'ae18f49167d1a2e8e6ec4ceca435e69e3d79f593', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '5dfb65105831a672f2a47952aff987cd45e9b178', class: "dot" })), hAsync("span", { key: 'df148ca52be7e580226d94ff9aef4e3cf5a6182c', class: "content" }, hAsync("label", { key: 'e042c57755eadb64692ace49204dccb1ee03ed1c', htmlFor: this.radioId }, this.label), hAsync("span", { key: 'a90b0bef927dddb39f9e6357adf888e0818a3c5a', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
|
|
9664
|
+
}
|
|
9665
|
+
static get formAssociated() { return true; }
|
|
9666
|
+
static get watchers() { return {
|
|
9667
|
+
"checked": [{
|
|
9668
|
+
"handleCheckedChange": 0
|
|
9669
|
+
}],
|
|
9670
|
+
"value": [{
|
|
9671
|
+
"handleValueChange": 0
|
|
9672
|
+
}],
|
|
9673
|
+
"label": [{
|
|
9674
|
+
"handleLabelChange": 0
|
|
9675
|
+
}]
|
|
9676
|
+
}; }
|
|
9677
|
+
static get style() { return lmvzRadioCss() + focusWithinCss$1(); }
|
|
9678
|
+
static get cmpMeta() { return {
|
|
9679
|
+
"$flags$": 578,
|
|
9680
|
+
"$tagName$": "lmvz-radio",
|
|
9681
|
+
"$members$": {
|
|
9682
|
+
"label": [1],
|
|
9683
|
+
"checked": [1540],
|
|
9684
|
+
"value": [1],
|
|
9685
|
+
"name": [1],
|
|
9686
|
+
"disabled": [516],
|
|
9687
|
+
"required": [516],
|
|
9688
|
+
"error": [516],
|
|
9689
|
+
"helperText": [1, "helper-text"],
|
|
9690
|
+
"form": [513],
|
|
9691
|
+
"autofocus": [4],
|
|
9692
|
+
"focusInput": [64],
|
|
9693
|
+
"checkValidity": [64],
|
|
9694
|
+
"reportValidity": [64]
|
|
9695
|
+
},
|
|
9696
|
+
"$listeners$": [[0, "keydown", "handleKeydown"]],
|
|
9697
|
+
"$lazyBundleId$": "-",
|
|
9698
|
+
"$attrsToReflect$": [["checked", "checked"], ["disabled", "disabled"], ["required", "required"], ["error", "error"], ["form", "form"]]
|
|
9699
|
+
}; }
|
|
9700
|
+
}
|
|
9701
|
+
|
|
9353
9702
|
const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
|
|
9354
9703
|
|
|
9355
|
-
const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
9704
|
+
const lmvzSelectCss = () => `@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-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-select-height: 40px; --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem); --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1); --lmvz-select-label-minimized-padding-x: 4px; --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); cursor: pointer; position: relative; z-index: 1; transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select { background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem); font-weight: var(--lmvz-global-font-weight-500, 500); color: var(--lmvz-select-text-color); line-height: 1.4; letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } img.sc-lmvz-select { display: block; width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } select.sc-lmvz-select { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; border: none; background: transparent; margin: 0; padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { margin-top: 4px; padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; }`;
|
|
9356
9705
|
|
|
9357
9706
|
let selectIdCounter = 0;
|
|
9358
9707
|
class LmvzSelect extends ReactiveControllerHost {
|
|
@@ -9404,7 +9753,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
9404
9753
|
render() {
|
|
9405
9754
|
const hasValue = this.hasValue;
|
|
9406
9755
|
const shouldShowLabel = hasValue;
|
|
9407
|
-
return (hAsync(Host, { key: '
|
|
9756
|
+
return (hAsync(Host, { key: '597245455ffb9b5f83472a7970fb1c6c92017fd2' }, hAsync("div", { key: 'edeb4d02d5a5291e60fd2d26d16edc500a355b63', class: "select-wrapper" }, hAsync("label", { key: 'd0068817bb3586467d73284cecc03de393c37589', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '624ee28842aed8c01651c7758099bccc446840d6', "aria-hidden": "true" }, " *")), hAsync("div", { key: '184591bc8ac11e9eed17795ce21319591e6d4211', "aria-hidden": "true" }, hAsync("span", { key: '53e673521ed26125c24fb529d6016e3827b47a44' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '7af1a756e3343701ad066f3c107b2028126c5f09', "aria-hidden": "true" }, " *")), hAsync("span", { key: '6210f2069758f8579f67780530fd294210875b3f' }, hAsync("img", { key: '05aa6cf110ba0c7eacd36f59525144c61f0705d9', src: chevronDownSvg, alt: "" }))), hAsync("select", { key: 'dc9dfe93226858f73f1d5a655388b9ce3a5e4037', 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 && hAsync("option", { key: '38ffb95d089932d0ce0c6a5629004679d3f7f857', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '51b96884bb010b0a93f24b8b2f3f91a7b040e220' }))), this.helperText && hAsync("div", { key: 'f7149a48024e87d2a3843d96674e45cb91fd9cf4', role: "status" }, this.helperText)));
|
|
9408
9757
|
}
|
|
9409
9758
|
static get watchers() { return {
|
|
9410
9759
|
"value": [{
|
|
@@ -9430,7 +9779,9 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
9430
9779
|
}; }
|
|
9431
9780
|
}
|
|
9432
9781
|
|
|
9433
|
-
const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
9782
|
+
const lmvzToggleCss = () => `@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.75rem, 0.69rem + 0.26vw, 1rem)); 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, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [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; } .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, #545454); 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; }`;
|
|
9783
|
+
|
|
9784
|
+
const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{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){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
9434
9785
|
|
|
9435
9786
|
let toggleIdCounter = 0;
|
|
9436
9787
|
class LmvzToggle extends ReactiveControllerHost {
|
|
@@ -9504,7 +9855,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
9504
9855
|
this.lmvzChange.emit(newChecked);
|
|
9505
9856
|
};
|
|
9506
9857
|
render() {
|
|
9507
|
-
return (hAsync(Host, { key: '
|
|
9858
|
+
return (hAsync(Host, { key: '4bb633301740c3e69a836615e2266242980ac17a' }, hAsync("span", { key: 'cc7188d8e2caff2968ad6c64c72565a71c89ec74', class: "track" }, hAsync("input", { key: '867f7865711b9224b89f0f491df8a19589342729', 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 }), hAsync("span", { key: '426ee9f042afcc3d74b2137d2edbe95573b3c136', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '600cb22f2915d86edafa9ac57b77707055f6ae16', htmlFor: this.toggleId }, this.label)));
|
|
9508
9859
|
}
|
|
9509
9860
|
static get formAssociated() { return true; }
|
|
9510
9861
|
static get watchers() { return {
|
|
@@ -9515,7 +9866,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
9515
9866
|
"handleDisabledChange": 0
|
|
9516
9867
|
}]
|
|
9517
9868
|
}; }
|
|
9518
|
-
static get style() { return lmvzToggleCss(); }
|
|
9869
|
+
static get style() { return lmvzToggleCss() + focusWithinCss(); }
|
|
9519
9870
|
static get cmpMeta() { return {
|
|
9520
9871
|
"$flags$": 578,
|
|
9521
9872
|
"$tagName$": "lmvz-toggle",
|
|
@@ -9551,6 +9902,7 @@ registerComponents([
|
|
|
9551
9902
|
LmvzInput,
|
|
9552
9903
|
LmvzMenuItem,
|
|
9553
9904
|
LmvzModal,
|
|
9905
|
+
LmvzRadio,
|
|
9554
9906
|
LmvzSelect,
|
|
9555
9907
|
LmvzToggle,
|
|
9556
9908
|
]);
|
|
@@ -9654,7 +10006,7 @@ var NAMESPACE = (
|
|
|
9654
10006
|
);
|
|
9655
10007
|
|
|
9656
10008
|
/*
|
|
9657
|
-
Stencil Hydrate Runner v4.43.
|
|
10009
|
+
Stencil Hydrate Runner v4.43.5 | MIT Licensed | https://stenciljs.com
|
|
9658
10010
|
*/
|
|
9659
10011
|
var __create = Object.create;
|
|
9660
10012
|
var __defProp = Object.defineProperty;
|