@lmvz-ds/components 0.22.1 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/cjs/{aria-loader-Cec1zR2g.js → aria-loader-BRo2FTGh.js} +1 -0
- package/cjs/index.cjs.js +1 -1
- package/cjs/lmvz-button_3.cjs.entry.js +375 -0
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +4 -4
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +5 -5
- package/cjs/lmvz-menuitem.cjs.entry.js +4 -4
- package/cjs/lmvz-modal.cjs.entry.js +6 -109
- package/cjs/lmvz-select.cjs.entry.js +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +4 -4
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{reactive-controller-host-DnSTWHCF.js → reactive-controller-host-BOFg4vL-.js} +1 -1
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-button/lmvz-button.css +60 -41
- package/collection/components/lmvz-button/lmvz-button.js +6 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +14 -0
- package/collection/components/lmvz-button-group/lmvz-button-group.js +216 -0
- package/collection/components/lmvz-card/lmvz-card.css +59 -40
- package/collection/components/lmvz-card/lmvz-card.js +1 -1
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +12 -8
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +1 -1
- package/collection/components/lmvz-header/lmvz-header.js +1 -1
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-input/lmvz-input.css +12 -8
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +12 -8
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +36 -38
- package/collection/components/lmvz-modal/lmvz-modal.js +4 -108
- package/collection/components/lmvz-select/lmvz-select.css +12 -8
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +12 -8
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-button-group.d.ts +11 -0
- package/components/lmvz-button-group.d.ts.bak +11 -0
- package/components/lmvz-button-group.js +1 -0
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-CcnyKhAw.js +1 -0
- package/components/p-CdDO7mQa.js +1 -0
- package/components/p-Cg2XX_J-.js +1 -0
- package/components/p-DSvYtVoD.js +1 -0
- package/components/p-slgmfnHm.js +1 -0
- package/esm/{aria-loader-BVolm0lC.js → aria-loader-GfsGHZHY.js} +1 -1
- package/esm/index.js +1 -1
- package/esm/lmvz-button_3.entry.js +371 -0
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +4 -4
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +5 -5
- package/esm/lmvz-menuitem.entry.js +4 -4
- package/esm/lmvz-modal.entry.js +6 -109
- package/esm/lmvz-select.entry.js +4 -4
- package/esm/lmvz-toggle.entry.js +4 -4
- package/esm/loader.js +1 -1
- package/esm/{reactive-controller-host-lF2kXM1x.js → reactive-controller-host-CroMsXdS.js} +1 -1
- package/hydrate/index.js +273 -189
- package/hydrate/index.mjs +273 -189
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-2824a56b.entry.js +1 -0
- package/lmvz-components/p-4263c9b2.entry.js +1 -0
- package/lmvz-components/p-4f5c3c4a.entry.js +1 -0
- package/lmvz-components/p-6f8cbc4f.entry.js +1 -0
- package/lmvz-components/p-88adb9fa.entry.js +1 -0
- package/lmvz-components/{p-DCTzMRMQ.js → p-BRl6zKXT.js} +1 -1
- package/lmvz-components/p-CdDO7mQa.js +1 -0
- package/lmvz-components/p-a7c3074a.entry.js +1 -0
- package/lmvz-components/p-b3b04d46.entry.js +1 -0
- package/lmvz-components/p-d1dacf7e.entry.js +1 -0
- package/lmvz-components/{p-d984e118.entry.js → p-f6d1d9df.entry.js} +1 -1
- package/lmvz-components/p-fefefc54.entry.js +1 -0
- package/manifest.json +111 -12
- package/package.json +5 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +1 -1
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +20 -0
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -16
- package/types/components.d.ts +27 -3
- package/cjs/lmvz-button_2.cjs.entry.js +0 -198
- package/components/p-Boj0PCdB.js +0 -1
- package/components/p-Cc6dOWwS.js +0 -1
- package/components/p-DBc1BzQb.js +0 -1
- package/esm/lmvz-button_2.entry.js +0 -195
- package/lmvz-components/p-08a08b63.entry.js +0 -1
- package/lmvz-components/p-1b181e90.entry.js +0 -1
- package/lmvz-components/p-23fb2476.entry.js +0 -1
- package/lmvz-components/p-6bb145e4.entry.js +0 -1
- package/lmvz-components/p-7a310b1e.entry.js +0 -1
- package/lmvz-components/p-b7940687.entry.js +0 -1
- package/lmvz-components/p-db8306a5.entry.js +0 -1
- package/lmvz-components/p-dhVSUYqd.js +0 -1
- package/lmvz-components/p-ea335543.entry.js +0 -1
- package/lmvz-components/p-f8ea0eb2.entry.js +0 -1
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
4
|
var index$1 = require('./index-Bp6Dd2i1.js');
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
6
6
|
var component = require('./component-C7cavwmZ.js');
|
|
7
|
-
require('./aria-loader-
|
|
7
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
8
8
|
|
|
9
|
-
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
9
|
+
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, #7a7a7a); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-floating-scale: 0.85; --label-minimized-top: -6px; --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: 8px; } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: 2px solid var(--input-border-color-focus); outline-offset: 2px; } .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input { box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); outline-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: 14px; font-family: Router, sans-serif; font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: normal; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0; transform: translateY(-50%) scale(0.85); transform-origin: left top; background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 500; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: 14px; outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--helper-text-color); font-family: Router, sans-serif; font-weight: 500; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: 12px; font-size: 12px; color: var(--error-text-color); font-family: Router, sans-serif; font-weight: 500; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
|
|
10
10
|
|
|
11
11
|
let inputIdCounter = 0;
|
|
12
12
|
const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
@@ -164,9 +164,9 @@ const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
164
164
|
render() {
|
|
165
165
|
const hasValue = Boolean(this.value);
|
|
166
166
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
167
|
-
return (index.h("div", { key: '
|
|
167
|
+
return (index.h("div", { key: 'b8c3aaccafb89725aaa157a72633c67ae8b4d58c', class: index$1.classNames('input-container', {
|
|
168
168
|
'interaction-filled': hasValue,
|
|
169
|
-
}) }, index.h("div", { key: '
|
|
169
|
+
}) }, index.h("div", { key: '80261c486d3bfe61aa060d50e9a6774c961339a1', class: "input-wrapper" }, index.h("slot", { key: '6856dd64991251adc63d8064ed63e9cf7b1773a2', name: "before-input" }), index.h("div", { key: 'c975357079efef465c56fb50cbb404bd1cbe3fb1', class: "label-input-group" }, index.h("label", { key: '798417172f8411be97866edbffbd2bb98c308c69', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: '9fd59f3d93c984304e6c8ae6531df82bc0057243', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: 'a4e1133b4891c01044365eb3c97ee234c84c9bac', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("slot", { key: 'c774f03e704889b524f305c00d60c0902abdff5f', name: "after-input" })), index.h("div", { key: 'f513746541c71ce0d67c26eb220b54408fc3f136', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '197683e55807bf100ca1543f5b84b14e910e721f', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
170
170
|
}
|
|
171
171
|
static get formAssociated() { return true; }
|
|
172
172
|
static get watchers() { return {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
5
5
|
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
6
|
-
require('./aria-loader-
|
|
6
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
7
7
|
|
|
8
|
-
const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
8
|
+
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, #545454); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f1f9fe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
|
|
9
9
|
|
|
10
10
|
const LmvzMenuItem = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
11
11
|
get el() { return index.getElement(this); }
|
|
@@ -28,7 +28,7 @@ const LmvzMenuItem = class extends reactiveControllerHost.ReactiveControllerHost
|
|
|
28
28
|
this.addController(new elementActivationController.ElementActivationController(this));
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (index.h(index.Host, { key: '
|
|
31
|
+
return (index.h(index.Host, { key: '3a722fe1fbacabd99ac5a5bd23537a1ff383fb95' }, index.h("slot", { key: 'e475dd50bbd2f9f349edb61766a0b21c1fb1ae16', ref: (e) => (this.validationSlot = e) })));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
LmvzMenuItem.style = lmvzMenuitemCss();
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
4
|
var svg = require('./svg-BMBduILB.js');
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
6
6
|
var component = require('./component-C7cavwmZ.js');
|
|
7
|
-
var ariaLoader = require('./aria-loader-Cec1zR2g.js');
|
|
8
7
|
require('./logger-DsM6xg6V.js');
|
|
8
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
9
9
|
|
|
10
10
|
const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
|
|
11
11
|
|
|
12
|
-
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
12
|
+
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; } 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); } `;
|
|
13
13
|
|
|
14
14
|
const closeIconSvg = svg.toValidSvgStringWithFallback(closeSmSvg);
|
|
15
15
|
let modalIdCounter = 0;
|
|
@@ -18,16 +18,13 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
18
18
|
inheritedAriaAttributes = {};
|
|
19
19
|
dialogEl;
|
|
20
20
|
dialogStateObserver;
|
|
21
|
-
actionsStateObserver;
|
|
22
21
|
headerSlot;
|
|
23
|
-
|
|
22
|
+
buttonGroupEl;
|
|
24
23
|
closeButtonEl;
|
|
25
24
|
previouslyFocusedElement = null;
|
|
26
25
|
wrappedDialogShowModal;
|
|
27
|
-
lastActionValidationMessage;
|
|
28
26
|
pendingCloseReturnValue;
|
|
29
27
|
dialogTitleId = `lmvz-modal-title-${modalIdCounter++}`;
|
|
30
|
-
hasActions = false;
|
|
31
28
|
hasHeader = false;
|
|
32
29
|
open = false;
|
|
33
30
|
closeLabel = 'Schliessen';
|
|
@@ -39,9 +36,6 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
39
36
|
get validationEl() {
|
|
40
37
|
return this.dialogEl ?? this.el;
|
|
41
38
|
}
|
|
42
|
-
get validationSlot() {
|
|
43
|
-
return this.actionsSlot;
|
|
44
|
-
}
|
|
45
39
|
constructor(hostRef) {
|
|
46
40
|
super();
|
|
47
41
|
index.registerInstance(this, hostRef);
|
|
@@ -72,13 +66,11 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
72
66
|
}
|
|
73
67
|
componentDidLoad() {
|
|
74
68
|
this.handleHeaderSlotChange();
|
|
75
|
-
this.handleActionsSlotChange();
|
|
76
69
|
this.observeDialogState();
|
|
77
70
|
this.syncDialogVisibility();
|
|
78
71
|
super.componentDidLoad();
|
|
79
72
|
}
|
|
80
73
|
disconnectedCallback() {
|
|
81
|
-
this.actionsStateObserver?.disconnect();
|
|
82
74
|
this.dialogStateObserver?.disconnect();
|
|
83
75
|
super.disconnectedCallback();
|
|
84
76
|
}
|
|
@@ -110,43 +102,6 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
110
102
|
}
|
|
111
103
|
return attributes;
|
|
112
104
|
}
|
|
113
|
-
get actionButtons() {
|
|
114
|
-
return (this.actionsSlot?.assignedElements({ flatten: true }) ?? []).filter((element) => {
|
|
115
|
-
return this.isVisibleActionButton(element);
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
get enabledActionButtons() {
|
|
119
|
-
return this.actionButtons.filter((element) => {
|
|
120
|
-
return !this.isDisabledActionButton(element);
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
get assignedActionElements() {
|
|
124
|
-
return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
|
|
125
|
-
}
|
|
126
|
-
isDisabledActionButton(element) {
|
|
127
|
-
return element.hasAttribute('disabled') || element.disabled === true;
|
|
128
|
-
}
|
|
129
|
-
getActionVariant(element) {
|
|
130
|
-
const variant = element.getAttribute('variant') ?? element.variant;
|
|
131
|
-
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
132
|
-
}
|
|
133
|
-
getActionValidationResult() {
|
|
134
|
-
if (!this.actionButtons.length) {
|
|
135
|
-
return {};
|
|
136
|
-
}
|
|
137
|
-
const primaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'primary');
|
|
138
|
-
const secondaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'secondary');
|
|
139
|
-
const issues = [
|
|
140
|
-
primaryActions.length !== 1 ? `${primaryActions.length} primary action${primaryActions.length === 1 ? '' : 's'}` : undefined,
|
|
141
|
-
secondaryActions.length > 1 ? `${secondaryActions.length} secondary actions` : undefined,
|
|
142
|
-
].filter((issue) => Boolean(issue));
|
|
143
|
-
return {
|
|
144
|
-
errorMessage: issues.length
|
|
145
|
-
? `LmvzModal actions slot must contain exactly one primary action, at most one secondary action, and optional tertiary actions. Received ${issues.join(' and ')}.`
|
|
146
|
-
: undefined,
|
|
147
|
-
primaryAction: primaryActions[0],
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
105
|
hasAssignedContent(slot) {
|
|
151
106
|
return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => {
|
|
152
107
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
@@ -173,9 +128,6 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
173
128
|
attributeFilter: ['open'],
|
|
174
129
|
});
|
|
175
130
|
}
|
|
176
|
-
isVisibleActionButton(element) {
|
|
177
|
-
return element.tagName === 'LMVZ-BUTTON' && !element.hasAttribute('hidden');
|
|
178
|
-
}
|
|
179
131
|
capturePreviouslyFocusedElement() {
|
|
180
132
|
const dialog = this.dialogEl;
|
|
181
133
|
const activeElement = component.getDeepActiveElement(document);
|
|
@@ -228,10 +180,7 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
228
180
|
}
|
|
229
181
|
}
|
|
230
182
|
focusPrimaryAction() {
|
|
231
|
-
const
|
|
232
|
-
return this.getActionVariant(element) === 'primary';
|
|
233
|
-
}) ?? this.enabledActionButtons[0];
|
|
234
|
-
const focusTarget = primaryAction ?? this.closeButtonEl;
|
|
183
|
+
const focusTarget = this.buttonGroupEl?.primaryEnabledAction ?? this.closeButtonEl;
|
|
235
184
|
if (!focusTarget || typeof window === 'undefined')
|
|
236
185
|
return;
|
|
237
186
|
window.requestAnimationFrame(() => {
|
|
@@ -283,60 +232,8 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
283
232
|
handleHeaderSlotChange = () => {
|
|
284
233
|
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
285
234
|
};
|
|
286
|
-
observeActionState() {
|
|
287
|
-
if (typeof MutationObserver === 'undefined')
|
|
288
|
-
return;
|
|
289
|
-
this.actionsStateObserver?.disconnect();
|
|
290
|
-
if (!this.assignedActionElements.length)
|
|
291
|
-
return;
|
|
292
|
-
this.actionsStateObserver = new MutationObserver(() => {
|
|
293
|
-
this.syncActionsState();
|
|
294
|
-
});
|
|
295
|
-
this.assignedActionElements.forEach((element) => {
|
|
296
|
-
this.actionsStateObserver?.observe(element, {
|
|
297
|
-
attributes: true,
|
|
298
|
-
attributeFilter: ['disabled', 'hidden', 'variant'],
|
|
299
|
-
});
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
syncActionsState() {
|
|
303
|
-
const assignedElements = this.assignedActionElements;
|
|
304
|
-
assignedElements.forEach((element) => {
|
|
305
|
-
const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
306
|
-
if (isAllowedAction)
|
|
307
|
-
return;
|
|
308
|
-
if (!element.hasAttribute('hidden')) {
|
|
309
|
-
element.setAttribute('hidden', '');
|
|
310
|
-
}
|
|
311
|
-
if (element.getAttribute('aria-hidden') !== 'true') {
|
|
312
|
-
element.setAttribute('aria-hidden', 'true');
|
|
313
|
-
}
|
|
314
|
-
});
|
|
315
|
-
this.hasActions = assignedElements.some((element) => this.isVisibleActionButton(element));
|
|
316
|
-
this.checkActions();
|
|
317
|
-
if (this.open) {
|
|
318
|
-
this.focusPrimaryAction();
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
handleActionsSlotChange = () => {
|
|
322
|
-
this.syncActionsState();
|
|
323
|
-
this.observeActionState();
|
|
324
|
-
};
|
|
325
|
-
checkActions() {
|
|
326
|
-
if (!ariaLoader.isAriaValidationEnabled())
|
|
327
|
-
return;
|
|
328
|
-
const { errorMessage } = this.getActionValidationResult();
|
|
329
|
-
if (!errorMessage) {
|
|
330
|
-
this.lastActionValidationMessage = undefined;
|
|
331
|
-
return;
|
|
332
|
-
}
|
|
333
|
-
if (this.lastActionValidationMessage === errorMessage)
|
|
334
|
-
return;
|
|
335
|
-
console.error(errorMessage);
|
|
336
|
-
this.lastActionValidationMessage = errorMessage;
|
|
337
|
-
}
|
|
338
235
|
render() {
|
|
339
|
-
return (index.h(index.Host, { key: '
|
|
236
|
+
return (index.h(index.Host, { key: 'f014c692b82fae6dd96dffdbda4043aa9174004f' }, index.h("dialog", { key: '8939eda4aba44f1b6c9e8983cacddba83f668692', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, index.h("div", { key: '93f43c5f7c258494c86f9604b7eeac0046f912d6', class: "modal-shell" }, index.h("header", { key: '2e8177a5e0812007fede430533e6a0aa9b7bc0ea', class: { header: true, 'has-title': this.hasHeader } }, index.h("div", { key: 'fb4b537386077b837758f4b61c45433ad6c747cc', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, index.h("slot", { key: '2507b2b7af3b18e859e87b7d682bdf189c4df53d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), index.h("lmvz-button", { key: '5e4bcd8771babae9a9dc34fc908eb9210639a497', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, index.h("lmvz-icon", { key: '32aada0eea679fd1610eb704ac02cca1f27168ff', icon: closeIconSvg }))), index.h("div", { key: '1dc811f3edcd9ab1611483c90345483fee94b318', class: "body" }, index.h("slot", { key: 'cf870234c54d659cdd85d1a736626707f65cca4a' })), index.h("footer", { key: 'c2ed7badb41a09d1187af2221f33fc2a87bcb606', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, index.h("lmvz-button-group", { key: 'c4846b44ff94b0411d79d88b3bb8447dd2a5967a', ref: (element) => (this.buttonGroupEl = element) }, index.h("slot", { key: '3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff', name: "actions" })))))));
|
|
340
237
|
}
|
|
341
238
|
static get watchers() { return {
|
|
342
239
|
"open": [{
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
-
require('./aria-loader-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
5
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
6
6
|
|
|
7
7
|
const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
|
|
8
8
|
|
|
9
|
-
const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
9
|
+
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, #7a7a7a); --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: 2px solid var(--lmvz-select-focus-color); outline-offset: 2px; } 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; }`;
|
|
10
10
|
|
|
11
11
|
let selectIdCounter = 0;
|
|
12
12
|
const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
@@ -58,7 +58,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
58
58
|
render() {
|
|
59
59
|
const hasValue = this.hasValue;
|
|
60
60
|
const shouldShowLabel = hasValue;
|
|
61
|
-
return (index.h(index.Host, { key: '
|
|
61
|
+
return (index.h(index.Host, { key: 'f4d3104f4022581e4661f2181eec5d56ac7027af' }, index.h("div", { key: '1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7', class: "select-wrapper" }, index.h("label", { key: 'ff7a2e509c637424387b38b163739183deda3cba', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '7e3c03652d16dd1a20628d800ccae4221062d4b8', "aria-hidden": "true" }, " *")), index.h("div", { key: 'a2ee01b6ddfa98565fc1c41c9b9391091d254daf', "aria-hidden": "true" }, index.h("span", { key: 'c96a6960f693baca0ba48b44e569ad87c1bbc980' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '4631b13509919f7bfd0e5a1287334cd3a8412e50', "aria-hidden": "true" }, " *")), index.h("span", { key: '4781647ee3a6a780e4253b9f92738c4645e20578' }, index.h("img", { key: 'c83dab75df9ff20ec40b63f45cbe8262d1c71d7d', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '035b19878300ac1f7b04b61157e39587782b44f7', 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 && index.h("option", { key: 'da76b299a1df9da8475e115b82d7e427cc659bfa', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '1a91b540bc8ab97723df24c9c77d2bd52d941c92' }))), this.helperText && index.h("div", { key: '347fe4d805a58e03f2cb2ef427b0dba0b805e8be', role: "status" }, this.helperText)));
|
|
62
62
|
}
|
|
63
63
|
static get watchers() { return {
|
|
64
64
|
"value": [{
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-lW-SEvL7.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
|
|
5
5
|
var component = require('./component-C7cavwmZ.js');
|
|
6
|
-
require('./aria-loader-
|
|
6
|
+
require('./aria-loader-BRo2FTGh.js');
|
|
7
7
|
|
|
8
|
-
const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme {
|
|
8
|
+
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.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; }`;
|
|
9
9
|
|
|
10
10
|
let toggleIdCounter = 0;
|
|
11
11
|
const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
@@ -79,7 +79,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
79
79
|
this.lmvzChange.emit(newChecked);
|
|
80
80
|
};
|
|
81
81
|
render() {
|
|
82
|
-
return (index.h(index.Host, { key: '
|
|
82
|
+
return (index.h(index.Host, { key: 'b7d3c3d2ae30744669032797b2fefcd1e7fe0b61' }, index.h("span", { key: '93dc128b588e19a5e322cb93efae33669375709a', class: "track" }, index.h("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: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '59838c27a032d7a116faea67fa1dc75cf9ee92cd', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '809057cf268adf05c8163a802a6020dca9b666b9', htmlFor: this.toggleId }, this.label)));
|
|
83
83
|
}
|
|
84
84
|
static get formAssociated() { return true; }
|
|
85
85
|
static get watchers() { return {
|
package/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"
|
|
9
|
+
return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button_3.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
"entries": [
|
|
3
3
|
"components/lmvz-action/lmvz-action.js",
|
|
4
4
|
"components/lmvz-button/lmvz-button.js",
|
|
5
|
+
"components/lmvz-button-group/lmvz-button-group.js",
|
|
5
6
|
"components/lmvz-card/lmvz-card.js",
|
|
6
7
|
"components/lmvz-checkbox/lmvz-checkbox.js",
|
|
7
8
|
"components/lmvz-chip/lmvz-chip.js",
|