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