@lmvz-ds/components 0.20.0 → 0.22.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 +12 -0
- package/assets/icons/close-sm.svg +3 -0
- package/cjs/{component-Csg9MtNK.js → component-C7cavwmZ.js} +3 -0
- package/cjs/{index-C2yDXRqP.js → index-lW-SEvL7.js} +67 -3
- package/cjs/lmvz-action.cjs.entry.js +2 -2
- package/cjs/{lmvz-button.cjs.entry.js → lmvz-button_2.cjs.entry.js} +139 -14
- 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 +4 -4
- package/cjs/lmvz-components.cjs.js +2 -2
- 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 +349 -0
- package/cjs/lmvz-select.cjs.entry.js +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +96 -0
- package/cjs/loader.cjs.js +2 -2
- package/cjs/{reactive-controller-host-BA4ZhjKA.js → reactive-controller-host-DnSTWHCF.js} +1 -1
- package/collection/assets/icons/close-sm.svg +3 -0
- package/collection/collection-manifest.json +2 -0
- package/collection/components/lmvz-button/lmvz-button.js +98 -10
- package/collection/components/lmvz-chip/lmvz-chip.js +2 -2
- package/collection/components/lmvz-modal/lmvz-modal.css +120 -0
- package/collection/components/lmvz-modal/lmvz-modal.js +448 -0
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +118 -0
- package/collection/components/lmvz-toggle/lmvz-toggle.js +358 -0
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.d.ts +4 -0
- package/components/index.d.ts.bak +4 -0
- package/components/index.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-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.d.ts +11 -0
- package/components/lmvz-modal.d.ts.bak +11 -0
- package/components/lmvz-modal.js +1 -0
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.d.ts +11 -0
- package/components/lmvz-toggle.d.ts.bak +11 -0
- package/components/lmvz-toggle.js +1 -0
- package/components/p-Boj0PCdB.js +1 -0
- package/components/p-CK8cAKcB.js +1 -0
- package/components/p-Cc6dOWwS.js +1 -0
- package/components/{p-BuFx0tTm.js → p-DBc1BzQb.js} +1 -1
- package/components/p-DOTK1OW3.js +1 -0
- package/esm/{component-DIrAQ4IB.js → component-DOTK1OW3.js} +3 -0
- package/esm/{index-saW7O-EW.js → index-Aa_425iY.js} +67 -3
- package/esm/lmvz-action.entry.js +2 -2
- package/esm/{lmvz-button.entry.js → lmvz-button_2.entry.js} +139 -15
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +3 -3
- package/esm/lmvz-chip.entry.js +4 -4
- package/esm/lmvz-components.js +3 -3
- 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 +347 -0
- package/esm/lmvz-select.entry.js +4 -4
- package/esm/lmvz-toggle.entry.js +94 -0
- package/esm/loader.js +3 -3
- package/esm/{reactive-controller-host-DHcPpJW7.js → reactive-controller-host-lF2kXM1x.js} +1 -1
- package/hydrate/index.js +559 -24
- package/hydrate/index.mjs +559 -24
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-08a08b63.entry.js +1 -0
- package/lmvz-components/p-1b181e90.entry.js +1 -0
- package/lmvz-components/p-23fb2476.entry.js +1 -0
- package/lmvz-components/p-3846ba08.entry.js +1 -0
- package/lmvz-components/p-6bb145e4.entry.js +1 -0
- package/lmvz-components/{p-2f83d7a2.entry.js → p-7a310b1e.entry.js} +1 -1
- package/lmvz-components/p-Aa_425iY.js +2 -0
- package/lmvz-components/{p-GdMr6Qlp.js → p-DCTzMRMQ.js} +1 -1
- package/lmvz-components/p-DOTK1OW3.js +1 -0
- package/lmvz-components/p-b7940687.entry.js +1 -0
- package/lmvz-components/p-d984e118.entry.js +1 -0
- package/lmvz-components/p-db8306a5.entry.js +1 -0
- package/lmvz-components/p-ea335543.entry.js +1 -0
- package/lmvz-components/p-f8ea0eb2.entry.js +1 -0
- package/manifest.json +599 -5
- package/package.json +9 -1
- package/types/api/index.d.ts +6 -0
- package/types/components/lmvz-button/lmvz-button.d.ts +4 -0
- package/types/components/lmvz-modal/lmvz-modal.d.ts +58 -0
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +31 -0
- package/types/components.d.ts +196 -0
- package/cjs/lmvz-icon.cjs.entry.js +0 -100
- package/components/p-C_bScbrd.js +0 -1
- package/components/p-DIrAQ4IB.js +0 -1
- package/esm/lmvz-icon.entry.js +0 -98
- package/lmvz-components/p-0f7a4236.entry.js +0 -1
- package/lmvz-components/p-32171f4f.entry.js +0 -1
- package/lmvz-components/p-400b2318.entry.js +0 -1
- package/lmvz-components/p-43e295ba.entry.js +0 -1
- package/lmvz-components/p-851969bd.entry.js +0 -1
- package/lmvz-components/p-9f9d845d.entry.js +0 -1
- package/lmvz-components/p-DIrAQ4IB.js +0 -1
- package/lmvz-components/p-a12f95da.entry.js +0 -1
- package/lmvz-components/p-ab4437dc.entry.js +0 -1
- package/lmvz-components/p-d0a0e206.entry.js +0 -1
- package/lmvz-components/p-saW7O-EW.js +0 -2
package/hydrate/index.mjs
CHANGED
|
@@ -1833,9 +1833,9 @@ var createEvent = (ref, name, flags) => {
|
|
|
1833
1833
|
return {
|
|
1834
1834
|
emit: (detail) => {
|
|
1835
1835
|
return emitEvent(elm, name, {
|
|
1836
|
-
bubbles:
|
|
1837
|
-
composed:
|
|
1838
|
-
cancelable:
|
|
1836
|
+
bubbles: !!(flags & 4 /* Bubbles */),
|
|
1837
|
+
composed: !!(flags & 2 /* Composed */),
|
|
1838
|
+
cancelable: !!(flags & 1 /* Cancellable */),
|
|
1839
1839
|
detail
|
|
1840
1840
|
});
|
|
1841
1841
|
}
|
|
@@ -2638,6 +2638,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
2638
2638
|
hostRef.$deferredConnectedCallback$ = false;
|
|
2639
2639
|
safeCall(instance, "connectedCallback", void 0, elm);
|
|
2640
2640
|
}
|
|
2641
|
+
{
|
|
2642
|
+
hostRef.$flags$ |= 256 /* isListenReady */;
|
|
2643
|
+
if (hostRef.$queuedListeners$) {
|
|
2644
|
+
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
|
|
2645
|
+
hostRef.$queuedListeners$ = void 0;
|
|
2646
|
+
}
|
|
2647
|
+
}
|
|
2641
2648
|
if (hostRef.$fetchedCbList$.length) {
|
|
2642
2649
|
hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
|
|
2643
2650
|
}
|
|
@@ -3076,6 +3083,7 @@ var connectedCallback = (elm) => {
|
|
|
3076
3083
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
3077
3084
|
}
|
|
3078
3085
|
} else {
|
|
3086
|
+
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
3079
3087
|
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
|
|
3080
3088
|
fireConnectedCallback(hostRef.$lazyInstance$, elm);
|
|
3081
3089
|
} else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
@@ -3095,6 +3103,32 @@ var setContentReference = (elm) => {
|
|
|
3095
3103
|
contentRefElm["s-cn"] = true;
|
|
3096
3104
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
3097
3105
|
};
|
|
3106
|
+
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
3107
|
+
if (listeners && win.document) {
|
|
3108
|
+
listeners.map(([flags, name, method]) => {
|
|
3109
|
+
const target = elm;
|
|
3110
|
+
const handler = hostListenerProxy(hostRef, method);
|
|
3111
|
+
const opts = hostListenerOpts(flags);
|
|
3112
|
+
plt.ael(target, name, handler, opts);
|
|
3113
|
+
(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
|
|
3114
|
+
});
|
|
3115
|
+
}
|
|
3116
|
+
};
|
|
3117
|
+
var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
3118
|
+
var _a2;
|
|
3119
|
+
try {
|
|
3120
|
+
{
|
|
3121
|
+
if (hostRef.$flags$ & 256 /* isListenReady */) {
|
|
3122
|
+
(_a2 = hostRef.$lazyInstance$) == null ? void 0 : _a2[methodName](ev);
|
|
3123
|
+
} else {
|
|
3124
|
+
(hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
3125
|
+
}
|
|
3126
|
+
}
|
|
3127
|
+
} catch (e) {
|
|
3128
|
+
consoleError(e, hostRef.$hostElement$);
|
|
3129
|
+
}
|
|
3130
|
+
};
|
|
3131
|
+
var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
3098
3132
|
function transformTag(tag) {
|
|
3099
3133
|
return tag;
|
|
3100
3134
|
}
|
|
@@ -5085,6 +5119,7 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
|
|
|
5085
5119
|
if (!hostRef) {
|
|
5086
5120
|
return;
|
|
5087
5121
|
}
|
|
5122
|
+
addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
|
|
5088
5123
|
try {
|
|
5089
5124
|
connectedCallback(elm);
|
|
5090
5125
|
await elm.componentOnReady();
|
|
@@ -5350,7 +5385,7 @@ const lmvzActionCss = () => `:host{display:block}`;
|
|
|
5350
5385
|
class LmvzAction {
|
|
5351
5386
|
constructor(hostRef) {
|
|
5352
5387
|
registerInstance(this, hostRef);
|
|
5353
|
-
this.actionClick = createEvent(this, "actionClick");
|
|
5388
|
+
this.actionClick = createEvent(this, "actionClick", 7);
|
|
5354
5389
|
}
|
|
5355
5390
|
actionClick;
|
|
5356
5391
|
_onClick(event) {
|
|
@@ -5749,6 +5784,9 @@ const ariaAttributes = [
|
|
|
5749
5784
|
];
|
|
5750
5785
|
const inheritAriaAttributes = (el, ignoreList) => {
|
|
5751
5786
|
let attributesToInherit = ariaAttributes;
|
|
5787
|
+
if (ignoreList && ignoreList.length > 0) {
|
|
5788
|
+
attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
|
|
5789
|
+
}
|
|
5752
5790
|
return inheritAttributes(el, attributesToInherit);
|
|
5753
5791
|
};
|
|
5754
5792
|
const raf = (h) => {
|
|
@@ -5863,10 +5901,13 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5863
5901
|
disabled = false;
|
|
5864
5902
|
type = 'button';
|
|
5865
5903
|
form;
|
|
5904
|
+
formMethod;
|
|
5905
|
+
name;
|
|
5906
|
+
value;
|
|
5866
5907
|
constructor(hostRef) {
|
|
5867
5908
|
super();
|
|
5868
5909
|
registerInstance(this, hostRef);
|
|
5869
|
-
this.lmvzActivation = createEvent(this, "lmvzActivation");
|
|
5910
|
+
this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
|
|
5870
5911
|
this.addController(new AriaValidationController(this));
|
|
5871
5912
|
this.addController(new ElementActivationController(this, {
|
|
5872
5913
|
localHandler: this.handleClick.bind(this),
|
|
@@ -5877,18 +5918,46 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5877
5918
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
5878
5919
|
super.connectedCallback();
|
|
5879
5920
|
}
|
|
5921
|
+
disconnectedCallback() {
|
|
5922
|
+
this.formButtonEl?.remove();
|
|
5923
|
+
this.formButtonEl = null;
|
|
5924
|
+
this.formEl = null;
|
|
5925
|
+
super.disconnectedCallback();
|
|
5926
|
+
}
|
|
5880
5927
|
renderHiddenButton() {
|
|
5881
|
-
|
|
5882
|
-
|
|
5928
|
+
if (this.type !== 'submit') {
|
|
5929
|
+
this.formButtonEl?.remove();
|
|
5930
|
+
this.formButtonEl = null;
|
|
5931
|
+
this.formEl = null;
|
|
5883
5932
|
return;
|
|
5884
|
-
|
|
5885
|
-
|
|
5933
|
+
}
|
|
5934
|
+
const formEl = findFormByRef(this.form, this.el);
|
|
5935
|
+
if (!formEl) {
|
|
5936
|
+
this.formButtonEl?.remove();
|
|
5937
|
+
this.formButtonEl = null;
|
|
5938
|
+
this.formEl = null;
|
|
5886
5939
|
return;
|
|
5887
|
-
|
|
5888
|
-
|
|
5889
|
-
|
|
5890
|
-
|
|
5891
|
-
|
|
5940
|
+
}
|
|
5941
|
+
this.formEl = formEl;
|
|
5942
|
+
const formButtonEl = this.formButtonEl ?? document.createElement('button');
|
|
5943
|
+
formButtonEl.type = 'submit';
|
|
5944
|
+
formButtonEl.style.display = 'none';
|
|
5945
|
+
formButtonEl.disabled = this.disabled;
|
|
5946
|
+
formButtonEl.name = this.name ?? '';
|
|
5947
|
+
formButtonEl.value = this.value ?? '';
|
|
5948
|
+
if (this.formMethod) {
|
|
5949
|
+
formButtonEl.setAttribute('formmethod', this.formMethod);
|
|
5950
|
+
}
|
|
5951
|
+
else {
|
|
5952
|
+
formButtonEl.removeAttribute('formmethod');
|
|
5953
|
+
}
|
|
5954
|
+
if (this.formButtonEl !== formButtonEl) {
|
|
5955
|
+
this.formButtonEl = formButtonEl;
|
|
5956
|
+
}
|
|
5957
|
+
if (formButtonEl.parentElement !== formEl) {
|
|
5958
|
+
formButtonEl.remove();
|
|
5959
|
+
formEl.appendChild(formButtonEl);
|
|
5960
|
+
}
|
|
5892
5961
|
}
|
|
5893
5962
|
submitForm(ev) {
|
|
5894
5963
|
if (this.formEl && this.formButtonEl) {
|
|
@@ -5903,7 +5972,7 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5903
5972
|
};
|
|
5904
5973
|
render() {
|
|
5905
5974
|
this.renderHiddenButton();
|
|
5906
|
-
return (hAsync(Host, { key: '
|
|
5975
|
+
return (hAsync(Host, { key: '6c44aa8a4b40927313461b5139e88066b855dca6', "aria-disabled": this.disabled ? 'true' : null }, hAsync("button", { key: '3696f0ad46a03fe9573571b46a56772def87bf53', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '3ecce9c6ae978b72b14a807d93248a4566a13f4b' }))));
|
|
5907
5976
|
}
|
|
5908
5977
|
static get delegatesFocus() { return true; }
|
|
5909
5978
|
static get style() { return lmvzButtonCss(); }
|
|
@@ -5916,7 +5985,10 @@ class LmvzButton extends ReactiveControllerHost {
|
|
|
5916
5985
|
"variant": [513],
|
|
5917
5986
|
"disabled": [516],
|
|
5918
5987
|
"type": [1],
|
|
5919
|
-
"form": [1]
|
|
5988
|
+
"form": [1],
|
|
5989
|
+
"formMethod": [1, "form-method"],
|
|
5990
|
+
"name": [1],
|
|
5991
|
+
"value": [1]
|
|
5920
5992
|
},
|
|
5921
5993
|
"$listeners$": undefined,
|
|
5922
5994
|
"$lazyBundleId$": "-",
|
|
@@ -5949,7 +6021,7 @@ const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.componen
|
|
|
5949
6021
|
class LmvzCard {
|
|
5950
6022
|
constructor(hostRef) {
|
|
5951
6023
|
registerInstance(this, hostRef);
|
|
5952
|
-
this.primaryAction = createEvent(this, "primaryAction");
|
|
6024
|
+
this.primaryAction = createEvent(this, "primaryAction", 7);
|
|
5953
6025
|
}
|
|
5954
6026
|
cardTitle;
|
|
5955
6027
|
imageUrl;
|
|
@@ -8192,7 +8264,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
|
|
|
8192
8264
|
constructor(hostRef) {
|
|
8193
8265
|
super();
|
|
8194
8266
|
registerInstance(this, hostRef);
|
|
8195
|
-
this.lmvzChange = createEvent(this, "lmvzChange");
|
|
8267
|
+
this.lmvzChange = createEvent(this, "lmvzChange", 7);
|
|
8196
8268
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
8197
8269
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
8198
8270
|
}
|
|
@@ -8322,7 +8394,7 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8322
8394
|
this.checkContent();
|
|
8323
8395
|
}
|
|
8324
8396
|
checkContent = debounce(() => {
|
|
8325
|
-
if (!isAriaValidationEnabled)
|
|
8397
|
+
if (!isAriaValidationEnabled())
|
|
8326
8398
|
return;
|
|
8327
8399
|
const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
|
|
8328
8400
|
if (!elements.length) {
|
|
@@ -8330,7 +8402,7 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8330
8402
|
}
|
|
8331
8403
|
}, 500);
|
|
8332
8404
|
render() {
|
|
8333
|
-
return (hAsync(Host, { key: '
|
|
8405
|
+
return (hAsync(Host, { key: '14ee006aff40f125aef2e9a461e68e25c6ed27d6', type: this.type, size: this.size }, hAsync("slot", { key: '3222c7f40b833f344aa233c13e2644d6e928bf4c', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '4d1c9fa87ccda9387b945444e9ac6a50703a19e5', class: "content-overflow-wrapper" }, hAsync("slot", { key: '42866115b8a6c50e86663ed8934504240ee0e6fa', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '890afa73be440ee7e7620a024744be08fee57b83', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
8334
8406
|
}
|
|
8335
8407
|
static get watchers() { return {
|
|
8336
8408
|
"type": [{
|
|
@@ -8684,7 +8756,7 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
8684
8756
|
constructor(hostRef) {
|
|
8685
8757
|
super();
|
|
8686
8758
|
registerInstance(this, hostRef);
|
|
8687
|
-
this.lmvzInput = createEvent(this, "lmvzInput");
|
|
8759
|
+
this.lmvzInput = createEvent(this, "lmvzInput", 7);
|
|
8688
8760
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
8689
8761
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
8690
8762
|
}
|
|
@@ -8822,7 +8894,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
8822
8894
|
constructor(hostRef) {
|
|
8823
8895
|
super();
|
|
8824
8896
|
registerInstance(this, hostRef);
|
|
8825
|
-
this.lmvzActivation = createEvent(this, "lmvzActivation");
|
|
8897
|
+
this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
|
|
8826
8898
|
this.addController(new AriaValidationController(this, { validationTiming: 'slot' }));
|
|
8827
8899
|
this.addController(new ElementActivationController(this));
|
|
8828
8900
|
}
|
|
@@ -8843,6 +8915,358 @@ class LmvzMenuItem extends ReactiveControllerHost {
|
|
|
8843
8915
|
}; }
|
|
8844
8916
|
}
|
|
8845
8917
|
|
|
8918
|
+
const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
|
|
8919
|
+
|
|
8920
|
+
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; } } :host { display: contents; color: var(--lmvz-semantic-color-on-surface-primary, #000000); --lmvz-modal-shell-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); --lmvz-modal-shell-gap: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); --lmvz-modal-actions-gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-modal-viewport-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); --lmvz-modal-shell-max-width: 40rem; } dialog { border: none; padding: 0; background: transparent; color: var(--lmvz-semantic-color-on-surface-primary, #000000); } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.19); } .modal-shell { display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); inline-size: min(calc(100vw - (2 * var(--lmvz-modal-viewport-padding))), var(--lmvz-modal-shell-max-width)); max-inline-size: 100%; padding: var(--lmvz-modal-shell-padding); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); overflow: auto; } .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); } .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--lmvz-modal-actions-gap); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .close-button { display: inline-flex; flex: none; } ::slotted([slot='actions'][hidden]) { display: none; } `;
|
|
8921
|
+
|
|
8922
|
+
const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
|
|
8923
|
+
let modalIdCounter = 0;
|
|
8924
|
+
class LmvzModal extends ReactiveControllerHost {
|
|
8925
|
+
get el() { return getElement(this); }
|
|
8926
|
+
inheritedAriaAttributes = {};
|
|
8927
|
+
dialogEl;
|
|
8928
|
+
dialogStateObserver;
|
|
8929
|
+
actionsStateObserver;
|
|
8930
|
+
headerSlot;
|
|
8931
|
+
actionsSlot;
|
|
8932
|
+
closeButtonEl;
|
|
8933
|
+
previouslyFocusedElement = null;
|
|
8934
|
+
wrappedDialogShowModal;
|
|
8935
|
+
lastActionValidationMessage;
|
|
8936
|
+
pendingCloseReturnValue;
|
|
8937
|
+
dialogTitleId = `lmvz-modal-title-${modalIdCounter++}`;
|
|
8938
|
+
hasActions = false;
|
|
8939
|
+
hasHeader = false;
|
|
8940
|
+
open = false;
|
|
8941
|
+
closeLabel = 'Schliessen';
|
|
8942
|
+
dialogClose;
|
|
8943
|
+
dialogCancel;
|
|
8944
|
+
get dialog() {
|
|
8945
|
+
return this.dialogEl;
|
|
8946
|
+
}
|
|
8947
|
+
get validationEl() {
|
|
8948
|
+
return this.dialogEl ?? this.el;
|
|
8949
|
+
}
|
|
8950
|
+
get validationSlot() {
|
|
8951
|
+
return this.actionsSlot;
|
|
8952
|
+
}
|
|
8953
|
+
constructor(hostRef) {
|
|
8954
|
+
super();
|
|
8955
|
+
registerInstance(this, hostRef);
|
|
8956
|
+
this.dialogClose = createEvent(this, "close", 6);
|
|
8957
|
+
this.dialogCancel = createEvent(this, "cancel", 1);
|
|
8958
|
+
this.addController(new AriaValidationController(this, { validationTiming: 'slot' }));
|
|
8959
|
+
}
|
|
8960
|
+
handleFormDialogSubmit(event) {
|
|
8961
|
+
const form = event.target;
|
|
8962
|
+
const submitter = event.submitter;
|
|
8963
|
+
const isDialogForm = form.method === 'dialog' || submitter?.getAttribute('formmethod') === 'dialog';
|
|
8964
|
+
if (!isDialogForm)
|
|
8965
|
+
return;
|
|
8966
|
+
event.preventDefault();
|
|
8967
|
+
this.dialogEl?.close(submitter?.value ?? '');
|
|
8968
|
+
}
|
|
8969
|
+
connectedCallback() {
|
|
8970
|
+
this.inheritedAriaAttributes = inheritAriaAttributes(this.el, ['role']);
|
|
8971
|
+
Object.defineProperty(this.el, 'dialog', {
|
|
8972
|
+
configurable: true,
|
|
8973
|
+
enumerable: true,
|
|
8974
|
+
get: () => {
|
|
8975
|
+
this.ensureDialogShowModalCapture();
|
|
8976
|
+
return this.dialogEl;
|
|
8977
|
+
},
|
|
8978
|
+
});
|
|
8979
|
+
super.connectedCallback();
|
|
8980
|
+
}
|
|
8981
|
+
componentDidLoad() {
|
|
8982
|
+
this.handleHeaderSlotChange();
|
|
8983
|
+
this.handleActionsSlotChange();
|
|
8984
|
+
this.observeDialogState();
|
|
8985
|
+
this.syncDialogVisibility();
|
|
8986
|
+
super.componentDidLoad();
|
|
8987
|
+
}
|
|
8988
|
+
disconnectedCallback() {
|
|
8989
|
+
this.actionsStateObserver?.disconnect();
|
|
8990
|
+
this.dialogStateObserver?.disconnect();
|
|
8991
|
+
super.disconnectedCallback();
|
|
8992
|
+
}
|
|
8993
|
+
componentDidRender() {
|
|
8994
|
+
if (this.open) {
|
|
8995
|
+
this.focusPrimaryAction();
|
|
8996
|
+
}
|
|
8997
|
+
super.componentDidRender();
|
|
8998
|
+
}
|
|
8999
|
+
handleOpenChange() {
|
|
9000
|
+
this.syncDialogVisibility();
|
|
9001
|
+
}
|
|
9002
|
+
get dialogAccessibilityAttributes() {
|
|
9003
|
+
const attributes = { ...this.inheritedAriaAttributes };
|
|
9004
|
+
delete attributes['aria-label'];
|
|
9005
|
+
delete attributes['aria-labelledby'];
|
|
9006
|
+
if (this.hasHeader) {
|
|
9007
|
+
attributes['aria-labelledby'] = this.dialogTitleId;
|
|
9008
|
+
return attributes;
|
|
9009
|
+
}
|
|
9010
|
+
const inheritedLabelledBy = this.inheritedAriaAttributes['aria-labelledby'];
|
|
9011
|
+
if (typeof inheritedLabelledBy === 'string') {
|
|
9012
|
+
attributes['aria-labelledby'] = inheritedLabelledBy;
|
|
9013
|
+
return attributes;
|
|
9014
|
+
}
|
|
9015
|
+
const inheritedLabel = this.inheritedAriaAttributes['aria-label'];
|
|
9016
|
+
if (typeof inheritedLabel === 'string') {
|
|
9017
|
+
attributes['aria-label'] = inheritedLabel;
|
|
9018
|
+
}
|
|
9019
|
+
return attributes;
|
|
9020
|
+
}
|
|
9021
|
+
get actionButtons() {
|
|
9022
|
+
return (this.actionsSlot?.assignedElements({ flatten: true }) ?? []).filter((element) => {
|
|
9023
|
+
return this.isVisibleActionButton(element);
|
|
9024
|
+
});
|
|
9025
|
+
}
|
|
9026
|
+
get enabledActionButtons() {
|
|
9027
|
+
return this.actionButtons.filter((element) => {
|
|
9028
|
+
return !this.isDisabledActionButton(element);
|
|
9029
|
+
});
|
|
9030
|
+
}
|
|
9031
|
+
get assignedActionElements() {
|
|
9032
|
+
return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
|
|
9033
|
+
}
|
|
9034
|
+
isDisabledActionButton(element) {
|
|
9035
|
+
return element.hasAttribute('disabled') || element.disabled === true;
|
|
9036
|
+
}
|
|
9037
|
+
getActionVariant(element) {
|
|
9038
|
+
const variant = element.getAttribute('variant') ?? element.variant;
|
|
9039
|
+
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
9040
|
+
}
|
|
9041
|
+
getActionValidationResult() {
|
|
9042
|
+
if (!this.actionButtons.length) {
|
|
9043
|
+
return {};
|
|
9044
|
+
}
|
|
9045
|
+
const primaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'primary');
|
|
9046
|
+
const secondaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'secondary');
|
|
9047
|
+
const issues = [
|
|
9048
|
+
primaryActions.length !== 1 ? `${primaryActions.length} primary action${primaryActions.length === 1 ? '' : 's'}` : undefined,
|
|
9049
|
+
secondaryActions.length > 1 ? `${secondaryActions.length} secondary actions` : undefined,
|
|
9050
|
+
].filter((issue) => Boolean(issue));
|
|
9051
|
+
return {
|
|
9052
|
+
errorMessage: issues.length
|
|
9053
|
+
? `LmvzModal actions slot must contain exactly one primary action, at most one secondary action, and optional tertiary actions. Received ${issues.join(' and ')}.`
|
|
9054
|
+
: undefined,
|
|
9055
|
+
primaryAction: primaryActions[0],
|
|
9056
|
+
};
|
|
9057
|
+
}
|
|
9058
|
+
hasAssignedContent(slot) {
|
|
9059
|
+
return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => {
|
|
9060
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
9061
|
+
return Boolean(node.textContent?.trim());
|
|
9062
|
+
}
|
|
9063
|
+
return node.nodeType === Node.ELEMENT_NODE;
|
|
9064
|
+
}));
|
|
9065
|
+
}
|
|
9066
|
+
observeDialogState() {
|
|
9067
|
+
if (!this.dialogEl || typeof MutationObserver === 'undefined')
|
|
9068
|
+
return;
|
|
9069
|
+
this.dialogStateObserver?.disconnect();
|
|
9070
|
+
this.dialogStateObserver = new MutationObserver(() => {
|
|
9071
|
+
if (!this.dialogEl || this.dialogEl.open === this.open)
|
|
9072
|
+
return;
|
|
9073
|
+
if (this.dialogEl.open) {
|
|
9074
|
+
this.open = true;
|
|
9075
|
+
return;
|
|
9076
|
+
}
|
|
9077
|
+
this.open = false;
|
|
9078
|
+
});
|
|
9079
|
+
this.dialogStateObserver.observe(this.dialogEl, {
|
|
9080
|
+
attributes: true,
|
|
9081
|
+
attributeFilter: ['open'],
|
|
9082
|
+
});
|
|
9083
|
+
}
|
|
9084
|
+
isVisibleActionButton(element) {
|
|
9085
|
+
return element.tagName === 'LMVZ-BUTTON' && !element.hasAttribute('hidden');
|
|
9086
|
+
}
|
|
9087
|
+
capturePreviouslyFocusedElement() {
|
|
9088
|
+
const dialog = this.dialogEl;
|
|
9089
|
+
const activeElement = getDeepActiveElement(document);
|
|
9090
|
+
if (!dialog || !activeElement || dialog.contains(activeElement))
|
|
9091
|
+
return;
|
|
9092
|
+
this.previouslyFocusedElement = activeElement;
|
|
9093
|
+
}
|
|
9094
|
+
ensureDialogShowModalCapture() {
|
|
9095
|
+
const dialog = this.dialogEl;
|
|
9096
|
+
if (!dialog || typeof dialog.showModal !== 'function')
|
|
9097
|
+
return;
|
|
9098
|
+
const showModal = dialog.showModal;
|
|
9099
|
+
if (showModal === this.wrappedDialogShowModal)
|
|
9100
|
+
return;
|
|
9101
|
+
const wrappedShowModal = () => {
|
|
9102
|
+
this.capturePreviouslyFocusedElement();
|
|
9103
|
+
return showModal.call(dialog);
|
|
9104
|
+
};
|
|
9105
|
+
Object.defineProperty(dialog, 'showModal', {
|
|
9106
|
+
configurable: true,
|
|
9107
|
+
value: wrappedShowModal,
|
|
9108
|
+
});
|
|
9109
|
+
this.wrappedDialogShowModal = wrappedShowModal;
|
|
9110
|
+
}
|
|
9111
|
+
syncDialogVisibility() {
|
|
9112
|
+
const dialog = this.dialogEl;
|
|
9113
|
+
if (!dialog)
|
|
9114
|
+
return;
|
|
9115
|
+
if (this.open) {
|
|
9116
|
+
if (!dialog.open) {
|
|
9117
|
+
this.capturePreviouslyFocusedElement();
|
|
9118
|
+
if (typeof dialog.showModal === 'function') {
|
|
9119
|
+
dialog.showModal();
|
|
9120
|
+
}
|
|
9121
|
+
else {
|
|
9122
|
+
dialog.setAttribute('open', '');
|
|
9123
|
+
}
|
|
9124
|
+
}
|
|
9125
|
+
this.focusPrimaryAction();
|
|
9126
|
+
return;
|
|
9127
|
+
}
|
|
9128
|
+
if (!dialog.open)
|
|
9129
|
+
return;
|
|
9130
|
+
if (typeof dialog.close === 'function') {
|
|
9131
|
+
dialog.close();
|
|
9132
|
+
}
|
|
9133
|
+
else {
|
|
9134
|
+
dialog.removeAttribute('open');
|
|
9135
|
+
this.handleDialogClose();
|
|
9136
|
+
}
|
|
9137
|
+
}
|
|
9138
|
+
focusPrimaryAction() {
|
|
9139
|
+
const primaryAction = this.enabledActionButtons.find((element) => {
|
|
9140
|
+
return this.getActionVariant(element) === 'primary';
|
|
9141
|
+
}) ?? this.enabledActionButtons[0];
|
|
9142
|
+
const focusTarget = primaryAction ?? this.closeButtonEl;
|
|
9143
|
+
if (!focusTarget || typeof window === 'undefined')
|
|
9144
|
+
return;
|
|
9145
|
+
window.requestAnimationFrame(() => {
|
|
9146
|
+
if (this.open) {
|
|
9147
|
+
focusTarget.focus();
|
|
9148
|
+
}
|
|
9149
|
+
});
|
|
9150
|
+
}
|
|
9151
|
+
restoreFocus() {
|
|
9152
|
+
if (!this.previouslyFocusedElement?.isConnected)
|
|
9153
|
+
return;
|
|
9154
|
+
this.previouslyFocusedElement.focus();
|
|
9155
|
+
this.previouslyFocusedElement = null;
|
|
9156
|
+
}
|
|
9157
|
+
handleCloseButtonClick = () => {
|
|
9158
|
+
if (!this.dialogEl)
|
|
9159
|
+
return;
|
|
9160
|
+
const dialogWithRequestClose = this.dialogEl;
|
|
9161
|
+
if (typeof dialogWithRequestClose.requestClose === 'function') {
|
|
9162
|
+
this.pendingCloseReturnValue = 'close';
|
|
9163
|
+
dialogWithRequestClose.requestClose('close');
|
|
9164
|
+
return;
|
|
9165
|
+
}
|
|
9166
|
+
if (typeof this.dialogEl.close === 'function') {
|
|
9167
|
+
this.dialogEl.close('close');
|
|
9168
|
+
return;
|
|
9169
|
+
}
|
|
9170
|
+
this.handleDialogClose();
|
|
9171
|
+
};
|
|
9172
|
+
handleDialogCancel = (event) => {
|
|
9173
|
+
event.preventDefault();
|
|
9174
|
+
const emitted = this.dialogCancel.emit();
|
|
9175
|
+
if (emitted.defaultPrevented) {
|
|
9176
|
+
this.pendingCloseReturnValue = undefined;
|
|
9177
|
+
return;
|
|
9178
|
+
}
|
|
9179
|
+
const returnValue = this.pendingCloseReturnValue;
|
|
9180
|
+
this.pendingCloseReturnValue = undefined;
|
|
9181
|
+
this.dialogEl?.close(returnValue);
|
|
9182
|
+
};
|
|
9183
|
+
handleDialogClose = () => {
|
|
9184
|
+
console.log('Dialog close handler called');
|
|
9185
|
+
if (this.open) {
|
|
9186
|
+
this.open = false;
|
|
9187
|
+
}
|
|
9188
|
+
this.restoreFocus();
|
|
9189
|
+
this.dialogClose.emit();
|
|
9190
|
+
};
|
|
9191
|
+
handleHeaderSlotChange = () => {
|
|
9192
|
+
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
9193
|
+
};
|
|
9194
|
+
observeActionState() {
|
|
9195
|
+
if (typeof MutationObserver === 'undefined')
|
|
9196
|
+
return;
|
|
9197
|
+
this.actionsStateObserver?.disconnect();
|
|
9198
|
+
if (!this.assignedActionElements.length)
|
|
9199
|
+
return;
|
|
9200
|
+
this.actionsStateObserver = new MutationObserver(() => {
|
|
9201
|
+
this.syncActionsState();
|
|
9202
|
+
});
|
|
9203
|
+
this.assignedActionElements.forEach((element) => {
|
|
9204
|
+
this.actionsStateObserver?.observe(element, {
|
|
9205
|
+
attributes: true,
|
|
9206
|
+
attributeFilter: ['disabled', 'hidden', 'variant'],
|
|
9207
|
+
});
|
|
9208
|
+
});
|
|
9209
|
+
}
|
|
9210
|
+
syncActionsState() {
|
|
9211
|
+
const assignedElements = this.assignedActionElements;
|
|
9212
|
+
assignedElements.forEach((element) => {
|
|
9213
|
+
const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
9214
|
+
if (isAllowedAction)
|
|
9215
|
+
return;
|
|
9216
|
+
if (!element.hasAttribute('hidden')) {
|
|
9217
|
+
element.setAttribute('hidden', '');
|
|
9218
|
+
}
|
|
9219
|
+
if (element.getAttribute('aria-hidden') !== 'true') {
|
|
9220
|
+
element.setAttribute('aria-hidden', 'true');
|
|
9221
|
+
}
|
|
9222
|
+
});
|
|
9223
|
+
this.hasActions = assignedElements.some((element) => this.isVisibleActionButton(element));
|
|
9224
|
+
this.checkActions();
|
|
9225
|
+
if (this.open) {
|
|
9226
|
+
this.focusPrimaryAction();
|
|
9227
|
+
}
|
|
9228
|
+
}
|
|
9229
|
+
handleActionsSlotChange = () => {
|
|
9230
|
+
this.syncActionsState();
|
|
9231
|
+
this.observeActionState();
|
|
9232
|
+
};
|
|
9233
|
+
checkActions() {
|
|
9234
|
+
if (!isAriaValidationEnabled())
|
|
9235
|
+
return;
|
|
9236
|
+
const { errorMessage } = this.getActionValidationResult();
|
|
9237
|
+
if (!errorMessage) {
|
|
9238
|
+
this.lastActionValidationMessage = undefined;
|
|
9239
|
+
return;
|
|
9240
|
+
}
|
|
9241
|
+
if (this.lastActionValidationMessage === errorMessage)
|
|
9242
|
+
return;
|
|
9243
|
+
console.error(errorMessage);
|
|
9244
|
+
this.lastActionValidationMessage = errorMessage;
|
|
9245
|
+
}
|
|
9246
|
+
render() {
|
|
9247
|
+
return (hAsync(Host, { key: 'f319dcb33aaa6426e568fba1bfb6c8c3927432cb' }, hAsync("dialog", { key: '1c5b1659b243a2af19ec5b41d19a2096b522671c', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '2d0260f11a75e28688a14b0263df0d00f8ba54b9', class: "modal-shell" }, hAsync("header", { key: 'd96739e3b0a7f2c04e46585ddf4e431c91a698ce', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: 'f5202ac26195a3571e3767e0d3683c2bc960c2ec', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: '2568ee3465bc070e353e647c58735a34005907d7', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: '7978e838dc84ce83ee674aa111523b260d1861da', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '9f235507acbf2ee42747bfc44302fcae47d9ba0e', icon: closeIconSvg }))), hAsync("div", { key: '7eeab9b2f0fd5d41c0218380436e2f092481813a', class: "body" }, hAsync("slot", { key: '8904e87fa438caf2b7f34c4025ff688d94f4dea2' })), hAsync("footer", { key: '0610abd150de228da893092e9f38721087144564', class: "actions", hidden: !this.hasActions }, hAsync("slot", { key: '0f5457cb2544602a3b980f90e7297ed700d62fee', name: "actions", ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange }))))));
|
|
9248
|
+
}
|
|
9249
|
+
static get watchers() { return {
|
|
9250
|
+
"open": [{
|
|
9251
|
+
"handleOpenChange": 0
|
|
9252
|
+
}]
|
|
9253
|
+
}; }
|
|
9254
|
+
static get style() { return lmvzModalCss(); }
|
|
9255
|
+
static get cmpMeta() { return {
|
|
9256
|
+
"$flags$": 777,
|
|
9257
|
+
"$tagName$": "lmvz-modal",
|
|
9258
|
+
"$members$": {
|
|
9259
|
+
"open": [1540],
|
|
9260
|
+
"closeLabel": [1, "close-label"],
|
|
9261
|
+
"hasActions": [32],
|
|
9262
|
+
"hasHeader": [32]
|
|
9263
|
+
},
|
|
9264
|
+
"$listeners$": [[0, "submit", "handleFormDialogSubmit"]],
|
|
9265
|
+
"$lazyBundleId$": "-",
|
|
9266
|
+
"$attrsToReflect$": [["open", "open"]]
|
|
9267
|
+
}; }
|
|
9268
|
+
}
|
|
9269
|
+
|
|
8846
9270
|
const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
|
|
8847
9271
|
|
|
8848
9272
|
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; }`;
|
|
@@ -8858,7 +9282,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
8858
9282
|
constructor(hostRef) {
|
|
8859
9283
|
super();
|
|
8860
9284
|
registerInstance(this, hostRef);
|
|
8861
|
-
this.lmvzChange = createEvent(this, "lmvzChange");
|
|
9285
|
+
this.lmvzChange = createEvent(this, "lmvzChange", 7);
|
|
8862
9286
|
this.addController(new AriaValidationController(this));
|
|
8863
9287
|
}
|
|
8864
9288
|
lmvzChange;
|
|
@@ -8897,7 +9321,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
8897
9321
|
render() {
|
|
8898
9322
|
const hasValue = this.hasValue;
|
|
8899
9323
|
const shouldShowLabel = hasValue;
|
|
8900
|
-
return (hAsync(Host, { key: '
|
|
9324
|
+
return (hAsync(Host, { key: '4a78608686bd771615d1bd6f5c5df243b813f0a3' }, hAsync("div", { key: 'fc526485d7c1718c0044a8076151954fb0db680d', class: "select-wrapper" }, hAsync("label", { key: '16c68d944b626f06b36c458daa351b05f0d6de92', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '06ea7ab990b1119c726d39620cda2f2f53d6342a', "aria-hidden": "true" }, " *")), hAsync("div", { key: '46e77a996cd17db6e882fdc0f5ac65fb90f71df5', "aria-hidden": "true" }, hAsync("span", { key: '6b1e9f849e7e876f704816de6f55128e3d462587' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'd90c6b965c594a45f6699aaca3bc85de38bf5584', "aria-hidden": "true" }, " *")), hAsync("span", { key: 'd91ce778422521a0b414aceb7161a871023730d9' }, hAsync("img", { key: '3e405cebf0c02d91448c9db412837f4af554c4b2', src: chevronDownSvg, alt: "" }))), hAsync("select", { key: 'b443a08e1436f75af572e102e8d43a9c3d031810', 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: '7125eccebfb3541522d0461adcf1e203514d8af6', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '80f7edf9e20b19ec8041d23b84752f2cd7c1a72e' }))), this.helperText && hAsync("div", { key: '49cdd7ce54b5bc9031db2ef9826891d6a4f666b1', role: "status" }, this.helperText)));
|
|
8901
9325
|
}
|
|
8902
9326
|
static get watchers() { return {
|
|
8903
9327
|
"value": [{
|
|
@@ -8923,6 +9347,115 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
8923
9347
|
}; }
|
|
8924
9348
|
}
|
|
8925
9349
|
|
|
9350
|
+
const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .sc-lmvz-toggle-h:focus-within { outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc); outline-offset: 2px; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
|
|
9351
|
+
|
|
9352
|
+
let toggleIdCounter = 0;
|
|
9353
|
+
class LmvzToggle extends ReactiveControllerHost {
|
|
9354
|
+
get el() { return getElement(this); }
|
|
9355
|
+
get validationEl() {
|
|
9356
|
+
return this.el;
|
|
9357
|
+
}
|
|
9358
|
+
internals;
|
|
9359
|
+
nativeInputElement;
|
|
9360
|
+
toggleId = `lmvz-toggle-${toggleIdCounter++}`;
|
|
9361
|
+
lmvzChange;
|
|
9362
|
+
label;
|
|
9363
|
+
checked = false;
|
|
9364
|
+
disabled = false;
|
|
9365
|
+
required = false;
|
|
9366
|
+
name;
|
|
9367
|
+
value = 'on';
|
|
9368
|
+
form;
|
|
9369
|
+
constructor(hostRef) {
|
|
9370
|
+
super();
|
|
9371
|
+
registerInstance(this, hostRef);
|
|
9372
|
+
this.lmvzChange = createEvent(this, "lmvzChange", 7);
|
|
9373
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
9374
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
9375
|
+
}
|
|
9376
|
+
else {
|
|
9377
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
9378
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
9379
|
+
}
|
|
9380
|
+
this.addController(new AriaValidationController(this));
|
|
9381
|
+
}
|
|
9382
|
+
formAssociatedCallback(_form) {
|
|
9383
|
+
this.internals.setFormValue?.(this.checked ? this.value : null);
|
|
9384
|
+
}
|
|
9385
|
+
formResetCallback() {
|
|
9386
|
+
this.checked = false;
|
|
9387
|
+
}
|
|
9388
|
+
formStateRestoreCallback(state) {
|
|
9389
|
+
this.checked = state === this.value;
|
|
9390
|
+
this.internals.setFormValue?.(this.checked ? this.value : null);
|
|
9391
|
+
}
|
|
9392
|
+
handleCheckedChange(checked) {
|
|
9393
|
+
this.internals.setFormValue?.(checked ? this.value : null);
|
|
9394
|
+
}
|
|
9395
|
+
handleDisabledChange(disabled) {
|
|
9396
|
+
if (disabled && this.nativeInputElement) {
|
|
9397
|
+
this.nativeInputElement.blur();
|
|
9398
|
+
}
|
|
9399
|
+
}
|
|
9400
|
+
async focusToggle() {
|
|
9401
|
+
this.nativeInputElement?.focus();
|
|
9402
|
+
}
|
|
9403
|
+
async blurToggle() {
|
|
9404
|
+
this.nativeInputElement?.blur();
|
|
9405
|
+
}
|
|
9406
|
+
async checkValidity() {
|
|
9407
|
+
return this.nativeInputElement?.checkValidity?.() ?? false;
|
|
9408
|
+
}
|
|
9409
|
+
async reportValidity() {
|
|
9410
|
+
return this.nativeInputElement?.reportValidity?.() ?? false;
|
|
9411
|
+
}
|
|
9412
|
+
async getInputElement() {
|
|
9413
|
+
if (!this.nativeInputElement) {
|
|
9414
|
+
await new Promise((resolve) => componentOnReady(this.el, resolve));
|
|
9415
|
+
}
|
|
9416
|
+
return Promise.resolve(this.nativeInputElement);
|
|
9417
|
+
}
|
|
9418
|
+
handleChange = (event) => {
|
|
9419
|
+
const newChecked = event.target.checked;
|
|
9420
|
+
this.checked = newChecked;
|
|
9421
|
+
this.lmvzChange.emit(newChecked);
|
|
9422
|
+
};
|
|
9423
|
+
render() {
|
|
9424
|
+
return (hAsync(Host, { key: '49a543437a842709b6a3bfb00c828a40b227bb57' }, hAsync("span", { key: '746292d49c58656336037f7b07a9aaee9dbc6ed1', class: "track" }, hAsync("input", { key: 'ae329571344b05d9af814fdc1cc792e1c600d807', 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: 'e5742029679333fcd66a25aeb3f8826dbb3a8956', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '4cb92eb975b8c337162986011497afdeb188ed4f', htmlFor: this.toggleId }, this.label)));
|
|
9425
|
+
}
|
|
9426
|
+
static get formAssociated() { return true; }
|
|
9427
|
+
static get watchers() { return {
|
|
9428
|
+
"checked": [{
|
|
9429
|
+
"handleCheckedChange": 0
|
|
9430
|
+
}],
|
|
9431
|
+
"disabled": [{
|
|
9432
|
+
"handleDisabledChange": 0
|
|
9433
|
+
}]
|
|
9434
|
+
}; }
|
|
9435
|
+
static get style() { return lmvzToggleCss(); }
|
|
9436
|
+
static get cmpMeta() { return {
|
|
9437
|
+
"$flags$": 578,
|
|
9438
|
+
"$tagName$": "lmvz-toggle",
|
|
9439
|
+
"$members$": {
|
|
9440
|
+
"label": [1],
|
|
9441
|
+
"checked": [1540],
|
|
9442
|
+
"disabled": [516],
|
|
9443
|
+
"required": [516],
|
|
9444
|
+
"name": [1],
|
|
9445
|
+
"value": [1],
|
|
9446
|
+
"form": [1],
|
|
9447
|
+
"focusToggle": [64],
|
|
9448
|
+
"blurToggle": [64],
|
|
9449
|
+
"checkValidity": [64],
|
|
9450
|
+
"reportValidity": [64],
|
|
9451
|
+
"getInputElement": [64]
|
|
9452
|
+
},
|
|
9453
|
+
"$listeners$": undefined,
|
|
9454
|
+
"$lazyBundleId$": "-",
|
|
9455
|
+
"$attrsToReflect$": [["checked", "checked"], ["disabled", "disabled"], ["required", "required"]]
|
|
9456
|
+
}; }
|
|
9457
|
+
}
|
|
9458
|
+
|
|
8926
9459
|
registerComponents([
|
|
8927
9460
|
LmvzAction,
|
|
8928
9461
|
LmvzButton,
|
|
@@ -8933,7 +9466,9 @@ registerComponents([
|
|
|
8933
9466
|
LmvzIcon,
|
|
8934
9467
|
LmvzInput,
|
|
8935
9468
|
LmvzMenuItem,
|
|
9469
|
+
LmvzModal,
|
|
8936
9470
|
LmvzSelect,
|
|
9471
|
+
LmvzToggle,
|
|
8937
9472
|
]);
|
|
8938
9473
|
|
|
8939
9474
|
exports.hydrateApp = hydrateApp;
|