@everymatrix/general-input 1.56.0 → 1.56.2

package/dist/collection/components/radio-input/radio-input.js

@@ -3,17 +3,27 @@ import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class RadioInput {
     constructor() {
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.optionsGroup = undefined;
+        this.validation = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -68,8 +78,8 @@ export class RadioInput {
         return null;
     }
     render() {
-        return h("fieldset", { key: '3d90735f7dc8fef6a96dc85b8f9ba22880cb205f', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { key: '9472ed76f5c7fabb90d2b3d39eeb9e18f05a30dd', 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: '2ae0947580bb8a0a3d889a2d9ebd0b82458fdfd2', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
-            h("img", { key: '4f3cbf341f1c559bbdf44ca5d169be7a64d46e97', class: 'radio__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return h("fieldset", { key: '29ff8fcc910622397750532629ac0c202c9726ba', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { key: 'cdab5b331863f3d31aab50c1d95b5a8845d53329', 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: 'bd6cd89510e7ace1348b391f3ce9ba334a03e695', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
+            h("img", { key: '27036c51c89612dbb87e5248355d3a5466c49705', class: 'radio__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     static get is() { return "radio-input"; }
     static get encapsulation() { return "shadow"; }
@@ -99,8 +109,6 @@ export class RadioInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -118,8 +126,6 @@ export class RadioInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -142,9 +148,7 @@ export class RadioInput {
                 "docs": {
                     "tags": [],
                     "text": "Options of the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "validation": {
                 "type": "unknown",
@@ -165,9 +169,7 @@ export class RadioInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "tooltip": {
                 "type": "string",
@@ -183,8 +185,6 @@ export class RadioInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -202,8 +202,6 @@ export class RadioInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -221,8 +219,6 @@ export class RadioInput {
                     "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
             },
@@ -240,8 +236,6 @@ export class RadioInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -303,6 +297,9 @@ export class RadioInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

package/dist/collection/components/select-input/select-input.js

@@ -4,20 +4,6 @@ import "@vaadin/combo-box";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class SelectInput {
     constructor() {
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Options of the input.
-         */
-        this.options = [];
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.touched = false;
         this.handleChange = (event) => {
             this.touched = true;
@@ -46,6 +32,26 @@ export class SelectInput {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.action = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.options = [];
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -138,8 +144,8 @@ export class SelectInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '3d298b9709617233adacd88b8acb7d6298d35627', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9ba53148a200b925da11ad0dea5589e9634ffb03', class: 'select__wrapper--flex' }, h("label", { key: 'eb2fa2233926ada4da750e47304325d0d7ea3985', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '3cbe968f9a7c612d0b8d0517621a933cccd1bd58', class: 'select__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '9fa9be645ed72897a95705b0e17b3aee855eb6d4', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: 'f596a5fa5b480791080dfa63359ed30eeabfaa02', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), h("small", { key: 'a9c652406489ba1d23497c55aa14e7b67fa701bd', class: 'select__error-message' }, this.errorMessage));
+        return h("div", { key: 'f02c73635c87a1937f4718c9de8df3aae8397815', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '26bf79a073dd4c84570e380b1f36bfe848fec568', class: 'select__wrapper--flex' }, h("label", { key: '6eaafabe58a2dd4e1604ac2e3d55d001e2c4bc7c', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: 'a1de9c4bd3dd4158b26004c6df9dca5915f73978', class: 'select__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '5cb869c82f53a463c91cd060fad5520d2fbc3d0d', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: '2e94c1faa107657034a98d70b1e98d5c5ab5caa5', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), h("small", { key: '2c8162576d30265ea49cdc6d99071f614d833d7e', class: 'select__error-message' }, this.errorMessage));
     }
     static get is() { return "select-input"; }
     static get encapsulation() { return "shadow"; }
@@ -169,8 +175,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -188,8 +192,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -207,8 +209,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -226,8 +226,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Special behaviour an input should have. Can be fetching for data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "action",
                 "reflect": true
             },
@@ -245,8 +243,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -265,8 +261,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -284,8 +278,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -309,8 +301,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Options of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "validation": {
@@ -332,9 +322,7 @@ export class SelectInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "language": {
                 "type": "string",
@@ -350,8 +338,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -369,8 +355,6 @@ export class SelectInput {
                     "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
             },
@@ -388,8 +372,6 @@ export class SelectInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -452,6 +434,9 @@ export class SelectInput {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

package/dist/collection/components/tel-input/tel-input.js

@@ -4,12 +4,6 @@ import "@vaadin/combo-box";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class TelInput {
     constructor() {
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
@@ -35,6 +29,26 @@ export class TelInput {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.showLabels = undefined;
+        this.action = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.isValid = undefined;
+        this.errorMessage = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -146,8 +160,8 @@ export class TelInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '5febd36c339710683111039d477196daac87853c', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'fb779beee03992b23478ffcaac85095420048ceb', class: 'tel__wrapper--flex-label' }, h("label", { key: '5b69271c1c8bf403a003d765adb40a553e09466e', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '040c487308231459fc92eba2e643a80639df09d6', class: 'tel__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '91efd4656c718c75e5047413daf10c22c37e8f93', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '6215f80b6bccb3dfb03dbbc485c850725633627c', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '3b7b1ef3415619c51d74f5fc7c5e034acb8f037f', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '886553206896c367ba96f015d81b44ea86f741ea', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, 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: 'd4c88d386c3342c789527d925e9cd061494b785c', class: 'tel__error-message' }, this.errorMessage));
+        return h("div", { key: 'f0f70d8568ba083ee19f9e73e5921104f599e15f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '8da9e1c2a6b3ca19caff07540f0218266de22bb2', class: 'tel__wrapper--flex-label' }, h("label", { key: 'd0d90bc96e3ea853f401bae9be3f033d4cfd9b17', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'fdf7929f51edcbea8568b35804b0d9e9a93a7249', class: 'tel__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '0fbc9b5e8c5feef727caa71ef07d4ae80007e04a', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'b4a11808a7ae5e5cddce47b51a51003bce3a84f8', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '2d81ff4c11e559f302a8446816f4aca0de2cfcef', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: 'ab52185589bf4d52205bad4cecc9c7ecb54cd409', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, 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: '6d219de32297bc2fab31995b5a33b14f2eea21d9', class: 'tel__error-message' }, this.errorMessage));
     }
     static get is() { return "tel-input"; }
     static get encapsulation() { return "shadow"; }
@@ -177,8 +191,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -196,8 +208,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -215,8 +225,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -234,8 +242,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Boolean that defines if the widget show labels or placeholders."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-labels",
                 "reflect": true
             },
@@ -253,8 +259,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Special behaviour an input should have. Can be fetching for data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "action",
                 "reflect": true
             },
@@ -277,9 +281,7 @@ export class TelInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "defaultValue": {
                 "type": "any",
@@ -295,8 +297,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true
             },
@@ -314,8 +314,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -333,8 +331,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -352,8 +348,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -371,8 +365,6 @@ export class TelInput {
                     "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
             },
@@ -390,8 +382,6 @@ export class TelInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -453,6 +443,9 @@ export class TelInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

package/dist/collection/components/text-input/text-input.js

@@ -3,17 +3,6 @@ import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class TextInput {
     constructor() {
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.errorMessage = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.value = '';
         this.validationPattern = '';
         this.duplicateInputValue = null;
@@ -43,6 +32,26 @@ export class TextInput {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.checkValidity = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = undefined;
+        this.clientStyling = '';
+        this.isValid = undefined;
+        this.errorMessage = '';
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -149,8 +158,8 @@ export class TextInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'bfb803110a70b89dd484e993c204b572f0115a17', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '6e9f8f5aada98821d5dc78ccb8b1431ba23b81ab', class: 'text__wrapper--flex' }, h("label", { key: '05cf07855121a79641475a5b020774cf8120d1ed', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'f8c48a999f6827a61ec392ce99858c19559c77d2', class: 'text__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'e866f1df104ce57c29164e73b4ad4d017c7201cd', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'd761c265b1487fe73af54568b6da7fed82656b8d', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, 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", { key: '5c8df34dd47959eb1668cdf389524d145c69fa84', class: 'text__error-message' }, this.errorMessage));
+        return h("div", { key: 'e297f841a57c6acf854535a786916aa641831556', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '7fd284a58e58d5c61a03caf4cc317b8dd9dbd82f', class: 'text__wrapper--flex' }, h("label", { key: 'f80a2003386ec867e5310190a7568105c2912569', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'e8f5197bd370100406d600be5a336f85f4c6934d', class: 'text__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'ff8c38fe3495a41a41ac4a1569169ce26a1ec9ce', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '581106e515810ab43f7d6b6eda504ccf23906b0e', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, 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", { key: '20620710026982d5fb670a3173bab57a7fa9e7ce', class: 'text__error-message' }, this.errorMessage));
     }
     static get is() { return "text-input"; }
     static get encapsulation() { return "shadow"; }
@@ -180,8 +189,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -199,8 +206,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -218,8 +223,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -242,9 +245,7 @@ export class TextInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "defaultValue": {
                 "type": "string",
@@ -260,8 +261,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -280,8 +279,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -299,8 +296,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -318,8 +313,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -337,8 +330,6 @@ export class TextInput {
                     "tags": [],
                     "text": "State passed down from the parent element. Will trigger the input to check for validity."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "check-validity",
                 "reflect": true
             },
@@ -356,8 +347,6 @@ export class TextInput {
                     "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
             },
@@ -375,8 +364,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Boolean that triggers certain validation rules, for duplicated inputs."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-duplicate-input",
                 "reflect": true
             },
@@ -394,8 +381,6 @@ export class TextInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -457,6 +442,9 @@ export class TextInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {