@everymatrix/general-registration 1.10.10 → 1.10.12

package/dist/cjs/general-registration.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"autofilled":[4],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"errorMessage":[32],"isValid":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"isValid":[32],"errorMessage":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"defaultValue":[1,"default-value"],"autofilled":[4],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"isValid":[32],"errorMessage":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"language":[1],"clientStyling":[1025,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"autofilled":[4],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"defaultValue":[1,"default-value"],"autofilled":[4],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"autofilled":[4],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"errorMessage":[32],"isValid":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"isValid":[32],"errorMessage":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"defaultValue":[1,"default-value"],"autofilled":[4],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"isValid":[32],"errorMessage":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[1],"language":[1],"clientStyling":[1025,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"errorMessage":[32],"emitValue":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"limitStylingAppends":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"autofilled":[4],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"limitStylingAppends":[32]}],[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"defaultValue":[1,"default-value"],"autofilled":[4],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"defaultValue":[1,"default-value"],"autofilled":[4],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"language":[1],"emitValue":[4,"emit-value"],"clientStyling":[1,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"autofilled":[4],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isDuplicateInput":[4,"is-duplicate-input"],"clientStyling":[1,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
   });
 };
 

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

@@ -8,11 +8,11 @@ export class GeneralRegistration {
     */
     this.language = 'en';
     /**
-     * Client custom styling via string
+     * Client custom styling via inline styles
      */
     this.clientStyling = '';
     /**
-     * Client custom styling via url content
+     * Client custom styling via url
      */
     this.clientStylingUrl = '';
     this.emitValue = false;
@@ -37,6 +37,7 @@ export class GeneralRegistration {
         .then((res) => res.text())
         .then((data) => {
         cssFile.innerHTML = data;
+        this.clientStyling = data;
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       });
     };
@@ -67,8 +68,10 @@ export class GeneralRegistration {
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.stylingContainer) {
-      this.setClientStyling();
-      this.setClientStylingURL();
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
       this.limitStylingAppends = true;
     }
   }
@@ -297,7 +300,7 @@ export class GeneralRegistration {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput })));
+    return (this.listOfInputs.map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling })));
   }
   ;
   renderButtons() {
@@ -359,7 +362,7 @@ export class GeneralRegistration {
     },
     "clientStyling": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -369,7 +372,7 @@ export class GeneralRegistration {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Client custom styling via string"
+        "text": "Client custom styling via inline styles"
       },
       "attribute": "client-styling",
       "reflect": false,
@@ -387,7 +390,7 @@ export class GeneralRegistration {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Client custom styling via url content"
+        "text": "Client custom styling via url"
       },
       "attribute": "client-styling-url",
       "reflect": false,

package/dist/components/checkbox-input2.js

@@ -14,7 +14,17 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Default value for the input.
      */
     this.defaultValue = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
     this.value = '';
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   validityChanged() {
     if (this.emitValue == true) {
@@ -32,6 +42,15 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
@@ -54,7 +73,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   render() {
-    return h("div", { class: 'checkbox__wrapper' }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -69,8 +88,10 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "validation": [16],
     "language": [1],
     "emitValue": [4, "emit-value"],
+    "clientStyling": [1, "client-styling"],
     "errorMessage": [32],
-    "isValid": [32]
+    "isValid": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {