@everymatrix/general-registration 1.10.11 → 1.10.12

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
-import './input-field-shared-styles.js';
-import './vaadin-combo-box.js';
+import '@vaadin/combo-box';
 
 const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;padding-top:26px}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.select__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
@@ -20,6 +19,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 +61,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 +108,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 +126,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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
-import './input-field-shared-styles.js';
-import './vaadin-combo-box.js';
+import '@vaadin/combo-box';
 
 const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%;padding-top:26px}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.tel__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:8px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
@@ -12,7 +11,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 +58,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 +118,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 +135,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") {