@everymatrix/general-input 1.56.0 → 1.56.2

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

@@ -3,12 +3,6 @@ import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class EmailInput {
     constructor() {
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
@@ -33,6 +27,25 @@ export class EmailInput {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = 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 });
@@ -122,8 +135,8 @@ export class EmailInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        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 &&
-            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));
+        return h("div", { key: 'a46093cfafc840d2fd563ee9676ccd2f16fb1620', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '2eab4a96efc36cdb94e9f92b2a161e208f0ebcd4', class: 'email__wrapper--flex' }, h("label", { key: 'f5ed857f61ea6763c5fe88590732258b4dedac1b', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '58cadc7857cd91dec968852be71e0108f55fbda7', class: 'email__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '03009d036fde1c36b9348ac45cefa3389194260c', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'b2a9fd96ed301df5f1d7cf6f5a2a5b52f96ab189', 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: 'edb17f53141a3406bfc657f80098b914044a8894', class: 'email__error-message' }, this.errorMessage));
     }
     static get is() { return "email-input"; }
     static get encapsulation() { return "shadow"; }
@@ -153,8 +166,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -172,8 +183,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -191,8 +200,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -215,9 +222,7 @@ export class EmailInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "defaultValue": {
                 "type": "string",
@@ -233,8 +238,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true
             },
@@ -252,8 +255,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -271,8 +272,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -290,8 +289,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -309,8 +306,6 @@ export class EmailInput {
                     "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
             },
@@ -328,8 +323,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Flag for duplicate inputs, it sets up the input for certain validation rules."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-duplicate-input",
                 "reflect": true
             },
@@ -347,8 +340,6 @@ export class EmailInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -410,6 +401,9 @@ export class EmailInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

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

@@ -2,28 +2,29 @@ import { h, Host } from "@stencil/core";
 import { getTranslations } from "../../utils/locale.utils";
 export class GeneralInput {
     constructor() {
-        /**
-         * Type the general-input should take. Can take the default HTML input values.
-         */
-        this.type = 'text';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        /**
-         * Translations via URL
-         */
-        this.translationUrl = '';
-        /**
-         * Emit event on click
-         */
-        this.emitOnClick = false;
         this.handleClick = (event) => {
             if (this.emitOnClick) {
                 event.stopPropagation();
                 window.postMessage({ type: `registration${this.name}Clicked` }, window.location.href);
             }
         };
+        this.type = 'text';
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.action = undefined;
+        this.validation = undefined;
+        this.options = undefined;
+        this.language = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.defaultValue = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = undefined;
+        this.clientStyling = '';
+        this.dateFormat = undefined;
+        this.translationUrl = '';
+        this.emitOnClick = false;
     }
     connectedCallback() {
         if (this.translationUrl) {
@@ -90,8 +91,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Type the general-input should take. Can take the default HTML input values."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'text'"
@@ -110,8 +109,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -129,8 +126,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -148,8 +143,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -167,8 +160,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Special behaviour an input should have. Can be fetching for data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "action",
                 "reflect": true
             },
@@ -191,9 +182,7 @@ export class GeneralInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "options": {
                 "type": "any",
@@ -209,8 +198,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "For input elements that have multiple options or choises."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "options",
                 "reflect": true
             },
@@ -228,8 +215,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -247,8 +232,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -266,8 +249,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -285,8 +266,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true
             },
@@ -304,8 +283,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "State passed down from the parent element. Will trigger the child specialised input to send it's value through an event."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "emit-value",
                 "reflect": true
             },
@@ -323,8 +300,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Boolean that triggers certain validation rules, for duplicated inputs."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-duplicate-input",
                 "reflect": true
             },
@@ -342,8 +317,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -362,8 +335,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Date format for date picker."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "date-format",
                 "reflect": true
             },
@@ -381,8 +352,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Translations via URL"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "translation-url",
                 "reflect": true,
                 "defaultValue": "''"
@@ -401,8 +370,6 @@ export class GeneralInput {
                     "tags": [],
                     "text": "Emit event on click"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "emit-on-click",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -3,12 +3,6 @@ import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class NumberInput {
     constructor() {
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
@@ -33,6 +27,24 @@ export class NumberInput {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = 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 });
@@ -110,8 +122,8 @@ export class NumberInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '2032f77ca52b330ae2e8f484d7a0aba60ee7b9d5', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '0786901cd928bba86597180f058bff43fba522b6', class: 'number__wrapper--flex' }, h("label", { key: 'ff7f39306cef7aeba3e0e4508df03c5a945e748b', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'dced91223621551472fee374d56f1ad7476f4191', class: 'number__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'a804a983e342e4d117126720a32c4c34a2b267dc', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'fd59afaedf7d9f761684b057a1809474d735cc26', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'ca11558b5704b69311626736ab84a298449b98d7', class: 'number__error-message' }, this.errorMessage));
+        return h("div", { key: '841265bba6b75cc61a0eac1450c3f5aa5f917a2e', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '645c7817cf5a0bdc352de9d8c0698fde235aa6d3', class: 'number__wrapper--flex' }, h("label", { key: '3343cbbb8482b71cd152161a8d422f318f07f3fe', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '1f3341b2127095870610fc0e0b4b5d220c5d2e2c', class: 'number__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '8bbe2fe9f62347cbcd37b753d4a1b0718dc39091', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '100401abdc33069f34e27e0807c9f31ddf7e42ec', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'db1e0043bb9b6de2ad8e18f49f96152b9451b93c', class: 'number__error-message' }, this.errorMessage));
     }
     static get is() { return "number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -141,8 +153,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -160,8 +170,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -179,8 +187,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -203,9 +209,7 @@ export class NumberInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "defaultValue": {
                 "type": "string",
@@ -221,8 +225,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true
             },
@@ -240,8 +242,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -259,8 +259,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -278,8 +276,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -297,8 +293,6 @@ export class NumberInput {
                     "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
             },
@@ -316,8 +310,6 @@ export class NumberInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -379,6 +371,9 @@ export class NumberInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

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

@@ -4,17 +4,6 @@ import "@vaadin/password-field";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class PasswordInput {
     constructor() {
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
-        this.value = '';
         this.touched = false;
         this.originalValid = false;
         this.validationPattern = '';
@@ -53,6 +42,28 @@ export class PasswordInput {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = undefined;
+        this.clientStyling = '';
+        this.isValid = undefined;
+        this.errorMessage = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+        this.passwordComplexity = undefined;
+        this.showPopup = undefined;
+        this.value = '';
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -212,8 +223,8 @@ export class PasswordInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'c704b51efdf53817beb1541b4794e0b11b490a24', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'e590afa403084ff95a8735ade400ab81ad16937f', class: 'password__wrapper--flex' }, h("label", { key: '9d8db00b59c4b9594538aeacee3ef5a0e678c0e9', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'bb39f6018cf688fafcd0b5bef91ba079edf09daf', class: 'password__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'd8dbd086da34a8c7db9b5826654530bdb888c927', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: 'ae1c212d663fe379561b1c514087629409196ac3', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h("small", { key: '2fa1e25239a7314399c16b2f897873b7a31e9f77', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
+        return h("div", { key: '36d21c63dcd15b6de2d2de417ce97b520493cd16', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '3de600f4ccbf2ffe7a8a8858e9d5a483701dd4d7', class: 'password__wrapper--flex' }, h("label", { key: '74fee343f4d6adbbb22e88c5d51d3a471979d42e', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'd1f30d776c5612b1a5581859b929bee171105bf5', class: 'password__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '932201990b5fa67f448d4ab8ca7f844f757d5e47', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '83f00cb4452b60fd883efcd742d6eb463a8fc729', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h("small", { key: '0f6f7ba5e9ec6f492f22a46ac77c7977f7a8e835', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
     }
     static get is() { return "password-input"; }
     static get encapsulation() { return "shadow"; }
@@ -243,8 +254,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -262,8 +271,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -281,8 +288,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -300,8 +305,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -320,8 +323,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -339,8 +340,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -363,9 +362,7 @@ export class PasswordInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "language": {
                 "type": "string",
@@ -381,8 +378,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -400,8 +395,6 @@ export class PasswordInput {
                     "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
             },
@@ -419,8 +412,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Flag for duplicate inputs, it sets up the input for certain validation rules."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-duplicate-input",
                 "reflect": true
             },
@@ -438,8 +429,6 @@ export class PasswordInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -526,6 +515,9 @@ export class PasswordInput {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {