@everymatrix/general-registration 1.10.11 → 1.10.12

package/dist/components/email-input2.js

@@ -10,7 +10,17 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
     this.validationPattern = '';
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -39,6 +49,15 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
+  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;
@@ -78,7 +97,7 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
-    return h("div", { class: 'email__wrapper' }, h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => this.handleInput(e) }), h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'email__error-message' }, this.errorMessage));
+    return h("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => this.handleInput(e) }), h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -94,8 +113,10 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "language": [1],
     "emitValue": [4, "emit-value"],
     "isDuplicateInput": [4, "is-duplicate-input"],
+    "clientStyling": [1, "client-styling"],
     "errorMessage": [32],
-    "isValid": [32]
+    "isValid": [32],
+    "limitStylingAppends": [32]
   }, [[16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/general-input2.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import './input-field-shared-styles.js';
 import { d as defineCustomElement$8 } from './date-input2.js';
 import { d as defineCustomElement$9 } from './checkbox-input2.js';
 import { d as defineCustomElement$7 } from './email-input2.js';
@@ -21,27 +20,46 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Type the general-input should take. Can take the default HTML input values.
      */
     this.type = 'text';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   render() {
     switch (this.type.toLowerCase()) {
       case 'text':
-        return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
+        return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling });
       case 'email':
-        return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
+        return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling });
       case 'number':
-        return h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
       case 'checkbox':
-        return h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language });
+        return h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling });
       case 'datetime':
-        return h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
       case 'password':
-        return h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
+        return h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling });
       case 'radio':
-        return h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language });
+        return h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
       case 'tel':
-        return h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled });
+        return h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling });
       case 'dropdown':
-        return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language });
+        return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling });
       default:
         return h("p", null, "The ", this.type, " input type is not valid");
     }
@@ -58,7 +76,9 @@ const GeneralInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "autofilled": [4],
     "defaultValue": [8, "default-value"],
     "emitValue": [4, "emit-value"],
-    "isDuplicateInput": [4, "is-duplicate-input"]
+    "isDuplicateInput": [4, "is-duplicate-input"],
+    "clientStyling": [1, "client-styling"],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/general-registration.js

@@ -53,11 +53,11 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     */
     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;
@@ -82,6 +82,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         .then((res) => res.text())
         .then((data) => {
         cssFile.innerHTML = data;
+        this.clientStyling = data;
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       });
     };
@@ -344,7 +345,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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() {
@@ -363,7 +364,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
 }, [1, "general-registration", {
     "endpoint": [1],
     "language": [1],
-    "clientStyling": [1, "client-styling"],
+    "clientStyling": [1025, "client-styling"],
     "clientStylingUrl": [1, "client-styling-url"],
     "errorMessage": [32],
     "emitValue": [32],

package/dist/components/number-input2.js

@@ -10,6 +10,16 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -28,6 +38,15 @@ const NumberInput = /*@__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 NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
-    return h("div", { class: 'number__wrapper' }, h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'number__error-message' }, this.errorMessage));
+    return h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -69,8 +88,10 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autofilled": [4],
     "language": [1],
     "emitValue": [4, "emit-value"],
+    "clientStyling": [1, "client-styling"],
     "errorMessage": [32],
-    "isValid": [32]
+    "isValid": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {