@lmvz-ds/components 0.33.0 → 0.35.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 +13 -0
- package/cjs/async.util-BQ60l-WC.js +20 -0
- package/cjs/{ds.constants-CKeXfK-s.js → ds.constants-C6eKRAEu.js} +5 -1
- package/cjs/{element.util-Cq4y-_iX.js → element.util-Dbyc8yUG.js} +35 -0
- package/cjs/index.cjs.js +3 -1
- package/cjs/{list-keyboard-controller-StN6Yn8W.js → list-keyboard-controller-Dm5S_l0D.js} +1 -1
- package/cjs/lmvz-action-list.cjs.entry.js +11 -4
- package/cjs/lmvz-button-group.cjs.entry.js +3 -3
- package/cjs/lmvz-button_2.cjs.entry.js +3 -3
- package/cjs/lmvz-card.cjs.entry.js +1 -1
- package/cjs/lmvz-checkbox.cjs.entry.js +1 -1
- package/cjs/lmvz-chip.cjs.entry.js +2 -2
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +3 -2
- package/cjs/lmvz-link.cjs.entry.js +2 -2
- package/cjs/lmvz-menuitem.cjs.entry.js +1 -1
- package/cjs/lmvz-message.cjs.entry.js +1 -1
- package/cjs/lmvz-modal.cjs.entry.js +2 -2
- package/cjs/lmvz-popover.cjs.entry.js +1570 -0
- package/cjs/lmvz-radio.cjs.entry.js +2 -2
- package/cjs/lmvz-select.cjs.entry.js +2 -2
- package/cjs/lmvz-snackbar.cjs.entry.js +2 -2
- package/cjs/lmvz-spinner.cjs.entry.js +1 -1
- package/cjs/lmvz-tab.cjs.entry.js +2 -2
- package/cjs/lmvz-tabs.cjs.entry.js +4 -4
- package/cjs/lmvz-toggle.cjs.entry.js +4 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{stencil.util-DzvzXSwk.js → stencil.util-DxdYjVoH.js} +2 -10
- package/collection/api/ds.constants.js +3 -1
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.css +151 -39
- package/collection/components/lmvz-action-list/lmvz-action-list.js +9 -1
- package/collection/components/lmvz-button/lmvz-button.css +15 -19
- package/collection/components/lmvz-button/lmvz-button.js +1 -1
- package/collection/components/lmvz-button-group/lmvz-button-group.css +1 -2
- package/collection/components/lmvz-card/lmvz-card.css +20 -23
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +9 -12
- package/collection/components/lmvz-chip/lmvz-chip.css +20 -20
- package/collection/components/lmvz-header/lmvz-header.css +3 -3
- package/collection/components/lmvz-icon/lmvz-icon.css +1 -1
- package/collection/components/lmvz-input/lmvz-input.css +3 -3
- package/collection/components/lmvz-link/lmvz-link.css +6 -4
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +1 -2
- package/collection/components/lmvz-message/lmvz-message.css +5 -5
- package/collection/components/lmvz-modal/lmvz-modal.css +6 -7
- package/collection/components/lmvz-popover/lmvz-popover.css +46 -0
- package/collection/components/lmvz-popover/lmvz-popover.js +470 -0
- package/collection/components/lmvz-radio/lmvz-radio.css +10 -12
- package/collection/components/lmvz-radio/lmvz-radio.js +1 -1
- package/collection/components/lmvz-select/lmvz-select.css +5 -5
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-snackbar/lmvz-snackbar.css +13 -13
- package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
- package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
- package/collection/components/lmvz-tab/lmvz-tab.css +9 -9
- package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.css +2 -2
- package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.css +4 -5
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/utils/async/async.util.js +6 -0
- package/collection/utils/element/element.util.js +33 -0
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-action-list.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-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.d.ts +11 -0
- package/components/lmvz-popover.d.ts.bak +11 -0
- package/components/lmvz-popover.js +1 -0
- 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-0ctLESas.js +1 -0
- package/components/p-BhSTYZC6.js +1 -0
- package/components/{p-CxfT9IA1.js → p-CK3Ixl1K.js} +1 -1
- package/components/{p-B4m1n4et.js → p-D-2gj6LP.js} +1 -1
- package/components/{p-Rf10bzJY.js → p-D7S1WiEC.js} +1 -1
- package/components/p-D9nUtvTm.js +1 -0
- package/components/{p-De-xQqdU.js → p-DbIm98qX.js} +1 -1
- package/components/p-JtkmlmeY.js +1 -0
- package/esm/async.util-D9nUtvTm.js +17 -0
- package/esm/{ds.constants-DuEtnKRj.js → ds.constants-0ctLESas.js} +4 -2
- package/esm/{element.util-CxfT9IA1.js → element.util-B0eCxdyI.js} +34 -1
- package/esm/index.js +1 -1
- package/esm/{list-keyboard-controller-BKa9Kd2t.js → list-keyboard-controller-tle6IRkv.js} +1 -1
- package/esm/lmvz-action-list.entry.js +11 -4
- package/esm/lmvz-button-group.entry.js +3 -3
- package/esm/lmvz-button_2.entry.js +3 -3
- package/esm/lmvz-card.entry.js +1 -1
- package/esm/lmvz-checkbox.entry.js +1 -1
- package/esm/lmvz-chip.entry.js +2 -2
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +3 -2
- package/esm/lmvz-link.entry.js +2 -2
- package/esm/lmvz-menuitem.entry.js +1 -1
- package/esm/lmvz-message.entry.js +1 -1
- package/esm/lmvz-modal.entry.js +2 -2
- package/esm/lmvz-popover.entry.js +1568 -0
- package/esm/lmvz-radio.entry.js +2 -2
- package/esm/lmvz-select.entry.js +2 -2
- package/esm/lmvz-snackbar.entry.js +2 -2
- package/esm/lmvz-spinner.entry.js +1 -1
- package/esm/lmvz-tab.entry.js +2 -2
- package/esm/lmvz-tabs.entry.js +4 -4
- package/esm/lmvz-toggle.entry.js +4 -3
- package/esm/loader.js +1 -1
- package/esm/{stencil.util-CJRqhXjK.js → stencil.util-wGFRYLwZ.js} +1 -9
- package/hydrate/index.js +1660 -33
- package/hydrate/index.mjs +1660 -33
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-47824515.entry.js → p-0c05f24b.entry.js} +1 -1
- package/lmvz-components/p-0ctLESas.js +1 -0
- package/lmvz-components/{p-8be4dbb7.entry.js → p-1d2c11ea.entry.js} +1 -1
- package/lmvz-components/{p-3da087f4.entry.js → p-49e98627.entry.js} +1 -1
- package/lmvz-components/p-4c68d21a.entry.js +1 -0
- package/lmvz-components/p-50063516.entry.js +1 -0
- package/lmvz-components/{p-24125bcf.entry.js → p-5bbbcfc0.entry.js} +1 -1
- package/lmvz-components/p-76be3fc9.entry.js +1 -0
- package/lmvz-components/{p-703b10b5.entry.js → p-854f1c72.entry.js} +1 -1
- package/lmvz-components/p-886e42c7.entry.js +1 -0
- package/lmvz-components/{p-6140866f.entry.js → p-8fb4c347.entry.js} +1 -1
- package/lmvz-components/p-9f8fd077.entry.js +1 -0
- package/lmvz-components/{p-CxfT9IA1.js → p-B0eCxdyI.js} +1 -1
- package/lmvz-components/p-BhSTYZC6.js +1 -0
- package/lmvz-components/p-D9nUtvTm.js +1 -0
- package/lmvz-components/{p-B4m1n4et.js → p-DuLiExhX.js} +1 -1
- package/lmvz-components/{p-b4aa0978.entry.js → p-a4ef8e55.entry.js} +1 -1
- package/lmvz-components/p-bc237ab7.entry.js +1 -0
- package/lmvz-components/{p-3a644b99.entry.js → p-c082390b.entry.js} +1 -1
- package/lmvz-components/{p-b79af711.entry.js → p-c2544495.entry.js} +1 -1
- package/lmvz-components/p-c494bf8f.entry.js +1 -0
- package/lmvz-components/{p-48a7b033.entry.js → p-c87e2281.entry.js} +1 -1
- package/lmvz-components/{p-00ccaea4.entry.js → p-cb75c951.entry.js} +1 -1
- package/lmvz-components/{p-44781f01.entry.js → p-e0432f54.entry.js} +1 -1
- package/lmvz-components/{p-25a78ead.entry.js → p-ecbd9e93.entry.js} +1 -1
- package/manifest.json +386 -3
- package/package.json +5 -1
- package/types/api/ds.constants.d.ts +3 -1
- package/types/api/ds.types.d.ts +7 -0
- package/types/components/lmvz-popover/lmvz-popover.d.ts +37 -0
- package/types/components.d.ts +108 -1
- package/types/utils/async/async.util.d.ts +3 -0
- package/types/utils/element/element.util.d.ts +2 -0
- package/components/p-Bld_XR3X.js +0 -1
- package/components/p-CJRqhXjK.js +0 -1
- package/components/p-DuEtnKRj.js +0 -1
- package/lmvz-components/p-4072b2fb.entry.js +0 -1
- package/lmvz-components/p-8c7d9eaf.entry.js +0 -1
- package/lmvz-components/p-92d02c56.entry.js +0 -1
- package/lmvz-components/p-933e6033.entry.js +0 -1
- package/lmvz-components/p-CJRqhXjK.js +0 -1
- package/lmvz-components/p-DuEtnKRj.js +0 -1
- package/lmvz-components/p-d9619a4f.entry.js +0 -1
- package/lmvz-components/p-e1758128.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5725,6 +5725,19 @@ function getDeepActiveElement(root = document) {
|
|
|
5725
5725
|
}
|
|
5726
5726
|
return activeElement;
|
|
5727
5727
|
}
|
|
5728
|
+
function walkShadowDOMUntil(start, condition) {
|
|
5729
|
+
if (!start)
|
|
5730
|
+
return undefined;
|
|
5731
|
+
if (condition(start))
|
|
5732
|
+
return start;
|
|
5733
|
+
const children = start.shadowRoot ? Array.from(start.shadowRoot.children) : Array.from(start.children);
|
|
5734
|
+
for (const child of children) {
|
|
5735
|
+
const result = walkShadowDOMUntil(child, condition);
|
|
5736
|
+
if (result)
|
|
5737
|
+
return result;
|
|
5738
|
+
}
|
|
5739
|
+
return undefined;
|
|
5740
|
+
}
|
|
5728
5741
|
function canReceiveFocus(el) {
|
|
5729
5742
|
if (!el)
|
|
5730
5743
|
return false;
|
|
@@ -5756,6 +5769,26 @@ function findFormByRef(form, el) {
|
|
|
5756
5769
|
}
|
|
5757
5770
|
return el.closest('form');
|
|
5758
5771
|
}
|
|
5772
|
+
function isInteractiveElement(el) {
|
|
5773
|
+
const tagName = el.tagName.toLowerCase();
|
|
5774
|
+
if (['button', 'input', 'select', 'textarea'].includes(tagName)) {
|
|
5775
|
+
return true;
|
|
5776
|
+
}
|
|
5777
|
+
if (tagName === 'a' && el.hasAttribute('href')) {
|
|
5778
|
+
return true;
|
|
5779
|
+
}
|
|
5780
|
+
if (el.hasAttribute('tabindex')) {
|
|
5781
|
+
return true;
|
|
5782
|
+
}
|
|
5783
|
+
const role = el.getAttribute('role');
|
|
5784
|
+
if (role) {
|
|
5785
|
+
const interactiveRoles = ['button', 'link', 'menuitem', 'option', 'combobox', 'listbox', 'checkbox', 'radio', 'switch', 'tab'];
|
|
5786
|
+
if (interactiveRoles.includes(role)) {
|
|
5787
|
+
return true;
|
|
5788
|
+
}
|
|
5789
|
+
}
|
|
5790
|
+
return false;
|
|
5791
|
+
}
|
|
5759
5792
|
|
|
5760
5793
|
const defaultConfig = {
|
|
5761
5794
|
orientation: 'both',
|
|
@@ -5970,7 +6003,7 @@ class ReactiveControllerHost {
|
|
|
5970
6003
|
}
|
|
5971
6004
|
}
|
|
5972
6005
|
|
|
5973
|
-
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-4
|
|
6006
|
+
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); } } .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-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); 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)); } 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-override: normal; width: 100%; display: block; } button { --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)); } } }`;
|
|
5974
6007
|
|
|
5975
6008
|
class LmvzActionList extends ReactiveControllerHost {
|
|
5976
6009
|
get el() { return getElement(this); }
|
|
@@ -6008,11 +6041,18 @@ class LmvzActionList extends ReactiveControllerHost {
|
|
|
6008
6041
|
for (const el of assigned) {
|
|
6009
6042
|
collectInteractiveButtonsRecursively(el, interactive);
|
|
6010
6043
|
}
|
|
6044
|
+
for (const it of interactive) {
|
|
6045
|
+
if (!isLmvzButton(it))
|
|
6046
|
+
continue;
|
|
6047
|
+
if (it.variant)
|
|
6048
|
+
continue;
|
|
6049
|
+
it.variant = 'tertiary';
|
|
6050
|
+
}
|
|
6011
6051
|
this.focusController.updateElements(interactive);
|
|
6012
6052
|
};
|
|
6013
6053
|
render() {
|
|
6014
6054
|
const ariaLabel = this.label || undefined;
|
|
6015
|
-
return (hAsync(Host, { key: '
|
|
6055
|
+
return (hAsync(Host, { key: '1180ac5cb2ad83db0279a5cd2ce15d9ab75d03ca', role: "menu", "aria-label": ariaLabel }, hAsync("slot", { key: '479179e7ec42780e73936d50703ff46d48a89efb', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
|
|
6016
6056
|
}
|
|
6017
6057
|
static get style() { return lmvzActionListCss(); }
|
|
6018
6058
|
static get cmpMeta() { return {
|
|
@@ -6168,7 +6208,7 @@ class ElementActivationController {
|
|
|
6168
6208
|
};
|
|
6169
6209
|
}
|
|
6170
6210
|
|
|
6171
|
-
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-4
|
|
6211
|
+
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); } } :host { 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); 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: inline-block; button { width: 100%; } } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
6172
6212
|
|
|
6173
6213
|
class LmvzButton extends ReactiveControllerHost {
|
|
6174
6214
|
get el() { return getElement(this); }
|
|
@@ -6297,7 +6337,7 @@ function negate(delegate) {
|
|
|
6297
6337
|
};
|
|
6298
6338
|
}
|
|
6299
6339
|
|
|
6300
|
-
const variants = ['primary', 'secondary', 'tertiary'];
|
|
6340
|
+
const variants = ['primary', 'secondary', 'tertiary', 'danger'];
|
|
6301
6341
|
const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
|
|
6302
6342
|
const chipSizes = ['default', 'small'];
|
|
6303
6343
|
const linkTypes = ['internal', 'external'];
|
|
@@ -7910,7 +7950,7 @@ class MicroFiberImpl {
|
|
|
7910
7950
|
const prev = current;
|
|
7911
7951
|
current = flatMap(yieldNow, () => prev);
|
|
7912
7952
|
}
|
|
7913
|
-
current = current[evaluate](this);
|
|
7953
|
+
current = current[evaluate$1](this);
|
|
7914
7954
|
if (current === Yield) {
|
|
7915
7955
|
const yielded = this._yielded;
|
|
7916
7956
|
if (MicroExitTypeId in yielded) {
|
|
@@ -7921,7 +7961,7 @@ class MicroFiberImpl {
|
|
|
7921
7961
|
}
|
|
7922
7962
|
}
|
|
7923
7963
|
} catch (error) {
|
|
7924
|
-
if (!hasProperty(current, evaluate)) {
|
|
7964
|
+
if (!hasProperty(current, evaluate$1)) {
|
|
7925
7965
|
return exitDie(`MicroFiber.runLoop: Not a valid effect: ${String(current)}`);
|
|
7926
7966
|
}
|
|
7927
7967
|
return exitDie(error);
|
|
@@ -7953,7 +7993,7 @@ const fiberMiddleware = /*#__PURE__*/globalValue("effect/Micro/fiberMiddleware",
|
|
|
7953
7993
|
}));
|
|
7954
7994
|
const identifier = /*#__PURE__*/Symbol.for("effect/Micro/identifier");
|
|
7955
7995
|
const args = /*#__PURE__*/Symbol.for("effect/Micro/args");
|
|
7956
|
-
const evaluate = /*#__PURE__*/Symbol.for("effect/Micro/evaluate");
|
|
7996
|
+
const evaluate$1 = /*#__PURE__*/Symbol.for("effect/Micro/evaluate");
|
|
7957
7997
|
const successCont = /*#__PURE__*/Symbol.for("effect/Micro/successCont");
|
|
7958
7998
|
const failureCont = /*#__PURE__*/Symbol.for("effect/Micro/failureCont");
|
|
7959
7999
|
const ensureCont = /*#__PURE__*/Symbol.for("effect/Micro/ensureCont");
|
|
@@ -7995,7 +8035,7 @@ function defaultEvaluate(_fiber) {
|
|
|
7995
8035
|
const makePrimitiveProto = options => ({
|
|
7996
8036
|
...MicroProto,
|
|
7997
8037
|
[identifier]: options.op,
|
|
7998
|
-
[evaluate]: options.eval ?? defaultEvaluate,
|
|
8038
|
+
[evaluate$1]: options.eval ?? defaultEvaluate,
|
|
7999
8039
|
[successCont]: options.contA,
|
|
8000
8040
|
[failureCont]: options.contE,
|
|
8001
8041
|
[ensureCont]: options.ensure
|
|
@@ -8340,7 +8380,7 @@ const YieldableError = /*#__PURE__*/function () {
|
|
|
8340
8380
|
// @effect-diagnostics-next-line floatingEffect:off
|
|
8341
8381
|
Object.assign(YieldableError.prototype, MicroProto, StructuralPrototype, {
|
|
8342
8382
|
[identifier]: "Failure",
|
|
8343
|
-
[evaluate]() {
|
|
8383
|
+
[evaluate$1]() {
|
|
8344
8384
|
return fail(this);
|
|
8345
8385
|
},
|
|
8346
8386
|
toString() {
|
|
@@ -8452,7 +8492,7 @@ function toValidSvgStringWithFallback(value) {
|
|
|
8452
8492
|
}
|
|
8453
8493
|
}
|
|
8454
8494
|
|
|
8455
|
-
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
|
|
8495
|
+
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}`;
|
|
8456
8496
|
|
|
8457
8497
|
class LmvzButtonGroup {
|
|
8458
8498
|
constructor(hostRef) {
|
|
@@ -8641,7 +8681,7 @@ function joinPath(...parts) {
|
|
|
8641
8681
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
8642
8682
|
}
|
|
8643
8683
|
|
|
8644
|
-
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-4-8, 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); } } .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-body-md-strong, 500 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: 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); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-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.secondary { --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-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000)); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000)); } 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-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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-body-lg-strong, 500 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-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.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; }`;
|
|
8684
|
+
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); } } .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); 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; }`;
|
|
8645
8685
|
|
|
8646
8686
|
class LmvzCard {
|
|
8647
8687
|
constructor(hostRef) {
|
|
@@ -8687,7 +8727,7 @@ class LmvzCard {
|
|
|
8687
8727
|
|
|
8688
8728
|
const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
|
|
8689
8729
|
|
|
8690
|
-
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, #
|
|
8730
|
+
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; } .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:focus-within .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:focus-within .pill.sc-lmvz-checkbox { outline-color: Highlight; box-shadow: none; } }`;
|
|
8691
8731
|
|
|
8692
8732
|
const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
|
|
8693
8733
|
let checkboxIdCounter = 0;
|
|
@@ -8829,7 +8869,7 @@ function debounce(func, wait) {
|
|
|
8829
8869
|
};
|
|
8830
8870
|
}
|
|
8831
8871
|
|
|
8832
|
-
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, #
|
|
8872
|
+
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, #c1e6fa); --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); } `;
|
|
8833
8873
|
|
|
8834
8874
|
class LmvzChip extends ReactiveControllerHost {
|
|
8835
8875
|
ariaValidationController = new AriaValidationController(this);
|
|
@@ -8903,7 +8943,7 @@ class LmvzChip extends ReactiveControllerHost {
|
|
|
8903
8943
|
|
|
8904
8944
|
const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
|
|
8905
8945
|
|
|
8906
|
-
const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8
|
|
8946
|
+
const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-28-8, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-16-8, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}`;
|
|
8907
8947
|
|
|
8908
8948
|
class LmvzHeader extends ReactiveControllerHost {
|
|
8909
8949
|
get el() { return getElement(this); }
|
|
@@ -9008,7 +9048,7 @@ class LmvzHeader extends ReactiveControllerHost {
|
|
|
9008
9048
|
}; }
|
|
9009
9049
|
}
|
|
9010
9050
|
|
|
9011
|
-
const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.
|
|
9051
|
+
const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
|
|
9012
9052
|
|
|
9013
9053
|
class LmvzIcon extends ReactiveControllerHost {
|
|
9014
9054
|
intersectionObserver;
|
|
@@ -9090,6 +9130,12 @@ class LmvzIcon extends ReactiveControllerHost {
|
|
|
9090
9130
|
}; }
|
|
9091
9131
|
}
|
|
9092
9132
|
|
|
9133
|
+
const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
|
|
9134
|
+
const wait = () => new Promise((resolve) => setTimeout(() => resolve()));
|
|
9135
|
+
const waitFrame = async () => {
|
|
9136
|
+
await wait();
|
|
9137
|
+
await nextFrame();
|
|
9138
|
+
};
|
|
9093
9139
|
const raf = (h) => {
|
|
9094
9140
|
if (typeof __zone_symbol__requestAnimationFrame === 'function') {
|
|
9095
9141
|
return __zone_symbol__requestAnimationFrame(h);
|
|
@@ -9112,7 +9158,7 @@ const hasLazyBuild = (stencilEl) => {
|
|
|
9112
9158
|
return stencilEl.componentOnReady !== undefined;
|
|
9113
9159
|
};
|
|
9114
9160
|
|
|
9115
|
-
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #
|
|
9161
|
+
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
|
|
9116
9162
|
|
|
9117
9163
|
let inputIdCounter = 0;
|
|
9118
9164
|
class LmvzInput extends ReactiveControllerHost {
|
|
@@ -9333,7 +9379,7 @@ const arrowRightSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0
|
|
|
9333
9379
|
|
|
9334
9380
|
const externalSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxIDlWM0gxNU0yMSAzTDEwIDE0TTE4IDEzVjE5QzE4IDE5LjUzMDQgMTcuNzg5MyAyMC4wMzkxIDE3LjQxNDIgMjAuNDE0MkMxNy4wMzkxIDIwLjc4OTMgMTYuNTMwNCAyMSAxNiAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWOEMzIDcuNDY5NTcgMy4yMTA3MSA2Ljk2MDg2IDMuNTg1NzkgNi41ODU3OUMzLjk2MDg2IDYuMjEwNzEgNC40Njk1NyA2IDUgNkgxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
|
|
9335
9381
|
|
|
9336
|
-
const lmvzLinkCss = () => `:host{display:inline}a{display:inline-flex;align-items:center;gap:var(--lmvz-dimension-4
|
|
9382
|
+
const lmvzLinkCss = () => `:host{display:inline}a{display:inline-flex;align-items:center;gap:var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));padding-inline:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));padding-block:var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));border-radius:var(--lmvz-semantic-border-radius-round, 999px);color:var(--lmvz-semantic-color-int-on-tertiary, #000000);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);text-decoration:underline;transition:background-color 0.15s ease, color 0.15s ease}a:hover{background-color:var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);color:var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)}a:active{background-color:var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);color:var(--lmvz-semantic-color-int-on-tertiary-active, #000000)}a: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))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:rect(0 0 0 0);white-space:nowrap;border-width:0}`;
|
|
9337
9383
|
|
|
9338
9384
|
const ARROW_RIGHT_SVG = toValidSvgStringWithFallback(arrowRightSvg);
|
|
9339
9385
|
const EXTERNAL_SVG = toValidSvgStringWithFallback(externalSvg);
|
|
@@ -9404,7 +9450,7 @@ class LmvzLink {
|
|
|
9404
9450
|
}; }
|
|
9405
9451
|
}
|
|
9406
9452
|
|
|
9407
|
-
const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
|
|
9453
|
+
const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
|
|
9408
9454
|
|
|
9409
9455
|
class LmvzMenuItem extends ReactiveControllerHost {
|
|
9410
9456
|
get el() { return getElement(this); }
|
|
@@ -9449,7 +9495,7 @@ const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiI
|
|
|
9449
9495
|
|
|
9450
9496
|
const warningSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjI4NjQgMy4wNDkzOEMxMS4wMzgwIDEuNjUwMjEgMTIuOTYyMCAxLjY1MDIxIDEzLjcxMzYgMy4wNDkzOEwyMi42NjY4IDE5LjI0OTRDMjMuNDAyNiAyMC42MTYxIDIyLjQ1ODggMjIuMjUwMCAyMC45NTMyIDIyLjI1MDBIMy4wNDY4MEMxLjU0MTIwIDIyLjI1MDAgMC41OTc0MTAgMjAuNjE2MSAxLjMzMzIwIDE5LjI0OTRMMTAuMjg2NCAzLjA0OTM4Wk0xMiA4QzExLjQ0NzcgOCAxMSA4LjQ0NzcyIDExIDlWMTRDMTEgMTQuNTUyMyAxMS40NDc3IDE1IDEyIDE1QzEyLjU1MjMgMTUgMTMgMTQuNTUyMyAxMyAxNFY5QzEzIDguNDQ3NzIgMTIuNTUyMyA4IDEyIDhaTTEyIDE2QzExLjQ0NzcgMTYgMTEgMTYuNDQ3NyAxMSAxN0MxMSAxNy41NTIzIDExLjQ0NzcgMTggMTIgMThDMTIuNTUyMyAxOCAxMyAxNy41NTIzIDEzIDE3QzEzIDE2LjQ0NzcgMTIuNTUyMyAxNiAxMiAxNloiLz4KPC9zdmc+Cg==';
|
|
9451
9497
|
|
|
9452
|
-
const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-10
|
|
9498
|
+
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, #c1e6fa);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}`;
|
|
9453
9499
|
|
|
9454
9500
|
const INFO_SVG = toValidSvgStringWithFallback(infoSvg);
|
|
9455
9501
|
const WARNING_SVG = toValidSvgStringWithFallback(warningSvg);
|
|
@@ -9532,7 +9578,7 @@ class LmvzMessage {
|
|
|
9532
9578
|
}; }
|
|
9533
9579
|
}
|
|
9534
9580
|
|
|
9535
|
-
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-4
|
|
9581
|
+
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); 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); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
|
|
9536
9582
|
|
|
9537
9583
|
const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
|
|
9538
9584
|
let modalIdCounter = 0;
|
|
@@ -9778,6 +9824,1586 @@ class LmvzModal extends ReactiveControllerHost {
|
|
|
9778
9824
|
}; }
|
|
9779
9825
|
}
|
|
9780
9826
|
|
|
9827
|
+
/**
|
|
9828
|
+
* Custom positioning reference element.
|
|
9829
|
+
* @see https://floating-ui.com/docs/virtual-elements
|
|
9830
|
+
*/
|
|
9831
|
+
|
|
9832
|
+
const min = Math.min;
|
|
9833
|
+
const max = Math.max;
|
|
9834
|
+
const round = Math.round;
|
|
9835
|
+
const createCoords = v => ({
|
|
9836
|
+
x: v,
|
|
9837
|
+
y: v
|
|
9838
|
+
});
|
|
9839
|
+
const oppositeSideMap = {
|
|
9840
|
+
left: 'right',
|
|
9841
|
+
right: 'left',
|
|
9842
|
+
bottom: 'top',
|
|
9843
|
+
top: 'bottom'
|
|
9844
|
+
};
|
|
9845
|
+
function clamp(start, value, end) {
|
|
9846
|
+
return max(start, min(value, end));
|
|
9847
|
+
}
|
|
9848
|
+
function evaluate(value, param) {
|
|
9849
|
+
return typeof value === 'function' ? value(param) : value;
|
|
9850
|
+
}
|
|
9851
|
+
function getSide(placement) {
|
|
9852
|
+
return placement.split('-')[0];
|
|
9853
|
+
}
|
|
9854
|
+
function getAlignment(placement) {
|
|
9855
|
+
return placement.split('-')[1];
|
|
9856
|
+
}
|
|
9857
|
+
function getOppositeAxis(axis) {
|
|
9858
|
+
return axis === 'x' ? 'y' : 'x';
|
|
9859
|
+
}
|
|
9860
|
+
function getAxisLength(axis) {
|
|
9861
|
+
return axis === 'y' ? 'height' : 'width';
|
|
9862
|
+
}
|
|
9863
|
+
function getSideAxis(placement) {
|
|
9864
|
+
const firstChar = placement[0];
|
|
9865
|
+
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
|
|
9866
|
+
}
|
|
9867
|
+
function getAlignmentAxis(placement) {
|
|
9868
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
9869
|
+
}
|
|
9870
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
9871
|
+
if (rtl === void 0) {
|
|
9872
|
+
rtl = false;
|
|
9873
|
+
}
|
|
9874
|
+
const alignment = getAlignment(placement);
|
|
9875
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
9876
|
+
const length = getAxisLength(alignmentAxis);
|
|
9877
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
9878
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
9879
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
9880
|
+
}
|
|
9881
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
9882
|
+
}
|
|
9883
|
+
function getExpandedPlacements(placement) {
|
|
9884
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
9885
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
9886
|
+
}
|
|
9887
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
9888
|
+
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
|
9889
|
+
}
|
|
9890
|
+
const lrPlacement = ['left', 'right'];
|
|
9891
|
+
const rlPlacement = ['right', 'left'];
|
|
9892
|
+
const tbPlacement = ['top', 'bottom'];
|
|
9893
|
+
const btPlacement = ['bottom', 'top'];
|
|
9894
|
+
function getSideList(side, isStart, rtl) {
|
|
9895
|
+
switch (side) {
|
|
9896
|
+
case 'top':
|
|
9897
|
+
case 'bottom':
|
|
9898
|
+
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
9899
|
+
return isStart ? lrPlacement : rlPlacement;
|
|
9900
|
+
case 'left':
|
|
9901
|
+
case 'right':
|
|
9902
|
+
return isStart ? tbPlacement : btPlacement;
|
|
9903
|
+
default:
|
|
9904
|
+
return [];
|
|
9905
|
+
}
|
|
9906
|
+
}
|
|
9907
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
9908
|
+
const alignment = getAlignment(placement);
|
|
9909
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
9910
|
+
if (alignment) {
|
|
9911
|
+
list = list.map(side => side + "-" + alignment);
|
|
9912
|
+
if (flipAlignment) {
|
|
9913
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
9914
|
+
}
|
|
9915
|
+
}
|
|
9916
|
+
return list;
|
|
9917
|
+
}
|
|
9918
|
+
function getOppositePlacement(placement) {
|
|
9919
|
+
const side = getSide(placement);
|
|
9920
|
+
return oppositeSideMap[side] + placement.slice(side.length);
|
|
9921
|
+
}
|
|
9922
|
+
function expandPaddingObject(padding) {
|
|
9923
|
+
return {
|
|
9924
|
+
top: 0,
|
|
9925
|
+
right: 0,
|
|
9926
|
+
bottom: 0,
|
|
9927
|
+
left: 0,
|
|
9928
|
+
...padding
|
|
9929
|
+
};
|
|
9930
|
+
}
|
|
9931
|
+
function getPaddingObject(padding) {
|
|
9932
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
9933
|
+
top: padding,
|
|
9934
|
+
right: padding,
|
|
9935
|
+
bottom: padding,
|
|
9936
|
+
left: padding
|
|
9937
|
+
};
|
|
9938
|
+
}
|
|
9939
|
+
function rectToClientRect(rect) {
|
|
9940
|
+
const {
|
|
9941
|
+
x,
|
|
9942
|
+
y,
|
|
9943
|
+
width,
|
|
9944
|
+
height
|
|
9945
|
+
} = rect;
|
|
9946
|
+
return {
|
|
9947
|
+
width,
|
|
9948
|
+
height,
|
|
9949
|
+
top: y,
|
|
9950
|
+
left: x,
|
|
9951
|
+
right: x + width,
|
|
9952
|
+
bottom: y + height,
|
|
9953
|
+
x,
|
|
9954
|
+
y
|
|
9955
|
+
};
|
|
9956
|
+
}
|
|
9957
|
+
|
|
9958
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
9959
|
+
let {
|
|
9960
|
+
reference,
|
|
9961
|
+
floating
|
|
9962
|
+
} = _ref;
|
|
9963
|
+
const sideAxis = getSideAxis(placement);
|
|
9964
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
9965
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
9966
|
+
const side = getSide(placement);
|
|
9967
|
+
const isVertical = sideAxis === 'y';
|
|
9968
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
9969
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
9970
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
9971
|
+
let coords;
|
|
9972
|
+
switch (side) {
|
|
9973
|
+
case 'top':
|
|
9974
|
+
coords = {
|
|
9975
|
+
x: commonX,
|
|
9976
|
+
y: reference.y - floating.height
|
|
9977
|
+
};
|
|
9978
|
+
break;
|
|
9979
|
+
case 'bottom':
|
|
9980
|
+
coords = {
|
|
9981
|
+
x: commonX,
|
|
9982
|
+
y: reference.y + reference.height
|
|
9983
|
+
};
|
|
9984
|
+
break;
|
|
9985
|
+
case 'right':
|
|
9986
|
+
coords = {
|
|
9987
|
+
x: reference.x + reference.width,
|
|
9988
|
+
y: commonY
|
|
9989
|
+
};
|
|
9990
|
+
break;
|
|
9991
|
+
case 'left':
|
|
9992
|
+
coords = {
|
|
9993
|
+
x: reference.x - floating.width,
|
|
9994
|
+
y: commonY
|
|
9995
|
+
};
|
|
9996
|
+
break;
|
|
9997
|
+
default:
|
|
9998
|
+
coords = {
|
|
9999
|
+
x: reference.x,
|
|
10000
|
+
y: reference.y
|
|
10001
|
+
};
|
|
10002
|
+
}
|
|
10003
|
+
switch (getAlignment(placement)) {
|
|
10004
|
+
case 'start':
|
|
10005
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
10006
|
+
break;
|
|
10007
|
+
case 'end':
|
|
10008
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
10009
|
+
break;
|
|
10010
|
+
}
|
|
10011
|
+
return coords;
|
|
10012
|
+
}
|
|
10013
|
+
|
|
10014
|
+
/**
|
|
10015
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
10016
|
+
* element is overflowing a given clipping boundary on each side.
|
|
10017
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
10018
|
+
* - negative = how many pixels left before it will overflow
|
|
10019
|
+
* - 0 = lies flush with the boundary
|
|
10020
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
10021
|
+
*/
|
|
10022
|
+
async function detectOverflow(state, options) {
|
|
10023
|
+
var _await$platform$isEle;
|
|
10024
|
+
if (options === void 0) {
|
|
10025
|
+
options = {};
|
|
10026
|
+
}
|
|
10027
|
+
const {
|
|
10028
|
+
x,
|
|
10029
|
+
y,
|
|
10030
|
+
platform,
|
|
10031
|
+
rects,
|
|
10032
|
+
elements,
|
|
10033
|
+
strategy
|
|
10034
|
+
} = state;
|
|
10035
|
+
const {
|
|
10036
|
+
boundary = 'clippingAncestors',
|
|
10037
|
+
rootBoundary = 'viewport',
|
|
10038
|
+
elementContext = 'floating',
|
|
10039
|
+
altBoundary = false,
|
|
10040
|
+
padding = 0
|
|
10041
|
+
} = evaluate(options, state);
|
|
10042
|
+
const paddingObject = getPaddingObject(padding);
|
|
10043
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
10044
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
10045
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
10046
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
10047
|
+
boundary,
|
|
10048
|
+
rootBoundary,
|
|
10049
|
+
strategy
|
|
10050
|
+
}));
|
|
10051
|
+
const rect = elementContext === 'floating' ? {
|
|
10052
|
+
x,
|
|
10053
|
+
y,
|
|
10054
|
+
width: rects.floating.width,
|
|
10055
|
+
height: rects.floating.height
|
|
10056
|
+
} : rects.reference;
|
|
10057
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
10058
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
10059
|
+
x: 1,
|
|
10060
|
+
y: 1
|
|
10061
|
+
} : {
|
|
10062
|
+
x: 1,
|
|
10063
|
+
y: 1
|
|
10064
|
+
};
|
|
10065
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
10066
|
+
elements,
|
|
10067
|
+
rect,
|
|
10068
|
+
offsetParent,
|
|
10069
|
+
strategy
|
|
10070
|
+
}) : rect);
|
|
10071
|
+
return {
|
|
10072
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
10073
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
10074
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
10075
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
10076
|
+
};
|
|
10077
|
+
}
|
|
10078
|
+
|
|
10079
|
+
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
|
10080
|
+
const MAX_RESET_COUNT = 50;
|
|
10081
|
+
|
|
10082
|
+
/**
|
|
10083
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
10084
|
+
* next to a given reference element.
|
|
10085
|
+
*
|
|
10086
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
10087
|
+
* write one for the platform you are using Floating UI with.
|
|
10088
|
+
*/
|
|
10089
|
+
const computePosition$1 = async (reference, floating, config) => {
|
|
10090
|
+
const {
|
|
10091
|
+
placement = 'bottom',
|
|
10092
|
+
strategy = 'absolute',
|
|
10093
|
+
middleware = [],
|
|
10094
|
+
platform
|
|
10095
|
+
} = config;
|
|
10096
|
+
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
10097
|
+
...platform,
|
|
10098
|
+
detectOverflow
|
|
10099
|
+
};
|
|
10100
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
10101
|
+
let rects = await platform.getElementRects({
|
|
10102
|
+
reference,
|
|
10103
|
+
floating,
|
|
10104
|
+
strategy
|
|
10105
|
+
});
|
|
10106
|
+
let {
|
|
10107
|
+
x,
|
|
10108
|
+
y
|
|
10109
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
10110
|
+
let statefulPlacement = placement;
|
|
10111
|
+
let resetCount = 0;
|
|
10112
|
+
const middlewareData = {};
|
|
10113
|
+
for (let i = 0; i < middleware.length; i++) {
|
|
10114
|
+
const currentMiddleware = middleware[i];
|
|
10115
|
+
if (!currentMiddleware) {
|
|
10116
|
+
continue;
|
|
10117
|
+
}
|
|
10118
|
+
const {
|
|
10119
|
+
name,
|
|
10120
|
+
fn
|
|
10121
|
+
} = currentMiddleware;
|
|
10122
|
+
const {
|
|
10123
|
+
x: nextX,
|
|
10124
|
+
y: nextY,
|
|
10125
|
+
data,
|
|
10126
|
+
reset
|
|
10127
|
+
} = await fn({
|
|
10128
|
+
x,
|
|
10129
|
+
y,
|
|
10130
|
+
initialPlacement: placement,
|
|
10131
|
+
placement: statefulPlacement,
|
|
10132
|
+
strategy,
|
|
10133
|
+
middlewareData,
|
|
10134
|
+
rects,
|
|
10135
|
+
platform: platformWithDetectOverflow,
|
|
10136
|
+
elements: {
|
|
10137
|
+
reference,
|
|
10138
|
+
floating
|
|
10139
|
+
}
|
|
10140
|
+
});
|
|
10141
|
+
x = nextX != null ? nextX : x;
|
|
10142
|
+
y = nextY != null ? nextY : y;
|
|
10143
|
+
middlewareData[name] = {
|
|
10144
|
+
...middlewareData[name],
|
|
10145
|
+
...data
|
|
10146
|
+
};
|
|
10147
|
+
if (reset && resetCount < MAX_RESET_COUNT) {
|
|
10148
|
+
resetCount++;
|
|
10149
|
+
if (typeof reset === 'object') {
|
|
10150
|
+
if (reset.placement) {
|
|
10151
|
+
statefulPlacement = reset.placement;
|
|
10152
|
+
}
|
|
10153
|
+
if (reset.rects) {
|
|
10154
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
10155
|
+
reference,
|
|
10156
|
+
floating,
|
|
10157
|
+
strategy
|
|
10158
|
+
}) : reset.rects;
|
|
10159
|
+
}
|
|
10160
|
+
({
|
|
10161
|
+
x,
|
|
10162
|
+
y
|
|
10163
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
10164
|
+
}
|
|
10165
|
+
i = -1;
|
|
10166
|
+
}
|
|
10167
|
+
}
|
|
10168
|
+
return {
|
|
10169
|
+
x,
|
|
10170
|
+
y,
|
|
10171
|
+
placement: statefulPlacement,
|
|
10172
|
+
strategy,
|
|
10173
|
+
middlewareData
|
|
10174
|
+
};
|
|
10175
|
+
};
|
|
10176
|
+
|
|
10177
|
+
/**
|
|
10178
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
10179
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
10180
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
10181
|
+
* @see https://floating-ui.com/docs/flip
|
|
10182
|
+
*/
|
|
10183
|
+
const flip$1 = function (options) {
|
|
10184
|
+
if (options === void 0) {
|
|
10185
|
+
options = {};
|
|
10186
|
+
}
|
|
10187
|
+
return {
|
|
10188
|
+
name: 'flip',
|
|
10189
|
+
options,
|
|
10190
|
+
async fn(state) {
|
|
10191
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
10192
|
+
const {
|
|
10193
|
+
placement,
|
|
10194
|
+
middlewareData,
|
|
10195
|
+
rects,
|
|
10196
|
+
initialPlacement,
|
|
10197
|
+
platform,
|
|
10198
|
+
elements
|
|
10199
|
+
} = state;
|
|
10200
|
+
const {
|
|
10201
|
+
mainAxis: checkMainAxis = true,
|
|
10202
|
+
crossAxis: checkCrossAxis = true,
|
|
10203
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
10204
|
+
fallbackStrategy = 'bestFit',
|
|
10205
|
+
fallbackAxisSideDirection = 'none',
|
|
10206
|
+
flipAlignment = true,
|
|
10207
|
+
...detectOverflowOptions
|
|
10208
|
+
} = evaluate(options, state);
|
|
10209
|
+
|
|
10210
|
+
// If a reset by the arrow was caused due to an alignment offset being
|
|
10211
|
+
// added, we should skip any logic now since `flip()` has already done its
|
|
10212
|
+
// work.
|
|
10213
|
+
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
10214
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
10215
|
+
return {};
|
|
10216
|
+
}
|
|
10217
|
+
const side = getSide(placement);
|
|
10218
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
10219
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
10220
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
10221
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
10222
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
10223
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
10224
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
10225
|
+
}
|
|
10226
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
10227
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
10228
|
+
const overflows = [];
|
|
10229
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
10230
|
+
if (checkMainAxis) {
|
|
10231
|
+
overflows.push(overflow[side]);
|
|
10232
|
+
}
|
|
10233
|
+
if (checkCrossAxis) {
|
|
10234
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
10235
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
10236
|
+
}
|
|
10237
|
+
overflowsData = [...overflowsData, {
|
|
10238
|
+
placement,
|
|
10239
|
+
overflows
|
|
10240
|
+
}];
|
|
10241
|
+
|
|
10242
|
+
// One or more sides is overflowing.
|
|
10243
|
+
if (!overflows.every(side => side <= 0)) {
|
|
10244
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
10245
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
10246
|
+
const nextPlacement = placements[nextIndex];
|
|
10247
|
+
if (nextPlacement) {
|
|
10248
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
10249
|
+
if (!ignoreCrossAxisOverflow ||
|
|
10250
|
+
// We leave the current main axis only if every placement on that axis
|
|
10251
|
+
// overflows the main axis.
|
|
10252
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
10253
|
+
// Try next placement and re-run the lifecycle.
|
|
10254
|
+
return {
|
|
10255
|
+
data: {
|
|
10256
|
+
index: nextIndex,
|
|
10257
|
+
overflows: overflowsData
|
|
10258
|
+
},
|
|
10259
|
+
reset: {
|
|
10260
|
+
placement: nextPlacement
|
|
10261
|
+
}
|
|
10262
|
+
};
|
|
10263
|
+
}
|
|
10264
|
+
}
|
|
10265
|
+
|
|
10266
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
10267
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
10268
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
10269
|
+
|
|
10270
|
+
// Otherwise fallback.
|
|
10271
|
+
if (!resetPlacement) {
|
|
10272
|
+
switch (fallbackStrategy) {
|
|
10273
|
+
case 'bestFit':
|
|
10274
|
+
{
|
|
10275
|
+
var _overflowsData$filter2;
|
|
10276
|
+
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
10277
|
+
if (hasFallbackAxisSideDirection) {
|
|
10278
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
10279
|
+
return currentSideAxis === initialSideAxis ||
|
|
10280
|
+
// Create a bias to the `y` side axis due to horizontal
|
|
10281
|
+
// reading directions favoring greater width.
|
|
10282
|
+
currentSideAxis === 'y';
|
|
10283
|
+
}
|
|
10284
|
+
return true;
|
|
10285
|
+
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
10286
|
+
if (placement) {
|
|
10287
|
+
resetPlacement = placement;
|
|
10288
|
+
}
|
|
10289
|
+
break;
|
|
10290
|
+
}
|
|
10291
|
+
case 'initialPlacement':
|
|
10292
|
+
resetPlacement = initialPlacement;
|
|
10293
|
+
break;
|
|
10294
|
+
}
|
|
10295
|
+
}
|
|
10296
|
+
if (placement !== resetPlacement) {
|
|
10297
|
+
return {
|
|
10298
|
+
reset: {
|
|
10299
|
+
placement: resetPlacement
|
|
10300
|
+
}
|
|
10301
|
+
};
|
|
10302
|
+
}
|
|
10303
|
+
}
|
|
10304
|
+
return {};
|
|
10305
|
+
}
|
|
10306
|
+
};
|
|
10307
|
+
};
|
|
10308
|
+
|
|
10309
|
+
const originSides = /*#__PURE__*/new Set(['left', 'top']);
|
|
10310
|
+
|
|
10311
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
10312
|
+
// Derivable.
|
|
10313
|
+
|
|
10314
|
+
async function convertValueToCoords(state, options) {
|
|
10315
|
+
const {
|
|
10316
|
+
placement,
|
|
10317
|
+
platform,
|
|
10318
|
+
elements
|
|
10319
|
+
} = state;
|
|
10320
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
10321
|
+
const side = getSide(placement);
|
|
10322
|
+
const alignment = getAlignment(placement);
|
|
10323
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
10324
|
+
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
10325
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
10326
|
+
const rawValue = evaluate(options, state);
|
|
10327
|
+
|
|
10328
|
+
// eslint-disable-next-line prefer-const
|
|
10329
|
+
let {
|
|
10330
|
+
mainAxis,
|
|
10331
|
+
crossAxis,
|
|
10332
|
+
alignmentAxis
|
|
10333
|
+
} = typeof rawValue === 'number' ? {
|
|
10334
|
+
mainAxis: rawValue,
|
|
10335
|
+
crossAxis: 0,
|
|
10336
|
+
alignmentAxis: null
|
|
10337
|
+
} : {
|
|
10338
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
10339
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
10340
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
10341
|
+
};
|
|
10342
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
10343
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
10344
|
+
}
|
|
10345
|
+
return isVertical ? {
|
|
10346
|
+
x: crossAxis * crossAxisMulti,
|
|
10347
|
+
y: mainAxis * mainAxisMulti
|
|
10348
|
+
} : {
|
|
10349
|
+
x: mainAxis * mainAxisMulti,
|
|
10350
|
+
y: crossAxis * crossAxisMulti
|
|
10351
|
+
};
|
|
10352
|
+
}
|
|
10353
|
+
|
|
10354
|
+
/**
|
|
10355
|
+
* Modifies the placement by translating the floating element along the
|
|
10356
|
+
* specified axes.
|
|
10357
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
10358
|
+
* object may be passed.
|
|
10359
|
+
* @see https://floating-ui.com/docs/offset
|
|
10360
|
+
*/
|
|
10361
|
+
const offset$1 = function (options) {
|
|
10362
|
+
if (options === void 0) {
|
|
10363
|
+
options = 0;
|
|
10364
|
+
}
|
|
10365
|
+
return {
|
|
10366
|
+
name: 'offset',
|
|
10367
|
+
options,
|
|
10368
|
+
async fn(state) {
|
|
10369
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
10370
|
+
const {
|
|
10371
|
+
x,
|
|
10372
|
+
y,
|
|
10373
|
+
placement,
|
|
10374
|
+
middlewareData
|
|
10375
|
+
} = state;
|
|
10376
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
10377
|
+
|
|
10378
|
+
// If the placement is the same and the arrow caused an alignment offset
|
|
10379
|
+
// then we don't need to change the positioning coordinates.
|
|
10380
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
10381
|
+
return {};
|
|
10382
|
+
}
|
|
10383
|
+
return {
|
|
10384
|
+
x: x + diffCoords.x,
|
|
10385
|
+
y: y + diffCoords.y,
|
|
10386
|
+
data: {
|
|
10387
|
+
...diffCoords,
|
|
10388
|
+
placement
|
|
10389
|
+
}
|
|
10390
|
+
};
|
|
10391
|
+
}
|
|
10392
|
+
};
|
|
10393
|
+
};
|
|
10394
|
+
|
|
10395
|
+
/**
|
|
10396
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
10397
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
10398
|
+
* @see https://floating-ui.com/docs/shift
|
|
10399
|
+
*/
|
|
10400
|
+
const shift$1 = function (options) {
|
|
10401
|
+
if (options === void 0) {
|
|
10402
|
+
options = {};
|
|
10403
|
+
}
|
|
10404
|
+
return {
|
|
10405
|
+
name: 'shift',
|
|
10406
|
+
options,
|
|
10407
|
+
async fn(state) {
|
|
10408
|
+
const {
|
|
10409
|
+
x,
|
|
10410
|
+
y,
|
|
10411
|
+
placement,
|
|
10412
|
+
platform
|
|
10413
|
+
} = state;
|
|
10414
|
+
const {
|
|
10415
|
+
mainAxis: checkMainAxis = true,
|
|
10416
|
+
crossAxis: checkCrossAxis = false,
|
|
10417
|
+
limiter = {
|
|
10418
|
+
fn: _ref => {
|
|
10419
|
+
let {
|
|
10420
|
+
x,
|
|
10421
|
+
y
|
|
10422
|
+
} = _ref;
|
|
10423
|
+
return {
|
|
10424
|
+
x,
|
|
10425
|
+
y
|
|
10426
|
+
};
|
|
10427
|
+
}
|
|
10428
|
+
},
|
|
10429
|
+
...detectOverflowOptions
|
|
10430
|
+
} = evaluate(options, state);
|
|
10431
|
+
const coords = {
|
|
10432
|
+
x,
|
|
10433
|
+
y
|
|
10434
|
+
};
|
|
10435
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
10436
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
10437
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
10438
|
+
let mainAxisCoord = coords[mainAxis];
|
|
10439
|
+
let crossAxisCoord = coords[crossAxis];
|
|
10440
|
+
if (checkMainAxis) {
|
|
10441
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
10442
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
10443
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
10444
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
10445
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
10446
|
+
}
|
|
10447
|
+
if (checkCrossAxis) {
|
|
10448
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
10449
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
10450
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
10451
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
10452
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
10453
|
+
}
|
|
10454
|
+
const limitedCoords = limiter.fn({
|
|
10455
|
+
...state,
|
|
10456
|
+
[mainAxis]: mainAxisCoord,
|
|
10457
|
+
[crossAxis]: crossAxisCoord
|
|
10458
|
+
});
|
|
10459
|
+
return {
|
|
10460
|
+
...limitedCoords,
|
|
10461
|
+
data: {
|
|
10462
|
+
x: limitedCoords.x - x,
|
|
10463
|
+
y: limitedCoords.y - y,
|
|
10464
|
+
enabled: {
|
|
10465
|
+
[mainAxis]: checkMainAxis,
|
|
10466
|
+
[crossAxis]: checkCrossAxis
|
|
10467
|
+
}
|
|
10468
|
+
}
|
|
10469
|
+
};
|
|
10470
|
+
}
|
|
10471
|
+
};
|
|
10472
|
+
};
|
|
10473
|
+
|
|
10474
|
+
function hasWindow() {
|
|
10475
|
+
return typeof window !== 'undefined';
|
|
10476
|
+
}
|
|
10477
|
+
function getNodeName(node) {
|
|
10478
|
+
if (isNode(node)) {
|
|
10479
|
+
return (node.nodeName || '').toLowerCase();
|
|
10480
|
+
}
|
|
10481
|
+
// Mocked nodes in testing environments may not be instances of Node. By
|
|
10482
|
+
// returning `#document` an infinite loop won't occur.
|
|
10483
|
+
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
10484
|
+
return '#document';
|
|
10485
|
+
}
|
|
10486
|
+
function getWindow(node) {
|
|
10487
|
+
var _node$ownerDocument;
|
|
10488
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
10489
|
+
}
|
|
10490
|
+
function getDocumentElement(node) {
|
|
10491
|
+
var _ref;
|
|
10492
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
10493
|
+
}
|
|
10494
|
+
function isNode(value) {
|
|
10495
|
+
if (!hasWindow()) {
|
|
10496
|
+
return false;
|
|
10497
|
+
}
|
|
10498
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
10499
|
+
}
|
|
10500
|
+
function isElement(value) {
|
|
10501
|
+
if (!hasWindow()) {
|
|
10502
|
+
return false;
|
|
10503
|
+
}
|
|
10504
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
10505
|
+
}
|
|
10506
|
+
function isHTMLElement(value) {
|
|
10507
|
+
if (!hasWindow()) {
|
|
10508
|
+
return false;
|
|
10509
|
+
}
|
|
10510
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
10511
|
+
}
|
|
10512
|
+
function isShadowRoot(value) {
|
|
10513
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
10514
|
+
return false;
|
|
10515
|
+
}
|
|
10516
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
10517
|
+
}
|
|
10518
|
+
function isOverflowElement(element) {
|
|
10519
|
+
const {
|
|
10520
|
+
overflow,
|
|
10521
|
+
overflowX,
|
|
10522
|
+
overflowY,
|
|
10523
|
+
display
|
|
10524
|
+
} = getComputedStyle$1(element);
|
|
10525
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
|
10526
|
+
}
|
|
10527
|
+
function isTableElement(element) {
|
|
10528
|
+
return /^(table|td|th)$/.test(getNodeName(element));
|
|
10529
|
+
}
|
|
10530
|
+
function isTopLayer(element) {
|
|
10531
|
+
try {
|
|
10532
|
+
if (element.matches(':popover-open')) {
|
|
10533
|
+
return true;
|
|
10534
|
+
}
|
|
10535
|
+
} catch (_e) {
|
|
10536
|
+
// no-op
|
|
10537
|
+
}
|
|
10538
|
+
try {
|
|
10539
|
+
return element.matches(':modal');
|
|
10540
|
+
} catch (_e) {
|
|
10541
|
+
return false;
|
|
10542
|
+
}
|
|
10543
|
+
}
|
|
10544
|
+
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
|
10545
|
+
const containRe = /paint|layout|strict|content/;
|
|
10546
|
+
const isNotNone = value => !!value && value !== 'none';
|
|
10547
|
+
let isWebKitValue;
|
|
10548
|
+
function isContainingBlock(elementOrCss) {
|
|
10549
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
10550
|
+
|
|
10551
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
10552
|
+
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
10553
|
+
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
|
10554
|
+
}
|
|
10555
|
+
function getContainingBlock(element) {
|
|
10556
|
+
let currentNode = getParentNode(element);
|
|
10557
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
10558
|
+
if (isContainingBlock(currentNode)) {
|
|
10559
|
+
return currentNode;
|
|
10560
|
+
} else if (isTopLayer(currentNode)) {
|
|
10561
|
+
return null;
|
|
10562
|
+
}
|
|
10563
|
+
currentNode = getParentNode(currentNode);
|
|
10564
|
+
}
|
|
10565
|
+
return null;
|
|
10566
|
+
}
|
|
10567
|
+
function isWebKit() {
|
|
10568
|
+
if (isWebKitValue == null) {
|
|
10569
|
+
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
|
10570
|
+
}
|
|
10571
|
+
return isWebKitValue;
|
|
10572
|
+
}
|
|
10573
|
+
function isLastTraversableNode(node) {
|
|
10574
|
+
return /^(html|body|#document)$/.test(getNodeName(node));
|
|
10575
|
+
}
|
|
10576
|
+
function getComputedStyle$1(element) {
|
|
10577
|
+
return getWindow(element).getComputedStyle(element);
|
|
10578
|
+
}
|
|
10579
|
+
function getNodeScroll(element) {
|
|
10580
|
+
if (isElement(element)) {
|
|
10581
|
+
return {
|
|
10582
|
+
scrollLeft: element.scrollLeft,
|
|
10583
|
+
scrollTop: element.scrollTop
|
|
10584
|
+
};
|
|
10585
|
+
}
|
|
10586
|
+
return {
|
|
10587
|
+
scrollLeft: element.scrollX,
|
|
10588
|
+
scrollTop: element.scrollY
|
|
10589
|
+
};
|
|
10590
|
+
}
|
|
10591
|
+
function getParentNode(node) {
|
|
10592
|
+
if (getNodeName(node) === 'html') {
|
|
10593
|
+
return node;
|
|
10594
|
+
}
|
|
10595
|
+
const result =
|
|
10596
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
10597
|
+
node.assignedSlot ||
|
|
10598
|
+
// DOM Element detected.
|
|
10599
|
+
node.parentNode ||
|
|
10600
|
+
// ShadowRoot detected.
|
|
10601
|
+
isShadowRoot(node) && node.host ||
|
|
10602
|
+
// Fallback.
|
|
10603
|
+
getDocumentElement(node);
|
|
10604
|
+
return isShadowRoot(result) ? result.host : result;
|
|
10605
|
+
}
|
|
10606
|
+
function getNearestOverflowAncestor(node) {
|
|
10607
|
+
const parentNode = getParentNode(node);
|
|
10608
|
+
if (isLastTraversableNode(parentNode)) {
|
|
10609
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
10610
|
+
}
|
|
10611
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
10612
|
+
return parentNode;
|
|
10613
|
+
}
|
|
10614
|
+
return getNearestOverflowAncestor(parentNode);
|
|
10615
|
+
}
|
|
10616
|
+
function getOverflowAncestors(node, list, traverseIframes) {
|
|
10617
|
+
var _node$ownerDocument2;
|
|
10618
|
+
if (list === void 0) {
|
|
10619
|
+
list = [];
|
|
10620
|
+
}
|
|
10621
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
10622
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
10623
|
+
const win = getWindow(scrollableAncestor);
|
|
10624
|
+
if (isBody) {
|
|
10625
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], []);
|
|
10626
|
+
} else {
|
|
10627
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, []));
|
|
10628
|
+
}
|
|
10629
|
+
}
|
|
10630
|
+
function getFrameElement(win) {
|
|
10631
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
10632
|
+
}
|
|
10633
|
+
|
|
10634
|
+
function getCssDimensions(element) {
|
|
10635
|
+
const css = getComputedStyle$1(element);
|
|
10636
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
10637
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
10638
|
+
let width = parseFloat(css.width) || 0;
|
|
10639
|
+
let height = parseFloat(css.height) || 0;
|
|
10640
|
+
const hasOffset = isHTMLElement(element);
|
|
10641
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
10642
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
10643
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
10644
|
+
if (shouldFallback) {
|
|
10645
|
+
width = offsetWidth;
|
|
10646
|
+
height = offsetHeight;
|
|
10647
|
+
}
|
|
10648
|
+
return {
|
|
10649
|
+
width,
|
|
10650
|
+
height,
|
|
10651
|
+
$: shouldFallback
|
|
10652
|
+
};
|
|
10653
|
+
}
|
|
10654
|
+
|
|
10655
|
+
function unwrapElement(element) {
|
|
10656
|
+
return !isElement(element) ? element.contextElement : element;
|
|
10657
|
+
}
|
|
10658
|
+
|
|
10659
|
+
function getScale(element) {
|
|
10660
|
+
const domElement = unwrapElement(element);
|
|
10661
|
+
if (!isHTMLElement(domElement)) {
|
|
10662
|
+
return createCoords(1);
|
|
10663
|
+
}
|
|
10664
|
+
const rect = domElement.getBoundingClientRect();
|
|
10665
|
+
const {
|
|
10666
|
+
width,
|
|
10667
|
+
height,
|
|
10668
|
+
$
|
|
10669
|
+
} = getCssDimensions(domElement);
|
|
10670
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
10671
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
10672
|
+
|
|
10673
|
+
// 0, NaN, or Infinity should always fallback to 1.
|
|
10674
|
+
|
|
10675
|
+
if (!x || !Number.isFinite(x)) {
|
|
10676
|
+
x = 1;
|
|
10677
|
+
}
|
|
10678
|
+
if (!y || !Number.isFinite(y)) {
|
|
10679
|
+
y = 1;
|
|
10680
|
+
}
|
|
10681
|
+
return {
|
|
10682
|
+
x,
|
|
10683
|
+
y
|
|
10684
|
+
};
|
|
10685
|
+
}
|
|
10686
|
+
|
|
10687
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
10688
|
+
function getVisualOffsets(element) {
|
|
10689
|
+
const win = getWindow(element);
|
|
10690
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
10691
|
+
return noOffsets;
|
|
10692
|
+
}
|
|
10693
|
+
return {
|
|
10694
|
+
x: win.visualViewport.offsetLeft,
|
|
10695
|
+
y: win.visualViewport.offsetTop
|
|
10696
|
+
};
|
|
10697
|
+
}
|
|
10698
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
10699
|
+
if (isFixed === void 0) {
|
|
10700
|
+
isFixed = false;
|
|
10701
|
+
}
|
|
10702
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
10703
|
+
return false;
|
|
10704
|
+
}
|
|
10705
|
+
return isFixed;
|
|
10706
|
+
}
|
|
10707
|
+
|
|
10708
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
10709
|
+
if (includeScale === void 0) {
|
|
10710
|
+
includeScale = false;
|
|
10711
|
+
}
|
|
10712
|
+
if (isFixedStrategy === void 0) {
|
|
10713
|
+
isFixedStrategy = false;
|
|
10714
|
+
}
|
|
10715
|
+
const clientRect = element.getBoundingClientRect();
|
|
10716
|
+
const domElement = unwrapElement(element);
|
|
10717
|
+
let scale = createCoords(1);
|
|
10718
|
+
if (includeScale) {
|
|
10719
|
+
if (offsetParent) {
|
|
10720
|
+
if (isElement(offsetParent)) {
|
|
10721
|
+
scale = getScale(offsetParent);
|
|
10722
|
+
}
|
|
10723
|
+
} else {
|
|
10724
|
+
scale = getScale(element);
|
|
10725
|
+
}
|
|
10726
|
+
}
|
|
10727
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
10728
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
10729
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
10730
|
+
let width = clientRect.width / scale.x;
|
|
10731
|
+
let height = clientRect.height / scale.y;
|
|
10732
|
+
if (domElement) {
|
|
10733
|
+
const win = getWindow(domElement);
|
|
10734
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
10735
|
+
let currentWin = win;
|
|
10736
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
10737
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
10738
|
+
const iframeScale = getScale(currentIFrame);
|
|
10739
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
10740
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
10741
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
10742
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
10743
|
+
x *= iframeScale.x;
|
|
10744
|
+
y *= iframeScale.y;
|
|
10745
|
+
width *= iframeScale.x;
|
|
10746
|
+
height *= iframeScale.y;
|
|
10747
|
+
x += left;
|
|
10748
|
+
y += top;
|
|
10749
|
+
currentWin = getWindow(currentIFrame);
|
|
10750
|
+
currentIFrame = getFrameElement(currentWin);
|
|
10751
|
+
}
|
|
10752
|
+
}
|
|
10753
|
+
return rectToClientRect({
|
|
10754
|
+
width,
|
|
10755
|
+
height,
|
|
10756
|
+
x,
|
|
10757
|
+
y
|
|
10758
|
+
});
|
|
10759
|
+
}
|
|
10760
|
+
|
|
10761
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
10762
|
+
// incorrect for RTL.
|
|
10763
|
+
function getWindowScrollBarX(element, rect) {
|
|
10764
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
10765
|
+
if (!rect) {
|
|
10766
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
10767
|
+
}
|
|
10768
|
+
return rect.left + leftScroll;
|
|
10769
|
+
}
|
|
10770
|
+
|
|
10771
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
10772
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
10773
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
10774
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
10775
|
+
return {
|
|
10776
|
+
x,
|
|
10777
|
+
y
|
|
10778
|
+
};
|
|
10779
|
+
}
|
|
10780
|
+
|
|
10781
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
10782
|
+
let {
|
|
10783
|
+
elements,
|
|
10784
|
+
rect,
|
|
10785
|
+
offsetParent,
|
|
10786
|
+
strategy
|
|
10787
|
+
} = _ref;
|
|
10788
|
+
const isFixed = strategy === 'fixed';
|
|
10789
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
10790
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
10791
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
10792
|
+
return rect;
|
|
10793
|
+
}
|
|
10794
|
+
let scroll = {
|
|
10795
|
+
scrollLeft: 0,
|
|
10796
|
+
scrollTop: 0
|
|
10797
|
+
};
|
|
10798
|
+
let scale = createCoords(1);
|
|
10799
|
+
const offsets = createCoords(0);
|
|
10800
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
10801
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
10802
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
10803
|
+
scroll = getNodeScroll(offsetParent);
|
|
10804
|
+
}
|
|
10805
|
+
if (isOffsetParentAnElement) {
|
|
10806
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
10807
|
+
scale = getScale(offsetParent);
|
|
10808
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
10809
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
10810
|
+
}
|
|
10811
|
+
}
|
|
10812
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
10813
|
+
return {
|
|
10814
|
+
width: rect.width * scale.x,
|
|
10815
|
+
height: rect.height * scale.y,
|
|
10816
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
10817
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
10818
|
+
};
|
|
10819
|
+
}
|
|
10820
|
+
|
|
10821
|
+
function getClientRects(element) {
|
|
10822
|
+
return Array.from(element.getClientRects());
|
|
10823
|
+
}
|
|
10824
|
+
|
|
10825
|
+
// Gets the entire size of the scrollable document area, even extending outside
|
|
10826
|
+
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
10827
|
+
function getDocumentRect(element) {
|
|
10828
|
+
const html = getDocumentElement(element);
|
|
10829
|
+
const scroll = getNodeScroll(element);
|
|
10830
|
+
const body = element.ownerDocument.body;
|
|
10831
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
10832
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
10833
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
10834
|
+
const y = -scroll.scrollTop;
|
|
10835
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
10836
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
10837
|
+
}
|
|
10838
|
+
return {
|
|
10839
|
+
width,
|
|
10840
|
+
height,
|
|
10841
|
+
x,
|
|
10842
|
+
y
|
|
10843
|
+
};
|
|
10844
|
+
}
|
|
10845
|
+
|
|
10846
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
10847
|
+
// calculation is affected by unusual styles.
|
|
10848
|
+
// Most scrollbars leave 15-18px of space.
|
|
10849
|
+
const SCROLLBAR_MAX = 25;
|
|
10850
|
+
function getViewportRect(element, strategy) {
|
|
10851
|
+
const win = getWindow(element);
|
|
10852
|
+
const html = getDocumentElement(element);
|
|
10853
|
+
const visualViewport = win.visualViewport;
|
|
10854
|
+
let width = html.clientWidth;
|
|
10855
|
+
let height = html.clientHeight;
|
|
10856
|
+
let x = 0;
|
|
10857
|
+
let y = 0;
|
|
10858
|
+
if (visualViewport) {
|
|
10859
|
+
width = visualViewport.width;
|
|
10860
|
+
height = visualViewport.height;
|
|
10861
|
+
const visualViewportBased = isWebKit();
|
|
10862
|
+
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
10863
|
+
x = visualViewport.offsetLeft;
|
|
10864
|
+
y = visualViewport.offsetTop;
|
|
10865
|
+
}
|
|
10866
|
+
}
|
|
10867
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
10868
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
10869
|
+
// visual width of the <html> but this is not considered in the size
|
|
10870
|
+
// of `html.clientWidth`.
|
|
10871
|
+
if (windowScrollbarX <= 0) {
|
|
10872
|
+
const doc = html.ownerDocument;
|
|
10873
|
+
const body = doc.body;
|
|
10874
|
+
const bodyStyles = getComputedStyle(body);
|
|
10875
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
10876
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
10877
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
10878
|
+
width -= clippingStableScrollbarWidth;
|
|
10879
|
+
}
|
|
10880
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
10881
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
10882
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
10883
|
+
width += windowScrollbarX;
|
|
10884
|
+
}
|
|
10885
|
+
return {
|
|
10886
|
+
width,
|
|
10887
|
+
height,
|
|
10888
|
+
x,
|
|
10889
|
+
y
|
|
10890
|
+
};
|
|
10891
|
+
}
|
|
10892
|
+
|
|
10893
|
+
// Returns the inner client rect, subtracting scrollbars if present.
|
|
10894
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
10895
|
+
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
10896
|
+
const top = clientRect.top + element.clientTop;
|
|
10897
|
+
const left = clientRect.left + element.clientLeft;
|
|
10898
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
10899
|
+
const width = element.clientWidth * scale.x;
|
|
10900
|
+
const height = element.clientHeight * scale.y;
|
|
10901
|
+
const x = left * scale.x;
|
|
10902
|
+
const y = top * scale.y;
|
|
10903
|
+
return {
|
|
10904
|
+
width,
|
|
10905
|
+
height,
|
|
10906
|
+
x,
|
|
10907
|
+
y
|
|
10908
|
+
};
|
|
10909
|
+
}
|
|
10910
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
10911
|
+
let rect;
|
|
10912
|
+
if (clippingAncestor === 'viewport') {
|
|
10913
|
+
rect = getViewportRect(element, strategy);
|
|
10914
|
+
} else if (clippingAncestor === 'document') {
|
|
10915
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
10916
|
+
} else if (isElement(clippingAncestor)) {
|
|
10917
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
10918
|
+
} else {
|
|
10919
|
+
const visualOffsets = getVisualOffsets(element);
|
|
10920
|
+
rect = {
|
|
10921
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
10922
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
10923
|
+
width: clippingAncestor.width,
|
|
10924
|
+
height: clippingAncestor.height
|
|
10925
|
+
};
|
|
10926
|
+
}
|
|
10927
|
+
return rectToClientRect(rect);
|
|
10928
|
+
}
|
|
10929
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
10930
|
+
const parentNode = getParentNode(element);
|
|
10931
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
10932
|
+
return false;
|
|
10933
|
+
}
|
|
10934
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
10935
|
+
}
|
|
10936
|
+
|
|
10937
|
+
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
10938
|
+
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
10939
|
+
// of the given element up the tree.
|
|
10940
|
+
function getClippingElementAncestors(element, cache) {
|
|
10941
|
+
const cachedResult = cache.get(element);
|
|
10942
|
+
if (cachedResult) {
|
|
10943
|
+
return cachedResult;
|
|
10944
|
+
}
|
|
10945
|
+
let result = getOverflowAncestors(element, []).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
10946
|
+
let currentContainingBlockComputedStyle = null;
|
|
10947
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
10948
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
10949
|
+
|
|
10950
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
10951
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
10952
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
10953
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
10954
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
10955
|
+
currentContainingBlockComputedStyle = null;
|
|
10956
|
+
}
|
|
10957
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
10958
|
+
if (shouldDropCurrentNode) {
|
|
10959
|
+
// Drop non-containing blocks.
|
|
10960
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
10961
|
+
} else {
|
|
10962
|
+
// Record last containing block for next iteration.
|
|
10963
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
10964
|
+
}
|
|
10965
|
+
currentNode = getParentNode(currentNode);
|
|
10966
|
+
}
|
|
10967
|
+
cache.set(element, result);
|
|
10968
|
+
return result;
|
|
10969
|
+
}
|
|
10970
|
+
|
|
10971
|
+
// Gets the maximum area that the element is visible in due to any number of
|
|
10972
|
+
// clipping ancestors.
|
|
10973
|
+
function getClippingRect(_ref) {
|
|
10974
|
+
let {
|
|
10975
|
+
element,
|
|
10976
|
+
boundary,
|
|
10977
|
+
rootBoundary,
|
|
10978
|
+
strategy
|
|
10979
|
+
} = _ref;
|
|
10980
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
10981
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
10982
|
+
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
|
10983
|
+
let top = firstRect.top;
|
|
10984
|
+
let right = firstRect.right;
|
|
10985
|
+
let bottom = firstRect.bottom;
|
|
10986
|
+
let left = firstRect.left;
|
|
10987
|
+
for (let i = 1; i < clippingAncestors.length; i++) {
|
|
10988
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
|
10989
|
+
top = max(rect.top, top);
|
|
10990
|
+
right = min(rect.right, right);
|
|
10991
|
+
bottom = min(rect.bottom, bottom);
|
|
10992
|
+
left = max(rect.left, left);
|
|
10993
|
+
}
|
|
10994
|
+
return {
|
|
10995
|
+
width: right - left,
|
|
10996
|
+
height: bottom - top,
|
|
10997
|
+
x: left,
|
|
10998
|
+
y: top
|
|
10999
|
+
};
|
|
11000
|
+
}
|
|
11001
|
+
|
|
11002
|
+
function getDimensions(element) {
|
|
11003
|
+
const {
|
|
11004
|
+
width,
|
|
11005
|
+
height
|
|
11006
|
+
} = getCssDimensions(element);
|
|
11007
|
+
return {
|
|
11008
|
+
width,
|
|
11009
|
+
height
|
|
11010
|
+
};
|
|
11011
|
+
}
|
|
11012
|
+
|
|
11013
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
11014
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
11015
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
11016
|
+
const isFixed = strategy === 'fixed';
|
|
11017
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
11018
|
+
let scroll = {
|
|
11019
|
+
scrollLeft: 0,
|
|
11020
|
+
scrollTop: 0
|
|
11021
|
+
};
|
|
11022
|
+
const offsets = createCoords(0);
|
|
11023
|
+
|
|
11024
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
11025
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
11026
|
+
function setLeftRTLScrollbarOffset() {
|
|
11027
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
11028
|
+
}
|
|
11029
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
11030
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
11031
|
+
scroll = getNodeScroll(offsetParent);
|
|
11032
|
+
}
|
|
11033
|
+
if (isOffsetParentAnElement) {
|
|
11034
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
11035
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
11036
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
11037
|
+
} else if (documentElement) {
|
|
11038
|
+
setLeftRTLScrollbarOffset();
|
|
11039
|
+
}
|
|
11040
|
+
}
|
|
11041
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
11042
|
+
setLeftRTLScrollbarOffset();
|
|
11043
|
+
}
|
|
11044
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
11045
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
11046
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
11047
|
+
return {
|
|
11048
|
+
x,
|
|
11049
|
+
y,
|
|
11050
|
+
width: rect.width,
|
|
11051
|
+
height: rect.height
|
|
11052
|
+
};
|
|
11053
|
+
}
|
|
11054
|
+
|
|
11055
|
+
function isStaticPositioned(element) {
|
|
11056
|
+
return getComputedStyle$1(element).position === 'static';
|
|
11057
|
+
}
|
|
11058
|
+
|
|
11059
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
11060
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
11061
|
+
return null;
|
|
11062
|
+
}
|
|
11063
|
+
if (polyfill) {
|
|
11064
|
+
return polyfill(element);
|
|
11065
|
+
}
|
|
11066
|
+
let rawOffsetParent = element.offsetParent;
|
|
11067
|
+
|
|
11068
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
11069
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
11070
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
11071
|
+
// non-static.
|
|
11072
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
11073
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
11074
|
+
}
|
|
11075
|
+
return rawOffsetParent;
|
|
11076
|
+
}
|
|
11077
|
+
|
|
11078
|
+
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
11079
|
+
// such as table ancestors and cross browser bugs.
|
|
11080
|
+
function getOffsetParent(element, polyfill) {
|
|
11081
|
+
const win = getWindow(element);
|
|
11082
|
+
if (isTopLayer(element)) {
|
|
11083
|
+
return win;
|
|
11084
|
+
}
|
|
11085
|
+
if (!isHTMLElement(element)) {
|
|
11086
|
+
let svgOffsetParent = getParentNode(element);
|
|
11087
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
11088
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
11089
|
+
return svgOffsetParent;
|
|
11090
|
+
}
|
|
11091
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
11092
|
+
}
|
|
11093
|
+
return win;
|
|
11094
|
+
}
|
|
11095
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
11096
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
11097
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
11098
|
+
}
|
|
11099
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
11100
|
+
return win;
|
|
11101
|
+
}
|
|
11102
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
11103
|
+
}
|
|
11104
|
+
|
|
11105
|
+
const getElementRects = async function (data) {
|
|
11106
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
11107
|
+
const getDimensionsFn = this.getDimensions;
|
|
11108
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
11109
|
+
return {
|
|
11110
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
11111
|
+
floating: {
|
|
11112
|
+
x: 0,
|
|
11113
|
+
y: 0,
|
|
11114
|
+
width: floatingDimensions.width,
|
|
11115
|
+
height: floatingDimensions.height
|
|
11116
|
+
}
|
|
11117
|
+
};
|
|
11118
|
+
};
|
|
11119
|
+
|
|
11120
|
+
function isRTL(element) {
|
|
11121
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
11122
|
+
}
|
|
11123
|
+
|
|
11124
|
+
const platform = {
|
|
11125
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
11126
|
+
getDocumentElement,
|
|
11127
|
+
getClippingRect,
|
|
11128
|
+
getOffsetParent,
|
|
11129
|
+
getElementRects,
|
|
11130
|
+
getClientRects,
|
|
11131
|
+
getDimensions,
|
|
11132
|
+
getScale,
|
|
11133
|
+
isElement,
|
|
11134
|
+
isRTL
|
|
11135
|
+
};
|
|
11136
|
+
|
|
11137
|
+
/**
|
|
11138
|
+
* Modifies the placement by translating the floating element along the
|
|
11139
|
+
* specified axes.
|
|
11140
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
11141
|
+
* object may be passed.
|
|
11142
|
+
* @see https://floating-ui.com/docs/offset
|
|
11143
|
+
*/
|
|
11144
|
+
const offset = offset$1;
|
|
11145
|
+
|
|
11146
|
+
/**
|
|
11147
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
11148
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
11149
|
+
* @see https://floating-ui.com/docs/shift
|
|
11150
|
+
*/
|
|
11151
|
+
const shift = shift$1;
|
|
11152
|
+
|
|
11153
|
+
/**
|
|
11154
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
11155
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
11156
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
11157
|
+
* @see https://floating-ui.com/docs/flip
|
|
11158
|
+
*/
|
|
11159
|
+
const flip = flip$1;
|
|
11160
|
+
|
|
11161
|
+
/**
|
|
11162
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
11163
|
+
* next to a given reference element.
|
|
11164
|
+
*/
|
|
11165
|
+
const computePosition = (reference, floating, options) => {
|
|
11166
|
+
// This caches the expensive `getClippingElementAncestors` function so that
|
|
11167
|
+
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
11168
|
+
// single call. If other functions become expensive, we can add them as well.
|
|
11169
|
+
const cache = new Map();
|
|
11170
|
+
const mergedOptions = {
|
|
11171
|
+
platform,
|
|
11172
|
+
...options
|
|
11173
|
+
};
|
|
11174
|
+
const platformWithCache = {
|
|
11175
|
+
...mergedOptions.platform,
|
|
11176
|
+
_c: cache
|
|
11177
|
+
};
|
|
11178
|
+
return computePosition$1(reference, floating, {
|
|
11179
|
+
...mergedOptions,
|
|
11180
|
+
platform: platformWithCache
|
|
11181
|
+
});
|
|
11182
|
+
};
|
|
11183
|
+
|
|
11184
|
+
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, 1);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])) .container{display:none}`;
|
|
11185
|
+
|
|
11186
|
+
class LmvzPopover {
|
|
11187
|
+
constructor(hostRef) {
|
|
11188
|
+
registerInstance(this, hostRef);
|
|
11189
|
+
this.lmvzOpen = createEvent(this, "lmvzOpen", 7);
|
|
11190
|
+
this.lmvzClose = createEvent(this, "lmvzClose", 7);
|
|
11191
|
+
this.lmvzCancel = createEvent(this, "lmvzCancel", 7);
|
|
11192
|
+
}
|
|
11193
|
+
get el() { return getElement(this); }
|
|
11194
|
+
closureController = new AbortController();
|
|
11195
|
+
containerEl;
|
|
11196
|
+
slotEl;
|
|
11197
|
+
previouslyFocusedElement = null;
|
|
11198
|
+
open = false;
|
|
11199
|
+
anchor;
|
|
11200
|
+
placement = 'bottom-start';
|
|
11201
|
+
size = 'sm';
|
|
11202
|
+
autoFocus = true;
|
|
11203
|
+
label;
|
|
11204
|
+
lmvzOpen;
|
|
11205
|
+
lmvzClose;
|
|
11206
|
+
lmvzCancel;
|
|
11207
|
+
async show() {
|
|
11208
|
+
this.open = true;
|
|
11209
|
+
}
|
|
11210
|
+
async hide() {
|
|
11211
|
+
this.triggerClose();
|
|
11212
|
+
}
|
|
11213
|
+
async toggle() {
|
|
11214
|
+
if (this.open) {
|
|
11215
|
+
await this.hide();
|
|
11216
|
+
}
|
|
11217
|
+
else {
|
|
11218
|
+
await this.show();
|
|
11219
|
+
}
|
|
11220
|
+
}
|
|
11221
|
+
componentDidLoad() {
|
|
11222
|
+
autoAssignId(this.el);
|
|
11223
|
+
validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
|
|
11224
|
+
}
|
|
11225
|
+
handleOpenChange(isOpen) {
|
|
11226
|
+
if (isOpen) {
|
|
11227
|
+
this.onOpen();
|
|
11228
|
+
}
|
|
11229
|
+
else {
|
|
11230
|
+
this.onClose();
|
|
11231
|
+
}
|
|
11232
|
+
}
|
|
11233
|
+
handleAnchorChange() {
|
|
11234
|
+
if (this.open) {
|
|
11235
|
+
this.updatePosition();
|
|
11236
|
+
}
|
|
11237
|
+
}
|
|
11238
|
+
disconnectedCallback() {
|
|
11239
|
+
this.removeCloseHandlers();
|
|
11240
|
+
}
|
|
11241
|
+
resolveAnchor() {
|
|
11242
|
+
if (!this.anchor)
|
|
11243
|
+
return null;
|
|
11244
|
+
if (typeof this.anchor === 'string') {
|
|
11245
|
+
return document.getElementById(this.anchor);
|
|
11246
|
+
}
|
|
11247
|
+
return this.anchor;
|
|
11248
|
+
}
|
|
11249
|
+
async updatePosition() {
|
|
11250
|
+
const anchorEl = this.resolveAnchor();
|
|
11251
|
+
const container = this.containerEl;
|
|
11252
|
+
if (!anchorEl || !container)
|
|
11253
|
+
return;
|
|
11254
|
+
const placement = toFloatingUiPlacement(this.placement);
|
|
11255
|
+
const { x, y } = await computePosition(anchorEl, container, {
|
|
11256
|
+
placement,
|
|
11257
|
+
middleware: [offset(4), flip(), shift({ padding: 8 })],
|
|
11258
|
+
});
|
|
11259
|
+
container.style.left = `${x}px`;
|
|
11260
|
+
container.style.top = `${y}px`;
|
|
11261
|
+
}
|
|
11262
|
+
async onOpen() {
|
|
11263
|
+
this.previouslyFocusedElement = getDeepActiveElement(document);
|
|
11264
|
+
this.setupCloseHandlers();
|
|
11265
|
+
console.log('onOpen');
|
|
11266
|
+
await waitFrame();
|
|
11267
|
+
await this.updatePosition();
|
|
11268
|
+
autoAssignId(this.el);
|
|
11269
|
+
this.applyAnchorAriaOpen();
|
|
11270
|
+
this.lmvzOpen.emit();
|
|
11271
|
+
await waitFrame();
|
|
11272
|
+
if (this.autoFocus) {
|
|
11273
|
+
this.focusFirst();
|
|
11274
|
+
}
|
|
11275
|
+
}
|
|
11276
|
+
onClose() {
|
|
11277
|
+
this.removeCloseHandlers();
|
|
11278
|
+
this.applyAnchorAriaClose();
|
|
11279
|
+
this.restoreFocus();
|
|
11280
|
+
this.lmvzClose.emit();
|
|
11281
|
+
}
|
|
11282
|
+
applyAnchorAriaOpen() {
|
|
11283
|
+
const anchorEl = this.resolveAnchor();
|
|
11284
|
+
if (!anchorEl)
|
|
11285
|
+
return;
|
|
11286
|
+
if (!anchorEl.hasAttribute('aria-haspopup')) {
|
|
11287
|
+
anchorEl.setAttribute('aria-haspopup', 'dialog');
|
|
11288
|
+
}
|
|
11289
|
+
anchorEl.setAttribute('aria-expanded', 'true');
|
|
11290
|
+
anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
|
|
11291
|
+
}
|
|
11292
|
+
applyAnchorAriaClose() {
|
|
11293
|
+
const anchorEl = this.resolveAnchor();
|
|
11294
|
+
if (!anchorEl)
|
|
11295
|
+
return;
|
|
11296
|
+
anchorEl.setAttribute('aria-expanded', 'false');
|
|
11297
|
+
}
|
|
11298
|
+
focusFirst() {
|
|
11299
|
+
const { slotEl } = this;
|
|
11300
|
+
if (!slotEl)
|
|
11301
|
+
return;
|
|
11302
|
+
const assigned = slotEl.assignedElements({ flatten: true });
|
|
11303
|
+
for (const el of assigned) {
|
|
11304
|
+
const focusable = walkShadowDOMUntil(el, canReceiveFocus);
|
|
11305
|
+
if (focusable) {
|
|
11306
|
+
focusable.focus();
|
|
11307
|
+
return;
|
|
11308
|
+
}
|
|
11309
|
+
}
|
|
11310
|
+
}
|
|
11311
|
+
restoreFocus() {
|
|
11312
|
+
const el = this.previouslyFocusedElement;
|
|
11313
|
+
if (el?.isConnected) {
|
|
11314
|
+
el.focus();
|
|
11315
|
+
}
|
|
11316
|
+
this.previouslyFocusedElement = null;
|
|
11317
|
+
}
|
|
11318
|
+
triggerClose() {
|
|
11319
|
+
const event = this.lmvzCancel.emit();
|
|
11320
|
+
if (!event.defaultPrevented) {
|
|
11321
|
+
this.open = false;
|
|
11322
|
+
}
|
|
11323
|
+
}
|
|
11324
|
+
setupCloseHandlers() {
|
|
11325
|
+
const options = { signal: this.closureController.signal };
|
|
11326
|
+
document.addEventListener('mousedown', (event) => {
|
|
11327
|
+
if (!this.open)
|
|
11328
|
+
return;
|
|
11329
|
+
if (this.el.contains(event.target))
|
|
11330
|
+
return;
|
|
11331
|
+
this.triggerClose();
|
|
11332
|
+
}, options);
|
|
11333
|
+
document.addEventListener('keydown', (event) => {
|
|
11334
|
+
if (!this.open)
|
|
11335
|
+
return;
|
|
11336
|
+
if (event.key !== 'Escape')
|
|
11337
|
+
return;
|
|
11338
|
+
this.triggerClose();
|
|
11339
|
+
}, options);
|
|
11340
|
+
}
|
|
11341
|
+
removeCloseHandlers() {
|
|
11342
|
+
this.closureController.abort();
|
|
11343
|
+
}
|
|
11344
|
+
render() {
|
|
11345
|
+
return (hAsync(Host, { key: '3dd462a66f17c1617e44787107379d9e4d8ca321' }, hAsync("div", { key: '27106bc8f3169eb07e0d671635074ddb53feb652', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: '3401e621d999a225aeb7cb23fa4f5412544a6dab', ref: (el) => (this.slotEl = el) }))));
|
|
11346
|
+
}
|
|
11347
|
+
static get watchers() { return {
|
|
11348
|
+
"open": [{
|
|
11349
|
+
"handleOpenChange": 0
|
|
11350
|
+
}],
|
|
11351
|
+
"anchor": [{
|
|
11352
|
+
"handleAnchorChange": 0
|
|
11353
|
+
}]
|
|
11354
|
+
}; }
|
|
11355
|
+
static get style() { return lmvzPopoverCss(); }
|
|
11356
|
+
static get cmpMeta() { return {
|
|
11357
|
+
"$flags$": 777,
|
|
11358
|
+
"$tagName$": "lmvz-popover",
|
|
11359
|
+
"$members$": {
|
|
11360
|
+
"open": [1540],
|
|
11361
|
+
"anchor": [1],
|
|
11362
|
+
"placement": [1],
|
|
11363
|
+
"size": [1],
|
|
11364
|
+
"autoFocus": [4, "auto-focus"],
|
|
11365
|
+
"label": [1],
|
|
11366
|
+
"show": [64],
|
|
11367
|
+
"hide": [64],
|
|
11368
|
+
"toggle": [64]
|
|
11369
|
+
},
|
|
11370
|
+
"$listeners$": undefined,
|
|
11371
|
+
"$lazyBundleId$": "-",
|
|
11372
|
+
"$attrsToReflect$": [["open", "open"]]
|
|
11373
|
+
}; }
|
|
11374
|
+
}
|
|
11375
|
+
let popoverIdCounter = 0;
|
|
11376
|
+
function autoAssignId(hostEl) {
|
|
11377
|
+
if (!hostEl.getAttribute('id')) {
|
|
11378
|
+
hostEl.setAttribute('id', `lmvz-popover-${popoverIdCounter++}`);
|
|
11379
|
+
}
|
|
11380
|
+
}
|
|
11381
|
+
function toFloatingUiPlacement(placement) {
|
|
11382
|
+
if (placement === 'start')
|
|
11383
|
+
return 'left';
|
|
11384
|
+
if (placement === 'end')
|
|
11385
|
+
return 'right';
|
|
11386
|
+
return placement;
|
|
11387
|
+
}
|
|
11388
|
+
function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
|
|
11389
|
+
if (!isAriaValidationEnabled())
|
|
11390
|
+
return;
|
|
11391
|
+
const hasAriaLabel = !!label;
|
|
11392
|
+
const hasAriaLabelledBy = hostEl.hasAttribute('aria-labelledby');
|
|
11393
|
+
if (!hasAriaLabel && !hasAriaLabelledBy) {
|
|
11394
|
+
console.warn('[lmvz-popover] Host element has no accessible label. Provide a `label` prop or an `aria-labelledby` attribute pointing to a valid element.');
|
|
11395
|
+
}
|
|
11396
|
+
if (!anchorProp)
|
|
11397
|
+
return;
|
|
11398
|
+
if (!anchorEl) {
|
|
11399
|
+
console.warn('[lmvz-popover] Anchor prop is set but resolved to null. Ensure the anchor element exists in the DOM when the component loads.');
|
|
11400
|
+
return;
|
|
11401
|
+
}
|
|
11402
|
+
if (!isInteractiveElement(anchorEl)) {
|
|
11403
|
+
console.warn('[lmvz-popover] Anchor element is not interactive. Ensure the anchor is a button, link, input, select, textarea, has a `tabindex` attribute, or has an ARIA role that implies interactivity (button, link, menuitem, option, combobox, listbox, checkbox, radio, switch, tab).');
|
|
11404
|
+
}
|
|
11405
|
+
}
|
|
11406
|
+
|
|
9781
11407
|
function groupKey(name, scope) {
|
|
9782
11408
|
if (scope instanceof HTMLFormElement) {
|
|
9783
11409
|
if (!scope.dataset['lmvzRadioGroupId']) {
|
|
@@ -9939,7 +11565,7 @@ class RadioGroupController {
|
|
|
9939
11565
|
}
|
|
9940
11566
|
}
|
|
9941
11567
|
|
|
9942
|
-
const lmvzRadioCss = () => `@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-radio-h { display: inline-block; --radio-circle-size: var(--lmvz-global-s18, 18px); --radio-dot-size: 0.5rem; --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #
|
|
11568
|
+
const lmvzRadioCss = () => `@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-radio-h { display: inline-block; --radio-circle-size: var(--lmvz-global-s18, 18px); --radio-dot-size: 0.5rem; --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419); --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc); --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000); --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454); --radio-easing: var(--lmvz-global-easing-default, ease); --radio-duration: 0.2s; display: flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: clip; cursor: pointer; background-color: transparent; position: relative; transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio { position: absolute; inset-block-start: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); inset-inline-start: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); opacity: 0; width: var(--radio-circle-size); height: var(--radio-circle-size); margin: 0; cursor: pointer; z-index: 1; } .circle.sc-lmvz-radio { width: var(--radio-circle-size); height: var(--radio-circle-size); border-radius: 50%; border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color); background-color: var(--radio-bg); pointer-events: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio { width: var(--radio-dot-size); height: var(--radio-dot-size); border-radius: 50%; background-color: var(--radio-dot-color); } .content.sc-lmvz-radio { display: flex; flex-direction: column; overflow-wrap: break-word; min-width: 0; } label.sc-lmvz-radio { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--radio-label-color); cursor: pointer; transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio { display: block; font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router); color: var(--radio-helper-color); margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty { display: none; } @media (hover: hover) { .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio { border-color: var(--radio-border-color-hover); } .sc-lmvz-radio-h:hover { background-color: var(--radio-wrapper-bg-hover); } } .sc-lmvz-radio-h:active { background-color: var(--radio-wrapper-bg-active); } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio { color: var(--radio-label-color-checked); } [error].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio { color: var(--lmvz-semantic-color-status-on-danger, #a31419); } [disabled].sc-lmvz-radio-h { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } @media (forced-colors: active) { .circle.sc-lmvz-radio { forced-color-adjust: auto; border-color: ButtonText; background-color: Field; } [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio { border-color: Highlight; } .dot.sc-lmvz-radio { background-color: ButtonText; } [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio { background-color: HighlightText; } }`;
|
|
9943
11569
|
|
|
9944
11570
|
const focusWithinCss$1 = () => `.sc-lmvz-radio-h:focus-within{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){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
9945
11571
|
|
|
@@ -10088,7 +11714,7 @@ class LmvzRadio extends ReactiveControllerHost {
|
|
|
10088
11714
|
this.radioGroupController.setFocused(target);
|
|
10089
11715
|
}
|
|
10090
11716
|
render() {
|
|
10091
|
-
return (hAsync(Host, { key: '
|
|
11717
|
+
return (hAsync(Host, { key: 'c233b8f8e67016dd9a8622359bd91d3193735438' }, hAsync("input", { key: '6a0a028f4ae346b60f86109d33058f7a04f0f2f8', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: 'f86096dd776236e07292dab77a37aeedffb8d8d4', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '8e93beefee742af62775d4d5945df8d13adb739f', class: "dot" })), hAsync("span", { key: '19df96e6d015d0f74c96781ae49191a542a4f41d', class: "content" }, hAsync("label", { key: 'b678b54ca139191ff78d5f503b73ea407eeb0708', htmlFor: this.radioId }, this.label), hAsync("span", { key: '4a1e8a60594e959cb5549dd20b3d35a715ce1d99', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
|
|
10092
11718
|
}
|
|
10093
11719
|
static get formAssociated() { return true; }
|
|
10094
11720
|
static get watchers() { return {
|
|
@@ -10127,7 +11753,7 @@ class LmvzRadio extends ReactiveControllerHost {
|
|
|
10127
11753
|
}; }
|
|
10128
11754
|
}
|
|
10129
11755
|
|
|
10130
|
-
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; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #
|
|
11756
|
+
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; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --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); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); 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 div[aria-hidden].sc-lmvz-select, [highlighted]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [highlighted].sc-lmvz-select-h div[aria-hidden].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 div[aria-hidden].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); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].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)); } div[aria-hidden].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; } .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } div[aria-hidden].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; } select.sc-lmvz-select { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; border: none; background: transparent; margin: 0; padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { margin-top: 4px; padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [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 div[aria-hidden].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 div[aria-hidden].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 div[aria-hidden].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 div[aria-hidden].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)); }`;
|
|
10131
11757
|
|
|
10132
11758
|
let selectIdCounter = 0;
|
|
10133
11759
|
class LmvzSelect extends ReactiveControllerHost {
|
|
@@ -10181,7 +11807,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
10181
11807
|
render() {
|
|
10182
11808
|
const hasValue = this.hasValue;
|
|
10183
11809
|
const shouldShowLabel = hasValue;
|
|
10184
|
-
return (hAsync(Host, { key: '
|
|
11810
|
+
return (hAsync(Host, { key: 'f1180d4a5f1c30414b06c19314eb75630aa181f7', "data-highlighted": String(this.highlighted) }, hAsync("div", { key: '01088c7f3315faab1fb23c99cf8b30f7d59abfc6', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '34d23292b6b65fac000f822e1e2839e28b1bfee9', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: 'ba171cdd9b53f8fa7b7fcb2c39a0b4aa69940b95', "aria-hidden": "true" }, " *")), hAsync("div", { key: '798a6ef187b4aaaa45ecb3d6f94c30e7facb7a38', "aria-hidden": "true" }, hAsync("span", { key: '33ea2169d94f4f8cf6263ed0c3bd6a9e593207a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '0ea2d4987587a1a42dfd037dcefeed3f1b3356ef', "aria-hidden": "true" }, " *")), hAsync("span", { key: '7bd24b3921cc5cd261f563476a79d61a288d60bb' }, hAsync("svg", { key: '9887853724abada1fe36f7225db7903ee6e4040d', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, hAsync("path", { key: 'b55a82230d46944ca3bd46f00f8c59b1a75ab8b8', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("select", { key: 'd786f49b4522baf4c803ed3046b3606f29d6dae1', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: '5ffa7ffb7cd79c28a8bd212cc4d123dceb77aad4', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '8a4141ead35cfd07c14d869715397d12ea8b64d7' }))), this.helperText && hAsync("div", { key: 'dc5ccd28b0a903f6ed674d994e302caed1d9e9bb', role: "status" }, this.helperText)));
|
|
10185
11811
|
}
|
|
10186
11812
|
static get watchers() { return {
|
|
10187
11813
|
"value": [{
|
|
@@ -10211,7 +11837,7 @@ class LmvzSelect extends ReactiveControllerHost {
|
|
|
10211
11837
|
|
|
10212
11838
|
const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
|
|
10213
11839
|
|
|
10214
|
-
const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-16
|
|
11840
|
+
const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));left:50%;transform:translateX(-50%);z-index:2147483000;width:max-content;border:1px solid transparent;border-radius:var(--lmvz-semantic-border-radius-lg, 14px);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));display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));pointer-events:auto;font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #28625b);color:var(--lmvz-component-color)}:host([status='success']){background-color:var(--lmvz-semantic-color-status-success, #c2e6e1);border-color:var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #28625b)}:host([status='warning']){background-color:var(--lmvz-semantic-color-status-warning, #ffeeb8);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);--lmvz-component-color:var(--lmvz-semantic-color-status-on-warning, #614a00)}:host([status='error']){background-color:var(--lmvz-semantic-color-status-danger, #fbdfe0);border-color:var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);--lmvz-component-color:var(--lmvz-semantic-color-status-on-danger, #a31419)}lmvz-icon{flex-shrink:0}.message{white-space:nowrap}@keyframes snackbar-enter{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes snackbar-leave{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(100%);opacity:0}}:host(.entering){animation:snackbar-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards}:host(.leaving){pointer-events:none;animation:snackbar-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards}@media (prefers-reduced-motion: reduce){:host(.entering){animation:none;transition:opacity 80ms ease;opacity:1}:host(.leaving){pointer-events:none;animation:none;transition:opacity 80ms ease;opacity:0}}`;
|
|
10215
11841
|
|
|
10216
11842
|
const STATUS_SVG = {
|
|
10217
11843
|
success: infoSvg,
|
|
@@ -10273,7 +11899,7 @@ class LmvzSnackbar {
|
|
|
10273
11899
|
this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
|
|
10274
11900
|
};
|
|
10275
11901
|
render() {
|
|
10276
|
-
return (hAsync(Host, { key: '
|
|
11902
|
+
return (hAsync(Host, { key: '6c2898f187ed9b456dd0c13294eb466270b116cb', class: this.animationClass }, hAsync("lmvz-icon", { key: '9b4903f0e2099d44f0ed1773ed23f948b894f603', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: '38163523ce0bba29dbe387e5c808ae9f5f2c2c55', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: 'bf5eb3e5075dec7c10f95a46db207ccb3181c88b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
|
|
10277
11903
|
}
|
|
10278
11904
|
static get watchers() { return {
|
|
10279
11905
|
"status": [{
|
|
@@ -10310,7 +11936,7 @@ class LmvzSpinner {
|
|
|
10310
11936
|
ariaLabel;
|
|
10311
11937
|
render() {
|
|
10312
11938
|
const hasLabel = !!this.ariaLabel?.trim();
|
|
10313
|
-
return (hAsync(Host, { key: '
|
|
11939
|
+
return (hAsync(Host, { key: '75f8aabfe2eae72d29c5f0aa0663d0c37286ab78', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: 'aadf9daaa1f363752e08eed3136fc8a8f15d3bdf', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'e658f4be70b5bd03b3828071cbce977576afa3c8', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
|
|
10314
11940
|
}
|
|
10315
11941
|
static get style() { return lmvzSpinnerCss(); }
|
|
10316
11942
|
static get cmpMeta() { return {
|
|
@@ -10326,7 +11952,7 @@ class LmvzSpinner {
|
|
|
10326
11952
|
}; }
|
|
10327
11953
|
}
|
|
10328
11954
|
|
|
10329
|
-
const lmvzTabCss = () => ` @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-4
|
|
11955
|
+
const lmvzTabCss = () => ` @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); } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } 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)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem)); } .label { display: contents; } `;
|
|
10330
11956
|
|
|
10331
11957
|
class LmvzTab {
|
|
10332
11958
|
constructor(hostRef) {
|
|
@@ -10346,7 +11972,7 @@ class LmvzTab {
|
|
|
10346
11972
|
this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
|
|
10347
11973
|
}
|
|
10348
11974
|
render() {
|
|
10349
|
-
return (hAsync(Host, { key: '
|
|
11975
|
+
return (hAsync(Host, { key: '6bb908c4956e84cd344fc8e81b400d33bb2dce98' }, hAsync("button", { key: 'fbc5b650c9bfb5653d17f9a66a14ffbf0fe87f83', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'a16da4d11ecca9db3d03da3b0076b698295ead1f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'e9e83fd4aa556716af3c7b7e52e1e1d8a5a33061', class: "label" }, hAsync("slot", { key: 'a4c0378e62d67d7bcc772ff6a77ae1a86f41208c' })), hAsync("span", { key: 'de03b763d99f55b8773334df3d18c2d3855de4de', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
|
|
10350
11976
|
}
|
|
10351
11977
|
static get delegatesFocus() { return true; }
|
|
10352
11978
|
static get style() { return lmvzTabCss(); }
|
|
@@ -10365,7 +11991,7 @@ class LmvzTab {
|
|
|
10365
11991
|
}; }
|
|
10366
11992
|
}
|
|
10367
11993
|
|
|
10368
|
-
const lmvzTabsCss = () => ` @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-4
|
|
11994
|
+
const lmvzTabsCss = () => ` @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); } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
|
|
10369
11995
|
|
|
10370
11996
|
let tabsIdCounter = 0;
|
|
10371
11997
|
class LmvzTabs extends ReactiveControllerHost {
|
|
@@ -10600,7 +12226,7 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
10600
12226
|
this.selectTab(value);
|
|
10601
12227
|
};
|
|
10602
12228
|
render() {
|
|
10603
|
-
return (hAsync(Host, { key: '
|
|
12229
|
+
return (hAsync(Host, { key: '2f681e7bfc21bd513bcb994f92c893bbc03ff713', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '456ce3d11ccacd3e79995ffa643bb164127344b3', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: 'e4e4c698dde6416e0ba4d319e64d9ba3a2f79a19', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '3b90c8e7006dbf75e22b8377a18ac47488b1184f', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '4cb4a9b04ab529a1bc7744a1893acf9a71c5c65e', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
10604
12230
|
}
|
|
10605
12231
|
static get watchers() { return {
|
|
10606
12232
|
"value": [{
|
|
@@ -10628,7 +12254,7 @@ class LmvzTabs extends ReactiveControllerHost {
|
|
|
10628
12254
|
}; }
|
|
10629
12255
|
}
|
|
10630
12256
|
|
|
10631
|
-
const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-2
|
|
12257
|
+
const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('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-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-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); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
|
|
10632
12258
|
|
|
10633
12259
|
const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{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){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
10634
12260
|
|
|
@@ -10704,7 +12330,7 @@ class LmvzToggle extends ReactiveControllerHost {
|
|
|
10704
12330
|
this.lmvzChange.emit(newChecked);
|
|
10705
12331
|
};
|
|
10706
12332
|
render() {
|
|
10707
|
-
return (hAsync(Host, { key: '
|
|
12333
|
+
return (hAsync(Host, { key: '901f821ddae696fe877435bf20d08e4032cd61ee' }, hAsync("span", { key: 'bbac0ab3e40e426be511cc49a0dcb2497edd7a9a', class: "track" }, hAsync("input", { key: '1df7a78df28517189f690c6d453193e30d97d9ea', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: 'e975c1c280983355f2504fba15553a9f19e4216f', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '09b3305a1d0d6c116310cf88d1f8a92f6856f57e', htmlFor: this.toggleId }, this.label)));
|
|
10708
12334
|
}
|
|
10709
12335
|
static get formAssociated() { return true; }
|
|
10710
12336
|
static get watchers() { return {
|
|
@@ -10754,6 +12380,7 @@ registerComponents([
|
|
|
10754
12380
|
LmvzMenuItem,
|
|
10755
12381
|
LmvzMessage,
|
|
10756
12382
|
LmvzModal,
|
|
12383
|
+
LmvzPopover,
|
|
10757
12384
|
LmvzRadio,
|
|
10758
12385
|
LmvzSelect,
|
|
10759
12386
|
LmvzSnackbar,
|