@everymatrix/general-input 0.0.1

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

@@ -0,0 +1,1067 @@
+import { r as registerStyles, i, T as ThemableMixin, G as DirMixin, P as PolymerElement, h as html, j as requiredField, k as helper, d as dedupingMixin, D as DelegateStateMixin, V as ValidateMixin, I as InputMixin, c as DelegateFocusMixin, l as FieldMixin, K as KeyboardMixin, A as Debouncer, B as timeOut } from './field-mixin.js';
+
+registerStyles(
+  'vaadin-input-container',
+  i`
+    :host {
+      border-radius: var(--lumo-border-radius-m);
+      background-color: var(--lumo-contrast-10pct);
+      padding: 0 calc(0.375em + var(--lumo-border-radius-m) / 4 - 1px);
+      font-weight: 500;
+      line-height: 1;
+      position: relative;
+      cursor: text;
+      box-sizing: border-box;
+    }
+
+    /* Used for hover and activation effects */
+    :host::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 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(iron-icon),
+    ::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(iron-icon[icon^='vaadin:']),
+    ::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 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+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;
+        }
+
+        :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());
+      }
+    });
+  }
+}
+
+customElements.define(InputContainer.is, InputContainer);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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 - 2022 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;
+  }
+
+  /* Disabled style */
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :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][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(iron-icon):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 - 2022 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 - 2022 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 - 2022 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 SlotStylesMixin
+ */
+const InputControlMixin = (superclass) =>
+  class InputControlMixinClass extends SlotStylesMixin(
+    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(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,
+        },
+
+        /**
+         * Set to true to display the clear icon which clears the input.
+         * @attr {boolean} clear-button-visible
+         */
+        clearButtonVisible: {
+          type: Boolean,
+          reflectToAttribute: true,
+          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);
+    }
+
+    /**
+     * 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 */
+    get slotStyles() {
+      // Needed for Safari, where ::slotted(...)::placeholder does not work
+      return [
+        `
+          :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
+            font: inherit;
+            color: inherit;
+          }
+        `,
+      ];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      if (this.clearElement) {
+        this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonClick(event) {
+      event.preventDefault();
+      this.inputElement.focus();
+      this.__clear();
+    }
+
+    /**
+     * 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 `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.__clear();
+      }
+    }
+
+    /**
+     * 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 */
+    __clear() {
+      this.clear();
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    /**
+     * 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}$`);
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
+        } 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 - 2022 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: '✕';
+  }
+
+  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
+    display: block;
+  }
+`;
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 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;
+  }
+`;
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 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 - 2022 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, InputControlMixin as a, inputFieldShared as b, inputFieldShared$1 as i };