@everymatrix/general-registration 1.10.11 → 1.10.13

package/dist/cjs/checkbox-input_11.cjs.entry.js

@@ -44,7 +44,17 @@ const CheckboxInput = class {
      * 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) {
@@ -62,6 +72,15 @@ const CheckboxInput = class {
   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;
@@ -84,7 +103,7 @@ const CheckboxInput = class {
     }
   }
   render() {
-    return index.h("div", { class: 'checkbox__wrapper' }, index.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() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.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() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23042,6 +23061,16 @@ const DateInput = class {
     index.registerInstance(this, hostRef);
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.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 });
@@ -23060,6 +23089,15 @@ const DateInput = class {
   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) {
@@ -23087,7 +23125,7 @@ const DateInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
-    return index.h("div", { class: 'date__wrapper' }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.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) }), index.h("small", { class: 'date__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.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) }), index.h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -23104,7 +23142,17 @@ const EmailInput = class {
     index.registerInstance(this, hostRef);
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.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 });
@@ -23133,6 +23181,15 @@ const EmailInput = class {
   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;
@@ -23172,7 +23229,7 @@ const EmailInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
-    return index.h("div", { class: 'email__wrapper' }, index.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) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, index.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) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23190,27 +23247,46 @@ const GeneralInput = class {
      * 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 index.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 index.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 index.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 index.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 index.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 index.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 index.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 index.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 index.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 index.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 index.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 index.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 index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language });
+        return index.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 index.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 index.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 index.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 index.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 index.h("p", null, "The ", this.type, " input type is not valid");
     }
@@ -23259,11 +23335,11 @@ const GeneralRegistration = class {
     */
     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;
@@ -23288,6 +23364,7 @@ const GeneralRegistration = class {
         .then((res) => res.text())
         .then((data) => {
         cssFile.innerHTML = data;
+        this.clientStyling = data;
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       });
     };
@@ -23550,7 +23627,7 @@ const GeneralRegistration = class {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.map(input => index.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 => index.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() {
@@ -23575,6 +23652,16 @@ const NumberInput = class {
     index.registerInstance(this, hostRef);
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.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 });
@@ -23593,6 +23680,15 @@ const NumberInput = class {
   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;
@@ -23619,7 +23715,7 @@ const NumberInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
-    return index.h("div", { class: 'number__wrapper' }, index.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) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, index.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) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -24434,8 +24530,18 @@ const PasswordInput = class {
      * 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 });
@@ -24464,6 +24570,15 @@ const PasswordInput = class {
   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) {
@@ -24504,7 +24619,7 @@ const PasswordInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
-    return index.h("div", { class: 'password__wrapper' }, index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
+    return index.h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, index.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) }), index.h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'password__error-message' }, this.errorMessage));
   }
@@ -24523,6 +24638,16 @@ const RadioInput = class {
     index.registerInstance(this, hostRef);
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.sendValidityState = index.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 });
@@ -24541,7 +24666,14 @@ const RadioInput = class {
   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;
@@ -24559,7 +24691,7 @@ const RadioInput = class {
     }
   }
   render() {
-    return index.h("fieldset", { class: 'radio__fieldset' }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.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) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
+    return index.h("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.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) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -28924,6 +29056,16 @@ const SelectInput = class {
      * 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 });
@@ -28956,6 +29098,15 @@ const SelectInput = class {
       }
     }
   }
+  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) {
@@ -28994,7 +29145,7 @@ const SelectInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
-    return index.h("div", { class: 'select__wrapper' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.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) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.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) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -29011,7 +29162,17 @@ const TelInput = class {
     index.registerInstance(this, hostRef);
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.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 });
@@ -29048,6 +29209,15 @@ const TelInput = class {
       }
     }
   }
+  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}`;
@@ -29099,7 +29269,7 @@ const TelInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
-    return index.h("div", { class: 'tel__wrapper' }, index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), index.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) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), index.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) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -29119,10 +29289,20 @@ const TextInput = class {
      * 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) {
@@ -29150,6 +29330,15 @@ const TextInput = class {
   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;
@@ -29189,7 +29378,7 @@ const TextInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    return index.h("div", { class: 'text__wrapper' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.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); } }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.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); } }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

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);
       });
     };
@@ -299,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() {
@@ -361,7 +362,7 @@ export class GeneralRegistration {
     },
     "clientStyling": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -371,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,
@@ -389,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,