@everymatrix/general-input 1.56.0 → 1.56.2

package/dist/cjs/toggle-checkbox-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a91d7bcb.js');
+const index = require('./index-bce82d29.js');
 const locale_utils = require('./locale.utils-345d0792.js');
 const tooltipIcon = require('./tooltipIcon-7e9ee226.js');
 
@@ -14,23 +14,31 @@ const ToggleCheckboxInput = class {
         index.registerInstance(this, hostRef);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-        /**
-         * 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);
@@ -77,11 +85,14 @@ const ToggleCheckboxInput = class {
         return null;
     }
     render() {
-        return index.h("div", { key: '8c8e9bb2ae7feadf3a5fc38b9913e38d7ccb9aed', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '18e2ec43ff98738323ddab1e134d6d215978e1c7', class: 'togglecheckbox__wrapper--flex' }, index.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()), index.h("small", { key: 'efd70a691559cfa98e93561dd945a0fe92909718', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: 'e56a8fafa17da25d01f894fe6e6c143c318d2aab', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '8b59366827b8f4f8ca5581203a2dca44ae8132d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '475e27345b51396c36e78b5a1e06edd980bc3ae1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+        return index.h("div", { key: 'e8be91ce94cf76ebecc58a433ab567ab549f4692', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'dd42a6316cda06e357843165329de7525a24e3d5', class: 'togglecheckbox__wrapper--flex' }, index.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()), index.h("small", { key: 'cbc789c8a5c21debc05971ff347371fbc25d4975', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: 'a5ce470c985829eb1f5a0567bb974cc15e3d0d64', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'faef05dd9341ffe44b6833ca8f4c86b85ed61956', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '89fed5f103acecca78fa53eea64d57574ef42727', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
             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 });
         })));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingChange"]
+    }; }
 };
 ToggleCheckboxInput.style = ToggleCheckboxInputStyle0;
 

package/dist/collection/collection-manifest.json

@@ -15,8 +15,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.26.0",
-    "typescriptVersion": "5.5.4"
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [],
   "bundles": []

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

@@ -5,23 +5,31 @@ import "@vaadin/checkbox";
 import "@vaadin/checkbox-group";
 export class CheckboxGroupInput {
     constructor() {
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
-        this.selectedValues = [];
         this.value = null;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.options = 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.selectedValues = [];
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -97,8 +105,8 @@ export class CheckboxGroupInput {
         return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
     }
     render() {
-        return h("div", { key: 'fa45026502fd8d46aa537aee03210ad68d30e577', class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '15ded4fd896920c6244806e49f300c124c27186d', class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { key: 'd7eaa205877f8f12c9ef7d4f77018665806f5c7c', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
-            h("img", { key: 'aca39ed398415a6e2cef861be40dad33e0398759', class: 'checkboxgroup__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { key: 'a1a6e1c3c02edcca572b8826ffba06835ca451c3', class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { key: '9f5f8a945e4ba13d7d0da6d362c15d00a7796b71', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
+        return h("div", { key: 'c25b0a1ac187ea0abf1fe8c69d584eee00568177', class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'daf512e7f98d20bae65e43ab869e45babc008e90', class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { key: '08e31269cf2ace61c4c929a6a597486555667197', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
+            h("img", { key: 'ed4c3efd6b7e30ae0b68de11093b8faf2cb0a845', class: 'checkboxgroup__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { key: '5b95c4059a2de898c04bf147e89c5a2ad035dddf', class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { key: '2b73ac73d52c6185358e50eda4c9706643f55384', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
                 this.selectedValues = event.detail.value;
             } }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
     }
@@ -130,8 +138,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -149,8 +155,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -168,8 +172,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -188,8 +190,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -207,8 +207,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -231,9 +229,7 @@ export class CheckboxGroupInput {
                 "docs": {
                     "tags": [],
                     "text": "Options of the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "validation": {
                 "type": "unknown",
@@ -254,9 +250,7 @@ export class CheckboxGroupInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "language": {
                 "type": "string",
@@ -272,8 +266,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -291,8 +283,6 @@ export class CheckboxGroupInput {
                     "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
             },
@@ -310,8 +300,6 @@ export class CheckboxGroupInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -375,6 +363,9 @@ export class CheckboxGroupInput {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

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

@@ -3,22 +3,29 @@ import { translate } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class CheckboxInput {
     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.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.defaultValue = '';
+        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;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -82,8 +89,8 @@ export class CheckboxInput {
         return null;
     }
     render() {
-        return h("div", { key: '0aae00d291d1da02adae1bc91e79ccd579aa5c7f', class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("input", { key: '4b8c61d322b5065d8abe4e2687e270511fadc97f', class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = 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: '934263cb58a0d379e8b7dc1f5004ad7e61c63ce0', class: 'checkbox__error-message' }, this.errorMessage), h("div", { key: '88cc71329d88b6325d792226e64ff7f93e940178', class: 'checkbox__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '3708dc613dc920bac6557f2a8020bbafd97d9127', class: 'checkbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
+        return h("div", { key: '8c80c955bb052558165a4c5b1020d0582ed0af36', class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("input", { key: '89401d543cb30b72ec614b0cd4e95b2e82b2522d', class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = 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: 'd007d8c02dd014a363e2fcc1a0e8df6ffda34bcb', class: 'checkbox__error-message' }, this.errorMessage), h("div", { key: 'c511c07684173359663d4907371efb82289f0433', class: 'checkbox__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'dd263ce86efd89f34078f3cc24729f43f40e89a6', class: 'checkbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
     }
     static get is() { return "checkbox-input"; }
     static get encapsulation() { return "shadow"; }
@@ -113,8 +120,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -132,8 +137,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -151,8 +154,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -171,8 +172,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -190,8 +189,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -214,9 +211,7 @@ export class CheckboxInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "language": {
                 "type": "string",
@@ -232,8 +227,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -251,8 +244,6 @@ export class CheckboxInput {
                     "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
             },
@@ -270,8 +261,6 @@ export class CheckboxInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -333,6 +322,9 @@ export class CheckboxInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

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

@@ -7,16 +7,6 @@ import dateFnsParse from "date-fns/parse";
 import { isBefore, isAfter } from "date-fns";
 export class DateInput {
     constructor() {
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        /**
-         * Emit event on click
-         */
-        this.emitOnClick = false;
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.touched = false;
         this.formatDate = (dateParts) => {
             const { year, month, day } = dateParts;
@@ -37,6 +27,26 @@ export class DateInput {
             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.dateFormat = undefined;
+        this.emitOnClick = false;
+        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 });
@@ -134,8 +144,8 @@ export class DateInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'fc9cd0a618c7b6e62962c0800399a470fffa1fc4', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'abc7c1715dd2d0c60dd2ac6d028355de910be501', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: 'a6b40a978b573d41490457d708f9a7ac78622a6f', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { key: 'd802ea7b25a64802aca3a7491107fcee7af2a23c', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
-            h("img", { key: '46edd200a9ce9eba27414a6434c6b3d5e9dc9964', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return h("div", { key: 'ad6360e0afb065a91f860574f5e3c08f5bdb2534', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: '3e8d26e0c8ae0983997b84e95cb34887df1f5fe5', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: '62ee430506c2ab1a5ebb632d72e84ef905296888', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { key: '6b7c0e9c3437b484bd534060f93ad4fcd9eaeb60', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+            h("img", { key: '6479b29563710abfe1be584c9de110fafe69ca3d', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     static get is() { return "date-input"; }
     static get encapsulation() { return "shadow"; }
@@ -165,8 +175,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -184,8 +192,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Name of input to be shown to the user."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "display-name",
                 "reflect": true
             },
@@ -203,8 +209,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Placeholder text to be shown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -227,9 +231,7 @@ export class DateInput {
                 "docs": {
                     "tags": [],
                     "text": "Object of validation rules for the input."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "defaultValue": {
                 "type": "string",
@@ -245,8 +247,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Default value for the input."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "default-value",
                 "reflect": true
             },
@@ -264,8 +264,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Boolean. Determines if input should be readonly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofilled",
                 "reflect": true
             },
@@ -283,8 +281,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Tooltip text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "tooltip",
                 "reflect": true
             },
@@ -302,8 +298,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Currently selected language."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -321,8 +315,6 @@ export class DateInput {
                     "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
             },
@@ -340,8 +332,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Client custom styling via inline style"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -360,8 +350,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Date format for date picker."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "date-format",
                 "reflect": true
             },
@@ -379,8 +367,6 @@ export class DateInput {
                     "tags": [],
                     "text": "Emit event on click"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "emit-on-click",
                 "reflect": true,
                 "defaultValue": "false"
@@ -443,6 +429,9 @@ export class DateInput {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {