@everymatrix/general-input 1.56.0 → 1.56.2

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-3bab966c.js';
+import { r as registerInstance, c as createEvent, h } from './index-34f25346.js';
 import { t as translate } from './locale.utils-0883d9a6.js';
 import { t as tooltipIconSvg } from './tooltipIcon-0a5a06a2.js';
 
@@ -10,23 +10,31 @@ const ToggleCheckboxInput = class {
         registerInstance(this, hostRef);
         this.sendValidityState = createEvent(this, "sendValidityState", 7);
         this.sendInputValue = 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);
@@ -73,11 +81,14 @@ const ToggleCheckboxInput = class {
         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: tooltipIconSvg, 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: tooltipIconSvg, 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 });
         })));
     }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingChange"]
+    }; }
 };
 ToggleCheckboxInput.style = ToggleCheckboxInputStyle0;
 

package/dist/general-input/general-input.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-5ab8d194.js";export{s as setNonce}from"./p-5ab8d194.js";import{g as i}from"./p-e1255160.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((async e=>(await i(),l([["p-a708ec0e",[[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],emitOnClick:[516,"emit-on-click"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]],{isValid:["validityChanged"],value:["valueChanged"],emitValue:["emitValueHandler"]}],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{isValid:["validityChanged"],emitValue:["emitValueHandler"]}]]],["p-9ad71153",[[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"],emitOnClick:[516,"emit-on-click"]}]]],["p-8ce07665",[[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]]]]]],e))));
+import{p as l,b as e}from"./p-8b2b0da7.js";export{s as setNonce}from"./p-8b2b0da7.js";import{g as i}from"./p-e1255160.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),l(i)})().then((async l=>(await i(),e([["p-063fdb7d",[[1,"checkbox-group-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],selectedValues:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],selectedValues:["setValue"],emitValue:["emitValueHandler"]}],[1,"checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"date-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],dateFormat:[513,"date-format"],emitOnClick:[516,"emit-on-click"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"email-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"number-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"password-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32],passwordComplexity:[32],showPopup:[32],value:[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],value:["valueChanged"],emitValue:["emitValueHandler"]}],[1,"radio-input",{name:[513],displayName:[513,"display-name"],optionsGroup:[16],validation:[16],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"select-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],options:[16],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"tel-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],showLabels:[516,"show-labels"],action:[513],validation:[16],defaultValue:[520,"default-value"],autofilled:[516],tooltip:[513],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}],[1,"text-input",{name:[513],displayName:[513,"display-name"],placeholder:[513],validation:[16],defaultValue:[513,"default-value"],autofilled:[516],tooltip:[513],language:[513],checkValidity:[516,"check-validity"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[513,"client-styling"],isValid:[32],errorMessage:[32],limitStylingAppends:[32],showTooltip:[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{clientStyling:["handleStylingChange"],isValid:["validityChanged"],emitValue:["emitValueHandler"]}]]],["p-261db8d1",[[1,"general-input",{type:[513],name:[513],displayName:[513,"display-name"],placeholder:[513],action:[513],validation:[16],options:[520],language:[513],autofilled:[516],tooltip:[513],defaultValue:[520,"default-value"],emitValue:[516,"emit-value"],isDuplicateInput:[516,"is-duplicate-input"],clientStyling:[520,"client-styling"],dateFormat:[513,"date-format"],translationUrl:[513,"translation-url"],emitOnClick:[516,"emit-on-click"]}]]],["p-e2eb81ed",[[1,"toggle-checkbox-input",{name:[513],displayName:[513,"display-name"],defaultValue:[513,"default-value"],options:[16],autofilled:[516],tooltip:[513],validation:[16],language:[513],emitValue:[516,"emit-value"],clientStyling:[513,"client-styling"],errorMessage:[32],isValid:[32],limitStylingAppends:[32],showTooltip:[32],showFields:[32]},[[4,"click","handleClickOutside"]],{clientStyling:["handleStylingChange"]}]]]],l))));