@everymatrix/general-input 1.44.0 → 1.45.2

package/dist/components/input-field-shared-styles.js

@@ -1,1211 +0,0 @@
-import { r as registerStyles, i, f as defineCustomElement, g as ThemableMixin, n as DirMixin, P as PolymerElement, h as html, j as requiredField, k as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, b as DelegateFocusMixin, F as FieldMixin, o as Debouncer, t as timeOut } from './field-mixin.js';
-
-registerStyles(
-  'vaadin-input-container',
-  i`
-    :host {
-      background-color: var(--lumo-contrast-10pct);
-      padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
-      font-weight: 500;
-      line-height: 1;
-      position: relative;
-      cursor: text;
-      box-sizing: border-box;
-      border-radius:
-        /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax */
-        var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
-        var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
-        var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius))
-        var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius));
-      /* Fallback */
-      --_input-container-radius: var(--vaadin-input-field-border-radius, var(--lumo-border-radius-m));
-      /* Default field border color */
-      --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
-    }
-
-    :host([dir='rtl']) {
-      border-radius:
-        /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
-        var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
-        var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
-        var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius))
-        var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius));
-    }
-
-    /* Used for hover and activation effects */
-    :host::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      pointer-events: none;
-      background-color: var(--lumo-contrast-50pct);
-      opacity: 0;
-      transition: transform 0.15s, opacity 0.2s;
-      transform-origin: 100% 0;
-    }
-
-    ::slotted(:not([slot$='fix'])) {
-      cursor: inherit;
-      min-height: var(--lumo-text-field-size, var(--lumo-size-m));
-      padding: 0 0.25em;
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-      -webkit-mask-image: var(--_lumo-text-field-overflow-mask-image);
-      mask-image: var(--_lumo-text-field-overflow-mask-image);
-    }
-
-    /* Read-only */
-    :host([readonly]) {
-      color: var(--lumo-secondary-text-color);
-      background-color: transparent;
-      cursor: default;
-    }
-
-    :host([readonly])::after {
-      background-color: transparent;
-      opacity: 1;
-      border: 1px dashed var(--lumo-contrast-30pct);
-    }
-
-    /* Disabled */
-    :host([disabled]) {
-      background-color: var(--lumo-contrast-5pct);
-    }
-
-    :host([disabled]) ::slotted(*) {
-      color: var(--lumo-disabled-text-color);
-      -webkit-text-fill-color: var(--lumo-disabled-text-color);
-    }
-
-    /* Invalid */
-    :host([invalid]) {
-      background-color: var(--lumo-error-color-10pct);
-    }
-
-    :host([invalid])::after {
-      background-color: var(--lumo-error-color-50pct);
-    }
-
-    /* Slotted icons */
-    ::slotted(vaadin-icon) {
-      color: var(--lumo-contrast-60pct);
-      width: var(--lumo-icon-size-m);
-      height: var(--lumo-icon-size-m);
-    }
-
-    /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-    ::slotted(vaadin-icon[icon^='vaadin:']) {
-      padding: 0.25em;
-      box-sizing: border-box !important;
-    }
-
-    /* Text align */
-    :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent, #000 1.25em);
-    }
-
-    @-moz-document url-prefix() {
-      :host([dir='rtl']) ::slotted(:not([slot$='fix'])) {
-        mask-image: var(--_lumo-text-field-overflow-mask-image);
-      }
-    }
-
-    :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
-      text-align: start;
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    :host([theme~='align-center']) ::slotted(:not([slot$='fix'])) {
-      text-align: center;
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
-      text-align: end;
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    @-moz-document url-prefix() {
-      /* Firefox is smart enough to align overflowing text to right */
-      :host([theme~='align-right']) ::slotted(:not([slot$='fix'])) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
-      }
-    }
-
-    @-moz-document url-prefix() {
-      /* Firefox is smart enough to align overflowing text to right */
-      :host([theme~='align-left']) ::slotted(:not([slot$='fix'])) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
-      }
-    }
-
-    /* RTL specific styles */
-    :host([dir='rtl'])::after {
-      transform-origin: 0% 0;
-    }
-
-    :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    :host([theme~='align-center'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
-      --_lumo-text-field-overflow-mask-image: none;
-    }
-
-    @-moz-document url-prefix() {
-      /* Firefox is smart enough to align overflowing text to right */
-      :host([theme~='align-right'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
-      }
-    }
-
-    @-moz-document url-prefix() {
-      /* Firefox is smart enough to align overflowing text to right */
-      :host([theme~='align-left'][dir='rtl']) ::slotted(:not([slot$='fix'])) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
-      }
-    }
-  `,
-  { moduleId: 'lumo-input-container' },
-);
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DirMixin
- */
-class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
-  static get is() {
-    return 'vaadin-input-container';
-  }
-
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-          flex: 0 1 auto;
-          border-radius:
-            /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
-            var(--vaadin-input-field-top-start-radius, var(--__border-radius))
-            var(--vaadin-input-field-top-end-radius, var(--__border-radius))
-            var(--vaadin-input-field-bottom-end-radius, var(--__border-radius))
-            var(--vaadin-input-field-bottom-start-radius, var(--__border-radius));
-          --_border-radius: var(--vaadin-input-field-border-radius, 0px);
-          --_input-border-width: var(--vaadin-input-field-border-width, 0);
-          --_input-border-color: var(--vaadin-input-field-border-color, transparent);
-          box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
-        }
-
-        :host([dir='rtl']) {
-          border-radius:
-            /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
-            var(--vaadin-input-field-top-end-radius, var(--_border-radius))
-            var(--vaadin-input-field-top-start-radius, var(--_border-radius))
-            var(--vaadin-input-field-bottom-start-radius, var(--_border-radius))
-            var(--vaadin-input-field-bottom-end-radius, var(--_border-radius));
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        /* Reset the native input styles */
-        ::slotted(input) {
-          -webkit-appearance: none;
-          -moz-appearance: none;
-          flex: auto;
-          white-space: nowrap;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          outline: none;
-          margin: 0;
-          padding: 0;
-          border: 0;
-          border-radius: 0;
-          min-width: 0;
-          font: inherit;
-          line-height: normal;
-          color: inherit;
-          background-color: transparent;
-          /* Disable default invalid style in Firefox */
-          box-shadow: none;
-        }
-
-        ::slotted(*) {
-          flex: none;
-        }
-
-        ::slotted(:is(input, textarea))::placeholder {
-          /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
-          /* because ::slotted(...)::placeholder does not work in Safari. */
-          font: inherit;
-          color: inherit;
-          /* Override default opacity in Firefox */
-          opacity: 1;
-        }
-      </style>
-      <slot name="prefix"></slot>
-      <slot></slot>
-      <slot name="suffix"></slot>
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * If true, the user cannot interact with this element.
-       */
-      disabled: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Set to true to make this element read-only.
-       */
-      readonly: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Set to true when the element is invalid.
-       */
-      invalid: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addEventListener('pointerdown', (event) => {
-      if (event.target === this) {
-        // Prevent direct clicks to the input container from blurring the input
-        event.preventDefault();
-      }
-    });
-
-    this.addEventListener('click', (event) => {
-      if (event.target === this) {
-        // The vaadin-input-container element was directly clicked,
-        // focus any focusable child element from the default slot
-        this.shadowRoot
-          .querySelector('slot:not([name])')
-          .assignedNodes({ flatten: true })
-          .forEach((node) => node.focus && node.focus());
-      }
-    });
-  }
-}
-
-defineCustomElement(InputContainer);
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const fieldButton = i`
-  [part$='button'] {
-    flex: none;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    font-size: var(--lumo-icon-size-m);
-    text-align: center;
-    color: var(--lumo-contrast-60pct);
-    transition: 0.2s color;
-    cursor: var(--lumo-clickable-cursor);
-  }
-
-  [part$='button']:hover {
-    color: var(--lumo-contrast-90pct);
-  }
-
-  :host([disabled]) [part$='button'],
-  :host([readonly]) [part$='button'] {
-    color: var(--lumo-contrast-20pct);
-    cursor: default;
-  }
-
-  [part$='button']::before {
-    font-family: 'lumo-icons';
-    display: block;
-  }
-`;
-registerStyles('', fieldButton, { moduleId: 'lumo-field-button' });
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const inputField = i`
-  :host {
-    --lumo-text-field-size: var(--lumo-size-m);
-    color: var(--lumo-body-text-color);
-    font-size: var(--lumo-font-size-m);
-    font-family: var(--lumo-font-family);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: transparent;
-    padding: var(--lumo-space-xs) 0;
-  }
-
-  :host::before {
-    height: var(--lumo-text-field-size);
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  :host([focused]:not([readonly])) [part='label'] {
-    color: var(--lumo-primary-text-color);
-  }
-
-  :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
-    -webkit-mask-image: none;
-    mask-image: none;
-  }
-
-  ::slotted(:is(input, textarea):placeholder-shown) {
-    color: var(--lumo-secondary-text-color);
-  }
-
-  /* Hover */
-  :host(:hover:not([readonly]):not([focused])) [part='label'] {
-    color: var(--lumo-body-text-color);
-  }
-
-  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
-    opacity: 0.1;
-  }
-
-  /* Touch device adjustment */
-  @media (pointer: coarse) {
-    :host(:hover:not([readonly]):not([focused])) [part='label'] {
-      color: var(--lumo-secondary-text-color);
-    }
-
-    :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
-      opacity: 0;
-    }
-
-    :host(:active:not([readonly]):not([focused])) [part='input-field']::after {
-      opacity: 0.2;
-    }
-  }
-
-  /* Trigger when not focusing using the keyboard */
-  :host([focused]:not([focus-ring]):not([readonly])) [part='input-field']::after {
-    transform: scaleX(0);
-    transition-duration: 0.15s, 1s;
-  }
-
-  /* Focus-ring */
-  :host([focus-ring]) [part='input-field'] {
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
-
-  /* Read-only and disabled */
-  :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
-    opacity: 0;
-  }
-
-  /* Read-only style */
-  :host([readonly]) {
-    --vaadin-input-field-border-color: transparent;
-  }
-
-  /* Disabled style */
-  :host([disabled]) {
-    pointer-events: none;
-    --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
-  }
-
-  :host([disabled]) [part='label'],
-  :host([disabled]) [part='input-field'] ::slotted(*) {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-  }
-
-  /* Invalid style */
-  :host([invalid]) {
-    --vaadin-input-field-border-color: var(--lumo-error-color);
-  }
-
-  :host([invalid][focus-ring]) [part='input-field'] {
-    box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
-  }
-
-  :host([input-prevented]) [part='input-field'] {
-    animation: shake 0.15s infinite;
-  }
-
-  @keyframes shake {
-    25% {
-      transform: translateX(4px);
-    }
-    75% {
-      transform: translateX(-4px);
-    }
-  }
-
-  /* Small theme */
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-text-field-size: var(--lumo-size-s);
-  }
-
-  :host([theme~='small']) [part='label'] {
-    font-size: var(--lumo-font-size-xs);
-  }
-
-  :host([theme~='small']) [part='error-message'] {
-    font-size: var(--lumo-font-size-xxs);
-  }
-
-  /* Slotted content */
-  [part='input-field'] ::slotted(:not(vaadin-icon):not(input):not(textarea)) {
-    color: var(--lumo-secondary-text-color);
-    font-weight: 400;
-  }
-
-  [part='clear-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-`;
-
-const inputFieldShared$1 = [requiredField, fieldButton, helper, inputField];
-
-registerStyles('', inputFieldShared$1, {
-  moduleId: 'lumo-input-field-shared-styles',
-});
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
-
-const testPlatform = (regexp) => regexp.test(navigator.platform);
-
-const testVendor = (regexp) => regexp.test(navigator.vendor);
-
-testUserAgent(/Android/u);
-
-testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
-
-const isFirefox = testUserAgent(/Firefox/u);
-
-// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-const isIPad = testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
-
-const isIPhone = testPlatform(/^iPhone/u);
-
-const isIOS = isIPhone || isIPad;
-
-const isSafari = testUserAgent(/^((?!chrome|android).)*safari/iu);
-
-const isTouch = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const stylesMap = new WeakMap();
-
-/**
- * Get all the styles inserted into root.
- * @param {DocumentOrShadowRoot} root
- * @return {Set<string>}
- */
-function getRootStyles(root) {
-  if (!stylesMap.has(root)) {
-    stylesMap.set(root, new Set());
-  }
-
-  return stylesMap.get(root);
-}
-
-/**
- * Insert styles into the root.
- * @param {string} styles
- * @param {DocumentOrShadowRoot} root
- */
-function insertStyles(styles, root) {
-  const style = document.createElement('style');
-  style.textContent = styles;
-
-  if (root === document) {
-    document.head.appendChild(style);
-  } else {
-    root.insertBefore(style, root.firstChild);
-  }
-}
-
-/**
- * Mixin to insert styles into the outer scope to handle slotted components.
- * This is useful e.g. to hide native `<input type="number">` controls.
- *
- * @polymerMixin
- */
-const SlotStylesMixin = dedupingMixin(
-  (superclass) =>
-    class SlotStylesMixinClass extends superclass {
-      /**
-       * List of styles to insert into root.
-       * @protected
-       */
-      get slotStyles() {
-        return {};
-      }
-
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
-
-        this.__applySlotStyles();
-      }
-
-      /** @private */
-      __applySlotStyles() {
-        const root = this.getRootNode();
-        const rootStyles = getRootStyles(root);
-
-        this.slotStyles.forEach((styles) => {
-          if (!rootStyles.has(styles)) {
-            insertStyles(styles, root);
-            rootStyles.add(styles);
-          }
-        });
-      }
-    },
-);
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin that manages the clear button.
- *
- * @polymerMixin
- * @mixes InputMixin
- * @mixes KeyboardMixin
- */
-const ClearButtonMixin = (superclass) =>
-  class ClearButtonMixinClass extends InputMixin(KeyboardMixin(superclass)) {
-    static get properties() {
-      return {
-        /**
-         * Set to true to display the clear icon which clears the input.
-         *
-         * It is up to the component to choose where to place the clear icon:
-         * in the Shadow DOM or in the light DOM. In any way, a reference to
-         * the clear icon element should be provided via the `clearElement` getter.
-         *
-         * @attr {boolean} clear-button-visible
-         */
-        clearButtonVisible: {
-          type: Boolean,
-          reflectToAttribute: true,
-          value: false,
-        },
-      };
-    }
-
-    /**
-     * Any element extending this mixin is required to implement this getter.
-     * It returns the reference to the clear button element.
-     *
-     * @protected
-     * @return {Element | null | undefined}
-     */
-    get clearElement() {
-      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
-      return null;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      if (this.clearElement) {
-        this.clearElement.addEventListener('mousedown', (event) => this._onClearButtonMouseDown(event));
-        this.clearElement.addEventListener('click', (event) => this._onClearButtonClick(event));
-      }
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     */
-    _onClearButtonClick(event) {
-      event.preventDefault();
-      this._onClearAction();
-    }
-
-    /**
-     * @param {MouseEvent} event
-     * @protected
-     */
-    _onClearButtonMouseDown(event) {
-      event.preventDefault();
-      if (!isTouch) {
-        this.inputElement.focus();
-      }
-    }
-
-    /**
-     * Override an event listener inherited from `KeydownMixin` to clear on Esc.
-     * Components that extend this mixin can prevent this behavior by overriding
-     * this method without calling `super._onEscape` to provide custom logic.
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onEscape(event) {
-      super._onEscape(event);
-
-      if (this.clearButtonVisible && !!this.value) {
-        event.stopPropagation();
-        this._onClearAction();
-      }
-    }
-
-    /**
-     * Clears the value and dispatches `input` and `change` events
-     * on the input element. This method should be called
-     * when the clear action originates from the user.
-     *
-     * @protected
-     */
-    _onClearAction() {
-      this.clear();
-      // Note, according to the HTML spec, the native change event isn't composed
-      // while the input event is composed.
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to combine multiple input validation constraints.
- *
- * @polymerMixin
- * @mixes DelegateStateMixin
- * @mixes InputMixin
- * @mixes ValidateMixin
- */
-const InputConstraintsMixin = dedupingMixin(
-  (superclass) =>
-    class InputConstraintsMixinClass extends DelegateStateMixin(ValidateMixin(InputMixin(superclass))) {
-      /**
-       * An array of attributes which participate in the input validation.
-       * Changing these attributes will cause the input to re-validate.
-       *
-       * IMPORTANT: The attributes should be properly delegated to the input element
-       * from the host using `delegateAttrs` getter (see `DelegateStateMixin`).
-       * The `required` attribute is already delegated.
-       */
-      static get constraints() {
-        return ['required'];
-      }
-
-      static get delegateAttrs() {
-        return [...super.delegateAttrs, 'required'];
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-
-        this._createConstraintsObserver();
-      }
-
-      /**
-       * Returns true if the current input value satisfies all constraints (if any).
-       * @return {boolean}
-       */
-      checkValidity() {
-        if (this.inputElement && this._hasValidConstraints(this.constructor.constraints.map((c) => this[c]))) {
-          return this.inputElement.checkValidity();
-        }
-        return !this.invalid;
-      }
-
-      /**
-       * Returns true if some of the provided set of constraints are valid.
-       * @param {Array} constraints
-       * @return {boolean}
-       * @protected
-       */
-      _hasValidConstraints(constraints) {
-        return constraints.some((c) => this.__isValidConstraint(c));
-      }
-
-      /**
-       * Override this method to customize setting up constraints observer.
-       * @protected
-       */
-      _createConstraintsObserver() {
-        // This complex observer needs to be added dynamically instead of using `static get observers()`
-        // to make it possible to tweak this behavior in classes that apply this mixin.
-        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
-      }
-
-      /**
-       * Override this method to implement custom validation constraints.
-       * @param {HTMLElement | undefined} stateTarget
-       * @param {unknown[]} constraints
-       * @protected
-       */
-      _constraintsChanged(stateTarget, ...constraints) {
-        // The input element's validity cannot be determined until
-        // all the necessary constraint attributes aren't set on it.
-        if (!stateTarget) {
-          return;
-        }
-
-        const hasConstraints = this._hasValidConstraints(constraints);
-        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
-
-        if ((this._hasValue || this.invalid) && hasConstraints) {
-          this.validate();
-        } else if (isLastConstraintRemoved) {
-          this._setInvalid(false);
-        }
-
-        this.__previousHasConstraints = hasConstraints;
-      }
-
-      /**
-       * 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,
-          }),
-        );
-      }
-
-      /** @private */
-      __isValidConstraint(constraint) {
-        // 0 is valid for `minlength` and `maxlength`
-        return Boolean(constraint) || constraint === 0;
-      }
-    },
-);
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to provide shared logic for the editable form input controls.
- *
- * @polymerMixin
- * @mixes DelegateFocusMixin
- * @mixes FieldMixin
- * @mixes InputConstraintsMixin
- * @mixes KeyboardMixin
- * @mixes ClearButtonMixin
- * @mixes SlotStylesMixin
- */
-const InputControlMixin = (superclass) =>
-  class InputControlMixinClass extends SlotStylesMixin(
-    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(ClearButtonMixin(KeyboardMixin(superclass))))),
-  ) {
-    static get properties() {
-      return {
-        /**
-         * A pattern matched against individual characters the user inputs.
-         *
-         * When set, the field will prevent:
-         * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
-         * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
-         * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
-         *
-         * For example, to allow entering only numbers and minus signs, use:
-         * `allowedCharPattern = "[\\d-]"`
-         * @attr {string} allowed-char-pattern
-         */
-        allowedCharPattern: {
-          type: String,
-          observer: '_allowedCharPatternChanged',
-        },
-
-        /**
-         * If true, the input text gets fully selected when the field is focused using click or touch / tap.
-         */
-        autoselect: {
-          type: Boolean,
-          value: false,
-        },
-
-        /**
-         * The name of this field.
-         */
-        name: {
-          type: String,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * A hint to the user of what can be entered in the field.
-         */
-        placeholder: {
-          type: String,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * When present, it specifies that the field is read-only.
-         */
-        readonly: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * The text usually displayed in a tooltip popup when the mouse is over the field.
-         */
-        title: {
-          type: String,
-          reflectToAttribute: true,
-        },
-      };
-    }
-
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'name', 'type', 'placeholder', 'readonly', 'invalid', 'title'];
-    }
-
-    constructor() {
-      super();
-
-      this._boundOnPaste = this._onPaste.bind(this);
-      this._boundOnDrop = this._onDrop.bind(this);
-      this._boundOnBeforeInput = this._onBeforeInput.bind(this);
-    }
-
-    /** @protected */
-    get slotStyles() {
-      // Needed for Safari, where ::slotted(...)::placeholder does not work
-      return [
-        `
-          :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
-            font: inherit;
-            color: inherit;
-          }
-        `,
-      ];
-    }
-
-    /**
-     * Override an event listener from `DelegateFocusMixin`.
-     * @param {FocusEvent} event
-     * @protected
-     * @override
-     */
-    _onFocus(event) {
-      super._onFocus(event);
-
-      if (this.autoselect && this.inputElement) {
-        this.inputElement.select();
-      }
-    }
-
-    /**
-     * 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
-     * @protected
-     * @override
-     */
-    _addInputListeners(input) {
-      super._addInputListeners(input);
-
-      input.addEventListener('paste', this._boundOnPaste);
-      input.addEventListener('drop', this._boundOnDrop);
-      input.addEventListener('beforeinput', this._boundOnBeforeInput);
-    }
-
-    /**
-     * Override a method from `InputMixin`.
-     * @param {!HTMLElement} input
-     * @protected
-     * @override
-     */
-    _removeInputListeners(input) {
-      super._removeInputListeners(input);
-
-      input.removeEventListener('paste', this._boundOnPaste);
-      input.removeEventListener('drop', this._boundOnDrop);
-      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     * @param {!KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (this.allowedCharPattern && !this.__shouldAcceptKey(event)) {
-        event.preventDefault();
-        this._markInputPrevented();
-      }
-    }
-
-    /** @protected */
-    _markInputPrevented() {
-      // Add input-prevented attribute for 200ms
-      this.setAttribute('input-prevented', '');
-      this._preventInputDebouncer = Debouncer.debounce(this._preventInputDebouncer, timeOut.after(200), () => {
-        this.removeAttribute('input-prevented');
-      });
-    }
-
-    /** @private */
-    __shouldAcceptKey(event) {
-      return (
-        event.metaKey ||
-        event.ctrlKey ||
-        !event.key || // Allow typing anything if event.key is not supported
-        event.key.length !== 1 || // Allow "Backspace", "ArrowLeft" etc.
-        this.__allowedCharRegExp.test(event.key)
-      );
-    }
-
-    /** @private */
-    _onPaste(e) {
-      if (this.allowedCharPattern) {
-        const pastedText = e.clipboardData.getData('text');
-        if (!this.__allowedTextRegExp.test(pastedText)) {
-          e.preventDefault();
-          this._markInputPrevented();
-        }
-      }
-    }
-
-    /** @private */
-    _onDrop(e) {
-      if (this.allowedCharPattern) {
-        const draggedText = e.dataTransfer.getData('text');
-        if (!this.__allowedTextRegExp.test(draggedText)) {
-          e.preventDefault();
-          this._markInputPrevented();
-        }
-      }
-    }
-
-    /** @private */
-    _onBeforeInput(e) {
-      // The `beforeinput` event covers all the cases for `allowedCharPattern`: keyboard, pasting and dropping,
-      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
-      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
-      // See https://github.com/vaadin/vaadin-text-field/issues/429
-      if (this.allowedCharPattern && e.data && !this.__allowedTextRegExp.test(e.data)) {
-        e.preventDefault();
-        this._markInputPrevented();
-      }
-    }
-
-    /** @private */
-    _allowedCharPatternChanged(charPattern) {
-      if (charPattern) {
-        try {
-          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`, 'u');
-          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`, 'u');
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    }
-
-    /**
-     * Fired when the user commits a value change.
-     *
-     * @event change
-     */
-
-    /**
-     * Fired when the value is changed by the user: on every typing keystroke,
-     * and the value is cleared using the clear button.
-     *
-     * @event input
-     */
-  };
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const clearButton = i`
-  [part='clear-button'] {
-    display: none;
-    cursor: default;
-  }
-
-  [part='clear-button']::before {
-    content: '\\2715';
-  }
-
-  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
-    display: block;
-  }
-`;
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const fieldShared = i`
-  :host {
-    display: inline-flex;
-    outline: none;
-  }
-
-  :host::before {
-    content: '\\2003';
-    width: 0;
-    display: inline-block;
-    /* Size and position this element on the same vertical position as the input-field element
-          to make vertical align for the host element work as expected */
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host(:not([has-label])) [part='label'] {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    :host(:not([readonly])) [part='input-field'] {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-    :host([focused]) [part='input-field'] {
-      outline-width: 2px;
-    }
-    :host([disabled]) [part='input-field'] {
-      outline-color: GrayText;
-    }
-  }
-`;
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const inputFieldContainer = i`
-  [class$='container'] {
-    display: flex;
-    flex-direction: column;
-    min-width: 100%;
-    max-width: 100%;
-    width: var(--vaadin-field-default-width, 12em);
-  }
-`;
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const inputFieldShared = [fieldShared, inputFieldContainer, clearButton];
-
-export { InputConstraintsMixin as I, isFirefox as a, isIOS as b, InputControlMixin as c, inputFieldShared as d, isSafari as e, isTouch as f, inputFieldShared$1 as i };