@everymatrix/general-input-hsl 0.2.0 → 0.2.3
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-a20b01f4.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-1c14ae9b.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-1c14ae9b.js} +438 -2367
- 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 → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/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 → sebastian.strulea/Documents/work}/widgets-monorepo/packages/stencil/general-input-hsl/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const generalInputHsl = require('./general-input-hsl-
|
|
5
|
+
const index = require('./index-160616a9.js');
|
|
6
|
+
const generalInputHsl = require('./general-input-hsl-a20b01f4.js');
|
|
7
7
|
|
|
8
8
|
const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
|
|
9
9
|
|
|
@@ -67,10 +67,10 @@ const CheckboxGroupInput = class {
|
|
|
67
67
|
this.sendInputValue.emit(inputValueEvent);
|
|
68
68
|
}
|
|
69
69
|
handleClickOutside(event) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
70
|
+
const path = event.composedPath();
|
|
71
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
73
72
|
this.showTooltip = false;
|
|
73
|
+
}
|
|
74
74
|
}
|
|
75
75
|
componentDidRender() {
|
|
76
76
|
// start custom styling area
|
|
@@ -118,8 +118,8 @@ const CheckboxGroupInput = class {
|
|
|
118
118
|
return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
119
119
|
}
|
|
120
120
|
render() {
|
|
121
|
-
return index.h("div", { key: '
|
|
122
|
-
index.h("img", { key: '
|
|
121
|
+
return index.h("div", { key: '9985f4050655bc2233090f63abb0e22f2fe0b556', class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9922e45ae7ee74b137ffc8552b3d714b7e3b1f59', class: 'checkboxgroup__wrapper--flex' }, index.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 &&
|
|
122
|
+
index.h("img", { key: '3dc2ce07e4d5f8de7ed4707b5e140fb4752ca86b', class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: 'd55f25f75aa20007ff58cf45b6632517f49b6c00', class: 'checkboxgroup__error-message' }, this.errorMessage), this.showCheckboxes && (index.h("vaadin-checkbox-group", { key: '210c3cc2868a07a403494e04336c4f3091eea0e4', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
|
|
123
123
|
this.selectedValues = event.detail.value;
|
|
124
124
|
} }, this.options.map((checkbox) => index.h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName })))));
|
|
125
125
|
}
|
|
@@ -183,10 +183,10 @@ const CheckboxInput = class {
|
|
|
183
183
|
this.sendInputValue.emit(inputValueEvent);
|
|
184
184
|
}
|
|
185
185
|
handleClickOutside(event) {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
186
|
+
const path = event.composedPath();
|
|
187
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
189
188
|
this.showTooltip = false;
|
|
189
|
+
}
|
|
190
190
|
}
|
|
191
191
|
componentDidRender() {
|
|
192
192
|
// start custom styling area
|
|
@@ -228,7 +228,7 @@ const CheckboxInput = class {
|
|
|
228
228
|
return null;
|
|
229
229
|
}
|
|
230
230
|
render() {
|
|
231
|
-
return (index.h("div", { key: '
|
|
231
|
+
return (index.h("div", { key: '6d4c24ff269eb9378cdbb8fbeae034018d86b42e', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.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 && (index.h("img", { key: '86e2ed5404864abb1704e8748bed15ea7071797a', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
232
232
|
}
|
|
233
233
|
static get watchers() { return {
|
|
234
234
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5622,6 +5622,7 @@ const DateInput = class {
|
|
|
5622
5622
|
const date = parse(inputValue, this.dateFormat, new Date());
|
|
5623
5623
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
5624
5624
|
};
|
|
5625
|
+
this.valueToDate = (stringDateValue) => parse(stringDateValue || '', 'yyyy-MM-dd', new Date());
|
|
5625
5626
|
this.setClientStyling = () => {
|
|
5626
5627
|
let sheet = document.createElement('style');
|
|
5627
5628
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -5672,15 +5673,15 @@ const DateInput = class {
|
|
|
5672
5673
|
this.sendInputValue.emit(inputValueEvent);
|
|
5673
5674
|
}
|
|
5674
5675
|
handleClickOutside(event) {
|
|
5675
|
-
|
|
5676
|
-
|
|
5677
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
5676
|
+
const path = event.composedPath();
|
|
5677
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
5678
5678
|
this.showTooltip = false;
|
|
5679
|
+
}
|
|
5679
5680
|
}
|
|
5680
5681
|
connectedCallback() {
|
|
5681
5682
|
var _a, _b;
|
|
5682
|
-
this.minDate =
|
|
5683
|
-
this.maxDate =
|
|
5683
|
+
this.minDate = this.valueToDate((_a = this.validation.min) === null || _a === void 0 ? void 0 : _a.toString());
|
|
5684
|
+
this.maxDate = this.valueToDate((_b = this.validation.max) === null || _b === void 0 ? void 0 : _b.toString());
|
|
5684
5685
|
}
|
|
5685
5686
|
componentDidRender() {
|
|
5686
5687
|
// start custom styling area
|
|
@@ -5715,6 +5716,8 @@ const DateInput = class {
|
|
|
5715
5716
|
this.isValid = this.setValidity();
|
|
5716
5717
|
if (this.defaultValue) {
|
|
5717
5718
|
this.value = this.defaultValue;
|
|
5719
|
+
this.valueAsDate = this.valueToDate(this.value);
|
|
5720
|
+
this.isValid = this.setValidity();
|
|
5718
5721
|
this.valueHandler({ name: this.name, value: this.value });
|
|
5719
5722
|
}
|
|
5720
5723
|
}
|
|
@@ -5726,7 +5729,7 @@ const DateInput = class {
|
|
|
5726
5729
|
handleInput(event) {
|
|
5727
5730
|
this.value = event.target.value;
|
|
5728
5731
|
this.touched = true;
|
|
5729
|
-
this.valueAsDate =
|
|
5732
|
+
this.valueAsDate = this.valueToDate(this.value);
|
|
5730
5733
|
this.isValid = this.setValidity();
|
|
5731
5734
|
this.errorMessage = this.setErrorMessage();
|
|
5732
5735
|
this.emitValueHandler(true);
|
|
@@ -5764,8 +5767,8 @@ const DateInput = class {
|
|
|
5764
5767
|
if (this.touched) {
|
|
5765
5768
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5766
5769
|
}
|
|
5767
|
-
return index.h("div", { key: '
|
|
5768
|
-
index.h("img", { key: '
|
|
5770
|
+
return index.h("div", { key: 'f2a2e6f7adf273e07934af51763f900f9051e5b1', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '70b360618031d48816fedf22d55119af01514de1', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.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) }), index.h("small", { key: 'cb7fb9acafcedfa80321f5f1d16b705ad00d8bdd', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5771
|
+
index.h("img", { key: '535e3a1875cd328c3dd5627672afdc4fd32b078c', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5769
5772
|
}
|
|
5770
5773
|
get element() { return index.getElement(this); }
|
|
5771
5774
|
static get watchers() { return {
|
|
@@ -5846,10 +5849,10 @@ const EmailInput = class {
|
|
|
5846
5849
|
this.sendInputValue.emit(inputValueEvent);
|
|
5847
5850
|
}
|
|
5848
5851
|
handleClickOutside(event) {
|
|
5849
|
-
|
|
5850
|
-
|
|
5851
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
5852
|
+
const path = event.composedPath();
|
|
5853
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
5852
5854
|
this.showTooltip = false;
|
|
5855
|
+
}
|
|
5853
5856
|
}
|
|
5854
5857
|
valueChangedHandler(event) {
|
|
5855
5858
|
if (this.isDuplicateInput) {
|
|
@@ -5916,8 +5919,8 @@ const EmailInput = class {
|
|
|
5916
5919
|
if (this.touched) {
|
|
5917
5920
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5918
5921
|
}
|
|
5919
|
-
return index.h("div", { key: '
|
|
5920
|
-
index.h("img", { key: '
|
|
5922
|
+
return index.h("div", { key: '45255f597fcc76fa5e99601d7c2dd59afca32dbe', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '7e41609760d4cc0b5acb554749fce42e6bc88ef3', class: 'email__wrapper--flex' }, index.h("label", { key: '250a1656d714e8cbc943d153aa216a6322322534', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '80db5747730aaac2c1d0efa3129dfa5463fe779c', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
5923
|
+
index.h("img", { key: 'f10990c70bb3de310d137fa120575ad3582adbd3', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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 }), index.h("small", { key: '1610834f1705f70bd1f2d4b0a6c37af3307cf77f', class: 'email__error-message' }, this.errorMessage));
|
|
5921
5924
|
}
|
|
5922
5925
|
static get watchers() { return {
|
|
5923
5926
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5996,10 +5999,10 @@ const NumberInput = class {
|
|
|
5996
5999
|
this.sendInputValue.emit(inputValueEvent);
|
|
5997
6000
|
}
|
|
5998
6001
|
handleClickOutside(event) {
|
|
5999
|
-
|
|
6000
|
-
|
|
6001
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6002
|
+
const path = event.composedPath();
|
|
6003
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6002
6004
|
this.showTooltip = false;
|
|
6005
|
+
}
|
|
6003
6006
|
}
|
|
6004
6007
|
connectedCallback() {
|
|
6005
6008
|
this.validationPattern = this.setPattern();
|
|
@@ -6054,8 +6057,8 @@ const NumberInput = class {
|
|
|
6054
6057
|
if (this.touched) {
|
|
6055
6058
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6056
6059
|
}
|
|
6057
|
-
return index.h("div", { key: '
|
|
6058
|
-
index.h("img", { key: '
|
|
6060
|
+
return index.h("div", { key: 'f0e6e6edb5d8e3f509474ef5536cb7ef717a5ee9', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c991d1e6ed0f9910104b46105daad5332200ee21', class: 'number__wrapper--flex' }, index.h("label", { key: 'd6912229dac4712f4f8e77a90f7ba0ebb7dd5548', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '5733806c60cad364e61fc66e25f89a44159e8ad9', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
6061
|
+
index.h("img", { key: '7ba9ca8048d04c41f800fccf03297e2db9a9115d', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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 }), index.h("small", { key: '5217c1b0b4f4d9f741b5cdf6b7c3f01ef61fe180', class: 'number__error-message' }, this.errorMessage));
|
|
6059
6062
|
}
|
|
6060
6063
|
static get watchers() { return {
|
|
6061
6064
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6190,10 +6193,10 @@ const PasswordInput = class {
|
|
|
6190
6193
|
}
|
|
6191
6194
|
}
|
|
6192
6195
|
handleClickOutside(event) {
|
|
6193
|
-
|
|
6194
|
-
|
|
6195
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6196
|
+
const path = event.composedPath();
|
|
6197
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6196
6198
|
this.showTooltip = false;
|
|
6199
|
+
}
|
|
6197
6200
|
}
|
|
6198
6201
|
componentDidRender() {
|
|
6199
6202
|
// start custom styling area
|
|
@@ -6297,8 +6300,8 @@ const PasswordInput = class {
|
|
|
6297
6300
|
if (this.touched) {
|
|
6298
6301
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6299
6302
|
}
|
|
6300
|
-
return index.h("div", { key: '
|
|
6301
|
-
index.h("img", { key: '
|
|
6303
|
+
return index.h("div", { key: 'e6a288d18a095de747c7eec28bcf117e5069cbc1', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'e2885669879d0b61473be48014975859d87b2478', class: 'password__wrapper--flex' }, index.h("label", { key: 'c12f0a0bfe91a9da9688ab0acd39f6a44eec5d0a', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'f501cb74b838d2c4a1a1fd38086203e4b1c98dfe', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
6304
|
+
index.h("img", { key: '68d71061fb6be2245298e521b511e57b4cb12cbb', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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 }), index.h("small", { key: 'ca4aeae4893276dc96bd7187aef5ac2ed86d35c8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
6302
6305
|
}
|
|
6303
6306
|
get element() { return index.getElement(this); }
|
|
6304
6307
|
static get watchers() { return {
|
|
@@ -6358,10 +6361,10 @@ const RadioInput = class {
|
|
|
6358
6361
|
this.sendValidityState.emit(inputStateEvent);
|
|
6359
6362
|
}
|
|
6360
6363
|
handleClickOutside(event) {
|
|
6361
|
-
|
|
6362
|
-
|
|
6363
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6364
|
+
const path = event.composedPath();
|
|
6365
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6364
6366
|
this.showTooltip = false;
|
|
6367
|
+
}
|
|
6365
6368
|
}
|
|
6366
6369
|
componentDidRender() {
|
|
6367
6370
|
// start custom styling area
|
|
@@ -6393,8 +6396,8 @@ const RadioInput = class {
|
|
|
6393
6396
|
return null;
|
|
6394
6397
|
}
|
|
6395
6398
|
render() {
|
|
6396
|
-
return index.h("fieldset", { key: '
|
|
6397
|
-
index.h("img", { key: '
|
|
6399
|
+
return index.h("fieldset", { key: '8dd2ac2660557c45e3e7e1a514d94e8e0f90d4f2', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '609396bda45ad1d2ceb49a023bdc090833724ed4', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.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) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { key: 'e3c097e5f460316759d74e1f06a4f9f805deb29e', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
6400
|
+
index.h("img", { key: 'a71bf8fe647776214c36a87befff42b39b95106a', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
6398
6401
|
}
|
|
6399
6402
|
static get watchers() { return {
|
|
6400
6403
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6490,10 +6493,10 @@ const SelectInput = class {
|
|
|
6490
6493
|
this.sendInputValue.emit(inputValueEvent);
|
|
6491
6494
|
}
|
|
6492
6495
|
handleClickOutside(event) {
|
|
6493
|
-
|
|
6494
|
-
|
|
6495
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6496
|
+
const path = event.composedPath();
|
|
6497
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6496
6498
|
this.showTooltip = false;
|
|
6499
|
+
}
|
|
6497
6500
|
}
|
|
6498
6501
|
connectedCallback() {
|
|
6499
6502
|
this.displayedOptions = this.options.map(option => ({
|
|
@@ -6586,8 +6589,8 @@ const SelectInput = class {
|
|
|
6586
6589
|
if (this.touched) {
|
|
6587
6590
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6588
6591
|
}
|
|
6589
|
-
return index.h("div", { key: '
|
|
6590
|
-
index.h("img", { key: '
|
|
6592
|
+
return index.h("div", { key: 'ec7d68885b1354f320075be819284bd43d651f5c', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c718c36b80341506d0ad303541b21b60853424e9', class: 'select__wrapper--flex' }, index.h("label", { key: '6b90cad1ad83768ee4ad8495c1c7a0eb8e2d4941', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: 'bc98b947de3cfaf89a90f2be1e37bd01ac951261', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
6593
|
+
index.h("img", { key: 'ffae584b4cd766dc4285b8b216a09ecaeccafb95', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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 }), index.h("small", { key: '8473fb2ec7c5dfa24b0fda25c1d0918d48d0b7bf', class: 'select__error-message' }, this.errorMessage));
|
|
6591
6594
|
}
|
|
6592
6595
|
static get watchers() { return {
|
|
6593
6596
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6671,10 +6674,10 @@ const TelInput = class {
|
|
|
6671
6674
|
this.sendInputValue.emit(inputValueEvent);
|
|
6672
6675
|
}
|
|
6673
6676
|
handleClickOutside(event) {
|
|
6674
|
-
|
|
6675
|
-
|
|
6676
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6677
|
+
const path = event.composedPath();
|
|
6678
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6677
6679
|
this.showTooltip = false;
|
|
6680
|
+
}
|
|
6678
6681
|
}
|
|
6679
6682
|
connectedCallback() {
|
|
6680
6683
|
this.validationPattern = this.setPattern();
|
|
@@ -6765,8 +6768,8 @@ const TelInput = class {
|
|
|
6765
6768
|
if (this.touched) {
|
|
6766
6769
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6767
6770
|
}
|
|
6768
|
-
return index.h("div", { key: '
|
|
6769
|
-
index.h("img", { key: '
|
|
6771
|
+
return index.h("div", { key: 'c7d032ca77d84df7afa4c1e727096d78b2f4e648', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'df166d6dc5f020edc1d4502f20ede76b7796324e', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '870d566c29df1a20d1bdc33d6e58e935f6f5c36f', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7bc701596b6b06cd20c68e575af255468a4d0b1a', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
6772
|
+
index.h("img", { key: '04d00cf8bfd06730abd304e8467ded4b0fa80e7c', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'aee77f8937b6d89f13f8bcc659d1c5e955ba7d13', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '02ef60a7235d38709c661eafe4094f5e43909ca5', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.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 })), index.h("small", { key: '4c85018d23278bd3681dad20f22dc52168c121e4', class: 'tel__error-message' }, this.errorMessage));
|
|
6770
6773
|
}
|
|
6771
6774
|
static get watchers() { return {
|
|
6772
6775
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6852,10 +6855,10 @@ const TextInput = class {
|
|
|
6852
6855
|
this.sendInputValue.emit(inputValueEvent);
|
|
6853
6856
|
}
|
|
6854
6857
|
handleClickOutside(event) {
|
|
6855
|
-
|
|
6856
|
-
|
|
6857
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
6858
|
+
const path = event.composedPath();
|
|
6859
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
6858
6860
|
this.showTooltip = false;
|
|
6861
|
+
}
|
|
6859
6862
|
}
|
|
6860
6863
|
valueChangedHandler(event) {
|
|
6861
6864
|
if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
|
|
@@ -6952,8 +6955,8 @@ const TextInput = class {
|
|
|
6952
6955
|
if (this.touched) {
|
|
6953
6956
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6954
6957
|
}
|
|
6955
|
-
return index.h("div", { key: '
|
|
6956
|
-
index.h("img", { key: '
|
|
6958
|
+
return index.h("div", { key: 'e5ae8017daa88ef2b666a784f2b30e2f2a736fc4', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '41ddd764251f2bf502f0f6caf4eed187b08fb1d3', class: 'text__wrapper--flex' }, index.h("label", { key: 'ff35fc23927fa4128850cdf75c8153240d3024f3', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '73bb7863949deff8e64ceea96986321915c1cf55', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
6959
|
+
index.h("img", { key: '681b57905c4fbae22e9222cba6aea7d8286457f9', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.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 }), index.h("small", { key: '867ca0228b8f157313f4ff4ef7a498d8e4a1f95a', class: 'text__error-message' }, this.errorMessage));
|
|
6957
6960
|
}
|
|
6958
6961
|
static get watchers() { return {
|
|
6959
6962
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -7010,10 +7013,10 @@ const ToggleCheckboxInput = class {
|
|
|
7010
7013
|
this.sendInputValue.emit(inputValueEvent);
|
|
7011
7014
|
}
|
|
7012
7015
|
handleClickOutside(event) {
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
7016
|
+
const path = event.composedPath();
|
|
7017
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
7016
7018
|
this.showTooltip = false;
|
|
7019
|
+
}
|
|
7017
7020
|
}
|
|
7018
7021
|
componentDidRender() {
|
|
7019
7022
|
// start custom styling area
|
|
@@ -7061,9 +7064,9 @@ const ToggleCheckboxInput = class {
|
|
|
7061
7064
|
return null;
|
|
7062
7065
|
}
|
|
7063
7066
|
render() {
|
|
7064
|
-
return index.h("div", { key: '
|
|
7065
|
-
index.h("img", { key: '
|
|
7066
|
-
return index.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 });
|
|
7067
|
+
return index.h("div", { key: '4485a8990d61184c791d3ab76ee721b31c6744fb', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'bc8ab489666786e86e5a199e36de85eac42c3105', class: 'togglecheckbox__wrapper--flex' }, index.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()), index.h("small", { key: '38f73ada9487e54330a1bb9a8e93dd9fb637d45b', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: 'ccf7ecb6751ff67686900fab62be3d57ddc0ce74', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
7068
|
+
index.h("img", { key: '5dd9eab63473daac23656e39f462cecb47283e4b', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: 'ae9e8535ed12ffe07a324874bd7e3d5c201045aa', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
7069
|
+
return index.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 });
|
|
7067
7070
|
})));
|
|
7068
7071
|
}
|
|
7069
7072
|
static get watchers() { return {
|
|
@@ -7188,10 +7191,10 @@ const TwofaInput = class {
|
|
|
7188
7191
|
this.sendInputValue.emit(inputValueEvent);
|
|
7189
7192
|
}
|
|
7190
7193
|
handleClickOutside(event) {
|
|
7191
|
-
|
|
7192
|
-
|
|
7193
|
-
if (event.composedPath()[0] !== this.tooltipReference)
|
|
7194
|
+
const path = event.composedPath();
|
|
7195
|
+
if (!path.includes(this.tooltipIconReference) && !path.includes(this.tooltipReference)) {
|
|
7194
7196
|
this.showTooltip = false;
|
|
7197
|
+
}
|
|
7195
7198
|
}
|
|
7196
7199
|
connectedCallback() {
|
|
7197
7200
|
this.validationPattern = this.setPattern();
|
|
@@ -7274,9 +7277,9 @@ const TwofaInput = class {
|
|
|
7274
7277
|
return null;
|
|
7275
7278
|
}
|
|
7276
7279
|
render() {
|
|
7277
|
-
return (index.h("div", { key: '
|
|
7280
|
+
return (index.h("div", { key: '5764336a8995a1ec0e7ff432ce85c8a317e3f01c', class: "twofa" }, index.h("div", { key: '8ea47ba6bb5f552afcde936f1de8c544f89e12a7', class: 'twofa__error-message' }, index.h("p", { key: '6930908b1f5df7030d96a442779203747aa938b2' }, this.errorMessage)), index.h("div", { key: '56f116fa0ac4883d1b225b7165b2d5271a661d9d', class: "twofa__description", innerHTML: generalInputHsl.translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: 'b2ecadecbc8802c5b4dd09d81dc77e66f2108990', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
7278
7281
|
return (index.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) }));
|
|
7279
|
-
})), index.h("div", { key: '
|
|
7282
|
+
})), index.h("div", { key: '76635a96eb73d77a3259f26d7d74f738e705acf1', class: "twofa__button-wrapper" }, index.h("p", { key: '66b15896c126c4c7e8d3ba6d22829992df4cfde9', class: "twofa__resend-message" }, generalInputHsl.translate('twofaResendMessage', this.language)), index.h("button", { key: '7e81ec829cfeb48e911d7b88aa9ec7d6f1cbf4e2', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
7280
7283
|
? generalInputHsl.translate('twofaResendButton', this.language)
|
|
7281
7284
|
: this.formatTime()))));
|
|
7282
7285
|
}
|