@lmvz-ds/components 0.22.0 → 0.23.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 +17 -0
- package/cjs/{aria-loader-Cec1zR2g.js → aria-loader-BRo2FTGh.js} +1 -0
- package/cjs/index.cjs.js +1 -1
- package/cjs/lmvz-button_3.cjs.entry.js +375 -0
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +3 -3
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +4 -4
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -3
- package/cjs/lmvz-modal.cjs.entry.js +6 -109
- package/cjs/lmvz-select.cjs.entry.js +3 -3
- package/cjs/lmvz-toggle.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{reactive-controller-host-DnSTWHCF.js → reactive-controller-host-BOFg4vL-.js} +1 -1
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-button/lmvz-button.css +28 -17
- package/collection/components/lmvz-button/lmvz-button.js +6 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +14 -0
- package/collection/components/lmvz-button-group/lmvz-button-group.js +216 -0
- package/collection/components/lmvz-card/lmvz-card.css +27 -16
- package/collection/components/lmvz-card/lmvz-card.js +1 -1
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +1 -1
- package/collection/components/lmvz-header/lmvz-header.js +1 -1
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +24 -30
- package/collection/components/lmvz-modal/lmvz-modal.js +4 -108
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-button-group.d.ts +11 -0
- package/components/lmvz-button-group.d.ts.bak +11 -0
- package/components/lmvz-button-group.js +1 -0
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-CdDO7mQa.js +1 -0
- package/components/p-Cg2XX_J-.js +1 -0
- package/components/p-DSvYtVoD.js +1 -0
- package/components/p-K_EPq-vy.js +1 -0
- package/components/p-slgmfnHm.js +1 -0
- package/esm/{aria-loader-BVolm0lC.js → aria-loader-GfsGHZHY.js} +1 -1
- package/esm/index.js +1 -1
- package/esm/lmvz-button_3.entry.js +371 -0
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +3 -3
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-menuitem.entry.js +3 -3
- package/esm/lmvz-modal.entry.js +6 -109
- package/esm/lmvz-select.entry.js +3 -3
- package/esm/lmvz-toggle.entry.js +3 -3
- package/esm/loader.js +1 -1
- package/esm/{reactive-controller-host-lF2kXM1x.js → reactive-controller-host-CroMsXdS.js} +1 -1
- package/hydrate/index.js +268 -184
- package/hydrate/index.mjs +268 -184
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-05896617.entry.js +1 -0
- package/lmvz-components/{p-1b181e90.entry.js → p-267344a7.entry.js} +1 -1
- package/lmvz-components/{p-ea335543.entry.js → p-2b09b8bc.entry.js} +1 -1
- package/lmvz-components/p-3df92762.entry.js +1 -0
- package/lmvz-components/{p-f8ea0eb2.entry.js → p-5f550b9f.entry.js} +1 -1
- package/lmvz-components/p-8e43fabb.entry.js +1 -0
- package/lmvz-components/{p-DCTzMRMQ.js → p-BRl6zKXT.js} +1 -1
- package/lmvz-components/p-CdDO7mQa.js +1 -0
- package/lmvz-components/p-d1dacf7e.entry.js +1 -0
- package/lmvz-components/{p-d984e118.entry.js → p-f6d1d9df.entry.js} +1 -1
- package/lmvz-components/p-f7f32879.entry.js +1 -0
- package/lmvz-components/{p-08a08b63.entry.js → p-fa4e00cf.entry.js} +1 -1
- package/manifest.json +105 -11
- package/package.json +5 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +1 -1
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +20 -0
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -16
- package/types/components.d.ts +27 -3
- package/cjs/lmvz-button_2.cjs.entry.js +0 -198
- package/components/p-Boj0PCdB.js +0 -1
- package/components/p-Cc6dOWwS.js +0 -1
- package/components/p-DBc1BzQb.js +0 -1
- package/esm/lmvz-button_2.entry.js +0 -195
- package/lmvz-components/p-23fb2476.entry.js +0 -1
- package/lmvz-components/p-6bb145e4.entry.js +0 -1
- package/lmvz-components/p-7a310b1e.entry.js +0 -1
- package/lmvz-components/p-b7940687.entry.js +0 -1
- package/lmvz-components/p-db8306a5.entry.js +0 -1
- package/lmvz-components/p-dhVSUYqd.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5886,7 +5886,7 @@ class ReactiveControllerHost {
|
|
|
5886
5886
|
}
|
|
5887
5887
|
}
|
|
5888
5888
|
|
|
5889
|
-
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 {
|
|
5889
|
+
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; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-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-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); 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-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-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: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
5890
5890
|
|
|
5891
5891
|
class LmvzButton extends ReactiveControllerHost {
|
|
5892
5892
|
get el() { return getElement(this); }
|
|
@@ -5899,7 +5899,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5899
5899
|
return 0;
|
|
5900
5900
|
}
|
|
5901
5901
|
scale = 'default';
|
|
5902
|
-
variant
|
|
5902
|
+
variant;
|
|
5903
5903
|
disabled = false;
|
|
5904
5904
|
type = 'button';
|
|
5905
5905
|
form;
|
|
@@ -5974,7 +5974,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5974
5974
|
};
|
|
5975
5975
|
render() {
|
|
5976
5976
|
this.renderHiddenButton();
|
|
5977
|
-
return (hAsync(Host, { key: '
|
|
5977
|
+
return (hAsync(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, hAsync("button", { key: '226f2f4ddbf861a8aed66d72c1980aa713e667f3', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '436ecc98fc7d7350c67d01d13e5fd4566a238b03' }))));
|
|
5978
5978
|
}
|
|
5979
5979
|
static get delegatesFocus() { return true; }
|
|
5980
5980
|
static get style() { return lmvzButtonCss(); }
|
|
@@ -5998,69 +5998,22 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5998
5998
|
}; }
|
|
5999
5999
|
}
|
|
6000
6000
|
|
|
6001
|
-
|
|
6002
|
-
|
|
6003
|
-
|
|
6004
|
-
|
|
6005
|
-
|
|
6006
|
-
|
|
6007
|
-
|
|
6008
|
-
|
|
6009
|
-
|
|
6010
|
-
|
|
6011
|
-
|
|
6012
|
-
|
|
6013
|
-
Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`);
|
|
6014
|
-
return new URL(relativeAssetPath, getLocationBase());
|
|
6015
|
-
}
|
|
6016
|
-
};
|
|
6017
|
-
function joinPath(...parts) {
|
|
6018
|
-
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
6001
|
+
/**
|
|
6002
|
+
* Returns a function that delegates to the given predicate/filter and negates its result.
|
|
6003
|
+
* The returned function preserves the input function's types, arguments and timing.
|
|
6004
|
+
*
|
|
6005
|
+
* @param delegate - The predicate/filter function to negate.
|
|
6006
|
+
* @returns A function that returns the negated result.
|
|
6007
|
+
*/
|
|
6008
|
+
function negate(delegate) {
|
|
6009
|
+
return (...args) => {
|
|
6010
|
+
const result = delegate(...args);
|
|
6011
|
+
return isPromise(result) ? result.then((res) => !res) : !result;
|
|
6012
|
+
};
|
|
6019
6013
|
}
|
|
6020
6014
|
|
|
6021
|
-
const
|
|
6022
|
-
|
|
6023
|
-
class LmvzCard {
|
|
6024
|
-
constructor(hostRef) {
|
|
6025
|
-
registerInstance(this, hostRef);
|
|
6026
|
-
this.primaryAction = createEvent(this, "primaryAction", 7);
|
|
6027
|
-
}
|
|
6028
|
-
cardTitle;
|
|
6029
|
-
imageUrl;
|
|
6030
|
-
description;
|
|
6031
|
-
primaryActionLabel = '';
|
|
6032
|
-
primaryAction;
|
|
6033
|
-
get fallbackImage() {
|
|
6034
|
-
return createAssetUrlSafely('card-placeholder.svg');
|
|
6035
|
-
}
|
|
6036
|
-
_onPrimaryClick() {
|
|
6037
|
-
this.primaryAction.emit();
|
|
6038
|
-
}
|
|
6039
|
-
_onOverflowClick(event) {
|
|
6040
|
-
console.log(event);
|
|
6041
|
-
}
|
|
6042
|
-
render() {
|
|
6043
|
-
const imgStyle = {
|
|
6044
|
-
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
6045
|
-
};
|
|
6046
|
-
return (hAsync(Host, { key: '46c2832b4f90b9eb222749632bc7ad59cd645e10', role: "article" }, hAsync("div", { key: 'cc387fe96cff2dd04c24f75cf838a2bf6f438279', class: "top" }, hAsync("div", { key: 'f9a54a5f81378ef4265e1d74c36c78af002e8874', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: '76daed00408f7ae9ee46977637ddcd3d4f846380', class: "chip-slot" }, hAsync("slot", { key: '6ad522ef7428166b876d0218ef8d801c4ef337f1', name: "chip" })))), hAsync("div", { key: '9c9799668ac199cfecbe10061e271d70d70e2d07', class: "bottom" }, hAsync("header", { key: '1bec743235bea5c7ab163225ffbd7bc6cf11f754' }, hAsync("h2", { key: '06f8e14153328bc5ca920e71e09d9343047c440c', class: "title" }, this.cardTitle)), hAsync("p", { key: '86b95db4e6464ca3236b4a03798013c3580819bf', class: "description" }, this.description), hAsync("div", { key: '553dc998d5318a4730196baa0b9baff3a0a3369f', class: "actions" }, hAsync("button", { key: '7532d01b46769198c23a1b1015c187fdefce146a', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: '633d679ae59b1896aa2a06e04b4564569cf27a7d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: 'b72c45f93d259502b9d7c5ffb19e292a53c60ec6', class: "icon-placeholder" }, "..."))))));
|
|
6047
|
-
}
|
|
6048
|
-
static get assetsDirs() { return ["../../assets"]; }
|
|
6049
|
-
static get style() { return lmvzCardCss(); }
|
|
6050
|
-
static get cmpMeta() { return {
|
|
6051
|
-
"$flags$": 774,
|
|
6052
|
-
"$tagName$": "lmvz-card",
|
|
6053
|
-
"$members$": {
|
|
6054
|
-
"cardTitle": [1, "card-title"],
|
|
6055
|
-
"imageUrl": [1, "image-url"],
|
|
6056
|
-
"description": [1],
|
|
6057
|
-
"primaryActionLabel": [1, "primary-action-label"]
|
|
6058
|
-
},
|
|
6059
|
-
"$listeners$": undefined,
|
|
6060
|
-
"$lazyBundleId$": "-",
|
|
6061
|
-
"$attrsToReflect$": []
|
|
6062
|
-
}; }
|
|
6063
|
-
}
|
|
6015
|
+
const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
|
|
6016
|
+
const chipSizes = ['default', 'small'];
|
|
6064
6017
|
|
|
6065
6018
|
/**
|
|
6066
6019
|
* Tests if a value is a `function`.
|
|
@@ -8212,6 +8165,243 @@ function toValidSvgStringWithFallback(value) {
|
|
|
8212
8165
|
}
|
|
8213
8166
|
}
|
|
8214
8167
|
|
|
8168
|
+
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
|
|
8169
|
+
|
|
8170
|
+
class LmvzButtonGroup {
|
|
8171
|
+
constructor(hostRef) {
|
|
8172
|
+
registerInstance(this, hostRef);
|
|
8173
|
+
}
|
|
8174
|
+
actionsSlot;
|
|
8175
|
+
validationMessageCache = [];
|
|
8176
|
+
actionsStateObserver;
|
|
8177
|
+
get primaryEnabledAction() {
|
|
8178
|
+
return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
|
|
8179
|
+
}
|
|
8180
|
+
get hasActions() {
|
|
8181
|
+
return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
|
|
8182
|
+
}
|
|
8183
|
+
componentDidLoad() {
|
|
8184
|
+
this.handleActionsSlotChange();
|
|
8185
|
+
}
|
|
8186
|
+
disconnectedCallback() {
|
|
8187
|
+
this.actionsStateObserver?.disconnect();
|
|
8188
|
+
}
|
|
8189
|
+
get assignedElements() {
|
|
8190
|
+
return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
|
|
8191
|
+
}
|
|
8192
|
+
get assignedButtons() {
|
|
8193
|
+
return this.assignedElements.filter(isActionButton);
|
|
8194
|
+
}
|
|
8195
|
+
get visibleButtons() {
|
|
8196
|
+
return this.assignedButtons.filter(isVisible);
|
|
8197
|
+
}
|
|
8198
|
+
get enabledButtons() {
|
|
8199
|
+
return this.visibleButtons.filter(negate(isDisabledButton));
|
|
8200
|
+
}
|
|
8201
|
+
getActionValidationResult() {
|
|
8202
|
+
if (!this.visibleButtons.length) {
|
|
8203
|
+
return [];
|
|
8204
|
+
}
|
|
8205
|
+
const primaryActions = this.visibleButtons.filter(isPrimaryAction);
|
|
8206
|
+
const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
|
|
8207
|
+
const issues = [];
|
|
8208
|
+
const order = this.visibleButtons.toReversed();
|
|
8209
|
+
if (primaryActions.length !== 1)
|
|
8210
|
+
issues.push('LmvzModal actions slot must contain exactly one primary action.');
|
|
8211
|
+
if (secondaryActions.length > 1)
|
|
8212
|
+
issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
|
|
8213
|
+
if (primaryActions.length) {
|
|
8214
|
+
const primaryAction = primaryActions[0];
|
|
8215
|
+
const secondaryAction = secondaryActions[0];
|
|
8216
|
+
if (order.indexOf(primaryAction) !== 0)
|
|
8217
|
+
issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
|
|
8218
|
+
if (secondaryAction && order.indexOf(secondaryAction) !== 1)
|
|
8219
|
+
issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
|
|
8220
|
+
}
|
|
8221
|
+
else if (secondaryActions.length) {
|
|
8222
|
+
const secondaryAction = secondaryActions[0];
|
|
8223
|
+
if (order.indexOf(secondaryAction) !== 0)
|
|
8224
|
+
issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
|
|
8225
|
+
}
|
|
8226
|
+
return issues;
|
|
8227
|
+
}
|
|
8228
|
+
handleActionsSlotChange = () => {
|
|
8229
|
+
this.observeActionState();
|
|
8230
|
+
this.syncActionsState();
|
|
8231
|
+
};
|
|
8232
|
+
observeActionState() {
|
|
8233
|
+
if (typeof MutationObserver === 'undefined')
|
|
8234
|
+
return;
|
|
8235
|
+
this.actionsStateObserver?.disconnect();
|
|
8236
|
+
if (!this.assignedButtons.length)
|
|
8237
|
+
return;
|
|
8238
|
+
this.actionsStateObserver = new MutationObserver(() => {
|
|
8239
|
+
this.syncActionsState();
|
|
8240
|
+
});
|
|
8241
|
+
this.assignedButtons.forEach((element) => {
|
|
8242
|
+
this.actionsStateObserver?.observe(element, {
|
|
8243
|
+
attributes: true,
|
|
8244
|
+
attributeFilter: ['disabled', 'hidden', 'variant'],
|
|
8245
|
+
});
|
|
8246
|
+
});
|
|
8247
|
+
}
|
|
8248
|
+
syncActionsState() {
|
|
8249
|
+
const assignedElements = this.assignedElements;
|
|
8250
|
+
assignedElements.forEach((element) => {
|
|
8251
|
+
const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
8252
|
+
if (isAllowedAction)
|
|
8253
|
+
return;
|
|
8254
|
+
if (!element.hasAttribute('hidden')) {
|
|
8255
|
+
element.setAttribute('hidden', '');
|
|
8256
|
+
}
|
|
8257
|
+
if (element.getAttribute('aria-hidden') !== 'true') {
|
|
8258
|
+
element.setAttribute('aria-hidden', 'true');
|
|
8259
|
+
}
|
|
8260
|
+
});
|
|
8261
|
+
this.checkActions();
|
|
8262
|
+
const length = this.visibleButtons.length;
|
|
8263
|
+
for (let i = 0; i < length; i++) {
|
|
8264
|
+
const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
|
|
8265
|
+
const element = this.visibleButtons.at(i);
|
|
8266
|
+
if (!element)
|
|
8267
|
+
continue;
|
|
8268
|
+
if (isLmvzButton(element)) {
|
|
8269
|
+
if (!element.getAttribute('variant'))
|
|
8270
|
+
element.setAttribute('variant', variant);
|
|
8271
|
+
}
|
|
8272
|
+
else {
|
|
8273
|
+
element.classList.add(variant);
|
|
8274
|
+
}
|
|
8275
|
+
}
|
|
8276
|
+
this.focusPrimaryAction();
|
|
8277
|
+
}
|
|
8278
|
+
focusPrimaryAction() {
|
|
8279
|
+
const focusTarget = this.primaryEnabledAction;
|
|
8280
|
+
if (!focusTarget || typeof window === 'undefined')
|
|
8281
|
+
return;
|
|
8282
|
+
window.requestAnimationFrame(() => {
|
|
8283
|
+
if (canReceiveFocus(focusTarget)) {
|
|
8284
|
+
focusTarget.focus();
|
|
8285
|
+
}
|
|
8286
|
+
});
|
|
8287
|
+
}
|
|
8288
|
+
checkActions() {
|
|
8289
|
+
if (!isAriaValidationEnabled())
|
|
8290
|
+
return;
|
|
8291
|
+
const issues = this.getActionValidationResult();
|
|
8292
|
+
if (!issues.length) {
|
|
8293
|
+
return;
|
|
8294
|
+
}
|
|
8295
|
+
issues.forEach((issue) => {
|
|
8296
|
+
if (this.validationMessageCache.includes(issue))
|
|
8297
|
+
return;
|
|
8298
|
+
console.warn(issue);
|
|
8299
|
+
this.validationMessageCache.push(issue);
|
|
8300
|
+
});
|
|
8301
|
+
}
|
|
8302
|
+
render() {
|
|
8303
|
+
return (hAsync(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, hAsync("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
|
|
8304
|
+
}
|
|
8305
|
+
static get style() { return lmvzButtonGroupCss(); }
|
|
8306
|
+
static get cmpMeta() { return {
|
|
8307
|
+
"$flags$": 265,
|
|
8308
|
+
"$tagName$": "lmvz-button-group",
|
|
8309
|
+
"$members$": {
|
|
8310
|
+
"primaryEnabledAction": [2064],
|
|
8311
|
+
"hasActions": [2052, "has-actions"]
|
|
8312
|
+
},
|
|
8313
|
+
"$listeners$": undefined,
|
|
8314
|
+
"$lazyBundleId$": "-",
|
|
8315
|
+
"$attrsToReflect$": []
|
|
8316
|
+
}; }
|
|
8317
|
+
}
|
|
8318
|
+
function isActionButton(element) {
|
|
8319
|
+
return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
8320
|
+
}
|
|
8321
|
+
function isLmvzButton(element) {
|
|
8322
|
+
return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
|
|
8323
|
+
}
|
|
8324
|
+
function isDisabledButton(element) {
|
|
8325
|
+
return element.hasAttribute('disabled') || element.disabled === true;
|
|
8326
|
+
}
|
|
8327
|
+
function isVisible(element) {
|
|
8328
|
+
return !element.hasAttribute('hidden');
|
|
8329
|
+
}
|
|
8330
|
+
function getActionVariant(element) {
|
|
8331
|
+
const variant = element.getAttribute('variant') ?? element.variant;
|
|
8332
|
+
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
8333
|
+
}
|
|
8334
|
+
function isPrimaryAction(element) {
|
|
8335
|
+
return getActionVariant(element) === 'primary';
|
|
8336
|
+
}
|
|
8337
|
+
function isSecondaryAction(element) {
|
|
8338
|
+
return getActionVariant(element) === 'secondary';
|
|
8339
|
+
}
|
|
8340
|
+
|
|
8341
|
+
function getLocationBase() {
|
|
8342
|
+
return (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('@app-factory-entry.js', document.baseURI).href)) ?? window?.location?.origin ?? '';
|
|
8343
|
+
}
|
|
8344
|
+
|
|
8345
|
+
const relativeAssetsPath = '../../assets';
|
|
8346
|
+
const createAssetUrlSafely = (file, pathFromAssetRoot) => {
|
|
8347
|
+
const relativeAssetPath = joinPath(relativeAssetsPath, pathFromAssetRoot, file);
|
|
8348
|
+
try {
|
|
8349
|
+
return getAssetPath(relativeAssetPath);
|
|
8350
|
+
}
|
|
8351
|
+
catch {
|
|
8352
|
+
console.warn(`Failed to create URL for asset "${file}" in path "${pathFromAssetRoot}".
|
|
8353
|
+
Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`);
|
|
8354
|
+
return new URL(relativeAssetPath, getLocationBase());
|
|
8355
|
+
}
|
|
8356
|
+
};
|
|
8357
|
+
function joinPath(...parts) {
|
|
8358
|
+
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
8359
|
+
}
|
|
8360
|
+
|
|
8361
|
+
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; } *[hidden] { display: none !important; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-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-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); 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-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-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; }`;
|
|
8362
|
+
|
|
8363
|
+
class LmvzCard {
|
|
8364
|
+
constructor(hostRef) {
|
|
8365
|
+
registerInstance(this, hostRef);
|
|
8366
|
+
this.primaryAction = createEvent(this, "primaryAction", 7);
|
|
8367
|
+
}
|
|
8368
|
+
cardTitle;
|
|
8369
|
+
imageUrl;
|
|
8370
|
+
description;
|
|
8371
|
+
primaryActionLabel = '';
|
|
8372
|
+
primaryAction;
|
|
8373
|
+
get fallbackImage() {
|
|
8374
|
+
return createAssetUrlSafely('card-placeholder.svg');
|
|
8375
|
+
}
|
|
8376
|
+
_onPrimaryClick() {
|
|
8377
|
+
this.primaryAction.emit();
|
|
8378
|
+
}
|
|
8379
|
+
_onOverflowClick(event) {
|
|
8380
|
+
console.log(event);
|
|
8381
|
+
}
|
|
8382
|
+
render() {
|
|
8383
|
+
const imgStyle = {
|
|
8384
|
+
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
8385
|
+
};
|
|
8386
|
+
return (hAsync(Host, { key: '2d9ecdeed986f142fb7ff477b56dece59549bbc7', role: "article" }, hAsync("div", { key: '34fc9c3a1338b31ce73424e8c07c79a291ead85c', class: "top" }, hAsync("div", { key: '1756e6b26d7f42499753c36ed0fc13755fe32bfe', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: 'cd8be8acc9e949092b6363024316d12d445a9fbc', class: "chip-slot" }, hAsync("slot", { key: '26389ab3b7031b948ff1701857e6028446662cf5', name: "chip" })))), hAsync("div", { key: '2fa61cd7bef437f15929ae39be7fa294e8778321', class: "bottom" }, hAsync("header", { key: 'b237ca025e42a29f528f827dc3c83b3b0f9267c0' }, hAsync("h2", { key: 'ffd0a509ba97acb75d4c15d0fd01eef08689a2a7', class: "title" }, this.cardTitle)), hAsync("p", { key: 'c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1', class: "description" }, this.description), hAsync("div", { key: '7663f93b41ef1e798b464bd6ad75ca8a53c0667b', class: "actions" }, hAsync("button", { key: '3348e6700aa1571183558ab8fe4f73393c1cc943', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: 'd3a12cdabbdd68c3b04e06984db44abd3bbd22ea', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: '80e31e6b691e18d1b42a2b4831349c3abf8e02b0', class: "icon-placeholder" }, "..."))))));
|
|
8387
|
+
}
|
|
8388
|
+
static get assetsDirs() { return ["../../assets"]; }
|
|
8389
|
+
static get style() { return lmvzCardCss(); }
|
|
8390
|
+
static get cmpMeta() { return {
|
|
8391
|
+
"$flags$": 774,
|
|
8392
|
+
"$tagName$": "lmvz-card",
|
|
8393
|
+
"$members$": {
|
|
8394
|
+
"cardTitle": [1, "card-title"],
|
|
8395
|
+
"imageUrl": [1, "image-url"],
|
|
8396
|
+
"description": [1],
|
|
8397
|
+
"primaryActionLabel": [1, "primary-action-label"]
|
|
8398
|
+
},
|
|
8399
|
+
"$listeners$": undefined,
|
|
8400
|
+
"$lazyBundleId$": "-",
|
|
8401
|
+
"$attrsToReflect$": []
|
|
8402
|
+
}; }
|
|
8403
|
+
}
|
|
8404
|
+
|
|
8215
8405
|
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPgogICAgPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+';
|
|
8216
8406
|
|
|
8217
8407
|
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; } }`;
|
|
@@ -8305,7 +8495,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
|
|
|
8305
8495
|
this.lmvzChange.emit(this.checked);
|
|
8306
8496
|
};
|
|
8307
8497
|
render() {
|
|
8308
|
-
return (hAsync(Host, { key: '
|
|
8498
|
+
return (hAsync(Host, { key: '70201fa49465f1e29b98bb251ea254be0293b1df' }, hAsync("div", { key: 'dfeb788e3e2d9a8329e7798954c744eee616692e', class: "pill" }, hAsync("input", { key: '79fefaa297a5fbbb1b7f180c7cf4cccf8650a1f0', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: '8808a026274979678515b3e750065af38d62fff9', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '861c08fb2a5cc6f24d3ae0a9f28cb6d2f51beda4', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '6dc36656d76bd3a6816553b4dcbdbea2c9bd2b0f', class: "content" }, hAsync("label", { key: 'c343c4261e2eb231925d0f3ca0a83f9f3cdd0b9b', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '8473ed19adfe975b715a5e0b78c949c6b11de99e', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: 'e934cec1cc622908188cf9090e24988e5df45799', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
8309
8499
|
}
|
|
8310
8500
|
static get formAssociated() { return true; }
|
|
8311
8501
|
static get watchers() { return {
|
|
@@ -8353,9 +8543,6 @@ function debounce(func, wait) {
|
|
|
8353
8543
|
};
|
|
8354
8544
|
}
|
|
8355
8545
|
|
|
8356
|
-
const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
|
|
8357
|
-
const chipSizes = ['default', 'small'];
|
|
8358
|
-
|
|
8359
8546
|
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); } `;
|
|
8360
8547
|
|
|
8361
8548
|
class LmvzChip extends ReactiveControllerHost {
|
|
@@ -8404,7 +8591,7 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8404
8591
|
}
|
|
8405
8592
|
}, 500);
|
|
8406
8593
|
render() {
|
|
8407
|
-
return (hAsync(Host, { key: '
|
|
8594
|
+
return (hAsync(Host, { key: '70654d69189e77f9356853a921366083b2c4b969', type: this.type, size: this.size }, hAsync("slot", { key: 'c7e667b93166286fe68a812dd8eec82885e3fc5e', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: 'af38dd0429b42685a114e26175ce42d09f5fdcc1', class: "content-overflow-wrapper" }, hAsync("slot", { key: '924158498d65b9ac7c912b6b1a479016176e0b78', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '9ff0394dbfb2131fafe513d0f2d8ce26c7781f20', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
8408
8595
|
}
|
|
8409
8596
|
static get watchers() { return {
|
|
8410
8597
|
"type": [{
|
|
@@ -8560,7 +8747,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
8560
8747
|
}
|
|
8561
8748
|
}
|
|
8562
8749
|
render() {
|
|
8563
|
-
return (hAsync(Host, { key: '
|
|
8750
|
+
return (hAsync(Host, { key: '323b7b13ef147f48e5f06537c7f27ab6e8a649ca', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '518434d55b7bfc5c1a8988f707984b8e2a41163c', class: "brand" }, hAsync("slot", { key: '1829a1ba10ba3a4e1a0e32564c534e960dc652d1', name: "brand" }, hAsync("img", { key: '485c217a7fc920646ec531cac9744a10f29dab4e', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: 'df2cea9f42427c0bb51a498cc2627f0113a608a0', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '93d6e0edc45c0032c5d3c93ea5f22e204fb0617e', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '1b0238ca89023cc9a0ec4453e79a4597aaa92f2a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'd7576b23a5f9268a106c98052a869825493e0485', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: 'ada5f271c58350c44bb55c3bd976450214795f2b', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'db47039ebf932942210fd3f0920f9f86f9d2b09b', class: "actions" }, hAsync("slot", { key: '2d220a2946f26e69052d20dd4524e60fafbfe137', name: "actions" }))));
|
|
8564
8751
|
}
|
|
8565
8752
|
static get watchers() { return {
|
|
8566
8753
|
"lmvzActiveNav": [{
|
|
@@ -8628,7 +8815,7 @@ class LmvzIcon extends ReactiveControllerHost {
|
|
|
8628
8815
|
super.componentDidRender();
|
|
8629
8816
|
}
|
|
8630
8817
|
render() {
|
|
8631
|
-
return hAsync(Host, { key: '
|
|
8818
|
+
return hAsync(Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
8632
8819
|
}
|
|
8633
8820
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
8634
8821
|
{
|
|
@@ -8821,9 +9008,9 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
8821
9008
|
render() {
|
|
8822
9009
|
const hasValue = Boolean(this.value);
|
|
8823
9010
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
8824
|
-
return (hAsync("div", { key: '
|
|
9011
|
+
return (hAsync("div", { key: 'b8c3aaccafb89725aaa157a72633c67ae8b4d58c', class: classNames('input-container', {
|
|
8825
9012
|
'interaction-filled': hasValue,
|
|
8826
|
-
}) }, hAsync("div", { key: '
|
|
9013
|
+
}) }, hAsync("div", { key: '80261c486d3bfe61aa060d50e9a6774c961339a1', class: "input-wrapper" }, hAsync("slot", { key: '6856dd64991251adc63d8064ed63e9cf7b1773a2', name: "before-input" }), hAsync("div", { key: 'c975357079efef465c56fb50cbb404bd1cbe3fb1', class: "label-input-group" }, hAsync("label", { key: '798417172f8411be97866edbffbd2bb98c308c69', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '9fd59f3d93c984304e6c8ae6531df82bc0057243', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: 'a4e1133b4891c01044365eb3c97ee234c84c9bac', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: 'c774f03e704889b524f305c00d60c0902abdff5f', name: "after-input" })), hAsync("div", { key: 'f513746541c71ce0d67c26eb220b54408fc3f136', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '197683e55807bf100ca1543f5b84b14e910e721f', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
8827
9014
|
}
|
|
8828
9015
|
static get formAssociated() { return true; }
|
|
8829
9016
|
static get watchers() { return {
|
|
@@ -8901,7 +9088,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
8901
9088
|
this.addController(new ElementActivationController(this));
|
|
8902
9089
|
}
|
|
8903
9090
|
render() {
|
|
8904
|
-
return (hAsync(Host, { key: '
|
|
9091
|
+
return (hAsync(Host, { key: '3a722fe1fbacabd99ac5a5bd23537a1ff383fb95' }, hAsync("slot", { key: 'e475dd50bbd2f9f349edb61766a0b21c1fb1ae16', ref: (e) => (this.validationSlot = e) })));
|
|
8905
9092
|
}
|
|
8906
9093
|
static get style() { return lmvzMenuitemCss(); }
|
|
8907
9094
|
static get cmpMeta() { return {
|
|
@@ -8919,7 +9106,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
8919
9106
|
|
|
8920
9107
|
const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
|
|
8921
9108
|
|
|
8922
|
-
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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; }
|
|
9109
|
+
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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; } *[hidden] { display: none !important; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { position: relative; display: flex; flex-direction: column; inline-size: fit-content; max-inline-size: clamp(40rem, 100%, 80vw); gap: var(--lmvz-modal-shell-gap); padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)); padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-modal-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); overflow: auto; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } @media (min-width: 768px) { .modal-shell { max-inline-size: 100vw; } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } `;
|
|
8923
9110
|
|
|
8924
9111
|
const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
|
|
8925
9112
|
let modalIdCounter = 0;
|
|
@@ -8928,16 +9115,13 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
8928
9115
|
inheritedAriaAttributes = {};
|
|
8929
9116
|
dialogEl;
|
|
8930
9117
|
dialogStateObserver;
|
|
8931
|
-
actionsStateObserver;
|
|
8932
9118
|
headerSlot;
|
|
8933
|
-
|
|
9119
|
+
buttonGroupEl;
|
|
8934
9120
|
closeButtonEl;
|
|
8935
9121
|
previouslyFocusedElement = null;
|
|
8936
9122
|
wrappedDialogShowModal;
|
|
8937
|
-
lastActionValidationMessage;
|
|
8938
9123
|
pendingCloseReturnValue;
|
|
8939
9124
|
dialogTitleId = `lmvz-modal-title-${modalIdCounter++}`;
|
|
8940
|
-
hasActions = false;
|
|
8941
9125
|
hasHeader = false;
|
|
8942
9126
|
open = false;
|
|
8943
9127
|
closeLabel = 'Schliessen';
|
|
@@ -8949,9 +9133,6 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
8949
9133
|
get validationEl() {
|
|
8950
9134
|
return this.dialogEl ?? this.el;
|
|
8951
9135
|
}
|
|
8952
|
-
get validationSlot() {
|
|
8953
|
-
return this.actionsSlot;
|
|
8954
|
-
}
|
|
8955
9136
|
constructor(hostRef) {
|
|
8956
9137
|
super();
|
|
8957
9138
|
registerInstance(this, hostRef);
|
|
@@ -8982,13 +9163,11 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
8982
9163
|
}
|
|
8983
9164
|
componentDidLoad() {
|
|
8984
9165
|
this.handleHeaderSlotChange();
|
|
8985
|
-
this.handleActionsSlotChange();
|
|
8986
9166
|
this.observeDialogState();
|
|
8987
9167
|
this.syncDialogVisibility();
|
|
8988
9168
|
super.componentDidLoad();
|
|
8989
9169
|
}
|
|
8990
9170
|
disconnectedCallback() {
|
|
8991
|
-
this.actionsStateObserver?.disconnect();
|
|
8992
9171
|
this.dialogStateObserver?.disconnect();
|
|
8993
9172
|
super.disconnectedCallback();
|
|
8994
9173
|
}
|
|
@@ -9020,43 +9199,6 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9020
9199
|
}
|
|
9021
9200
|
return attributes;
|
|
9022
9201
|
}
|
|
9023
|
-
get actionButtons() {
|
|
9024
|
-
return (this.actionsSlot?.assignedElements({ flatten: true }) ?? []).filter((element) => {
|
|
9025
|
-
return this.isVisibleActionButton(element);
|
|
9026
|
-
});
|
|
9027
|
-
}
|
|
9028
|
-
get enabledActionButtons() {
|
|
9029
|
-
return this.actionButtons.filter((element) => {
|
|
9030
|
-
return !this.isDisabledActionButton(element);
|
|
9031
|
-
});
|
|
9032
|
-
}
|
|
9033
|
-
get assignedActionElements() {
|
|
9034
|
-
return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
|
|
9035
|
-
}
|
|
9036
|
-
isDisabledActionButton(element) {
|
|
9037
|
-
return element.hasAttribute('disabled') || element.disabled === true;
|
|
9038
|
-
}
|
|
9039
|
-
getActionVariant(element) {
|
|
9040
|
-
const variant = element.getAttribute('variant') ?? element.variant;
|
|
9041
|
-
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
9042
|
-
}
|
|
9043
|
-
getActionValidationResult() {
|
|
9044
|
-
if (!this.actionButtons.length) {
|
|
9045
|
-
return {};
|
|
9046
|
-
}
|
|
9047
|
-
const primaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'primary');
|
|
9048
|
-
const secondaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'secondary');
|
|
9049
|
-
const issues = [
|
|
9050
|
-
primaryActions.length !== 1 ? `${primaryActions.length} primary action${primaryActions.length === 1 ? '' : 's'}` : undefined,
|
|
9051
|
-
secondaryActions.length > 1 ? `${secondaryActions.length} secondary actions` : undefined,
|
|
9052
|
-
].filter((issue) => Boolean(issue));
|
|
9053
|
-
return {
|
|
9054
|
-
errorMessage: issues.length
|
|
9055
|
-
? `LmvzModal actions slot must contain exactly one primary action, at most one secondary action, and optional tertiary actions. Received ${issues.join(' and ')}.`
|
|
9056
|
-
: undefined,
|
|
9057
|
-
primaryAction: primaryActions[0],
|
|
9058
|
-
};
|
|
9059
|
-
}
|
|
9060
9202
|
hasAssignedContent(slot) {
|
|
9061
9203
|
return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => {
|
|
9062
9204
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
@@ -9083,9 +9225,6 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9083
9225
|
attributeFilter: ['open'],
|
|
9084
9226
|
});
|
|
9085
9227
|
}
|
|
9086
|
-
isVisibleActionButton(element) {
|
|
9087
|
-
return element.tagName === 'LMVZ-BUTTON' && !element.hasAttribute('hidden');
|
|
9088
|
-
}
|
|
9089
9228
|
capturePreviouslyFocusedElement() {
|
|
9090
9229
|
const dialog = this.dialogEl;
|
|
9091
9230
|
const activeElement = getDeepActiveElement(document);
|
|
@@ -9138,10 +9277,7 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9138
9277
|
}
|
|
9139
9278
|
}
|
|
9140
9279
|
focusPrimaryAction() {
|
|
9141
|
-
const
|
|
9142
|
-
return this.getActionVariant(element) === 'primary';
|
|
9143
|
-
}) ?? this.enabledActionButtons[0];
|
|
9144
|
-
const focusTarget = primaryAction ?? this.closeButtonEl;
|
|
9280
|
+
const focusTarget = this.buttonGroupEl?.primaryEnabledAction ?? this.closeButtonEl;
|
|
9145
9281
|
if (!focusTarget || typeof window === 'undefined')
|
|
9146
9282
|
return;
|
|
9147
9283
|
window.requestAnimationFrame(() => {
|
|
@@ -9193,60 +9329,8 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9193
9329
|
handleHeaderSlotChange = () => {
|
|
9194
9330
|
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
9195
9331
|
};
|
|
9196
|
-
observeActionState() {
|
|
9197
|
-
if (typeof MutationObserver === 'undefined')
|
|
9198
|
-
return;
|
|
9199
|
-
this.actionsStateObserver?.disconnect();
|
|
9200
|
-
if (!this.assignedActionElements.length)
|
|
9201
|
-
return;
|
|
9202
|
-
this.actionsStateObserver = new MutationObserver(() => {
|
|
9203
|
-
this.syncActionsState();
|
|
9204
|
-
});
|
|
9205
|
-
this.assignedActionElements.forEach((element) => {
|
|
9206
|
-
this.actionsStateObserver?.observe(element, {
|
|
9207
|
-
attributes: true,
|
|
9208
|
-
attributeFilter: ['disabled', 'hidden', 'variant'],
|
|
9209
|
-
});
|
|
9210
|
-
});
|
|
9211
|
-
}
|
|
9212
|
-
syncActionsState() {
|
|
9213
|
-
const assignedElements = this.assignedActionElements;
|
|
9214
|
-
assignedElements.forEach((element) => {
|
|
9215
|
-
const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
9216
|
-
if (isAllowedAction)
|
|
9217
|
-
return;
|
|
9218
|
-
if (!element.hasAttribute('hidden')) {
|
|
9219
|
-
element.setAttribute('hidden', '');
|
|
9220
|
-
}
|
|
9221
|
-
if (element.getAttribute('aria-hidden') !== 'true') {
|
|
9222
|
-
element.setAttribute('aria-hidden', 'true');
|
|
9223
|
-
}
|
|
9224
|
-
});
|
|
9225
|
-
this.hasActions = assignedElements.some((element) => this.isVisibleActionButton(element));
|
|
9226
|
-
this.checkActions();
|
|
9227
|
-
if (this.open) {
|
|
9228
|
-
this.focusPrimaryAction();
|
|
9229
|
-
}
|
|
9230
|
-
}
|
|
9231
|
-
handleActionsSlotChange = () => {
|
|
9232
|
-
this.syncActionsState();
|
|
9233
|
-
this.observeActionState();
|
|
9234
|
-
};
|
|
9235
|
-
checkActions() {
|
|
9236
|
-
if (!isAriaValidationEnabled())
|
|
9237
|
-
return;
|
|
9238
|
-
const { errorMessage } = this.getActionValidationResult();
|
|
9239
|
-
if (!errorMessage) {
|
|
9240
|
-
this.lastActionValidationMessage = undefined;
|
|
9241
|
-
return;
|
|
9242
|
-
}
|
|
9243
|
-
if (this.lastActionValidationMessage === errorMessage)
|
|
9244
|
-
return;
|
|
9245
|
-
console.error(errorMessage);
|
|
9246
|
-
this.lastActionValidationMessage = errorMessage;
|
|
9247
|
-
}
|
|
9248
9332
|
render() {
|
|
9249
|
-
return (hAsync(Host, { key: '
|
|
9333
|
+
return (hAsync(Host, { key: 'f014c692b82fae6dd96dffdbda4043aa9174004f' }, hAsync("dialog", { key: '8939eda4aba44f1b6c9e8983cacddba83f668692', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '93f43c5f7c258494c86f9604b7eeac0046f912d6', class: "modal-shell" }, hAsync("header", { key: '2e8177a5e0812007fede430533e6a0aa9b7bc0ea', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: 'fb4b537386077b837758f4b61c45433ad6c747cc', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: '2507b2b7af3b18e859e87b7d682bdf189c4df53d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: '5e4bcd8771babae9a9dc34fc908eb9210639a497', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '32aada0eea679fd1610eb704ac02cca1f27168ff', icon: closeIconSvg }))), hAsync("div", { key: '1dc811f3edcd9ab1611483c90345483fee94b318', class: "body" }, hAsync("slot", { key: 'cf870234c54d659cdd85d1a736626707f65cca4a' })), hAsync("footer", { key: 'c2ed7badb41a09d1187af2221f33fc2a87bcb606', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: 'c4846b44ff94b0411d79d88b3bb8447dd2a5967a', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: '3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff', name: "actions" })))))));
|
|
9250
9334
|
}
|
|
9251
9335
|
static get watchers() { return {
|
|
9252
9336
|
"open": [{
|
|
@@ -9260,7 +9344,6 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9260
9344
|
"$members$": {
|
|
9261
9345
|
"open": [1540],
|
|
9262
9346
|
"closeLabel": [1, "close-label"],
|
|
9263
|
-
"hasActions": [32],
|
|
9264
9347
|
"hasHeader": [32]
|
|
9265
9348
|
},
|
|
9266
9349
|
"$listeners$": [[0, "submit", "handleFormDialogSubmit"]],
|
|
@@ -9323,7 +9406,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
9323
9406
|
render() {
|
|
9324
9407
|
const hasValue = this.hasValue;
|
|
9325
9408
|
const shouldShowLabel = hasValue;
|
|
9326
|
-
return (hAsync(Host, { key: '
|
|
9409
|
+
return (hAsync(Host, { key: 'f4d3104f4022581e4661f2181eec5d56ac7027af' }, hAsync("div", { key: '1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7', class: "select-wrapper" }, hAsync("label", { key: 'ff7a2e509c637424387b38b163739183deda3cba', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '7e3c03652d16dd1a20628d800ccae4221062d4b8', "aria-hidden": "true" }, " *")), hAsync("div", { key: 'a2ee01b6ddfa98565fc1c41c9b9391091d254daf', "aria-hidden": "true" }, hAsync("span", { key: 'c96a6960f693baca0ba48b44e569ad87c1bbc980' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '4631b13509919f7bfd0e5a1287334cd3a8412e50', "aria-hidden": "true" }, " *")), hAsync("span", { key: '4781647ee3a6a780e4253b9f92738c4645e20578' }, hAsync("img", { key: 'c83dab75df9ff20ec40b63f45cbe8262d1c71d7d', src: chevronDownSvg, alt: "" }))), hAsync("select", { key: '035b19878300ac1f7b04b61157e39587782b44f7', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: 'da76b299a1df9da8475e115b82d7e427cc659bfa', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '1a91b540bc8ab97723df24c9c77d2bd52d941c92' }))), this.helperText && hAsync("div", { key: '347fe4d805a58e03f2cb2ef427b0dba0b805e8be', role: "status" }, this.helperText)));
|
|
9327
9410
|
}
|
|
9328
9411
|
static get watchers() { return {
|
|
9329
9412
|
"value": [{
|
|
@@ -9423,7 +9506,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
9423
9506
|
this.lmvzChange.emit(newChecked);
|
|
9424
9507
|
};
|
|
9425
9508
|
render() {
|
|
9426
|
-
return (hAsync(Host, { key: '
|
|
9509
|
+
return (hAsync(Host, { key: 'b7d3c3d2ae30744669032797b2fefcd1e7fe0b61' }, hAsync("span", { key: '93dc128b588e19a5e322cb93efae33669375709a', class: "track" }, hAsync("input", { key: '80650720ac6276f7c8996e071d8104e98002e06e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '59838c27a032d7a116faea67fa1dc75cf9ee92cd', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '809057cf268adf05c8163a802a6020dca9b666b9', htmlFor: this.toggleId }, this.label)));
|
|
9427
9510
|
}
|
|
9428
9511
|
static get formAssociated() { return true; }
|
|
9429
9512
|
static get watchers() { return {
|
|
@@ -9461,6 +9544,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
9461
9544
|
registerComponents([
|
|
9462
9545
|
LmvzAction,
|
|
9463
9546
|
LmvzButton,
|
|
9547
|
+
LmvzButtonGroup,
|
|
9464
9548
|
LmvzCard,
|
|
9465
9549
|
LmvzCheckbox,
|
|
9466
9550
|
LmvzChip,
|