@everymatrix/general-registration 1.10.11 → 1.10.13

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") {

package/dist/components/date-input2.js

@@ -5061,6 +5061,16 @@ const DateInput = /*@__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 });
@@ -5079,6 +5089,15 @@ const DateInput = /*@__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() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
@@ -5106,7 +5125,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
-    return h("div", { class: 'date__wrapper' }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("small", { class: 'date__error-message' }, this.errorMessage));
+    return h("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -5122,8 +5141,10 @@ const DateInput = /*@__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") {

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

@@ -21,27 +21,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 +77,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") {

package/dist/components/password-input2.js

@@ -731,8 +731,18 @@ const PasswordInput = /*@__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.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 });
@@ -761,6 +771,15 @@ const PasswordInput = /*@__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() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
@@ -801,7 +820,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
-    return h("div", { class: 'password__wrapper' }, h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
+    return h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
       // ref={(el) => this.inputReference = el as HTMLInputElement}
       required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, onBlur: (e) => this.handleInput(e) }), h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'password__error-message' }, this.errorMessage));
   }
@@ -820,8 +839,10 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "language": [1],
     "emitValue": [4, "emit-value"],
     "isDuplicateInput": [4, "is-duplicate-input"],
+    "clientStyling": [1, "client-styling"],
     "isValid": [32],
-    "errorMessage": [32]
+    "errorMessage": [32],
+    "limitStylingAppends": [32]
   }, [[16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/radio-input2.js

@@ -10,6 +10,16 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
     this.sendValidityState = createEvent(this, "sendValidityState", 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,7 +38,14 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validityStateHandler(inputStateEvent) {
     this.sendValidityState.emit(inputStateEvent);
   }
-  connectedCallback() {
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   handleClick(event) {
     this.value = event.target.value;
@@ -46,7 +63,7 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    return h("fieldset", { class: 'radio__fieldset' }, h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h("div", { class: 'radio__wrapper' }, h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), h("label", { htmlFor: `${option.label}__input` }, option.label))), h("small", { class: 'radio__error-message' }, this.errorMessage));
+    return h("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h("div", { class: 'radio__wrapper' }, h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), h("label", { htmlFor: `${option.label}__input` }, option.label))), h("small", { class: 'radio__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -60,8 +77,10 @@ const RadioInput = /*@__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") {

package/dist/components/select-input2.js

@@ -20,6 +20,16 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Options of the input.
      */
     this.options = [];
+    /**
+     * 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 });
@@ -52,6 +62,15 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   componentDidLoad() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
@@ -90,7 +109,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
-    return h("div", { class: 'select__wrapper' }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
+    return h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -108,8 +127,10 @@ const SelectInput = /*@__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") {

package/dist/components/tel-input2.js

@@ -12,7 +12,17 @@ const TelInput = /*@__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 });
@@ -49,6 +59,15 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  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.prefixValue}|${this.phoneValue}`;
@@ -100,7 +119,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
-    return h("div", { class: 'tel__wrapper' }, h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
+    return h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -117,8 +136,10 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autofilled": [4],
     "language": [1],
     "emitValue": [4, "emit-value"],
+    "clientStyling": [1, "client-styling"],
     "isValid": [32],
-    "errorMessage": [32]
+    "errorMessage": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/text-input2.js

@@ -14,10 +14,20 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Default value for the input.
      */
     this.defaultValue = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
     this.errorMessage = '';
+    this.limitStylingAppends = false;
     this.value = '';
     this.customRules = [];
     this.validationPattern = '';
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
   }
   validityChanged() {
     if (this.emitValue == true) {
@@ -45,6 +55,15 @@ const TextInput = /*@__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;
@@ -84,7 +103,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    return h("div", { class: 'text__wrapper' }, h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("small", { class: 'text__error-message' }, this.errorMessage));
+    return h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -102,8 +121,10 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
     "isDuplicateInput": [4, "is-duplicate-input"],
+    "clientStyling": [1, "client-styling"],
     "isValid": [32],
-    "errorMessage": [32]
+    "errorMessage": [32],
+    "limitStylingAppends": [32]
   }, [[16, "sendInputValue", "valueChangedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {