@lmvz-ds/components 0.25.0 → 0.26.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.
Files changed (106) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/cjs/{ds.constants-DSnxZ3ia.js → ds.constants-8fh6ItAF.js} +1 -1
  3. package/cjs/index.cjs.js +196 -2
  4. package/cjs/lmvz-button-group.cjs.entry.js +183 -0
  5. package/cjs/lmvz-button_2.cjs.entry.js +198 -0
  6. package/cjs/lmvz-card.cjs.entry.js +1 -1
  7. package/cjs/lmvz-checkbox.cjs.entry.js +1 -1
  8. package/cjs/lmvz-chip.cjs.entry.js +2 -2
  9. package/cjs/lmvz-components.cjs.js +1 -1
  10. package/cjs/lmvz-menuitem.cjs.entry.js +1 -1
  11. package/cjs/lmvz-modal.cjs.entry.js +1 -1
  12. package/cjs/lmvz-radio.cjs.entry.js +1 -1
  13. package/cjs/lmvz-snackbar.cjs.entry.js +83 -0
  14. package/cjs/lmvz-toggle.cjs.entry.js +2 -2
  15. package/cjs/loader.cjs.js +1 -1
  16. package/collection/api/ds.constants.js +4 -1
  17. package/collection/collection-manifest.json +1 -0
  18. package/collection/components/lmvz-button/lmvz-button.css +6 -6
  19. package/collection/components/lmvz-button-group/lmvz-button-group.css +2 -2
  20. package/collection/components/lmvz-card/lmvz-card.css +9 -9
  21. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +4 -4
  22. package/collection/components/lmvz-chip/lmvz-chip.css +2 -2
  23. package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
  24. package/collection/components/lmvz-menuitem/lmvz-menuitem.css +1 -1
  25. package/collection/components/lmvz-modal/lmvz-modal.css +4 -16
  26. package/collection/components/lmvz-radio/lmvz-radio.css +4 -4
  27. package/collection/components/lmvz-snackbar/lmvz-snackbar.css +101 -0
  28. package/collection/components/lmvz-snackbar/lmvz-snackbar.js +266 -0
  29. package/collection/components/lmvz-snackbar/public.js +1 -0
  30. package/collection/components/lmvz-snackbar/snackbar-controller.js +194 -0
  31. package/collection/components/lmvz-toggle/lmvz-toggle.css +2 -2
  32. package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
  33. package/collection/index.js +1 -0
  34. package/collection/integration/header-integration/header-integration.js +1 -1
  35. package/components/index.d.ts +2 -0
  36. package/components/index.d.ts.bak +2 -0
  37. package/components/index.js +1 -1
  38. package/components/lmvz-action.js +1 -1
  39. package/components/lmvz-button-group.js +1 -1
  40. package/components/lmvz-button.js +1 -1
  41. package/components/lmvz-card.js +1 -1
  42. package/components/lmvz-checkbox.js +1 -1
  43. package/components/lmvz-chip.js +1 -1
  44. package/components/lmvz-header.js +1 -1
  45. package/components/lmvz-icon.js +1 -1
  46. package/components/lmvz-input.js +1 -1
  47. package/components/lmvz-menuitem.js +1 -1
  48. package/components/lmvz-modal.js +1 -1
  49. package/components/lmvz-radio.js +1 -1
  50. package/components/lmvz-select.js +1 -1
  51. package/components/lmvz-snackbar.d.ts +11 -0
  52. package/components/lmvz-snackbar.d.ts.bak +11 -0
  53. package/components/lmvz-snackbar.js +1 -0
  54. package/components/lmvz-toggle.js +1 -1
  55. package/components/{p-CNmHnJ1D.js → p-BOzeYzKk.js} +1 -1
  56. package/components/{p-CCcoDnH-.js → p-DYa3zcGE.js} +1 -1
  57. package/components/{p-DOTK1OW3.js → p-JAKQdFhF.js} +1 -1
  58. package/components/p-WLZ7VWNX.js +1 -0
  59. package/components/{p-DYr7Jc0V.js → p-c7OzBK8f.js} +1 -1
  60. package/components/p-lsUdmjdw.js +1 -0
  61. package/esm/{ds.constants-Bmi89ll1.js → ds.constants-BOOwq5dE.js} +1 -1
  62. package/esm/index.js +198 -1
  63. package/esm/lmvz-button-group.entry.js +181 -0
  64. package/esm/lmvz-button_2.entry.js +195 -0
  65. package/esm/lmvz-card.entry.js +1 -1
  66. package/esm/lmvz-checkbox.entry.js +1 -1
  67. package/esm/lmvz-chip.entry.js +2 -2
  68. package/esm/lmvz-components.js +1 -1
  69. package/esm/lmvz-menuitem.entry.js +1 -1
  70. package/esm/lmvz-modal.entry.js +1 -1
  71. package/esm/lmvz-radio.entry.js +1 -1
  72. package/esm/lmvz-snackbar.entry.js +81 -0
  73. package/esm/lmvz-toggle.entry.js +2 -2
  74. package/esm/loader.js +1 -1
  75. package/hydrate/index.js +106 -10
  76. package/hydrate/index.mjs +106 -10
  77. package/lmvz-components/index.esm.js +1 -1
  78. package/lmvz-components/lmvz-components.esm.js +1 -1
  79. package/lmvz-components/p-01aeca60.entry.js +1 -1
  80. package/lmvz-components/p-0a37e0f2.entry.js +1 -0
  81. package/lmvz-components/p-14c3d837.entry.js +1 -0
  82. package/lmvz-components/{p-3df070b0.entry.js → p-24e63b0a.entry.js} +1 -1
  83. package/lmvz-components/p-25f045b2.entry.js +1 -0
  84. package/lmvz-components/{p-2044a9ac.entry.js → p-3da301a6.entry.js} +1 -1
  85. package/lmvz-components/{p-e23d0054.entry.js → p-40228d48.entry.js} +1 -1
  86. package/lmvz-components/{p-0dced359.entry.js → p-4da9073a.entry.js} +1 -1
  87. package/lmvz-components/p-6de9981f.entry.js +1 -0
  88. package/lmvz-components/{p-c01a6c70.entry.js → p-8dae99f1.entry.js} +1 -1
  89. package/lmvz-components/p-BOOwq5dE.js +1 -0
  90. package/lmvz-components/p-f5cece32.entry.js +1 -0
  91. package/manifest.json +288 -9
  92. package/package.json +5 -1
  93. package/types/api/ds.constants.d.ts +9 -1
  94. package/types/components/lmvz-snackbar/lmvz-snackbar.d.ts +21 -0
  95. package/types/components/lmvz-snackbar/public.d.ts +2 -0
  96. package/types/components/lmvz-snackbar/snackbar-controller.d.ts +32 -0
  97. package/types/components.d.ts +61 -1
  98. package/types/index.d.ts +1 -0
  99. package/cjs/lmvz-button_3.cjs.entry.js +0 -375
  100. package/components/p-Bb-kEOmU.js +0 -1
  101. package/components/p-vUYpZZoR.js +0 -1
  102. package/esm/lmvz-button_3.entry.js +0 -371
  103. package/lmvz-components/p-3c2adbb4.entry.js +0 -1
  104. package/lmvz-components/p-90f5a19d.entry.js +0 -1
  105. package/lmvz-components/p-Bmi89ll1.js +0 -1
  106. package/lmvz-components/p-acfeae08.entry.js +0 -1
@@ -1,371 +0,0 @@
1
- import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
2
- import { c as classNames } from './index-BfTCfPZ1.js';
3
- import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-ZrGf1F2-.js';
4
- import { E as ElementActivationController } from './element-activation-controller-CN0JX9-m.js';
5
- import { i as inheritAriaAttributes, f as findFormByRef, a as canReceiveFocus } from './component-DOTK1OW3.js';
6
- import { a as isPromise, i as isAriaValidationEnabled } from './aria-loader-GfsGHZHY.js';
7
- import { p as parseSvgString } from './svg-B2YoIRuh.js';
8
- import { a as resolveIconSvg } from './icons-CmuFKDRz.js';
9
- import './logger-CGmJG63p.js';
10
-
11
- const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
12
-
13
- const LmvzButton = class extends ReactiveControllerHost {
14
- get el() { return getElement(this); }
15
- validationEl;
16
- inheritedAttributes = {};
17
- formEl = null;
18
- formButtonEl = null;
19
- lmvzActivation;
20
- get ti() {
21
- return 0;
22
- }
23
- scale = 'default';
24
- variant;
25
- disabled = false;
26
- type = 'button';
27
- form;
28
- formMethod;
29
- name;
30
- value;
31
- constructor(hostRef) {
32
- super();
33
- registerInstance(this, hostRef);
34
- this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
35
- this.addController(new AriaValidationController(this));
36
- this.addController(new ElementActivationController(this, {
37
- localHandler: this.handleClick.bind(this),
38
- keys: ['Enter'],
39
- }));
40
- }
41
- connectedCallback() {
42
- this.inheritedAttributes = inheritAriaAttributes(this.el);
43
- super.connectedCallback();
44
- }
45
- disconnectedCallback() {
46
- this.formButtonEl?.remove();
47
- this.formButtonEl = null;
48
- this.formEl = null;
49
- super.disconnectedCallback();
50
- }
51
- renderHiddenButton() {
52
- if (this.type !== 'submit') {
53
- this.formButtonEl?.remove();
54
- this.formButtonEl = null;
55
- this.formEl = null;
56
- return;
57
- }
58
- const formEl = findFormByRef(this.form, this.el);
59
- if (!formEl) {
60
- this.formButtonEl?.remove();
61
- this.formButtonEl = null;
62
- this.formEl = null;
63
- return;
64
- }
65
- this.formEl = formEl;
66
- const formButtonEl = this.formButtonEl ?? document.createElement('button');
67
- formButtonEl.type = 'submit';
68
- formButtonEl.style.display = 'none';
69
- formButtonEl.disabled = this.disabled;
70
- formButtonEl.name = this.name ?? '';
71
- formButtonEl.value = this.value ?? '';
72
- if (this.formMethod) {
73
- formButtonEl.setAttribute('formmethod', this.formMethod);
74
- }
75
- else {
76
- formButtonEl.removeAttribute('formmethod');
77
- }
78
- if (this.formButtonEl !== formButtonEl) {
79
- this.formButtonEl = formButtonEl;
80
- }
81
- if (formButtonEl.parentElement !== formEl) {
82
- formButtonEl.remove();
83
- formEl.appendChild(formButtonEl);
84
- }
85
- }
86
- submitForm(ev) {
87
- if (this.formEl && this.formButtonEl) {
88
- ev.preventDefault();
89
- this.formButtonEl.click();
90
- }
91
- }
92
- handleClick = (ev) => {
93
- if (this.type === 'submit') {
94
- this.submitForm(ev);
95
- }
96
- };
97
- render() {
98
- this.renderHiddenButton();
99
- return (h(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '8d73f979fa227de22a03403a2a3938684911060a', ref: (e) => (this.validationEl = e), part: "button", disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '18e91a2f94ba0d7e5cf13150191003e2f0b2a03a' }))));
100
- }
101
- static get delegatesFocus() { return true; }
102
- };
103
- LmvzButton.style = lmvzButtonCss();
104
-
105
- /**
106
- * Returns a function that delegates to the given predicate/filter and negates its result.
107
- * The returned function preserves the input function's types, arguments and timing.
108
- *
109
- * @param delegate - The predicate/filter function to negate.
110
- * @returns A function that returns the negated result.
111
- */
112
- function negate(delegate) {
113
- return (...args) => {
114
- const result = delegate(...args);
115
- return isPromise(result) ? result.then((res) => !res) : !result;
116
- };
117
- }
118
-
119
- const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
120
-
121
- const LmvzButtonGroup = class {
122
- constructor(hostRef) {
123
- registerInstance(this, hostRef);
124
- }
125
- actionsSlot;
126
- validationMessageCache = [];
127
- actionsStateObserver;
128
- get primaryEnabledAction() {
129
- return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
130
- }
131
- get hasActions() {
132
- return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
133
- }
134
- componentDidLoad() {
135
- this.handleActionsSlotChange();
136
- }
137
- disconnectedCallback() {
138
- this.actionsStateObserver?.disconnect();
139
- }
140
- get assignedElements() {
141
- return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
142
- }
143
- get assignedButtons() {
144
- return this.assignedElements.filter(isActionButton);
145
- }
146
- get visibleButtons() {
147
- return this.assignedButtons.filter(isVisible);
148
- }
149
- get enabledButtons() {
150
- return this.visibleButtons.filter(negate(isDisabledButton));
151
- }
152
- getActionValidationResult() {
153
- if (!this.visibleButtons.length) {
154
- return [];
155
- }
156
- const primaryActions = this.visibleButtons.filter(isPrimaryAction);
157
- const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
158
- const issues = [];
159
- const order = this.visibleButtons.toReversed();
160
- if (primaryActions.length !== 1)
161
- issues.push('LmvzModal actions slot must contain exactly one primary action.');
162
- if (secondaryActions.length > 1)
163
- issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
164
- if (primaryActions.length) {
165
- const primaryAction = primaryActions[0];
166
- const secondaryAction = secondaryActions[0];
167
- if (order.indexOf(primaryAction) !== 0)
168
- issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
169
- if (secondaryAction && order.indexOf(secondaryAction) !== 1)
170
- issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
171
- }
172
- else if (secondaryActions.length) {
173
- const secondaryAction = secondaryActions[0];
174
- if (order.indexOf(secondaryAction) !== 0)
175
- issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
176
- }
177
- return issues;
178
- }
179
- handleActionsSlotChange = () => {
180
- this.observeActionState();
181
- this.syncActionsState();
182
- };
183
- observeActionState() {
184
- if (typeof MutationObserver === 'undefined')
185
- return;
186
- this.actionsStateObserver?.disconnect();
187
- if (!this.assignedButtons.length)
188
- return;
189
- this.actionsStateObserver = new MutationObserver(() => {
190
- this.syncActionsState();
191
- });
192
- this.assignedButtons.forEach((element) => {
193
- this.actionsStateObserver?.observe(element, {
194
- attributes: true,
195
- attributeFilter: ['disabled', 'hidden', 'variant'],
196
- });
197
- });
198
- }
199
- syncActionsState() {
200
- const assignedElements = this.assignedElements;
201
- assignedElements.forEach((element) => {
202
- const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
203
- if (isAllowedAction)
204
- return;
205
- if (!element.hasAttribute('hidden')) {
206
- element.setAttribute('hidden', '');
207
- }
208
- if (element.getAttribute('aria-hidden') !== 'true') {
209
- element.setAttribute('aria-hidden', 'true');
210
- }
211
- });
212
- this.checkActions();
213
- const length = this.visibleButtons.length;
214
- for (let i = 0; i < length; i++) {
215
- const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
216
- const element = this.visibleButtons.at(i);
217
- if (!element)
218
- continue;
219
- if (isLmvzButton(element)) {
220
- if (!element.getAttribute('variant'))
221
- element.setAttribute('variant', variant);
222
- }
223
- else {
224
- element.classList.add(variant);
225
- }
226
- }
227
- this.focusPrimaryAction();
228
- }
229
- focusPrimaryAction() {
230
- const focusTarget = this.primaryEnabledAction;
231
- if (!focusTarget || typeof window === 'undefined')
232
- return;
233
- window.requestAnimationFrame(() => {
234
- if (canReceiveFocus(focusTarget)) {
235
- focusTarget.focus();
236
- }
237
- });
238
- }
239
- checkActions() {
240
- if (!isAriaValidationEnabled())
241
- return;
242
- const issues = this.getActionValidationResult();
243
- if (!issues.length) {
244
- return;
245
- }
246
- issues.forEach((issue) => {
247
- if (this.validationMessageCache.includes(issue))
248
- return;
249
- console.warn(issue);
250
- this.validationMessageCache.push(issue);
251
- });
252
- }
253
- render() {
254
- return (h(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
255
- }
256
- };
257
- function isActionButton(element) {
258
- return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
259
- }
260
- function isLmvzButton(element) {
261
- return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
262
- }
263
- function isDisabledButton(element) {
264
- return element.hasAttribute('disabled') || element.disabled === true;
265
- }
266
- function isVisible(element) {
267
- return !element.hasAttribute('hidden');
268
- }
269
- function getActionVariant(element) {
270
- const variant = element.getAttribute('variant') ?? element.variant;
271
- return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
272
- }
273
- function isPrimaryAction(element) {
274
- return getActionVariant(element) === 'primary';
275
- }
276
- function isSecondaryAction(element) {
277
- return getActionVariant(element) === 'secondary';
278
- }
279
- LmvzButtonGroup.style = lmvzButtonGroupCss();
280
-
281
- const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
282
-
283
- const LmvzIcon = class extends ReactiveControllerHost {
284
- intersectionObserver;
285
- ariaValidationController = new AriaValidationController(this);
286
- get el() { return getElement(this); }
287
- validationEl;
288
- icon;
289
- weight = 'medium';
290
- size = 'md';
291
- iconset;
292
- iconData;
293
- visible = false;
294
- ariaLabel;
295
- get ariaHidden() {
296
- return !this.ariaLabel;
297
- }
298
- constructor(hostRef) {
299
- super();
300
- registerInstance(this, hostRef);
301
- this.addController(this.ariaValidationController);
302
- }
303
- connectedCallback() {
304
- this.waitUntilVisible(() => {
305
- this.visible = true;
306
- this.loadIconPathData();
307
- });
308
- super.connectedCallback();
309
- }
310
- disconnectedCallback() {
311
- if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
312
- this.intersectionObserver.disconnect();
313
- }
314
- this.intersectionObserver = undefined;
315
- super.disconnectedCallback();
316
- }
317
- async loadIconPathData() {
318
- const { icon, iconset, visible } = this;
319
- if (!icon || !visible) {
320
- return;
321
- }
322
- const maybeIcon = parseSvgString(icon);
323
- if (maybeIcon) {
324
- this.iconData = maybeIcon;
325
- return;
326
- }
327
- this.iconData = await resolveIconSvg({
328
- icon,
329
- iconset,
330
- });
331
- }
332
- componentDidRender() {
333
- this.validationEl = this.el.querySelector('svg');
334
- this.ariaValidationController.revalidateAria();
335
- super.componentDidRender();
336
- }
337
- render() {
338
- return h(Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
339
- }
340
- waitUntilVisible(callback, rootMargin = 50) {
341
- if (typeof window === 'undefined' || !window.IntersectionObserver) {
342
- callback();
343
- return;
344
- }
345
- this.intersectionObserver = new IntersectionObserver((entries) => {
346
- entries.some((entry) => {
347
- if (entry.isIntersecting) {
348
- if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
349
- this.intersectionObserver.disconnect();
350
- }
351
- this.intersectionObserver = undefined;
352
- callback();
353
- return true;
354
- }
355
- return false;
356
- });
357
- }, { rootMargin: `${rootMargin}px` });
358
- this.intersectionObserver.observe(this.el);
359
- }
360
- static get watchers() { return {
361
- "icon": [{
362
- "loadIconPathData": 0
363
- }],
364
- "iconset": [{
365
- "loadIconPathData": 0
366
- }]
367
- }; }
368
- };
369
- LmvzIcon.style = lmvzIconCss();
370
-
371
- export { LmvzButton as lmvz_button, LmvzButtonGroup as lmvz_button_group, LmvzIcon as lmvz_icon };
@@ -1 +0,0 @@
1
- import{g as t,r as o,c as e,h as n,H as i}from"./p-CKYszC64.js";import{c as r}from"./p-BfTCfPZ1.js";import{R as a,A as s}from"./p-CwX1wKkM.js";import{E as l}from"./p-CN0JX9-m.js";import{i as m,f as c,a as d}from"./p-DOTK1OW3.js";import{a as v,i as u}from"./p-CdDO7mQa.js";import{p as h}from"./p-CcxjkCOx.js";import{a as b}from"./p-CFsC37ww.js";import"./p-CGmJG63p.js";const p=class extends a{get el(){return t(this)}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant;disabled=!1;type="button";form;formMethod;name;value;constructor(t){super(),o(this,t),this.lmvzActivation=e(this,"lmvzActivation",7),this.addController(new s(this)),this.addController(new l(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=m(this.el),super.connectedCallback()}disconnectedCallback(){this.formButtonEl?.remove(),this.formButtonEl=null,this.formEl=null,super.disconnectedCallback()}renderHiddenButton(){if("submit"!==this.type)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);const t=c(this.form,this.el);if(!t)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);this.formEl=t;const o=this.formButtonEl??document.createElement("button");o.type="submit",o.style.display="none",o.disabled=this.disabled,o.name=this.name??"",o.value=this.value??"",this.formMethod?o.setAttribute("formmethod",this.formMethod):o.removeAttribute("formmethod"),this.formButtonEl!==o&&(this.formButtonEl=o),o.parentElement!==t&&(o.remove(),t.appendChild(o))}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),n(i,{key:"8196de85afc3878c6f38e582d7c031f5d19bcd36","aria-disabled":this.disabled?"true":null},n("button",{key:"8d73f979fa227de22a03403a2a3938684911060a",ref:t=>this.validationEl=t,part:"button",disabled:this.disabled,type:this.type,class:r(this.variant??"secondary",{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},n("slot",{key:"18e91a2f94ba0d7e5cf13150191003e2f0b2a03a"})))}static get delegatesFocus(){return!0}};p.style=" @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; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } ";const z=class{constructor(t){o(this,t)}actionsSlot;validationMessageCache=[];actionsStateObserver;get primaryEnabledAction(){return this.enabledButtons.find(R)??this.enabledButtons[0]}get hasActions(){return this.assignedButtons.some((t=>w(t)&&f(t)&&!y(t)))}componentDidLoad(){this.handleActionsSlotChange()}disconnectedCallback(){this.actionsStateObserver?.disconnect()}get assignedElements(){return this.actionsSlot?.assignedElements({flatten:!0})??[]}get assignedButtons(){return this.assignedElements.filter(f)}get visibleButtons(){return this.assignedButtons.filter(w)}get enabledButtons(){return this.visibleButtons.filter((t=y,(...o)=>{const e=t(...o);return v(e)?e.then((t=>!t)):!e}));var t}getActionValidationResult(){if(!this.visibleButtons.length)return[];const t=this.visibleButtons.filter(R),o=this.visibleButtons.filter(C),e=[],n=this.visibleButtons.toReversed();if(1!==t.length&&e.push("LmvzModal actions slot must contain exactly one primary action."),o.length>1&&e.push(`LmvzModal actions slot must contain at most one secondary action (received ${o.length})`),t.length){const i=o[0];0!==n.indexOf(t[0])&&e.push("Primary action must be the last focusable element in the actions slot (i.e. rightmost button)."),i&&1!==n.indexOf(i)&&e.push("Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).")}else o.length&&0!==n.indexOf(o[0])&&e.push("Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).");return e}handleActionsSlotChange=()=>{this.observeActionState(),this.syncActionsState()};observeActionState(){"undefined"!=typeof MutationObserver&&(this.actionsStateObserver?.disconnect(),this.assignedButtons.length&&(this.actionsStateObserver=new MutationObserver((()=>{this.syncActionsState()})),this.assignedButtons.forEach((t=>{this.actionsStateObserver?.observe(t,{attributes:!0,attributeFilter:["disabled","hidden","variant"]})}))))}syncActionsState(){this.assignedElements.forEach((t=>{["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())||(t.hasAttribute("hidden")||t.setAttribute("hidden",""),"true"!==t.getAttribute("aria-hidden")&&t.setAttribute("aria-hidden","true"))})),this.checkActions();const t=this.visibleButtons.length;for(let o=0;o<t;o++){const e=o===t-1?"primary":o===t-2?"secondary":"tertiary",n=this.visibleButtons.at(o);n&&(g(n)?n.getAttribute("variant")||n.setAttribute("variant",e):n.classList.add(e))}this.focusPrimaryAction()}focusPrimaryAction(){const t=this.primaryEnabledAction;t&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{d(t)&&t.focus()}))}checkActions(){if(!u())return;const t=this.getActionValidationResult();t.length&&t.forEach((t=>{this.validationMessageCache.includes(t)||(console.warn(t),this.validationMessageCache.push(t))}))}render(){return n(i,{key:"56b60821ecaa2301d13e78d621e873aa74cd170e"},n("slot",{key:"e6a1422950fa5b0026356b7788a607a690116186",ref:t=>this.actionsSlot=t,onSlotchange:this.handleActionsSlotChange}))}};function f(t){return["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())}function g(t){return"LMVZ-BUTTON"===t?.tagName.toUpperCase()}function y(t){return t.hasAttribute("disabled")||!0===t.disabled}function w(t){return!t.hasAttribute("hidden")}function k(t){const o=t.getAttribute("variant")??t.variant;return"primary"===o||"secondary"===o||"tertiary"===o?o:"secondary"}function R(t){return"primary"===k(t)}function C(t){return"secondary"===k(t)}z.style=":host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}";const x=class extends a{intersectionObserver;ariaValidationController=new s(this);get el(){return t(this)}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(t){super(),o(this,t),this.addController(this.ariaValidationController)}connectedCallback(){this.waitUntilVisible((()=>{this.visible=!0,this.loadIconPathData()})),super.connectedCallback()}disconnectedCallback(){this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,super.disconnectedCallback()}async loadIconPathData(){const{icon:t,iconset:o,visible:e}=this;if(!t||!e)return;const n=h(t);this.iconData=n||await b({icon:t,iconset:o})}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return n(i,{key:"03b4391d02a77409257bcda51c2b65ad9a9e0a0c",role:"img","aria-hidden":`${this.ariaHidden}`,innerHTML:this.iconData})}waitUntilVisible(t,o=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((o=>{o.some((o=>!!o.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,t(),!0)))}),{rootMargin:`${o}px`}),this.intersectionObserver.observe(this.el)):t()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}};x.style=".sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}";export{p as lmvz_button,z as lmvz_button_group,x as lmvz_icon}
@@ -1 +0,0 @@
1
- import{g as e,r as t,c as o,h as r,H as l}from"./p-CKYszC64.js";import{R as a,A as s}from"./p-CwX1wKkM.js";import{c as i}from"./p-DOTK1OW3.js";import"./p-CdDO7mQa.js";let c=0;const n=class extends a{get el(){return e(this)}get validationEl(){return this.el}internals;nativeInputElement;toggleId="lmvz-toggle-"+c++;lmvzChange;label;checked=!1;disabled=!1;required=!1;name;value="on";form;constructor(e){super(),t(this,e),this.lmvzChange=o(this,"lmvzChange",7),e.$hostElement$["s-ei"]?this.internals=e.$hostElement$["s-ei"]:(this.internals=e.$hostElement$.attachInternals(),e.$hostElement$["s-ei"]=this.internals),this.addController(new s(this))}formAssociatedCallback(e){this.internals.setFormValue?.(this.checked?this.value:null)}formResetCallback(){this.checked=!1}formStateRestoreCallback(e){this.checked=e===this.value,this.internals.setFormValue?.(this.checked?this.value:null)}handleCheckedChange(e){this.internals.setFormValue?.(e?this.value:null)}handleDisabledChange(e){e&&this.nativeInputElement&&this.nativeInputElement.blur()}async focusToggle(){this.nativeInputElement?.focus()}async blurToggle(){this.nativeInputElement?.blur()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((e=>i(this.el,e))),Promise.resolve(this.nativeInputElement)}handleChange=e=>{const t=e.target.checked;this.checked=t,this.lmvzChange.emit(t)};render(){return r(l,{key:"4bb633301740c3e69a836615e2266242980ac17a"},r("span",{key:"cc7188d8e2caff2968ad6c64c72565a71c89ec74",class:"track"},r("input",{key:"867f7865711b9224b89f0f491df8a19589342729",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:e=>this.nativeInputElement=e,onChange:this.handleChange}),r("span",{key:"426ee9f042afcc3d74b2137d2edbe95573b3c136",class:"thumb","aria-hidden":"true"})),r("label",{key:"600cb22f2915d86edafa9ac57b77707055f6ae16",htmlFor:this.toggleId},this.label))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}],disabled:[{handleDisabledChange:0}]}}};n.style="@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.75rem, 0.69rem + 0.26vw, 1rem)); 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.4 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }.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}}";export{n as lmvz_toggle}
@@ -1 +0,0 @@
1
- const s=["xs","sm","md","lg"],a=[...s,"xl"],e=["text","email","password","tel","url","search","number"],l=[...s,"inherit"],r=["thin","medium","bold","filled"],t=["active","warning","success","error","neutral"],i=["default","small"];export{t as a,r as b,i as c,e as d,l as i,a as t}
@@ -1 +0,0 @@
1
- import{a as t,r as e,c as r,h as o,H as a}from"./p-CKYszC64.js";const n=class{constructor(t){e(this,t),this.primaryAction=r(this,"primaryAction",7)}cardTitle;imageUrl;description;primaryActionLabel="";primaryAction;get fallbackImage(){return((e,r)=>{const o=function(...t){return t.filter(Boolean).join("/").replace("//","/").replace("/./","/")}("../../assets",r,e);try{return t(o)}catch{return console.warn(`Failed to create URL for asset "${e}" in path "${r}".\n Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`),new URL(o,import.meta?.url??window?.location?.origin??"")}})("card-placeholder.svg")}_onPrimaryClick(){this.primaryAction.emit()}_onOverflowClick(t){console.log(t)}render(){return o(a,{key:"2d9ecdeed986f142fb7ff477b56dece59549bbc7",role:"article"},o("div",{key:"34fc9c3a1338b31ce73424e8c07c79a291ead85c",class:"top"},o("div",{key:"1756e6b26d7f42499753c36ed0fc13755fe32bfe",class:"image-wrapper",style:{backgroundImage:`url(${this.imageUrl??this.fallbackImage})`}},o("div",{key:"cd8be8acc9e949092b6363024316d12d445a9fbc",class:"chip-slot"},o("slot",{key:"26389ab3b7031b948ff1701857e6028446662cf5",name:"chip"})))),o("div",{key:"2fa61cd7bef437f15929ae39be7fa294e8778321",class:"bottom"},o("header",{key:"b237ca025e42a29f528f827dc3c83b3b0f9267c0"},o("h2",{key:"ffd0a509ba97acb75d4c15d0fd01eef08689a2a7",class:"title"},this.cardTitle)),o("p",{key:"c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1",class:"description"},this.description),o("div",{key:"7663f93b41ef1e798b464bd6ad75ca8a53c0667b",class:"actions"},o("button",{key:"3348e6700aa1571183558ab8fe4f73393c1cc943",class:"primary",onClick:this._onPrimaryClick.bind(this),"data-testid":"primary"},this.primaryActionLabel),o("button",{key:"d3a12cdabbdd68c3b04e06984db44abd3bbd22ea",class:"tertiary","aria-label":"More actions",onClick:this._onOverflowClick},o("span",{key:"80e31e6b691e18d1b42a2b4831349c3abf8e02b0",class:"icon-placeholder"},"...")))))}static get assetsDirs(){return["../../assets"]}};n.style="@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; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 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.4 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2 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.4 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; }";export{n as lmvz_card}