@everymatrix/general-registration 1.10.20 → 1.10.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/cjs/checkbox-group-input_12.cjs.entry.js +253 -118
  2. package/dist/cjs/general-registration.cjs.js +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/collection/components/general-registration/general-registration.css +4 -0
  5. package/dist/collection/components/general-registration/general-registration.js +49 -19
  6. package/dist/components/checkbox-group-input2.js +8 -4
  7. package/dist/components/checkbox-input2.js +4 -2
  8. package/dist/components/date-input2.js +17 -7
  9. package/dist/components/email-input2.js +27 -10
  10. package/dist/components/general-registration.js +30 -19
  11. package/dist/components/number-input2.js +27 -10
  12. package/dist/components/password-input2.js +46 -19
  13. package/dist/components/radio-input2.js +1 -2
  14. package/dist/components/select-input2.js +15 -10
  15. package/dist/components/tel-input2.js +39 -22
  16. package/dist/components/text-input2.js +43 -16
  17. package/dist/esm/checkbox-group-input_12.entry.js +253 -118
  18. package/dist/esm/general-registration.js +1 -1
  19. package/dist/esm/loader.js +1 -1
  20. package/dist/general-registration/general-registration.esm.js +1 -1
  21. package/dist/general-registration/{p-cb8af7e3.entry.js → p-201aaed1.entry.js} +34 -34
  22. package/dist/types/Users/adrian.pripon/Documents/Work/stencil/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/types.d.ts +3 -0
  23. package/dist/types/components/general-registration/general-registration.d.ts +10 -3
  24. package/dist/types/components.d.ts +8 -0
  25. package/package.json +1 -1
package/dist/components/number-input2.js CHANGED
@@ -17,6 +17,24 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
17
17
  this.limitStylingAppends = false;
18
18
  this.showTooltip = false;
19
19
  this.validationPattern = '';
20
+ this.touched = false;
21
+ this.handleInput = (event) => {
22
+ this.value = event.target.value;
23
+ this.touched = true;
24
+ if (this.debounceTime) {
25
+ clearTimeout(this.debounceTime);
26
+ }
27
+ this.debounceTime = setTimeout(() => {
28
+ this.isValid = this.setValidity();
29
+ this.errorMessage = this.setErrorMessage();
30
+ this.emitValueHandler(true);
31
+ }, 500);
32
+ };
33
+ this.handleBlur = () => {
34
+ this.isValid = this.setValidity();
35
+ this.errorMessage = this.setErrorMessage();
36
+ this.touched = true;
37
+ };
20
38
  this.setClientStyling = () => {
21
39
  let sheet = document.createElement('style');
22
40
  sheet.innerHTML = this.clientStyling;
@@ -57,18 +75,14 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
57
75
  this.limitStylingAppends = true;
58
76
  }
59
77
  // end custom styling area
78
+ }
79
+ componentDidLoad() {
80
+ this.isValid = this.setValidity();
60
81
  if (this.defaultValue) {
61
82
  this.value = this.defaultValue;
62
83
  this.valueHandler({ name: this.name, value: this.value });
63
84
  }
64
85
  }
65
- handleInput(event) {
66
- this.value = event.target.value;
67
- this.errorMessage = this.setErrorMessage();
68
- this.isValid = this.setValidity();
69
- this.validityStateHandler({ valid: this.isValid, name: this.name });
70
- this.emitValueHandler(true);
71
- }
72
86
  setValidity() {
73
87
  return this.inputReference.validity.valid;
74
88
  }
@@ -97,9 +111,12 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
97
111
  return null;
98
112
  }
99
113
  render() {
100
- const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
101
- return h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'number__wrapper--flex' }, h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
102
- h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("small", { class: 'number__error-message' }, this.errorMessage));
114
+ let invalidClass;
115
+ if (this.touched) {
116
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
117
+ }
118
+ return h("div", { class: `number__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'number__wrapper--flex' }, h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
119
+ h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'number__error-message' }, this.errorMessage));
103
120
  }
104
121
  static get watchers() { return {
105
122
  "isValid": ["validityChanged"],
package/dist/components/password-input2.js CHANGED
@@ -743,6 +743,27 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
743
743
  this.value = '';
744
744
  this.validationPattern = '';
745
745
  this.duplicateInputValue = null;
746
+ this.handleInput = (event) => {
747
+ this.value = event.target.value;
748
+ this.calculateComplexity(this.value);
749
+ this.showPopup = true;
750
+ this.touched = true;
751
+ if (this.debounceTime) {
752
+ clearTimeout(this.debounceTime);
753
+ }
754
+ this.debounceTime = setTimeout(() => {
755
+ this.isValid = this.setValidity();
756
+ this.errorMessage = this.setErrorMessage();
757
+ this.emitValueHandler(true);
758
+ }, 500);
759
+ };
760
+ this.handleBlur = (event) => {
761
+ this.value = event.target.value;
762
+ this.showPopup = false;
763
+ this.touched = true;
764
+ this.isValid = this.setValidity();
765
+ this.errorMessage = this.setErrorMessage();
766
+ };
746
767
  this.setClientStyling = () => {
747
768
  let sheet = document.createElement('style');
748
769
  sheet.innerHTML = this.clientStyling;
@@ -757,7 +778,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
757
778
  }
758
779
  emitValueHandler(newValue) {
759
780
  if (newValue == true && this.isValid) {
760
- this.valueHandler({ name: this.name, value: this.value });
781
+ this.valueHandler({ name: this.name, value: this.value, type: 'duplicate' });
761
782
  }
762
783
  }
763
784
  validityStateHandler(inputStateEvent) {
@@ -767,12 +788,16 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
767
788
  this.sendInputValue.emit(inputValueEvent);
768
789
  }
769
790
  valueChangedHandler(event) {
770
- if (this.isDuplicateInput) {
771
- if (this.name === event.detail.name + 'Duplicate') {
772
- this.duplicateInputValue = event.detail.value;
791
+ if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
792
+ this.duplicateInputValue = event.detail.value;
793
+ if (this.touched) {
794
+ this.isValid = this.setValidity();
795
+ this.errorMessage = this.setErrorMessage();
773
796
  }
774
797
  }
775
- if (this.name === event.detail.name + 'Duplicate' && this.name.replace('Duplicate', '') === event.detail.name && this.touched === true) {
798
+ if (this.name === event.detail.name + 'Duplicate'
799
+ && this.name.replace('Duplicate', '') === event.detail.name
800
+ && this.touched === true) {
776
801
  this.isValid = this.setValidity();
777
802
  this.errorMessage = this.setErrorMessage();
778
803
  }
@@ -799,22 +824,17 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
799
824
  this.inputReference = this.element.shadowRoot.querySelector('input');
800
825
  this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
801
826
  this.passwordButton.tabIndex = -1;
827
+ this.isValid = this.setValidity();
802
828
  if (this.defaultValue) {
803
829
  this.value = this.defaultValue;
804
830
  this.calculateComplexity(this.value);
805
831
  this.valueHandler({ name: this.name, value: this.value });
832
+ if (this.isDuplicateInput) {
833
+ this.duplicateInputValue = this.defaultValue;
834
+ this.touched = true;
835
+ }
806
836
  }
807
837
  }
808
- handleInput(event) {
809
- this.value = event.target.value;
810
- this.calculateComplexity(this.value);
811
- this.showPopup = true;
812
- this.errorMessage = this.setErrorMessage();
813
- this.isValid = this.setValidity();
814
- this.validityStateHandler({ valid: this.isValid, name: this.name });
815
- this.emitValueHandler(true);
816
- this.touched = true;
817
- }
818
838
  calculateComplexity(password) {
819
839
  this.passwordComplexity = this.validation.custom
820
840
  .filter(rule => rule.rule === 'regex')
@@ -825,11 +845,15 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
825
845
  });
826
846
  }
827
847
  setValidity() {
848
+ var _a, _b;
828
849
  if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
829
850
  return false;
830
851
  }
852
+ else if (!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed))) {
853
+ return false;
854
+ }
831
855
  else {
832
- return this.inputReference.validity.valid;
856
+ return (_b = this.inputReference) === null || _b === void 0 ? void 0 : _b.validity.valid;
833
857
  }
834
858
  }
835
859
  setPattern() {
@@ -871,9 +895,12 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
871
895
  }))));
872
896
  }
873
897
  render() {
874
- const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
875
- return h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'password__wrapper--flex' }, h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
876
- h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { 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} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, onInput: (e) => this.handleInput(e), onBlur: () => this.showPopup = false, onFocus: () => this.showPopup = true }), h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
898
+ let invalidClass;
899
+ if (this.touched) {
900
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
901
+ }
902
+ return h("div", { class: `password__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'password__wrapper--flex' }, h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
903
+ h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { 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} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.showPopup = true }), h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
877
904
  }
878
905
  get element() { return this; }
879
906
  static get watchers() { return {
package/dist/components/radio-input2.js CHANGED
@@ -58,7 +58,6 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
58
58
  this.value = event.target.value;
59
59
  this.isValid = this.setValidity();
60
60
  this.errorMessage = this.setErrorMessage();
61
- this.validityStateHandler({ valid: this.isValid, name: this.name });
62
61
  this.emitValueHandler(true);
63
62
  }
64
63
  setValidity() {
@@ -76,7 +75,7 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
76
75
  return null;
77
76
  }
78
77
  render() {
79
- return h("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, h("legend", { 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", { class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
78
+ return h("fieldset", { class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { 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", { class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
80
79
  h("img", { class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
81
80
  }
82
81
  static get watchers() { return {
package/dist/components/select-input2.js CHANGED
@@ -26,6 +26,14 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
26
26
  this.clientStyling = '';
27
27
  this.limitStylingAppends = false;
28
28
  this.showTooltip = false;
29
+ this.touched = false;
30
+ this.handleChange = (event) => {
31
+ this.touched = true;
32
+ this.value = event.target.value;
33
+ this.isValid = this.setValidity();
34
+ this.errorMessage = this.setErrorMessage();
35
+ this.emitValueHandler(true);
36
+ };
29
37
  this.setClientStyling = () => {
30
38
  let sheet = document.createElement('style');
31
39
  sheet.innerHTML = this.clientStyling;
@@ -80,6 +88,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
80
88
  }
81
89
  componentDidLoad() {
82
90
  this.inputReference = this.element.shadowRoot.querySelector('input');
91
+ this.isValid = this.setValidity();
83
92
  if (this.defaultValue) {
84
93
  this.value = this.defaultValue;
85
94
  this.valueHandler({ name: this.name, value: this.value });
@@ -99,13 +108,6 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
99
108
  });
100
109
  });
101
110
  }
102
- handleChange(event) {
103
- this.value = event.target.value;
104
- this.errorMessage = this.setErrorMessage();
105
- this.isValid = this.setValidity();
106
- this.validityStateHandler({ valid: this.isValid, name: this.name });
107
- this.emitValueHandler(true);
108
- }
109
111
  setValidity() {
110
112
  return this.inputReference.validity.valid;
111
113
  }
@@ -121,9 +123,12 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
121
123
  return null;
122
124
  }
123
125
  render() {
124
- const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
125
- return h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'select__wrapper--flex' }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
126
- h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onChange: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
126
+ let invalidClass;
127
+ if (this.touched) {
128
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
129
+ }
130
+ return h("div", { class: `select__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'select__wrapper--flex' }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
131
+ h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onChange: this.handleChange }), h("small", { class: 'select__error-message' }, this.errorMessage));
127
132
  }
128
133
  get element() { return this; }
129
134
  static get watchers() { return {
package/dist/components/tel-input2.js CHANGED
@@ -19,6 +19,25 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
19
19
  this.limitStylingAppends = false;
20
20
  this.showTooltip = false;
21
21
  this.validationPattern = '';
22
+ this.touched = false;
23
+ this.handleInput = (event) => {
24
+ this.phoneValue = event.target.value;
25
+ this.value = { prefix: this.prefixValue, phone: this.phoneValue };
26
+ this.touched = true;
27
+ if (this.debounceTime) {
28
+ clearTimeout(this.debounceTime);
29
+ }
30
+ this.debounceTime = setTimeout(() => {
31
+ this.isValid = this.setValidity();
32
+ this.errorMessage = this.setErrorMessage();
33
+ this.emitValueHandler(true);
34
+ }, 500);
35
+ };
36
+ this.handleBlur = () => {
37
+ this.isValid = this.setValidity();
38
+ this.touched = true;
39
+ this.errorMessage = this.setErrorMessage();
40
+ };
22
41
  this.setClientStyling = () => {
23
42
  let sheet = document.createElement('style');
24
43
  sheet.innerHTML = this.clientStyling;
@@ -28,7 +47,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
28
47
  validityChanged() {
29
48
  this.validityStateHandler({ valid: this.isValid, name: this.name });
30
49
  if (this.emitValue == true) {
31
- this.valueHandler({ name: this.name, value: this.value });
50
+ this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
32
51
  }
33
52
  }
34
53
  validityStateHandler(inputStateEvent) {
@@ -36,7 +55,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
36
55
  }
37
56
  emitValueHandler(newValue) {
38
57
  if (newValue == true && this.isValid) {
39
- this.valueHandler({ name: this.name, value: this.value });
58
+ this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
40
59
  }
41
60
  }
42
61
  valueHandler(inputValueEvent) {
@@ -51,14 +70,15 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
51
70
  connectedCallback() {
52
71
  this.validationPattern = this.setPattern();
53
72
  if (this.defaultValue) {
54
- this.prefixValue = this.defaultValue.split('|')[0];
55
- this.phoneValue = this.defaultValue.split('|')[1];
73
+ this.prefixValue = this.defaultValue.prefix ? this.defaultValue.prefix : this.defaultValue;
74
+ this.phoneValue = this.defaultValue.phone || null;
56
75
  }
57
76
  }
58
77
  componentWillLoad() {
59
78
  if (this.action) {
60
79
  if (this.action.split(" ")[0] == 'GET') {
61
- return this.getPhoneCodes().then((options) => {
80
+ const endpoint = this.action.split(" ")[1];
81
+ return this.getPhoneCodes(endpoint).then((options) => {
62
82
  this.phoneCodesOptions = options.phoneCodes.map(code => {
63
83
  return { label: code.Prefix, value: code.Prefix };
64
84
  });
@@ -74,14 +94,16 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
74
94
  this.limitStylingAppends = true;
75
95
  }
76
96
  // end custom styling area
97
+ }
98
+ componentDidLoad() {
99
+ this.isValid = this.setValidity();
77
100
  if (this.defaultValue) {
78
- this.value = `${this.prefixValue}|${this.phoneValue}`;
101
+ this.value = this.defaultValue;
79
102
  this.valueHandler({ name: this.name, value: this.value });
80
103
  }
81
104
  }
82
- getPhoneCodes() {
83
- // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
84
- const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes");
105
+ getPhoneCodes(endpoint) {
106
+ const url = new URL(endpoint);
85
107
  return new Promise((resolve, reject) => {
86
108
  fetch(url.href)
87
109
  .then((res) => res.json())
@@ -93,17 +115,9 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
93
115
  });
94
116
  });
95
117
  }
96
- handleInput(event) {
97
- this.phoneValue = event.target.value;
98
- this.value = `${this.prefixValue}|${this.phoneValue}`;
99
- this.errorMessage = this.setErrorMessage();
100
- this.isValid = this.setValidity();
101
- this.validityStateHandler({ valid: this.isValid, name: this.name });
102
- this.emitValueHandler(true);
103
- }
104
118
  handlePrefixInput(event) {
105
119
  this.prefixValue = event.target.value;
106
- this.value = `${this.prefixValue}|${this.phoneValue}`;
120
+ this.value = { prefix: this.prefixValue, phone: this.phoneValue };
107
121
  this.emitValueHandler(true);
108
122
  }
109
123
  setValidity() {
@@ -134,9 +148,12 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
134
148
  return null;
135
149
  }
136
150
  render() {
137
- const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
138
- return h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'tel__wrapper--flex-label' }, h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
139
- h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("small", { class: 'tel__error-message' }, this.errorMessage));
151
+ let invalidClass;
152
+ if (this.touched) {
153
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
154
+ }
155
+ return h("div", { class: `tel__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'tel__wrapper--flex-label' }, h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
156
+ h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { class: 'tel__error-message' }, this.errorMessage));
140
157
  }
141
158
  static get watchers() { return {
142
159
  "isValid": ["validityChanged"],
@@ -150,7 +167,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
150
167
  "showLabels": [516, "show-labels"],
151
168
  "action": [513],
152
169
  "validation": [16],
153
- "defaultValue": [513, "default-value"],
170
+ "defaultValue": [520, "default-value"],
154
171
  "autofilled": [516],
155
172
  "tooltip": [513],
156
173
  "language": [513],
package/dist/components/text-input2.js CHANGED
@@ -25,6 +25,26 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
25
25
  this.validationPattern = '';
26
26
  this.duplicateInputValue = null;
27
27
  this.touched = false;
28
+ this.handleInput = (event) => {
29
+ this.value = event.target.value;
30
+ this.touched = true;
31
+ if (this.debounceTime) {
32
+ clearTimeout(this.debounceTime);
33
+ }
34
+ this.debounceTime = setTimeout(() => {
35
+ this.isValid = this.setValidity();
36
+ this.errorMessage = this.setErrorMessage();
37
+ this.validityStateHandler({ valid: this.isValid, name: this.name });
38
+ this.emitValueHandler(true);
39
+ }, 500);
40
+ };
41
+ this.handleBlur = (event) => {
42
+ this.value = event.target.value;
43
+ this.touched = true;
44
+ this.isValid = this.setValidity();
45
+ this.errorMessage = this.setErrorMessage();
46
+ this.validityStateHandler({ valid: this.isValid, name: this.name });
47
+ };
28
48
  this.setClientStyling = () => {
29
49
  let sheet = document.createElement('style');
30
50
  sheet.innerHTML = this.clientStyling;
@@ -32,6 +52,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
32
52
  };
33
53
  }
34
54
  validityChanged() {
55
+ this.validityStateHandler({ valid: this.isValid, name: this.name });
35
56
  if (this.emitValue == true) {
36
57
  this.valueHandler({ name: this.name, value: this.value });
37
58
  }
@@ -54,12 +75,16 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
54
75
  this.showTooltip = false;
55
76
  }
56
77
  valueChangedHandler(event) {
57
- if (this.isDuplicateInput) {
58
- if (this.name === event.detail.name + 'Duplicate') {
59
- this.duplicateInputValue = event.detail.value;
78
+ if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
79
+ this.duplicateInputValue = event.detail.value;
80
+ if (this.touched) {
81
+ this.isValid = this.setValidity();
82
+ this.errorMessage = this.setErrorMessage();
60
83
  }
61
84
  }
62
- if (this.name === event.detail.name + 'Duplicate' && this.name.replace('Duplicate', '') === event.detail.name && this.touched === true) {
85
+ if (this.name === event.detail.name + 'Duplicate'
86
+ && this.name.replace('Duplicate', '') === event.detail.name
87
+ && this.touched === true) {
63
88
  this.isValid = this.setValidity();
64
89
  this.errorMessage = this.setErrorMessage();
65
90
  }
@@ -75,25 +100,24 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
75
100
  this.limitStylingAppends = true;
76
101
  }
77
102
  // end custom styling area
103
+ }
104
+ componentDidLoad() {
105
+ this.isValid = this.setValidity();
78
106
  if (this.defaultValue) {
79
107
  this.value = this.defaultValue;
80
108
  this.valueHandler({ name: this.name, value: this.value });
109
+ if (this.isDuplicateInput) {
110
+ this.touched = true;
111
+ }
81
112
  }
82
113
  }
83
- handleInput(event) {
84
- this.value = event.target.value;
85
- this.isValid = this.setValidity();
86
- this.errorMessage = this.setErrorMessage();
87
- this.validityStateHandler({ valid: this.isValid, name: this.name });
88
- this.emitValueHandler(true);
89
- this.touched = true;
90
- }
91
114
  setValidity() {
115
+ var _a;
92
116
  if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
93
117
  return false;
94
118
  }
95
119
  else {
96
- return this.inputReference.validity.valid;
120
+ return (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity.valid;
97
121
  }
98
122
  }
99
123
  setPattern() {
@@ -124,9 +148,12 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
124
148
  return null;
125
149
  }
126
150
  render() {
127
- const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
128
- return h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'text__wrapper--flex' }, h("label", { class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
129
- h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("small", { class: 'text__error-message' }, this.errorMessage));
151
+ let invalidClass;
152
+ if (this.touched) {
153
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
154
+ }
155
+ return h("div", { class: `text__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'text__wrapper--flex' }, h("label", { class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
156
+ h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'text__error-message' }, this.errorMessage));
130
157
  }
131
158
  static get watchers() { return {
132
159
  "isValid": ["validityChanged"],