@everymatrix/general-input 1.55.0 → 1.56.2

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

@@ -46,6 +46,10 @@ export class TelInput {
         this.limitStylingAppends = false;
         this.showTooltip = false;
     }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
         if (this.emitValue == true) {
@@ -156,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"; }
@@ -439,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

@@ -49,6 +49,10 @@ export class TextInput {
         this.limitStylingAppends = false;
         this.showTooltip = false;
     }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
         if (this.emitValue == true) {
@@ -154,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"; }
@@ -438,6 +442,9 @@ export class TextInput {
     }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {

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

@@ -25,6 +25,10 @@ export class ToggleCheckboxInput {
         this.showTooltip = false;
         this.showFields = this.defaultValue === 'true';
     }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
     validityStateHandler(inputStateEvent) {
         this.sendValidityState.emit(inputStateEvent);
     }
@@ -70,8 +74,8 @@ export class ToggleCheckboxInput {
         return null;
     }
     render() {
-        return h("div", { key: '8c8e9bb2ae7feadf3a5fc38b9913e38d7ccb9aed', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '18e2ec43ff98738323ddab1e134d6d215978e1c7', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '640b3ba4fd34bd813239533236e51f452e735409', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: 'efd70a691559cfa98e93561dd945a0fe92909718', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'e56a8fafa17da25d01f894fe6e6c143c318d2aab', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '8b59366827b8f4f8ca5581203a2dca44ae8132d5', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '475e27345b51396c36e78b5a1e06edd980bc3ae1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
+        return h("div", { key: 'e8be91ce94cf76ebecc58a433ab567ab549f4692', class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'dd42a6316cda06e357843165329de7525a24e3d5', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: '932a6f8caeafa0d006f636484e33dda246c314d0', class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { key: 'cbc789c8a5c21debc05971ff347371fbc25d4975', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: 'a5ce470c985829eb1f5a0567bb974cc15e3d0d64', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'faef05dd9341ffe44b6833ca8f4c86b85ed61956', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '89fed5f103acecca78fa53eea64d57574ef42727', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
             return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
         })));
     }
@@ -325,6 +329,12 @@ export class ToggleCheckboxInput {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",