@everymatrix/general-input-hsl 0.1.1 → 0.2.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/dist/cjs/checkbox-group-input_13.cjs.entry.js +68 -65
- package/dist/cjs/general-input-hsl-5a47aa01.js +6222 -0
- package/dist/cjs/general-input-hsl.cjs.js +2 -2
- package/dist/cjs/{index-6f821b8d.js → index-160616a9.js} +2 -2
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/checkbox-group-input/checkbox-group-input.js +7 -7
- package/dist/collection/components/checkbox-input/checkbox-input.js +6 -6
- package/dist/collection/components/date-input/date-input.js +13 -10
- package/dist/collection/components/email-input/email-input.js +7 -7
- package/dist/collection/components/number-input/number-input.js +7 -7
- package/dist/collection/components/password-input/password-input.js +7 -7
- package/dist/collection/components/radio-input/radio-input.js +7 -7
- package/dist/collection/components/select-input/select-input.js +7 -7
- package/dist/collection/components/tel-input/tel-input.js +7 -7
- package/dist/collection/components/text-input/text-input.js +7 -7
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +8 -8
- package/dist/collection/components/twofa-input/twofa-input.js +7 -7
- package/dist/esm/checkbox-group-input_13.entry.js +69 -66
- package/dist/esm/general-input-hsl-233ec4e4.js +6219 -0
- package/dist/esm/general-input-hsl.js +3 -3
- package/dist/esm/{index-8598bfb7.js → index-b001401f.js} +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/general-input-hsl/checkbox-group-input_13.entry.js +1 -1
- package/dist/general-input-hsl/{general-input-hsl-ae353e99.js → general-input-hsl-233ec4e4.js} +447 -2376
- package/dist/general-input-hsl/general-input-hsl.esm.js +1 -1
- package/dist/general-input-hsl/{index-8598bfb7.js → index-b001401f.js} +1 -1
- package/dist/general-input-hsl/index.esm.js +1 -1
- package/dist/types/components/date-input/date-input.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/general-input-hsl-7394449f.js +0 -8129
- package/dist/esm/general-input-hsl-ae353e99.js +0 -8126
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/packages/stencil/general-input-hsl/stencil.config.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/packages/stencil/general-input-hsl/stencil.config.dev.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/packages/stencil/general-input-hsl/storybook/main.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/packages/stencil/general-input-hsl/storybook/preview.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -71,10 +71,10 @@ export class TextInput {
|
|
|
71
71
|
this.sendInputValue.emit(inputValueEvent);
|
|
72
72
|
}
|
|
73
73
|
handleClickOutside(event) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
74
|
+
const path = event.composedPath();
|
|
75
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
77
76
|
this.showTooltip = false;
|
|
77
|
+
}
|
|
78
78
|
}
|
|
79
79
|
valueChangedHandler(event) {
|
|
80
80
|
if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
|
|
@@ -171,8 +171,8 @@ export class TextInput {
|
|
|
171
171
|
if (this.touched) {
|
|
172
172
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
173
173
|
}
|
|
174
|
-
return h("div", { key: '
|
|
175
|
-
h("img", { key: '
|
|
174
|
+
return h("div", { key: 'e5ae8017daa88ef2b666a784f2b30e2f2a736fc4', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '41ddd764251f2bf502f0f6caf4eed187b08fb1d3', class: 'text__wrapper--flex' }, h("label", { key: 'ff35fc23927fa4128850cdf75c8153240d3024f3', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '73bb7863949deff8e64ceea96986321915c1cf55', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
175
|
+
h("img", { key: '681b57905c4fbae22e9222cba6aea7d8286457f9', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '0aa7fe654b98b3c95fa424439e712f510298b136', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '867ca0228b8f157313f4ff4ef7a498d8e4a1f95a', class: 'text__error-message' }, this.errorMessage));
|
|
176
176
|
}
|
|
177
177
|
static get is() { return "text-input"; }
|
|
178
178
|
static get encapsulation() { return "shadow"; }
|
|
@@ -469,8 +469,8 @@ export class TextInput {
|
|
|
469
469
|
return [{
|
|
470
470
|
"name": "click",
|
|
471
471
|
"method": "handleClickOutside",
|
|
472
|
-
"target": "
|
|
473
|
-
"capture":
|
|
472
|
+
"target": "window",
|
|
473
|
+
"capture": true,
|
|
474
474
|
"passive": false
|
|
475
475
|
}, {
|
|
476
476
|
"name": "sendInputValue",
|
|
@@ -42,10 +42,10 @@ export class ToggleCheckboxInput {
|
|
|
42
42
|
this.sendInputValue.emit(inputValueEvent);
|
|
43
43
|
}
|
|
44
44
|
handleClickOutside(event) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
45
|
+
const path = event.composedPath();
|
|
46
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
48
47
|
this.showTooltip = false;
|
|
48
|
+
}
|
|
49
49
|
}
|
|
50
50
|
componentDidRender() {
|
|
51
51
|
// start custom styling area
|
|
@@ -93,9 +93,9 @@ export class ToggleCheckboxInput {
|
|
|
93
93
|
return null;
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return h("div", { key: '
|
|
97
|
-
h("img", { key: '
|
|
98
|
-
return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
96
|
+
return h("div", { key: '4485a8990d61184c791d3ab76ee721b31c6744fb', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'bc8ab489666786e86e5a199e36de85eac42c3105', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: 'fcd0a52f1e965e9b8e26c2bd78dd0e8b92930c31', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: '38f73ada9487e54330a1bb9a8e93dd9fb637d45b', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'ccf7ecb6751ff67686900fab62be3d57ddc0ce74', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
97
|
+
h("img", { key: '5dd9eab63473daac23656e39f462cecb47283e4b', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: 'ae9e8535ed12ffe07a324874bd7e3d5c201045aa', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
98
|
+
return h("general-input-hsl", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
99
99
|
})));
|
|
100
100
|
}
|
|
101
101
|
static get is() { return "toggle-checkbox-input"; }
|
|
@@ -358,8 +358,8 @@ export class ToggleCheckboxInput {
|
|
|
358
358
|
return [{
|
|
359
359
|
"name": "click",
|
|
360
360
|
"method": "handleClickOutside",
|
|
361
|
-
"target": "
|
|
362
|
-
"capture":
|
|
361
|
+
"target": "window",
|
|
362
|
+
"capture": true,
|
|
363
363
|
"passive": false
|
|
364
364
|
}];
|
|
365
365
|
}
|
|
@@ -109,10 +109,10 @@ export class TwofaInput {
|
|
|
109
109
|
this.sendInputValue.emit(inputValueEvent);
|
|
110
110
|
}
|
|
111
111
|
handleClickOutside(event) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
112
|
+
const path = event.composedPath();
|
|
113
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
115
114
|
this.showTooltip = false;
|
|
115
|
+
}
|
|
116
116
|
}
|
|
117
117
|
connectedCallback() {
|
|
118
118
|
this.validationPattern = this.setPattern();
|
|
@@ -195,9 +195,9 @@ export class TwofaInput {
|
|
|
195
195
|
return null;
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
|
-
return (h("div", { key: '
|
|
198
|
+
return (h("div", { key: '5764336a8995a1ec0e7ff432ce85c8a317e3f01c', class: "twofa" }, h("div", { key: '8ea47ba6bb5f552afcde936f1de8c544f89e12a7', class: 'twofa__error-message' }, h("p", { key: '6930908b1f5df7030d96a442779203747aa938b2' }, this.errorMessage)), h("div", { key: '56f116fa0ac4883d1b225b7165b2d5271a661d9d', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'b2ecadecbc8802c5b4dd09d81dc77e66f2108990', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
199
199
|
return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
200
|
-
})), h("div", { key: '
|
|
200
|
+
})), h("div", { key: '76635a96eb73d77a3259f26d7d74f738e705acf1', class: "twofa__button-wrapper" }, h("p", { key: '66b15896c126c4c7e8d3ba6d22829992df4cfde9', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '7e81ec829cfeb48e911d7b88aa9ec7d6f1cbf4e2', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
201
201
|
? translate('twofaResendButton', this.language)
|
|
202
202
|
: this.formatTime()))));
|
|
203
203
|
}
|
|
@@ -487,8 +487,8 @@ export class TwofaInput {
|
|
|
487
487
|
return [{
|
|
488
488
|
"name": "click",
|
|
489
489
|
"method": "handleClickOutside",
|
|
490
|
-
"target": "
|
|
491
|
-
"capture":
|
|
490
|
+
"target": "window",
|
|
491
|
+
"capture": true,
|
|
492
492
|
"passive": false
|
|
493
493
|
}];
|
|
494
494
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-
|
|
2
|
-
import { t as translate } from './general-input-hsl-
|
|
3
|
-
export { G as general_input_hsl } from './general-input-hsl-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b001401f.js';
|
|
2
|
+
import { t as translate } from './general-input-hsl-233ec4e4.js';
|
|
3
|
+
export { G as general_input_hsl } from './general-input-hsl-233ec4e4.js';
|
|
4
4
|
|
|
5
5
|
const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
|
|
6
6
|
|
|
@@ -64,10 +64,10 @@ const CheckboxGroupInput = class {
|
|
|
64
64
|
this.sendInputValue.emit(inputValueEvent);
|
|
65
65
|
}
|
|
66
66
|
handleClickOutside(event) {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
67
|
+
const path = event.composedPath();
|
|
68
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
70
69
|
this.showTooltip = false;
|
|
70
|
+
}
|
|
71
71
|
}
|
|
72
72
|
componentDidRender() {
|
|
73
73
|
// start custom styling area
|
|
@@ -115,8 +115,8 @@ const CheckboxGroupInput = class {
|
|
|
115
115
|
return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
116
116
|
}
|
|
117
117
|
render() {
|
|
118
|
-
return h("div", { key: '
|
|
119
|
-
h("img", { key: '
|
|
118
|
+
return h("div", { key: '9985f4050655bc2233090f63abb0e22f2fe0b556', class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9922e45ae7ee74b137ffc8552b3d714b7e3b1f59', class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { key: 'f18bae7c3ee6df76edcde75924eb1ad51a227443', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
|
|
119
|
+
h("img", { key: '3dc2ce07e4d5f8de7ed4707b5e140fb4752ca86b', class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { key: 'd55f25f75aa20007ff58cf45b6632517f49b6c00', class: 'checkboxgroup__error-message' }, this.errorMessage), this.showCheckboxes && (h("vaadin-checkbox-group", { key: '210c3cc2868a07a403494e04336c4f3091eea0e4', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
|
|
120
120
|
this.selectedValues = event.detail.value;
|
|
121
121
|
} }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName })))));
|
|
122
122
|
}
|
|
@@ -180,10 +180,10 @@ const CheckboxInput = class {
|
|
|
180
180
|
this.sendInputValue.emit(inputValueEvent);
|
|
181
181
|
}
|
|
182
182
|
handleClickOutside(event) {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
183
|
+
const path = event.composedPath();
|
|
184
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
186
185
|
this.showTooltip = false;
|
|
186
|
+
}
|
|
187
187
|
}
|
|
188
188
|
componentDidRender() {
|
|
189
189
|
// start custom styling area
|
|
@@ -225,7 +225,7 @@ const CheckboxInput = class {
|
|
|
225
225
|
return null;
|
|
226
226
|
}
|
|
227
227
|
render() {
|
|
228
|
-
return (h("div", { key: '
|
|
228
|
+
return (h("div", { key: '6d4c24ff269eb9378cdbb8fbeae034018d86b42e', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, h("vaadin-checkbox", { key: '9ac77865bf2de32e4d880cd2707976acb8d820dd', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (h("img", { key: '86e2ed5404864abb1704e8748bed15ea7071797a', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
229
229
|
}
|
|
230
230
|
static get watchers() { return {
|
|
231
231
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5619,6 +5619,7 @@ const DateInput = class {
|
|
|
5619
5619
|
const date = parse(inputValue, this.dateFormat, new Date());
|
|
5620
5620
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5621
5621
|
};
|
|
5622
|
+
this.valueToDate = (stringDateValue) => parse(stringDateValue || '', 'yyyy-MM-dd', new Date());
|
|
5622
5623
|
this.setClientStyling = () => {
|
|
5623
5624
|
let sheet = document.createElement('style');
|
|
5624
5625
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5669,15 +5670,15 @@ const DateInput = class {
|
|
|
5669
5670
|
this.sendInputValue.emit(inputValueEvent);
|
|
5670
5671
|
}
|
|
5671
5672
|
handleClickOutside(event) {
|
|
5672
|
-
|
|
5673
|
-
|
|
5674
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
5673
|
+
const path = event.composedPath();
|
|
5674
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
5675
5675
|
this.showTooltip = false;
|
|
5676
|
+
}
|
|
5676
5677
|
}
|
|
5677
5678
|
connectedCallback() {
|
|
5678
5679
|
var _a, _b;
|
|
5679
|
-
this.minDate =
|
|
5680
|
-
this.maxDate =
|
|
5680
|
+
this.minDate = this.valueToDate((_a = this.validation.min) === null || _a === void 0 ? void 0 : _a.toString());
|
|
5681
|
+
this.maxDate = this.valueToDate((_b = this.validation.max) === null || _b === void 0 ? void 0 : _b.toString());
|
|
5681
5682
|
}
|
|
5682
5683
|
componentDidRender() {
|
|
5683
5684
|
// start custom styling area
|
|
@@ -5712,6 +5713,8 @@ const DateInput = class {
|
|
|
5712
5713
|
this.isValid = this.setValidity();
|
|
5713
5714
|
if (this.defaultValue) {
|
|
5714
5715
|
this.value = this.defaultValue;
|
|
5716
|
+
this.valueAsDate = this.valueToDate(this.value);
|
|
5717
|
+
this.isValid = this.setValidity();
|
|
5715
5718
|
this.valueHandler({ name: this.name, value: this.value });
|
|
5716
5719
|
}
|
|
5717
5720
|
}
|
|
@@ -5723,7 +5726,7 @@ const DateInput = class {
|
|
|
5723
5726
|
handleInput(event) {
|
|
5724
5727
|
this.value = event.target.value;
|
|
5725
5728
|
this.touched = true;
|
|
5726
|
-
this.valueAsDate =
|
|
5729
|
+
this.valueAsDate = this.valueToDate(this.value);
|
|
5727
5730
|
this.isValid = this.setValidity();
|
|
5728
5731
|
this.errorMessage = this.setErrorMessage();
|
|
5729
5732
|
this.emitValueHandler(true);
|
|
@@ -5761,8 +5764,8 @@ const DateInput = class {
|
|
|
5761
5764
|
if (this.touched) {
|
|
5762
5765
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5763
5766
|
}
|
|
5764
|
-
return h("div", { key: '
|
|
5765
|
-
h("img", { key: '
|
|
5767
|
+
return h("div", { key: 'f2a2e6f7adf273e07934af51763f900f9051e5b1', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: '70b360618031d48816fedf22d55119af01514de1', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: 'c463d260a39cde5ccb98dde604d74cdb8ebde287', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), h("small", { key: 'cb7fb9acafcedfa80321f5f1d16b705ad00d8bdd', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5768
|
+
h("img", { key: '535e3a1875cd328c3dd5627672afdc4fd32b078c', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5766
5769
|
}
|
|
5767
5770
|
get element() { return getElement(this); }
|
|
5768
5771
|
static get watchers() { return {
|
|
@@ -5843,10 +5846,10 @@ const EmailInput = class {
|
|
|
5843
5846
|
this.sendInputValue.emit(inputValueEvent);
|
|
5844
5847
|
}
|
|
5845
5848
|
handleClickOutside(event) {
|
|
5846
|
-
|
|
5847
|
-
|
|
5848
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
5849
|
+
const path = event.composedPath();
|
|
5850
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
5849
5851
|
this.showTooltip = false;
|
|
5852
|
+
}
|
|
5850
5853
|
}
|
|
5851
5854
|
valueChangedHandler(event) {
|
|
5852
5855
|
if (this.isDuplicateInput) {
|
|
@@ -5913,8 +5916,8 @@ const EmailInput = class {
|
|
|
5913
5916
|
if (this.touched) {
|
|
5914
5917
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5915
5918
|
}
|
|
5916
|
-
return h("div", { key: '
|
|
5917
|
-
h("img", { key: '
|
|
5919
|
+
return h("div", { key: '45255f597fcc76fa5e99601d7c2dd59afca32dbe', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '7e41609760d4cc0b5acb554749fce42e6bc88ef3', class: 'email__wrapper--flex' }, h("label", { key: '250a1656d714e8cbc943d153aa216a6322322534', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '80db5747730aaac2c1d0efa3129dfa5463fe779c', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
5920
|
+
h("img", { key: 'f10990c70bb3de310d137fa120575ad3582adbd3', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '9cf1a9fc4fdc3cb2604c6ad21573091cc1b173aa', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '1610834f1705f70bd1f2d4b0a6c37af3307cf77f', class: 'email__error-message' }, this.errorMessage));
|
|
5918
5921
|
}
|
|
5919
5922
|
static get watchers() { return {
|
|
5920
5923
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5993,10 +5996,10 @@ const NumberInput = class {
|
|
|
5993
5996
|
this.sendInputValue.emit(inputValueEvent);
|
|
5994
5997
|
}
|
|
5995
5998
|
handleClickOutside(event) {
|
|
5996
|
-
|
|
5997
|
-
|
|
5998
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
5999
|
+
const path = event.composedPath();
|
|
6000
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
5999
6001
|
this.showTooltip = false;
|
|
6002
|
+
}
|
|
6000
6003
|
}
|
|
6001
6004
|
connectedCallback() {
|
|
6002
6005
|
this.validationPattern = this.setPattern();
|
|
@@ -6051,8 +6054,8 @@ const NumberInput = class {
|
|
|
6051
6054
|
if (this.touched) {
|
|
6052
6055
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6053
6056
|
}
|
|
6054
|
-
return h("div", { key: '
|
|
6055
|
-
h("img", { key: '
|
|
6057
|
+
return h("div", { key: 'f0e6e6edb5d8e3f509474ef5536cb7ef717a5ee9', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c991d1e6ed0f9910104b46105daad5332200ee21', class: 'number__wrapper--flex' }, h("label", { key: 'd6912229dac4712f4f8e77a90f7ba0ebb7dd5548', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '5733806c60cad364e61fc66e25f89a44159e8ad9', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
6058
|
+
h("img", { key: '7ba9ca8048d04c41f800fccf03297e2db9a9115d', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '4c4726f1ac0f3b3495ba6309f5fe4110b1ea5353', ref: (el) => this.inputReference = el, type: "number", inputMode: "numeric", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '5217c1b0b4f4d9f741b5cdf6b7c3f01ef61fe180', class: 'number__error-message' }, this.errorMessage));
|
|
6056
6059
|
}
|
|
6057
6060
|
static get watchers() { return {
|
|
6058
6061
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6187,10 +6190,10 @@ const PasswordInput = class {
|
|
|
6187
6190
|
}
|
|
6188
6191
|
}
|
|
6189
6192
|
handleClickOutside(event) {
|
|
6190
|
-
|
|
6191
|
-
|
|
6192
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6193
|
+
const path = event.composedPath();
|
|
6194
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6193
6195
|
this.showTooltip = false;
|
|
6196
|
+
}
|
|
6194
6197
|
}
|
|
6195
6198
|
componentDidRender() {
|
|
6196
6199
|
// start custom styling area
|
|
@@ -6294,8 +6297,8 @@ const PasswordInput = class {
|
|
|
6294
6297
|
if (this.touched) {
|
|
6295
6298
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6296
6299
|
}
|
|
6297
|
-
return h("div", { key: '
|
|
6298
|
-
h("img", { key: '
|
|
6300
|
+
return h("div", { key: 'e6a288d18a095de747c7eec28bcf117e5069cbc1', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'e2885669879d0b61473be48014975859d87b2478', class: 'password__wrapper--flex' }, h("label", { key: 'c12f0a0bfe91a9da9688ab0acd39f6a44eec5d0a', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'f501cb74b838d2c4a1a1fd38086203e4b1c98dfe', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
6301
|
+
h("img", { key: '68d71061fb6be2245298e521b511e57b4cb12cbb', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: 'c8e3ce65dc46599cffe9763621b271fc18243829', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h("small", { key: 'ca4aeae4893276dc96bd7187aef5ac2ed86d35c8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
6299
6302
|
}
|
|
6300
6303
|
get element() { return getElement(this); }
|
|
6301
6304
|
static get watchers() { return {
|
|
@@ -6355,10 +6358,10 @@ const RadioInput = class {
|
|
|
6355
6358
|
this.sendValidityState.emit(inputStateEvent);
|
|
6356
6359
|
}
|
|
6357
6360
|
handleClickOutside(event) {
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6361
|
+
const path = event.composedPath();
|
|
6362
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6361
6363
|
this.showTooltip = false;
|
|
6364
|
+
}
|
|
6362
6365
|
}
|
|
6363
6366
|
componentDidRender() {
|
|
6364
6367
|
// start custom styling area
|
|
@@ -6390,8 +6393,8 @@ const RadioInput = class {
|
|
|
6390
6393
|
return null;
|
|
6391
6394
|
}
|
|
6392
6395
|
render() {
|
|
6393
|
-
return h("fieldset", { key: '
|
|
6394
|
-
h("img", { key: '
|
|
6396
|
+
return h("fieldset", { key: '8dd2ac2660557c45e3e7e1a514d94e8e0f90d4f2', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { key: '609396bda45ad1d2ceb49a023bdc090833724ed4', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h("div", { class: 'radio__wrapper' }, h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), h("label", { htmlFor: `${option.label}__input` }, option.label))), h("small", { key: 'e3c097e5f460316759d74e1f06a4f9f805deb29e', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
6397
|
+
h("img", { key: 'a71bf8fe647776214c36a87befff42b39b95106a', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
6395
6398
|
}
|
|
6396
6399
|
static get watchers() { return {
|
|
6397
6400
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6487,10 +6490,10 @@ const SelectInput = class {
|
|
|
6487
6490
|
this.sendInputValue.emit(inputValueEvent);
|
|
6488
6491
|
}
|
|
6489
6492
|
handleClickOutside(event) {
|
|
6490
|
-
|
|
6491
|
-
|
|
6492
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6493
|
+
const path = event.composedPath();
|
|
6494
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6493
6495
|
this.showTooltip = false;
|
|
6496
|
+
}
|
|
6494
6497
|
}
|
|
6495
6498
|
connectedCallback() {
|
|
6496
6499
|
this.displayedOptions = this.options.map(option => ({
|
|
@@ -6583,8 +6586,8 @@ const SelectInput = class {
|
|
|
6583
6586
|
if (this.touched) {
|
|
6584
6587
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6585
6588
|
}
|
|
6586
|
-
return h("div", { key: '
|
|
6587
|
-
h("img", { key: '
|
|
6589
|
+
return h("div", { key: 'ec7d68885b1354f320075be819284bd43d651f5c', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c718c36b80341506d0ad303541b21b60853424e9', class: 'select__wrapper--flex' }, h("label", { key: '6b90cad1ad83768ee4ad8495c1c7a0eb8e2d4941', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: 'bc98b947de3cfaf89a90f2be1e37bd01ac951261', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
6590
|
+
h("img", { key: 'ffae584b4cd766dc4285b8b216a09ecaeccafb95', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: 'f385e1ee1b8cd2ae12049178f6be70c25408a6bf', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur }), h("small", { key: '8473fb2ec7c5dfa24b0fda25c1d0918d48d0b7bf', class: 'select__error-message' }, this.errorMessage));
|
|
6588
6591
|
}
|
|
6589
6592
|
static get watchers() { return {
|
|
6590
6593
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6668,10 +6671,10 @@ const TelInput = class {
|
|
|
6668
6671
|
this.sendInputValue.emit(inputValueEvent);
|
|
6669
6672
|
}
|
|
6670
6673
|
handleClickOutside(event) {
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6674
|
+
const path = event.composedPath();
|
|
6675
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6674
6676
|
this.showTooltip = false;
|
|
6677
|
+
}
|
|
6675
6678
|
}
|
|
6676
6679
|
connectedCallback() {
|
|
6677
6680
|
this.validationPattern = this.setPattern();
|
|
@@ -6762,8 +6765,8 @@ const TelInput = class {
|
|
|
6762
6765
|
if (this.touched) {
|
|
6763
6766
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6764
6767
|
}
|
|
6765
|
-
return h("div", { key: '
|
|
6766
|
-
h("img", { key: '
|
|
6768
|
+
return h("div", { key: 'c7d032ca77d84df7afa4c1e727096d78b2f4e648', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'df166d6dc5f020edc1d4502f20ede76b7796324e', class: 'tel__wrapper--flex-label' }, h("label", { key: '870d566c29df1a20d1bdc33d6e58e935f6f5c36f', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7bc701596b6b06cd20c68e575af255468a4d0b1a', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
6769
|
+
h("img", { key: '04d00cf8bfd06730abd304e8467ded4b0fa80e7c', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'aee77f8937b6d89f13f8bcc659d1c5e955ba7d13', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '02ef60a7235d38709c661eafe4094f5e43909ca5', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '11e7b3625d34789e59f5784c2a164d5322bab07d', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '4c85018d23278bd3681dad20f22dc52168c121e4', class: 'tel__error-message' }, this.errorMessage));
|
|
6767
6770
|
}
|
|
6768
6771
|
static get watchers() { return {
|
|
6769
6772
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6849,10 +6852,10 @@ const TextInput = class {
|
|
|
6849
6852
|
this.sendInputValue.emit(inputValueEvent);
|
|
6850
6853
|
}
|
|
6851
6854
|
handleClickOutside(event) {
|
|
6852
|
-
|
|
6853
|
-
|
|
6854
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6855
|
+
const path = event.composedPath();
|
|
6856
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6855
6857
|
this.showTooltip = false;
|
|
6858
|
+
}
|
|
6856
6859
|
}
|
|
6857
6860
|
valueChangedHandler(event) {
|
|
6858
6861
|
if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
|
|
@@ -6949,8 +6952,8 @@ const TextInput = class {
|
|
|
6949
6952
|
if (this.touched) {
|
|
6950
6953
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6951
6954
|
}
|
|
6952
|
-
return h("div", { key: '
|
|
6953
|
-
h("img", { key: '
|
|
6955
|
+
return h("div", { key: 'e5ae8017daa88ef2b666a784f2b30e2f2a736fc4', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '41ddd764251f2bf502f0f6caf4eed187b08fb1d3', class: 'text__wrapper--flex' }, h("label", { key: 'ff35fc23927fa4128850cdf75c8153240d3024f3', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '73bb7863949deff8e64ceea96986321915c1cf55', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
6956
|
+
h("img", { key: '681b57905c4fbae22e9222cba6aea7d8286457f9', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '0aa7fe654b98b3c95fa424439e712f510298b136', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '867ca0228b8f157313f4ff4ef7a498d8e4a1f95a', class: 'text__error-message' }, this.errorMessage));
|
|
6954
6957
|
}
|
|
6955
6958
|
static get watchers() { return {
|
|
6956
6959
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -7007,10 +7010,10 @@ const ToggleCheckboxInput = class {
|
|
|
7007
7010
|
this.sendInputValue.emit(inputValueEvent);
|
|
7008
7011
|
}
|
|
7009
7012
|
handleClickOutside(event) {
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
7013
|
+
const path = event.composedPath();
|
|
7014
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
7013
7015
|
this.showTooltip = false;
|
|
7016
|
+
}
|
|
7014
7017
|
}
|
|
7015
7018
|
componentDidRender() {
|
|
7016
7019
|
// start custom styling area
|
|
@@ -7058,9 +7061,9 @@ const ToggleCheckboxInput = class {
|
|
|
7058
7061
|
return null;
|
|
7059
7062
|
}
|
|
7060
7063
|
render() {
|
|
7061
|
-
return h("div", { key: '
|
|
7062
|
-
h("img", { key: '
|
|
7063
|
-
return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
7064
|
+
return h("div", { key: '4485a8990d61184c791d3ab76ee721b31c6744fb', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'bc8ab489666786e86e5a199e36de85eac42c3105', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: 'fcd0a52f1e965e9b8e26c2bd78dd0e8b92930c31', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: '38f73ada9487e54330a1bb9a8e93dd9fb637d45b', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'ccf7ecb6751ff67686900fab62be3d57ddc0ce74', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
7065
|
+
h("img", { key: '5dd9eab63473daac23656e39f462cecb47283e4b', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: 'ae9e8535ed12ffe07a324874bd7e3d5c201045aa', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
7066
|
+
return h("general-input-hsl", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
7064
7067
|
})));
|
|
7065
7068
|
}
|
|
7066
7069
|
static get watchers() { return {
|
|
@@ -7185,10 +7188,10 @@ const TwofaInput = class {
|
|
|
7185
7188
|
this.sendInputValue.emit(inputValueEvent);
|
|
7186
7189
|
}
|
|
7187
7190
|
handleClickOutside(event) {
|
|
7188
|
-
|
|
7189
|
-
|
|
7190
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
7191
|
+
const path = event.composedPath();
|
|
7192
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
7191
7193
|
this.showTooltip = false;
|
|
7194
|
+
}
|
|
7192
7195
|
}
|
|
7193
7196
|
connectedCallback() {
|
|
7194
7197
|
this.validationPattern = this.setPattern();
|
|
@@ -7271,9 +7274,9 @@ const TwofaInput = class {
|
|
|
7271
7274
|
return null;
|
|
7272
7275
|
}
|
|
7273
7276
|
render() {
|
|
7274
|
-
return (h("div", { key: '
|
|
7277
|
+
return (h("div", { key: '5764336a8995a1ec0e7ff432ce85c8a317e3f01c', class: "twofa" }, h("div", { key: '8ea47ba6bb5f552afcde936f1de8c544f89e12a7', class: 'twofa__error-message' }, h("p", { key: '6930908b1f5df7030d96a442779203747aa938b2' }, this.errorMessage)), h("div", { key: '56f116fa0ac4883d1b225b7165b2d5271a661d9d', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'b2ecadecbc8802c5b4dd09d81dc77e66f2108990', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
7275
7278
|
return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
7276
|
-
})), h("div", { key: '
|
|
7279
|
+
})), h("div", { key: '76635a96eb73d77a3259f26d7d74f738e705acf1', class: "twofa__button-wrapper" }, h("p", { key: '66b15896c126c4c7e8d3ba6d22829992df4cfde9', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '7e81ec829cfeb48e911d7b88aa9ec7d6f1cbf4e2', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
7277
7280
|
? translate('twofaResendButton', this.language)
|
|
7278
7281
|
: this.formatTime()))));
|
|
7279
7282
|
}
|