@lmvz-ds/components 0.37.0 → 0.39.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 +21 -0
- package/README.md +12 -20
- package/cjs/{aria-validation-controller-Do0uEK4t.js → aria-validation-controller-DKNXjnQr.js} +1 -1
- package/cjs/checkmark-CuKDPAcx.js +5 -0
- package/cjs/{directional-focus-controller-8Xd_7MHT.js → directional-focus-controller-DDnhfX5w.js} +15 -5
- package/cjs/{index-BgvZ4y-3.js → index-DWy4nuyZ.js} +41 -0
- package/cjs/index.cjs.js +3 -195
- package/cjs/lmvz-action-list.cjs.entry.js +4 -4
- package/cjs/lmvz-action.cjs.entry.js +1 -1
- package/cjs/lmvz-button-group.cjs.entry.js +5 -1
- package/cjs/lmvz-button_2.cjs.entry.js +3 -3
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +4 -5
- package/cjs/lmvz-chip.cjs.entry.js +5 -5
- package/cjs/lmvz-components.cjs.js +2 -2
- package/cjs/lmvz-datepicker.cjs.entry.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +5 -5
- package/cjs/lmvz-input.cjs.entry.js +4 -7
- package/cjs/lmvz-link.cjs.entry.js +1 -1
- package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
- package/cjs/lmvz-message.cjs.entry.js +4 -2
- package/cjs/lmvz-modal.cjs.entry.js +2 -2
- package/cjs/lmvz-popover.cjs.entry.js +5 -14
- package/cjs/lmvz-radio.cjs.entry.js +2 -2
- package/cjs/lmvz-select.cjs.entry.js +110 -16
- package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
- package/cjs/lmvz-spinner.cjs.entry.js +1 -1
- package/cjs/lmvz-tab.cjs.entry.js +1 -1
- package/cjs/lmvz-tabs.cjs.entry.js +9 -3
- package/cjs/lmvz-toggle.cjs.entry.js +2 -2
- package/cjs/loader.cjs.js +2 -2
- package/cjs/public-DTgpEs1_.js +206 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.css +119 -116
- package/collection/components/lmvz-button/lmvz-button.css +109 -106
- package/collection/components/lmvz-card/lmvz-card.css +106 -103
- package/collection/components/lmvz-chip/lmvz-chip.css +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +2 -2
- package/collection/components/lmvz-header/lmvz-header.js +2 -2
- package/collection/components/lmvz-input/lmvz-input.js +2 -5
- package/collection/components/lmvz-message/lmvz-message.css +1 -1
- package/collection/components/lmvz-popover/lmvz-popover.css +1 -1
- package/collection/components/lmvz-popover/lmvz-popover.js +2 -11
- package/collection/components/lmvz-select/lmvz-select.css +102 -53
- package/collection/components/lmvz-select/lmvz-select.js +151 -41
- package/collection/components/lmvz-snackbar/public.js +3 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +7 -1
- package/collection/utils/aria/directional-focus-controller.js +16 -7
- package/collection/utils/icons/public.js +3 -0
- package/components/index.js +1 -1
- package/components/lmvz-action-list.js +1 -1
- package/components/lmvz-action.js +1 -1
- package/components/lmvz-button-group.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-datepicker.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-link.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-popover.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-spinner.js +1 -1
- package/components/lmvz-tab.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/{p-BLMXiDE0.js → p--mU29mrX.js} +1 -1
- package/components/p-BPa0FHVO.js +1 -0
- package/components/p-Bc5MM0zh.js +1 -0
- package/components/p-CyDgnpOB.js +1 -0
- package/components/p-DAikapVO.js +1 -0
- package/components/{p-C-pRMuMh.js → p-DIyiticz.js} +1 -1
- package/components/{p-BhALzK62.js → p-DJLdOjL4.js} +1 -1
- package/components/p-DSDBThqb.js +1 -0
- package/components/{p-diOze8wI.js → p-DXFoXTse.js} +1 -1
- package/components/p-DXhP6UeF.js +1 -0
- package/components/p-D_mff3n7.js +1 -0
- package/components/p-DbBJxuBm.js +1 -0
- package/components/p-DsTgD0_a.js +1 -0
- package/components/p-DyQ1GbaN.js +1 -0
- package/components/p-niXjuPxe.js +1 -0
- package/components/{p-BAj4FkUt.js → p-sACbyedu.js} +1 -1
- package/esm/{aria-validation-controller-Cp6pofER.js → aria-validation-controller-Dwv7n0rk.js} +1 -1
- package/esm/checkmark-DAikapVO.js +3 -0
- package/esm/{directional-focus-controller-QukTTWBE.js → directional-focus-controller-CJ0yNC00.js} +15 -5
- package/esm/{index-BOXP1Vx0.js → index-DVab4vzV.js} +41 -1
- package/esm/index.js +1 -197
- package/esm/lmvz-action-list.entry.js +4 -4
- package/esm/lmvz-action.entry.js +1 -1
- package/esm/lmvz-button-group.entry.js +5 -1
- package/esm/lmvz-button_2.entry.js +3 -3
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +3 -4
- package/esm/lmvz-chip.entry.js +5 -5
- package/esm/lmvz-components.js +3 -3
- package/esm/lmvz-datepicker.entry.js +1 -1
- package/esm/lmvz-header_2.entry.js +5 -5
- package/esm/lmvz-input.entry.js +4 -7
- package/esm/lmvz-link.entry.js +1 -1
- package/esm/lmvz-menuitem.entry.js +2 -2
- package/esm/lmvz-message.entry.js +4 -2
- package/esm/lmvz-modal.entry.js +2 -2
- package/esm/lmvz-popover.entry.js +5 -14
- package/esm/lmvz-radio.entry.js +2 -2
- package/esm/lmvz-select.entry.js +110 -16
- package/esm/lmvz-snackbar.entry.js +1 -1
- package/esm/lmvz-spinner.entry.js +1 -1
- package/esm/lmvz-tab.entry.js +1 -1
- package/esm/lmvz-tabs.entry.js +9 -3
- package/esm/lmvz-toggle.entry.js +2 -2
- package/esm/loader.js +3 -3
- package/esm/public-m6pRVUeP.js +204 -0
- package/hydrate/index.js +394 -50
- package/hydrate/index.mjs +394 -50
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-1ba1af8d.entry.js +1 -0
- package/lmvz-components/{p-0f65d001.entry.js → p-27e8b4fa.entry.js} +1 -1
- package/lmvz-components/p-304c7554.entry.js +1 -0
- package/lmvz-components/p-316dd61a.entry.js +1 -0
- package/lmvz-components/{p-3d5867df.entry.js → p-335b3867.entry.js} +1 -1
- package/lmvz-components/{p-7872a6b4.entry.js → p-3b7203a3.entry.js} +1 -1
- package/lmvz-components/p-41286514.entry.js +1 -0
- package/lmvz-components/p-6aae1df9.entry.js +1 -0
- package/lmvz-components/p-743616c0.entry.js +1 -0
- package/lmvz-components/{p-26dd9684.entry.js → p-773e9d95.entry.js} +1 -1
- package/lmvz-components/{p-a6fe9b61.entry.js → p-7cbfbc88.entry.js} +1 -1
- package/lmvz-components/p-87f21ac9.entry.js +1 -0
- package/lmvz-components/{p-a680a7b2.entry.js → p-8ba6ec19.entry.js} +1 -1
- package/lmvz-components/p-93b781ca.entry.js +1 -0
- package/lmvz-components/p-BPa0FHVO.js +1 -0
- package/lmvz-components/p-BlkpdeQI.js +1 -0
- package/lmvz-components/p-DAikapVO.js +1 -0
- package/lmvz-components/p-DVab4vzV.js +2 -0
- package/lmvz-components/{p-BeY96W7m.js → p-Wi9d2-w9.js} +1 -1
- package/lmvz-components/p-c884c76e.entry.js +1 -0
- package/lmvz-components/{p-eabbf901.entry.js → p-d73bb7fd.entry.js} +1 -1
- package/lmvz-components/{p-137b1fe1.entry.js → p-e35f49a1.entry.js} +1 -1
- package/lmvz-components/p-ebad823c.entry.js +1 -0
- package/lmvz-components/p-edec4d09.entry.js +1 -0
- package/lmvz-components/{p-88661c50.entry.js → p-efd9d50e.entry.js} +1 -1
- package/lmvz-components/p-f24f5207.entry.js +1 -0
- package/lmvz-components/p-f911691c.entry.js +1 -0
- package/manifest.json +72 -39
- package/package.json +2 -1
- package/types/components/lmvz-input/lmvz-input.d.ts +0 -2
- package/types/components/lmvz-popover/lmvz-popover.d.ts +0 -1
- package/types/components/lmvz-select/lmvz-select.d.ts +12 -3
- package/types/components/lmvz-snackbar/public.d.ts +6 -0
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -0
- package/types/components.d.ts +39 -19
- package/types/index.d.ts +5 -0
- package/types/utils/aria/directional-focus-controller.d.ts +9 -7
- package/types/utils/icons/public.d.ts +6 -0
- package/components/p--FDdvoIg.js +0 -1
- package/components/p-BApwCp0R.js +0 -1
- package/components/p-BPYBmylI.js +0 -1
- package/components/p-C5gRiLRR.js +0 -1
- package/components/p-CrQCHVKL.js +0 -1
- package/components/p-DiRcp9V6.js +0 -1
- package/components/p-DqdrUt_G.js +0 -1
- package/lmvz-components/p-00489151.entry.js +0 -1
- package/lmvz-components/p-0af0211a.entry.js +0 -1
- package/lmvz-components/p-398b5cf4.entry.js +0 -1
- package/lmvz-components/p-40716828.entry.js +0 -1
- package/lmvz-components/p-492adf21.entry.js +0 -1
- package/lmvz-components/p-4deaa010.entry.js +0 -1
- package/lmvz-components/p-4fa6e72f.entry.js +0 -1
- package/lmvz-components/p-57a366e6.entry.js +0 -1
- package/lmvz-components/p-70f1e31a.entry.js +0 -1
- package/lmvz-components/p-91eb71bb.entry.js +0 -1
- package/lmvz-components/p-BOXP1Vx0.js +0 -2
- package/lmvz-components/p-CHxiS3ja.js +0 -1
- package/lmvz-components/p-e14058e1.entry.js +0 -1
- package/lmvz-components/p-f3f0ed49.entry.js +0 -1
- package/lmvz-components/p-f516a949.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -807,6 +807,13 @@ var h = (nodeName, vnodeData, ...children) => {
|
|
|
807
807
|
}
|
|
808
808
|
}
|
|
809
809
|
}
|
|
810
|
+
if (typeof nodeName === "function") {
|
|
811
|
+
return nodeName(
|
|
812
|
+
vnodeData === null ? {} : vnodeData,
|
|
813
|
+
vNodeChildren,
|
|
814
|
+
vdomFnUtils
|
|
815
|
+
);
|
|
816
|
+
}
|
|
810
817
|
const vnode = newVNode(nodeName, null);
|
|
811
818
|
vnode.$attrs$ = vnodeData;
|
|
812
819
|
if (vNodeChildren.length > 0) {
|
|
@@ -842,6 +849,36 @@ var newVNode = (tag, text) => {
|
|
|
842
849
|
};
|
|
843
850
|
var Host = {};
|
|
844
851
|
var isHost = (node) => node && node.$tag$ === Host;
|
|
852
|
+
var vdomFnUtils = {
|
|
853
|
+
forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
|
|
854
|
+
map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
|
|
855
|
+
};
|
|
856
|
+
var convertToPublic = (node) => ({
|
|
857
|
+
vattrs: node.$attrs$,
|
|
858
|
+
vchildren: node.$children$,
|
|
859
|
+
vkey: node.$key$,
|
|
860
|
+
vname: node.$name$,
|
|
861
|
+
vtag: node.$tag$,
|
|
862
|
+
vtext: node.$text$
|
|
863
|
+
});
|
|
864
|
+
var convertToPrivate = (node) => {
|
|
865
|
+
if (typeof node.vtag === "function") {
|
|
866
|
+
const vnodeData = { ...node.vattrs };
|
|
867
|
+
if (node.vkey) {
|
|
868
|
+
vnodeData.key = node.vkey;
|
|
869
|
+
}
|
|
870
|
+
if (node.vname) {
|
|
871
|
+
vnodeData.name = node.vname;
|
|
872
|
+
}
|
|
873
|
+
return h(node.vtag, vnodeData, ...node.vchildren || []);
|
|
874
|
+
}
|
|
875
|
+
const vnode = newVNode(node.vtag, node.vtext);
|
|
876
|
+
vnode.$attrs$ = node.vattrs;
|
|
877
|
+
vnode.$children$ = node.vchildren;
|
|
878
|
+
vnode.$key$ = node.vkey;
|
|
879
|
+
vnode.$name$ = node.vname;
|
|
880
|
+
return vnode;
|
|
881
|
+
};
|
|
845
882
|
|
|
846
883
|
// src/runtime/client-hydrate.ts
|
|
847
884
|
var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
|
|
@@ -3129,6 +3166,9 @@ var setContentReference = (elm) => {
|
|
|
3129
3166
|
contentRefElm["s-cn"] = true;
|
|
3130
3167
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
3131
3168
|
};
|
|
3169
|
+
|
|
3170
|
+
// src/runtime/fragment.ts
|
|
3171
|
+
var Fragment = (_, children) => children;
|
|
3132
3172
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
3133
3173
|
if (listeners && win.document) {
|
|
3134
3174
|
listeners.map(([flags, name, method]) => {
|
|
@@ -5863,9 +5903,6 @@ function getLmvzComponentMetaInfo(el, key) {
|
|
|
5863
5903
|
return el?.[META_BASE]?.[key];
|
|
5864
5904
|
}
|
|
5865
5905
|
|
|
5866
|
-
function isFocusControllerHost(el) {
|
|
5867
|
-
return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
|
|
5868
|
-
}
|
|
5869
5906
|
const defaultConfig$1 = {
|
|
5870
5907
|
orientation: 'both',
|
|
5871
5908
|
enableHomeAndEnd: false,
|
|
@@ -5885,11 +5922,21 @@ class DirectionalFocusController {
|
|
|
5885
5922
|
}
|
|
5886
5923
|
hostConnected() {
|
|
5887
5924
|
registerLmvzComponentMetaInfo(this.host.el, 'isFocusControllerHost', true);
|
|
5888
|
-
this.
|
|
5925
|
+
this.getListenerTarget().addEventListener('keydown', this.handleKeydown);
|
|
5889
5926
|
this.syncManagedFocusTarget();
|
|
5890
5927
|
}
|
|
5891
5928
|
hostDisconnected() {
|
|
5892
|
-
this.
|
|
5929
|
+
this.getListenerTarget().removeEventListener('keydown', this.handleKeydown);
|
|
5930
|
+
}
|
|
5931
|
+
updateListenerTarget(listenerTarget) {
|
|
5932
|
+
if (listenerTarget === this.config.listenerTarget)
|
|
5933
|
+
return;
|
|
5934
|
+
this.getListenerTarget().removeEventListener('keydown', this.handleKeydown);
|
|
5935
|
+
this.config.listenerTarget = listenerTarget;
|
|
5936
|
+
this.getListenerTarget().addEventListener('keydown', this.handleKeydown);
|
|
5937
|
+
}
|
|
5938
|
+
getListenerTarget() {
|
|
5939
|
+
return this.config.listenerTarget ?? this.host.el;
|
|
5893
5940
|
}
|
|
5894
5941
|
updateElements(elements) {
|
|
5895
5942
|
const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
|
|
@@ -6041,6 +6088,9 @@ class DirectionalFocusController {
|
|
|
6041
6088
|
return isTabOrderable && element.getAttribute('aria-hidden') !== 'true' && (element.checkVisibility?.() ?? true) && element.offsetParent !== null;
|
|
6042
6089
|
}
|
|
6043
6090
|
}
|
|
6091
|
+
function isFocusControllerHost(el) {
|
|
6092
|
+
return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
|
|
6093
|
+
}
|
|
6044
6094
|
function isDirectionalFocusReceiver(el) {
|
|
6045
6095
|
return typeof el.resolveFocusableElement === 'function';
|
|
6046
6096
|
}
|
|
@@ -6048,7 +6098,7 @@ function resolveElement(el) {
|
|
|
6048
6098
|
return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
|
|
6049
6099
|
}
|
|
6050
6100
|
|
|
6051
|
-
const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; min-width: 15vw;
|
|
6101
|
+
const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; min-width: 15vw; button { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); 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; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } } --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); &:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } } lmvz-button, button { --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-content-justification: normal; width: 100%; } }`;
|
|
6052
6102
|
|
|
6053
6103
|
class LmvzActionList extends ReactiveControllerHost {
|
|
6054
6104
|
get el() { return getElement(this); }
|
|
@@ -6279,7 +6329,7 @@ function addElementActivationListener(...[target, handler, abortSignal, keys]) {
|
|
|
6279
6329
|
bindHandlers(target, handler, abortSignal, keys);
|
|
6280
6330
|
}
|
|
6281
6331
|
|
|
6282
|
-
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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host {
|
|
6332
|
+
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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { display: inline-block; button { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); 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; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } } width: 100%; } } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
6283
6333
|
|
|
6284
6334
|
class LmvzButton extends ReactiveControllerHost {
|
|
6285
6335
|
get el() { return getElement(this); }
|
|
@@ -6412,6 +6462,204 @@ const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
|
|
|
6412
6462
|
const chipSizes = ['default', 'small'];
|
|
6413
6463
|
const linkTypes = ['internal', 'external'];
|
|
6414
6464
|
|
|
6465
|
+
const PRIORITY_MAP = {
|
|
6466
|
+
low: 0,
|
|
6467
|
+
normal: 1,
|
|
6468
|
+
high: 2,
|
|
6469
|
+
};
|
|
6470
|
+
const STATUS_DURATION = {
|
|
6471
|
+
success: 5000,
|
|
6472
|
+
warning: 5000,
|
|
6473
|
+
error: 8000,
|
|
6474
|
+
};
|
|
6475
|
+
let idCounter = 0;
|
|
6476
|
+
function nextId() {
|
|
6477
|
+
idCounter += 1;
|
|
6478
|
+
return `snackbar-${idCounter}`;
|
|
6479
|
+
}
|
|
6480
|
+
function resolveHostElement() {
|
|
6481
|
+
if (typeof document === 'undefined') {
|
|
6482
|
+
return undefined;
|
|
6483
|
+
}
|
|
6484
|
+
const existing = document.querySelector('[data-snackbar-host]');
|
|
6485
|
+
if (existing) {
|
|
6486
|
+
return existing;
|
|
6487
|
+
}
|
|
6488
|
+
const el = document.createElement('lmvz-snackbar');
|
|
6489
|
+
el.setAttribute('data-snackbar-host', '');
|
|
6490
|
+
document.body.appendChild(el);
|
|
6491
|
+
return el;
|
|
6492
|
+
}
|
|
6493
|
+
class SnackbarController {
|
|
6494
|
+
hostEl = undefined;
|
|
6495
|
+
active = undefined;
|
|
6496
|
+
getHost() {
|
|
6497
|
+
if (this.hostEl !== undefined && !this.hostEl.isConnected) {
|
|
6498
|
+
this.hostEl = undefined;
|
|
6499
|
+
}
|
|
6500
|
+
if (this.hostEl === undefined) {
|
|
6501
|
+
this.hostEl = resolveHostElement();
|
|
6502
|
+
}
|
|
6503
|
+
return this.hostEl;
|
|
6504
|
+
}
|
|
6505
|
+
clearTimer(entry) {
|
|
6506
|
+
if (entry.timerId !== undefined) {
|
|
6507
|
+
clearTimeout(entry.timerId);
|
|
6508
|
+
entry.timerId = undefined;
|
|
6509
|
+
}
|
|
6510
|
+
}
|
|
6511
|
+
scheduleTimer(entry, delayMs) {
|
|
6512
|
+
if (delayMs <= 0) {
|
|
6513
|
+
return;
|
|
6514
|
+
}
|
|
6515
|
+
entry.timerStartedAt = Date.now();
|
|
6516
|
+
entry.timerId = setTimeout(() => {
|
|
6517
|
+
if (this.active !== undefined && this.active.id === entry.id) {
|
|
6518
|
+
this.dismissActive(entry, 'timeout');
|
|
6519
|
+
}
|
|
6520
|
+
}, delayMs);
|
|
6521
|
+
}
|
|
6522
|
+
dismissActive(entry, reason) {
|
|
6523
|
+
this.clearTimer(entry);
|
|
6524
|
+
const host = entry.hostEl;
|
|
6525
|
+
host.removeEventListener('pointerenter', entry.onPointerEnter);
|
|
6526
|
+
host.removeEventListener('pointerleave', entry.onPointerLeave);
|
|
6527
|
+
host.removeEventListener('focusin', entry.onFocusIn);
|
|
6528
|
+
host.removeEventListener('focusout', entry.onFocusOut);
|
|
6529
|
+
if (entry.onActionListener) {
|
|
6530
|
+
host.removeEventListener('lmvzAction', entry.onActionListener);
|
|
6531
|
+
}
|
|
6532
|
+
host.hide?.();
|
|
6533
|
+
if (this.active?.id === entry.id) {
|
|
6534
|
+
this.active = undefined;
|
|
6535
|
+
}
|
|
6536
|
+
if (reason !== 'action') {
|
|
6537
|
+
host.dispatchEvent(new CustomEvent('lmvzClose', { detail: { reason }, bubbles: true, composed: true }));
|
|
6538
|
+
}
|
|
6539
|
+
entry.resolve({ reason });
|
|
6540
|
+
}
|
|
6541
|
+
pauseTimer(entry) {
|
|
6542
|
+
entry.pauseCount += 1;
|
|
6543
|
+
if (entry.pauseCount > 1 || entry.timerId === undefined) {
|
|
6544
|
+
return;
|
|
6545
|
+
}
|
|
6546
|
+
const elapsed = entry.timerStartedAt !== undefined ? Date.now() - entry.timerStartedAt : 0;
|
|
6547
|
+
entry.remaining = Math.max(0, entry.remaining - elapsed);
|
|
6548
|
+
entry.timerStartedAt = undefined;
|
|
6549
|
+
this.clearTimer(entry);
|
|
6550
|
+
}
|
|
6551
|
+
resumeTimer(entry) {
|
|
6552
|
+
if (entry.pauseCount > 0) {
|
|
6553
|
+
entry.pauseCount -= 1;
|
|
6554
|
+
}
|
|
6555
|
+
if (entry.pauseCount > 0) {
|
|
6556
|
+
return;
|
|
6557
|
+
}
|
|
6558
|
+
if (entry.remaining > 0) {
|
|
6559
|
+
this.scheduleTimer(entry, entry.remaining);
|
|
6560
|
+
}
|
|
6561
|
+
}
|
|
6562
|
+
applyToHost(host, options) {
|
|
6563
|
+
host.setAttribute('status', options.status ?? 'success');
|
|
6564
|
+
if (options.actionLabel !== undefined) {
|
|
6565
|
+
host.setAttribute('action-label', options.actionLabel);
|
|
6566
|
+
}
|
|
6567
|
+
else {
|
|
6568
|
+
host.removeAttribute('action-label');
|
|
6569
|
+
}
|
|
6570
|
+
}
|
|
6571
|
+
open(options) {
|
|
6572
|
+
const incomingPriority = PRIORITY_MAP[options.priority ?? 'normal'];
|
|
6573
|
+
if (this.active !== undefined && incomingPriority < this.active.priority) {
|
|
6574
|
+
let swallowResolve;
|
|
6575
|
+
const closed = new Promise((resolve) => {
|
|
6576
|
+
swallowResolve = resolve;
|
|
6577
|
+
});
|
|
6578
|
+
swallowResolve({ reason: 'swallowed' });
|
|
6579
|
+
const id = nextId();
|
|
6580
|
+
return {
|
|
6581
|
+
id,
|
|
6582
|
+
closed,
|
|
6583
|
+
dismiss() {
|
|
6584
|
+
},
|
|
6585
|
+
};
|
|
6586
|
+
}
|
|
6587
|
+
if (this.active !== undefined) {
|
|
6588
|
+
this.dismissActive(this.active, 'overridden');
|
|
6589
|
+
}
|
|
6590
|
+
const host = this.getHost();
|
|
6591
|
+
if (host === undefined) {
|
|
6592
|
+
const id = nextId();
|
|
6593
|
+
let ssrResolve;
|
|
6594
|
+
const closed = new Promise((resolve) => {
|
|
6595
|
+
ssrResolve = resolve;
|
|
6596
|
+
});
|
|
6597
|
+
ssrResolve({ reason: 'swallowed' });
|
|
6598
|
+
return { id, closed, dismiss() { } };
|
|
6599
|
+
}
|
|
6600
|
+
const id = nextId();
|
|
6601
|
+
const status = options.status ?? 'success';
|
|
6602
|
+
const durationMs = options.duration === 0 ? 0 : (options.duration ?? STATUS_DURATION[status]);
|
|
6603
|
+
let entryResolve;
|
|
6604
|
+
const closed = new Promise((resolve) => {
|
|
6605
|
+
entryResolve = resolve;
|
|
6606
|
+
});
|
|
6607
|
+
const entry = {
|
|
6608
|
+
id,
|
|
6609
|
+
priority: incomingPriority,
|
|
6610
|
+
resolve: entryResolve,
|
|
6611
|
+
timerId: undefined,
|
|
6612
|
+
remaining: durationMs,
|
|
6613
|
+
timerStartedAt: undefined,
|
|
6614
|
+
pauseCount: 0,
|
|
6615
|
+
hostEl: host,
|
|
6616
|
+
onPointerEnter: () => this.pauseTimer(entry),
|
|
6617
|
+
onPointerLeave: () => this.resumeTimer(entry),
|
|
6618
|
+
onFocusIn: () => this.pauseTimer(entry),
|
|
6619
|
+
onFocusOut: () => this.resumeTimer(entry),
|
|
6620
|
+
};
|
|
6621
|
+
this.active = entry;
|
|
6622
|
+
host.addEventListener('pointerenter', entry.onPointerEnter);
|
|
6623
|
+
host.addEventListener('pointerleave', entry.onPointerLeave);
|
|
6624
|
+
host.addEventListener('focusin', entry.onFocusIn);
|
|
6625
|
+
host.addEventListener('focusout', entry.onFocusOut);
|
|
6626
|
+
this.applyToHost(host, options);
|
|
6627
|
+
const onAction = () => {
|
|
6628
|
+
if (this.active !== undefined && this.active.id === id) {
|
|
6629
|
+
options.onAction?.();
|
|
6630
|
+
this.dismissActive(entry, 'action');
|
|
6631
|
+
}
|
|
6632
|
+
};
|
|
6633
|
+
entry.onActionListener = onAction;
|
|
6634
|
+
host.addEventListener('lmvzAction', onAction, { once: true });
|
|
6635
|
+
host.show?.();
|
|
6636
|
+
queueMicrotask(() => host.setAttribute('message', options.message));
|
|
6637
|
+
if (durationMs > 0) {
|
|
6638
|
+
this.scheduleTimer(entry, durationMs);
|
|
6639
|
+
}
|
|
6640
|
+
return {
|
|
6641
|
+
id,
|
|
6642
|
+
closed,
|
|
6643
|
+
dismiss: () => {
|
|
6644
|
+
if (this.active?.id === id) {
|
|
6645
|
+
this.dismissActive(entry, 'manual');
|
|
6646
|
+
}
|
|
6647
|
+
},
|
|
6648
|
+
};
|
|
6649
|
+
}
|
|
6650
|
+
dismiss(id) {
|
|
6651
|
+
if (!this.active) {
|
|
6652
|
+
return;
|
|
6653
|
+
}
|
|
6654
|
+
if (!id || this.active.id === id) {
|
|
6655
|
+
this.dismissActive(this.active, 'manual');
|
|
6656
|
+
}
|
|
6657
|
+
}
|
|
6658
|
+
}
|
|
6659
|
+
|
|
6660
|
+
window.LmvzApi ??= {};
|
|
6661
|
+
window.LmvzApi.SnackbarController = SnackbarController;
|
|
6662
|
+
|
|
6415
6663
|
/**
|
|
6416
6664
|
* Tests if a value is a `function`.
|
|
6417
6665
|
*
|
|
@@ -8562,6 +8810,16 @@ function toValidSvgStringWithFallback(value) {
|
|
|
8562
8810
|
}
|
|
8563
8811
|
}
|
|
8564
8812
|
|
|
8813
|
+
function typedIconFromSet(iconset, icon) {
|
|
8814
|
+
return {
|
|
8815
|
+
iconset,
|
|
8816
|
+
icon,
|
|
8817
|
+
};
|
|
8818
|
+
}
|
|
8819
|
+
|
|
8820
|
+
window.LmvzApi ??= {};
|
|
8821
|
+
window.LmvzApi.typedIconFromSet = typedIconFromSet;
|
|
8822
|
+
|
|
8565
8823
|
const lmvzButtonGroupCss = () => `:host{display:flex;flex-flow:row-reverse wrap;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.5 Router);}:host([stacked]){flex-flow:column nowrap;align-items:stretch;padding:0}:host([stacked]) ::slotted(*){display:block;width:100%}::slotted([hidden]){display:none !important}:host(:not([data-only-tertiary],[stacked])) ::slotted([data-first-tertiary]){margin-inline-end:auto}:host([data-only-tertiary]:not([stacked])){justify-content:flex-end}`;
|
|
8566
8824
|
|
|
8567
8825
|
class LmvzButtonGroup {
|
|
@@ -8751,7 +9009,7 @@ function joinPath(...parts) {
|
|
|
8751
9009
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
8752
9010
|
}
|
|
8753
9011
|
|
|
8754
|
-
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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); 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-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-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } 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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 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.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 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.5 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; }`;
|
|
9012
|
+
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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); 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; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 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.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 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.5 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; }`;
|
|
8755
9013
|
|
|
8756
9014
|
class LmvzCard {
|
|
8757
9015
|
constructor(hostRef) {
|
|
@@ -8799,7 +9057,7 @@ const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0i
|
|
|
8799
9057
|
|
|
8800
9058
|
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('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-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, #a1a1a1); --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419); --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe); --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, #545454); --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --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-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); 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; appearance: none; } .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); cursor: pointer; 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; cursor: pointer; } label.sc-lmvz-checkbox { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--checkbox-label-color); transition: color var(--checkbox-duration) var(--checkbox-easing); cursor: pointer; } .helper-text.sc-lmvz-checkbox { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 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.72rem + 0.13vw, 0.88rem) / 1.5 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; input, label, .box, .content { cursor: not-allowed; } } .sc-lmvz-checkbox-h:has(:focus-visible) .pill.sc-lmvz-checkbox { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } @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; } .sc-lmvz-checkbox-h:has(:focus-visible) .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }`;
|
|
8801
9059
|
|
|
8802
|
-
const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
|
|
9060
|
+
const CHECKMARK_SVG$1 = toValidSvgStringWithFallback(checkmarkSvg);
|
|
8803
9061
|
let checkboxIdCounter = 0;
|
|
8804
9062
|
class LmvzCheckbox extends ReactiveControllerHost {
|
|
8805
9063
|
get el() { return getElement(this); }
|
|
@@ -8922,7 +9180,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
|
|
|
8922
9180
|
this.nativeError = true;
|
|
8923
9181
|
}
|
|
8924
9182
|
render() {
|
|
8925
|
-
return (hAsync(Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, hAsync("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, hAsync("input", { key: 'a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "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: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, hAsync("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '076489f5baadab07d95fc787e9ac71bae0a6ab68', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
9183
|
+
return (hAsync(Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, hAsync("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, hAsync("input", { key: 'a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "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: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG$1 })), hAsync("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, hAsync("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '076489f5baadab07d95fc787e9ac71bae0a6ab68', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
8926
9184
|
}
|
|
8927
9185
|
static get formAssociated() { return true; }
|
|
8928
9186
|
static get watchers() { return {
|
|
@@ -8975,7 +9233,7 @@ function debounce(func, wait) {
|
|
|
8975
9233
|
};
|
|
8976
9234
|
}
|
|
8977
9235
|
|
|
8978
|
-
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, #000000); padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-10-8, 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.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5 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-6-4, 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-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-4-2, 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-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #
|
|
9236
|
+
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, #000000); padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); padding-inline: var(--lmvz-dimension-10-8, 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.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5 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-6-4, 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-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5 Router); gap: var(--lmvz-dimension-4-2, 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-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } :host([size='small']) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } :host([type='active']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); --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, #e6b000); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #614a00); } :host([type='success']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #c2e6e1); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #28625b); } :host([type='error']) { --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b); --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0); --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #a31419); } :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, #000000); } `;
|
|
8979
9237
|
|
|
8980
9238
|
class LmvzChip extends ReactiveControllerHost {
|
|
8981
9239
|
ariaValidationController = new AriaValidationController(this);
|
|
@@ -9017,13 +9275,13 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
9017
9275
|
checkContent = debounce(() => {
|
|
9018
9276
|
if (!isAriaValidationEnabled())
|
|
9019
9277
|
return;
|
|
9020
|
-
const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.
|
|
9278
|
+
const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedNodes() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
|
|
9021
9279
|
if (!elements.length) {
|
|
9022
9280
|
console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
|
|
9023
9281
|
}
|
|
9024
9282
|
}, 500);
|
|
9025
9283
|
render() {
|
|
9026
|
-
return (hAsync(Host, { key: '
|
|
9284
|
+
return (hAsync(Host, { key: '63581b0c567d208b200464e9985ac32d97c1ad43', type: this.type, size: this.size }, hAsync("slot", { key: '7aa740cc80b400893dcbe7021d5513d3f1ca476b', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: 'da5b9e272becef812b4914bf25b451da16bb9012', class: "content-overflow-wrapper" }, hAsync("slot", { key: 'a925dcd383c86dbea63790b5623d159472b6684c', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: 'e018eafb75b85068c992e9f91c4fac89a4c95153', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
9027
9285
|
}
|
|
9028
9286
|
static get watchers() { return {
|
|
9029
9287
|
"type": [{
|
|
@@ -11853,7 +12111,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
11853
12111
|
primarySlot;
|
|
11854
12112
|
secondarySlot;
|
|
11855
12113
|
secondaryNav;
|
|
11856
|
-
keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
|
|
12114
|
+
keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both', manageTabIndex: false, enableHomeAndEnd: false });
|
|
11857
12115
|
get primaryMenuitems() {
|
|
11858
12116
|
return this.primarySlot?.assignedElements({ flatten: false }) || [];
|
|
11859
12117
|
}
|
|
@@ -11930,7 +12188,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
11930
12188
|
}
|
|
11931
12189
|
}
|
|
11932
12190
|
render() {
|
|
11933
|
-
return (hAsync(Host, { key: '
|
|
12191
|
+
return (hAsync(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, hAsync("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, hAsync("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, hAsync("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
|
|
11934
12192
|
}
|
|
11935
12193
|
static get watchers() { return {
|
|
11936
12194
|
"lmvzActiveNav": [{
|
|
@@ -12256,9 +12514,6 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
12256
12514
|
return;
|
|
12257
12515
|
this.updateNativeError('input');
|
|
12258
12516
|
};
|
|
12259
|
-
handleChange = (event) => {
|
|
12260
|
-
};
|
|
12261
|
-
handleFocus = () => { };
|
|
12262
12517
|
handleInvalid = () => this.updateNativeError('invalid');
|
|
12263
12518
|
handleBlur = () => {
|
|
12264
12519
|
this.inputValidityActive = true;
|
|
@@ -12276,9 +12531,9 @@ class LmvzInput extends ReactiveControllerHost {
|
|
|
12276
12531
|
render() {
|
|
12277
12532
|
const hasValue = Boolean(this.value);
|
|
12278
12533
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
12279
|
-
return (hAsync("div", { key: '
|
|
12534
|
+
return (hAsync("div", { key: '85f498773efdad53d309e8b1eb5b85ea0601277e', class: classNames('input-container', {
|
|
12280
12535
|
'interaction-filled': hasValue,
|
|
12281
|
-
}) }, hAsync("div", { key: '
|
|
12536
|
+
}) }, hAsync("div", { key: 'eb74bdd8170014c2a17c6046878b0f4d61fece25', class: "input-wrapper" }, hAsync("slot", { key: 'ceb3acb5dcb641900caf9a22f43295d1c407ad2e', name: "before-input" }), hAsync("div", { key: 'a7f626addd83cbf79b435989bec94f777818794e', class: "label-input-group" }, hAsync("label", { key: '391e2d1f873f9aef9bd9e7f14b006d898a699abe', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '691251a0efb1a60fd5e53447a6204c13008545a1', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: 'f37d3d7d5076636638b2da59cca91c1cedc7504a', 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, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), hAsync("slot", { key: '22b2be3072fc274bbeff4d92f25dccc5ea50c4d0', name: "after-input" })), hAsync("div", { key: '95f28aad61a5d7ea45fb4479801097036652b08f', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '9ea8420b336b33a0fd3b7e53cc4efa44983cbdc3', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
12282
12537
|
}
|
|
12283
12538
|
static get formAssociated() { return true; }
|
|
12284
12539
|
static get watchers() { return {
|
|
@@ -12455,7 +12710,7 @@ const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiI
|
|
|
12455
12710
|
|
|
12456
12711
|
const warningSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjI4NjQgMy4wNDkzOEMxMS4wMzgwIDEuNjUwMjEgMTIuOTYyMCAxLjY1MDIxIDEzLjcxMzYgMy4wNDkzOEwyMi42NjY4IDE5LjI0OTRDMjMuNDAyNiAyMC42MTYxIDIyLjQ1ODggMjIuMjUwMCAyMC45NTMyIDIyLjI1MDBIMy4wNDY4MEMxLjU0MTIwIDIyLjI1MDAgMC41OTc0MTAgMjAuNjE2MSAxLjMzMzIwIDE5LjI0OTRMMTAuMjg2NCAzLjA0OTM4Wk0xMiA4QzExLjQ0NzcgOCAxMSA4LjQ0NzcyIDExIDlWMTRDMTEgMTQuNTUyMyAxMS40NDc3IDE1IDEyIDE1QzEyLjU1MjMgMTUgMTMgMTQuNTUyMyAxMyAxNFY5QzEzIDguNDQ3NzIgMTIuNTUyMyA4IDEyIDhaTTEyIDE2QzExLjQ0NzcgMTYgMTEgMTYuNDQ3NyAxMSAxN0MxMSAxNy41NTIzIDExLjQ0NzcgMTggMTIgMThDMTIuNTUyMyAxOCAxMyAxNy41NTIzIDEzIDE3QzEzIDE2LjQ0NzcgMTIuNTUyMyAxNiAxMiAxNloiLz4KPC9zdmc+Cg==';
|
|
12457
12712
|
|
|
12458
|
-
const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));border:var(--lmvz-semantic-border-width-default, 1px) solid;border-radius:var(--lmvz-semantic-border-radius-md, 6px);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)}:host([type='neutral']){background-color:var(--lmvz-semantic-color-status-active, #f6fbfe);border-color:var(--lmvz-semantic-color-status-on-active-subtle, #
|
|
12713
|
+
const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));border:var(--lmvz-semantic-border-width-default, 1px) solid;border-radius:var(--lmvz-semantic-border-radius-md, 6px);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)}:host([type='neutral']){background-color:var(--lmvz-semantic-color-status-active, #f6fbfe);border-color:var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5);color:var(--lmvz-semantic-color-status-on-active, #0e7ab4)}:host([type='warning']){background-color:var(--lmvz-semantic-color-status-warning, #ffeeb8);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);color:var(--lmvz-semantic-color-status-on-warning, #614a00)}.leading-icon{flex-shrink:0;display:flex;align-items:flex-start;padding-top:2px;width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}.leading-icon svg{width:100%;height:100%}.message{flex:1}`;
|
|
12459
12714
|
|
|
12460
12715
|
const INFO_SVG = toValidSvgStringWithFallback(infoSvg);
|
|
12461
12716
|
const WARNING_SVG = toValidSvgStringWithFallback(warningSvg);
|
|
@@ -14174,7 +14429,7 @@ const computePosition = (reference, floating, options) => {
|
|
|
14174
14429
|
});
|
|
14175
14430
|
};
|
|
14176
14431
|
|
|
14177
|
-
const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 100);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open]))
|
|
14432
|
+
const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 100);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])){display:none}`;
|
|
14178
14433
|
|
|
14179
14434
|
class LmvzPopover {
|
|
14180
14435
|
constructor(hostRef) {
|
|
@@ -14216,7 +14471,6 @@ class LmvzPopover {
|
|
|
14216
14471
|
}
|
|
14217
14472
|
componentDidLoad() {
|
|
14218
14473
|
autoAssignId(this.el);
|
|
14219
|
-
this.syncContainerId();
|
|
14220
14474
|
}
|
|
14221
14475
|
handleOpenChange(isOpen) {
|
|
14222
14476
|
if (isOpen) {
|
|
@@ -14243,23 +14497,16 @@ class LmvzPopover {
|
|
|
14243
14497
|
this.removeCloseHandlers();
|
|
14244
14498
|
this.extEventController.abort();
|
|
14245
14499
|
}
|
|
14246
|
-
syncContainerId() {
|
|
14247
|
-
const hostId = this.el.getAttribute('id');
|
|
14248
|
-
if (!hostId || !this.containerEl)
|
|
14249
|
-
return;
|
|
14250
|
-
this.containerEl.id = hostId;
|
|
14251
|
-
}
|
|
14252
14500
|
setupAnchorEl() {
|
|
14253
14501
|
const { anchorEl } = this;
|
|
14254
14502
|
if (!anchorEl) {
|
|
14255
14503
|
console.warn('no anchor element set for', this);
|
|
14256
14504
|
return;
|
|
14257
14505
|
}
|
|
14258
|
-
this.syncContainerId();
|
|
14259
14506
|
if (!anchorEl.hasAttribute('aria-haspopup')) {
|
|
14260
14507
|
anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
|
|
14261
14508
|
}
|
|
14262
|
-
anchorEl.setAttribute('aria-controls', this.
|
|
14509
|
+
anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
|
|
14263
14510
|
if (!anchorEl.hasAttribute('aria-expanded')) {
|
|
14264
14511
|
anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
|
|
14265
14512
|
}
|
|
@@ -14287,7 +14534,6 @@ class LmvzPopover {
|
|
|
14287
14534
|
await waitFrame();
|
|
14288
14535
|
await this.updatePosition();
|
|
14289
14536
|
autoAssignId(this.el);
|
|
14290
|
-
this.syncContainerId();
|
|
14291
14537
|
this.applyAnchorAriaOpen();
|
|
14292
14538
|
this.lmvzOpen.emit();
|
|
14293
14539
|
await waitFrame();
|
|
@@ -14366,7 +14612,7 @@ class LmvzPopover {
|
|
|
14366
14612
|
this.closureController?.abort();
|
|
14367
14613
|
}
|
|
14368
14614
|
render() {
|
|
14369
|
-
return (hAsync(Host, { key: '
|
|
14615
|
+
return (hAsync(Host, { key: '83529aeac05cdc706193fa8bbbcc8f8672756111', role: this.containerRole, "aria-label": this.label || undefined }, hAsync("div", { key: '97c255e788806c0dec2f4ed04c6fc815150912a2', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: 'e4ea69d179557e7d34f1475c07c9284ea8d10a67', ref: (el) => (this.slotEl = el) }))));
|
|
14370
14616
|
}
|
|
14371
14617
|
static get watchers() { return {
|
|
14372
14618
|
"open": [{
|
|
@@ -14994,9 +15240,10 @@ class ListboxController {
|
|
|
14994
15240
|
}
|
|
14995
15241
|
}
|
|
14996
15242
|
|
|
14997
|
-
const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 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, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); padding-top: var(--lmvz-internal-select-floating-label-top-offset); } .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, .select-trigger.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; } .select-trigger.sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; width: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [highlighted].sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [error]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [error].sc-lmvz-select-h .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-error-color); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); border-color: var(--lmvz-semantic-color-border-active, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .sc-lmvz-select-h:has(:focus-visible) .select-trigger.sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); flex-shrink: 0; } .lmvz-select-native-options.sc-lmvz-select { display: none; } [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 { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [role='alert'].sc-lmvz-select { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); color: var(--lmvz-select-error-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select svg.sc-lmvz-select { 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)); } .lmvz-select-option.sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); display: flex; align-items: center; gap: var(--lmvz-select-gap); padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); border-radius: var(--lmvz-semantic-border-radius-md, 6px); background-color: var(--lmvz-select-option-background); color: var(--lmvz-select-option-color); cursor: pointer; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); transition: background-color 0.15s ease, color 0.15s ease; } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):hover { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):active { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } .lmvz-select-option.sc-lmvz-select:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } .lmvz-select-option[data-active='true'].sc-lmvz-select:not([aria-disabled='true']) { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option[aria-selected='true'].sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .lmvz-select-option[aria-disabled='true'].sc-lmvz-select { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); }`;
|
|
15243
|
+
const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 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, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); padding-top: var(--lmvz-internal-select-floating-label-top-offset); } .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, .select-trigger.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; } .select-trigger.sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; width: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [error]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [error].sc-lmvz-select-h .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-error-color); } .sc-lmvz-select-h:has(:focus-visible) .select-trigger.sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .select-wrapper.has-value.sc-lmvz-select .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child + span.sc-lmvz-select { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-select-chevron-size); height: var(--lmvz-select-chevron-size); flex-shrink: 0; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select { vertical-align: middle; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select + lmvz-chip.sc-lmvz-select { margin-inline-start: var(--lmvz-select-gap); } .lmvz-select-native-options.sc-lmvz-select { display: none; } [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 { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [role='alert'].sc-lmvz-select { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); color: var(--lmvz-select-error-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .lmvz-select-option.sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-button-background-override: var(--lmvz-select-option-background); --lmvz-button-color-override: var(--lmvz-select-option-color); --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-content-justification: normal; --lmvz-button-font-override: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); 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; } display: flex; } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):hover { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):active { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } .lmvz-select-option.sc-lmvz-select:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } .lmvz-select-option[data-active='true'].sc-lmvz-select:not([aria-disabled='true']) { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .sc-lmvz-select-h:not([multiple]) .lmvz-select-option[aria-selected='true'].sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .lmvz-select-option[aria-disabled='true'].sc-lmvz-select { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .lmvz-select-option-checkbox.sc-lmvz-select { display: flex; align-items: center; justify-content: center; width: var(--lmvz-global-s18, 18px); height: var(--lmvz-global-s18, 18px); border: var(--lmvz-semantic-border-width-default, 1px) solid currentcolor; border-radius: var(--lmvz-global-s4, 4px); flex-shrink: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select { display: flex; align-items: center; justify-content: center; line-height: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select svg.sc-lmvz-select { width: 100%; height: 100%; }`;
|
|
14998
15244
|
|
|
14999
15245
|
let selectIdCounter = 0;
|
|
15246
|
+
const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
|
|
15000
15247
|
class LmvzSelect extends ReactiveControllerHost {
|
|
15001
15248
|
get el() { return getElement(this); }
|
|
15002
15249
|
get validationEl() {
|
|
@@ -15011,6 +15258,8 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15011
15258
|
optionsMutationObserver;
|
|
15012
15259
|
initialValue;
|
|
15013
15260
|
initialValueCaptured = false;
|
|
15261
|
+
initialValues;
|
|
15262
|
+
initialValuesCaptured = false;
|
|
15014
15263
|
flatOptions = [];
|
|
15015
15264
|
optionsById = new Map();
|
|
15016
15265
|
listboxController = new ListboxController({
|
|
@@ -15053,6 +15302,8 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15053
15302
|
}
|
|
15054
15303
|
lmvzChange;
|
|
15055
15304
|
value;
|
|
15305
|
+
multiple = false;
|
|
15306
|
+
values;
|
|
15056
15307
|
label;
|
|
15057
15308
|
helperText;
|
|
15058
15309
|
nativeError = false;
|
|
@@ -15068,14 +15319,23 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15068
15319
|
required = false;
|
|
15069
15320
|
name;
|
|
15070
15321
|
size = 'default';
|
|
15071
|
-
highlighted = false;
|
|
15072
15322
|
selectedLabel = '';
|
|
15073
15323
|
selectedId;
|
|
15074
15324
|
activeId;
|
|
15075
15325
|
isOpen = false;
|
|
15076
15326
|
optionGroups = [];
|
|
15077
15327
|
get hasValue() {
|
|
15078
|
-
return Boolean(this.value);
|
|
15328
|
+
return this.multiple ? Boolean(this.values && this.values.length > 0) : Boolean(this.value);
|
|
15329
|
+
}
|
|
15330
|
+
get triggerAriaLabel() {
|
|
15331
|
+
if (this.multiple) {
|
|
15332
|
+
const count = this.values?.length ?? 0;
|
|
15333
|
+
return count > 0 ? `${this.label}, ${count} selected` : this.label;
|
|
15334
|
+
}
|
|
15335
|
+
return this.hasValue ? `${this.label}, ${this.selectedLabel}` : this.label;
|
|
15336
|
+
}
|
|
15337
|
+
get chipSize() {
|
|
15338
|
+
return this.size === 'small' ? 'small' : 'default';
|
|
15079
15339
|
}
|
|
15080
15340
|
componentWillLoad() {
|
|
15081
15341
|
this.updateValidity();
|
|
@@ -15122,17 +15382,28 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15122
15382
|
formAssociatedCallback(form) {
|
|
15123
15383
|
if (!form)
|
|
15124
15384
|
return;
|
|
15125
|
-
this.
|
|
15385
|
+
this.syncFormValue();
|
|
15126
15386
|
}
|
|
15127
15387
|
formResetCallback() {
|
|
15128
15388
|
this.internals.setValidity?.({});
|
|
15129
|
-
this.
|
|
15389
|
+
if (this.multiple) {
|
|
15390
|
+
this.values = this.initialValues ? [...this.initialValues] : [];
|
|
15391
|
+
}
|
|
15392
|
+
else {
|
|
15393
|
+
this.value = this.initialValue;
|
|
15394
|
+
}
|
|
15130
15395
|
this.updateValidity();
|
|
15131
15396
|
}
|
|
15132
15397
|
formStateRestoreCallback(state) {
|
|
15398
|
+
if (this.multiple) {
|
|
15399
|
+
this.values = state instanceof FormData && this.name ? state.getAll(this.name).map(String) : [];
|
|
15400
|
+
return;
|
|
15401
|
+
}
|
|
15133
15402
|
this.value = state;
|
|
15134
15403
|
}
|
|
15135
15404
|
handleValueChange(newValue) {
|
|
15405
|
+
if (this.multiple)
|
|
15406
|
+
return;
|
|
15136
15407
|
this.applySelectionFromValue();
|
|
15137
15408
|
if (this.selectedId && !this.isOpen) {
|
|
15138
15409
|
this.listboxController.setActiveId(this.selectedId);
|
|
@@ -15140,6 +15411,12 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15140
15411
|
this.internals.setFormValue?.(newValue ?? '');
|
|
15141
15412
|
this.updateValidity();
|
|
15142
15413
|
}
|
|
15414
|
+
handleValuesChange() {
|
|
15415
|
+
if (!this.multiple)
|
|
15416
|
+
return;
|
|
15417
|
+
this.syncFormValue();
|
|
15418
|
+
this.updateValidity();
|
|
15419
|
+
}
|
|
15143
15420
|
handleRequiredChange() {
|
|
15144
15421
|
this.updateValidity();
|
|
15145
15422
|
}
|
|
@@ -15157,15 +15434,31 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15157
15434
|
this.flatOptions = flat;
|
|
15158
15435
|
this.optionsById = new Map(flat.map((option) => [option.id, option]));
|
|
15159
15436
|
this.optionGroups = groups;
|
|
15160
|
-
if (
|
|
15161
|
-
|
|
15162
|
-
|
|
15163
|
-
|
|
15437
|
+
if (this.multiple) {
|
|
15438
|
+
if (!this.values) {
|
|
15439
|
+
const preselected = flat.filter((option) => option.selected && !option.disabled).map((option) => option.value);
|
|
15440
|
+
if (preselected.length > 0) {
|
|
15441
|
+
this.values = preselected;
|
|
15442
|
+
}
|
|
15164
15443
|
}
|
|
15165
15444
|
}
|
|
15166
|
-
|
|
15445
|
+
else {
|
|
15446
|
+
if (!this.value) {
|
|
15447
|
+
const preselected = flat.find((option) => option.selected && !option.disabled);
|
|
15448
|
+
if (preselected) {
|
|
15449
|
+
this.value = preselected.value;
|
|
15450
|
+
}
|
|
15451
|
+
}
|
|
15452
|
+
this.applySelectionFromValue();
|
|
15453
|
+
}
|
|
15167
15454
|
this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
|
|
15168
|
-
if (
|
|
15455
|
+
if (this.multiple) {
|
|
15456
|
+
if (!this.initialValuesCaptured) {
|
|
15457
|
+
this.initialValues = this.values ? [...this.values] : [];
|
|
15458
|
+
this.initialValuesCaptured = true;
|
|
15459
|
+
}
|
|
15460
|
+
}
|
|
15461
|
+
else if (!this.initialValueCaptured) {
|
|
15169
15462
|
this.initialValue = this.value;
|
|
15170
15463
|
this.initialValueCaptured = true;
|
|
15171
15464
|
}
|
|
@@ -15176,8 +15469,28 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15176
15469
|
this.selectedLabel = match?.label ?? '';
|
|
15177
15470
|
this.listboxController.setSelectedId(match?.id);
|
|
15178
15471
|
}
|
|
15472
|
+
isOptionSelected(option) {
|
|
15473
|
+
if (this.multiple) {
|
|
15474
|
+
return (this.values ?? []).includes(option.value);
|
|
15475
|
+
}
|
|
15476
|
+
return option.id === this.selectedId;
|
|
15477
|
+
}
|
|
15478
|
+
syncFormValue() {
|
|
15479
|
+
if (this.multiple) {
|
|
15480
|
+
const formData = new FormData();
|
|
15481
|
+
if (this.name) {
|
|
15482
|
+
for (const value of this.values ?? []) {
|
|
15483
|
+
formData.append(this.name, value);
|
|
15484
|
+
}
|
|
15485
|
+
}
|
|
15486
|
+
this.internals.setFormValue?.(formData);
|
|
15487
|
+
return;
|
|
15488
|
+
}
|
|
15489
|
+
this.internals.setFormValue?.(this.value ?? '');
|
|
15490
|
+
}
|
|
15179
15491
|
updateValidity() {
|
|
15180
|
-
|
|
15492
|
+
const missing = this.multiple ? !(this.values && this.values.length > 0) : !this.value;
|
|
15493
|
+
if (this.required && missing) {
|
|
15181
15494
|
this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
|
|
15182
15495
|
return;
|
|
15183
15496
|
}
|
|
@@ -15191,6 +15504,13 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15191
15504
|
const option = this.optionsById.get(id);
|
|
15192
15505
|
if (!option)
|
|
15193
15506
|
return;
|
|
15507
|
+
if (this.multiple) {
|
|
15508
|
+
const current = this.values ?? [];
|
|
15509
|
+
const updated = current.includes(option.value) ? current.filter((value) => value !== option.value) : [...current, option.value];
|
|
15510
|
+
this.values = updated;
|
|
15511
|
+
this.lmvzChange.emit(updated);
|
|
15512
|
+
return;
|
|
15513
|
+
}
|
|
15194
15514
|
const isNewValue = option.value !== this.value;
|
|
15195
15515
|
this.value = option.value;
|
|
15196
15516
|
if (isNewValue) {
|
|
@@ -15253,18 +15573,35 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15253
15573
|
return this.optionGroups.map((group, groupIndex) => group.label ? (hAsync("div", { role: "group", "aria-label": group.label, key: `lmvz-select-group-${groupIndex}` }, group.options.map((option) => this.renderOption(option)))) : (group.options.map((option) => this.renderOption(option))));
|
|
15254
15574
|
}
|
|
15255
15575
|
renderOption(option) {
|
|
15256
|
-
|
|
15576
|
+
const selected = this.isOptionSelected(option);
|
|
15577
|
+
return (hAsync("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, this.multiple && (hAsync("span", { class: "lmvz-select-option-checkbox", "aria-hidden": "true" }, selected && hAsync("span", { class: "lmvz-select-option-checkbox-indicator", innerHTML: CHECKMARK_SVG }))), option.label));
|
|
15578
|
+
}
|
|
15579
|
+
renderChips() {
|
|
15580
|
+
const values = this.values ?? [];
|
|
15581
|
+
const occurrenceCounts = new Map();
|
|
15582
|
+
return (hAsync(Fragment, null, values.map((value) => {
|
|
15583
|
+
const occurrence = occurrenceCounts.get(value) ?? 0;
|
|
15584
|
+
occurrenceCounts.set(value, occurrence + 1);
|
|
15585
|
+
const chipKey = occurrence === 0 ? value : `${value}-dup-${occurrence}`;
|
|
15586
|
+
const option = this.flatOptions.find((candidate) => candidate.value === value);
|
|
15587
|
+
const chipLabel = option?.label ?? value;
|
|
15588
|
+
return (hAsync("lmvz-chip", { key: chipKey, size: this.chipSize }, chipLabel));
|
|
15589
|
+
})));
|
|
15257
15590
|
}
|
|
15258
15591
|
render() {
|
|
15259
15592
|
const hasValue = this.hasValue;
|
|
15260
15593
|
const shouldShowLabel = hasValue;
|
|
15261
|
-
|
|
15594
|
+
const showChips = this.multiple && hasValue;
|
|
15595
|
+
return (hAsync(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, hAsync("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && hAsync("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), hAsync("div", { key: '034cc67405aac73a6557036dea90e4644c1578ed', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, hAsync("span", { key: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), hAsync("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, hAsync("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '35a8a50e27f18e54003974ae5b5ed578602664d3', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("lmvz-popover", { key: '0d5b94659c23763d59638046a397963d79a5e588', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), hAsync("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, hAsync("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (hAsync("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (hAsync("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
15262
15596
|
}
|
|
15263
15597
|
static get formAssociated() { return true; }
|
|
15264
15598
|
static get watchers() { return {
|
|
15265
15599
|
"value": [{
|
|
15266
15600
|
"handleValueChange": 0
|
|
15267
15601
|
}],
|
|
15602
|
+
"values": [{
|
|
15603
|
+
"handleValuesChange": 0
|
|
15604
|
+
}],
|
|
15268
15605
|
"required": [{
|
|
15269
15606
|
"handleRequiredChange": 0
|
|
15270
15607
|
}],
|
|
@@ -15278,6 +15615,8 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15278
15615
|
"$tagName$": "lmvz-select",
|
|
15279
15616
|
"$members$": {
|
|
15280
15617
|
"value": [1025],
|
|
15618
|
+
"multiple": [516],
|
|
15619
|
+
"values": [1040],
|
|
15281
15620
|
"label": [1],
|
|
15282
15621
|
"helperText": [1, "helper-text"],
|
|
15283
15622
|
"error": [6660],
|
|
@@ -15286,7 +15625,6 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15286
15625
|
"required": [516],
|
|
15287
15626
|
"name": [513],
|
|
15288
15627
|
"size": [513],
|
|
15289
|
-
"highlighted": [516],
|
|
15290
15628
|
"nativeError": [32],
|
|
15291
15629
|
"selectedLabel": [32],
|
|
15292
15630
|
"selectedId": [32],
|
|
@@ -15301,7 +15639,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
15301
15639
|
},
|
|
15302
15640
|
"$listeners$": [[0, "invalid", "handleInvalid"]],
|
|
15303
15641
|
"$lazyBundleId$": "-",
|
|
15304
|
-
"$attrsToReflect$": [["error", "error"], ["disabled", "disabled"], ["required", "required"], ["name", "name"], ["size", "size"]
|
|
15642
|
+
"$attrsToReflect$": [["multiple", "multiple"], ["error", "error"], ["disabled", "disabled"], ["required", "required"], ["name", "name"], ["size", "size"]]
|
|
15305
15643
|
}; }
|
|
15306
15644
|
}
|
|
15307
15645
|
function parseOptionElements(container, idPrefix) {
|
|
@@ -15504,10 +15842,12 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
15504
15842
|
instanceId = ++tabsIdCounter;
|
|
15505
15843
|
tabSlotEl;
|
|
15506
15844
|
panelSlotEl;
|
|
15845
|
+
tablistEl;
|
|
15507
15846
|
focusController = new DirectionalFocusController(this, {
|
|
15508
15847
|
orientation: 'horizontal',
|
|
15509
15848
|
manageTabIndex: true,
|
|
15510
15849
|
enableHomeAndEnd: true,
|
|
15850
|
+
listenerTarget: this.tablistEl,
|
|
15511
15851
|
});
|
|
15512
15852
|
value;
|
|
15513
15853
|
orientation = 'horizontal';
|
|
@@ -15528,6 +15868,9 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
15528
15868
|
this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
|
|
15529
15869
|
this.el.addEventListener('lmvzTabReady', this.handleTabReady);
|
|
15530
15870
|
this.handleTabSlotChange();
|
|
15871
|
+
if (this.tablistEl) {
|
|
15872
|
+
this.focusController.updateListenerTarget(this.tablistEl);
|
|
15873
|
+
}
|
|
15531
15874
|
super.componentDidLoad();
|
|
15532
15875
|
}
|
|
15533
15876
|
disconnectedCallback() {
|
|
@@ -15612,6 +15955,7 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
15612
15955
|
orientation: this.orientation,
|
|
15613
15956
|
manageTabIndex: true,
|
|
15614
15957
|
enableHomeAndEnd: true,
|
|
15958
|
+
listenerTarget: this.tablistEl,
|
|
15615
15959
|
});
|
|
15616
15960
|
this.addController(this.focusController);
|
|
15617
15961
|
if (this.el.isConnected) {
|
|
@@ -15734,7 +16078,7 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
15734
16078
|
this.selectTab(value);
|
|
15735
16079
|
};
|
|
15736
16080
|
render() {
|
|
15737
|
-
return (hAsync(Host, { key: '
|
|
16081
|
+
return (hAsync(Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
15738
16082
|
}
|
|
15739
16083
|
static get watchers() { return {
|
|
15740
16084
|
"value": [{
|