@lmvz-ds/components 0.29.0 → 0.31.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 +14 -0
- package/cjs/{ds.constants-JXqgKnXL.js → ds.constants-CKeXfK-s.js} +12 -0
- package/cjs/{component-C7cavwmZ.js → element.util-Cq4y-_iX.js} +42 -31
- package/cjs/index.cjs.js +8 -1
- package/cjs/{list-keyboard-controller-CzZdPBeH.js → list-keyboard-controller-StN6Yn8W.js} +13 -8
- package/cjs/lmvz-action-list.cjs.entry.js +79 -0
- package/cjs/lmvz-button-group.cjs.entry.js +43 -47
- package/cjs/lmvz-button_2.cjs.entry.js +10 -8
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +2 -2
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +6 -6
- package/cjs/lmvz-link.cjs.entry.js +69 -0
- package/cjs/lmvz-menuitem.cjs.entry.js +2 -2
- package/cjs/lmvz-message.cjs.entry.js +2 -2
- package/cjs/lmvz-modal.cjs.entry.js +5 -5
- package/cjs/lmvz-radio.cjs.entry.js +3 -3
- 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 +5 -5
- package/cjs/loader.cjs.js +1 -1
- package/cjs/stencil.util-DzvzXSwk.js +25 -0
- package/collection/api/ds.constants.js +1 -0
- package/collection/collection-manifest.json +2 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.css +93 -0
- package/collection/components/lmvz-action-list/lmvz-action-list.js +104 -0
- package/collection/components/lmvz-button/lmvz-button.css +67 -44
- package/collection/components/lmvz-button/lmvz-button.js +28 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +35 -3
- package/collection/components/lmvz-button-group/lmvz-button-group.js +54 -38
- package/collection/components/lmvz-card/lmvz-card.css +66 -47
- package/collection/components/lmvz-card/lmvz-card.js +2 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +8 -5
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +2 -2
- package/collection/components/lmvz-chip/lmvz-chip.css +4 -2
- package/collection/components/lmvz-chip/lmvz-chip.js +7 -7
- package/collection/components/lmvz-header/lmvz-header.js +2 -2
- package/collection/components/lmvz-icon/lmvz-icon.js +2 -2
- package/collection/components/lmvz-input/lmvz-input.css +2 -2
- package/collection/components/lmvz-input/lmvz-input.js +5 -5
- package/collection/components/lmvz-link/lmvz-link.css +44 -0
- package/collection/components/lmvz-link/lmvz-link.js +183 -0
- package/collection/components/lmvz-menuitem/lmvz-menuitem.css +2 -1
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +2 -2
- package/collection/components/lmvz-message/lmvz-message.css +2 -1
- package/collection/components/lmvz-message/lmvz-message.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +11 -2
- package/collection/components/lmvz-modal/lmvz-modal.js +3 -3
- package/collection/components/lmvz-radio/lmvz-radio.css +4 -2
- package/collection/components/lmvz-radio/lmvz-radio.js +2 -2
- package/collection/components/lmvz-select/lmvz-select.css +4 -3
- package/collection/components/lmvz-select/lmvz-select.js +2 -2
- package/collection/components/lmvz-snackbar/lmvz-snackbar.css +2 -1
- 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 +11 -3
- package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.css +7 -0
- package/collection/components/lmvz-tabs/lmvz-tabs.js +2 -2
- package/collection/components/lmvz-toggle/lmvz-toggle.css +2 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.js +3 -3
- package/collection/index.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/styles/fragments/_focus-within.css +2 -2
- package/collection/utils/aria/aria.constants.js +53 -0
- package/collection/utils/aria/list-keyboard-controller.js +12 -7
- package/collection/utils/async/async.util.js +62 -0
- package/collection/utils/data/event.utilt.js +19 -0
- package/collection/utils/data/number.util.js +6 -0
- package/collection/utils/data/object.util.js +20 -0
- package/collection/utils/data/time.util.js +3 -0
- package/collection/utils/element/element.util.js +117 -0
- package/collection/utils/{assets.js → stencil/assets.js} +1 -1
- package/collection/utils/stencil/stencil.util.js +12 -0
- package/components/index.d.ts +4 -0
- package/components/index.d.ts.bak +4 -0
- package/components/index.js +1 -1
- package/components/lmvz-action-list.d.ts +11 -0
- package/components/lmvz-action-list.d.ts.bak +11 -0
- package/components/lmvz-action-list.js +1 -0
- 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.d.ts +11 -0
- package/components/lmvz-link.d.ts.bak +11 -0
- package/components/lmvz-link.js +1 -0
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-spinner.js +1 -1
- package/components/lmvz-tab.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-B0H9qIwE.js +1 -0
- package/components/p-B4m1n4et.js +1 -0
- package/components/p-CJRqhXjK.js +1 -0
- package/components/p-CxfT9IA1.js +1 -0
- package/components/{p-CXakymyP.js → p-DJ90327O.js} +1 -1
- package/components/p-DeO5Vbxh.js +1 -0
- package/components/p-DuEtnKRj.js +1 -0
- package/esm/ds.constants-DuEtnKRj.js +18 -0
- package/esm/{component-DOTK1OW3.js → element.util-CxfT9IA1.js} +37 -31
- package/esm/index.js +1 -1
- package/esm/{list-keyboard-controller-Coi8XfUH.js → list-keyboard-controller-BKa9Kd2t.js} +12 -7
- package/esm/lmvz-action-list.entry.js +77 -0
- package/esm/lmvz-button-group.entry.js +35 -39
- package/esm/lmvz-button_2.entry.js +9 -7
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +2 -2
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +5 -5
- package/esm/lmvz-link.entry.js +67 -0
- package/esm/lmvz-menuitem.entry.js +2 -2
- package/esm/lmvz-message.entry.js +2 -2
- package/esm/lmvz-modal.entry.js +3 -3
- package/esm/lmvz-radio.entry.js +3 -3
- 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 -4
- package/esm/loader.js +1 -1
- package/esm/stencil.util-CJRqhXjK.js +23 -0
- package/hydrate/index.js +586 -396
- package/hydrate/index.mjs +586 -396
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-1ce90ea7.entry.js +1 -0
- package/lmvz-components/{p-4484ab62.entry.js → p-24125bcf.entry.js} +1 -1
- package/lmvz-components/p-25a78ead.entry.js +1 -0
- package/lmvz-components/p-4072b2fb.entry.js +1 -0
- package/lmvz-components/p-48109e1d.entry.js +1 -0
- package/lmvz-components/{p-3b3e532f.entry.js → p-582f44ff.entry.js} +1 -1
- package/lmvz-components/p-592d509b.entry.js +1 -0
- package/lmvz-components/{p-7fd7e04c.entry.js → p-6f61c24d.entry.js} +1 -1
- package/lmvz-components/{p-5fcc6f84.entry.js → p-703b10b5.entry.js} +1 -1
- package/lmvz-components/p-74c7521c.entry.js +1 -0
- package/lmvz-components/{p-7e9938e7.entry.js → p-80a26307.entry.js} +1 -1
- package/lmvz-components/p-8e1f66dd.entry.js +1 -0
- package/lmvz-components/p-947e1fe6.entry.js +1 -0
- package/lmvz-components/p-B4m1n4et.js +1 -0
- package/lmvz-components/p-CJRqhXjK.js +1 -0
- package/lmvz-components/p-CxfT9IA1.js +1 -0
- package/lmvz-components/p-DuEtnKRj.js +1 -0
- package/lmvz-components/{p-2981a238.entry.js → p-b79af711.entry.js} +1 -1
- package/lmvz-components/p-c00f0d96.entry.js +1 -0
- package/lmvz-components/p-c0d05a97.entry.js +1 -0
- package/lmvz-components/p-c3e8092e.entry.js +1 -0
- package/lmvz-components/{p-fe7999d4.entry.js → p-ed3c2b13.entry.js} +1 -1
- package/lmvz-components/{p-af4e26da.entry.js → p-fa2cd315.entry.js} +1 -1
- package/manifest.json +336 -14
- package/package.json +9 -1
- package/types/api/ds.constants.d.ts +1 -37
- package/types/api/ds.types.d.ts +68 -1
- package/types/components/lmvz-action-list/lmvz-action-list.d.ts +15 -0
- package/types/components/lmvz-button/lmvz-button.d.ts +6 -3
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +2 -0
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -1
- package/types/components/lmvz-chip/lmvz-chip.d.ts +2 -2
- package/types/components/lmvz-header/lmvz-header.d.ts +1 -1
- package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -1
- package/types/components/lmvz-input/lmvz-input.d.ts +1 -1
- package/types/components/lmvz-link/lmvz-link.d.ts +13 -0
- package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -1
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -1
- package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -1
- package/types/components/lmvz-select/lmvz-select.d.ts +1 -1
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -1
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -1
- package/types/components.d.ts +153 -2
- package/types/index.d.ts +1 -1
- package/types/utils/aria/aria-validation-controller.d.ts +3 -3
- package/types/utils/aria/aria.constants.d.ts +1 -0
- package/types/utils/aria/element-activation-controller.d.ts +1 -1
- package/types/utils/aria/list-keyboard-controller.d.ts +4 -1
- package/types/utils/async/async.util.d.ts +8 -0
- package/types/utils/data/event.utilt.d.ts +4 -0
- package/types/utils/data/number.util.d.ts +2 -0
- package/types/utils/data/object.util.d.ts +5 -0
- package/types/utils/data/time.util.d.ts +1 -0
- package/types/utils/element/element.util.d.ts +21 -0
- package/types/utils/radio/radio-group-controller.d.ts +1 -1
- package/types/utils/{reactive-controller-host.d.ts → stencil/reactive-controller-host.d.ts} +1 -1
- package/types/utils/stencil/stencil.util.d.ts +6 -0
- package/collection/utils/component.js +0 -270
- package/collection/utils/http.js +0 -21
- package/collection/utils/http.unit.js +0 -47
- package/components/p-BxPuC-EQ.js +0 -1
- package/components/p-CtaMrBNE.js +0 -1
- package/components/p-DBZE-Jyu.js +0 -1
- package/components/p-DOTK1OW3.js +0 -1
- package/esm/ds.constants-DWePb-zu.js +0 -13
- package/lmvz-components/p-087853c3.entry.js +0 -1
- package/lmvz-components/p-35b5efdc.entry.js +0 -1
- package/lmvz-components/p-4ba3f830.entry.js +0 -1
- package/lmvz-components/p-83ab106c.entry.js +0 -1
- package/lmvz-components/p-87d207e7.entry.js +0 -1
- package/lmvz-components/p-912776f8.entry.js +0 -1
- package/lmvz-components/p-CtaMrBNE.js +0 -1
- package/lmvz-components/p-DOTK1OW3.js +0 -1
- package/lmvz-components/p-DWePb-zu.js +0 -1
- package/lmvz-components/p-ca497e57.entry.js +0 -1
- package/lmvz-components/p-d8b55d55.entry.js +0 -1
- package/lmvz-components/p-f030f6f6.entry.js +0 -1
- package/types/utils/component.d.ts +0 -33
- package/types/utils/http.d.ts +0 -26
- package/types/utils/http.unit.d.ts +0 -1
- /package/collection/utils/{reactive-controller-host.js → stencil/reactive-controller-host.js} +0 -0
- /package/types/utils/{assets.d.ts → stencil/assets.d.ts} +0 -0
|
@@ -5,7 +5,7 @@ var ariaValidationController = require('./aria-validation-controller-Z4TtOp2l.js
|
|
|
5
5
|
var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
|
|
6
6
|
require('./aria-loader-BRo2FTGh.js');
|
|
7
7
|
|
|
8
|
-
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, #c7c7c7); --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.61rem + 0.06vw, 0.69rem)); --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, #e52a31); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); 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); outline-offset: var(--lmvz-ds-outline-offset); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong); 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.69rem, 0.67rem + 0.06vw, 0.75rem)); } [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.69rem, 0.67rem + 0.06vw, 0.75rem)); } [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)); }`;
|
|
8
|
+
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, #c7c7c7); --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.61rem + 0.06vw, 0.69rem)); --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, #e52a31); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); 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.69rem, 0.67rem + 0.06vw, 0.75rem)); } [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.69rem, 0.67rem + 0.06vw, 0.75rem)); } [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)); }`;
|
|
9
9
|
|
|
10
10
|
let selectIdCounter = 0;
|
|
11
11
|
const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
@@ -59,7 +59,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
59
59
|
render() {
|
|
60
60
|
const hasValue = this.hasValue;
|
|
61
61
|
const shouldShowLabel = hasValue;
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, index.h("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), index.h("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, index.h("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), index.h("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, index.h("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', 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 && index.h("option", { key: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && index.h("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
|
|
63
63
|
}
|
|
64
64
|
static get watchers() { return {
|
|
65
65
|
"value": [{
|
|
@@ -5,7 +5,7 @@ var warning = require('./warning-WEX_ABWL.js');
|
|
|
5
5
|
|
|
6
6
|
const alertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0Nl8zODApIj4KPHBhdGggZD0iTTEyIDUuMjVWMTMuMTI1TTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaTTEzLjEyNSAxNi44NzVDMTMuMTI1IDE3LjQ5NjMgMTIuNjIxMyAxOCAxMiAxOEMxMS4zNzg3IDE4IDEwLjg3NSAxNy40OTYzIDEwLjg3NSAxNi44NzVDMTAuODc1IDE2LjI1MzcgMTEuMzc4NyAxNS43NSAxMiAxNS43NUMxMi42MjEzIDE1Ljc1IDEzLjEyNSAxNi4yNTM3IDEzLjEyNSAxNi44NzVaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0Nl8zODAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==';
|
|
7
7
|
|
|
8
|
-
const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-16-20, 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-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));pointer-events:auto;font:var(--lmvz-typography-body-md-strong);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c);color:var(--lmvz-component-color)}:host([status='success']){background-color:var(--lmvz-semantic-color-status-success, #f1f9f8);border-color:var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c)}:host([status='warning']){background-color:var(--lmvz-semantic-color-status-warning, #fffbf0);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);--lmvz-component-color:var(--lmvz-semantic-color-status-on-warning, #7a5e00)}:host([status='error']){background-color:var(--lmvz-semantic-color-status-danger, #fdf1f2);border-color:var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);--lmvz-component-color:var(--lmvz-semantic-color-status-on-danger, #e52a31)}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}}`;
|
|
8
|
+
const lmvzSnackbarCss = () => `:host{position:fixed;bottom:var(--lmvz-dimension-16-20, 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-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--lmvz-dimension-8-12, 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, #37867c);color:var(--lmvz-component-color)}:host([status='success']){background-color:var(--lmvz-semantic-color-status-success, #f1f9f8);border-color:var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);--lmvz-component-color:var(--lmvz-semantic-color-status-on-success, #37867c)}:host([status='warning']){background-color:var(--lmvz-semantic-color-status-warning, #fffbf0);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);--lmvz-component-color:var(--lmvz-semantic-color-status-on-warning, #7a5e00)}:host([status='error']){background-color:var(--lmvz-semantic-color-status-danger, #fdf1f2);border-color:var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);--lmvz-component-color:var(--lmvz-semantic-color-status-on-danger, #e52a31)}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}}`;
|
|
9
9
|
|
|
10
10
|
const STATUS_SVG = {
|
|
11
11
|
success: warning.infoSvg,
|
|
@@ -67,7 +67,7 @@ const LmvzSnackbar = class {
|
|
|
67
67
|
this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
|
|
68
68
|
};
|
|
69
69
|
render() {
|
|
70
|
-
return (index.h(index.Host, { key: '
|
|
70
|
+
return (index.h(index.Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, index.h("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
|
|
71
71
|
}
|
|
72
72
|
static get watchers() { return {
|
|
73
73
|
"status": [{
|
|
@@ -12,7 +12,7 @@ const LmvzSpinner = class {
|
|
|
12
12
|
ariaLabel;
|
|
13
13
|
render() {
|
|
14
14
|
const hasLabel = !!this.ariaLabel?.trim();
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
LmvzSpinner.style = lmvzSpinnerCss();
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-TGsVZNDP.js');
|
|
4
4
|
|
|
5
|
-
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; } } :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-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, 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); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline); outline-offset: var(--lmvz-ds-outline-offset); 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-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, 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-16-18, 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.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
|
|
5
|
+
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-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); } } :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-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, 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-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, 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-16-18, 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.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
|
|
6
6
|
|
|
7
7
|
const LmvzTab = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -22,7 +22,7 @@ const LmvzTab = class {
|
|
|
22
22
|
this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (index.h(index.Host, { key: '
|
|
25
|
+
return (index.h(index.Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, index.h("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, index.h("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), index.h("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
|
|
26
26
|
}
|
|
27
27
|
static get delegatesFocus() { return true; }
|
|
28
28
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-TGsVZNDP.js');
|
|
4
|
-
var listKeyboardController = require('./list-keyboard-controller-
|
|
4
|
+
var listKeyboardController = require('./list-keyboard-controller-StN6Yn8W.js');
|
|
5
5
|
var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
|
|
6
|
-
require('./
|
|
6
|
+
require('./element.util-Cq4y-_iX.js');
|
|
7
7
|
|
|
8
|
-
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; } } :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-6-8, 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; } `;
|
|
8
|
+
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-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); } } :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-6-8, 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; } `;
|
|
9
9
|
|
|
10
10
|
let tabsIdCounter = 0;
|
|
11
11
|
const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
@@ -240,7 +240,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
240
240
|
this.selectTab(value);
|
|
241
241
|
};
|
|
242
242
|
render() {
|
|
243
|
-
return (index.h(index.Host, { key: '
|
|
243
|
+
return (index.h(index.Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
|
|
244
244
|
}
|
|
245
245
|
static get watchers() { return {
|
|
246
246
|
"value": [{
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-TGsVZNDP.js');
|
|
4
4
|
var ariaValidationController = require('./aria-validation-controller-Z4TtOp2l.js');
|
|
5
|
-
var component = require('./component-C7cavwmZ.js');
|
|
6
5
|
var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
|
|
6
|
+
var stencil_util = require('./stencil.util-DzvzXSwk.js');
|
|
7
7
|
require('./aria-loader-BRo2FTGh.js');
|
|
8
8
|
|
|
9
|
-
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-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #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, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .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); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }`;
|
|
9
|
+
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-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #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, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .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; }`;
|
|
10
10
|
|
|
11
|
-
const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline);outline-offset:var(--lmvz-ds-outline-offset)}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
|
|
11
|
+
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}}`;
|
|
12
12
|
|
|
13
13
|
let toggleIdCounter = 0;
|
|
14
14
|
const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
@@ -72,7 +72,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
72
72
|
}
|
|
73
73
|
async getInputElement() {
|
|
74
74
|
if (!this.nativeInputElement) {
|
|
75
|
-
await new Promise((resolve) =>
|
|
75
|
+
await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
|
|
76
76
|
}
|
|
77
77
|
return Promise.resolve(this.nativeInputElement);
|
|
78
78
|
}
|
|
@@ -82,7 +82,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
|
82
82
|
this.lmvzChange.emit(newChecked);
|
|
83
83
|
};
|
|
84
84
|
render() {
|
|
85
|
-
return (index.h(index.Host, { key: '
|
|
85
|
+
return (index.h(index.Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, index.h("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, index.h("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', 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 }), index.h("span", { key: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
|
|
86
86
|
}
|
|
87
87
|
static get formAssociated() { return true; }
|
|
88
88
|
static get watchers() { return {
|
package/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[
|
|
9
|
+
return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-action-list.cjs",[[774,"lmvz-action-list",{"label":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const raf = (h) => {
|
|
4
|
+
if (typeof __zone_symbol__requestAnimationFrame === 'function') {
|
|
5
|
+
return __zone_symbol__requestAnimationFrame(h);
|
|
6
|
+
}
|
|
7
|
+
if (typeof requestAnimationFrame === 'function') {
|
|
8
|
+
return requestAnimationFrame(h);
|
|
9
|
+
}
|
|
10
|
+
return setTimeout(h);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const componentOnReady = (stencilEl, callback) => {
|
|
14
|
+
if (hasLazyBuild(stencilEl)) {
|
|
15
|
+
stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
raf(() => callback(stencilEl));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const hasLazyBuild = (stencilEl) => {
|
|
22
|
+
return stencilEl.componentOnReady !== undefined;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.componentOnReady = componentOnReady;
|
|
@@ -9,6 +9,7 @@ export const iconSizes = [...sizes, 'inherit'];
|
|
|
9
9
|
export const iconWeights = ['thin', 'medium', 'bold'];
|
|
10
10
|
export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
|
|
11
11
|
export const chipSizes = ['default', 'small'];
|
|
12
|
+
export const linkTypes = ['internal', 'external'];
|
|
12
13
|
export const messageTypes = ['neutral', 'warning'];
|
|
13
14
|
export const snackbarStatuses = ['success', 'warning', 'error'];
|
|
14
15
|
export const snackbarPriorities = ['low', 'normal', 'high'];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
3
|
"components/lmvz-action/lmvz-action.js",
|
|
4
|
+
"components/lmvz-action-list/lmvz-action-list.js",
|
|
4
5
|
"components/lmvz-button/lmvz-button.js",
|
|
5
6
|
"components/lmvz-button-group/lmvz-button-group.js",
|
|
6
7
|
"components/lmvz-card/lmvz-card.js",
|
|
@@ -9,6 +10,7 @@
|
|
|
9
10
|
"components/lmvz-header/lmvz-header.js",
|
|
10
11
|
"components/lmvz-icon/lmvz-icon.js",
|
|
11
12
|
"components/lmvz-input/lmvz-input.js",
|
|
13
|
+
"components/lmvz-link/lmvz-link.js",
|
|
12
14
|
"components/lmvz-menuitem/lmvz-menuitem.js",
|
|
13
15
|
"components/lmvz-message/lmvz-message.js",
|
|
14
16
|
"components/lmvz-modal/lmvz-modal.js",
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
|
|
2
|
+
@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
|
|
3
|
+
/**
|
|
4
|
+
* This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
|
|
5
|
+
* Important: Always import this file _before_ layering your own styles!
|
|
6
|
+
*/
|
|
7
|
+
@layer lmvz-ds.reset {
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
h1,
|
|
13
|
+
h2,
|
|
14
|
+
h3,
|
|
15
|
+
h4,
|
|
16
|
+
h5,
|
|
17
|
+
h6 {
|
|
18
|
+
margin: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
*[hidden] {
|
|
22
|
+
display: none !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
hr {
|
|
26
|
+
height: 0;
|
|
27
|
+
border: none;
|
|
28
|
+
margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
|
|
29
|
+
border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
@layer lmvz-ds.components {
|
|
34
|
+
.lmvz-wrapper-card-sm,
|
|
35
|
+
.lmvz-wrapper-card-md,
|
|
36
|
+
.lmvz-wrapper-card-lg {
|
|
37
|
+
background: var(--lmvz-semantic-color-surface-primary, #ffffff);
|
|
38
|
+
box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.lmvz-wrapper-card-sm {
|
|
42
|
+
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));
|
|
43
|
+
border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
|
|
44
|
+
}
|
|
45
|
+
.lmvz-wrapper-card-md {
|
|
46
|
+
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));
|
|
47
|
+
border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
|
|
48
|
+
}
|
|
49
|
+
.lmvz-wrapper-card-lg {
|
|
50
|
+
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));
|
|
51
|
+
border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
:host {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
gap: 0;
|
|
59
|
+
|
|
60
|
+
lmvz-button,
|
|
61
|
+
button {
|
|
62
|
+
--lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary, #ffffff);
|
|
63
|
+
--lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary, #000000);
|
|
64
|
+
--lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
|
|
65
|
+
--lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
|
|
66
|
+
--lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
|
|
67
|
+
|
|
68
|
+
width: 100%;
|
|
69
|
+
display: block;
|
|
70
|
+
|
|
71
|
+
&:hover {
|
|
72
|
+
--lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
|
|
73
|
+
--lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
|
|
74
|
+
}
|
|
75
|
+
&:active {
|
|
76
|
+
--lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
|
|
77
|
+
--lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.lmvz-action-list-item--danger {
|
|
82
|
+
--lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
|
|
83
|
+
|
|
84
|
+
&:hover {
|
|
85
|
+
--lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2);
|
|
86
|
+
--lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
|
|
87
|
+
}
|
|
88
|
+
&:active {
|
|
89
|
+
--lmvz-button-background-override: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
|
|
90
|
+
--lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
|
|
3
|
+
import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
|
|
4
|
+
import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
|
|
5
|
+
export class LmvzActionList extends ReactiveControllerHost {
|
|
6
|
+
el;
|
|
7
|
+
slotEl;
|
|
8
|
+
get validationEl() {
|
|
9
|
+
return this.el;
|
|
10
|
+
}
|
|
11
|
+
get validationSlot() {
|
|
12
|
+
return this.slotEl;
|
|
13
|
+
}
|
|
14
|
+
focusController = new DirectionalFocusController(this, {
|
|
15
|
+
orientation: 'vertical',
|
|
16
|
+
manageTabIndex: true,
|
|
17
|
+
enableHomeAndEnd: true,
|
|
18
|
+
});
|
|
19
|
+
label;
|
|
20
|
+
constructor() {
|
|
21
|
+
super();
|
|
22
|
+
this.addController(this.focusController);
|
|
23
|
+
this.addController(new AriaValidationController(this, {
|
|
24
|
+
validationTiming: 'slot',
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
27
|
+
componentDidLoad() {
|
|
28
|
+
this.handleSlotChange();
|
|
29
|
+
super.componentDidLoad();
|
|
30
|
+
}
|
|
31
|
+
handleSlotChange = () => {
|
|
32
|
+
const slot = this.slotEl;
|
|
33
|
+
if (!slot)
|
|
34
|
+
return;
|
|
35
|
+
const assigned = slot.assignedElements();
|
|
36
|
+
const interactive = [];
|
|
37
|
+
for (const el of assigned) {
|
|
38
|
+
collectInteractiveButtonsRecursively(el, interactive);
|
|
39
|
+
}
|
|
40
|
+
this.focusController.updateElements(interactive);
|
|
41
|
+
};
|
|
42
|
+
render() {
|
|
43
|
+
const ariaLabel = this.label || undefined;
|
|
44
|
+
return (h(Host, { key: '79e2d77c9aca02fb3ef2e58d241664598253334b', role: "menu", "aria-label": ariaLabel, class: "lmvz-wrapper-card-sm" }, h("slot", { key: '941b875a5be536c3d0e2ff9287da5af1a416d356', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
|
|
45
|
+
}
|
|
46
|
+
static get is() { return "lmvz-action-list"; }
|
|
47
|
+
static get encapsulation() { return "scoped"; }
|
|
48
|
+
static get originalStyleUrls() {
|
|
49
|
+
return {
|
|
50
|
+
"$": ["./lmvz-action-list.css"]
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
static get styleUrls() {
|
|
54
|
+
return {
|
|
55
|
+
"$": ["lmvz-action-list.css"]
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
static get properties() {
|
|
59
|
+
return {
|
|
60
|
+
"label": {
|
|
61
|
+
"type": "string",
|
|
62
|
+
"mutable": false,
|
|
63
|
+
"complexType": {
|
|
64
|
+
"original": "string",
|
|
65
|
+
"resolved": "string | undefined",
|
|
66
|
+
"references": {}
|
|
67
|
+
},
|
|
68
|
+
"required": false,
|
|
69
|
+
"optional": true,
|
|
70
|
+
"docs": {
|
|
71
|
+
"tags": [],
|
|
72
|
+
"text": "Accessible label for the menu, reflected as `aria-label` on the host Element.\nWhen absent, `aria-label` is not rendered on the host."
|
|
73
|
+
},
|
|
74
|
+
"getter": false,
|
|
75
|
+
"setter": false,
|
|
76
|
+
"reflect": false,
|
|
77
|
+
"attribute": "label"
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
static get elementRef() { return "el"; }
|
|
82
|
+
}
|
|
83
|
+
function collectInteractiveButtonsRecursively(el, collection) {
|
|
84
|
+
const tag = el.tagName.toLowerCase();
|
|
85
|
+
if (tag === 'lmvz-button') {
|
|
86
|
+
el.buttonRole = 'menuitem';
|
|
87
|
+
collection.push(el);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
if (tag === 'button') {
|
|
91
|
+
el.setAttribute('role', 'menuitem');
|
|
92
|
+
collection.push(el);
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (tag === 'hr') {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
if (el.getAttribute('role') === 'group') {
|
|
99
|
+
const children = el.querySelectorAll('lmvz-button, button');
|
|
100
|
+
children.forEach((child) => collectInteractiveButtonsRecursively(child, collection));
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
console.warn('Unexpected element encountered in ActionList:', tag);
|
|
104
|
+
}
|