@lmvz-ds/components 0.36.0 → 0.36.1
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 +8 -0
- package/cjs/aria.constants-DPK5mQEL.js +65 -0
- package/cjs/{stencil.util-TjS8_DoU.js → async.util-Dnl6c82X.js} +1 -13
- package/cjs/{directional-focus-controller-3uDoin45.js → directional-focus-controller-8Xd_7MHT.js} +1 -1
- package/cjs/{element-activation-controller-BWtUKzu2.js → element-activation-controller-DzTUocEO.js} +1 -1
- package/cjs/{element.util-CctmBvUY.js → element.util-BlhcwmfR.js} +2 -62
- package/cjs/lmvz-action-list.cjs.entry.js +3 -2
- package/cjs/lmvz-button-group.cjs.entry.js +2 -1
- package/cjs/lmvz-button_2.cjs.entry.js +3 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +38 -4
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-datepicker.cjs.entry.js +10 -3
- package/cjs/lmvz-header_2.cjs.entry.js +4 -3
- package/cjs/lmvz-input.cjs.entry.js +242 -0
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
- package/cjs/lmvz-modal.cjs.entry.js +2 -1
- package/cjs/{lmvz-input_2.cjs.entry.js → lmvz-popover.cjs.entry.js} +24 -228
- package/cjs/lmvz-radio.cjs.entry.js +61 -3
- package/cjs/lmvz-select.cjs.entry.js +423 -16
- 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 +1 -1
- package/cjs/lmvz-tabs.cjs.entry.js +4 -3
- package/cjs/lmvz-toggle.cjs.entry.js +7 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/stencil.util-CBrPLd-F.js +17 -0
- package/collection/components/lmvz-checkbox/lmvz-checkbox.css +4 -2
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +68 -8
- package/collection/components/lmvz-datepicker/lmvz-datepicker.css +0 -5
- package/collection/components/lmvz-datepicker/lmvz-datepicker.js +17 -3
- package/collection/components/lmvz-input/lmvz-input.css +1 -1
- package/collection/components/lmvz-input/lmvz-input.js +47 -12
- package/collection/components/lmvz-popover/lmvz-popover.css +1 -1
- package/collection/components/lmvz-popover/lmvz-popover.js +45 -5
- package/collection/components/lmvz-radio/lmvz-radio.js +77 -9
- package/collection/components/lmvz-select/lmvz-select.css +96 -34
- package/collection/components/lmvz-select/lmvz-select.js +412 -21
- 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.js +1 -1
- package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.js +21 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/collection/styles/fragments/_focus-within.css +2 -2
- package/collection/utils/aria/listbox-controller.js +154 -0
- package/collection/utils/radio/radio-group-controller.js +17 -0
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-datepicker.js +1 -1
- package/components/lmvz-input.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-BApwCp0R.js +1 -0
- package/components/p-C5gRiLRR.js +1 -0
- package/esm/aria.constants-DIyiticz.js +62 -0
- package/esm/{stencil.util-C3QOYC8E.js → async.util-DZj20TV1.js} +1 -13
- package/esm/{directional-focus-controller-Bhu7RqYE.js → directional-focus-controller-QukTTWBE.js} +1 -1
- package/esm/{element-activation-controller-BuwyVq4A.js → element-activation-controller-dxJZKMag.js} +1 -1
- package/esm/{element.util-Bd9JyKJZ.js → element.util-3ydVsxUW.js} +2 -61
- package/esm/lmvz-action-list.entry.js +3 -2
- package/esm/lmvz-button-group.entry.js +2 -1
- package/esm/lmvz-button_2.entry.js +3 -2
- package/esm/lmvz-checkbox.entry.js +38 -4
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-datepicker.entry.js +10 -3
- package/esm/lmvz-header_2.entry.js +4 -3
- package/esm/lmvz-input.entry.js +240 -0
- package/esm/lmvz-menuitem.entry.js +3 -2
- package/esm/lmvz-modal.entry.js +2 -1
- package/esm/{lmvz-input_2.entry.js → lmvz-popover.entry.js} +23 -226
- package/esm/lmvz-radio.entry.js +61 -3
- package/esm/lmvz-select.entry.js +423 -16
- package/esm/lmvz-snackbar.entry.js +1 -1
- package/esm/lmvz-spinner.entry.js +1 -1
- package/esm/lmvz-tab.entry.js +1 -1
- package/esm/lmvz-tabs.entry.js +4 -3
- package/esm/lmvz-toggle.entry.js +7 -3
- package/esm/loader.js +1 -1
- package/esm/stencil.util-D2-5rsN3.js +15 -0
- package/hydrate/index.js +625 -68
- package/hydrate/index.mjs +625 -68
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/{p-544e3ccb.entry.js → p-0f65d001.entry.js} +1 -1
- package/lmvz-components/p-137b1fe1.entry.js +1 -0
- package/lmvz-components/p-26dd9684.entry.js +1 -0
- package/lmvz-components/p-36f44108.entry.js +1 -0
- package/lmvz-components/p-398b5cf4.entry.js +1 -0
- package/lmvz-components/p-3a396fc8.entry.js +1 -0
- package/lmvz-components/p-40716828.entry.js +1 -0
- package/lmvz-components/p-70f1e31a.entry.js +1 -0
- package/lmvz-components/p-71d06d1d.entry.js +1 -0
- package/lmvz-components/{p-d280d21a.entry.js → p-88661c50.entry.js} +1 -1
- package/lmvz-components/p-91eb71bb.entry.js +1 -0
- package/lmvz-components/p-BA3wizqg.js +1 -0
- package/lmvz-components/{p-GGkwaiT6.js → p-CHxiS3ja.js} +1 -1
- package/lmvz-components/{p-UhNgD4L3.js → p-CPSyM_e-.js} +1 -1
- package/lmvz-components/p-DIyiticz.js +1 -0
- package/lmvz-components/p-DZj20TV1.js +1 -0
- package/lmvz-components/p-a680a7b2.entry.js +1 -0
- package/lmvz-components/{p-d48203f9.entry.js → p-a6fe9b61.entry.js} +1 -1
- package/lmvz-components/{p-dbfbcb74.entry.js → p-a99acb02.entry.js} +1 -1
- package/lmvz-components/p-bh9cItsP.js +1 -0
- package/lmvz-components/p-f16a19fc.entry.js +1 -0
- package/lmvz-components/p-f3f0ed49.entry.js +1 -0
- package/lmvz-components/p-f516a949.entry.js +1 -0
- package/manifest.json +366 -30
- package/package.json +1 -1
- package/types/api/ds.types.d.ts +1 -0
- package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +9 -1
- package/types/components/lmvz-datepicker/lmvz-datepicker.d.ts +2 -0
- package/types/components/lmvz-input/lmvz-input.d.ts +3 -0
- package/types/components/lmvz-popover/lmvz-popover.d.ts +2 -0
- package/types/components/lmvz-radio/lmvz-radio.d.ts +12 -2
- package/types/components/lmvz-select/lmvz-select.d.ts +53 -4
- package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -0
- package/types/components.d.ts +96 -12
- package/types/utils/aria/listbox-controller.d.ts +42 -0
- package/types/utils/radio/radio-group-controller.d.ts +3 -0
- package/components/p-CPuI0_r_.js +0 -1
- package/components/p-CWpl0WaZ.js +0 -1
- package/lmvz-components/p-63f6a596.entry.js +0 -1
- package/lmvz-components/p-8022c6dc.entry.js +0 -1
- package/lmvz-components/p-Bd9JyKJZ.js +0 -1
- package/lmvz-components/p-C3QOYC8E.js +0 -1
- package/lmvz-components/p-a611c110.entry.js +0 -1
- package/lmvz-components/p-b1bb4393.entry.js +0 -1
- package/lmvz-components/p-b50b1cb5.entry.js +0 -1
- package/lmvz-components/p-b932cf91.entry.js +0 -1
- package/lmvz-components/p-bff115d4.entry.js +0 -1
- package/lmvz-components/p-d9aede81.entry.js +0 -1
- package/lmvz-components/p-f0e28f3a.entry.js +0 -1
- package/lmvz-components/p-f853faae.entry.js +0 -1
- package/lmvz-components/p-fa2efc42.entry.js +0 -1
- package/lmvz-components/p-fe6f5bdc.entry.js +0 -1
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BgvZ4y-3.js');
|
|
4
|
+
var index$1 = require('./index-Bp6Dd2i1.js');
|
|
5
|
+
var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
|
|
6
|
+
var aria_constants = require('./aria.constants-DPK5mQEL.js');
|
|
7
|
+
var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
|
|
8
|
+
var stencil_util = require('./stencil.util-CBrPLd-F.js');
|
|
9
|
+
require('./aria-loader-DWUVcapD.js');
|
|
10
|
+
require('./async.util-Dnl6c82X.js');
|
|
11
|
+
|
|
12
|
+
const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .sc-lmvz-input-h:has(:focus-visible) .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
|
|
13
|
+
|
|
14
|
+
let inputIdCounter = 0;
|
|
15
|
+
const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
16
|
+
get el() { return index.getElement(this); }
|
|
17
|
+
get validationEl() {
|
|
18
|
+
return this.el;
|
|
19
|
+
}
|
|
20
|
+
lmvzInput;
|
|
21
|
+
internals;
|
|
22
|
+
inputValidityActive = false;
|
|
23
|
+
nativeInputElement;
|
|
24
|
+
inputId = `lmvz-input-${inputIdCounter++}`;
|
|
25
|
+
initialValue = '';
|
|
26
|
+
ariaHostMirrorObserver;
|
|
27
|
+
nativeError = false;
|
|
28
|
+
errorFromProp = false;
|
|
29
|
+
get helperId() {
|
|
30
|
+
return this.helperText ? `${this.inputId}-helper` : undefined;
|
|
31
|
+
}
|
|
32
|
+
get showErrorMessage() {
|
|
33
|
+
return this.error && Boolean(this.errorMessage);
|
|
34
|
+
}
|
|
35
|
+
get errorId() {
|
|
36
|
+
return `${this.inputId}-error`;
|
|
37
|
+
}
|
|
38
|
+
get describedBy() {
|
|
39
|
+
const ids = [];
|
|
40
|
+
if (this.helperId)
|
|
41
|
+
ids.push(this.helperId);
|
|
42
|
+
if (this.showErrorMessage)
|
|
43
|
+
ids.push(this.errorId);
|
|
44
|
+
return ids.length > 0 ? ids.join(' ') : undefined;
|
|
45
|
+
}
|
|
46
|
+
value;
|
|
47
|
+
label;
|
|
48
|
+
helperText;
|
|
49
|
+
placeholder;
|
|
50
|
+
disabled = false;
|
|
51
|
+
readonly = false;
|
|
52
|
+
required = false;
|
|
53
|
+
name;
|
|
54
|
+
type = 'text';
|
|
55
|
+
errorMessage;
|
|
56
|
+
autocomplete;
|
|
57
|
+
inputmode;
|
|
58
|
+
autocorrect;
|
|
59
|
+
autocapitalize;
|
|
60
|
+
spellcheck;
|
|
61
|
+
autofocus = false;
|
|
62
|
+
minlength;
|
|
63
|
+
maxlength;
|
|
64
|
+
pattern;
|
|
65
|
+
min;
|
|
66
|
+
max;
|
|
67
|
+
step;
|
|
68
|
+
form;
|
|
69
|
+
size = 'md';
|
|
70
|
+
get error() {
|
|
71
|
+
return this.errorFromProp || this.nativeError;
|
|
72
|
+
}
|
|
73
|
+
set error(value) {
|
|
74
|
+
this.errorFromProp = value;
|
|
75
|
+
}
|
|
76
|
+
async setValue(newValue) {
|
|
77
|
+
const input = this.nativeInputElement;
|
|
78
|
+
const val = newValue ?? '';
|
|
79
|
+
if (input && input.value !== val) {
|
|
80
|
+
input.value = val;
|
|
81
|
+
}
|
|
82
|
+
this.value = val;
|
|
83
|
+
this.internals.setFormValue?.(val);
|
|
84
|
+
this.lmvzInput.emit(val);
|
|
85
|
+
}
|
|
86
|
+
async focusInput() {
|
|
87
|
+
this.nativeInputElement?.focus();
|
|
88
|
+
}
|
|
89
|
+
async blurInput() {
|
|
90
|
+
this.nativeInputElement?.blur();
|
|
91
|
+
}
|
|
92
|
+
async select() {
|
|
93
|
+
this.nativeInputElement?.select();
|
|
94
|
+
}
|
|
95
|
+
async checkValidity() {
|
|
96
|
+
return this.nativeInputElement?.checkValidity?.() ?? false;
|
|
97
|
+
}
|
|
98
|
+
async reportValidity() {
|
|
99
|
+
return this.nativeInputElement?.reportValidity?.() ?? false;
|
|
100
|
+
}
|
|
101
|
+
async getValidationMessage() {
|
|
102
|
+
return this.nativeInputElement?.validationMessage ?? '';
|
|
103
|
+
}
|
|
104
|
+
async getInputElement() {
|
|
105
|
+
if (!this.nativeInputElement) {
|
|
106
|
+
await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
|
|
107
|
+
}
|
|
108
|
+
return Promise.resolve(this.nativeInputElement);
|
|
109
|
+
}
|
|
110
|
+
constructor(hostRef) {
|
|
111
|
+
super();
|
|
112
|
+
index.registerInstance(this, hostRef);
|
|
113
|
+
this.lmvzInput = index.createEvent(this, "lmvzInput", 7);
|
|
114
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
115
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
116
|
+
}
|
|
117
|
+
else {
|
|
118
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
119
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
120
|
+
}
|
|
121
|
+
this.addController(new ariaValidationController.AriaValidationController(this, {
|
|
122
|
+
reValidateOnPropChanges: true,
|
|
123
|
+
}));
|
|
124
|
+
}
|
|
125
|
+
componentWillLoad() {
|
|
126
|
+
this.initialValue = this.value ?? '';
|
|
127
|
+
super.componentWillLoad();
|
|
128
|
+
}
|
|
129
|
+
connectedCallback() {
|
|
130
|
+
super.connectedCallback();
|
|
131
|
+
this.ariaHostMirrorObserver = new MutationObserver((mutations) => {
|
|
132
|
+
for (const mutation of mutations) {
|
|
133
|
+
this.mirrorHostAriaAttribute(mutation.attributeName);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
this.ariaHostMirrorObserver.observe(this.el, {
|
|
137
|
+
attributes: true,
|
|
138
|
+
attributeFilter: [...aria_constants.ariaHostMirrorAttributes],
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
disconnectedCallback() {
|
|
142
|
+
super.disconnectedCallback();
|
|
143
|
+
this.ariaHostMirrorObserver?.disconnect();
|
|
144
|
+
this.ariaHostMirrorObserver = undefined;
|
|
145
|
+
}
|
|
146
|
+
componentDidLoad() {
|
|
147
|
+
super.componentDidLoad();
|
|
148
|
+
for (const attr of aria_constants.ariaHostMirrorAttributes) {
|
|
149
|
+
this.mirrorHostAriaAttribute(attr);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
mirrorHostAriaAttribute(attr) {
|
|
153
|
+
if (!attr || !this.nativeInputElement)
|
|
154
|
+
return;
|
|
155
|
+
if (this.el.hasAttribute(attr)) {
|
|
156
|
+
const value = this.el.getAttribute(attr);
|
|
157
|
+
if (value !== null) {
|
|
158
|
+
this.nativeInputElement.setAttribute(attr, value);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
this.nativeInputElement.removeAttribute(attr);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
formAssociatedCallback(form) {
|
|
166
|
+
if (!form)
|
|
167
|
+
return;
|
|
168
|
+
this.internals.setFormValue?.(this.value ?? '');
|
|
169
|
+
}
|
|
170
|
+
formResetCallback() {
|
|
171
|
+
this.inputValidityActive = false;
|
|
172
|
+
this.internals.setValidity({});
|
|
173
|
+
this.setValue(this.initialValue);
|
|
174
|
+
if (this.nativeInputElement?.checkValidity?.()) {
|
|
175
|
+
this.nativeError = false;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
formStateRestoreCallback(state) {
|
|
179
|
+
this.setValue(state);
|
|
180
|
+
}
|
|
181
|
+
handleValueChange(newValue) {
|
|
182
|
+
if (!this.nativeInputElement)
|
|
183
|
+
return;
|
|
184
|
+
const isInternalChange = this.nativeInputElement.value === newValue;
|
|
185
|
+
if (isInternalChange)
|
|
186
|
+
return;
|
|
187
|
+
this.setValue(newValue);
|
|
188
|
+
}
|
|
189
|
+
handleDisabledChange(disabled) {
|
|
190
|
+
if (!this.nativeInputElement)
|
|
191
|
+
return;
|
|
192
|
+
if (disabled) {
|
|
193
|
+
this.nativeInputElement.blur();
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
this.inputValidityActive = false;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
handleInput = (event) => {
|
|
200
|
+
const input = event.target;
|
|
201
|
+
this.setValue(input.value);
|
|
202
|
+
if (!this.inputValidityActive)
|
|
203
|
+
return;
|
|
204
|
+
this.updateNativeError('input');
|
|
205
|
+
};
|
|
206
|
+
handleChange = (event) => {
|
|
207
|
+
};
|
|
208
|
+
handleFocus = () => { };
|
|
209
|
+
handleInvalid = () => this.updateNativeError('invalid');
|
|
210
|
+
handleBlur = () => {
|
|
211
|
+
this.inputValidityActive = true;
|
|
212
|
+
this.updateNativeError('blur');
|
|
213
|
+
};
|
|
214
|
+
updateNativeError(sourceEvent) {
|
|
215
|
+
const input = this.nativeInputElement;
|
|
216
|
+
if (!input)
|
|
217
|
+
return;
|
|
218
|
+
const newState = sourceEvent === 'invalid' ? true : !(input.checkValidity?.() ?? true);
|
|
219
|
+
if (this.nativeError === newState)
|
|
220
|
+
return;
|
|
221
|
+
this.nativeError = newState;
|
|
222
|
+
}
|
|
223
|
+
render() {
|
|
224
|
+
const hasValue = Boolean(this.value);
|
|
225
|
+
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
226
|
+
return (index.h("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: index$1.classNames('input-container', {
|
|
227
|
+
'interaction-filled': hasValue,
|
|
228
|
+
}) }, index.h("div", { key: '25ec1f448b689ff80defded1323f321d95d6b197', class: "input-wrapper" }, index.h("slot", { key: '1d5f301e0327b4cd1714f403615f94658a754466', name: "before-input" }), index.h("div", { key: 'ef553e6e8f6b74a5bb7cddef003d3b51650c7c9d', class: "label-input-group" }, index.h("label", { key: '17d92ff7c65598739e8a379680580561936e21dc', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: 'cd40da3c85cc6cea49d7d8d270bba317534779f5', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: '3ede0644d383c2a3f702230de2aac6fbcb2c7a06', 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, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), index.h("slot", { key: 'b282c5d9553b72af7fd05ed0f872af0d7b8a5689', name: "after-input" })), index.h("div", { key: 'da6008e798cb5ee29fa7d1ba3208057c1845a217', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '5e7717a2d0dd32c53dd7ba6e170152239f3bfae9', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
229
|
+
}
|
|
230
|
+
static get formAssociated() { return true; }
|
|
231
|
+
static get watchers() { return {
|
|
232
|
+
"value": [{
|
|
233
|
+
"handleValueChange": 0
|
|
234
|
+
}],
|
|
235
|
+
"disabled": [{
|
|
236
|
+
"handleDisabledChange": 0
|
|
237
|
+
}]
|
|
238
|
+
}; }
|
|
239
|
+
};
|
|
240
|
+
LmvzInput.style = lmvzInputCss();
|
|
241
|
+
|
|
242
|
+
exports.lmvz_input = LmvzInput;
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BgvZ4y-3.js');
|
|
4
4
|
var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
|
|
5
|
-
var elementActivationController = require('./element-activation-controller-
|
|
5
|
+
var elementActivationController = require('./element-activation-controller-DzTUocEO.js');
|
|
6
6
|
var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
|
|
7
7
|
require('./aria-loader-DWUVcapD.js');
|
|
8
|
-
require('./element.util-
|
|
8
|
+
require('./element.util-BlhcwmfR.js');
|
|
9
|
+
require('./aria.constants-DPK5mQEL.js');
|
|
9
10
|
|
|
10
11
|
const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
|
|
11
12
|
|
|
@@ -4,10 +4,11 @@ var index = require('./index-BgvZ4y-3.js');
|
|
|
4
4
|
var closeSm = require('./close-sm-CATLoxxd.js');
|
|
5
5
|
var svg = require('./svg-CysxzZw7.js');
|
|
6
6
|
var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
|
|
7
|
-
var element_util = require('./element.util-
|
|
7
|
+
var element_util = require('./element.util-BlhcwmfR.js');
|
|
8
8
|
var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
|
|
9
9
|
require('./logger-NBdKPSou.js');
|
|
10
10
|
require('./aria-loader-DWUVcapD.js');
|
|
11
|
+
require('./aria.constants-DPK5mQEL.js');
|
|
11
12
|
|
|
12
13
|
const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
|
|
13
14
|
|
|
@@ -1,226 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BgvZ4y-3.js');
|
|
4
|
-
var index$1 = require('./index-Bp6Dd2i1.js');
|
|
5
|
-
var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
|
|
6
|
-
var element_util = require('./element.util-CctmBvUY.js');
|
|
7
|
-
var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
|
|
8
|
-
var stencil_util = require('./stencil.util-TjS8_DoU.js');
|
|
9
4
|
var ariaLoader = require('./aria-loader-DWUVcapD.js');
|
|
10
|
-
var directionalFocusController = require('./directional-focus-controller-
|
|
11
|
-
var elementActivationController = require('./element-activation-controller-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
|
|
17
|
-
get el() { return index.getElement(this); }
|
|
18
|
-
get validationEl() {
|
|
19
|
-
return this.el;
|
|
20
|
-
}
|
|
21
|
-
lmvzInput;
|
|
22
|
-
internals;
|
|
23
|
-
nativeInputElement;
|
|
24
|
-
inputId = `lmvz-input-${inputIdCounter++}`;
|
|
25
|
-
initialValue = '';
|
|
26
|
-
ariaHostMirrorObserver;
|
|
27
|
-
nativeError = false;
|
|
28
|
-
errorFromProp = false;
|
|
29
|
-
get helperId() {
|
|
30
|
-
return this.helperText ? `${this.inputId}-helper` : undefined;
|
|
31
|
-
}
|
|
32
|
-
get showErrorMessage() {
|
|
33
|
-
return this.error && Boolean(this.errorMessage);
|
|
34
|
-
}
|
|
35
|
-
get errorId() {
|
|
36
|
-
return `${this.inputId}-error`;
|
|
37
|
-
}
|
|
38
|
-
get describedBy() {
|
|
39
|
-
const ids = [];
|
|
40
|
-
if (this.helperId)
|
|
41
|
-
ids.push(this.helperId);
|
|
42
|
-
if (this.showErrorMessage)
|
|
43
|
-
ids.push(this.errorId);
|
|
44
|
-
return ids.length > 0 ? ids.join(' ') : undefined;
|
|
45
|
-
}
|
|
46
|
-
value;
|
|
47
|
-
label;
|
|
48
|
-
helperText;
|
|
49
|
-
placeholder;
|
|
50
|
-
disabled = false;
|
|
51
|
-
readonly = false;
|
|
52
|
-
required = false;
|
|
53
|
-
name;
|
|
54
|
-
type = 'text';
|
|
55
|
-
errorMessage;
|
|
56
|
-
autocomplete;
|
|
57
|
-
inputmode;
|
|
58
|
-
autocorrect;
|
|
59
|
-
autocapitalize;
|
|
60
|
-
spellcheck;
|
|
61
|
-
autofocus = false;
|
|
62
|
-
minlength;
|
|
63
|
-
maxlength;
|
|
64
|
-
pattern;
|
|
65
|
-
min;
|
|
66
|
-
max;
|
|
67
|
-
step;
|
|
68
|
-
form;
|
|
69
|
-
size = 'md';
|
|
70
|
-
get error() {
|
|
71
|
-
return this.errorFromProp || this.nativeError;
|
|
72
|
-
}
|
|
73
|
-
set error(value) {
|
|
74
|
-
this.errorFromProp = value;
|
|
75
|
-
}
|
|
76
|
-
async setValue(newValue) {
|
|
77
|
-
const input = this.nativeInputElement;
|
|
78
|
-
const val = newValue ?? '';
|
|
79
|
-
if (input) {
|
|
80
|
-
input.value = val;
|
|
81
|
-
}
|
|
82
|
-
this.value = val;
|
|
83
|
-
this.internals.setFormValue?.(val);
|
|
84
|
-
this.lmvzInput.emit(val);
|
|
85
|
-
}
|
|
86
|
-
async focusInput() {
|
|
87
|
-
this.nativeInputElement?.focus();
|
|
88
|
-
}
|
|
89
|
-
async blurInput() {
|
|
90
|
-
this.nativeInputElement?.blur();
|
|
91
|
-
}
|
|
92
|
-
async select() {
|
|
93
|
-
this.nativeInputElement?.select();
|
|
94
|
-
}
|
|
95
|
-
async checkValidity() {
|
|
96
|
-
return this.nativeInputElement?.checkValidity?.() ?? false;
|
|
97
|
-
}
|
|
98
|
-
async reportValidity() {
|
|
99
|
-
return this.nativeInputElement?.reportValidity?.() ?? false;
|
|
100
|
-
}
|
|
101
|
-
async getInputElement() {
|
|
102
|
-
if (!this.nativeInputElement) {
|
|
103
|
-
await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
|
|
104
|
-
}
|
|
105
|
-
return Promise.resolve(this.nativeInputElement);
|
|
106
|
-
}
|
|
107
|
-
constructor(hostRef) {
|
|
108
|
-
super();
|
|
109
|
-
index.registerInstance(this, hostRef);
|
|
110
|
-
this.lmvzInput = index.createEvent(this, "lmvzInput", 7);
|
|
111
|
-
if (hostRef.$hostElement$["s-ei"]) {
|
|
112
|
-
this.internals = hostRef.$hostElement$["s-ei"];
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
this.internals = hostRef.$hostElement$.attachInternals();
|
|
116
|
-
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
117
|
-
}
|
|
118
|
-
this.addController(new ariaValidationController.AriaValidationController(this, {
|
|
119
|
-
reValidateOnPropChanges: true,
|
|
120
|
-
}));
|
|
121
|
-
}
|
|
122
|
-
componentWillLoad() {
|
|
123
|
-
this.initialValue = this.value ?? '';
|
|
124
|
-
super.componentWillLoad();
|
|
125
|
-
}
|
|
126
|
-
connectedCallback() {
|
|
127
|
-
super.connectedCallback();
|
|
128
|
-
this.ariaHostMirrorObserver = new MutationObserver((mutations) => {
|
|
129
|
-
for (const mutation of mutations) {
|
|
130
|
-
this.mirrorHostAriaAttribute(mutation.attributeName);
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
this.ariaHostMirrorObserver.observe(this.el, {
|
|
134
|
-
attributes: true,
|
|
135
|
-
attributeFilter: [...element_util.ariaHostMirrorAttributes],
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
disconnectedCallback() {
|
|
139
|
-
super.disconnectedCallback();
|
|
140
|
-
this.ariaHostMirrorObserver?.disconnect();
|
|
141
|
-
this.ariaHostMirrorObserver = undefined;
|
|
142
|
-
}
|
|
143
|
-
componentDidLoad() {
|
|
144
|
-
super.componentDidLoad();
|
|
145
|
-
for (const attr of element_util.ariaHostMirrorAttributes) {
|
|
146
|
-
this.mirrorHostAriaAttribute(attr);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
mirrorHostAriaAttribute(attr) {
|
|
150
|
-
if (!attr || !this.nativeInputElement)
|
|
151
|
-
return;
|
|
152
|
-
if (this.el.hasAttribute(attr)) {
|
|
153
|
-
const value = this.el.getAttribute(attr);
|
|
154
|
-
if (value !== null) {
|
|
155
|
-
this.nativeInputElement.setAttribute(attr, value);
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
else {
|
|
159
|
-
this.nativeInputElement.removeAttribute(attr);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
formAssociatedCallback(form) {
|
|
163
|
-
if (!form)
|
|
164
|
-
return;
|
|
165
|
-
this.internals.setFormValue?.(this.value ?? '');
|
|
166
|
-
}
|
|
167
|
-
formResetCallback() {
|
|
168
|
-
this.internals.setValidity({});
|
|
169
|
-
this.setValue(this.initialValue);
|
|
170
|
-
}
|
|
171
|
-
formStateRestoreCallback(state) {
|
|
172
|
-
this.setValue(state);
|
|
173
|
-
}
|
|
174
|
-
handleValueChange(newValue) {
|
|
175
|
-
if (!this.nativeInputElement)
|
|
176
|
-
return;
|
|
177
|
-
const isInternalChange = this.nativeInputElement.value === newValue;
|
|
178
|
-
if (isInternalChange)
|
|
179
|
-
return;
|
|
180
|
-
this.setValue(newValue);
|
|
181
|
-
}
|
|
182
|
-
handleDisabledChange(disabled) {
|
|
183
|
-
if (disabled && this.nativeInputElement) {
|
|
184
|
-
this.nativeInputElement.blur();
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
handleInput = (event) => {
|
|
188
|
-
const input = event.target;
|
|
189
|
-
this.setValue(input.value);
|
|
190
|
-
};
|
|
191
|
-
handleChange = (event) => {
|
|
192
|
-
const input = event.target ?? this.nativeInputElement;
|
|
193
|
-
this.updateNativeError(input);
|
|
194
|
-
};
|
|
195
|
-
handleFocus = () => { };
|
|
196
|
-
handleBlur = (event) => {
|
|
197
|
-
const input = event.target;
|
|
198
|
-
input.checkValidity?.();
|
|
199
|
-
};
|
|
200
|
-
updateNativeError(fromEvent) {
|
|
201
|
-
const input = fromEvent ?? this.nativeInputElement;
|
|
202
|
-
if (!input)
|
|
203
|
-
return;
|
|
204
|
-
this.nativeError = !(input.checkValidity?.() ?? true);
|
|
205
|
-
}
|
|
206
|
-
render() {
|
|
207
|
-
const hasValue = Boolean(this.value);
|
|
208
|
-
const shouldFloatLabel = hasValue || Boolean(this.placeholder);
|
|
209
|
-
return (index.h("div", { key: 'b7e432c7dbc598189d85040252455c5163fe6395', class: index$1.classNames('input-container', {
|
|
210
|
-
'interaction-filled': hasValue,
|
|
211
|
-
}) }, index.h("div", { key: 'a912a49f4372423d06c7a4856fb5101cb0afd0c5', class: "input-wrapper" }, index.h("slot", { key: '88e4ee4518de0bfeef9e30a254e0d2ec6693048c', name: "before-input" }), index.h("div", { key: 'a413a7b7e8f6510f1c09fd0052889c8fad1653f1', class: "label-input-group" }, index.h("label", { key: '9639713adff74afcf4fb1eab0e74b7447d02b986', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: '28c1069908a2f1905008f1decce9077e9ef1538a', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: '421fd9bb50de8ba189a59578373060593e1a9aab', 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, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("slot", { key: '09557e1d84bb4ab2456caf391a177c8f80063ab9', name: "after-input" })), index.h("div", { key: '34162f744f8584991e4493ebcdb6a2f75a1f8990', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: 'a3c3bffbb439f9127278cedbfefa5e1986e68f23', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
|
|
212
|
-
}
|
|
213
|
-
static get formAssociated() { return true; }
|
|
214
|
-
static get watchers() { return {
|
|
215
|
-
"value": [{
|
|
216
|
-
"handleValueChange": 0
|
|
217
|
-
}],
|
|
218
|
-
"disabled": [{
|
|
219
|
-
"handleDisabledChange": 0
|
|
220
|
-
}]
|
|
221
|
-
}; }
|
|
222
|
-
};
|
|
223
|
-
LmvzInput.style = lmvzInputCss();
|
|
5
|
+
var directionalFocusController = require('./directional-focus-controller-8Xd_7MHT.js');
|
|
6
|
+
var elementActivationController = require('./element-activation-controller-DzTUocEO.js');
|
|
7
|
+
var async_util = require('./async.util-Dnl6c82X.js');
|
|
8
|
+
var element_util = require('./element.util-BlhcwmfR.js');
|
|
9
|
+
require('./reactive-controller-host-Bc6B_T45.js');
|
|
10
|
+
require('./aria.constants-DPK5mQEL.js');
|
|
224
11
|
|
|
225
12
|
/**
|
|
226
13
|
* Custom positioning reference element.
|
|
@@ -1579,7 +1366,7 @@ const computePosition = (reference, floating, options) => {
|
|
|
1579
1366
|
});
|
|
1580
1367
|
};
|
|
1581
1368
|
|
|
1582
|
-
const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index,
|
|
1369
|
+
const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 100);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
|
|
1583
1370
|
|
|
1584
1371
|
const LmvzPopover = class {
|
|
1585
1372
|
constructor(hostRef) {
|
|
@@ -1600,6 +1387,7 @@ const LmvzPopover = class {
|
|
|
1600
1387
|
placement = 'bottom-start';
|
|
1601
1388
|
size = 'sm';
|
|
1602
1389
|
autoFocus = true;
|
|
1390
|
+
containerRole = 'dialog';
|
|
1603
1391
|
label;
|
|
1604
1392
|
lmvzOpen;
|
|
1605
1393
|
lmvzClose;
|
|
@@ -1620,6 +1408,7 @@ const LmvzPopover = class {
|
|
|
1620
1408
|
}
|
|
1621
1409
|
componentDidLoad() {
|
|
1622
1410
|
autoAssignId(this.el);
|
|
1411
|
+
this.syncContainerId();
|
|
1623
1412
|
}
|
|
1624
1413
|
handleOpenChange(isOpen) {
|
|
1625
1414
|
if (isOpen) {
|
|
@@ -1635,7 +1424,7 @@ const LmvzPopover = class {
|
|
|
1635
1424
|
this.anchor = undefined;
|
|
1636
1425
|
return;
|
|
1637
1426
|
}
|
|
1638
|
-
await
|
|
1427
|
+
await async_util.wait();
|
|
1639
1428
|
this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
|
|
1640
1429
|
this.setupAnchorEl();
|
|
1641
1430
|
if (!this.open)
|
|
@@ -1646,16 +1435,23 @@ const LmvzPopover = class {
|
|
|
1646
1435
|
this.removeCloseHandlers();
|
|
1647
1436
|
this.extEventController.abort();
|
|
1648
1437
|
}
|
|
1438
|
+
syncContainerId() {
|
|
1439
|
+
const hostId = this.el.getAttribute('id');
|
|
1440
|
+
if (!hostId || !this.containerEl)
|
|
1441
|
+
return;
|
|
1442
|
+
this.containerEl.id = hostId;
|
|
1443
|
+
}
|
|
1649
1444
|
setupAnchorEl() {
|
|
1650
1445
|
const { anchorEl } = this;
|
|
1651
1446
|
if (!anchorEl) {
|
|
1652
1447
|
console.warn('no anchor element set for', this);
|
|
1653
1448
|
return;
|
|
1654
1449
|
}
|
|
1450
|
+
this.syncContainerId();
|
|
1655
1451
|
if (!anchorEl.hasAttribute('aria-haspopup')) {
|
|
1656
|
-
anchorEl.setAttribute('aria-haspopup', 'dialog');
|
|
1452
|
+
anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
|
|
1657
1453
|
}
|
|
1658
|
-
anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
|
|
1454
|
+
anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
|
|
1659
1455
|
if (!anchorEl.hasAttribute('aria-expanded')) {
|
|
1660
1456
|
anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
|
|
1661
1457
|
}
|
|
@@ -1680,13 +1476,14 @@ const LmvzPopover = class {
|
|
|
1680
1476
|
async onOpen() {
|
|
1681
1477
|
this.previouslyFocusedElement = element_util.getDeepActiveElement(document);
|
|
1682
1478
|
this.setupCloseHandlers();
|
|
1683
|
-
await
|
|
1479
|
+
await async_util.waitFrame();
|
|
1684
1480
|
await this.updatePosition();
|
|
1685
1481
|
autoAssignId(this.el);
|
|
1482
|
+
this.syncContainerId();
|
|
1686
1483
|
this.applyAnchorAriaOpen();
|
|
1687
1484
|
this.lmvzOpen.emit();
|
|
1688
|
-
await
|
|
1689
|
-
if (this.autoFocus) {
|
|
1485
|
+
await async_util.waitFrame();
|
|
1486
|
+
if (this.autoFocus && this.containerRole === 'dialog') {
|
|
1690
1487
|
this.focusFirst();
|
|
1691
1488
|
}
|
|
1692
1489
|
}
|
|
@@ -1761,7 +1558,7 @@ const LmvzPopover = class {
|
|
|
1761
1558
|
this.closureController?.abort();
|
|
1762
1559
|
}
|
|
1763
1560
|
render() {
|
|
1764
|
-
return (index.h(index.Host, { key: '
|
|
1561
|
+
return (index.h(index.Host, { key: '8dadcc766deebc03ea744fd1002078b382bfd48d' }, index.h("div", { key: 'd332714964212db6f5446afb1b8f38ff031a87b9', role: this.containerRole, part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '0fa1d214c8c48942751cbd4759ebc992eacc8f72', ref: (el) => (this.slotEl = el) }))));
|
|
1765
1562
|
}
|
|
1766
1563
|
static get watchers() { return {
|
|
1767
1564
|
"open": [{
|
|
@@ -1805,5 +1602,4 @@ function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
|
|
|
1805
1602
|
}
|
|
1806
1603
|
LmvzPopover.style = lmvzPopoverCss();
|
|
1807
1604
|
|
|
1808
|
-
exports.lmvz_input = LmvzInput;
|
|
1809
1605
|
exports.lmvz_popover = LmvzPopover;
|