@everymatrix/general-input 1.56.0 → 1.56.2

package/dist/cjs/checkbox-group-input_10.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a91d7bcb.js');
+const index = require('./index-bce82d29.js');
 const locale_utils = require('./locale.utils-345d0792.js');
 const tooltipIcon = require('./tooltipIcon-7e9ee226.js');
 
@@ -12,55 +12,13 @@ const tooltipIcon = require('./tooltipIcon-7e9ee226.js');
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-window.Vaadin ||= {};
-window.Vaadin.featureFlags ||= {};
-
-function dashToCamelCase$1(dash) {
-  return dash.replace(/-[a-z]/gu, (m) => m[1].toUpperCase());
-}
-
-const experimentalMap = {};
-
-function defineCustomElement(CustomElement, version = '24.6.5') {
+function defineCustomElement(CustomElement, version = '24.5.10') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;
     },
   });
 
-  if (CustomElement.experimental) {
-    const featureFlagKey =
-      typeof CustomElement.experimental === 'string'
-        ? CustomElement.experimental
-        : `${dashToCamelCase$1(CustomElement.is.split('-').slice(1).join('-'))}Component`;
-
-    if (!window.Vaadin.featureFlags[featureFlagKey] && !experimentalMap[featureFlagKey]) {
-      // Add setter to define experimental component when it's set to true
-      experimentalMap[featureFlagKey] = new Set();
-      experimentalMap[featureFlagKey].add(CustomElement);
-
-      Object.defineProperty(window.Vaadin.featureFlags, featureFlagKey, {
-        get() {
-          return experimentalMap[featureFlagKey].size === 0;
-        },
-        set(value) {
-          if (!!value && experimentalMap[featureFlagKey].size > 0) {
-            experimentalMap[featureFlagKey].forEach((elementClass) => {
-              customElements.define(elementClass.is, elementClass);
-            });
-            experimentalMap[featureFlagKey].clear();
-          }
-        },
-      });
-
-      return;
-    } else if (experimentalMap[featureFlagKey]) {
-      // Allow to register multiple components with single flag
-      experimentalMap[featureFlagKey].add(CustomElement);
-      return;
-    }
-  }
-
   const defined = customElements.get(CustomElement.is);
   if (!defined) {
     customElements.define(CustomElement.is, CustomElement);
@@ -809,7 +767,7 @@ registerStyles('', color, { moduleId: 'lumo-color' });
 const fontIcons = i$3`
   @font-face {
     font-family: 'lumo-icons';
-    src: url(data:application/font-woff;charset=utf-8;base64,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)
+    src: url(data:application/font-woff;charset=utf-8;base64,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)
       format('woff');
     font-weight: normal;
     font-style: normal;
@@ -839,27 +797,25 @@ const fontIcons = i$3`
     --lumo-icons-cog: '\\ea15';
     --lumo-icons-cross: '\\ea16';
     --lumo-icons-download: '\\ea17';
-    --lumo-icons-drag-handle: '\\ea18';
-    --lumo-icons-dropdown: '\\ea19';
-    --lumo-icons-edit: '\\ea1a';
-    --lumo-icons-error: '\\ea1b';
-    --lumo-icons-eye: '\\ea1c';
-    --lumo-icons-eye-disabled: '\\ea1d';
-    --lumo-icons-menu: '\\ea1e';
-    --lumo-icons-minus: '\\ea1f';
-    --lumo-icons-ordered-list: '\\ea20';
-    --lumo-icons-phone: '\\ea21';
-    --lumo-icons-photo: '\\ea22';
-    --lumo-icons-play: '\\ea23';
-    --lumo-icons-plus: '\\ea24';
-    --lumo-icons-redo: '\\ea25';
-    --lumo-icons-reload: '\\ea26';
-    --lumo-icons-resize-handle: '\\ea27';
-    --lumo-icons-search: '\\ea28';
-    --lumo-icons-undo: '\\ea29';
-    --lumo-icons-unordered-list: '\\ea2a';
-    --lumo-icons-upload: '\\ea2b';
-    --lumo-icons-user: '\\ea2c';
+    --lumo-icons-dropdown: '\\ea18';
+    --lumo-icons-edit: '\\ea19';
+    --lumo-icons-error: '\\ea1a';
+    --lumo-icons-eye: '\\ea1b';
+    --lumo-icons-eye-disabled: '\\ea1c';
+    --lumo-icons-menu: '\\ea1d';
+    --lumo-icons-minus: '\\ea1e';
+    --lumo-icons-ordered-list: '\\ea1f';
+    --lumo-icons-phone: '\\ea20';
+    --lumo-icons-photo: '\\ea21';
+    --lumo-icons-play: '\\ea22';
+    --lumo-icons-plus: '\\ea23';
+    --lumo-icons-redo: '\\ea24';
+    --lumo-icons-reload: '\\ea25';
+    --lumo-icons-search: '\\ea26';
+    --lumo-icons-undo: '\\ea27';
+    --lumo-icons-unordered-list: '\\ea28';
+    --lumo-icons-upload: '\\ea29';
+    --lumo-icons-user: '\\ea2a';
   }
 `;
 
@@ -11204,7 +11160,6 @@ const DisabledMixin = dedupingMixin(
             value: false,
             observer: '_disabledChanged',
             reflectToAttribute: true,
-            sync: true,
           },
         };
       }
@@ -12328,8 +12283,6 @@ const InputMixin = dedupingMixin(
         if (this.inputElement) {
           this.inputElement[this._inputElementValueProperty] = value;
         }
-
-        this._hasInputValue = value && value.length > 0;
       }
 
       /**
@@ -12523,7 +12476,6 @@ const CheckedMixin = dedupingMixin(
             value: false,
             notify: true,
             reflectToAttribute: true,
-            sync: true,
           },
         };
       }
@@ -13559,22 +13511,6 @@ const ValidateMixin = dedupingMixin(
             value: false,
           },
 
-          /**
-           * Set to true to enable manual validation mode. This mode disables automatic
-           * constraint validation, allowing you to control the validation process yourself.
-           * You can still trigger constraint validation manually with the `validate()` method
-           * or use `checkValidity()` to assess the component's validity without affecting
-           * the invalid state. In manual validation mode, you can also manipulate
-           * the `invalid` property directly through your application logic without conflicts
-           * with the component's internal validation.
-           *
-           * @attr {boolean} manual-validation
-           */
-          manualValidation: {
-            type: Boolean,
-            value: false,
-          },
-
           /**
            * Specifies that the user must fill in a value.
            */
@@ -13629,14 +13565,6 @@ const ValidateMixin = dedupingMixin(
         return true;
       }
 
-      /** @protected */
-      _requestValidation() {
-        if (!this.manualValidation) {
-          // eslint-disable-next-line no-restricted-syntax
-          this.validate();
-        }
-      }
-
       /**
        * Fired whenever the field is validated.
        *
@@ -14159,14 +14087,14 @@ const CheckboxMixin = (superclass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (!focused && document.hasFocus()) {
-        this._requestValidation();
+        this.validate();
       }
     }
 
     /** @private */
     _checkedChanged(checked) {
       if (checked || this.__oldChecked) {
-        this._requestValidation();
+        this.validate();
       }
 
       this.__oldChecked = checked;
@@ -14183,7 +14111,7 @@ const CheckboxMixin = (superclass) =>
       super._requiredChanged(required);
 
       if (required === false) {
-        this._requestValidation();
+        this.validate();
       }
     }
 
@@ -14883,7 +14811,7 @@ const CheckboxGroupMixin = (superclass) =>
       });
 
       if (oldValue !== undefined) {
-        this._requestValidation();
+        this.validate();
       }
     }
 
@@ -14923,7 +14851,7 @@ const CheckboxGroupMixin = (superclass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (!focused && document.hasFocus()) {
-        this._requestValidation();
+        this.validate();
       }
     }
   };
@@ -15063,23 +14991,31 @@ const CheckboxGroupInput = class {
         index.registerInstance(this, hostRef);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
-        this.selectedValues = [];
         this.value = null;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.options = undefined;
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+        this.selectedValues = [];
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -15155,13 +15091,14 @@ const CheckboxGroupInput = class {
         return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
     }
     render() {
-        return index.h("div", { key: 'fa45026502fd8d46aa537aee03210ad68d30e577', class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '15ded4fd896920c6244806e49f300c124c27186d', class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { key: 'd7eaa205877f8f12c9ef7d4f77018665806f5c7c', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
-            index.h("img", { key: 'aca39ed398415a6e2cef861be40dad33e0398759', class: 'checkboxgroup__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: 'a1a6e1c3c02edcca572b8826ffba06835ca451c3', class: 'checkboxgroup__error-message' }, this.errorMessage), index.h("vaadin-checkbox-group", { key: '9f5f8a945e4ba13d7d0da6d362c15d00a7796b71', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
+        return index.h("div", { key: 'c25b0a1ac187ea0abf1fe8c69d584eee00568177', class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'daf512e7f98d20bae65e43ab869e45babc008e90', class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { key: '08e31269cf2ace61c4c929a6a597486555667197', class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
+            index.h("img", { key: 'ed4c3efd6b7e30ae0b68de11093b8faf2cb0a845', class: 'checkboxgroup__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { key: '5b95c4059a2de898c04bf147e89c5a2ad035dddf', class: 'checkboxgroup__error-message' }, this.errorMessage), index.h("vaadin-checkbox-group", { key: '2b73ac73d52c6185358e50eda4c9706643f55384', theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
                 this.selectedValues = event.detail.value;
             } }, this.options.map((checkbox) => index.h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "selectedValues": ["setValue"],
         "emitValue": ["emitValueHandler"]
@@ -15177,22 +15114,29 @@ const CheckboxInput = class {
         index.registerInstance(this, hostRef);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.value = '';
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -15256,10 +15200,11 @@ const CheckboxInput = class {
         return null;
     }
     render() {
-        return index.h("div", { key: '0aae00d291d1da02adae1bc91e79ccd579aa5c7f', class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("input", { key: '4b8c61d322b5065d8abe4e2687e270511fadc97f', class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), index.h("small", { key: '934263cb58a0d379e8b7dc1f5004ad7e61c63ce0', class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { key: '88cc71329d88b6325d792226e64ff7f93e940178', class: 'checkbox__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '3708dc613dc920bac6557f2a8020bbafd97d9127', class: 'checkbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
+        return index.h("div", { key: '8c80c955bb052558165a4c5b1020d0582ed0af36', class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("input", { key: '89401d543cb30b72ec614b0cd4e95b2e82b2522d', class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), index.h("small", { key: 'd007d8c02dd014a363e2fcc1a0e8df6ffda34bcb', class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { key: 'c511c07684173359663d4907371efb82289f0433', class: 'checkbox__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'dd263ce86efd89f34078f3cc24729f43f40e89a6', class: 'checkbox__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
     }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -17601,7 +17546,6 @@ const OverlayMixin = (superClass) =>
           notify: true,
           observer: '_openedChanged',
           reflectToAttribute: true,
-          sync: true,
         },
 
         /**
@@ -17610,7 +17554,6 @@ const OverlayMixin = (superClass) =>
          */
         owner: {
           type: Object,
-          sync: true,
         },
 
         /**
@@ -17618,7 +17561,6 @@ const OverlayMixin = (superClass) =>
          */
         model: {
           type: Object,
-          sync: true,
         },
 
         /**
@@ -17632,7 +17574,6 @@ const OverlayMixin = (superClass) =>
          */
         renderer: {
           type: Object,
-          sync: true,
         },
 
         /**
@@ -17645,7 +17586,6 @@ const OverlayMixin = (superClass) =>
           value: false,
           reflectToAttribute: true,
           observer: '_modelessChanged',
-          sync: true,
         },
 
         /**
@@ -17657,7 +17597,6 @@ const OverlayMixin = (superClass) =>
           type: Boolean,
           reflectToAttribute: true,
           observer: '_hiddenChanged',
-          sync: true,
         },
 
         /**
@@ -17668,7 +17607,6 @@ const OverlayMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
-          sync: true,
         },
       };
     }
@@ -19497,21 +19435,6 @@ class InfiniteScroller extends HTMLElement {
     }
   }
 
-  /** @protected */
-  disconnectedCallback() {
-    if (this._debouncerScrollFinish) {
-      this._debouncerScrollFinish.cancel();
-    }
-
-    if (this._debouncerUpdateClones) {
-      this._debouncerUpdateClones.cancel();
-    }
-
-    if (this.__pendingFinishInit) {
-      cancelAnimationFrame(this.__pendingFinishInit);
-    }
-  }
-
   /**
    * Force the scroller to update clones after a reset, without
    * waiting for the debouncer to resolve.
@@ -19659,9 +19582,8 @@ class InfiniteScroller extends HTMLElement {
       }
     });
 
-    this.__pendingFinishInit = requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
       this._finishInit();
-      this.__pendingFinishInit = null;
     });
   }
 
@@ -19676,10 +19598,6 @@ class InfiniteScroller extends HTMLElement {
     itemWrapper.instance = this._createElement();
     itemWrapper.appendChild(itemWrapper.instance);
 
-    if (itemWrapper.instance.performUpdate) {
-      itemWrapper.instance.performUpdate();
-    }
-
     Object.keys(tmpInstance).forEach((prop) => {
       itemWrapper.instance[prop] = tmpInstance[prop];
     });
@@ -21697,10 +21615,6 @@ const MonthCalendarMixin = (superClass) =>
           value: () => false,
         },
 
-        enteredDate: {
-          type: Date,
-        },
-
         disabled: {
           type: Boolean,
           reflectToAttribute: true,
@@ -21720,11 +21634,6 @@ const MonthCalendarMixin = (superClass) =>
         _notTapping: {
           type: Boolean,
         },
-
-        /** @private */
-        __hasFocus: {
-          type: Boolean,
-        },
       };
     }
 
@@ -21744,12 +21653,6 @@ const MonthCalendarMixin = (superClass) =>
       addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
     }
 
-    /** @override */
-    _setFocused(focused) {
-      super._setFocused(focused);
-      this.__hasFocus = focused;
-    }
-
     /**
      * Returns true if all the dates in the month are out of the allowed range
      * @protected
@@ -22045,7 +21948,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
+                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled)]]"
                   date="[[item]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
                   disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
@@ -22103,7 +22006,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   // eslint-disable-next-line @typescript-eslint/max-params
-  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
     const result = ['date'];
     const greaterThanToday = date > normalizeDate(new Date());
     const lessThanToday = date < normalizeDate(new Date());
@@ -22112,7 +22015,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       result.push('disabled');
     }
 
-    if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
+    if (this.__isDayFocused(date, focusedDate)) {
       result.push('focused');
     }
 
@@ -22135,6 +22038,11 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
     return result.join(' ');
   }
 
+  /** @private */
+  __isDayFocused(date, focusedDate) {
+    return dateEquals(date, focusedDate);
+  }
+
   /** @private */
   __isDaySelected(date, selectedDate) {
     return dateEquals(date, selectedDate);
@@ -22165,7 +22073,11 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   __getDayTabindex(date, focusedDate) {
-    return dateEquals(date, focusedDate) ? '0' : '-1';
+    if (this.__isDayFocused(date, focusedDate)) {
+      return '0';
+    }
+
+    return '-1';
   }
 }
 
@@ -22284,7 +22196,6 @@ const DatePickerOverlayContentMixin = (superClass) =>
         initialPosition: {
           type: Object,
           observer: '_initialPositionChanged',
-          sync: true,
         },
 
         _originDate: {
@@ -22352,11 +22263,6 @@ const DatePickerOverlayContentMixin = (superClass) =>
           type: Function,
         },
 
-        enteredDate: {
-          type: Date,
-          sync: true,
-        },
-
         /**
          * Input label
          */
@@ -22384,7 +22290,7 @@ const DatePickerOverlayContentMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled, enteredDate)',
+        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled)',
         '__updateCancelButton(_cancelButton, i18n)',
         '__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
         '__updateYears(years, selectedDate, _theme)',
@@ -22572,7 +22478,6 @@ const DatePickerOverlayContentMixin = (superClass) =>
       ignoreTaps,
       theme,
       isDateDisabled,
-      enteredDate,
     ) {
       if (calendars && calendars.length) {
         calendars.forEach((calendar) => {
@@ -22584,7 +22489,6 @@ const DatePickerOverlayContentMixin = (superClass) =>
           calendar.selectedDate = selectedDate;
           calendar.showWeekNumbers = showWeekNumbers;
           calendar.ignoreTaps = ignoreTaps;
-          calendar.enteredDate = enteredDate;
 
           if (theme) {
             calendar.setAttribute('theme', theme);
@@ -23693,8 +23597,8 @@ const InputConstraintsMixin = dedupingMixin(
         const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
 
         if ((this._hasValue || this.invalid) && hasConstraints) {
-          this._requestValidation();
-        } else if (isLastConstraintRemoved && !this.manualValidation) {
+          this.validate();
+        } else if (isLastConstraintRemoved) {
           this._setInvalid(false);
         }
 
@@ -23712,7 +23616,7 @@ const InputConstraintsMixin = dedupingMixin(
       _onChange(event) {
         event.stopPropagation();
 
-        this._requestValidation();
+        this.validate();
 
         this.dispatchEvent(
           new CustomEvent('change', {
@@ -23855,6 +23759,30 @@ const InputControlMixin = (superclass) =>
       }
     }
 
+    /**
+     * Override an event listener inherited from `InputMixin`
+     * to capture native `change` event and make sure that
+     * a new one is dispatched after validation runs.
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onChange(event) {
+      event.stopPropagation();
+
+      this.validate();
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {
+            sourceEvent: event,
+          },
+          bubbles: event.bubbles,
+          cancelable: event.cancelable,
+        }),
+      );
+    }
+
     /**
      * Override a method from `InputMixin`.
      * @param {!HTMLElement} input
@@ -24190,62 +24118,6 @@ class VirtualKeyboardController {
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const datePickerI18nDefaults = Object.freeze({
-  monthNames: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-  weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-  firstDayOfWeek: 0,
-  today: 'Today',
-  cancel: 'Cancel',
-  referenceDate: '',
-  formatDate(d) {
-    const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
-    return [d.month + 1, d.day, yearStr].join('/');
-  },
-  parseDate(text) {
-    const parts = text.split('/');
-    const today = new Date();
-    let date,
-      month = today.getMonth(),
-      year = today.getFullYear();
-
-    if (parts.length === 3) {
-      month = parseInt(parts[0]) - 1;
-      date = parseInt(parts[1]);
-      year = parseInt(parts[2]);
-      if (parts[2].length < 3 && year >= 0) {
-        const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
-        year = getAdjustedYear(usedReferenceDate, year, month, date);
-      }
-    } else if (parts.length === 2) {
-      month = parseInt(parts[0]) - 1;
-      date = parseInt(parts[1]);
-    } else if (parts.length === 1) {
-      date = parseInt(parts[0]);
-    }
-
-    if (date !== undefined) {
-      return { day: date, month, year };
-    }
-  },
-  formatTitle: (monthName, fullYear) => {
-    return `${monthName} ${fullYear}`;
-  },
-});
-
 /**
  * @polymerMixin
  * @mixes ControllerMixin
@@ -24319,10 +24191,7 @@ const DatePickerMixin = (subclass) =>
          * Set true to prevent the overlay from opening automatically.
          * @attr {boolean} auto-open-disabled
          */
-        autoOpenDisabled: {
-          type: Boolean,
-          sync: true,
-        },
+        autoOpenDisabled: Boolean,
 
         /**
          * Set true to display ISO-8601 week numbers in the calendar. Notice that
@@ -24443,7 +24312,63 @@ const DatePickerMixin = (subclass) =>
         i18n: {
           type: Object,
           sync: true,
-          value: () => ({ ...datePickerI18nDefaults }),
+          value: () => {
+            return {
+              monthNames: [
+                'January',
+                'February',
+                'March',
+                'April',
+                'May',
+                'June',
+                'July',
+                'August',
+                'September',
+                'October',
+                'November',
+                'December',
+              ],
+              weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+              weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+              firstDayOfWeek: 0,
+              today: 'Today',
+              cancel: 'Cancel',
+              referenceDate: '',
+              formatDate(d) {
+                const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
+                return [d.month + 1, d.day, yearStr].join('/');
+              },
+              parseDate(text) {
+                const parts = text.split('/');
+                const today = new Date();
+                let date,
+                  month = today.getMonth(),
+                  year = today.getFullYear();
+
+                if (parts.length === 3) {
+                  month = parseInt(parts[0]) - 1;
+                  date = parseInt(parts[1]);
+                  year = parseInt(parts[2]);
+                  if (parts[2].length < 3 && year >= 0) {
+                    const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
+                    year = getAdjustedYear(usedReferenceDate, year, month, date);
+                  }
+                } else if (parts.length === 2) {
+                  month = parseInt(parts[0]) - 1;
+                  date = parseInt(parts[1]);
+                } else if (parts.length === 1) {
+                  date = parseInt(parts[0]);
+                }
+
+                if (date !== undefined) {
+                  return { day: date, month, year };
+                }
+              },
+              formatTitle: (monthName, fullYear) => {
+                return `${monthName} ${fullYear}`;
+              },
+            };
+          },
         },
 
         /**
@@ -24528,10 +24453,18 @@ const DatePickerMixin = (subclass) =>
           sync: true,
         },
 
-        /** @private */
-        __enteredDate: {
-          type: Date,
-          sync: true,
+        /**
+         * In date-picker, unlike other components extending `InputMixin`,
+         * the property indicates true only if the input has been entered by the user.
+         * In the case of programmatic changes, the property is reset to false.
+         * Read more about why this workaround is needed:
+         * https://github.com/vaadin/web-components/issues/5639
+         *
+         * @protected
+         * @override
+         */
+        _hasInputValue: {
+          type: Boolean,
         },
       };
     }
@@ -24540,7 +24473,7 @@ const DatePickerMixin = (subclass) =>
       return [
         '_selectedDateChanged(_selectedDate, i18n)',
         '_focusedDateChanged(_focusedDate, i18n)',
-        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled, __enteredDate)',
+        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled)',
         '__updateOverlayContentTheme(_overlayContent, _theme)',
         '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
@@ -24558,17 +24491,28 @@ const DatePickerMixin = (subclass) =>
       this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
-    /** @override */
+    /**
+     * @override
+     * @protected
+     */
     get _inputElementValue() {
       return super._inputElementValue;
     }
 
-    /** @override */
+    /**
+     * The setter is overridden to reset the `_hasInputValue` property
+     * to false when the input element's value is updated programmatically.
+     * In date-picker, `_hasInputValue` is supposed to indicate true only
+     * if the input has been entered by the user.
+     * Read more about why this workaround is needed:
+     * https://github.com/vaadin/web-components/issues/5639
+     *
+     * @override
+     * @protected
+     */
     set _inputElementValue(value) {
       super._inputElementValue = value;
-
-      const parsedDate = this.__parseDate(value);
-      this.__setEnteredDate(parsedDate);
+      this._hasInputValue = false;
     }
 
     /**
@@ -24630,7 +24574,7 @@ const DatePickerMixin = (subclass) =>
         // Do not validate when focusout is caused by document
         // losing focus, which happens on browser tab switch.
         if (document.hasFocus()) {
-          this._requestValidation();
+          this.validate();
         }
       }
     }
@@ -24775,8 +24719,13 @@ const DatePickerMixin = (subclass) =>
         !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate, this.isDateDisabled);
 
       let inputValidity = true;
-      if (this.inputElement && this.inputElement.checkValidity) {
-        inputValidity = this.inputElement.checkValidity();
+      if (this.inputElement) {
+        if (this.inputElement.checkValidity) {
+          inputValidity = this.inputElement.checkValidity();
+        } else if (this.inputElement.validate) {
+          // Iron-form-elements have the validate API
+          inputValidity = this.inputElement.validate();
+        }
       }
 
       return inputValid && isDateValid && inputValidity;
@@ -24863,10 +24812,10 @@ const DatePickerMixin = (subclass) =>
       const unparsableValue = this.__unparsableValue;
 
       if (this.__committedValue !== this.value) {
-        this._requestValidation();
+        this.validate();
         this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
       } else if (this.__committedUnparsableValue !== unparsableValue) {
-        this._requestValidation();
+        this.validate();
         this.dispatchEvent(new CustomEvent('unparsable-change'));
       }
 
@@ -24995,7 +24944,7 @@ const DatePickerMixin = (subclass) =>
 
           if (oldValue !== undefined) {
             // Validate only if `value` changes after initialization.
-            this._requestValidation();
+            this.validate();
           }
         }
       } else {
@@ -25022,7 +24971,6 @@ const DatePickerMixin = (subclass) =>
       selectedDate,
       showWeekNumbers,
       isDateDisabled,
-      enteredDate,
     ) {
       if (overlayContent) {
         overlayContent.i18n = i18n;
@@ -25033,7 +24981,6 @@ const DatePickerMixin = (subclass) =>
         overlayContent.selectedDate = selectedDate;
         overlayContent.showWeekNumbers = showWeekNumbers;
         overlayContent.isDateDisabled = isDateDisabled;
-        overlayContent.enteredDate = enteredDate;
       }
     }
 
@@ -25163,7 +25110,7 @@ const DatePickerMixin = (subclass) =>
       // Needed in case the value was not changed: open and close dropdown,
       // especially on outside click. On Esc key press, do not validate.
       if (!this.value && !this._keyboardActive) {
-        this._requestValidation();
+        this.validate();
       }
     }
 
@@ -25355,32 +25302,15 @@ const DatePickerMixin = (subclass) =>
         this.open();
       }
 
-      const parsedDate = this.__parseDate(this._inputElementValue || '');
-      if (parsedDate) {
-        this._ignoreFocusedDateChange = true;
-        if (!dateEquals(parsedDate, this._focusedDate)) {
-          this._focusedDate = parsedDate;
-        }
-        this._ignoreFocusedDateChange = false;
-      }
-
-      this.__setEnteredDate(parsedDate);
-    }
-
-    /**
-     * @param {Date} date
-     * @private
-     */
-    __setEnteredDate(date) {
-      if (date) {
-        if (!dateEquals(this.__enteredDate, date)) {
-          this.__enteredDate = date;
+      if (this._inputElementValue) {
+        const parsedDate = this.__parseDate(this._inputElementValue);
+        if (parsedDate) {
+          this._ignoreFocusedDateChange = true;
+          if (!dateEquals(parsedDate, this._focusedDate)) {
+            this._focusedDate = parsedDate;
+          }
+          this._ignoreFocusedDateChange = false;
         }
-      } else if (this.__enteredDate != null) {
-        // Do not override initial undefined value with null
-        // to avoid triggering a Lit update that can cause
-        // other scheduled properties to flush too early.
-        this.__enteredDate = null;
       }
     }
 
@@ -25664,7 +25594,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
-    // Prevent closing the overlay on label element click
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }
@@ -30769,16 +30698,6 @@ 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 = '';
-        /**
-         * Emit event on click
-         */
-        this.emitOnClick = false;
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.touched = false;
         this.formatDate = (dateParts) => {
             const { year, month, day } = dateParts;
@@ -30799,6 +30718,26 @@ const DateInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.dateFormat = undefined;
+        this.emitOnClick = false;
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -30896,11 +30835,12 @@ const DateInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'fc9cd0a618c7b6e62962c0800399a470fffa1fc4', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'abc7c1715dd2d0c60dd2ac6d028355de910be501', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: 'a6b40a978b573d41490457d708f9a7ac78622a6f', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { key: 'd802ea7b25a64802aca3a7491107fcee7af2a23c', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
-            index.h("img", { key: '46edd200a9ce9eba27414a6434c6b3d5e9dc9964', class: 'date__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return index.h("div", { key: 'ad6360e0afb065a91f860574f5e3c08f5bdb2534', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '3e8d26e0c8ae0983997b84e95cb34887df1f5fe5', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: '62ee430506c2ab1a5ebb632d72e84ef905296888', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { key: '6b7c0e9c3437b484bd534060f93ad4fcd9eaeb60', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+            index.h("img", { key: '6479b29563710abfe1be584c9de110fafe69ca3d', class: 'date__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -30915,12 +30855,6 @@ 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.showTooltip = false;
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
@@ -30945,6 +30879,25 @@ const EmailInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -31034,10 +30987,11 @@ const EmailInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '23ac67984ab7a0f4db01e5fe01f4f326b4c6a912', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'aa2405e435aea20f1678dd74776a8ce4094bc95b', class: 'email__wrapper--flex' }, index.h("label", { key: '970b83bbcf082d1721c1647993fecd076939b65d', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '2f03eaf161aab9b45282c1bc0de15bea8455427c', class: 'email__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '3c34b91f0b478cf04f5aabc5fdd33a8ed73d091b', class: 'email__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '491f83c0f562893c02e3425b4d54eecc214e3c95', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'edb6660d958cc5d0cb41b0db195bd7e847ecbefe', class: 'email__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'a46093cfafc840d2fd563ee9676ccd2f16fb1620', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '2eab4a96efc36cdb94e9f92b2a161e208f0ebcd4', class: 'email__wrapper--flex' }, index.h("label", { key: 'f5ed857f61ea6763c5fe88590732258b4dedac1b', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '58cadc7857cd91dec968852be71e0108f55fbda7', class: 'email__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '03009d036fde1c36b9348ac45cefa3389194260c', class: 'email__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'b2a9fd96ed301df5f1d7cf6f5a2a5b52f96ab189', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'edb17f53141a3406bfc657f80098b914044a8894', class: 'email__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -31052,12 +31006,6 @@ 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.showTooltip = false;
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
@@ -31082,6 +31030,24 @@ const NumberInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -31159,10 +31125,11 @@ const NumberInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '2032f77ca52b330ae2e8f484d7a0aba60ee7b9d5', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '0786901cd928bba86597180f058bff43fba522b6', class: 'number__wrapper--flex' }, index.h("label", { key: 'ff7f39306cef7aeba3e0e4508df03c5a945e748b', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'dced91223621551472fee374d56f1ad7476f4191', class: 'number__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'a804a983e342e4d117126720a32c4c34a2b267dc', class: 'number__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'fd59afaedf7d9f761684b057a1809474d735cc26', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'ca11558b5704b69311626736ab84a298449b98d7', class: 'number__error-message' }, this.errorMessage));
+        return index.h("div", { key: '841265bba6b75cc61a0eac1450c3f5aa5f917a2e', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '645c7817cf5a0bdc352de9d8c0698fde235aa6d3', class: 'number__wrapper--flex' }, index.h("label", { key: '3343cbbb8482b71cd152161a8d422f318f07f3fe', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '1f3341b2127095870610fc0e0b4b5d220c5d2e2c', class: 'number__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '8bbe2fe9f62347cbcd37b753d4a1b0718dc39091', class: 'number__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '100401abdc33069f34e27e0807c9f31ddf7e42ec', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'db1e0043bb9b6de2ad8e18f49f96152b9451b93c', class: 'number__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -31277,7 +31244,7 @@ const InputFieldMixin = (superclass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (!focused && document.hasFocus()) {
-        this._requestValidation();
+        this.validate();
       }
     }
 
@@ -31292,7 +31259,7 @@ const InputFieldMixin = (superclass) =>
       super._onInput(event);
 
       if (this.invalid) {
-        this._requestValidation();
+        this.validate();
       }
     }
 
@@ -31313,7 +31280,7 @@ const InputFieldMixin = (superclass) =>
       }
 
       if (this.invalid) {
-        this._requestValidation();
+        this.validate();
       }
     }
   };
@@ -31507,6 +31474,24 @@ class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement
     `;
   }
 
+  static get properties() {
+    return {
+      /**
+       * Maximum number of characters (in Unicode code points) that the user can enter.
+       */
+      maxlength: {
+        type: Number,
+      },
+
+      /**
+       * Minimum number of characters (in Unicode code points) that the user can enter.
+       */
+      minlength: {
+        type: Number,
+      },
+    };
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -31947,17 +31932,6 @@ const PasswordInput = class {
         this.sendOriginalValidityState = index.createEvent(this, "sendOriginalValidityState", 7);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
-        this.value = '';
         this.touched = false;
         this.originalValid = false;
         this.validationPattern = '';
@@ -31996,6 +31970,28 @@ const PasswordInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = undefined;
+        this.clientStyling = '';
+        this.isValid = undefined;
+        this.errorMessage = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+        this.passwordComplexity = undefined;
+        this.showPopup = undefined;
+        this.value = '';
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -32155,11 +32151,12 @@ const PasswordInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'c704b51efdf53817beb1541b4794e0b11b490a24', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'e590afa403084ff95a8735ade400ab81ad16937f', class: 'password__wrapper--flex' }, index.h("label", { key: '9d8db00b59c4b9594538aeacee3ef5a0e678c0e9', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'bb39f6018cf688fafcd0b5bef91ba079edf09daf', class: 'password__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'd8dbd086da34a8c7db9b5826654530bdb888c927', class: 'password__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: 'ae1c212d663fe379561b1c514087629409196ac3', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), index.h("small", { key: '2fa1e25239a7314399c16b2f897873b7a31e9f77', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
+        return index.h("div", { key: '36d21c63dcd15b6de2d2de417ce97b520493cd16', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '3de600f4ccbf2ffe7a8a8858e9d5a483701dd4d7', class: 'password__wrapper--flex' }, index.h("label", { key: '74fee343f4d6adbbb22e88c5d51d3a471979d42e', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'd1f30d776c5612b1a5581859b929bee171105bf5', class: 'password__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '932201990b5fa67f448d4ab8ca7f844f757d5e47', class: 'password__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '83f00cb4452b60fd883efcd742d6eb463a8fc729', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), index.h("small", { key: '0f6f7ba5e9ec6f492f22a46ac77c7977f7a8e835', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "value": ["valueChanged"],
         "emitValue": ["emitValueHandler"]
@@ -32175,17 +32172,27 @@ 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.showTooltip = false;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.optionsGroup = undefined;
+        this.validation = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -32240,10 +32247,11 @@ const RadioInput = class {
         return null;
     }
     render() {
-        return index.h("fieldset", { key: '3d90735f7dc8fef6a96dc85b8f9ba22880cb205f', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '9472ed76f5c7fabb90d2b3d39eeb9e18f05a30dd', 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", { key: '2ae0947580bb8a0a3d889a2d9ebd0b82458fdfd2', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
-            index.h("img", { key: '4f3cbf341f1c559bbdf44ca5d169be7a64d46e97', class: 'radio__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return index.h("fieldset", { key: '29ff8fcc910622397750532629ac0c202c9726ba', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: 'cdab5b331863f3d31aab50c1d95b5a8845d53329', 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", { key: 'bd6cd89510e7ace1348b391f3ce9ba334a03e695', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
+            index.h("img", { key: '27036c51c89612dbb87e5248355d3a5466c49705', class: 'radio__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -36529,7 +36537,6 @@ const ComboBoxMixin = (subclass) =>
     /**
      * Override LitElement lifecycle callback to handle filter property change.
      * @param {Object} props
-     * @protected
      */
     updated(props) {
       super.updated(props);
@@ -37251,7 +37258,7 @@ const ComboBoxMixin = (subclass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (document.hasFocus()) {
-        this._requestValidation();
+        this.validate();
       }
 
       if (this.value !== this._lastCommittedValue) {
@@ -37801,20 +37808,6 @@ const SelectInput = class {
         index.registerInstance(this, hostRef);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Options of the input.
-         */
-        this.options = [];
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.touched = false;
         this.handleChange = (event) => {
             this.touched = true;
@@ -37843,6 +37836,26 @@ const SelectInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.action = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.options = [];
+        this.validation = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.errorMessage = undefined;
+        this.isValid = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -37935,11 +37948,12 @@ const SelectInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '3d298b9709617233adacd88b8acb7d6298d35627', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9ba53148a200b925da11ad0dea5589e9634ffb03', class: 'select__wrapper--flex' }, index.h("label", { key: 'eb2fa2233926ada4da750e47304325d0d7ea3985', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '3cbe968f9a7c612d0b8d0517621a933cccd1bd58', class: 'select__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '9fa9be645ed72897a95705b0e17b3aee855eb6d4', class: 'select__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { key: 'f596a5fa5b480791080dfa63359ed30eeabfaa02', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), index.h("small", { key: 'a9c652406489ba1d23497c55aa14e7b67fa701bd', class: 'select__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'f02c73635c87a1937f4718c9de8df3aae8397815', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '26bf79a073dd4c84570e380b1f36bfe848fec568', class: 'select__wrapper--flex' }, index.h("label", { key: '6eaafabe58a2dd4e1604ac2e3d55d001e2c4bc7c', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: 'a1de9c4bd3dd4158b26004c6df9dca5915f73978', class: 'select__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '5cb869c82f53a463c91cd060fad5520d2fbc3d0d', class: 'select__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { key: '2e94c1faa107657034a98d70b1e98d5c5ab5caa5', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange, onBlur: this.handleBlur }), index.h("small", { key: '2c8162576d30265ea49cdc6d99071f614d833d7e', class: 'select__error-message' }, this.errorMessage));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -37954,12 +37968,6 @@ 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.showTooltip = false;
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
@@ -37985,6 +37993,26 @@ const TelInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.showLabels = undefined;
+        this.action = undefined;
+        this.validation = undefined;
+        this.defaultValue = undefined;
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.emitValue = undefined;
+        this.clientStyling = '';
+        this.isValid = undefined;
+        this.errorMessage = undefined;
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -38096,10 +38124,11 @@ const TelInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '5febd36c339710683111039d477196daac87853c', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'fb779beee03992b23478ffcaac85095420048ceb', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '5b69271c1c8bf403a003d765adb40a553e09466e', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '040c487308231459fc92eba2e643a80639df09d6', class: 'tel__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '91efd4656c718c75e5047413daf10c22c37e8f93', class: 'tel__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '6215f80b6bccb3dfb03dbbc485c850725633627c', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '3b7b1ef3415619c51d74f5fc7c5e034acb8f037f', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '886553206896c367ba96f015d81b44ea86f741ea', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: 'd4c88d386c3342c789527d925e9cd061494b785c', class: 'tel__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'f0f70d8568ba083ee19f9e73e5921104f599e15f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '8da9e1c2a6b3ca19caff07540f0218266de22bb2', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'd0d90bc96e3ea853f401bae9be3f033d4cfd9b17', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'fdf7929f51edcbea8568b35804b0d9e9a93a7249', class: 'tel__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '0fbc9b5e8c5feef727caa71ef07d4ae80007e04a', class: 'tel__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'b4a11808a7ae5e5cddce47b51a51003bce3a84f8', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '2d81ff4c11e559f302a8446816f4aca0de2cfcef', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: 'ab52185589bf4d52205bad4cecc9c7ecb54cd409', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '6d219de32297bc2fab31995b5a33b14f2eea21d9', class: 'tel__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }
@@ -38114,17 +38143,6 @@ const TextInput = class {
         index.registerInstance(this, hostRef);
         this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
         this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-        /**
-         * Default value for the input.
-         */
-        this.defaultValue = '';
-        /**
-         * Client custom styling via inline style
-         */
-        this.clientStyling = '';
-        this.errorMessage = '';
-        this.limitStylingAppends = false;
-        this.showTooltip = false;
         this.value = '';
         this.validationPattern = '';
         this.duplicateInputValue = null;
@@ -38154,6 +38172,26 @@ const TextInput = class {
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.prepend(sheet);
         };
+        this.name = undefined;
+        this.displayName = undefined;
+        this.placeholder = undefined;
+        this.validation = undefined;
+        this.defaultValue = '';
+        this.autofilled = undefined;
+        this.tooltip = undefined;
+        this.language = undefined;
+        this.checkValidity = undefined;
+        this.emitValue = undefined;
+        this.isDuplicateInput = undefined;
+        this.clientStyling = '';
+        this.isValid = undefined;
+        this.errorMessage = '';
+        this.limitStylingAppends = false;
+        this.showTooltip = false;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -38260,10 +38298,11 @@ const TextInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'bfb803110a70b89dd484e993c204b572f0115a17', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '6e9f8f5aada98821d5dc78ccb8b1431ba23b81ab', class: 'text__wrapper--flex' }, index.h("label", { key: '05cf07855121a79641475a5b020774cf8120d1ed', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'f8c48a999f6827a61ec392ce99858c19559c77d2', class: 'text__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'e866f1df104ce57c29164e73b4ad4d017c7201cd', class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'd761c265b1487fe73af54568b6da7fed82656b8d', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '5c8df34dd47959eb1668cdf389524d145c69fa84', class: 'text__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'e297f841a57c6acf854535a786916aa641831556', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '7fd284a58e58d5c61a03caf4cc317b8dd9dbd82f', class: 'text__wrapper--flex' }, index.h("label", { key: 'f80a2003386ec867e5310190a7568105c2912569', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e8f5197bd370100406d600be5a336f85f4c6934d', class: 'text__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'ff8c38fe3495a41a41ac4a1569169ce26a1ec9ce', class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '581106e515810ab43f7d6b6eda504ccf23906b0e', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '20620710026982d5fb670a3173bab57a7fa9e7ce', class: 'text__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
         "isValid": ["validityChanged"],
         "emitValue": ["emitValueHandler"]
     }; }