@everymatrix/general-input 1.28.7 → 1.28.8

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

@@ -1,42 +1,27 @@
-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';
+import { r as registerStyles, i, T as ThemableMixin, A 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, F as FieldMixin, K as KeyboardMixin, y as Debouncer, z 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(--_input-container-radius) / 4 - 1px);
+      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;
-      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;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       border-radius: inherit;
       pointer-events: none;
       background-color: var(--lumo-contrast-50pct);
@@ -87,6 +72,7 @@ registerStyles(
     }
 
     /* Slotted icons */
+    ::slotted(iron-icon),
     ::slotted(vaadin-icon) {
       color: var(--lumo-contrast-60pct);
       width: var(--lumo-icon-size-m);
@@ -94,6 +80,7 @@ registerStyles(
     }
 
     /* 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;
@@ -175,16 +162,10 @@ registerStyles(
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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';
@@ -197,25 +178,6 @@ class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
           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]) {
@@ -316,11 +278,47 @@ class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-defineCustomElement(InputContainer);
+customElements.define(InputContainer.is, InputContainer);
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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/);
+
+testUserAgent(/Chrome/) && testVendor(/Google Inc/);
+
+const isFirefox = testUserAgent(/Firefox/);
+
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
+
+const isIPhone = testPlatform(/^iPhone/);
+
+const isIOS = isIPhone || isIPad;
+
+const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
+
+const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -356,7 +354,7 @@ registerStyles('', fieldButton, { moduleId: 'lumo-field-button' });
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -432,15 +430,9 @@ const inputField = i`
     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'],
@@ -450,10 +442,6 @@ const inputField = i`
   }
 
   /* 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);
   }
@@ -486,7 +474,7 @@ const inputField = i`
   }
 
   /* Slotted content */
-  [part='input-field'] ::slotted(:not(vaadin-icon):not(input):not(textarea)) {
+  [part='input-field'] ::slotted(:not(iron-icon):not(vaadin-icon):not(input):not(textarea)) {
     color: var(--lumo-secondary-text-color);
     font-weight: 400;
   }
@@ -504,229 +492,7 @@ registerStyles('', inputFieldShared$1, {
 
 /**
  * @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.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -854,7 +620,83 @@ const InputConstraintsMixin = dedupingMixin(
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * 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/
  */
 
@@ -866,12 +708,11 @@ const InputConstraintsMixin = dedupingMixin(
  * @mixes FieldMixin
  * @mixes InputConstraintsMixin
  * @mixes KeyboardMixin
- * @mixes ClearButtonMixin
  * @mixes SlotStylesMixin
  */
 const InputControlMixin = (superclass) =>
   class InputControlMixinClass extends SlotStylesMixin(
-    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(ClearButtonMixin(KeyboardMixin(superclass))))),
+    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass)))),
   ) {
     static get properties() {
       return {
@@ -900,6 +741,16 @@ const InputControlMixin = (superclass) =>
           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.
          */
@@ -947,6 +798,17 @@ const InputControlMixin = (superclass) =>
       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
@@ -960,6 +822,36 @@ const InputControlMixin = (superclass) =>
       ];
     }
 
+    /** @protected */
+    ready() {
+      super.ready();
+
+      if (this.clearElement) {
+        this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
+        this.clearElement.addEventListener('mousedown', (e) => this._onClearButtonMouseDown(e));
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonClick(event) {
+      event.preventDefault();
+      this.__clear();
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonMouseDown(event) {
+      event.preventDefault();
+      if (!isTouch) {
+        this.inputElement.focus();
+      }
+    }
+
     /**
      * Override an event listener from `DelegateFocusMixin`.
      * @param {FocusEvent} event
@@ -974,6 +866,23 @@ const InputControlMixin = (superclass) =>
       }
     }
 
+    /**
+     * 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
@@ -998,6 +907,13 @@ const InputControlMixin = (superclass) =>
       );
     }
 
+    /** @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
@@ -1099,8 +1015,8 @@ const InputControlMixin = (superclass) =>
     _allowedCharPatternChanged(charPattern) {
       if (charPattern) {
         try {
-          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`, 'u');
-          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`, 'u');
+          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
         } catch (e) {
           console.error(e);
         }
@@ -1123,7 +1039,7 @@ const InputControlMixin = (superclass) =>
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * Copyright (c) 2021 - 2022 Vaadin Ltd..
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1134,7 +1050,7 @@ const clearButton = i`
   }
 
   [part='clear-button']::before {
-    content: '\\2715';
+    content: '✕';
   }
 
   :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
@@ -1144,7 +1060,7 @@ const clearButton = i`
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * Copyright (c) 2021 - 2022 Vaadin Ltd..
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1169,24 +1085,11 @@ const fieldShared = i`
   :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..
+ * Copyright (c) 2021 - 2022 Vaadin Ltd..
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1202,7 +1105,7 @@ const inputFieldContainer = i`
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * Copyright (c) 2021 - 2022 Vaadin Ltd..
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */