@everymatrix/general-input 1.43.4 → 1.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/checkbox-group-input_10.cjs.entry.js +3873 -1756
  3. package/dist/cjs/general-input.cjs.entry.js +65 -62
  4. package/dist/cjs/general-input.cjs.js +17 -11
  5. package/dist/cjs/index-8cb018cb.js +1316 -0
  6. package/dist/cjs/index.cjs.js +13 -13
  7. package/dist/cjs/loader.cjs.js +7 -13
  8. package/dist/cjs/locale.utils-fdc29445.js +147 -0
  9. package/dist/cjs/toggle-checkbox-input.cjs.entry.js +77 -74
  10. package/dist/collection/collection-manifest.json +14 -14
  11. package/dist/collection/components/checkbox-group-input/checkbox-group-input.js +368 -353
  12. package/dist/collection/components/checkbox-input/checkbox-input.js +325 -315
  13. package/dist/collection/components/date-input/date-input.css +2 -2
  14. package/dist/collection/components/date-input/date-input.js +397 -376
  15. package/dist/collection/components/email-input/email-input.css +7 -11
  16. package/dist/collection/components/email-input/email-input.js +404 -385
  17. package/dist/collection/components/general-input/general-input.js +373 -367
  18. package/dist/collection/components/general-input/index.js +1 -0
  19. package/dist/collection/components/number-input/number-input.js +370 -352
  20. package/dist/collection/components/password-input/password-input.css +2 -4
  21. package/dist/collection/components/password-input/password-input.js +513 -540
  22. package/dist/collection/components/radio-input/radio-input.js +301 -286
  23. package/dist/collection/components/select-input/select-input.css +8 -9
  24. package/dist/collection/components/select-input/select-input.js +427 -414
  25. package/dist/collection/components/tel-input/tel-input.css +1 -1
  26. package/dist/collection/components/tel-input/tel-input.js +440 -422
  27. package/dist/collection/components/text-input/text-input.css +0 -1
  28. package/dist/collection/components/text-input/text-input.js +444 -429
  29. package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +327 -318
  30. package/dist/collection/index.js +13 -13
  31. package/dist/collection/utils/locale.utils.js +133 -133
  32. package/dist/collection/utils/utils.js +3 -3
  33. package/dist/esm/app-globals-0f993ce5.js +3 -0
  34. package/dist/esm/checkbox-group-input_10.entry.js +3873 -1756
  35. package/dist/esm/general-input.entry.js +65 -62
  36. package/dist/esm/general-input.js +14 -11
  37. package/dist/esm/index-514fda47.js +1287 -0
  38. package/dist/esm/index.js +13 -13
  39. package/dist/esm/loader.js +7 -13
  40. package/dist/esm/locale.utils-75b7d185.js +144 -0
  41. package/dist/esm/toggle-checkbox-input.entry.js +77 -74
  42. package/dist/general-input/general-input.esm.js +1 -1
  43. package/dist/general-input/p-03e81c11.js +2 -0
  44. package/dist/general-input/p-122566dd.entry.js +5430 -0
  45. package/dist/general-input/p-1913dcb0.entry.js +1 -0
  46. package/dist/general-input/p-e1255160.js +1 -0
  47. package/dist/general-input/p-e7df9c4a.entry.js +1 -0
  48. package/dist/stencil.config.dev.js +17 -0
  49. package/dist/stencil.config.js +14 -19
  50. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +2 -0
  51. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +2 -0
  52. package/dist/types/components/checkbox-group-input/checkbox-group-input.d.ts +68 -68
  53. package/dist/types/components/checkbox-input/checkbox-input.d.ts +61 -62
  54. package/dist/types/components/date-input/date-input.d.ts +78 -78
  55. package/dist/types/components/email-input/email-input.d.ts +77 -77
  56. package/dist/types/components/general-input/general-input.d.ts +72 -72
  57. package/dist/types/components/general-input/index.d.ts +1 -0
  58. package/dist/types/components/number-input/number-input.d.ts +71 -71
  59. package/dist/types/components/password-input/password-input.d.ts +87 -92
  60. package/dist/types/components/radio-input/radio-input.d.ts +55 -55
  61. package/dist/types/components/select-input/select-input.d.ts +79 -79
  62. package/dist/types/components/tel-input/tel-input.d.ts +85 -85
  63. package/dist/types/components/text-input/text-input.d.ts +81 -81
  64. package/dist/types/components/toggle-checkbox-input/toggle-checkbox-input.d.ts +63 -64
  65. package/dist/types/components.d.ts +201 -31
  66. package/dist/types/stencil-public-runtime.d.ts +142 -33
  67. package/dist/types/utils/locale.utils.d.ts +8 -8
  68. package/dist/types/utils/types.d.ts +54 -54
  69. package/loader/cdn.js +1 -3
  70. package/loader/index.cjs.js +1 -3
  71. package/loader/index.d.ts +13 -1
  72. package/loader/index.es2017.js +1 -3
  73. package/loader/index.js +1 -3
  74. package/loader/package.json +1 -0
  75. package/package.json +8 -1
  76. package/dist/cjs/index-132a0774.js +0 -1327
  77. package/dist/cjs/locale.utils-2fa6f747.js +0 -147
  78. package/dist/components/active-mixin.js +0 -975
  79. package/dist/components/checkbox-group-input.d.ts +0 -11
  80. package/dist/components/checkbox-group-input.js +0 -6
  81. package/dist/components/checkbox-group-input2.js +0 -1078
  82. package/dist/components/checkbox-input.d.ts +0 -11
  83. package/dist/components/checkbox-input.js +0 -6
  84. package/dist/components/checkbox-input2.js +0 -132
  85. package/dist/components/date-input.d.ts +0 -11
  86. package/dist/components/date-input.js +0 -6
  87. package/dist/components/date-input2.js +0 -11556
  88. package/dist/components/email-input.d.ts +0 -11
  89. package/dist/components/email-input.js +0 -6
  90. package/dist/components/email-input2.js +0 -171
  91. package/dist/components/field-mixin.js +0 -12426
  92. package/dist/components/general-input.d.ts +0 -11
  93. package/dist/components/general-input.js +0 -6
  94. package/dist/components/general-input2.js +0 -344
  95. package/dist/components/index.d.ts +0 -26
  96. package/dist/components/index.js +0 -18
  97. package/dist/components/input-field-shared-styles.js +0 -1211
  98. package/dist/components/number-input.d.ts +0 -11
  99. package/dist/components/number-input.js +0 -6
  100. package/dist/components/number-input2.js +0 -158
  101. package/dist/components/password-input.d.ts +0 -11
  102. package/dist/components/password-input.js +0 -6
  103. package/dist/components/password-input2.js +0 -1059
  104. package/dist/components/radio-input.d.ts +0 -11
  105. package/dist/components/radio-input.js +0 -6
  106. package/dist/components/radio-input2.js +0 -114
  107. package/dist/components/select-input.d.ts +0 -11
  108. package/dist/components/select-input.js +0 -6
  109. package/dist/components/select-input2.js +0 -183
  110. package/dist/components/tel-input.d.ts +0 -11
  111. package/dist/components/tel-input.js +0 -6
  112. package/dist/components/tel-input2.js +0 -197
  113. package/dist/components/text-input.d.ts +0 -11
  114. package/dist/components/text-input.js +0 -6
  115. package/dist/components/text-input2.js +0 -199
  116. package/dist/components/toggle-checkbox-input.d.ts +0 -11
  117. package/dist/components/toggle-checkbox-input.js +0 -6
  118. package/dist/components/tooltipIcon.js +0 -146
  119. package/dist/components/vaadin-button.js +0 -490
  120. package/dist/components/vaadin-combo-box.js +0 -4512
  121. package/dist/components/virtual-keyboard-controller.js +0 -2001
  122. package/dist/esm/index-db76d5b5.js +0 -1299
  123. package/dist/esm/locale.utils-30fb5289.js +0 -144
  124. package/dist/esm/polyfills/core-js.js +0 -11
  125. package/dist/esm/polyfills/css-shim.js +0 -1
  126. package/dist/esm/polyfills/dom.js +0 -79
  127. package/dist/esm/polyfills/es5-html-element.js +0 -1
  128. package/dist/esm/polyfills/index.js +0 -34
  129. package/dist/esm/polyfills/system.js +0 -6
  130. package/dist/general-input/p-6ae987d0.entry.js +0 -1
  131. package/dist/general-input/p-b408093e.js +0 -1
  132. package/dist/general-input/p-b64caafa.entry.js +0 -3646
  133. package/dist/general-input/p-f659e9ee.entry.js +0 -1
  134. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/general-input/.stencil/packages/general-input/stencil.config.d.ts +0 -2
  135. /package/dist/cjs/{tooltipIcon-092a795f.js → tooltipIcon-7e9ee226.js} +0 -0
  136. /package/dist/esm/{tooltipIcon-99c1c7b7.js → tooltipIcon-0a5a06a2.js} +0 -0
  137. /package/dist/general-input/{p-f4f4ccda.js → p-2dccd0bf.js} +0 -0
  138. /package/dist/general-input/{p-04d4b145.js → p-ba14eb83.js} +0 -0
@@ -1,403 +1,422 @@
1
- import { Component, h, Prop, State, Watch, Event, Listen } from '@stencil/core';
2
- import { translate } from '../../utils/locale.utils';
3
- import tooltipIcon from '../../utils/tooltipIcon.svg';
1
+ import { h } from "@stencil/core";
2
+ import { translate } from "../../utils/locale.utils";
3
+ import tooltipIcon from "../../utils/tooltipIcon.svg";
4
4
  export class EmailInput {
5
- constructor() {
6
- /**
7
- * Client custom styling via inline style
8
- */
9
- this.clientStyling = '';
10
- this.limitStylingAppends = false;
11
- this.showTooltip = false;
12
- this.validationPattern = '';
13
- this.touched = false;
14
- this.handleInput = (event) => {
15
- this.value = event.target.value;
16
- this.touched = true;
17
- if (this.debounceTime) {
18
- clearTimeout(this.debounceTime);
19
- }
20
- this.debounceTime = setTimeout(() => {
21
- this.isValid = this.setValidity();
22
- this.errorMessage = this.setErrorMessage();
23
- this.emitValueHandler(true);
24
- }, 500);
25
- };
26
- this.handleBlur = () => {
27
- this.isValid = this.setValidity();
28
- this.errorMessage = this.setErrorMessage();
29
- this.touched = true;
30
- };
31
- this.setClientStyling = () => {
32
- let sheet = document.createElement('style');
33
- sheet.innerHTML = this.clientStyling;
34
- this.stylingContainer.prepend(sheet);
35
- };
36
- }
37
- validityChanged() {
38
- this.validityStateHandler({ valid: this.isValid, name: this.name });
39
- if (this.emitValue == true) {
40
- this.valueHandler({ name: this.name, value: this.value });
5
+ constructor() {
6
+ this.validationPattern = '';
7
+ this.touched = false;
8
+ this.handleInput = (event) => {
9
+ this.value = event.target.value;
10
+ this.touched = true;
11
+ if (this.debounceTime) {
12
+ clearTimeout(this.debounceTime);
13
+ }
14
+ this.debounceTime = setTimeout(() => {
15
+ this.isValid = this.setValidity();
16
+ this.errorMessage = this.setErrorMessage();
17
+ this.emitValueHandler(true);
18
+ }, 500);
19
+ };
20
+ this.handleBlur = () => {
21
+ this.isValid = this.setValidity();
22
+ this.errorMessage = this.setErrorMessage();
23
+ this.touched = true;
24
+ };
25
+ this.setClientStyling = () => {
26
+ let sheet = document.createElement('style');
27
+ sheet.innerHTML = this.clientStyling;
28
+ this.stylingContainer.prepend(sheet);
29
+ };
30
+ this.name = undefined;
31
+ this.displayName = undefined;
32
+ this.placeholder = undefined;
33
+ this.validation = undefined;
34
+ this.defaultValue = undefined;
35
+ this.autofilled = undefined;
36
+ this.tooltip = undefined;
37
+ this.language = undefined;
38
+ this.emitValue = undefined;
39
+ this.isDuplicateInput = undefined;
40
+ this.clientStyling = '';
41
+ this.errorMessage = undefined;
42
+ this.isValid = undefined;
43
+ this.limitStylingAppends = false;
44
+ this.showTooltip = false;
41
45
  }
42
- }
43
- emitValueHandler(newValue) {
44
- if (newValue == true && this.isValid) {
45
- this.valueHandler({ name: this.name, value: this.value });
46
+ validityChanged() {
47
+ this.validityStateHandler({ valid: this.isValid, name: this.name });
48
+ if (this.emitValue == true) {
49
+ this.valueHandler({ name: this.name, value: this.value });
50
+ }
46
51
  }
47
- }
48
- validityStateHandler(inputStateEvent) {
49
- this.sendValidityState.emit(inputStateEvent);
50
- }
51
- valueHandler(inputValueEvent) {
52
- this.sendInputValue.emit(inputValueEvent);
53
- }
54
- handleClickOutside(event) {
55
- if (event.composedPath()[0] === this.tooltipIconReference)
56
- return;
57
- if (event.composedPath()[0] !== this.tooltipReference)
58
- this.showTooltip = false;
59
- }
60
- valueChangedHandler(event) {
61
- if (this.isDuplicateInput) {
62
- if (this.name === event.detail.name + 'Duplicate') {
63
- this.duplicateInputValue = event.detail.value;
64
- }
52
+ emitValueHandler(newValue) {
53
+ if (newValue == true && this.isValid) {
54
+ this.valueHandler({ name: this.name, value: this.value });
55
+ }
65
56
  }
66
- }
67
- connectedCallback() {
68
- this.validationPattern = this.setPattern();
69
- }
70
- componentDidRender() {
71
- // start custom styling area
72
- if (!this.limitStylingAppends && this.stylingContainer) {
73
- if (this.clientStyling)
74
- this.setClientStyling();
75
- this.limitStylingAppends = true;
57
+ validityStateHandler(inputStateEvent) {
58
+ this.sendValidityState.emit(inputStateEvent);
76
59
  }
77
- // end custom styling area
78
- }
79
- componentDidLoad() {
80
- this.isValid = this.setValidity();
81
- if (this.defaultValue) {
82
- this.value = this.defaultValue;
83
- this.valueHandler({ name: this.name, value: this.value });
60
+ valueHandler(inputValueEvent) {
61
+ this.sendInputValue.emit(inputValueEvent);
84
62
  }
85
- }
86
- setValidity() {
87
- return this.inputReference.validity.valid;
88
- }
89
- setPattern() {
90
- var _a, _b;
91
- if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
92
- return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
63
+ handleClickOutside(event) {
64
+ if (event.composedPath()[0] === this.tooltipIconReference)
65
+ return;
66
+ if (event.composedPath()[0] !== this.tooltipReference)
67
+ this.showTooltip = false;
93
68
  }
94
- }
95
- setErrorMessage() {
96
- var _a, _b, _c, _d;
97
- if (this.inputReference.validity.patternMismatch) {
98
- const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
99
- const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
100
- return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
69
+ valueChangedHandler(event) {
70
+ if (this.isDuplicateInput) {
71
+ if (this.name === event.detail.name + 'Duplicate') {
72
+ this.duplicateInputValue = event.detail.value;
73
+ }
74
+ }
101
75
  }
102
- if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
103
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
76
+ connectedCallback() {
77
+ this.validationPattern = this.setPattern();
104
78
  }
105
- if (this.inputReference.validity.valueMissing) {
106
- return translate('requiredError', this.language);
79
+ componentDidRender() {
80
+ // start custom styling area
81
+ if (!this.limitStylingAppends && this.stylingContainer) {
82
+ if (this.clientStyling)
83
+ this.setClientStyling();
84
+ this.limitStylingAppends = true;
85
+ }
86
+ // end custom styling area
107
87
  }
108
- if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
109
- const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
110
- const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
111
- return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
88
+ componentDidLoad() {
89
+ this.isValid = this.setValidity();
90
+ if (this.defaultValue) {
91
+ this.value = this.defaultValue;
92
+ this.valueHandler({ name: this.name, value: this.value });
93
+ }
112
94
  }
113
- }
114
- renderTooltip() {
115
- if (this.showTooltip) {
116
- return (h("div", { class: `email__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
95
+ setValidity() {
96
+ return this.inputReference.validity.valid;
117
97
  }
118
- return null;
119
- }
120
- render() {
121
- let invalidClass = '';
122
- if (this.touched) {
123
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
98
+ setPattern() {
99
+ var _a, _b;
100
+ if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
101
+ return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
102
+ }
124
103
  }
125
- return h("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el },
126
- h("div", { class: 'email__wrapper--flex' },
127
- h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName),
128
- h("div", { class: 'email__wrapper--relative' },
129
- this.tooltip &&
130
- h("img", { class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }),
131
- this.renderTooltip())),
132
- h("input", { 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 }),
133
- h("small", { class: 'email__error-message' }, this.errorMessage));
134
- }
135
- static get is() { return "email-input"; }
136
- static get encapsulation() { return "shadow"; }
137
- static get originalStyleUrls() { return {
138
- "$": ["email-input.scss"]
139
- }; }
140
- static get styleUrls() { return {
141
- "$": ["email-input.css"]
142
- }; }
143
- static get properties() { return {
144
- "name": {
145
- "type": "string",
146
- "mutable": false,
147
- "complexType": {
148
- "original": "string",
149
- "resolved": "string",
150
- "references": {}
151
- },
152
- "required": false,
153
- "optional": false,
154
- "docs": {
155
- "tags": [],
156
- "text": "Name of the input."
157
- },
158
- "attribute": "name",
159
- "reflect": true
160
- },
161
- "displayName": {
162
- "type": "string",
163
- "mutable": false,
164
- "complexType": {
165
- "original": "string",
166
- "resolved": "string",
167
- "references": {}
168
- },
169
- "required": false,
170
- "optional": false,
171
- "docs": {
172
- "tags": [],
173
- "text": "Name of input to be shown to the user."
174
- },
175
- "attribute": "display-name",
176
- "reflect": true
177
- },
178
- "placeholder": {
179
- "type": "string",
180
- "mutable": false,
181
- "complexType": {
182
- "original": "string",
183
- "resolved": "string",
184
- "references": {}
185
- },
186
- "required": false,
187
- "optional": false,
188
- "docs": {
189
- "tags": [],
190
- "text": "Placeholder text to be shown."
191
- },
192
- "attribute": "placeholder",
193
- "reflect": true
194
- },
195
- "validation": {
196
- "type": "unknown",
197
- "mutable": false,
198
- "complexType": {
199
- "original": "ValidationSchema",
200
- "resolved": "ValidationSchema",
201
- "references": {
202
- "ValidationSchema": {
203
- "location": "import",
204
- "path": "../../utils/types"
205
- }
104
+ setErrorMessage() {
105
+ var _a, _b, _c, _d;
106
+ if (this.inputReference.validity.patternMismatch) {
107
+ const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
108
+ const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
109
+ return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
110
+ }
111
+ if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
112
+ return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
113
+ }
114
+ if (this.inputReference.validity.valueMissing) {
115
+ return translate('requiredError', this.language);
116
+ }
117
+ if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
118
+ const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
119
+ const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
120
+ return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
206
121
  }
207
- },
208
- "required": false,
209
- "optional": false,
210
- "docs": {
211
- "tags": [],
212
- "text": "Object of validation rules for the input."
213
- }
214
- },
215
- "defaultValue": {
216
- "type": "string",
217
- "mutable": false,
218
- "complexType": {
219
- "original": "string",
220
- "resolved": "string",
221
- "references": {}
222
- },
223
- "required": false,
224
- "optional": false,
225
- "docs": {
226
- "tags": [],
227
- "text": "Default value for the input."
228
- },
229
- "attribute": "default-value",
230
- "reflect": true
231
- },
232
- "autofilled": {
233
- "type": "boolean",
234
- "mutable": false,
235
- "complexType": {
236
- "original": "boolean",
237
- "resolved": "boolean",
238
- "references": {}
239
- },
240
- "required": false,
241
- "optional": false,
242
- "docs": {
243
- "tags": [],
244
- "text": "Boolean. Determines if input should be readonly."
245
- },
246
- "attribute": "autofilled",
247
- "reflect": true
248
- },
249
- "tooltip": {
250
- "type": "string",
251
- "mutable": false,
252
- "complexType": {
253
- "original": "string",
254
- "resolved": "string",
255
- "references": {}
256
- },
257
- "required": false,
258
- "optional": false,
259
- "docs": {
260
- "tags": [],
261
- "text": "Tooltip text."
262
- },
263
- "attribute": "tooltip",
264
- "reflect": true
265
- },
266
- "language": {
267
- "type": "string",
268
- "mutable": false,
269
- "complexType": {
270
- "original": "string",
271
- "resolved": "string",
272
- "references": {}
273
- },
274
- "required": false,
275
- "optional": false,
276
- "docs": {
277
- "tags": [],
278
- "text": "Currently selected language."
279
- },
280
- "attribute": "language",
281
- "reflect": true
282
- },
283
- "emitValue": {
284
- "type": "boolean",
285
- "mutable": false,
286
- "complexType": {
287
- "original": "boolean",
288
- "resolved": "boolean",
289
- "references": {}
290
- },
291
- "required": false,
292
- "optional": false,
293
- "docs": {
294
- "tags": [],
295
- "text": "State passed down from the parent element. Will trigger the input to send it's value through an event."
296
- },
297
- "attribute": "emit-value",
298
- "reflect": true
299
- },
300
- "isDuplicateInput": {
301
- "type": "boolean",
302
- "mutable": false,
303
- "complexType": {
304
- "original": "boolean",
305
- "resolved": "boolean",
306
- "references": {}
307
- },
308
- "required": false,
309
- "optional": false,
310
- "docs": {
311
- "tags": [],
312
- "text": "Flag for duplicate inputs, it sets up the input for certain validation rules."
313
- },
314
- "attribute": "is-duplicate-input",
315
- "reflect": true
316
- },
317
- "clientStyling": {
318
- "type": "string",
319
- "mutable": false,
320
- "complexType": {
321
- "original": "string",
322
- "resolved": "string",
323
- "references": {}
324
- },
325
- "required": false,
326
- "optional": false,
327
- "docs": {
328
- "tags": [],
329
- "text": "Client custom styling via inline style"
330
- },
331
- "attribute": "client-styling",
332
- "reflect": true,
333
- "defaultValue": "''"
334
122
  }
335
- }; }
336
- static get states() { return {
337
- "errorMessage": {},
338
- "isValid": {},
339
- "limitStylingAppends": {},
340
- "showTooltip": {}
341
- }; }
342
- static get events() { return [{
343
- "method": "sendValidityState",
344
- "name": "sendValidityState",
345
- "bubbles": true,
346
- "cancelable": true,
347
- "composed": true,
348
- "docs": {
349
- "tags": [],
350
- "text": ""
351
- },
352
- "complexType": {
353
- "original": "InputStateEvent",
354
- "resolved": "InputStateEvent",
355
- "references": {
356
- "InputStateEvent": {
357
- "location": "import",
358
- "path": "../../utils/types"
359
- }
123
+ renderTooltip() {
124
+ if (this.showTooltip) {
125
+ return (h("div", { class: `email__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
360
126
  }
361
- }
362
- }, {
363
- "method": "sendInputValue",
364
- "name": "sendInputValue",
365
- "bubbles": true,
366
- "cancelable": true,
367
- "composed": true,
368
- "docs": {
369
- "tags": [],
370
- "text": ""
371
- },
372
- "complexType": {
373
- "original": "InputValueEvent",
374
- "resolved": "InputValueEvent",
375
- "references": {
376
- "InputValueEvent": {
377
- "location": "import",
378
- "path": "../../utils/types"
379
- }
127
+ return null;
128
+ }
129
+ render() {
130
+ let invalidClass = '';
131
+ if (this.touched) {
132
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
380
133
  }
381
- }
382
- }]; }
383
- static get watchers() { return [{
384
- "propName": "isValid",
385
- "methodName": "validityChanged"
386
- }, {
387
- "propName": "emitValue",
388
- "methodName": "emitValueHandler"
389
- }]; }
390
- static get listeners() { return [{
391
- "name": "click",
392
- "method": "handleClickOutside",
393
- "target": "document",
394
- "capture": false,
395
- "passive": false
396
- }, {
397
- "name": "sendInputValue",
398
- "method": "valueChangedHandler",
399
- "target": "body",
400
- "capture": false,
401
- "passive": false
402
- }]; }
134
+ return h("div", { key: '23ac67984ab7a0f4db01e5fe01f4f326b4c6a912', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'aa2405e435aea20f1678dd74776a8ce4094bc95b', class: 'email__wrapper--flex' }, h("label", { key: '970b83bbcf082d1721c1647993fecd076939b65d', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '2f03eaf161aab9b45282c1bc0de15bea8455427c', class: 'email__wrapper--relative' }, this.tooltip &&
135
+ h("img", { key: '3c34b91f0b478cf04f5aabc5fdd33a8ed73d091b', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '491f83c0f562893c02e3425b4d54eecc214e3c95', 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: 'edb6660d958cc5d0cb41b0db195bd7e847ecbefe', class: 'email__error-message' }, this.errorMessage));
136
+ }
137
+ static get is() { return "email-input"; }
138
+ static get encapsulation() { return "shadow"; }
139
+ static get originalStyleUrls() {
140
+ return {
141
+ "$": ["email-input.scss"]
142
+ };
143
+ }
144
+ static get styleUrls() {
145
+ return {
146
+ "$": ["email-input.css"]
147
+ };
148
+ }
149
+ static get properties() {
150
+ return {
151
+ "name": {
152
+ "type": "string",
153
+ "mutable": false,
154
+ "complexType": {
155
+ "original": "string",
156
+ "resolved": "string",
157
+ "references": {}
158
+ },
159
+ "required": false,
160
+ "optional": false,
161
+ "docs": {
162
+ "tags": [],
163
+ "text": "Name of the input."
164
+ },
165
+ "attribute": "name",
166
+ "reflect": true
167
+ },
168
+ "displayName": {
169
+ "type": "string",
170
+ "mutable": false,
171
+ "complexType": {
172
+ "original": "string",
173
+ "resolved": "string",
174
+ "references": {}
175
+ },
176
+ "required": false,
177
+ "optional": false,
178
+ "docs": {
179
+ "tags": [],
180
+ "text": "Name of input to be shown to the user."
181
+ },
182
+ "attribute": "display-name",
183
+ "reflect": true
184
+ },
185
+ "placeholder": {
186
+ "type": "string",
187
+ "mutable": false,
188
+ "complexType": {
189
+ "original": "string",
190
+ "resolved": "string",
191
+ "references": {}
192
+ },
193
+ "required": false,
194
+ "optional": false,
195
+ "docs": {
196
+ "tags": [],
197
+ "text": "Placeholder text to be shown."
198
+ },
199
+ "attribute": "placeholder",
200
+ "reflect": true
201
+ },
202
+ "validation": {
203
+ "type": "unknown",
204
+ "mutable": false,
205
+ "complexType": {
206
+ "original": "ValidationSchema",
207
+ "resolved": "ValidationSchema",
208
+ "references": {
209
+ "ValidationSchema": {
210
+ "location": "import",
211
+ "path": "../../utils/types",
212
+ "id": "../../../../packages/stencil/general-input/src/utils/types.ts::ValidationSchema"
213
+ }
214
+ }
215
+ },
216
+ "required": false,
217
+ "optional": false,
218
+ "docs": {
219
+ "tags": [],
220
+ "text": "Object of validation rules for the input."
221
+ }
222
+ },
223
+ "defaultValue": {
224
+ "type": "string",
225
+ "mutable": false,
226
+ "complexType": {
227
+ "original": "string",
228
+ "resolved": "string",
229
+ "references": {}
230
+ },
231
+ "required": false,
232
+ "optional": false,
233
+ "docs": {
234
+ "tags": [],
235
+ "text": "Default value for the input."
236
+ },
237
+ "attribute": "default-value",
238
+ "reflect": true
239
+ },
240
+ "autofilled": {
241
+ "type": "boolean",
242
+ "mutable": false,
243
+ "complexType": {
244
+ "original": "boolean",
245
+ "resolved": "boolean",
246
+ "references": {}
247
+ },
248
+ "required": false,
249
+ "optional": false,
250
+ "docs": {
251
+ "tags": [],
252
+ "text": "Boolean. Determines if input should be readonly."
253
+ },
254
+ "attribute": "autofilled",
255
+ "reflect": true
256
+ },
257
+ "tooltip": {
258
+ "type": "string",
259
+ "mutable": false,
260
+ "complexType": {
261
+ "original": "string",
262
+ "resolved": "string",
263
+ "references": {}
264
+ },
265
+ "required": false,
266
+ "optional": false,
267
+ "docs": {
268
+ "tags": [],
269
+ "text": "Tooltip text."
270
+ },
271
+ "attribute": "tooltip",
272
+ "reflect": true
273
+ },
274
+ "language": {
275
+ "type": "string",
276
+ "mutable": false,
277
+ "complexType": {
278
+ "original": "string",
279
+ "resolved": "string",
280
+ "references": {}
281
+ },
282
+ "required": false,
283
+ "optional": false,
284
+ "docs": {
285
+ "tags": [],
286
+ "text": "Currently selected language."
287
+ },
288
+ "attribute": "language",
289
+ "reflect": true
290
+ },
291
+ "emitValue": {
292
+ "type": "boolean",
293
+ "mutable": false,
294
+ "complexType": {
295
+ "original": "boolean",
296
+ "resolved": "boolean",
297
+ "references": {}
298
+ },
299
+ "required": false,
300
+ "optional": false,
301
+ "docs": {
302
+ "tags": [],
303
+ "text": "State passed down from the parent element. Will trigger the input to send it's value through an event."
304
+ },
305
+ "attribute": "emit-value",
306
+ "reflect": true
307
+ },
308
+ "isDuplicateInput": {
309
+ "type": "boolean",
310
+ "mutable": false,
311
+ "complexType": {
312
+ "original": "boolean",
313
+ "resolved": "boolean",
314
+ "references": {}
315
+ },
316
+ "required": false,
317
+ "optional": false,
318
+ "docs": {
319
+ "tags": [],
320
+ "text": "Flag for duplicate inputs, it sets up the input for certain validation rules."
321
+ },
322
+ "attribute": "is-duplicate-input",
323
+ "reflect": true
324
+ },
325
+ "clientStyling": {
326
+ "type": "string",
327
+ "mutable": false,
328
+ "complexType": {
329
+ "original": "string",
330
+ "resolved": "string",
331
+ "references": {}
332
+ },
333
+ "required": false,
334
+ "optional": false,
335
+ "docs": {
336
+ "tags": [],
337
+ "text": "Client custom styling via inline style"
338
+ },
339
+ "attribute": "client-styling",
340
+ "reflect": true,
341
+ "defaultValue": "''"
342
+ }
343
+ };
344
+ }
345
+ static get states() {
346
+ return {
347
+ "errorMessage": {},
348
+ "isValid": {},
349
+ "limitStylingAppends": {},
350
+ "showTooltip": {}
351
+ };
352
+ }
353
+ static get events() {
354
+ return [{
355
+ "method": "sendValidityState",
356
+ "name": "sendValidityState",
357
+ "bubbles": true,
358
+ "cancelable": true,
359
+ "composed": true,
360
+ "docs": {
361
+ "tags": [],
362
+ "text": ""
363
+ },
364
+ "complexType": {
365
+ "original": "InputStateEvent",
366
+ "resolved": "InputStateEvent",
367
+ "references": {
368
+ "InputStateEvent": {
369
+ "location": "import",
370
+ "path": "../../utils/types",
371
+ "id": "../../../../packages/stencil/general-input/src/utils/types.ts::InputStateEvent"
372
+ }
373
+ }
374
+ }
375
+ }, {
376
+ "method": "sendInputValue",
377
+ "name": "sendInputValue",
378
+ "bubbles": true,
379
+ "cancelable": true,
380
+ "composed": true,
381
+ "docs": {
382
+ "tags": [],
383
+ "text": ""
384
+ },
385
+ "complexType": {
386
+ "original": "InputValueEvent",
387
+ "resolved": "InputValueEvent",
388
+ "references": {
389
+ "InputValueEvent": {
390
+ "location": "import",
391
+ "path": "../../utils/types",
392
+ "id": "../../../../packages/stencil/general-input/src/utils/types.ts::InputValueEvent"
393
+ }
394
+ }
395
+ }
396
+ }];
397
+ }
398
+ static get watchers() {
399
+ return [{
400
+ "propName": "isValid",
401
+ "methodName": "validityChanged"
402
+ }, {
403
+ "propName": "emitValue",
404
+ "methodName": "emitValueHandler"
405
+ }];
406
+ }
407
+ static get listeners() {
408
+ return [{
409
+ "name": "click",
410
+ "method": "handleClickOutside",
411
+ "target": "document",
412
+ "capture": false,
413
+ "passive": false
414
+ }, {
415
+ "name": "sendInputValue",
416
+ "method": "valueChangedHandler",
417
+ "target": "body",
418
+ "capture": false,
419
+ "passive": false
420
+ }];
421
+ }
403
422
  }