@everymatrix/general-input 1.56.0 → 1.56.2

package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js

@@ -3,23 +3,31 @@ import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class ToggleCheckboxInput {
     constructor() {
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
-        this.showFields = this.defaultValue === 'true';
         this.value = '';
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.defaultValue = '';
+        this.options = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+        this.showFields = this.defaultValue === 'true';
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityStateHandler(inputStateEvent) {
         this.sendValidityState.emit(inputStateEvent);
@@ -66,8 +74,8 @@ export class ToggleCheckboxInput {
         return null;
     }
     render() {
-        return h("div", { key: '8c8e9bb2ae7feadf3a5fc38b9913e38d7ccb9aed', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '18e2ec43ff98738323ddab1e134d6d215978e1c7', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '640b3ba4fd34bd813239533236e51f452e735409', 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: 'efd70a691559cfa98e93561dd945a0fe92909718', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'e56a8fafa17da25d01f894fe6e6c143c318d2aab', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '8b59366827b8f4f8ca5581203a2dca44ae8132d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '475e27345b51396c36e78b5a1e06edd980bc3ae1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+        return h("div", { key: 'e8be91ce94cf76ebecc58a433ab567ab549f4692', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'dd42a6316cda06e357843165329de7525a24e3d5', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '932a6f8caeafa0d006f636484e33dda246c314d0', 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: 'cbc789c8a5c21debc05971ff347371fbc25d4975', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'a5ce470c985829eb1f5a0567bb974cc15e3d0d64', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'faef05dd9341ffe44b6833ca8f4c86b85ed61956', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '89fed5f103acecca78fa53eea64d57574ef42727', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
             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 });
         })));
     }
@@ -99,8 +107,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -118,8 +124,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -137,8 +141,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -162,9 +164,7 @@ export class ToggleCheckboxInput {
                 "docs": {
                     "tags": [],
                     "text": "Options of the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "autofilled": {
                 "type": "boolean",
@@ -180,8 +180,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -199,8 +197,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -223,9 +219,7 @@ export class ToggleCheckboxInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "language": {
                 "type": "string",
@@ -241,8 +235,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -260,8 +252,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "State passed down from the parent element. Will trigger the input to send it's value through an event."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "emit-value",
                 "reflect": true
             },
@@ -279,8 +269,6 @@ export class ToggleCheckboxInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -341,6 +329,12 @@ export class ToggleCheckboxInput {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",