@lmvz-ds/components 0.39.0 → 0.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/cjs/{ds.constants-C6eKRAEu.js → ds.constants-pI-qkOYv.js} +2 -0
- package/cjs/index.cjs.js +2 -1
- package/cjs/lmvz-button-group.cjs.entry.js +1 -1
- package/cjs/lmvz-button_2.cjs.entry.js +1 -1
- package/cjs/lmvz-card.cjs.entry.js +58 -14
- 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-datepicker.cjs.entry.js +2 -2
- package/cjs/lmvz-header_2.cjs.entry.js +1 -1
- package/cjs/lmvz-input.cjs.entry.js +2 -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 +1 -1
- package/cjs/lmvz-popover.cjs.entry.js +1 -1
- package/cjs/lmvz-radio.cjs.entry.js +1 -1
- package/cjs/lmvz-select.cjs.entry.js +1 -1
- package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
- package/cjs/lmvz-spinner.cjs.entry.js +1 -1
- package/cjs/lmvz-tab.cjs.entry.js +3 -3
- package/cjs/lmvz-tabs.cjs.entry.js +37 -44
- package/cjs/lmvz-toggle.cjs.entry.js +1 -1
- package/cjs/loader.cjs.js +1 -1
- package/collection/api/ds.constants.js +1 -0
- package/collection/components/lmvz-card/lmvz-card.css +82 -194
- package/collection/components/lmvz-card/lmvz-card.js +131 -38
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +1 -1
- package/collection/components/lmvz-datepicker/lmvz-datepicker.js +2 -2
- package/collection/components/lmvz-header/lmvz-header.js +1 -1
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-link/lmvz-link.js +1 -1
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-message/lmvz-message.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.js +1 -1
- package/collection/components/lmvz-popover/lmvz-popover.js +1 -1
- package/collection/components/lmvz-radio/lmvz-radio.js +1 -1
- package/collection/components/lmvz-select/lmvz-select.js +1 -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 +0 -13
- package/collection/components/lmvz-tab/lmvz-tab.js +10 -14
- package/collection/components/lmvz-tabs/lmvz-tabs.css +0 -5
- package/collection/components/lmvz-tabs/lmvz-tabs.js +45 -66
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.js +1 -1
- package/components/lmvz-button-group.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-datepicker.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-link.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-message.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-popover.js +1 -1
- package/components/lmvz-radio.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-snackbar.js +1 -1
- package/components/lmvz-spinner.js +1 -1
- package/components/lmvz-tab.js +1 -1
- package/components/lmvz-tabs.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-Buw_s-9k.js +1 -0
- package/components/{p-DSDBThqb.js → p-ChNEjbnY.js} +1 -1
- package/components/{p-niXjuPxe.js → p-DMdV-cnt.js} +1 -1
- package/components/{p-Bc5MM0zh.js → p-D_sr5Z0Q.js} +1 -1
- package/components/{p-D_mff3n7.js → p-qLAod5PR.js} +1 -1
- package/components/{p-DXhP6UeF.js → p-sJgTdXHR.js} +1 -1
- package/esm/{ds.constants-0ctLESas.js → ds.constants-Buw_s-9k.js} +2 -1
- package/esm/index.js +1 -1
- package/esm/lmvz-button-group.entry.js +1 -1
- package/esm/lmvz-button_2.entry.js +1 -1
- package/esm/lmvz-card.entry.js +59 -15
- 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-datepicker.entry.js +2 -2
- package/esm/lmvz-header_2.entry.js +1 -1
- package/esm/lmvz-input.entry.js +2 -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 +1 -1
- package/esm/lmvz-popover.entry.js +1 -1
- package/esm/lmvz-radio.entry.js +1 -1
- package/esm/lmvz-select.entry.js +1 -1
- package/esm/lmvz-snackbar.entry.js +1 -1
- package/esm/lmvz-spinner.entry.js +1 -1
- package/esm/lmvz-tab.entry.js +3 -3
- package/esm/lmvz-tabs.entry.js +37 -44
- package/esm/lmvz-toggle.entry.js +1 -1
- package/esm/loader.js +1 -1
- package/hydrate/index.js +125 -88
- package/hydrate/index.mjs +125 -88
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-f24f5207.entry.js → p-170dea97.entry.js} +1 -1
- package/lmvz-components/{p-efd9d50e.entry.js → p-18a894e4.entry.js} +1 -1
- package/lmvz-components/{p-f911691c.entry.js → p-19c9f747.entry.js} +1 -1
- package/lmvz-components/{p-87f21ac9.entry.js → p-377c45a7.entry.js} +1 -1
- package/lmvz-components/{p-773e9d95.entry.js → p-6292da52.entry.js} +1 -1
- package/lmvz-components/{p-ebad823c.entry.js → p-65efa76e.entry.js} +1 -1
- package/lmvz-components/{p-27e8b4fa.entry.js → p-67b86084.entry.js} +1 -1
- package/lmvz-components/{p-7cbfbc88.entry.js → p-6ffd9391.entry.js} +1 -1
- package/lmvz-components/{p-304c7554.entry.js → p-77fd3ce2.entry.js} +1 -1
- package/lmvz-components/{p-e35f49a1.entry.js → p-96764fa9.entry.js} +1 -1
- package/lmvz-components/p-Buw_s-9k.js +1 -0
- package/lmvz-components/{p-6aae1df9.entry.js → p-a70079b6.entry.js} +1 -1
- package/lmvz-components/p-aa643b58.entry.js +1 -0
- package/lmvz-components/{p-335b3867.entry.js → p-b14966a6.entry.js} +1 -1
- package/lmvz-components/{p-8ba6ec19.entry.js → p-b9d29e90.entry.js} +1 -1
- package/lmvz-components/{p-41286514.entry.js → p-bf728ef8.entry.js} +1 -1
- package/lmvz-components/p-c6309d6c.entry.js +1 -0
- package/lmvz-components/p-d466fe8f.entry.js +1 -0
- package/lmvz-components/{p-edec4d09.entry.js → p-dd4a62e1.entry.js} +1 -1
- package/lmvz-components/{p-d73bb7fd.entry.js → p-e1c75def.entry.js} +1 -1
- package/lmvz-components/{p-93b781ca.entry.js → p-fd29789f.entry.js} +1 -1
- package/manifest.json +169 -102
- package/package.json +1 -1
- package/types/api/ds.constants.d.ts +1 -0
- package/types/api/ds.types.d.ts +4 -0
- package/types/components/lmvz-card/lmvz-card.d.ts +17 -6
- package/types/components/lmvz-tab/lmvz-tab.d.ts +1 -1
- package/types/components/lmvz-tabs/lmvz-tabs.d.ts +7 -8
- package/types/components.d.ts +68 -47
- package/components/p-0ctLESas.js +0 -1
- package/lmvz-components/p-0ctLESas.js +0 -1
- package/lmvz-components/p-1ba1af8d.entry.js +0 -1
- package/lmvz-components/p-3b7203a3.entry.js +0 -1
- package/lmvz-components/p-c884c76e.entry.js +0 -1
package/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, d as disableAriaValidation, e as enableAriaValidation, i as isAriaValidationEnabled, q as queueValidation, u as useVerboseLogging } from './aria-loader-BfH06m7H.js';
|
|
2
|
-
export { g as chipSizes, f as chipTypes, d as iconSizes, e as iconWeights, b as inputSizes, i as inputTypes, l as linkTypes, m as messageTypes, p as popoverPlacements,
|
|
2
|
+
export { h as cardSizes, g as chipSizes, f as chipTypes, d as iconSizes, e as iconWeights, b as inputSizes, i as inputTypes, l as linkTypes, m as messageTypes, p as popoverPlacements, o as popoverSizes, s as scaleValues, c as selectSizes, a as sizes, n as snackbarDismissReasons, k as snackbarPriorities, j as snackbarStatuses, t as textSizes, v as variants } from './ds.constants-Buw_s-9k.js';
|
|
3
3
|
export { S as SnackbarController } from './public-m6pRVUeP.js';
|
|
4
4
|
export { g as getRegisteredIconProvider, r as registerIconProvider, t as typedIconFromSet } from './icons-DQOFaux5.js';
|
|
5
5
|
import './svg-Dz3GD0LB.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, H as Host } from './index-DVab4vzV.js';
|
|
2
2
|
import { a as isPromise, i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
|
|
3
|
-
import { v as variants } from './ds.constants-
|
|
3
|
+
import { v as variants } from './ds.constants-Buw_s-9k.js';
|
|
4
4
|
import './public-m6pRVUeP.js';
|
|
5
5
|
import { d as isPrimaryAction, e as isVisible, f as isActionButton, h as isDisabledButton, j as isSecondaryAction, a as isLmvzButton, k as canReceiveFocus } from './element.util-3ydVsxUW.js';
|
|
6
6
|
import './icons-DQOFaux5.js';
|
|
@@ -162,7 +162,7 @@ const LmvzIcon = class extends ReactiveControllerHost {
|
|
|
162
162
|
super.componentDidRender();
|
|
163
163
|
}
|
|
164
164
|
render() {
|
|
165
|
-
return h(Host, { key: '
|
|
165
|
+
return h(Host, { key: '0dd3824c964cb73ba4758afbb8768535b7bf0820', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
166
166
|
}
|
|
167
167
|
waitUntilVisible(callback, rootMargin = 50) {
|
|
168
168
|
if (typeof window === 'undefined' || !window.IntersectionObserver) {
|
package/esm/lmvz-card.entry.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { a as getAssetPath, r as registerInstance, c as createEvent, h, H as Host } from './index-DVab4vzV.js';
|
|
1
|
+
import { a as getAssetPath, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-DVab4vzV.js';
|
|
2
|
+
import { h as cardSizes } from './ds.constants-Buw_s-9k.js';
|
|
3
|
+
import { i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
|
|
2
4
|
|
|
3
5
|
function getLocationBase() {
|
|
4
6
|
return import.meta?.url ?? window?.location?.origin ?? '';
|
|
@@ -20,34 +22,76 @@ function joinPath(...parts) {
|
|
|
20
22
|
return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
|
|
21
23
|
}
|
|
22
24
|
|
|
23
|
-
const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
|
|
25
|
+
const lmvzCardCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { --lmvz-card-local-min-width: 320px; --lmvz-card-local-max-width: 360px; --lmvz-card-local-sm-width: 232px; display: flex; flex-direction: column; align-items: flex-start; min-width: var(--lmvz-card-local-min-width); max-width: var(--lmvz-card-local-max-width); border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) var(--lmvz-semantic-shadow-l1-1-blur, 4px) 0 var(--lmvz-semantic-color-shadow-l1-default, rgba(120, 120, 128, 0.08)); margin-bottom: var(--lmvz-component-card-lg-margin-bottom, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); } :host([size='small']) { width: var(--lmvz-card-local-sm-width); min-width: 0; max-width: none; border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); margin-bottom: var(--lmvz-component-card-sm-margin-bottom, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); } * { 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); } .image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; align-self: stretch; border-top-left-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); border-top-right-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); } :host([size='small']) .image { border-top-left-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); border-top-right-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); } .content { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: var(--lmvz-component-spacing-xs, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); 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)); } :host([size='small']) .content { gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); 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)); } .title-block { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); } .card-default-title { margin: 0; overflow-wrap: break-word; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } :host([size='small']) .card-default-title { font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } ::slotted([slot='card-title']) { margin: 0; overflow-wrap: break-word; } :host([size='small']) ::slotted([slot='card-title']) { font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } .description { margin: 0; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } :host([size='small']) .description { font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router); } slot[name='chip'] { display: contents; } .actions { display: flex; align-items: center; align-self: stretch; padding-top: var(--lmvz-component-spacing-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); } lmvz-button.action { flex: 1 0 0; } `;
|
|
24
26
|
|
|
27
|
+
const HEADING_TAGS = new Set(['HEADER', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
|
|
25
28
|
const LmvzCard = class {
|
|
26
29
|
constructor(hostRef) {
|
|
27
30
|
registerInstance(this, hostRef);
|
|
28
|
-
this.
|
|
31
|
+
this.lmvzCardAction = createEvent(this, "lmvzCardAction", 7);
|
|
29
32
|
}
|
|
33
|
+
get el() { return getElement(this); }
|
|
34
|
+
titleSlotElement;
|
|
35
|
+
warnedCases = new Set();
|
|
36
|
+
size = 'large';
|
|
30
37
|
cardTitle;
|
|
31
|
-
imageUrl;
|
|
32
38
|
description;
|
|
33
|
-
|
|
34
|
-
|
|
39
|
+
imageUrl;
|
|
40
|
+
imageAlt = '';
|
|
41
|
+
actionLabel;
|
|
42
|
+
lmvzCardAction;
|
|
43
|
+
normalizeSize(value) {
|
|
44
|
+
const normalizedSize = cardSizes.includes(value) ? value : 'large';
|
|
45
|
+
if (normalizedSize !== this.size) {
|
|
46
|
+
this.size = normalizedSize;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
componentWillLoad() {
|
|
50
|
+
this.normalizeSize(this.size);
|
|
51
|
+
}
|
|
52
|
+
componentDidLoad() {
|
|
53
|
+
const titleSlot = this.el.shadowRoot?.querySelector('slot[name="card-title"]');
|
|
54
|
+
titleSlot?.addEventListener('slotchange', () => this.checkTitleContent());
|
|
55
|
+
this.checkTitleContent();
|
|
56
|
+
}
|
|
35
57
|
get fallbackImage() {
|
|
36
|
-
return createAssetUrlSafely('card-placeholder.svg');
|
|
58
|
+
return String(createAssetUrlSafely('card-placeholder.svg'));
|
|
59
|
+
}
|
|
60
|
+
handleActionClick = () => {
|
|
61
|
+
this.lmvzCardAction.emit();
|
|
62
|
+
};
|
|
63
|
+
get slottedTitleElement() {
|
|
64
|
+
return this.titleSlotElement?.assignedElements()?.at(0);
|
|
37
65
|
}
|
|
38
|
-
|
|
39
|
-
|
|
66
|
+
checkTitleContent() {
|
|
67
|
+
if (!isAriaValidationEnabled())
|
|
68
|
+
return;
|
|
69
|
+
const slotted = this.slottedTitleElement;
|
|
70
|
+
if (slotted) {
|
|
71
|
+
const tag = slotted.tagName;
|
|
72
|
+
if (!HEADING_TAGS.has(tag)) {
|
|
73
|
+
this.warnOnce(`non-heading:${tag}`, `[lmvz-card] Element <${tag.toLowerCase()}> slotted into "card-title" is not a heading. Slot a heading element (h2-h5) instead.`);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
else if (!this.cardTitle) {
|
|
77
|
+
this.warnOnce('missing-title', '[lmvz-card] Neither a "card-title" slotted heading nor a non-empty "cardTitle" prop was supplied.');
|
|
78
|
+
}
|
|
40
79
|
}
|
|
41
|
-
|
|
42
|
-
|
|
80
|
+
warnOnce(key, message) {
|
|
81
|
+
if (this.warnedCases.has(key))
|
|
82
|
+
return;
|
|
83
|
+
this.warnedCases.add(key);
|
|
84
|
+
console.warn(message);
|
|
43
85
|
}
|
|
44
86
|
render() {
|
|
45
|
-
|
|
46
|
-
backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
|
|
47
|
-
};
|
|
48
|
-
return (h(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, h("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, h("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, h("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, h("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), h("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, h("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, h("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), h("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), h("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, h("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
|
|
87
|
+
return (h(Host, { key: '21ac0a567bb88d05d247cc3150bf2e7ce26972c5', role: "article" }, h("img", { key: '6cea11ee015059d5537ab64c7cbb1655ac984cb1', class: "image", src: this.imageUrl ?? this.fallbackImage, alt: this.imageAlt, loading: "lazy", decoding: "async" }), h("div", { key: 'cd29132d8268fb5a025cde5c33a858982c8eaaed', class: "content" }, h("div", { key: '0d353a46cae60d81417e5280b39020b2234ad304', class: "title-block" }, h("slot", { key: '4f2734a257ef877d258a717e23855f521c5132a6', name: "card-title", ref: (el) => (this.titleSlotElement = el) }, this.cardTitle && (h("header", { key: '7d526caba45dde6b13bee023e60943711347258a', role: "heading", class: "card-default-title" }, this.cardTitle))), this.description && h("p", { key: '18c3eac26562a592baa29d75674737d11f57beac', class: "description" }, this.description)), h("slot", { key: 'd0d9c40ca8501b0fdfa9d589eeb05692892316a2', name: "chip" }), this.actionLabel && (h("div", { key: '4bd5d9233c0ba1dcda6bebdeff89adbbfe37e4b1', class: "actions" }, h("lmvz-button", { key: '6cefc7ad2859d457ad11b3f4edb1300ba664ef63', class: "action", variant: "secondary", scale: this.size === 'small' ? 'small' : 'default', onLmvzActivation: this.handleActionClick }, this.actionLabel))))));
|
|
49
88
|
}
|
|
50
89
|
static get assetsDirs() { return ["../../assets"]; }
|
|
90
|
+
static get watchers() { return {
|
|
91
|
+
"size": [{
|
|
92
|
+
"normalizeSize": 0
|
|
93
|
+
}]
|
|
94
|
+
}; }
|
|
51
95
|
};
|
|
52
96
|
LmvzCard.style = lmvzCardCss();
|
|
53
97
|
|
|
@@ -131,7 +131,7 @@ const LmvzCheckbox = class extends ReactiveControllerHost {
|
|
|
131
131
|
this.nativeError = true;
|
|
132
132
|
}
|
|
133
133
|
render() {
|
|
134
|
-
return (h(Host, { key: '
|
|
134
|
+
return (h(Host, { key: 'df48e8af0b992d4f2c564aae67dbd42b6454f2c1' }, h("div", { key: 'fe1256e373ee98cc26ca9031654d4d01f10b96e7', class: "pill" }, h("input", { key: '580af189cb0069dd057464efd8c876c1a2dd3826', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '4a6b3522aa1a43f3c0a7ff203fb5791876555954', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '3a857015118d911832cdaa1287cee4c63f84afb2', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'aa543c4c37cf220084b3cce423e1d0e48b5c344f', class: "content" }, h("label", { key: '26c8551de719bdd99cce39b9129b59643f2aa44e', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '004ead4527953b10b4ab6d89366159d7727320b2', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '0fa0dcfdf2fe61d510bfe9f0c4f8d16a341f97d7', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
135
135
|
}
|
|
136
136
|
static get formAssociated() { return true; }
|
|
137
137
|
static get watchers() { return {
|
package/esm/lmvz-chip.entry.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { g as getElement, r as registerInstance, h, H as Host } from './index-DVab4vzV.js';
|
|
2
|
-
import { f as chipTypes, g as chipSizes } from './ds.constants-
|
|
2
|
+
import { f as chipTypes, g as chipSizes } from './ds.constants-Buw_s-9k.js';
|
|
3
3
|
import { A as AriaValidationController } from './aria-validation-controller-Dwv7n0rk.js';
|
|
4
4
|
import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
|
|
5
5
|
import { i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
|
|
@@ -65,7 +65,7 @@ const LmvzChip = class extends ReactiveControllerHost {
|
|
|
65
65
|
}
|
|
66
66
|
}, 500);
|
|
67
67
|
render() {
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '2dcc9ccddd24f1db7ec65aeed24a1646cee80c76', type: this.type, size: this.size }, h("slot", { key: '756d785d9bdfdaba8c35641afee0743ff343a184', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '3df490bd3149acca605da7d7910be11b80585adf', class: "content-overflow-wrapper" }, h("slot", { key: '5c252427faffaea5a95618df4afced110ff15703', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '493c1ecd319d9afe0896339320cad67aa37289ab', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
|
|
69
69
|
}
|
|
70
70
|
static get watchers() { return {
|
|
71
71
|
"type": [{
|
package/esm/lmvz-components.js
CHANGED
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["lmvz-datepicker",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-select",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-snackbar",[[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",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-action-list",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-
|
|
20
|
+
return bootstrapLazy([["lmvz-datepicker",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-select",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-snackbar",[[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-card",[[769,"lmvz-card",{"size":[1537],"cardTitle":[1,"card-title"],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"]},null,{"size":[{"normalizeSize":0}]}]]],["lmvz-link",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-action-list",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["lmvz-checkbox",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}]}]]],["lmvz-menuitem",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-spinner",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"panel":[513]}]]],["lmvz-tabs",[[769,"lmvz-tabs",{"value":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},[[0,"slotchange","handleSlotChangeEvent"]],{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle",[[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],"getValidationMessage":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-chip",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input",[[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],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2",[[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);
|
|
21
21
|
});
|
|
@@ -2733,13 +2733,13 @@ const LmvzDatepicker = class {
|
|
|
2733
2733
|
render() {
|
|
2734
2734
|
const validationLabels = getValidationLabels(this.locale);
|
|
2735
2735
|
const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
|
|
2736
|
-
return (h(Host, { key: '
|
|
2736
|
+
return (h(Host, { key: '55c1293d79c3c9a1ca591e81c693797194498967' }, h("lmvz-input", { key: '054528d324a2fd99802659a41796da362412bcd9', ref: (el) => {
|
|
2737
2737
|
const wasUnset = !this.inputEl;
|
|
2738
2738
|
this.inputEl = el;
|
|
2739
2739
|
if (wasUnset && this.inputEl) {
|
|
2740
2740
|
forceUpdate(this);
|
|
2741
2741
|
}
|
|
2742
|
-
}, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: '
|
|
2742
|
+
}, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, h("lmvz-icon", { key: 'e109a59ba562ff0db88442119725cb38cc01ed6f', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), h("lmvz-popover", { key: 'df9046ff443232be3036fbb9ad2646681e7be697', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, h("div", { key: 'eea613edc10157650e2e11698afdcc85353bff49', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
|
|
2743
2743
|
}
|
|
2744
2744
|
static get delegatesFocus() { return true; }
|
|
2745
2745
|
static get formAssociated() { return true; }
|
|
@@ -97,7 +97,7 @@ const LmvzHeader = class extends ReactiveControllerHost {
|
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
|
-
return (h(Host, { key: '
|
|
100
|
+
return (h(Host, { key: '427f1fe61ea8809a17dc08518c3dca7218cd2c9b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'b95c5d269c18001592b4ea853b9c945eeedfda07', class: "brand" }, h("slot", { key: 'd856c174220f6e17b1aa977745bd057f7ca12625', name: "brand" }, h("img", { key: '554896aadccb818f06d01ad88f9be96a1afa615a', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '414d208fe60eb4dd0c1400727b4198b81fc4a041', "aria-label": "Hauptnavigation" }, h("div", { key: '608ea0c8ddcfef024505505ae7f91f644bfc1298', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b5de644c07b4ef809c7afa377bed5e48356fc93a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'a6e308da89df8b705a0d03218778bc36fb0cbaf2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'cf78a68329eadb96ad656ed81d8b3c72db582fc9', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'f7a00431635969cd0f3b29e52d002ec67c8dae04', class: "actions" }, h("slot", { key: '6ed3b3d6ef85646742f0a2cf5267464f06e20a05', name: "actions" }))));
|
|
101
101
|
}
|
|
102
102
|
static get watchers() { return {
|
|
103
103
|
"lmvzActiveNav": [{
|
package/esm/lmvz-input.entry.js
CHANGED
|
@@ -218,9 +218,9 @@ const LmvzInput = class extends ReactiveControllerHost {
|
|
|
218
218
|
render() {
|
|
219
219
|
const hasValue = Boolean(this.value);
|
|
220
220
|
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
221
|
-
return (h("div", { key: '
|
|
221
|
+
return (h("div", { key: '34535f927cceb5d28107f71a995b92f357f68df0', class: classNames('input-container', {
|
|
222
222
|
'interaction-filled': hasValue,
|
|
223
|
-
}) }, h("div", { key: '
|
|
223
|
+
}) }, h("div", { key: 'a1e6ef88163bb7c081b295f11194ffc10a0754c4', class: "input-wrapper" }, h("slot", { key: '6634e9671691bd2a18513571706028994fe27efe', name: "before-input" }), h("div", { key: 'e5299fed299b5b5a29ae9f1da71c5294f264da05', class: "label-input-group" }, h("label", { key: '21cf26ec1ef8af81f22b0333299b21268063cda4', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '2f8ab042d8a89bbfdd37c8083d83a4b5298aa447', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '35551a0a618eb2b553449e7e59b0190ff026cdb4', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), h("slot", { key: '7c8e459eefd966d4b1227e233a6c599907240545', name: "after-input" })), h("div", { key: '66a53450185cb93f3c6c98a222b1e201aa5a6d03', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '587940e277570a5cc9bba9cfbbd1c42daa512ad1', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
224
224
|
}
|
|
225
225
|
static get formAssociated() { return true; }
|
|
226
226
|
static get watchers() { return {
|
package/esm/lmvz-link.entry.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-DVab4vzV.js';
|
|
2
2
|
import { t as toValidSvgStringWithFallback } from './svg-Dz3GD0LB.js';
|
|
3
|
-
import { l as linkTypes } from './ds.constants-
|
|
3
|
+
import { l as linkTypes } from './ds.constants-Buw_s-9k.js';
|
|
4
4
|
import './logger-D06Ds9Dh.js';
|
|
5
5
|
|
|
6
6
|
const arrowRightSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgMTJIMjBNMTQgMThMMjAgMTJMMTQgNiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
|
|
@@ -53,7 +53,7 @@ const LmvzLink = class {
|
|
|
53
53
|
const rel = this.computeRel();
|
|
54
54
|
const iconSvg = this.type === 'external' ? EXTERNAL_SVG : ARROW_RIGHT_SVG;
|
|
55
55
|
const isBlank = this.target === '_blank';
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'af31a58caac2d4ccb4c2a72d356e85bda7c61b86' }, h("a", { key: 'c677c43497f214259863cf8306fa2d838bcd9bef', href: this.computeHref(), target: this.target, rel: rel }, h("slot", { key: '63f18a9089a6864c513c3ef01c68268a6b0dbd60' }), h("lmvz-icon", { key: '115472b9eda8f55c27bc551a9b1988e9086b501a', "aria-hidden": "true", icon: iconSvg }), isBlank && h("span", { key: 'cf1d70fcb80fe0e61eeceeb41b43ab0f7211ea02', class: "sr-only" }, this.externalLabel))));
|
|
57
57
|
}
|
|
58
58
|
static get delegatesFocus() { return true; }
|
|
59
59
|
static get watchers() { return {
|
|
@@ -29,7 +29,7 @@ const LmvzMenuItem = class extends ReactiveControllerHost {
|
|
|
29
29
|
this.addController(new ElementActivationController(this));
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h(Host, { key: '
|
|
32
|
+
return (h(Host, { key: '555ab8db190d0b80b47d903966e880aed51c31d4' }, h("slot", { key: '3987fb4644d8d2c47e936c0413e058a9221a2ad7', ref: (e) => (this.validationSlot = e) })));
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
LmvzMenuItem.style = lmvzMenuitemCss();
|
|
@@ -103,7 +103,7 @@ const LmvzMessage = class {
|
|
|
103
103
|
}
|
|
104
104
|
render() {
|
|
105
105
|
const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
|
|
106
|
-
return (h(Host, { key: '
|
|
106
|
+
return (h(Host, { key: '45bba3aa5050fcc993414c5d25b436c9a78b1b67', role: role }, this.leadingIcon && h("span", { key: '936327839c37f2aac83cca9db780dda0e47c2a42', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: 'e05203642419ad734285495205625567e5110c5f', class: "message" }, h("slot", { key: '7ced34a5a75a83707cee108ce0e964f815feaa61', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '705cd8ff5171d05f459ce09aaa10548de8362710', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: '90377bfb5e8fb69ad5dff323ca88d2ba9d0c444c', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '0064004bcb5ef5d9a3bf784f110b3cf0d267017d', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
LmvzMessage.style = lmvzMessageCss();
|
package/esm/lmvz-modal.entry.js
CHANGED
|
@@ -232,7 +232,7 @@ const LmvzModal = class extends ReactiveControllerHost {
|
|
|
232
232
|
this.hasHeader = this.hasAssignedContent(this.headerSlot);
|
|
233
233
|
};
|
|
234
234
|
render() {
|
|
235
|
-
return (h(Host, { key: '
|
|
235
|
+
return (h(Host, { key: 'eaae4e7e1ecf8fb11db7582ffa3d1461a718a8d0' }, h("dialog", { key: '11d1bdd9cd94afd82a13f5328234ad8877e9d28b', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '1c21a9266be21246ba8cbc55ac4559f7511294ff', class: "modal-shell" }, h("header", { key: '4077ec5bd9e434d954982884ab3306fc9db6d043', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '82476490860365ba5ed3e8f47af7a85084e01693', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '59dd145e07c6f310e8490ac7fa0e3d7577929a5d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '66e53dca4eab1503f53e4d069d1e115a77d3672e', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '23579ef59870459b523e4adc20df3954567b31a5', icon: closeIconSvg }))), h("div", { key: '62d2d2288ac84c945b5f0c070b3c553815572e69', class: "body" }, h("slot", { key: 'e511ff34da74c38981ee54d0e8a5019adfda2a7e' })), h("footer", { key: '1a921cf63e446f434a6686de39e8e653eb1c30c1', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '4280d47bb1f9bcc390253ff4286f25c4117612a2', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: 'a4a228ee4dbb1064cc4d7d005f202d69c66b8505', name: "actions" })))))));
|
|
236
236
|
}
|
|
237
237
|
static get watchers() { return {
|
|
238
238
|
"open": [{
|
|
@@ -1547,7 +1547,7 @@ const LmvzPopover = class {
|
|
|
1547
1547
|
this.closureController?.abort();
|
|
1548
1548
|
}
|
|
1549
1549
|
render() {
|
|
1550
|
-
return (h(Host, { key: '
|
|
1550
|
+
return (h(Host, { key: '559167785de0a69c12e436740b6b17a206f6155c', role: this.containerRole, "aria-label": this.label || undefined }, h("div", { key: 'deaeb8ac94edd8eac38748cbc01e8f335a8fe7a1', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, h("slot", { key: '87dd843041852b3d5b8b85497c0f4e4eb6791a45', ref: (el) => (this.slotEl = el) }))));
|
|
1551
1551
|
}
|
|
1552
1552
|
static get watchers() { return {
|
|
1553
1553
|
"open": [{
|
package/esm/lmvz-radio.entry.js
CHANGED
|
@@ -368,7 +368,7 @@ const LmvzRadio = class extends ReactiveControllerHost {
|
|
|
368
368
|
this.nativeInput?.click();
|
|
369
369
|
}
|
|
370
370
|
render() {
|
|
371
|
-
return (h(Host, { key: '
|
|
371
|
+
return (h(Host, { key: '0a3f2ee5c2aa0c27e2fc6c6482f463915a8475d1' }, h("input", { key: '707ee1a470c2a8b90dff54400490ae9366ab97ac', type: "radio", id: this.radioId, value: this.value, checked: this.checked, disabled: this.disabled, autoFocus: this.autofocus, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: '772a52ff4817b2332312bc597feee0de4fb3be4e', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '600e398709956b6cb3e95b2119268f805771f71e', class: "dot" })), h("span", { key: '446ee6d901dcbc2143f9772736746255ef2885db', class: "content" }, h("label", { key: '4ec55b6be95c847d564ec8dfff3486068f44580c', htmlFor: this.radioId }, this.label), h("span", { key: '678dcd677d22fb2c6c8983be8cb69100fc396378', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
|
|
372
372
|
}
|
|
373
373
|
static get formAssociated() { return true; }
|
|
374
374
|
static get watchers() { return {
|
package/esm/lmvz-select.entry.js
CHANGED
|
@@ -513,7 +513,7 @@ const LmvzSelect = class extends ReactiveControllerHost {
|
|
|
513
513
|
const hasValue = this.hasValue;
|
|
514
514
|
const shouldShowLabel = hasValue;
|
|
515
515
|
const showChips = this.multiple && hasValue;
|
|
516
|
-
return (h(Host, { key: '
|
|
516
|
+
return (h(Host, { key: 'bcb5531eeb0c12cfebb0aacf01837004d95ab651' }, h("div", { key: '0df56d60126a321bc3e5070ecbacd29ef0653cea', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '9e0dcdb5134b85b38ec41c2c83a70e8f4aea9429', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: '1c4a3499ef403cfff96ffd391255a3c1c175a80b', "aria-hidden": "true" }, " *")), h("div", { key: 'fe9f97ec6c476525e98efb9c2a0838697d7f2193', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: 'e769fcba8c5e31289f333dc53dcbc3a7bdce44e7' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'b5e0cd9a9ad4506f058508f6ee9957debe9e1bd2', "aria-hidden": "true" }, " *")), h("span", { key: 'e07c1ba4a99b1b72144a17bff940e08f2d93db2f', "aria-hidden": "true" }, h("svg", { key: 'eaa136b668baacb7bb6a4ad2e46a0f694a5b54b9', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '70744054f8ec445361551899ad637b54ace6322f', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '330d09ff1d7160c1f7471b208acb8005e7ea60c7', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: '88e327fdb04ae5ca89ba2a4254f9807a8a051051', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '3988124d6358464ba531d498f2e486117fe4c3ad', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: 'ffd36af1cf02a807262ff7b7df6fe4be0cb82ed9', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: '52d7f19bb6c7618d1ad7cd24c3c73487484d4542', id: this.errorId, role: "alert" }, this.errorMessage))));
|
|
517
517
|
}
|
|
518
518
|
static get formAssociated() { return true; }
|
|
519
519
|
static get watchers() { return {
|
|
@@ -65,7 +65,7 @@ const LmvzSnackbar = class {
|
|
|
65
65
|
this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
|
|
66
66
|
};
|
|
67
67
|
render() {
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '153859f89cb76e7119db0315208b7382ebe2ad9e', class: this.animationClass }, h("lmvz-icon", { key: 'f6a59adba28f3d0d0e50717f1d1010d7c5b391fa', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'f0b60bd0787add320b3086841ea9c5b542c05f04', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: 'acb89693f29db072e98401fdb2007e149aeba044', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
|
|
69
69
|
}
|
|
70
70
|
static get watchers() { return {
|
|
71
71
|
"status": [{
|
|
@@ -10,7 +10,7 @@ const LmvzSpinner = class {
|
|
|
10
10
|
ariaLabel;
|
|
11
11
|
render() {
|
|
12
12
|
const hasLabel = !!this.ariaLabel?.trim();
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '53d1363cc2ec0219468d7a04e7f2cfc952a85fd6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '2401cb663473e2bbce0491718ad71c2600154cd0', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: '61cbad421651f8dc7f684745a75b3249f251c8a6', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
LmvzSpinner.style = lmvzSpinnerCss();
|
package/esm/lmvz-tab.entry.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, H as Host } from './index-DVab4vzV.js';
|
|
2
2
|
|
|
3
|
-
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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :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;
|
|
3
|
+
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); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :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; } ::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; } `;
|
|
4
4
|
|
|
5
5
|
const LmvzTab = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -11,7 +11,7 @@ const LmvzTab = class {
|
|
|
11
11
|
value;
|
|
12
12
|
disabled = false;
|
|
13
13
|
selected = false;
|
|
14
|
-
|
|
14
|
+
panel;
|
|
15
15
|
handleMediaSlotChange = () => {
|
|
16
16
|
this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
|
|
17
17
|
};
|
|
@@ -20,7 +20,7 @@ const LmvzTab = class {
|
|
|
20
20
|
this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: 'ff3fc4218e3da14cb2caaa3bbe8cb73be8ac0c3d' }, h("button", { key: '999ad84e8d27e787ba0f6ba1146b461b9e7b6ca9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '876a7431706f385f1ed7f542182f92dd386bc6f5', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'a0b0a0f22344678a2a6ee82dd997f24036f22ba5', class: "label" }, h("slot", { key: 'df4d11555f351a759ef69ba907d8d1b00d95a826' })), h("span", { key: '70830219e6dfa656a5ded8332f9171ad389c4ef8', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
|
|
24
24
|
}
|
|
25
25
|
static get delegatesFocus() { return true; }
|
|
26
26
|
};
|