npm - @vaadin/component-base - Versions diffs - 23.2.15 → 23.2.16 - Mend

@vaadin/component-base 23.2.15 → 23.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/custom_typings/vaadin-usage-statistics.d.ts +2 -2
package/index.d.ts +0 -1
package/index.js +0 -1
package/package.json +3 -3
package/src/a11y-announcer.d.ts +1 -1
package/src/a11y-announcer.js +1 -1
package/src/active-mixin.d.ts +1 -1
package/src/active-mixin.js +1 -1
package/src/async.d.ts +3 -0
package/src/async.js +2 -1
package/src/browser-utils.js +7 -7
package/src/controller-mixin.d.ts +1 -1
package/src/controller-mixin.js +1 -1
package/src/debounce.js +2 -2
package/src/delegate-focus-mixin.d.ts +48 -0
package/src/delegate-focus-mixin.js +228 -0
package/src/delegate-state-mixin.d.ts +20 -0
package/src/delegate-state-mixin.js +125 -0
package/src/dir-mixin.d.ts +2 -4
package/src/dir-mixin.js +17 -39
package/src/dir-utils.d.ts +19 -0
package/src/dir-utils.js +36 -0
package/src/disabled-mixin.d.ts +1 -1
package/src/disabled-mixin.js +1 -1
package/src/dom-utils.d.ts +6 -1
package/src/dom-utils.js +11 -1
package/src/element-mixin.d.ts +1 -1
package/src/element-mixin.js +11 -5
package/src/focus-mixin.d.ts +1 -1
package/src/focus-mixin.js +2 -2
package/src/focus-trap-controller.d.ts +1 -1
package/src/focus-trap-controller.js +22 -22
package/src/focus-utils.d.ts +1 -1
package/src/focus-utils.js +57 -57
package/src/gestures.d.ts +6 -12
package/src/gestures.js +6 -4
package/src/iron-list-core.js +22 -44
package/src/keyboard-direction-mixin.d.ts +41 -0
package/src/keyboard-direction-mixin.js +192 -0
package/src/keyboard-mixin.d.ts +1 -1
package/src/keyboard-mixin.js +1 -1
package/src/list-mixin.d.ts +57 -0
package/src/list-mixin.js +354 -0
package/src/media-query-controller.d.ts +1 -1
package/src/media-query-controller.js +1 -1
package/src/overflow-controller.d.ts +1 -1
package/src/overflow-controller.js +3 -3
package/src/overlay-class-mixin.d.ts +33 -0
package/src/overlay-class-mixin.js +79 -0
package/src/polylit-mixin.d.ts +3 -3
package/src/polylit-mixin.js +9 -4
package/src/resize-mixin.d.ts +1 -1
package/src/resize-mixin.js +11 -21
package/src/slot-child-observe-controller.d.ts +28 -0
package/src/slot-child-observe-controller.js +176 -0
package/src/slot-controller.d.ts +33 -5
package/src/slot-controller.js +103 -40
package/src/tabindex-mixin.d.ts +1 -1
package/src/tabindex-mixin.js +1 -1
package/src/templates.js +1 -1
package/src/tooltip-controller.d.ts +86 -0
package/src/tooltip-controller.js +130 -0
package/src/unique-id-utils.d.ts +1 -1
package/src/unique-id-utils.js +1 -1
package/src/virtualizer-iron-list-adapter.js +56 -2
package/src/virtualizer.js +18 -18
package/src/dir-helper.d.ts +0 -42
package/src/dir-helper.js +0 -93
package/src/slot-mixin.d.ts +0 -18
package/src/slot-mixin.js +0 -60

package/src/dir-mixin.js CHANGED Viewed

@@ -1,27 +1,14 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DirHelper } from './dir-helper.js';
 /**
  * Array of Vaadin custom element classes that have been subscribed to the dir changes.
  */
 const directionSubscribers = [];
-function directionUpdater() {
-  const documentDir = getDocumentDir();
-  directionSubscribers.forEach((element) => {
-    alignDirs(element, documentDir);
-  });
-}
-let scrollType;
-const directionObserver = new MutationObserver(directionUpdater);
-directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
 function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
   if (documentDir) {
     element.setAttribute('dir', documentDir);
@@ -34,6 +21,16 @@ 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.
  *
@@ -62,13 +59,12 @@ export const DirMixin = (superClass) =>
       };
     }
-    /** @protected */
-    static finalize() {
-      super.finalize();
-      if (!scrollType) {
-        scrollType = DirHelper.detectScrollType();
-      }
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
     }
     /** @protected */
@@ -146,22 +142,4 @@ export const DirMixin = (superClass) =>
         directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
       }
     }
-    /**
-     * @param {Element} element
-     * @return {number}
-     * @protected
-     */
-    __getNormalizedScrollLeft(element) {
-      return DirHelper.getNormalizedScrollLeft(scrollType, this.getAttribute('dir') || 'ltr', element);
-    }
-    /**
-     * @param {Element} element
-     * @param {number} scrollLeft
-     * @protected
-     */
-    __setNormalizedScrollLeft(element, scrollLeft) {
-      return DirHelper.setNormalizedScrollLeft(scrollType, this.getAttribute('dir') || 'ltr', element, scrollLeft);
-    }
   };

package/src/dir-utils.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/**
+ * Get the scrollLeft value of the element relative to the direction
+ */
+export declare function getNormalizedScrollLeft(element: HTMLElement, direction: string | null): number;
+/**
+ * Set the scrollLeft value of the element relative to the direction
+ */
+export declare function setNormalizedScrollLeft(
+  element: HTMLElement,
+  direction: string | null,
+  scrollLeft: number,
+): void;

package/src/dir-utils.js ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/**
+ * Get the scrollLeft value of the element relative to the direction
+ *
+ * @param {HTMLElement} element
+ * @param {string} direction current direction of the element
+ * @return {number} the scrollLeft value.
+ */
+export function getNormalizedScrollLeft(element, direction) {
+  const { scrollLeft } = element;
+  if (direction !== 'rtl') {
+    return scrollLeft;
+  }
+  return element.scrollWidth - element.clientWidth + scrollLeft;
+}
+/**
+ * Set the scrollLeft value of the element relative to the direction
+ *
+ * @param {HTMLElement} element
+ * @param {string} direction current direction of the element
+ * @param {number} scrollLeft the scrollLeft value to be set
+ */
+export function setNormalizedScrollLeft(element, direction, scrollLeft) {
+  if (direction !== 'rtl') {
+    element.scrollLeft = scrollLeft;
+  } else {
+    element.scrollLeft = element.clientWidth - element.scrollWidth + scrollLeft;
+  }
+}

package/src/disabled-mixin.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/disabled-mixin.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/dom-utils.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
@@ -23,3 +23,8 @@ export function addValueToAttribute(element: HTMLElement, attr: string, value: s
  * If the value is the last one, the whole attribute is removed.
  */
 export function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ */
+export function isEmptyTextNode(node: Node): boolean;

package/src/dom-utils.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
@@ -90,3 +90,13 @@ export function removeValueFromAttribute(element, attr, value) {
   }
   element.setAttribute(attr, serializeAttributeValue(values));
 }
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ *
+ * @param {Node} node
+ * @return {boolean}
+ */
+export function isEmptyTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
+}

package/src/element-mixin.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '../custom_typings/vaadin-usage-statistics.js';

package/src/element-mixin.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { setCancelSyntheticClickEvents } from '@polymer/polymer/lib/utils/settings.js';
@@ -15,14 +15,20 @@ import { DirMixin } from './dir-mixin.js';
 // for buttons that are based on `[role=button]` e.g vaadin-button.
 setCancelSyntheticClickEvents(false);
-window.Vaadin = window.Vaadin || {};
+if (!window.Vaadin) {
+  window.Vaadin = {};
+}
 /**
  * Array of Vaadin custom element classes that have been finalized.
  */
-window.Vaadin.registrations = window.Vaadin.registrations || [];
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
-window.Vaadin.developmentModeCallback = window.Vaadin.developmentModeCallback || {};
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
+}
 window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
   usageStatistics();
@@ -39,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.2.15';
+      return '23.2.16';
     }
     /** @protected */

package/src/focus-mixin.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/focus-mixin.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
@@ -39,7 +39,7 @@ export const FocusMixin = dedupingMixin(
         // In super.ready() other 'focusin' and 'focusout' listeners might be
         // added, so we call it after our own ones to ensure they execute first.
         // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
-        // input field on iOS after “Done” is pressed.
+        // input field on iOS after "Done" is pressed.
         super.ready();
       }

package/src/focus-trap-controller.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/focus-trap-controller.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getFocusableElements, isElementFocused } from './focus-utils.js';
@@ -33,6 +33,27 @@ export class FocusTrapController {
     this.__onKeyDown = this.__onKeyDown.bind(this);
   }
+  /**
+   * An array of tab-ordered focusable elements inside the trap node.
+   *
+   * @return {HTMLElement[]}
+   * @private
+   */
+  get __focusableElements() {
+    return getFocusableElements(this.__trapNode);
+  }
+  /**
+   * The index of the element inside the trap node that currently has focus.
+   *
+   * @return {HTMLElement | undefined}
+   * @private
+   */
+  get __focusedElementIndex() {
+    const focusableElements = this.__focusableElements;
+    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
+  }
   hostConnected() {
     document.addEventListener('keydown', this.__onKeyDown);
   }
@@ -131,25 +152,4 @@ export class FocusTrapController {
       element.select();
     }
   }
-  /**
-   * An array of tab-ordered focusable elements inside the trap node.
-   *
-   * @return {HTMLElement[]}
-   * @private
-   */
-  get __focusableElements() {
-    return getFocusableElements(this.__trapNode);
-  }
-  /**
-   * The index of the element inside the trap node that currently has focus.
-   *
-   * @return {HTMLElement | undefined}
-   * @private
-   */
-  get __focusedElementIndex() {
-    const focusableElements = this.__focusableElements;
-    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
-  }
 }

package/src/focus-utils.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */

package/src/focus-utils.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
@@ -61,24 +61,6 @@ function isElementHiddenDirectly(element) {
   return false;
 }
-/**
- * Returns the normalized element tabindex. If not focusable, returns -1.
- * It checks for the attribute "tabindex" instead of the element property
- * `tabIndex` since browsers assign different values to it.
- * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
- *
- * @param {HTMLElement} element
- * @return {number}
- */
-function normalizeTabIndex(element) {
-  if (!isElementFocusable(element)) {
-    return -1;
-  }
-  const tabIndex = element.getAttribute('tabindex') || 0;
-  return Number(tabIndex);
-}
 /**
  * Returns if element `a` has lower tab order compared to element `b`
  * (both elements are assumed to be focusable and tabbable).
@@ -138,42 +120,6 @@ function sortElementsByTabIndex(elements) {
   return mergeSortByTabIndex(left, right);
 }
-/**
- * Searches for nodes that are tabbable and adds them to the `result` array.
- * Returns if the `result` array needs to be sorted by tabindex.
- *
- * @param {Node} node The starting point for the search; added to `result` if tabbable.
- * @param {HTMLElement[]} result
- * @return {boolean}
- * @private
- */
-function collectFocusableNodes(node, result) {
-  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
-    // Don't traverse children if the node is not an HTML element or not visible.
-    return false;
-  }
-  const element = /** @type {HTMLElement} */ (node);
-  const tabIndex = normalizeTabIndex(element);
-  let needsSort = tabIndex > 0;
-  if (tabIndex >= 0) {
-    result.push(element);
-  }
-  let children = [];
-  if (element.localName === 'slot') {
-    children = element.assignedNodes({ flatten: true });
-  } else {
-    // Use shadow root if possible, will check for distributed nodes.
-    children = (element.shadowRoot || element).children;
-  }
-  [...children].forEach((child) => {
-    // Ensure method is always invoked to collect focusable children.
-    needsSort = collectFocusableNodes(child, result) || needsSort;
-  });
-  return needsSort;
-}
 /**
  * Returns true if the element is hidden, false otherwise.
  *
@@ -239,6 +185,60 @@ export function isElementFocused(element) {
   return element.getRootNode().activeElement === element;
 }
+/**
+ * Returns the normalized element tabindex. If not focusable, returns -1.
+ * It checks for the attribute "tabindex" instead of the element property
+ * `tabIndex` since browsers assign different values to it.
+ * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+ *
+ * @param {HTMLElement} element
+ * @return {number}
+ */
+function normalizeTabIndex(element) {
+  if (!isElementFocusable(element)) {
+    return -1;
+  }
+  const tabIndex = element.getAttribute('tabindex') || 0;
+  return Number(tabIndex);
+}
+/**
+ * Searches for nodes that are tabbable and adds them to the `result` array.
+ * Returns if the `result` array needs to be sorted by tabindex.
+ *
+ * @param {Node} node The starting point for the search; added to `result` if tabbable.
+ * @param {HTMLElement[]} result
+ * @return {boolean}
+ * @private
+ */
+function collectFocusableNodes(node, result) {
+  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
+    // Don't traverse children if the node is not an HTML element or not visible.
+    return false;
+  }
+  const element = /** @type {HTMLElement} */ (node);
+  const tabIndex = normalizeTabIndex(element);
+  let needsSort = tabIndex > 0;
+  if (tabIndex >= 0) {
+    result.push(element);
+  }
+  let children = [];
+  if (element.localName === 'slot') {
+    children = element.assignedNodes({ flatten: true });
+  } else {
+    // Use shadow root if possible, will check for distributed nodes.
+    children = (element.shadowRoot || element).children;
+  }
+  [...children].forEach((child) => {
+    // Ensure method is always invoked to collect focusable children.
+    needsSort = collectFocusableNodes(child, result) || needsSort;
+  });
+  return needsSort;
+}
 /**
  * Returns a tab-ordered array of focusable elements for a root element.
  * The resulting array will include the root element if it is focusable.
@@ -251,8 +251,8 @@ export function isElementFocused(element) {
 export function getFocusableElements(element) {
   const focusableElements = [];
   const needsSortByTabIndex = collectFocusableNodes(element, focusableElements);
-  // If there is at least one element with tabindex > 0, we need to sort
-  // the final array by tabindex.≈
+  // If there is at least one element with tabindex > 0,
+  // we need to sort the final array by tabindex.
   if (needsSortByTabIndex) {
     return sortElementsByTabIndex(focusableElements);
   }

package/src/gestures.d.ts CHANGED Viewed

@@ -8,8 +8,6 @@ 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
 */
-export { deepTargetFind };
 /**
  * Finds the element rendered on the screen at the provided coordinates.
  *
@@ -20,8 +18,7 @@ export { deepTargetFind };
  * found at the screen position given.
  */
 declare function deepTargetFind(x: number, y: number): Element | null;
-export { addListener };
+export { deepTargetFind };
 /**
  * Adds an event listener to a node for the given gesture type.
@@ -29,8 +26,7 @@ export { addListener };
  * @returns Returns true if a gesture event listener was added.
  */
 declare function addListener(node: EventTarget, evType: string, handler: (p0: Event) => void): boolean;
-export { removeListener };
+export { addListener };
 /**
  * Removes an event listener from a node for the given gesture type.
@@ -38,16 +34,14 @@ export { removeListener };
  * @returns Returns true if a gesture event listener was removed.
  */
 declare function removeListener(node: EventTarget, evType: string, handler: (p0: Event) => void): boolean;
-export { register };
+export { removeListener };
 /**
  * Registers a new gesture event recognizer for adding new custom
  * gesture event types.
  */
 declare function register(recog: GestureRecognizer): void;
-export { setTouchAction };
+export { register };
 /**
  * Sets scrolling direction on node.
@@ -56,13 +50,13 @@ export { setTouchAction };
  * adding event listeners.
  */
 declare function setTouchAction(node: EventTarget, value: string): void;
-export { prevent };
+export { setTouchAction };
 /**
  * Prevents the dispatch and default action of the given event name.
  */
 declare function prevent(evName: string): void;
+export { prevent };
 export interface GestureRecognizer {
   reset(): void;

package/src/gestures.js CHANGED Viewed

@@ -8,6 +8,8 @@ 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
 */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 /**
  * @fileoverview
  *
@@ -90,7 +92,7 @@ function PASSIVE_TOUCH(eventName) {
 }
 // Check for touch-only devices
-const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
+const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/u);
 // Defined at https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
 /** @type {!Object<boolean>} */
@@ -468,9 +470,9 @@ function _remove(node, evType, handler) {
  */
 export function register(recog) {
   recognizers.push(recog);
-  for (let i = 0; i < recog.emits.length; i++) {
-    gestures[recog.emits[i]] = recog;
-  }
+  recog.emits.forEach((emit) => {
+    gestures[emit] = recog;
+  });
 }
 /**