@everymatrix/general-input 1.22.1 → 1.22.2

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

@@ -1,297 +1,4 @@
-import { o, i, h as html, P as PolymerElement, y as registerStyles$1, r as requiredField, g as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, c as DelegateFocusMixin, F as FieldMixin } from './field-mixin.js';
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-/**
- * @polymerMixin
- */
-const ThemePropertyMixin = (superClass) =>
-  class VaadinThemePropertyMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * Helper property with theme attribute value facilitating propagation
-         * in shadow DOM.
-         *
-         * Enables the component implementation to propagate the `theme`
-         * attribute value to the sub-components in Shadow DOM by binding
-         * the sub-component's "theme" attribute to the `theme` property of
-         * the host.
-         *
-         * **NOTE:** Extending the mixin only provides the property for binding,
-         * and does not make the propagation alone.
-         *
-         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/styling-components/#sub-components).
-         * page for more information.
-         *
-         * @protected
-         */
-        _theme: {
-          type: String,
-          readOnly: true,
-        },
-      };
-    }
-
-    static get observedAttributes() {
-      return [...super.observedAttributes, 'theme'];
-    }
-
-    /** @protected */
-    attributeChangedCallback(name, oldValue, newValue) {
-      super.attributeChangedCallback(name, oldValue, newValue);
-
-      if (name === 'theme') {
-        this._set_theme(newValue);
-      }
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @typedef {Object} Theme
- * @property {string} themeFor
- * @property {CSSResult[]} styles
- * @property {string | string[]} [include]
- * @property {string} [moduleId]
- *
- * @typedef {CSSResult[] | CSSResult} CSSResultGroup
- */
-
-/**
- * @type {Theme[]}
- */
-const themeRegistry = [];
-
-/**
- * Check if the custom element type has themes applied.
- * @param {Function} elementClass
- * @returns {boolean}
- */
-function classHasThemes(elementClass) {
-  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
-}
-
-/**
- * Check if the custom element type has themes applied.
- * @param {string} tagName
- * @returns {boolean}
- */
-function hasThemes(tagName) {
-  return classHasThemes(customElements.get(tagName));
-}
-
-/**
- * Flattens the styles into a single array of styles.
- * @param {CSSResultGroup} styles
- * @param {CSSResult[]} result
- * @returns {CSSResult[]}
- */
-function flattenStyles(styles = []) {
-  return [styles].flat(Infinity).filter((style) => {
-    if (style instanceof o) {
-      return true;
-    }
-    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
-    return false;
-  });
-}
-
-/**
- * Registers CSS styles for a component type. Make sure to register the styles before
- * the first instance of a component of the type is attached to DOM.
- *
- * @param {string} themeFor The local/tag name of the component type to register the styles for
- * @param {CSSResultGroup} styles The CSS style rules to be registered for the component type
- * matching themeFor and included in the local scope of each component instance
- * @param {{moduleId?: string, include?: string | string[]}} options Additional options
- * @return {void}
- */
-function registerStyles(themeFor, styles, options = {}) {
-  if (themeFor) {
-    if (hasThemes(themeFor)) {
-      console.warn(`The custom element definition for "${themeFor}"
-      was finalized before a style module was registered.
-      Make sure to add component specific style modules before
-      importing the corresponding custom element.`);
-    }
-  }
-
-  styles = flattenStyles(styles);
-
-  if (window.Vaadin && window.Vaadin.styleModules) {
-    window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
-  } else {
-    themeRegistry.push({
-      themeFor,
-      styles,
-      include: options.include,
-      moduleId: options.moduleId,
-    });
-  }
-}
-
-/**
- * Returns all registered themes. By default the themeRegistry is returned as is.
- * In case the style-modules adapter is imported, the themes are obtained from there instead
- * @returns {Theme[]}
- */
-function getAllThemes() {
-  if (window.Vaadin && window.Vaadin.styleModules) {
-    return window.Vaadin.styleModules.getAllThemes();
-  }
-  return themeRegistry;
-}
-
-/**
- * Returns true if the themeFor string matches the tag name
- * @param {string} themeFor
- * @param {string} tagName
- * @returns {boolean}
- */
-function matchesThemeFor(themeFor, tagName) {
-  return (themeFor || '').split(' ').some((themeForToken) => {
-    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
-  });
-}
-
-/**
- * Maps the moduleName to an include priority number which is used for
- * determining the order in which styles are applied.
- * @param {string} moduleName
- * @returns {number}
- */
-function getIncludePriority(moduleName = '') {
-  let includePriority = 0;
-  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
-    includePriority = 1;
-  } else if (moduleName.startsWith('vaadin-')) {
-    includePriority = 2;
-  }
-  return includePriority;
-}
-
-/**
- * Gets an array of CSSResults matching the include property of the theme.
- * @param {Theme} theme
- * @returns {CSSResult[]}
- */
-function getIncludedStyles(theme) {
-  const includedStyles = [];
-  if (theme.include) {
-    [].concat(theme.include).forEach((includeModuleId) => {
-      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
-      if (includedTheme) {
-        includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
-      } else {
-        console.warn(`Included moduleId ${includeModuleId} not found in style registry`);
-      }
-    }, theme.styles);
-  }
-  return includedStyles;
-}
-
-/**
- * Includes the styles to the template.
- * @param {CSSResult[]} styles
- * @param {HTMLTemplateElement} template
- */
-function addStylesToTemplate(styles, template) {
-  const styleEl = document.createElement('style');
-  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
-  template.content.appendChild(styleEl);
-}
-
-/**
- * Returns an array of themes that should be used for styling a component matching
- * the tag name. The array is sorted by the include order.
- * @param {string} tagName
- * @returns {Theme[]}
- */
-function getThemes(tagName) {
-  const defaultModuleName = `${tagName}-default-theme`;
-
-  const themes = getAllThemes()
-    // Filter by matching themeFor properties
-    .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
-    .map((theme) => ({
-      ...theme,
-      // Prepend styles from included themes
-      styles: [...getIncludedStyles(theme), ...theme.styles],
-      // Map moduleId to includePriority
-      includePriority: getIncludePriority(theme.moduleId),
-    }))
-    // Sort by includePriority
-    .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
-
-  if (themes.length > 0) {
-    return themes;
-  }
-  // No theme modules found, return the default module if it exists
-  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
-}
-
-/**
- * @polymerMixin
- * @mixes ThemePropertyMixin
- */
-const ThemableMixin = (superClass) =>
-  class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
-    /**
-     * Covers PolymerElement based component styling
-     * @protected
-     */
-    static finalize() {
-      super.finalize();
-
-      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
-      if (this.elementStyles) {
-        return;
-      }
-
-      const template = this.prototype._template;
-      if (!template || classHasThemes(this)) {
-        return;
-      }
-
-      addStylesToTemplate(this.getStylesForThis(), template);
-    }
-
-    /**
-     * Covers LitElement based component styling
-     *
-     * @protected
-     */
-    static finalizeStyles(styles) {
-      // The "styles" object originates from the "static get styles()" function of
-      // a LitElement based component. The theme styles are added after it
-      // so that they can override the component styles.
-      const themeStyles = this.getStylesForThis();
-      return styles ? [...super.finalizeStyles(styles), ...themeStyles] : themeStyles;
-    }
-
-    /**
-     * Get styles for the component type
-     *
-     * @private
-     */
-    static getStylesForThis() {
-      const parent = Object.getPrototypeOf(this.prototype);
-      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
-      this.__themes = [...inheritedThemes, ...getThemes(this.is)];
-      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
-      // Remove duplicates
-      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
-    }
-  };
+import { r as registerStyles, i, g as defineCustomElement, j as ThemableMixin, o as DirMixin, P as PolymerElement, h as html, k as requiredField, l as helper, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, c as DelegateFocusMixin, F as FieldMixin, p as Debouncer, t as timeOut } from './field-mixin.js';
 
 registerStyles(
   'vaadin-input-container',
@@ -466,174 +173,6 @@ registerStyles(
   { 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/
- */
-function defineCustomElement(CustomElement) {
-  const defined = customElements.get(CustomElement.is);
-  if (!defined) {
-    customElements.define(CustomElement.is, CustomElement);
-  } else {
-    const definedVersion = defined.version;
-    if (definedVersion && CustomElement.version && definedVersion === CustomElement.version) {
-      // Just loading the same thing again
-      console.warn(`The component ${CustomElement.is} has been loaded twice`);
-    } else {
-      console.error(
-        `Tried to define ${CustomElement.is} version ${CustomElement.version} when version ${defined.version} is already in use. Something will probably break.`,
-      );
-    }
-  }
-}
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Array of Vaadin custom element classes that have been subscribed to the dir changes.
- */
-const directionSubscribers = [];
-
-function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
-  if (documentDir) {
-    element.setAttribute('dir', documentDir);
-  } else if (elementDir != null) {
-    element.removeAttribute('dir');
-  }
-}
-
-function getDocumentDir() {
-  return document.documentElement.getAttribute('dir');
-}
-
-function directionUpdater() {
-  const documentDir = getDocumentDir();
-  directionSubscribers.forEach((element) => {
-    alignDirs(element, documentDir);
-  });
-}
-
-const directionObserver = new MutationObserver(directionUpdater);
-directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
-
-/**
- * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
- *
- * @polymerMixin
- */
-const DirMixin = (superClass) =>
-  class VaadinDirMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * @protected
-         */
-        dir: {
-          type: String,
-          value: '',
-          reflectToAttribute: true,
-          converter: {
-            fromAttribute: (attr) => {
-              return !attr ? '' : attr;
-            },
-            toAttribute: (prop) => {
-              return prop === '' ? null : prop;
-            },
-          },
-        },
-      };
-    }
-
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
-        this.__subscribe();
-        alignDirs(this, getDocumentDir(), null);
-      }
-    }
-
-    /** @protected */
-    attributeChangedCallback(name, oldValue, newValue) {
-      super.attributeChangedCallback(name, oldValue, newValue);
-      if (name !== 'dir') {
-        return;
-      }
-
-      const documentDir = getDocumentDir();
-
-      // New value equals to the document direction and the element is not subscribed to the changes
-      const newValueEqlDocDir = newValue === documentDir && directionSubscribers.indexOf(this) === -1;
-      // Value was emptied and the element is not subscribed to the changes
-      const newValueEmptied = !newValue && oldValue && directionSubscribers.indexOf(this) === -1;
-      // New value is different and the old equals to document direction and the element is not subscribed to the changes
-      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
-
-      if (newValueEqlDocDir || newValueEmptied) {
-        this.__subscribe();
-        alignDirs(this, documentDir, newValue);
-      } else if (newDiffValue) {
-        this.__unsubscribe();
-      }
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.__restoreSubscription = directionSubscribers.includes(this);
-      this.__unsubscribe();
-    }
-
-    /** @protected */
-    _valueToNodeAttribute(node, value, attribute) {
-      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
-      // If the property contains an empty string then it should not create an empty attribute
-      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
-        return;
-      }
-      super._valueToNodeAttribute(node, value, attribute);
-    }
-
-    /** @protected */
-    _attributeToProperty(attribute, value, type) {
-      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
-      // If the attribute is removed, then the dir property should contain an empty string instead of null
-      if (attribute === 'dir' && !value) {
-        this.dir = '';
-      } else {
-        super._attributeToProperty(attribute, value, type);
-      }
-    }
-
-    /** @private */
-    __subscribe() {
-      if (!directionSubscribers.includes(this)) {
-        directionSubscribers.push(this);
-      }
-    }
-
-    /** @private */
-    __unsubscribe() {
-      if (directionSubscribers.includes(this)) {
-        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
-      }
-    }
-  };
-
 /**
  * @license
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
@@ -813,7 +352,7 @@ const fieldButton = i`
     display: block;
   }
 `;
-registerStyles$1('', fieldButton, { moduleId: 'lumo-field-button' });
+registerStyles('', fieldButton, { moduleId: 'lumo-field-button' });
 
 /**
  * @license
@@ -959,204 +498,45 @@ const inputField = i`
 
 const inputFieldShared$1 = [requiredField, fieldButton, helper, inputField];
 
-registerStyles$1('', inputFieldShared$1, {
+registerStyles('', inputFieldShared$1, {
   moduleId: 'lumo-input-field-shared-styles',
 });
 
 /**
  * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * Async interface wrapper around `setTimeout`.
- *
- * @namespace
- * @summary Async interface wrapper around `setTimeout`.
- */
-const timeOut = {
-  /**
-   * Returns a sub-module with the async interface providing the provided
-   * delay.
-   *
-   * @memberof timeOut
-   * @param {number=} delay Time to wait before calling callbacks in ms
-   * @return {!AsyncInterface} An async timeout interface
-   */
-  after(delay) {
-    return {
-      run(fn) {
-        return window.setTimeout(fn, delay);
-      },
-      cancel(handle) {
-        window.clearTimeout(handle);
-      },
-    };
-  },
-  /**
-   * Enqueues a function called in the next task.
-   *
-   * @memberof timeOut
-   * @param {!Function} fn Callback to run
-   * @param {number=} delay Delay in milliseconds
-   * @return {number} Handle used for canceling task
-   */
-  run(fn, delay) {
-    return window.setTimeout(fn, delay);
-  },
-  /**
-   * Cancels a previously enqueued `timeOut` callback.
-   *
-   * @memberof timeOut
-   * @param {number} handle Handle returned from `run` of callback to cancel
-   * @return {void}
-   */
-  cancel(handle) {
-    window.clearTimeout(handle);
-  },
-};
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
 
-/**
-@license
-Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
+const testPlatform = (regexp) => regexp.test(navigator.platform);
 
-const debouncerQueue = new Set();
+const testVendor = (regexp) => regexp.test(navigator.vendor);
 
-/**
- * @summary Collapse multiple callbacks into one invocation after a timer.
- */
-class Debouncer {
-  /**
-   * Creates a debouncer if no debouncer is passed as a parameter
-   * or it cancels an active debouncer otherwise. The following
-   * example shows how a debouncer can be called multiple times within a
-   * microtask and "debounced" such that the provided callback function is
-   * called once. Add this method to a custom element:
-   *
-   * ```js
-   * import {microTask} from '@vaadin/component-base/src/async.js';
-   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
-   * // ...
-   *
-   * _debounceWork() {
-   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
-   *       microTask, () => this._doWork());
-   * }
-   * ```
-   *
-   * If the `_debounceWork` method is called multiple times within the same
-   * microtask, the `_doWork` function will be called only once at the next
-   * microtask checkpoint.
-   *
-   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
-   * this with a debouncer, you can use `enqueueDebouncer` and
-   * `flush`. For example, extend the above example by adding
-   * `enqueueDebouncer(this._debounceJob)` at the end of the
-   * `_debounceWork` method. Then in a test, call `flush` to ensure
-   * the debouncer has completed.
-   *
-   * @param {Debouncer?} debouncer Debouncer object.
-   * @param {!AsyncInterface} asyncModule Object with Async interface
-   * @param {function()} callback Callback to run.
-   * @return {!Debouncer} Returns a debouncer object.
-   */
-  static debounce(debouncer, asyncModule, callback) {
-    if (debouncer instanceof Debouncer) {
-      // Cancel the async callback, but leave in debouncerQueue if it was
-      // enqueued, to maintain 1.x flush order
-      debouncer._cancelAsync();
-    } else {
-      debouncer = new Debouncer();
-    }
-    debouncer.setConfig(asyncModule, callback);
-    return debouncer;
-  }
+testUserAgent(/Android/u);
 
-  constructor() {
-    this._asyncModule = null;
-    this._callback = null;
-    this._timer = null;
-  }
+testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
 
-  /**
-   * Sets the scheduler; that is, a module with the Async interface,
-   * a callback and optional arguments to be passed to the run function
-   * from the async module.
-   *
-   * @param {!AsyncInterface} asyncModule Object with Async interface.
-   * @param {function()} callback Callback to run.
-   * @return {void}
-   */
-  setConfig(asyncModule, callback) {
-    this._asyncModule = asyncModule;
-    this._callback = callback;
-    this._timer = this._asyncModule.run(() => {
-      this._timer = null;
-      debouncerQueue.delete(this);
-      this._callback();
-    });
-  }
+const isFirefox = testUserAgent(/Firefox/u);
 
-  /**
-   * Cancels an active debouncer and returns a reference to itself.
-   *
-   * @return {void}
-   */
-  cancel() {
-    if (this.isActive()) {
-      this._cancelAsync();
-      // Canceling a debouncer removes its spot from the flush queue,
-      // so if a debouncer is manually canceled and re-debounced, it
-      // will reset its flush order (this is a very minor difference from 1.x)
-      // Re-debouncing via the `debounce` API retains the 1.x FIFO flush order
-      debouncerQueue.delete(this);
-    }
-  }
+// 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);
 
-  /**
-   * Cancels a debouncer's async callback.
-   *
-   * @return {void}
-   */
-  _cancelAsync() {
-    if (this.isActive()) {
-      this._asyncModule.cancel(/** @type {number} */ (this._timer));
-      this._timer = null;
-    }
-  }
+const isIPhone = testPlatform(/^iPhone/u);
 
-  /**
-   * Flushes an active debouncer and returns a reference to itself.
-   *
-   * @return {void}
-   */
-  flush() {
-    if (this.isActive()) {
-      this.cancel();
-      this._callback();
-    }
-  }
+const isIOS = isIPhone || isIPad;
+
+const isSafari = testUserAgent(/^((?!chrome|android).)*safari/iu);
 
-  /**
-   * Returns true if the debouncer is active.
-   *
-   * @return {boolean} True if active.
-   */
-  isActive() {
-    return this._timer != null;
+const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
   }
-}
+})();
 
 /**
  * @license
@@ -1234,40 +614,6 @@ const SlotStylesMixin = dedupingMixin(
     },
 );
 
-/**
- * @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);
-
-testUserAgent(/Firefox/u);
-
-// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
-
-testPlatform(/^iPhone/u);
-
-testUserAgent(/^((?!chrome|android).)*safari/iu);
-
-const isTouch = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
 /**
  * @license
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
@@ -1862,4 +1208,4 @@ const inputFieldContainer = i`
 
 const inputFieldShared = [fieldShared, inputFieldContainer, clearButton];
 
-export { InputConstraintsMixin as I, InputControlMixin as a, inputFieldShared as b, inputFieldShared$1 as i };
+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 };