@everymatrix/general-input 1.59.3 → 1.60.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/general-input.cjs.entry.js +198 -198
- package/dist/cjs/toggle-checkbox-input.cjs.entry.js +22 -3
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +22 -3
- package/dist/esm/general-input.entry.js +198 -198
- package/dist/esm/toggle-checkbox-input.entry.js +22 -3
- package/dist/general-input/general-input.esm.js +1 -1
- package/dist/general-input/{p-b3723638.entry.js → p-5bc47cf3.entry.js} +119 -119
- package/dist/general-input/p-b4c2804b.entry.js +1 -0
- package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +2 -0
- package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +2 -0
- package/dist/types/components/toggle-checkbox-input/toggle-checkbox-input.d.ts +5 -0
- package/package.json +1 -1
- package/dist/general-input/p-dc5f469a.entry.js +0 -1
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.d.ts +0 -2
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/stencil.config.dev.d.ts +0 -2
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/storybook/main.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/packages/stencil/general-input/storybook/preview.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → maria.bumbar/Desktop}/widgets-monorepo/packages/stencil/general-input/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -14,7 +14,13 @@ const ToggleCheckboxInput = class {
|
|
|
14
14
|
index.registerInstance(this, hostRef);
|
|
15
15
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
16
16
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
17
|
+
this.callBackObject = {};
|
|
18
|
+
this.subFieldsObject = {};
|
|
17
19
|
this.value = '';
|
|
20
|
+
this.handleRevealField = (event, fieldName) => {
|
|
21
|
+
event.stopPropagation();
|
|
22
|
+
window.postMessage({ type: `registration${fieldName}Clicked` }, window.location.href);
|
|
23
|
+
};
|
|
18
24
|
this.setClientStyling = () => {
|
|
19
25
|
let sheet = document.createElement('style');
|
|
20
26
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -61,6 +67,14 @@ const ToggleCheckboxInput = class {
|
|
|
61
67
|
}
|
|
62
68
|
// end custom styling area
|
|
63
69
|
}
|
|
70
|
+
componentDidLoad() {
|
|
71
|
+
if (this.options.length === 0)
|
|
72
|
+
return;
|
|
73
|
+
this.options.forEach((subField) => {
|
|
74
|
+
this.callBackObject[subField.name] = (e) => { this.handleRevealField(e, subField.name); };
|
|
75
|
+
this.subFieldsObject[subField.name].addEventListener('click', this.callBackObject[subField.name]);
|
|
76
|
+
});
|
|
77
|
+
}
|
|
64
78
|
handleClick() {
|
|
65
79
|
this.showFields = this.checkboxReference.checked;
|
|
66
80
|
this.errorMessage = this.setErrorMessage();
|
|
@@ -75,6 +89,11 @@ const ToggleCheckboxInput = class {
|
|
|
75
89
|
return locale_utils.translate('requiredError', this.language);
|
|
76
90
|
}
|
|
77
91
|
}
|
|
92
|
+
disconnectedCallback() {
|
|
93
|
+
this.options.forEach((subField) => {
|
|
94
|
+
this.subFieldsObject[subField.name].removeEventListener('click', this.callBackObject[subField.name]);
|
|
95
|
+
});
|
|
96
|
+
}
|
|
78
97
|
renderLabel() {
|
|
79
98
|
return (index.h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, index.h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
80
99
|
}
|
|
@@ -85,9 +104,9 @@ const ToggleCheckboxInput = class {
|
|
|
85
104
|
return null;
|
|
86
105
|
}
|
|
87
106
|
render() {
|
|
88
|
-
return index.h("div", { key: '
|
|
89
|
-
index.h("img", { key: '
|
|
90
|
-
return index.h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
|
|
107
|
+
return index.h("div", { key: 'd7084a7f82d45b3d1e7f8ae373b663b2aefdf5ec', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'f065f4611805dd8490234bcec1fecdbcfcaefab8', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: 'c5196d5a4cd2f114a610037285ee644fcabc37bd', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { key: '06d5db0994272ec9dde1b5cd0d525bb53ff1a058', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: 'aff16ac9ed0adb896f2c1822014c5c8c4d6db2d4', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
108
|
+
index.h("img", { key: '6b049cecc095a2127eb566f50fd0f8feaa8cb3d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '372c3eb72cffd482fe1c179047ec3900cef00d46', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
109
|
+
return index.h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
91
110
|
})));
|
|
92
111
|
}
|
|
93
112
|
static get watchers() { return {
|
|
@@ -3,7 +3,13 @@ import { translate } from "../../utils/locale.utils";
|
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
4
|
export class ToggleCheckboxInput {
|
|
5
5
|
constructor() {
|
|
6
|
+
this.callBackObject = {};
|
|
7
|
+
this.subFieldsObject = {};
|
|
6
8
|
this.value = '';
|
|
9
|
+
this.handleRevealField = (event, fieldName) => {
|
|
10
|
+
event.stopPropagation();
|
|
11
|
+
window.postMessage({ type: `registration${fieldName}Clicked` }, window.location.href);
|
|
12
|
+
};
|
|
7
13
|
this.setClientStyling = () => {
|
|
8
14
|
let sheet = document.createElement('style');
|
|
9
15
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -50,6 +56,14 @@ export class ToggleCheckboxInput {
|
|
|
50
56
|
}
|
|
51
57
|
// end custom styling area
|
|
52
58
|
}
|
|
59
|
+
componentDidLoad() {
|
|
60
|
+
if (this.options.length === 0)
|
|
61
|
+
return;
|
|
62
|
+
this.options.forEach((subField) => {
|
|
63
|
+
this.callBackObject[subField.name] = (e) => { this.handleRevealField(e, subField.name); };
|
|
64
|
+
this.subFieldsObject[subField.name].addEventListener('click', this.callBackObject[subField.name]);
|
|
65
|
+
});
|
|
66
|
+
}
|
|
53
67
|
handleClick() {
|
|
54
68
|
this.showFields = this.checkboxReference.checked;
|
|
55
69
|
this.errorMessage = this.setErrorMessage();
|
|
@@ -64,6 +78,11 @@ export class ToggleCheckboxInput {
|
|
|
64
78
|
return translate('requiredError', this.language);
|
|
65
79
|
}
|
|
66
80
|
}
|
|
81
|
+
disconnectedCallback() {
|
|
82
|
+
this.options.forEach((subField) => {
|
|
83
|
+
this.subFieldsObject[subField.name].removeEventListener('click', this.callBackObject[subField.name]);
|
|
84
|
+
});
|
|
85
|
+
}
|
|
67
86
|
renderLabel() {
|
|
68
87
|
return (h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
69
88
|
}
|
|
@@ -74,9 +93,9 @@ export class ToggleCheckboxInput {
|
|
|
74
93
|
return null;
|
|
75
94
|
}
|
|
76
95
|
render() {
|
|
77
|
-
return h("div", { key: '
|
|
78
|
-
h("img", { key: '
|
|
79
|
-
return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
|
|
96
|
+
return h("div", { key: 'd7084a7f82d45b3d1e7f8ae373b663b2aefdf5ec', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'f065f4611805dd8490234bcec1fecdbcfcaefab8', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: 'c5196d5a4cd2f114a610037285ee644fcabc37bd', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: '06d5db0994272ec9dde1b5cd0d525bb53ff1a058', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'aff16ac9ed0adb896f2c1822014c5c8c4d6db2d4', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
97
|
+
h("img", { key: '6b049cecc095a2127eb566f50fd0f8feaa8cb3d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '372c3eb72cffd482fe1c179047ec3900cef00d46', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
98
|
+
return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
80
99
|
})));
|
|
81
100
|
}
|
|
82
101
|
static get is() { return "toggle-checkbox-input"; }
|