@everymatrix/general-input 1.90.7 → 1.90.8
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_14.cjs.entry.js +373 -345
- package/dist/cjs/general-input.cjs.js +2 -2
- package/dist/cjs/{index-3b546c2c.js → index-7a4b2771.js} +1 -4
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/checkbox-group-input/checkbox-group-input.js +34 -20
- package/dist/collection/components/checkbox-input/checkbox-input.js +33 -19
- package/dist/collection/components/date-input/date-input.js +34 -20
- package/dist/collection/components/email-input/email-input.js +34 -20
- package/dist/collection/components/general-input/general-input.js +35 -64
- package/dist/collection/components/number-input/number-input.js +34 -20
- package/dist/collection/components/password-input/password-input.js +34 -20
- package/dist/collection/components/postalcode-input/postalcode-input.js +35 -19
- package/dist/collection/components/radio-input/radio-input.js +36 -20
- package/dist/collection/components/select-input/select-input.js +35 -21
- package/dist/collection/components/tel-input/tel-input.js +34 -20
- package/dist/collection/components/text-input/text-input.js +36 -22
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +34 -20
- package/dist/collection/components/twofa-input/twofa-input.js +26 -59
- package/dist/esm/checkbox-group-input_14.entry.js +373 -345
- package/dist/esm/general-input.js +3 -3
- package/dist/esm/{index-ca174b7a.js → index-9174417a.js} +1 -4
- package/dist/esm/loader.js +3 -3
- package/dist/general-input/checkbox-group-input_14.entry.js +242 -242
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{index-ca174b7a.js → index-9174417a.js} +2 -2
- package/dist/types/components/checkbox-group-input/checkbox-group-input.d.ts +7 -4
- package/dist/types/components/checkbox-input/checkbox-input.d.ts +7 -4
- package/dist/types/components/date-input/date-input.d.ts +7 -4
- package/dist/types/components/email-input/email-input.d.ts +7 -4
- package/dist/types/components/general-input/general-input.d.ts +4 -6
- package/dist/types/components/number-input/number-input.d.ts +7 -4
- package/dist/types/components/password-input/password-input.d.ts +7 -4
- package/dist/types/components/postalcode-input/postalcode-input.d.ts +7 -4
- package/dist/types/components/radio-input/radio-input.d.ts +8 -4
- package/dist/types/components/select-input/select-input.d.ts +7 -4
- package/dist/types/components/tel-input/tel-input.d.ts +7 -4
- package/dist/types/components/text-input/text-input.d.ts +7 -4
- package/dist/types/components/toggle-checkbox-input/toggle-checkbox-input.d.ts +7 -4
- package/dist/types/components/twofa-input/twofa-input.d.ts +3 -7
- package/dist/types/components.d.ts +96 -0
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
4
|
import { ERROR_KEYS } from "../../utils/locale.utils";
|
|
5
|
+
import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
5
6
|
export class PostalCodeInput {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.value = '';
|
|
@@ -137,11 +138,6 @@ export class PostalCodeInput {
|
|
|
137
138
|
targetInput.focus();
|
|
138
139
|
}
|
|
139
140
|
};
|
|
140
|
-
this.setClientStyling = () => {
|
|
141
|
-
let sheet = document.createElement('style');
|
|
142
|
-
sheet.innerHTML = this.clientStyling;
|
|
143
|
-
this.stylingContainer.prepend(sheet);
|
|
144
|
-
};
|
|
145
141
|
this.handleOutsideClick = (event) => {
|
|
146
142
|
if (!this.openAddressDropdown)
|
|
147
143
|
return;
|
|
@@ -167,9 +163,9 @@ export class PostalCodeInput {
|
|
|
167
163
|
this.postalcodelength = undefined;
|
|
168
164
|
this.addresses = undefined;
|
|
169
165
|
this.ignoreCountry = false;
|
|
166
|
+
this.mbSource = undefined;
|
|
170
167
|
this.isValid = undefined;
|
|
171
168
|
this.errorMessage = '';
|
|
172
|
-
this.limitStylingAppends = false;
|
|
173
169
|
this.showTooltip = false;
|
|
174
170
|
this.selectedCountryCode = '';
|
|
175
171
|
this.currentPostalCode = '';
|
|
@@ -178,9 +174,10 @@ export class PostalCodeInput {
|
|
|
178
174
|
this.refreshTrigger = 0;
|
|
179
175
|
this.isFetchingAddresses = false;
|
|
180
176
|
}
|
|
181
|
-
|
|
182
|
-
if (newValue !== oldValue)
|
|
183
|
-
this.
|
|
177
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
178
|
+
if (newValue !== oldValue) {
|
|
179
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
180
|
+
}
|
|
184
181
|
}
|
|
185
182
|
validityChanged() {
|
|
186
183
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
@@ -241,19 +238,22 @@ export class PostalCodeInput {
|
|
|
241
238
|
connectedCallback() {
|
|
242
239
|
this.validationPattern = this.setPattern();
|
|
243
240
|
}
|
|
244
|
-
componentDidRender() {
|
|
245
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
246
|
-
if (this.clientStyling)
|
|
247
|
-
this.setClientStyling();
|
|
248
|
-
this.limitStylingAppends = true;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
241
|
componentWillLoad() {
|
|
252
242
|
if (this.defaultValue) {
|
|
253
243
|
this.value = this.defaultValue;
|
|
254
244
|
}
|
|
255
245
|
}
|
|
246
|
+
handleClientStyling() {
|
|
247
|
+
if (window.emMessageBus !== undefined) {
|
|
248
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
251
|
+
if (this.clientStyling) {
|
|
252
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
256
255
|
componentDidLoad() {
|
|
256
|
+
this.handleClientStyling();
|
|
257
257
|
if (this.defaultValue) {
|
|
258
258
|
this.valueHandler({ name: this.name, value: this.value });
|
|
259
259
|
}
|
|
@@ -345,7 +345,7 @@ export class PostalCodeInput {
|
|
|
345
345
|
let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
|
|
346
346
|
this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
|
|
347
347
|
let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
|
|
348
|
-
return (h("div", { key: '
|
|
348
|
+
return (h("div", { key: 'f0dda39cf9a02d53213848926908c0cb39d1cd3f', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '5e1c51af264392d2be986e305e6526310f55f40b', class: 'text__wrapper--flex' }, h("label", { key: 'c12c45d88bdf42aeb6be505d473ab0f55da2be87', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7b93a75f19590b445227fa1a64c90fd20c0afd5d', class: 'text__wrapper--relative' }, this.tooltip && (h("img", { key: '504004a13595694307c1e3450b69982150dc55fd', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), h("div", { key: '19de66fd72fd0a6befe3bbaebb6c8f99ec5f850b', class: 'input__text-wrapper' }, h("input", { key: '78cd4229ed5104518b991df0bc6bf527df2ec3e2', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), 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.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (h("p", { key: '6b9e307d59fb9fed93f4df6c07a091d299844c62', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (h("div", { key: 'ecb7892a9a8d967540d8fd013518ae19498fcd48', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, h("div", { key: 'a5ef3f81a85207a821964e23b21aaf783be807cc', class: "options" }, this.addresses.map((addr, index) => (h("div", { key: index, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (h("div", { key: '338c17e484721efb387e608f3ce4416a0e47b8af', class: "postalcode__loading-spinner" }, h("div", { key: '7638cea4fba975e3a27d4cb00bce217129bd0750', class: "loading-spinner" }), h("span", { key: 'b59a8a9c3d7ecf209a68717346d1d29062994f79' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (h("div", { key: '212a74fed94b3ee089aed5c9afb544966b5f11cd', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), h("small", { key: '4f66e97dd811b9917c92ff4bcbf236817ac57933', class: 'text__error-message' }, this.errorMessage)));
|
|
349
349
|
}
|
|
350
350
|
static get is() { return "postalcode-input"; }
|
|
351
351
|
static get encapsulation() { return "shadow"; }
|
|
@@ -589,6 +589,23 @@ export class PostalCodeInput {
|
|
|
589
589
|
"attribute": "ignore-country",
|
|
590
590
|
"reflect": true,
|
|
591
591
|
"defaultValue": "false"
|
|
592
|
+
},
|
|
593
|
+
"mbSource": {
|
|
594
|
+
"type": "string",
|
|
595
|
+
"mutable": false,
|
|
596
|
+
"complexType": {
|
|
597
|
+
"original": "string",
|
|
598
|
+
"resolved": "string",
|
|
599
|
+
"references": {}
|
|
600
|
+
},
|
|
601
|
+
"required": false,
|
|
602
|
+
"optional": false,
|
|
603
|
+
"docs": {
|
|
604
|
+
"tags": [],
|
|
605
|
+
"text": "Client custom styling via message bus"
|
|
606
|
+
},
|
|
607
|
+
"attribute": "mb-source",
|
|
608
|
+
"reflect": true
|
|
592
609
|
}
|
|
593
610
|
};
|
|
594
611
|
}
|
|
@@ -596,7 +613,6 @@ export class PostalCodeInput {
|
|
|
596
613
|
return {
|
|
597
614
|
"isValid": {},
|
|
598
615
|
"errorMessage": {},
|
|
599
|
-
"limitStylingAppends": {},
|
|
600
616
|
"showTooltip": {},
|
|
601
617
|
"selectedCountryCode": {},
|
|
602
618
|
"currentPostalCode": {},
|
|
@@ -669,7 +685,7 @@ export class PostalCodeInput {
|
|
|
669
685
|
static get watchers() {
|
|
670
686
|
return [{
|
|
671
687
|
"propName": "clientStyling",
|
|
672
|
-
"methodName": "
|
|
688
|
+
"methodName": "handleClientStylingChange"
|
|
673
689
|
}, {
|
|
674
690
|
"propName": "isValid",
|
|
675
691
|
"methodName": "validityChanged"
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
+
import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
4
5
|
export class RadioInput {
|
|
5
6
|
constructor() {
|
|
6
|
-
this.setClientStyling = () => {
|
|
7
|
-
let sheet = document.createElement('style');
|
|
8
|
-
sheet.innerHTML = this.clientStyling;
|
|
9
|
-
this.stylingContainer.prepend(sheet);
|
|
10
|
-
};
|
|
11
7
|
this.name = undefined;
|
|
12
8
|
this.displayName = undefined;
|
|
13
9
|
this.optionsGroup = undefined;
|
|
@@ -16,14 +12,15 @@ export class RadioInput {
|
|
|
16
12
|
this.language = undefined;
|
|
17
13
|
this.emitValue = undefined;
|
|
18
14
|
this.clientStyling = '';
|
|
15
|
+
this.mbSource = undefined;
|
|
19
16
|
this.errorMessage = undefined;
|
|
20
17
|
this.isValid = undefined;
|
|
21
|
-
this.limitStylingAppends = false;
|
|
22
18
|
this.showTooltip = false;
|
|
23
19
|
}
|
|
24
|
-
|
|
25
|
-
if (newValue !== oldValue)
|
|
26
|
-
this.
|
|
20
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
21
|
+
if (newValue !== oldValue) {
|
|
22
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
23
|
+
}
|
|
27
24
|
}
|
|
28
25
|
validityChanged() {
|
|
29
26
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
@@ -48,14 +45,17 @@ export class RadioInput {
|
|
|
48
45
|
this.showTooltip = false;
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
handleClientStyling() {
|
|
49
|
+
if (window.emMessageBus !== undefined) {
|
|
50
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (this.clientStyling) {
|
|
54
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
57
55
|
}
|
|
58
|
-
|
|
56
|
+
}
|
|
57
|
+
componentDidLoad() {
|
|
58
|
+
this.handleClientStyling();
|
|
59
59
|
}
|
|
60
60
|
handleClick(event) {
|
|
61
61
|
this.value = event.target.value;
|
|
@@ -78,8 +78,8 @@ export class RadioInput {
|
|
|
78
78
|
return null;
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
|
-
return h("fieldset", { key: '
|
|
82
|
-
h("img", { key: '
|
|
81
|
+
return h("fieldset", { key: '7048de0e37c9541af1c9788e8b46c789ca788c31', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { key: '403b739c966d510740ca59621c094872b93e2cba', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h("div", { class: 'radio__wrapper' }, h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), h("label", { htmlFor: `${option.label}__input` }, option.label))), h("small", { key: '46dce1082a6aa9f2a5bdc3e3654c924fcd2a8357', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
82
|
+
h("img", { key: 'dfe155a429485b5c891db2943d9115cdc40e169b', class: 'radio__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
83
83
|
}
|
|
84
84
|
static get is() { return "radio-input"; }
|
|
85
85
|
static get encapsulation() { return "shadow"; }
|
|
@@ -239,6 +239,23 @@ export class RadioInput {
|
|
|
239
239
|
"attribute": "client-styling",
|
|
240
240
|
"reflect": true,
|
|
241
241
|
"defaultValue": "''"
|
|
242
|
+
},
|
|
243
|
+
"mbSource": {
|
|
244
|
+
"type": "string",
|
|
245
|
+
"mutable": false,
|
|
246
|
+
"complexType": {
|
|
247
|
+
"original": "string",
|
|
248
|
+
"resolved": "string",
|
|
249
|
+
"references": {}
|
|
250
|
+
},
|
|
251
|
+
"required": false,
|
|
252
|
+
"optional": false,
|
|
253
|
+
"docs": {
|
|
254
|
+
"tags": [],
|
|
255
|
+
"text": "Client custom styling via message bus"
|
|
256
|
+
},
|
|
257
|
+
"attribute": "mb-source",
|
|
258
|
+
"reflect": true
|
|
242
259
|
}
|
|
243
260
|
};
|
|
244
261
|
}
|
|
@@ -246,7 +263,6 @@ export class RadioInput {
|
|
|
246
263
|
return {
|
|
247
264
|
"errorMessage": {},
|
|
248
265
|
"isValid": {},
|
|
249
|
-
"limitStylingAppends": {},
|
|
250
266
|
"showTooltip": {}
|
|
251
267
|
};
|
|
252
268
|
}
|
|
@@ -298,7 +314,7 @@ export class RadioInput {
|
|
|
298
314
|
static get watchers() {
|
|
299
315
|
return [{
|
|
300
316
|
"propName": "clientStyling",
|
|
301
|
-
"methodName": "
|
|
317
|
+
"methodName": "handleClientStylingChange"
|
|
302
318
|
}, {
|
|
303
319
|
"propName": "isValid",
|
|
304
320
|
"methodName": "validityChanged"
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
+
import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
4
5
|
export class SelectInput {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.touched = false;
|
|
@@ -37,11 +38,6 @@ export class SelectInput {
|
|
|
37
38
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
38
39
|
this.emitValueHandler(true);
|
|
39
40
|
};
|
|
40
|
-
this.setClientStyling = () => {
|
|
41
|
-
let sheet = document.createElement('style');
|
|
42
|
-
sheet.innerHTML = this.clientStyling;
|
|
43
|
-
this.stylingContainer.prepend(sheet);
|
|
44
|
-
};
|
|
45
41
|
this.name = undefined;
|
|
46
42
|
this.displayName = undefined;
|
|
47
43
|
this.placeholder = undefined;
|
|
@@ -54,14 +50,15 @@ export class SelectInput {
|
|
|
54
50
|
this.language = undefined;
|
|
55
51
|
this.emitValue = undefined;
|
|
56
52
|
this.clientStyling = '';
|
|
53
|
+
this.mbSource = undefined;
|
|
57
54
|
this.errorMessage = undefined;
|
|
58
55
|
this.isValid = undefined;
|
|
59
|
-
this.limitStylingAppends = false;
|
|
60
56
|
this.showTooltip = false;
|
|
61
57
|
}
|
|
62
|
-
|
|
63
|
-
if (newValue !== oldValue)
|
|
64
|
-
this.
|
|
58
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
59
|
+
if (newValue !== oldValue) {
|
|
60
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
61
|
+
}
|
|
65
62
|
}
|
|
66
63
|
validityChanged() {
|
|
67
64
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
@@ -111,16 +108,17 @@ export class SelectInput {
|
|
|
111
108
|
}
|
|
112
109
|
}
|
|
113
110
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
111
|
+
handleClientStyling() {
|
|
112
|
+
if (window.emMessageBus !== undefined) {
|
|
113
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
if (this.clientStyling) {
|
|
117
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
120
118
|
}
|
|
121
|
-
// end custom styling area
|
|
122
119
|
}
|
|
123
120
|
componentDidLoad() {
|
|
121
|
+
this.handleClientStyling();
|
|
124
122
|
this.inputReference = this.vaadinCombo.querySelector('input');
|
|
125
123
|
if (this.defaultValue) {
|
|
126
124
|
this.value = this.defaultValue;
|
|
@@ -185,10 +183,10 @@ export class SelectInput {
|
|
|
185
183
|
if (this.touched) {
|
|
186
184
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
187
185
|
}
|
|
188
|
-
return h("div", { key: '
|
|
189
|
-
h("img", { key: '
|
|
186
|
+
return h("div", { key: 'eb6c9d7d85546159d44d06a0635f173263edd7d1', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '0fd71c528870966fdb23049b1806a267e9e6ca5c', class: 'select__wrapper--flex' }, h("label", { key: '44aeb4e50ab2f79df06741ff07ac03131c987447', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, h("span", { key: '796a83aeadd480a571b6bae035a46138d7b10b24', class: this.validation.mandatory ? 'select__label--required' : '' })), h("div", { key: '6d7b2d785c6b0bdd05c7444f563b21cedf26ff7c', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
187
|
+
h("img", { key: 'f33e43a9d42e8b8d1cf136374505eeaedcbede26', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? h("vaadin-combo-box", { 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 })
|
|
190
188
|
:
|
|
191
|
-
h("vaadin-select", { name: this.name, popover: false, 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: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, "no-vertical-overlap": true, noVerticalOverlap: true }), h("small", { key: '
|
|
189
|
+
h("vaadin-select", { name: this.name, popover: false, 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: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, "no-vertical-overlap": true, noVerticalOverlap: true }), h("small", { key: '261b3c4abc9b360e6b937d851f8bfc810280a8c6', class: 'select__error-message' }, this.errorMessage));
|
|
192
190
|
}
|
|
193
191
|
static get is() { return "select-input"; }
|
|
194
192
|
static get encapsulation() { return "shadow"; }
|
|
@@ -418,6 +416,23 @@ export class SelectInput {
|
|
|
418
416
|
"attribute": "client-styling",
|
|
419
417
|
"reflect": true,
|
|
420
418
|
"defaultValue": "''"
|
|
419
|
+
},
|
|
420
|
+
"mbSource": {
|
|
421
|
+
"type": "string",
|
|
422
|
+
"mutable": false,
|
|
423
|
+
"complexType": {
|
|
424
|
+
"original": "string",
|
|
425
|
+
"resolved": "string",
|
|
426
|
+
"references": {}
|
|
427
|
+
},
|
|
428
|
+
"required": false,
|
|
429
|
+
"optional": false,
|
|
430
|
+
"docs": {
|
|
431
|
+
"tags": [],
|
|
432
|
+
"text": "Client custom styling via message bus"
|
|
433
|
+
},
|
|
434
|
+
"attribute": "mb-source",
|
|
435
|
+
"reflect": true
|
|
421
436
|
}
|
|
422
437
|
};
|
|
423
438
|
}
|
|
@@ -425,7 +440,6 @@ export class SelectInput {
|
|
|
425
440
|
return {
|
|
426
441
|
"errorMessage": {},
|
|
427
442
|
"isValid": {},
|
|
428
|
-
"limitStylingAppends": {},
|
|
429
443
|
"showTooltip": {}
|
|
430
444
|
};
|
|
431
445
|
}
|
|
@@ -477,7 +491,7 @@ export class SelectInput {
|
|
|
477
491
|
static get watchers() {
|
|
478
492
|
return [{
|
|
479
493
|
"propName": "clientStyling",
|
|
480
|
-
"methodName": "
|
|
494
|
+
"methodName": "handleClientStylingChange"
|
|
481
495
|
}, {
|
|
482
496
|
"propName": "isValid",
|
|
483
497
|
"methodName": "validityChanged"
|
|
@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
4
|
import { ERROR_KEYS } from "../../utils/locale.utils";
|
|
5
|
+
import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
5
6
|
export class TelInput {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.validationPattern = '';
|
|
@@ -24,11 +25,6 @@ export class TelInput {
|
|
|
24
25
|
this.isValid = this.isValidValue();
|
|
25
26
|
this.errorMessage = this.setErrorMessage();
|
|
26
27
|
};
|
|
27
|
-
this.setClientStyling = () => {
|
|
28
|
-
let sheet = document.createElement('style');
|
|
29
|
-
sheet.innerHTML = this.clientStyling;
|
|
30
|
-
this.stylingContainer.prepend(sheet);
|
|
31
|
-
};
|
|
32
28
|
this.name = undefined;
|
|
33
29
|
this.displayName = undefined;
|
|
34
30
|
this.placeholder = undefined;
|
|
@@ -41,9 +37,9 @@ export class TelInput {
|
|
|
41
37
|
this.language = undefined;
|
|
42
38
|
this.emitValue = undefined;
|
|
43
39
|
this.clientStyling = '';
|
|
40
|
+
this.mbSource = undefined;
|
|
44
41
|
this.isValid = undefined;
|
|
45
42
|
this.errorMessage = undefined;
|
|
46
|
-
this.limitStylingAppends = false;
|
|
47
43
|
this.showTooltip = false;
|
|
48
44
|
this.disablePhonePrefix = false;
|
|
49
45
|
this.phoneValue = '';
|
|
@@ -55,9 +51,10 @@ export class TelInput {
|
|
|
55
51
|
if (this.inputReference)
|
|
56
52
|
this.inputReference.value = this.phoneValue;
|
|
57
53
|
}
|
|
58
|
-
|
|
59
|
-
if (newValue !== oldValue)
|
|
60
|
-
this.
|
|
54
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
55
|
+
if (newValue !== oldValue) {
|
|
56
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
57
|
+
}
|
|
61
58
|
}
|
|
62
59
|
validityChanged() {
|
|
63
60
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
@@ -108,16 +105,17 @@ export class TelInput {
|
|
|
108
105
|
}
|
|
109
106
|
}
|
|
110
107
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
108
|
+
handleClientStyling() {
|
|
109
|
+
if (window.emMessageBus !== undefined) {
|
|
110
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
if (this.clientStyling) {
|
|
114
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
117
115
|
}
|
|
118
|
-
// end custom styling area
|
|
119
116
|
}
|
|
120
117
|
componentDidLoad() {
|
|
118
|
+
this.handleClientStyling();
|
|
121
119
|
this.isValid = this.isValidValue();
|
|
122
120
|
if (this.defaultValue) {
|
|
123
121
|
this.value = this.defaultValue;
|
|
@@ -209,8 +207,8 @@ export class TelInput {
|
|
|
209
207
|
if (this.touched) {
|
|
210
208
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
211
209
|
}
|
|
212
|
-
return h("div", { key: '
|
|
213
|
-
h("img", { key: '
|
|
210
|
+
return h("div", { key: '9cf9eb751bca1978d8554fffc912ef2039c42e41', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'cc88d6e9aa7a0f3801fad75e3ca509fbd01b0538', class: 'tel__wrapper--flex-label' }, h("label", { key: 'c8a35af4ddd2d4f9751d7f60c9e075ae8eccb441', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '73fcdcc25dde1be087ee60062dc5eee2d1e5d29e', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
211
|
+
h("img", { key: '56df66fddf599fbafb179c7cd90ea7d58b008ea6', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '20eb5689932c2f71322102229cc7346d18e9bc87', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '9ec4142dc84e0022ced7e34248d5f4f8f59c34af', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: 'c083b17f71de36b84892a8080f776debf1fe7351', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '2201c2d7b968731042624b265cf535c656c86933', class: 'tel__error-message' }, this.errorMessage));
|
|
214
212
|
}
|
|
215
213
|
static get is() { return "tel-input"; }
|
|
216
214
|
static get encapsulation() { return "shadow"; }
|
|
@@ -434,6 +432,23 @@ export class TelInput {
|
|
|
434
432
|
"attribute": "client-styling",
|
|
435
433
|
"reflect": true,
|
|
436
434
|
"defaultValue": "''"
|
|
435
|
+
},
|
|
436
|
+
"mbSource": {
|
|
437
|
+
"type": "string",
|
|
438
|
+
"mutable": false,
|
|
439
|
+
"complexType": {
|
|
440
|
+
"original": "string",
|
|
441
|
+
"resolved": "string",
|
|
442
|
+
"references": {}
|
|
443
|
+
},
|
|
444
|
+
"required": false,
|
|
445
|
+
"optional": false,
|
|
446
|
+
"docs": {
|
|
447
|
+
"tags": [],
|
|
448
|
+
"text": "Client custom styling via message bus"
|
|
449
|
+
},
|
|
450
|
+
"attribute": "mb-source",
|
|
451
|
+
"reflect": true
|
|
437
452
|
}
|
|
438
453
|
};
|
|
439
454
|
}
|
|
@@ -441,7 +456,6 @@ export class TelInput {
|
|
|
441
456
|
return {
|
|
442
457
|
"isValid": {},
|
|
443
458
|
"errorMessage": {},
|
|
444
|
-
"limitStylingAppends": {},
|
|
445
459
|
"showTooltip": {},
|
|
446
460
|
"disablePhonePrefix": {},
|
|
447
461
|
"phoneValue": {},
|
|
@@ -496,7 +510,7 @@ export class TelInput {
|
|
|
496
510
|
static get watchers() {
|
|
497
511
|
return [{
|
|
498
512
|
"propName": "clientStyling",
|
|
499
|
-
"methodName": "
|
|
513
|
+
"methodName": "handleClientStylingChange"
|
|
500
514
|
}, {
|
|
501
515
|
"propName": "isValid",
|
|
502
516
|
"methodName": "validityChanged"
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate, validateID, CONSTANTS, ERROR_KEYS } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
+
import { setClientStyling, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
4
5
|
export class TextInput {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.value = '';
|
|
@@ -32,11 +33,6 @@ export class TextInput {
|
|
|
32
33
|
this.touched = true;
|
|
33
34
|
this.updateValidationState();
|
|
34
35
|
};
|
|
35
|
-
this.setClientStyling = () => {
|
|
36
|
-
let sheet = document.createElement('style');
|
|
37
|
-
sheet.innerHTML = this.clientStyling;
|
|
38
|
-
this.stylingContainer.prepend(sheet);
|
|
39
|
-
};
|
|
40
36
|
this.name = undefined;
|
|
41
37
|
this.displayName = undefined;
|
|
42
38
|
this.placeholder = undefined;
|
|
@@ -51,15 +47,16 @@ export class TextInput {
|
|
|
51
47
|
this.clientStyling = '';
|
|
52
48
|
this.haspostalcodelookup = undefined;
|
|
53
49
|
this.enableSouthAfricanMode = undefined;
|
|
50
|
+
this.mbSource = undefined;
|
|
54
51
|
this.isValid = undefined;
|
|
55
52
|
this.errorMessage = '';
|
|
56
|
-
this.limitStylingAppends = false;
|
|
57
53
|
this.showTooltip = false;
|
|
58
54
|
this.selectedCountryCode = '';
|
|
59
55
|
}
|
|
60
|
-
|
|
61
|
-
if (newValue !== oldValue)
|
|
62
|
-
this.
|
|
56
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
57
|
+
if (newValue !== oldValue) {
|
|
58
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
59
|
+
}
|
|
63
60
|
}
|
|
64
61
|
validityChanged() {
|
|
65
62
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
@@ -171,21 +168,22 @@ export class TextInput {
|
|
|
171
168
|
}
|
|
172
169
|
this.validityStateHandler({ valid: false, name: this.name });
|
|
173
170
|
}
|
|
174
|
-
componentDidRender() {
|
|
175
|
-
// start custom styling area
|
|
176
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
177
|
-
if (this.clientStyling)
|
|
178
|
-
this.setClientStyling();
|
|
179
|
-
this.limitStylingAppends = true;
|
|
180
|
-
}
|
|
181
|
-
// end custom styling area
|
|
182
|
-
}
|
|
183
171
|
componentWillLoad() {
|
|
184
172
|
if (this.defaultValue) {
|
|
185
173
|
this.value = this.defaultValue;
|
|
186
174
|
}
|
|
187
175
|
}
|
|
176
|
+
handleClientStyling() {
|
|
177
|
+
if (window.emMessageBus !== undefined) {
|
|
178
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
if (this.clientStyling) {
|
|
182
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
188
185
|
componentDidLoad() {
|
|
186
|
+
this.handleClientStyling();
|
|
189
187
|
if (this.defaultValue) {
|
|
190
188
|
this.value = this.defaultValue;
|
|
191
189
|
this.valueHandler({ name: this.name, value: this.value });
|
|
@@ -297,8 +295,8 @@ export class TextInput {
|
|
|
297
295
|
if (this.touched) {
|
|
298
296
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
299
297
|
}
|
|
300
|
-
return h("div", { key: '
|
|
301
|
-
h("img", { key: '
|
|
298
|
+
return h("div", { key: 'f48e592bac049022b283bac917c095772b1508f5', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: 'fe3626ead38dd18dfa14795ee2332e93f5f09652', class: 'text__wrapper--flex' }, h("label", { key: '6b2854b460e0ac7d4ae0ebccc06dbe64770581d5', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'f29d266973bd700a4270495bc4eb6e8296b6eeaf', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
299
|
+
h("img", { key: '68e69abbb78250e763822608e963bc16d702f099', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '99b8eab15ab32656f86fedd3f36a09a5bbe108d3', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'cc28c1c19370faa94fa1f738066042dce8d694ce', class: 'text__error-message' }, this.errorMessage));
|
|
302
300
|
}
|
|
303
301
|
static get is() { return "text-input"; }
|
|
304
302
|
static get encapsulation() { return "shadow"; }
|
|
@@ -557,6 +555,23 @@ export class TextInput {
|
|
|
557
555
|
},
|
|
558
556
|
"attribute": "enable-south-african-mode",
|
|
559
557
|
"reflect": true
|
|
558
|
+
},
|
|
559
|
+
"mbSource": {
|
|
560
|
+
"type": "string",
|
|
561
|
+
"mutable": false,
|
|
562
|
+
"complexType": {
|
|
563
|
+
"original": "string",
|
|
564
|
+
"resolved": "string",
|
|
565
|
+
"references": {}
|
|
566
|
+
},
|
|
567
|
+
"required": false,
|
|
568
|
+
"optional": false,
|
|
569
|
+
"docs": {
|
|
570
|
+
"tags": [],
|
|
571
|
+
"text": "Client custom styling via message bus"
|
|
572
|
+
},
|
|
573
|
+
"attribute": "mb-source",
|
|
574
|
+
"reflect": true
|
|
560
575
|
}
|
|
561
576
|
};
|
|
562
577
|
}
|
|
@@ -564,7 +579,6 @@ export class TextInput {
|
|
|
564
579
|
return {
|
|
565
580
|
"isValid": {},
|
|
566
581
|
"errorMessage": {},
|
|
567
|
-
"limitStylingAppends": {},
|
|
568
582
|
"showTooltip": {},
|
|
569
583
|
"selectedCountryCode": {}
|
|
570
584
|
};
|
|
@@ -617,7 +631,7 @@ export class TextInput {
|
|
|
617
631
|
static get watchers() {
|
|
618
632
|
return [{
|
|
619
633
|
"propName": "clientStyling",
|
|
620
|
-
"methodName": "
|
|
634
|
+
"methodName": "handleClientStylingChange"
|
|
621
635
|
}, {
|
|
622
636
|
"propName": "isValid",
|
|
623
637
|
"methodName": "validityChanged"
|