@lmvz-ds/components 0.18.2 → 0.20.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 +16 -0
- package/README.md +45 -100
- package/assets/icons/checkmark.svg +4 -0
- package/cjs/{aria-loader-CfFuAbJn.js → aria-loader-Cec1zR2g.js} +1 -1
- package/cjs/ds.constants-DSnxZ3ia.js +16 -0
- package/cjs/icons-BQASWgk-.js +80 -0
- package/cjs/{index--7IqZZqn.js → index-3g9Z9sfF.js} +765 -2854
- package/cjs/index.cjs.js +12 -12
- package/cjs/lmvz-button.cjs.entry.js +4 -4
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +113 -0
- package/cjs/lmvz-chip.cjs.entry.js +68 -4
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-icon.cjs.entry.js +10 -8
- package/cjs/lmvz-input.cjs.entry.js +4 -4
- package/cjs/lmvz-menuitem.cjs.entry.js +4 -4
- package/cjs/lmvz-select.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{logger-Bn2yoZGP.js → logger-DsM6xg6V.js} +3063 -833
- package/cjs/{reactive-controller-host-CtaVAiYJ.js → reactive-controller-host-BA4ZhjKA.js} +10 -10
- package/cjs/svg-BMBduILB.js +125 -0
- package/collection/api/ds.constants.js +2 -0
- package/collection/assets/icons/checkmark.svg +4 -0
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-button/lmvz-button.css +1 -2
- package/collection/components/lmvz-button/lmvz-button.js +6 -3
- package/collection/components/lmvz-card/lmvz-card.css +1 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +207 -0
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +424 -0
- package/collection/components/lmvz-chip/lmvz-chip.css +84 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +110 -13
- package/collection/components/lmvz-header/lmvz-header.js +2 -2
- package/collection/components/lmvz-icon/lmvz-icon.css +11 -10
- package/collection/components/lmvz-icon/lmvz-icon.js +8 -7
- package/collection/components/lmvz-input/lmvz-input.js +4 -4
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +1 -1
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +11 -5
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/index.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/aria/aria-validation-controller.js +1 -0
- package/collection/utils/icons/icons.js +2 -13
- package/collection/utils/icons/icons.unit.js +3 -15
- package/collection/utils/reactive-controller-host.js +9 -9
- 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.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.d.ts +11 -0
- package/components/lmvz-checkbox.d.ts.bak +11 -0
- package/components/lmvz-checkbox.js +1 -0
- 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-select.js +1 -1
- package/components/p-0s99QfRy.js +12 -0
- package/components/{p-CBLAeife.js → p-BuFx0tTm.js} +1 -1
- package/components/p-CGmJG63p.js +1 -0
- package/components/p-CcxjkCOx.js +1 -0
- package/components/{p-DQEkWkMh.js → p-DIrAQ4IB.js} +1 -1
- package/esm/{aria-loader-BF_AYtbb.js → aria-loader-BVolm0lC.js} +1 -1
- package/esm/ds.constants-Bmi89ll1.js +9 -0
- package/esm/icons-CmuFKDRz.js +75 -0
- package/esm/{index-7Ru1khgk.js → index-Dh_9sN0q.js} +389 -2478
- package/esm/index.js +5 -11
- package/esm/lmvz-button.entry.js +4 -4
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +111 -0
- package/esm/lmvz-chip.entry.js +69 -5
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-icon.entry.js +10 -8
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-menuitem.entry.js +4 -4
- package/esm/lmvz-select.entry.js +3 -3
- package/esm/loader.js +1 -1
- package/esm/{logger-fiRXhuXK.js → logger-CGmJG63p.js} +2870 -765
- package/esm/{reactive-controller-host-sR2jJxNG.js → reactive-controller-host-DHcPpJW7.js} +10 -10
- package/esm/svg-B2YoIRuh.js +121 -0
- package/hydrate/index.js +2383 -42
- package/hydrate/index.mjs +2383 -42
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-5aa17cd2.entry.js → p-0f7a4236.entry.js} +1 -1
- package/lmvz-components/p-0s99QfRy.js +12 -0
- package/lmvz-components/{p-30b99f11.entry.js → p-2f83d7a2.entry.js} +1 -1
- package/lmvz-components/{p-6dbb3f13.entry.js → p-32171f4f.entry.js} +1 -1
- package/lmvz-components/{p-59383f3a.entry.js → p-400b2318.entry.js} +1 -1
- package/lmvz-components/p-851969bd.entry.js +1 -0
- package/lmvz-components/p-9f9d845d.entry.js +1 -0
- package/lmvz-components/p-Bmi89ll1.js +1 -0
- package/lmvz-components/p-CFsC37ww.js +1 -0
- package/lmvz-components/p-CGmJG63p.js +1 -0
- package/lmvz-components/p-CcxjkCOx.js +1 -0
- package/lmvz-components/{p-Bkfdgg0T.js → p-GdMr6Qlp.js} +1 -1
- package/lmvz-components/p-a12f95da.entry.js +1 -0
- package/lmvz-components/{p-84267405.entry.js → p-ab4437dc.entry.js} +1 -1
- package/lmvz-components/{p-7a6bec13.entry.js → p-d0a0e206.entry.js} +1 -1
- package/lmvz-components/{p-B3dnXEPG.js → p-dhVSUYqd.js} +1 -1
- package/manifest.json +544 -28
- package/package.json +5 -1
- package/types/api/ds.constants.d.ts +6 -1
- package/types/components/lmvz-action/lmvz-action.d.ts +0 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +0 -1
- package/types/components/lmvz-card/lmvz-card.d.ts +0 -1
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +39 -0
- package/types/components/lmvz-chip/lmvz-chip.d.ts +18 -3
- package/types/components/lmvz-header/lmvz-header.d.ts +0 -1
- package/types/components/lmvz-icon/lmvz-icon.d.ts +0 -1
- package/types/components/lmvz-input/lmvz-input.d.ts +0 -1
- package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +0 -1
- package/types/components/lmvz-select/lmvz-select.d.ts +0 -1
- package/types/components.d.ts +221 -12
- package/types/index.d.ts +1 -2
- package/types/utils/aria/aria-validation-controller.d.ts +1 -2
- package/types/utils/aria/element-activation-controller.d.ts +0 -1
- package/types/utils/aria/list-keyboard-controller.d.ts +0 -1
- package/types/utils/assets.d.ts +0 -1
- package/types/utils/component.d.ts +0 -1
- package/types/utils/environment.d.ts +0 -1
- package/types/utils/http.d.ts +0 -1
- package/types/utils/http.unit.d.ts +0 -1
- package/types/utils/icons/icons-registry.d.ts +0 -1
- package/types/utils/icons/icons.d.ts +0 -2
- package/types/utils/icons/icons.unit.d.ts +0 -1
- package/types/utils/icons/public.d.ts +0 -1
- package/types/utils/public.d.ts +0 -1
- package/types/utils/reactive-controller-host.d.ts +0 -1
- package/cjs/icons-swqMn6s2.js +0 -163
- package/components/p-DXOTa5VF.js +0 -12
- package/components/p-fiRXhuXK.js +0 -1
- package/esm/icons-Ca8oMiRa.js +0 -157
- package/lmvz-components/p-0a41cc24.entry.js +0 -1
- package/lmvz-components/p-5f150890.entry.js +0 -1
- package/lmvz-components/p-Bh2Epkwf.js +0 -1
- package/lmvz-components/p-DXOTa5VF.js +0 -12
- package/lmvz-components/p-fiRXhuXK.js +0 -1
package/cjs/index.cjs.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var ariaLoader = require('./aria-loader-
|
|
4
|
-
var
|
|
5
|
-
require('./
|
|
3
|
+
var ariaLoader = require('./aria-loader-Cec1zR2g.js');
|
|
4
|
+
var ds_constants = require('./ds.constants-DSnxZ3ia.js');
|
|
5
|
+
var icons = require('./icons-BQASWgk-.js');
|
|
6
|
+
require('./svg-BMBduILB.js');
|
|
7
|
+
require('./logger-DsM6xg6V.js');
|
|
8
|
+
|
|
6
9
|
|
|
7
|
-
const sizes = ['xs', 'sm', 'md', 'lg'];
|
|
8
|
-
const textSizes = [...sizes, 'xl'];
|
|
9
|
-
const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
|
|
10
|
-
const iconSizes = [...sizes, 'inherit'];
|
|
11
|
-
const iconWeights = ['thin', 'medium', 'bold', 'filled'];
|
|
12
10
|
|
|
13
11
|
exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = ariaLoader.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT;
|
|
14
12
|
exports.disableAriaValidation = ariaLoader.disableAriaValidation;
|
|
@@ -16,10 +14,12 @@ exports.enableAriaValidation = ariaLoader.enableAriaValidation;
|
|
|
16
14
|
exports.isAriaValidationEnabled = ariaLoader.isAriaValidationEnabled;
|
|
17
15
|
exports.queueValidation = ariaLoader.queueValidation;
|
|
18
16
|
exports.useVerboseLogging = ariaLoader.useVerboseLogging;
|
|
17
|
+
exports.chipSizes = ds_constants.chipSizes;
|
|
18
|
+
exports.chipTypes = ds_constants.chipTypes;
|
|
19
|
+
exports.iconSizes = ds_constants.iconSizes;
|
|
20
|
+
exports.iconWeights = ds_constants.iconWeights;
|
|
21
|
+
exports.inputTypes = ds_constants.inputTypes;
|
|
22
|
+
exports.textSizes = ds_constants.textSizes;
|
|
19
23
|
exports.getRegisteredIconProvider = icons.getRegisteredIconProvider;
|
|
20
24
|
exports.registerIconProvider = icons.registerIconProvider;
|
|
21
25
|
exports.typedIconFromSet = icons.typedIconFromSet;
|
|
22
|
-
exports.iconSizes = iconSizes;
|
|
23
|
-
exports.iconWeights = iconWeights;
|
|
24
|
-
exports.inputTypes = inputTypes;
|
|
25
|
-
exports.textSizes = textSizes;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-C2yDXRqP.js');
|
|
4
4
|
var index$1 = require('./index-Bp6Dd2i1.js');
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
6
6
|
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
7
7
|
var component = require('./component-Csg9MtNK.js');
|
|
8
|
-
require('./aria-loader-
|
|
8
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
9
9
|
|
|
10
|
-
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('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 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-primary, #000000); 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); 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 {
|
|
10
|
+
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('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 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-primary, #000000); 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); 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-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } 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-primary-hover, #2e2e2e); } button:not([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: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: contents; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
11
11
|
|
|
12
12
|
const LmvzButton = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
13
13
|
get el() { return index.getElement(this); }
|
|
@@ -64,7 +64,7 @@ const LmvzButton = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
64
64
|
};
|
|
65
65
|
render() {
|
|
66
66
|
this.renderHiddenButton();
|
|
67
|
-
return (index.h(index.Host, { key: '
|
|
67
|
+
return (index.h(index.Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, index.h("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: index$1.classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, index.h("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
|
|
68
68
|
}
|
|
69
69
|
static get delegatesFocus() { return true; }
|
|
70
70
|
};
|
|
@@ -23,7 +23,7 @@ function joinPath(...parts) {
|
|
|
23
23
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 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-primary, #000000); 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); 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 {
|
|
26
|
+
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 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-primary, #000000); 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); 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-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } 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-primary-hover, #2e2e2e); } button:not([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: var(--lmvz-semantic-border-width-default, 1px); --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
|
|
27
27
|
|
|
28
28
|
const LmvzCard = class {
|
|
29
29
|
constructor(hostRef) {
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-C2yDXRqP.js');
|
|
4
|
+
var svg = require('./svg-BMBduILB.js');
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
6
|
+
require('./logger-DsM6xg6V.js');
|
|
7
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
8
|
+
|
|
9
|
+
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPgogICAgPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
|
|
10
|
+
|
|
11
|
+
const lmvzCheckboxCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-checkbox-h { display: inline-block; --checkbox-box-size: var(--lmvz-global-s18, 18px); --checkbox-border-radius: var(--lmvz-global-s4, 4px); --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f1f9fe); --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --checkbox-easing: var(--lmvz-global-easing-default, ease); --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox { display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; text-decoration: none; background-color: transparent; transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox { position: absolute; opacity: 0; width: var(--checkbox-box-size); height: var(--checkbox-box-size); margin: 0; cursor: pointer; z-index: 1; } .box.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; width: var(--checkbox-box-size); height: var(--checkbox-box-size); background-color: var(--checkbox-bg); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); color: var(--checkbox-checkmark-color); transition: border-color var(--checkbox-duration) var(--checkbox-easing), background-color var(--checkbox-duration) var(--checkbox-easing); pointer-events: none; flex-shrink: 0; } .indicator.sc-lmvz-checkbox { display: flex; align-items: center; justify-content: center; line-height: 0; } .content.sc-lmvz-checkbox { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); color: var(--checkbox-helper-color); margin-block-start: 2px; } .error-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4 Router); color: var(--checkbox-error-color); display: block; margin-block-start: 4px; padding-inline: 10px; } @media (hover: hover) { .pill.sc-lmvz-checkbox:hover { background-color: var(--checkbox-wrapper-bg-hover); } .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-hover); } } [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox { color: var(--checkbox-label-color-checked); } [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox { color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } [disabled].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox { cursor: not-allowed; } [disabled].sc-lmvz-checkbox-h input.sc-lmvz-checkbox { cursor: not-allowed; } input.sc-lmvz-checkbox:focus-visible ~ .box.sc-lmvz-checkbox { outline: 2px solid var(--checkbox-focus-color); outline-offset: 2px; box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) 0 var(--lmvz-semantic-shadow-l1-1-blur, 4px) var(--lmvz-semantic-color-shadow-l1-colored, rgba(175, 223, 249, 0.42)); } @media (forced-colors: active) { .box.sc-lmvz-checkbox { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox { border-color: Highlight; background-color: Field; } .indicator.sc-lmvz-checkbox { color: ButtonText; } [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox { color: HighlightText; } input.sc-lmvz-checkbox:focus-visible ~ .box.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }`;
|
|
12
|
+
|
|
13
|
+
const CHECKMARK_SVG = svg.toValidSvgStringWithFallback(checkmarkSvg);
|
|
14
|
+
let checkboxIdCounter = 0;
|
|
15
|
+
const LmvzCheckbox = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
16
|
+
get el() { return index.getElement(this); }
|
|
17
|
+
get validationEl() {
|
|
18
|
+
return this.el;
|
|
19
|
+
}
|
|
20
|
+
internals;
|
|
21
|
+
nativeInput;
|
|
22
|
+
checkboxId = `lmvz-checkbox-${checkboxIdCounter++}`;
|
|
23
|
+
initialChecked = false;
|
|
24
|
+
get helperId() {
|
|
25
|
+
return this.helperText ? `${this.checkboxId}-helper` : undefined;
|
|
26
|
+
}
|
|
27
|
+
get errorId() {
|
|
28
|
+
return this.errorMessage ? `${this.checkboxId}-error` : undefined;
|
|
29
|
+
}
|
|
30
|
+
get ariaDescribedBy() {
|
|
31
|
+
const ids = [this.errorId, this.helperId].filter(Boolean);
|
|
32
|
+
return ids.length > 0 ? ids.join(' ') : undefined;
|
|
33
|
+
}
|
|
34
|
+
label;
|
|
35
|
+
checked = false;
|
|
36
|
+
value = 'on';
|
|
37
|
+
name;
|
|
38
|
+
disabled = false;
|
|
39
|
+
required = false;
|
|
40
|
+
error = false;
|
|
41
|
+
errorMessage;
|
|
42
|
+
helperText;
|
|
43
|
+
form;
|
|
44
|
+
autofocus = false;
|
|
45
|
+
checkedState = false;
|
|
46
|
+
handleCheckedChange(val) {
|
|
47
|
+
this.checkedState = val;
|
|
48
|
+
this.internals.setFormValue?.(val ? (this.value ?? 'on') : null);
|
|
49
|
+
}
|
|
50
|
+
lmvzChange;
|
|
51
|
+
async focusInput() {
|
|
52
|
+
this.nativeInput?.focus();
|
|
53
|
+
}
|
|
54
|
+
async checkValidity() {
|
|
55
|
+
return this.internals?.checkValidity() ?? true;
|
|
56
|
+
}
|
|
57
|
+
async reportValidity() {
|
|
58
|
+
return this.internals?.reportValidity() ?? true;
|
|
59
|
+
}
|
|
60
|
+
constructor(hostRef) {
|
|
61
|
+
super();
|
|
62
|
+
index.registerInstance(this, hostRef);
|
|
63
|
+
this.lmvzChange = index.createEvent(this, "lmvzChange");
|
|
64
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
65
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
69
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
70
|
+
}
|
|
71
|
+
this.addController(new reactiveControllerHost.AriaValidationController(this, {
|
|
72
|
+
reValidateOnPropChanges: true,
|
|
73
|
+
}));
|
|
74
|
+
}
|
|
75
|
+
componentWillLoad() {
|
|
76
|
+
this.initialChecked = this.checked;
|
|
77
|
+
this.checkedState = this.checked;
|
|
78
|
+
this.internals.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
|
|
79
|
+
super.componentWillLoad();
|
|
80
|
+
}
|
|
81
|
+
componentWillRender() {
|
|
82
|
+
if (this.error && !this.errorMessage) {
|
|
83
|
+
console.warn('lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users.');
|
|
84
|
+
}
|
|
85
|
+
super.componentWillRender();
|
|
86
|
+
}
|
|
87
|
+
formAssociatedCallback() {
|
|
88
|
+
this.internals.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
|
|
89
|
+
}
|
|
90
|
+
formResetCallback() {
|
|
91
|
+
this.checked = this.initialChecked;
|
|
92
|
+
}
|
|
93
|
+
formStateRestoreCallback(state) {
|
|
94
|
+
this.checked = state === (this.value ?? 'on');
|
|
95
|
+
}
|
|
96
|
+
handleChange = (event) => {
|
|
97
|
+
const input = event.target;
|
|
98
|
+
this.checked = input.checked;
|
|
99
|
+
this.lmvzChange.emit(this.checked);
|
|
100
|
+
};
|
|
101
|
+
render() {
|
|
102
|
+
return (index.h(index.Host, { key: '6014c885305bc9824f7a6d4f0ba8c642125f3a5b' }, index.h("div", { key: 'cbc6de2b684acfb00b77a366e707d73de74a0b8a', class: "pill" }, index.h("input", { key: '5b442512b6cab2e60a1d62fd40e4c868b1bf87ac', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), index.h("span", { key: '09c534b7c5642c620129ea05a4468bd584c56ce7', class: "box", "aria-hidden": "true" }, this.checkedState && index.h("span", { key: 'eaa49e1a60054f8efc62ade0446a4704f0bb46e9', class: "indicator", innerHTML: CHECKMARK_SVG })), index.h("span", { key: '8fb836d71cbb3d4eadaf67284f5bb52906549275', class: "content" }, index.h("label", { key: '8df862f11e9885158264908fdac6599f21ecba07', htmlFor: this.checkboxId }, this.label), this.helperText && (index.h("span", { key: '1e45e6177774e937311cddacd1a3d3379c9c6af5', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (index.h("span", { key: '83fc1f7cd6828973e52ef27604f12f94f41d7f4b', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
103
|
+
}
|
|
104
|
+
static get formAssociated() { return true; }
|
|
105
|
+
static get watchers() { return {
|
|
106
|
+
"checked": [{
|
|
107
|
+
"handleCheckedChange": 0
|
|
108
|
+
}]
|
|
109
|
+
}; }
|
|
110
|
+
};
|
|
111
|
+
LmvzCheckbox.style = lmvzCheckboxCss();
|
|
112
|
+
|
|
113
|
+
exports.lmvz_checkbox = LmvzCheckbox;
|
|
@@ -1,17 +1,81 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-C2yDXRqP.js');
|
|
4
|
+
var ds_constants = require('./ds.constants-DSnxZ3ia.js');
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
6
|
+
var ariaLoader = require('./aria-loader-Cec1zR2g.js');
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
function debounce(func, wait) {
|
|
9
|
+
let timeout;
|
|
10
|
+
return () => {
|
|
11
|
+
if (timeout !== undefined) {
|
|
12
|
+
window.clearTimeout(timeout);
|
|
13
|
+
}
|
|
14
|
+
timeout = window.setTimeout(() => {
|
|
15
|
+
func();
|
|
16
|
+
timeout = undefined;
|
|
17
|
+
}, wait);
|
|
18
|
+
};
|
|
19
|
+
}
|
|
6
20
|
|
|
7
|
-
const
|
|
21
|
+
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.69rem, 0.67rem + 0.06vw, 0.75rem) / 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.63rem, 0.61rem + 0.06vw, 0.69rem) / 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, #f1f9fe); --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); } `;
|
|
22
|
+
|
|
23
|
+
const LmvzChip = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
24
|
+
ariaValidationController = new reactiveControllerHost.AriaValidationController(this);
|
|
25
|
+
beforeSlot;
|
|
26
|
+
defaultSlot;
|
|
27
|
+
afterSlot;
|
|
28
|
+
get el() { return index.getElement(this); }
|
|
29
|
+
get validationEl() {
|
|
30
|
+
return this.el;
|
|
31
|
+
}
|
|
32
|
+
type = 'active';
|
|
33
|
+
size = 'default';
|
|
8
34
|
constructor(hostRef) {
|
|
35
|
+
super();
|
|
9
36
|
index.registerInstance(this, hostRef);
|
|
37
|
+
this.addController(this.ariaValidationController);
|
|
38
|
+
}
|
|
39
|
+
normalizeType(value) {
|
|
40
|
+
const normalizedType = ds_constants.chipTypes.includes(value) ? value : 'active';
|
|
41
|
+
if (normalizedType !== this.type) {
|
|
42
|
+
this.type = normalizedType;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
normalizeSize(value) {
|
|
46
|
+
const normalizedSize = ds_constants.chipSizes.includes(value) ? value : 'default';
|
|
47
|
+
if (normalizedSize !== this.size) {
|
|
48
|
+
this.size = normalizedSize;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
componentWillLoad() {
|
|
52
|
+
this.normalizeType(this.type);
|
|
53
|
+
this.normalizeSize(this.size);
|
|
54
|
+
super.componentWillLoad();
|
|
55
|
+
}
|
|
56
|
+
connectedCallback() {
|
|
57
|
+
super.connectedCallback();
|
|
58
|
+
this.checkContent();
|
|
10
59
|
}
|
|
11
|
-
|
|
60
|
+
checkContent = debounce(() => {
|
|
61
|
+
if (!ariaLoader.isAriaValidationEnabled)
|
|
62
|
+
return;
|
|
63
|
+
const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
|
|
64
|
+
if (!elements.length) {
|
|
65
|
+
console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
|
|
66
|
+
}
|
|
67
|
+
}, 500);
|
|
12
68
|
render() {
|
|
13
|
-
return index.h(index.Host, { key: '
|
|
69
|
+
return (index.h(index.Host, { key: 'c77e8ae55531eefb31dd37b41b4851746a78f077', type: this.type, size: this.size }, index.h("slot", { key: '3f4d0a8feb887080172d11facc01afbe730b2726', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), index.h("span", { key: '6ec135ebcb32f15fea342379ac2b1dfebbe76fa6', class: "content-overflow-wrapper" }, index.h("slot", { key: '053afb88e2d6702428aab195bfcec6aff6d9c55f', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), index.h("slot", { key: 'ed51db073a512a32d12da59dee285708b83ae87b', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
14
70
|
}
|
|
71
|
+
static get watchers() { return {
|
|
72
|
+
"type": [{
|
|
73
|
+
"normalizeType": 0
|
|
74
|
+
}],
|
|
75
|
+
"size": [{
|
|
76
|
+
"normalizeSize": 0
|
|
77
|
+
}]
|
|
78
|
+
}; }
|
|
15
79
|
};
|
|
16
80
|
LmvzChip.style = lmvzChipCss();
|
|
17
81
|
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["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-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-
|
|
22
|
+
return index.bootstrapLazy([["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-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["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-icon.cjs",[[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}]}]]],["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}]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-C2yDXRqP.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
5
5
|
var component = require('./component-Csg9MtNK.js');
|
|
6
6
|
var lmvzMenuitem_entry = require('./lmvz-menuitem.cjs.entry.js');
|
|
7
|
-
require('./aria-loader-
|
|
7
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
8
8
|
require('./element-activation-controller-DC_6T0Rt.js');
|
|
9
9
|
|
|
10
10
|
class ListKeyboardNavigationController {
|
|
@@ -139,7 +139,7 @@ const LmvzHeader = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
render() {
|
|
142
|
-
return (index.h(index.Host, { key: '
|
|
142
|
+
return (index.h(index.Host, { key: '87ecb9948039ea2f4b998bf35865e5839708a65c', onFocus: this.delegateFocus.bind(this) }, index.h("div", { key: '4f1ae09b1a3e0a9c3eb12659b3952eef34cbd67b', class: "brand" }, index.h("slot", { key: '99c03f87f0b3462d9b44835ba34ee05c75373b22', name: "brand" }, index.h("img", { key: '1616ce8464c2e798a53bc7c879385e3882e4d32f', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), index.h("nav", { key: 'ff7c56dbc9e80ba9a0757683069e1cba168abcb6', "aria-label": "Hauptnavigation" }, index.h("div", { key: 'a3bb67d788b936422992b066431c73098ff2aa11', role: "menubar", class: "primary-menubar" }, index.h("slot", { key: 'e85b93f943c6d97bd5a7fa6f75e4855785d09ec5', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), index.h("div", { key: 'e9efcfc5d3a8cb991c255b32b205924dafb5aaf6', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, index.h("slot", { key: '7314e6a72705d48b347fa30945b1d5513b87bfd3', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), index.h("div", { key: 'aee503cddbf8964833934e594caf5faa6e073a02', class: "actions" }, index.h("slot", { key: '5c1b15c0507ef24f67e37cd1652b4cc5ce4cc104', name: "actions" }))));
|
|
143
143
|
}
|
|
144
144
|
static get watchers() { return {
|
|
145
145
|
"lmvzActiveNav": [{
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-C2yDXRqP.js');
|
|
4
|
-
var
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
6
|
-
require('./
|
|
7
|
-
require('./
|
|
4
|
+
var svg = require('./svg-BMBduILB.js');
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
6
|
+
var icons = require('./icons-BQASWgk-.js');
|
|
7
|
+
require('./logger-DsM6xg6V.js');
|
|
8
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
8
9
|
|
|
9
|
-
const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));display:inline-block;line-height:0;svg{display:block}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{
|
|
10
|
+
const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
|
|
10
11
|
|
|
11
12
|
const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
12
13
|
intersectionObserver;
|
|
@@ -47,8 +48,9 @@ const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
47
48
|
if (!icon || !visible) {
|
|
48
49
|
return;
|
|
49
50
|
}
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
const maybeIcon = svg.parseSvgString(icon);
|
|
52
|
+
if (maybeIcon) {
|
|
53
|
+
this.iconData = maybeIcon;
|
|
52
54
|
return;
|
|
53
55
|
}
|
|
54
56
|
this.iconData = await icons.resolveIconSvg({
|
|
@@ -62,7 +64,7 @@ const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
62
64
|
super.componentDidRender();
|
|
63
65
|
}
|
|
64
66
|
render() {
|
|
65
|
-
return index.h(index.Host, { key: '
|
|
67
|
+
return index.h(index.Host, { key: 'e76fe28500b3545b8917ecdad590da5bc04ed38f', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
66
68
|
}
|
|
67
69
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
68
70
|
if (typeof window === 'undefined' || !window.IntersectionObserver) {
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-C2yDXRqP.js');
|
|
4
4
|
var index$1 = require('./index-Bp6Dd2i1.js');
|
|
5
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
6
6
|
var component = require('./component-Csg9MtNK.js');
|
|
7
|
-
require('./aria-loader-
|
|
7
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
8
8
|
|
|
9
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('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .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
|
|
|
@@ -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: '3cbfee5fccbb5efe1bfb9c6622653e11d4896615', class: index$1.classNames('input-container', {
|
|
168
168
|
'interaction-filled': hasValue,
|
|
169
|
-
}) }, index.h("div", { key: '
|
|
169
|
+
}) }, index.h("div", { key: '2712b0d5eda0ca1d4da70f362047df07acf922a5', class: "input-wrapper" }, index.h("slot", { key: '992bc86de6b3bdd3cdbac1c000d38a338e6e4474', name: "before-input" }), index.h("div", { key: '35ace7d889667f5d09eea76dcba161f8711c9b1c', class: "label-input-group" }, index.h("label", { key: '28520dddf331d35ba75283673aa81e0046628907', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: 'b91766b86b1bc68ce3dbb4b734ee4aa40fe0759b', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: 'ed7cd4b64091256df1c3b939c1e22d6082fe58b9', 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: '1e42c305b8e554fadd7c50fbbb54ea234c734b0a', name: "after-input" })), index.h("div", { key: '190a1a92971a717f3ef594615fbe4dd0c9a72493', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '4d07b45a51d3733caf09a1bbc56ae6f51411ecbc', 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-C2yDXRqP.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
5
5
|
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
6
|
-
require('./aria-loader-
|
|
6
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
7
7
|
|
|
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('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .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-
|
|
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('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .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: 'a87116fba2d35c612e590c6b4e12c03b60d1ef0e' }, index.h("slot", { key: 'b302049db0b5818d4d7f90c043eb5c3caf48ca1b', ref: (e) => (this.validationSlot = e) })));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
LmvzMenuItem.style = lmvzMenuitemCss();
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-C2yDXRqP.js');
|
|
4
|
-
var reactiveControllerHost = require('./reactive-controller-host-
|
|
5
|
-
require('./aria-loader-
|
|
4
|
+
var reactiveControllerHost = require('./reactive-controller-host-BA4ZhjKA.js');
|
|
5
|
+
require('./aria-loader-Cec1zR2g.js');
|
|
6
6
|
|
|
7
7
|
const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
|
|
8
8
|
|
|
@@ -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: '1bdd53df4a33c5292cc072b0a9abc45fa01b237f' }, index.h("div", { key: 'e38d81e620d8c27cd34e1a7799c42d5640d4b0db', class: "select-wrapper" }, index.h("label", { key: '3995206b564c7e17ac273709577eb8dd7a3b0ff1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '7c04028f9ff3e0f365f76d10b0139dc6805f2af4', "aria-hidden": "true" }, " *")), index.h("div", { key: '7b428d22a32181fc13e837b6821ab163ac286453', "aria-hidden": "true" }, index.h("span", { key: '385ddb473337869777e835cc5b533f9a41c1fbe3' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: 'c53036bd718b916b910225297b40df998729650c', "aria-hidden": "true" }, " *")), index.h("span", { key: '06db17fbe01d9fea9904aa04e72b6cbfc9d93652' }, index.h("img", { key: 'b4d46ada048e931aa71f2ace33c93ff9fc67e479', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '841c86f1d340cd36475a7757e9cad5f33aeac710', 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: '4bd193f7878da2077c9185cd093d61c62406a7b9', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'c14a15e022f08ad72a5ad9d29befe0db7c6f24db' }))), this.helperText && index.h("div", { key: '833eaa383f8a9722fd990fadcdff4a93aa0a79df', role: "status" }, this.helperText)));
|
|
62
62
|
}
|
|
63
63
|
static get watchers() { return {
|
|
64
64
|
"value": [{
|
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-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-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-
|
|
9
|
+
return index.bootstrapLazy([["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-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["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-icon.cjs",[[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}]}]]],["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}]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|