@lmvz-ds/components 0.18.0 → 0.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/cjs/lmvz-action.cjs.entry.js +1 -1
- package/cjs/lmvz-button.cjs.entry.js +2 -2
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-chip.cjs.entry.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +1 -1
- package/cjs/lmvz-icon.cjs.entry.js +2 -2
- package/cjs/lmvz-input.cjs.entry.js +3 -3
- package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
- package/cjs/lmvz-select.cjs.entry.js +2 -2
- package/collection/components/lmvz-action/lmvz-action.js +1 -1
- package/collection/components/lmvz-button/lmvz-button.css +2 -2
- package/collection/components/lmvz-button/lmvz-button.js +1 -1
- package/collection/components/lmvz-card/lmvz-card.css +5 -5
- package/collection/components/lmvz-card/lmvz-card.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.css +8 -8
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-input/lmvz-input.css +1 -1
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-select/lmvz-select.css +3 -3
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/lmvz-action.js +1 -1
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.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-select.js +1 -1
- package/esm/lmvz-action.entry.js +1 -1
- package/esm/lmvz-button.entry.js +2 -2
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-chip.entry.js +1 -1
- package/esm/lmvz-header_2.entry.js +1 -1
- package/esm/lmvz-icon.entry.js +2 -2
- package/esm/lmvz-input.entry.js +3 -3
- package/esm/lmvz-menuitem.entry.js +2 -2
- package/esm/lmvz-select.entry.js +2 -2
- package/hydrate/index.js +16 -16
- package/hydrate/index.mjs +16 -16
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-0f645295.entry.js +1 -0
- package/lmvz-components/{p-30b99f11.entry.js → p-1506fa34.entry.js} +1 -1
- package/lmvz-components/p-658c5c34.entry.js +1 -0
- package/lmvz-components/{p-77007422.entry.js → p-80675ee5.entry.js} +1 -1
- package/lmvz-components/p-872e2106.entry.js +1 -0
- package/lmvz-components/{p-b0208356.entry.js → p-93038c98.entry.js} +1 -1
- package/lmvz-components/{p-bfd7db0a.entry.js → p-bbab5471.entry.js} +1 -1
- package/lmvz-components/p-c7e368c4.entry.js +1 -0
- package/lmvz-components/{p-ffa21507.entry.js → p-ff6a0267.entry.js} +1 -1
- package/manifest.json +1 -1
- package/package.json +1 -1
- package/assets/.DS_Store +0 -0
- package/assets/icons/.DS_Store +0 -0
- package/collection/assets/.DS_Store +0 -0
- package/collection/assets/icons/.DS_Store +0 -0
- package/lmvz-components/p-43e295ba.entry.js +0 -1
- package/lmvz-components/p-5f150890.entry.js +0 -1
- package/lmvz-components/p-ae4aeb0a.entry.js +0 -1
- package/lmvz-components/p-d2e42f6a.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -14,7 +14,7 @@ const LmvzAction = class {
|
|
|
14
14
|
this.actionClick.emit(event);
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (index.h(index.Host, { key: '
|
|
17
|
+
return (index.h(index.Host, { key: '00da873d80f00dc57e5a0d60f2b58a6c505e41f1', onClick: this._onClick.bind(this) }, index.h("slot", { key: '7938b5e172ef2b027180aac801b0d9962cd68fa5' })));
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
LmvzAction.style = lmvzActionCss();
|
|
@@ -7,7 +7,7 @@ var elementActivationController = require('./element-activation-controller-DC_6T
|
|
|
7
7
|
var component = require('./component-Csg9MtNK.js');
|
|
8
8
|
require('./aria-loader-CfFuAbJn.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 { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-
|
|
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-active, #f1f9fe); 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: '1448b16151418790d0a78eda2248b7d61fd8e32b', "aria-disabled": this.disabled ? 'true' : null }, index.h("button", { key: '2cf7ccc0692179b68aaea534a7a4d11dbcbe27b5', 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: '8fd9f99f8c79657fd3dbeafb2fd88ca667bc0d44' }))));
|
|
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 { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-
|
|
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-active, #f1f9fe); 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) {
|
|
@@ -48,7 +48,7 @@ const LmvzCard = class {
|
|
|
48
48
|
const imgStyle = {
|
|
49
49
|
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
50
50
|
};
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
51
|
+
return (index.h(index.Host, { key: 'fceb19eb0d7ad6c6aecfa6fbd5bb6425c7c3e312', role: "article" }, index.h("div", { key: '4cb516b5dee1f2f84f21984fa350f61fd83c771c', class: "top" }, index.h("div", { key: '713b2a3245d885a9b99f6c7d54a35053699c1be8', class: "image-wrapper", style: imgStyle }, index.h("div", { key: 'e8ea65e7f5d11a2335cab950d6bf02208d0b18a1', class: "chip-slot" }, index.h("slot", { key: 'e9a039742107fdf56216186ddcdf367c4432790b', name: "chip" })))), index.h("div", { key: '9549e46a1872e0edf298b79435d298aa1ae96a37', class: "bottom" }, index.h("header", { key: '3bbfb72ecec519d16380ae7e00da4b1ccb6f1cf3' }, index.h("h2", { key: 'f5a33e498893e61b407c10ab36c9a93b7eecf9f1', class: "title" }, this.cardTitle)), index.h("p", { key: '19709bb100d014369c836a5a7174772f2d095d2e', class: "description" }, this.description), index.h("div", { key: '06b5acab3c80cc91865f3aa39da32d42f470348e', class: "actions" }, index.h("button", { key: '4e954452ac9771359c881aa6b43f11e89e38aecf', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), index.h("button", { key: 'b6a682bf95eb26468c450bed494290565288a515', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, index.h("span", { key: '70a526d1fafd8b7051f6e7107b35d6f594e10d68', class: "icon-placeholder" }, "..."))))));
|
|
52
52
|
}
|
|
53
53
|
static get assetsDirs() { return ["../../assets"]; }
|
|
54
54
|
};
|
|
@@ -10,7 +10,7 @@ const LmvzChip = class {
|
|
|
10
10
|
}
|
|
11
11
|
text;
|
|
12
12
|
render() {
|
|
13
|
-
return index.h(index.Host, { key: '
|
|
13
|
+
return index.h(index.Host, { key: '134d510fe3a04b989b0005bf31358149a9661cb2' }, this.text);
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
LmvzChip.style = lmvzChipCss();
|
|
@@ -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: '58cf99b555112f6209b6d16047bda2cc0bbf5cde', onFocus: this.delegateFocus.bind(this) }, index.h("div", { key: 'd9bda5c2a6b9abd6e5ea849fb31a0543c8c36bb7', class: "brand" }, index.h("slot", { key: 'e1c2c2a0bd69875ecd46ef9f7406ccb52409b570', name: "brand" }, index.h("img", { key: '8dfca875ffc837f2c413527ea106d640a9b9bb97', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), index.h("nav", { key: '24ceb7f3ef54399ecb9b7b78418d3be9bb547f60', "aria-label": "Hauptnavigation" }, index.h("div", { key: 'c9fb6b1850330493e0a26bf20ea04013725025f6', role: "menubar", class: "primary-menubar" }, index.h("slot", { key: '19640032a28d0a9bd7f5396f7c1acd477135f864', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), index.h("div", { key: 'c11f19e15c0fea300a771060e2e4c77cce76c20f', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, index.h("slot", { key: '2df2cf852595a78391bcd7c3dd8b8d6db3847aaa', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), index.h("div", { key: 'c256862d4f5ea38c120218372d9ad73ae19efd74', class: "actions" }, index.h("slot", { key: '91b5eb2d9ab06005384a28cddee3d6c92afd418c', name: "actions" }))));
|
|
143
143
|
}
|
|
144
144
|
static get watchers() { return {
|
|
145
145
|
"lmvzActiveNav": [{
|
|
@@ -6,7 +6,7 @@ var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
|
|
|
6
6
|
require('./logger-Bn2yoZGP.js');
|
|
7
7
|
require('./aria-loader-CfFuAbJn.js');
|
|
8
8
|
|
|
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{width:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.
|
|
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{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))}}[size='sm'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));height:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));height:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{width:inherit;height: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
10
|
|
|
11
11
|
const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
12
12
|
intersectionObserver;
|
|
@@ -62,7 +62,7 @@ const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
62
62
|
super.componentDidRender();
|
|
63
63
|
}
|
|
64
64
|
render() {
|
|
65
|
-
return index.h(index.Host, { key: '
|
|
65
|
+
return index.h(index.Host, { key: 'b36586af32709b492336fe4ec1fe1fe1fe7a9e4b', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
66
66
|
}
|
|
67
67
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
68
68
|
if (typeof window === 'undefined' || !window.IntersectionObserver) {
|
|
@@ -6,7 +6,7 @@ var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
|
|
|
6
6
|
var component = require('./component-Csg9MtNK.js');
|
|
7
7
|
require('./aria-loader-CfFuAbJn.js');
|
|
8
8
|
|
|
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-
|
|
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
|
|
|
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: '9de2e4dd202edc937e96ff6ebdc8d0270851c4ca', class: index$1.classNames('input-container', {
|
|
168
168
|
'interaction-filled': hasValue,
|
|
169
|
-
}) }, index.h("div", { key: '
|
|
169
|
+
}) }, index.h("div", { key: '0c9f92778e1c52dca13ed9175a09d757fc6eedc9', class: "input-wrapper" }, index.h("slot", { key: '9cf29c45afdb127917a68ed6752faf3d50004c7d', name: "before-input" }), index.h("div", { key: 'e7e6c54b6ee6db108ac3f8ddb676bb9fcf10517e', class: "label-input-group" }, index.h("label", { key: '68eb29e585741971aae58c7693d011ba587f1c1b', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: '274d992a43c2de45af7172608fb1581c6ee771d2', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: 'a26b95dee9781e0e13db16d6e09681e36cab0230', 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: '5b77b87ba1da3b8e71c7f6825eecf2216a93e4f9', name: "after-input" })), index.h("div", { key: 'cac334a1e88d4136e923ef1355196997bfe97099', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: 'b3ea662fa0a57ed0d8c3f35e36aad6b2513af8ab', 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 {
|
|
@@ -5,7 +5,7 @@ var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
|
|
|
5
5
|
var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
|
|
6
6
|
require('./aria-loader-CfFuAbJn.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-on-active, #0e7ab4); --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: '510ac59b18468ce9c65b866ae2767185f1b3da92' }, index.h("slot", { key: '7e032e0dab83f9bfbaa96ad2b78d8a5a58f978ab', ref: (e) => (this.validationSlot = e) })));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
LmvzMenuItem.style = lmvzMenuitemCss();
|
|
@@ -6,7 +6,7 @@ require('./aria-loader-CfFuAbJn.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 { @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-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-
|
|
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('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-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: '7f4650d5971bb93dba48385df734e6b7a0b4f7eb' }, index.h("div", { key: '79d6234cd15f64c8bff787d715107e7e86145333', class: "select-wrapper" }, index.h("label", { key: '14d93469c6d309b68427ff7bfc2bd531c8f0ecf6', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: 'c8be809e09d768d6f73ccccdfbf0bf495869ac72', "aria-hidden": "true" }, " *")), index.h("div", { key: '1db5d44b44100342a4ca5feff648b61a0bdadb1a', "aria-hidden": "true" }, index.h("span", { key: '3fdc95aab9997a10f4ba42dabc3758aea0797a22' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '11aef8194551059130b6be5351587219a1e80f00', "aria-hidden": "true" }, " *")), index.h("span", { key: '8fc52ff3e46d7b52d8d5069a74ebf7bb0d981081' }, index.h("img", { key: '129dd4038772eba9313e1e322866c70408f4e2ad', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '6eb6cf496e60b3c1bd9556e596cbef34d4da5a09', 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: '70d660e0bc7e4c127234ce77decf35d6fea7fe8d', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'e6cbc238c9c0cf8e8c31d0347a1f621272a94ca6' }))), this.helperText && index.h("div", { key: '432d405ee7338da46509ff207599b882a19ea44e', role: "status" }, this.helperText)));
|
|
62
62
|
}
|
|
63
63
|
static get watchers() { return {
|
|
64
64
|
"value": [{
|
|
@@ -5,7 +5,7 @@ export class LmvzAction {
|
|
|
5
5
|
this.actionClick.emit(event);
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '00da873d80f00dc57e5a0d60f2b58a6c505e41f1', onClick: this._onClick.bind(this) }, h("slot", { key: '7938b5e172ef2b027180aac801b0d9962cd68fa5' })));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "lmvz-action"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -92,7 +92,7 @@ button > * {
|
|
|
92
92
|
|
|
93
93
|
button:focus-visible {
|
|
94
94
|
/* outline: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-active-950); */
|
|
95
|
-
outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-
|
|
95
|
+
outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe);
|
|
96
96
|
outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
|
|
97
97
|
}
|
|
98
98
|
|
|
@@ -130,7 +130,7 @@ button.secondary:not([disabled], .disabled):hover {
|
|
|
130
130
|
|
|
131
131
|
button.secondary:not([disabled], .disabled):active {
|
|
132
132
|
--lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
|
|
133
|
-
--lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #
|
|
133
|
+
--lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
/* button.secondary:is([disabled], .disabled) {
|
|
@@ -57,7 +57,7 @@ export class LmvzButton extends ReactiveControllerHost {
|
|
|
57
57
|
};
|
|
58
58
|
render() {
|
|
59
59
|
this.renderHiddenButton();
|
|
60
|
-
return (h(Host, { key: '
|
|
60
|
+
return (h(Host, { key: '1448b16151418790d0a78eda2248b7d61fd8e32b', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '2cf7ccc0692179b68aaea534a7a4d11dbcbe27b5', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '8fd9f99f8c79657fd3dbeafb2fd88ca667bc0d44' }))));
|
|
61
61
|
}
|
|
62
62
|
static get is() { return "lmvz-button"; }
|
|
63
63
|
static get encapsulation() { return "shadow"; }
|
|
@@ -93,7 +93,7 @@ button > * {
|
|
|
93
93
|
|
|
94
94
|
button:focus-visible {
|
|
95
95
|
/* outline: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-active-950); */
|
|
96
|
-
outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-
|
|
96
|
+
outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe);
|
|
97
97
|
outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
|
|
98
98
|
}
|
|
99
99
|
|
|
@@ -131,7 +131,7 @@ button.secondary:not([disabled], .disabled):hover {
|
|
|
131
131
|
|
|
132
132
|
button.secondary:not([disabled], .disabled):active {
|
|
133
133
|
--lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
|
|
134
|
-
--lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #
|
|
134
|
+
--lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
/* button.secondary:is([disabled], .disabled) {
|
|
@@ -176,8 +176,8 @@ button.large {
|
|
|
176
176
|
|
|
177
177
|
|
|
178
178
|
display: flex;
|
|
179
|
-
min-width: var(--lmvz-
|
|
180
|
-
max-width: var(--lmvz-
|
|
179
|
+
min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem);
|
|
180
|
+
max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem);
|
|
181
181
|
flex-direction: column;
|
|
182
182
|
align-items: flex-start;
|
|
183
183
|
|
|
@@ -215,7 +215,7 @@ button.large {
|
|
|
215
215
|
|
|
216
216
|
padding-bottom: var(--lmvz-global-s4, 4px);
|
|
217
217
|
overflow-wrap: break-word;
|
|
218
|
-
font: var(--lmvz-typography-heading-2xl, 500 clamp(
|
|
218
|
+
font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2
|
|
219
219
|
Router);
|
|
220
220
|
}
|
|
221
221
|
.description {
|
|
@@ -19,7 +19,7 @@ export class LmvzCard {
|
|
|
19
19
|
const imgStyle = {
|
|
20
20
|
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
21
21
|
};
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: 'fceb19eb0d7ad6c6aecfa6fbd5bb6425c7c3e312', role: "article" }, h("div", { key: '4cb516b5dee1f2f84f21984fa350f61fd83c771c', class: "top" }, h("div", { key: '713b2a3245d885a9b99f6c7d54a35053699c1be8', class: "image-wrapper", style: imgStyle }, h("div", { key: 'e8ea65e7f5d11a2335cab950d6bf02208d0b18a1', class: "chip-slot" }, h("slot", { key: 'e9a039742107fdf56216186ddcdf367c4432790b', name: "chip" })))), h("div", { key: '9549e46a1872e0edf298b79435d298aa1ae96a37', class: "bottom" }, h("header", { key: '3bbfb72ecec519d16380ae7e00da4b1ccb6f1cf3' }, h("h2", { key: 'f5a33e498893e61b407c10ab36c9a93b7eecf9f1', class: "title" }, this.cardTitle)), h("p", { key: '19709bb100d014369c836a5a7174772f2d095d2e', class: "description" }, this.description), h("div", { key: '06b5acab3c80cc91865f3aa39da32d42f470348e', class: "actions" }, h("button", { key: '4e954452ac9771359c881aa6b43f11e89e38aecf', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: 'b6a682bf95eb26468c450bed494290565288a515', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '70a526d1fafd8b7051f6e7107b35d6f594e10d68', class: "icon-placeholder" }, "..."))))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "lmvz-card"; }
|
|
25
25
|
static get encapsulation() { return "scoped"; }
|
|
@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
export class LmvzChip {
|
|
3
3
|
text;
|
|
4
4
|
render() {
|
|
5
|
-
return h(Host, { key: '
|
|
5
|
+
return h(Host, { key: '134d510fe3a04b989b0005bf31358149a9661cb2' }, this.text);
|
|
6
6
|
}
|
|
7
7
|
static get is() { return "lmvz-chip"; }
|
|
8
8
|
static get encapsulation() { return "shadow"; }
|
|
@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
render() {
|
|
87
|
-
return (h(Host, { key: '
|
|
87
|
+
return (h(Host, { key: '58cf99b555112f6209b6d16047bda2cc0bbf5cde', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'd9bda5c2a6b9abd6e5ea849fb31a0543c8c36bb7', class: "brand" }, h("slot", { key: 'e1c2c2a0bd69875ecd46ef9f7406ccb52409b570', name: "brand" }, h("img", { key: '8dfca875ffc837f2c413527ea106d640a9b9bb97', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '24ceb7f3ef54399ecb9b7b78418d3be9bb547f60', "aria-label": "Hauptnavigation" }, h("div", { key: 'c9fb6b1850330493e0a26bf20ea04013725025f6', role: "menubar", class: "primary-menubar" }, h("slot", { key: '19640032a28d0a9bd7f5396f7c1acd477135f864', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'c11f19e15c0fea300a771060e2e4c77cce76c20f', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '2df2cf852595a78391bcd7c3dd8b8d6db3847aaa', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'c256862d4f5ea38c120218372d9ad73ae19efd74', class: "actions" }, h("slot", { key: '91b5eb2d9ab06005384a28cddee3d6c92afd418c', name: "actions" }))));
|
|
88
88
|
}
|
|
89
89
|
static get is() { return "lmvz-header"; }
|
|
90
90
|
static get encapsulation() { return "shadow"; }
|
|
@@ -21,29 +21,29 @@
|
|
|
21
21
|
|
|
22
22
|
:host([size='xs']) {
|
|
23
23
|
svg {
|
|
24
|
-
width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.
|
|
25
|
-
height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.
|
|
24
|
+
width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
|
|
25
|
+
height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
:host([size='sm']) {
|
|
30
30
|
svg {
|
|
31
|
-
width: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.
|
|
32
|
-
height: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.
|
|
31
|
+
width: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
|
|
32
|
+
height: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
:host([size='md']) {
|
|
37
37
|
svg {
|
|
38
|
-
width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.
|
|
39
|
-
height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.
|
|
38
|
+
width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
|
|
39
|
+
height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
:host([size='lg']) {
|
|
44
44
|
svg {
|
|
45
|
-
width: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.
|
|
46
|
-
height: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.
|
|
45
|
+
width: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
|
|
46
|
+
height: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -56,7 +56,7 @@ export class LmvzIcon extends ReactiveControllerHost {
|
|
|
56
56
|
super.componentDidRender();
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
|
-
return h(Host, { key: '
|
|
59
|
+
return h(Host, { key: 'b36586af32709b492336fe4ec1fe1fe1fe7a9e4b', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
60
60
|
}
|
|
61
61
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
62
62
|
if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
--input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
|
|
42
42
|
--input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
|
|
43
43
|
--input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
|
|
44
|
-
--input-border-color-focus: var(--lmvz-semantic-color-status-on-
|
|
44
|
+
--input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
|
|
45
45
|
--input-border-width: var(--lmvz-semantic-border-width-default, 1px);
|
|
46
46
|
--input-height: 48px; /* From Figma input-size=48 */
|
|
47
47
|
--input-padding-x: 16px;
|
|
@@ -150,9 +150,9 @@ export class LmvzInput extends ReactiveControllerHost {
|
|
|
150
150
|
render() {
|
|
151
151
|
const hasValue = Boolean(this.value);
|
|
152
152
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
153
|
-
return (h("div", { key: '
|
|
153
|
+
return (h("div", { key: '9de2e4dd202edc937e96ff6ebdc8d0270851c4ca', class: classNames('input-container', {
|
|
154
154
|
'interaction-filled': hasValue,
|
|
155
|
-
}) }, h("div", { key: '
|
|
155
|
+
}) }, h("div", { key: '0c9f92778e1c52dca13ed9175a09d757fc6eedc9', class: "input-wrapper" }, h("slot", { key: '9cf29c45afdb127917a68ed6752faf3d50004c7d', name: "before-input" }), h("div", { key: 'e7e6c54b6ee6db108ac3f8ddb676bb9fcf10517e', class: "label-input-group" }, h("label", { key: '68eb29e585741971aae58c7693d011ba587f1c1b', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '274d992a43c2de45af7172608fb1581c6ee771d2', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'a26b95dee9781e0e13db16d6e09681e36cab0230', 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 })), h("slot", { key: '5b77b87ba1da3b8e71c7f6825eecf2216a93e4f9', name: "after-input" })), h("div", { key: 'cac334a1e88d4136e923ef1355196997bfe97099', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: 'b3ea662fa0a57ed0d8c3f35e36aad6b2513af8ab', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
156
156
|
}
|
|
157
157
|
static get is() { return "lmvz-input"; }
|
|
158
158
|
static get encapsulation() { return "scoped"; }
|
|
@@ -62,6 +62,6 @@
|
|
|
62
62
|
z-index: 1;
|
|
63
63
|
}
|
|
64
64
|
:host([aria-expanded='true']) {
|
|
65
|
-
--lmvz-menuitem-background: var(--lmvz-semantic-color-status-
|
|
66
|
-
--lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-
|
|
65
|
+
--lmvz-menuitem-background: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
|
|
66
|
+
--lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
|
|
67
67
|
}
|
|
@@ -21,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
21
21
|
this.addController(new ElementActivationController(this));
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: '510ac59b18468ce9c65b866ae2767185f1b3da92' }, h("slot", { key: '7e032e0dab83f9bfbaa96ad2b78d8a5a58f978ab', ref: (e) => (this.validationSlot = e) })));
|
|
25
25
|
}
|
|
26
26
|
static get is() { return "lmvz-menuitem"; }
|
|
27
27
|
static get encapsulation() { return "scoped"; }
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
--lmvz-select-label-minimized-padding-x: 4px;
|
|
57
57
|
--lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
|
|
58
58
|
--lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
|
|
59
|
-
--lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-
|
|
59
|
+
--lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
|
|
60
60
|
--lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
|
|
61
61
|
}
|
|
62
62
|
.select-wrapper {
|
|
@@ -143,8 +143,8 @@ div[aria-hidden] > span:last-child {
|
|
|
143
143
|
}
|
|
144
144
|
img {
|
|
145
145
|
display: block;
|
|
146
|
-
width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.
|
|
147
|
-
height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.
|
|
146
|
+
width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
|
|
147
|
+
height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
|
|
148
148
|
}
|
|
149
149
|
/* Native select – absolutely covers the trigger, invisible, intercepts clicks */
|
|
150
150
|
select {
|
|
@@ -50,7 +50,7 @@ export class LmvzSelect extends ReactiveControllerHost {
|
|
|
50
50
|
render() {
|
|
51
51
|
const hasValue = this.hasValue;
|
|
52
52
|
const shouldShowLabel = hasValue;
|
|
53
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: '7f4650d5971bb93dba48385df734e6b7a0b4f7eb' }, h("div", { key: '79d6234cd15f64c8bff787d715107e7e86145333', class: "select-wrapper" }, h("label", { key: '14d93469c6d309b68427ff7bfc2bd531c8f0ecf6', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'c8be809e09d768d6f73ccccdfbf0bf495869ac72', "aria-hidden": "true" }, " *")), h("div", { key: '1db5d44b44100342a4ca5feff648b61a0bdadb1a', "aria-hidden": "true" }, h("span", { key: '3fdc95aab9997a10f4ba42dabc3758aea0797a22' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '11aef8194551059130b6be5351587219a1e80f00', "aria-hidden": "true" }, " *")), h("span", { key: '8fc52ff3e46d7b52d8d5069a74ebf7bb0d981081' }, h("img", { key: '129dd4038772eba9313e1e322866c70408f4e2ad', src: chevronDownSvg, alt: "" }))), h("select", { key: '6eb6cf496e60b3c1bd9556e596cbef34d4da5a09', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '70d660e0bc7e4c127234ce77decf35d6fea7fe8d', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'e6cbc238c9c0cf8e8c31d0347a1f621272a94ca6' }))), this.helperText && h("div", { key: '432d405ee7338da46509ff207599b882a19ea44e', role: "status" }, this.helperText)));
|
|
54
54
|
}
|
|
55
55
|
static get is() { return "lmvz-select"; }
|
|
56
56
|
static get encapsulation() { return "scoped"; }
|
|
@@ -20,7 +20,7 @@ export class HeaderIntegration {
|
|
|
20
20
|
this.activeNav = navId;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: 'c192a622b5bd6dc897f68a8674b80f2f756fce9f' }, h("lmvz-header", { key: '28164f06e7c830394eff129805bb9f04a65a71d9', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'a1e7c57cf93bce45dbe072520901d420d44e3d18', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '4c7e115cf69202fea183c890877a54cbe1d8d50b', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '030f392c7fbf4555455ba29a4ce32fc66f533b85', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '2a2ed5eb44aa966ed82d2f70109e450209dfebc8', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '41f7671d33438b3c4f6f66e97aba6b71b3a751df', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'd719206230eb6b8195a50a62e1180f4b03e02096', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '3bd1c78d0c2fb0986a4c917d0fab6feb0201e26b', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'dde5646eae294c55cb4bc5adadbe45e9cbf6f49b', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: 'b25de021719847e19f59ffd008310eba28bcfb0f', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: 'e12057579322cb914f65b429cd31276738eab564', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '8cae676fc7e4c2f3308a462e7031d634c12315e2', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '2e5911e8a47aa6fd24246f0ce76611ba01a96be3', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: 'aee754e586af13dab256cfc027c259a6e8bcf817', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '25f3d2863dca590135c5880a4b0e76b5512a38df', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "header-integration"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|