@vaadin/component-base 23.2.16 → 23.2.17

package/src/focus-utils.js

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 
@@ -61,6 +61,24 @@ 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).
@@ -120,6 +138,42 @@ 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.
  *
@@ -185,60 +239,6 @@ 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 @@ function collectFocusableNodes(node, result) {
 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

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

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

package/src/iron-list-core.js

@@ -10,7 +10,7 @@
 import { animationFrame, idlePeriod, microTask } from './async.js';
 import { Debouncer, enqueueDebouncer, flush } from './debounce.js';
 
-const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/u);
+const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
 const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
 const DEFAULT_PHYSICAL_COUNT = 3;
 
@@ -502,12 +502,9 @@ export const ironList = {
       this._physicalIndexForKey = {};
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
-      if (!this._physicalItems) {
-        this._physicalItems = [];
-      }
-      if (!this._physicalSizes) {
-        this._physicalSizes = [];
-      }
+      this._physicalCount = this._physicalCount || 0;
+      this._physicalItems = this._physicalItems || [];
+      this._physicalSizes = this._physicalSizes || [];
       this._physicalStart = 0;
       if (this._scrollTop > this._scrollOffset) {
         this._resetScrollPosition(0);
@@ -616,21 +613,16 @@ export const ironList = {
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
   _updateScrollerSize(forceUpdate) {
-    const estScrollHeight =
+    this._estScrollHeight =
       this._physicalBottom +
       Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
 
-    this._estScrollHeight = estScrollHeight;
-
+    forceUpdate = forceUpdate || this._scrollHeight === 0;
+    forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
     // Amortize height adjustment, so it won't trigger large repaints too often.
-    if (
-      forceUpdate ||
-      this._scrollHeight === 0 ||
-      this._scrollPosition >= estScrollHeight - this._physicalSize ||
-      Math.abs(estScrollHeight - this._scrollHeight) >= this._viewportHeight
-    ) {
-      this.$.items.style.height = `${estScrollHeight}px`;
-      this._scrollHeight = estScrollHeight;
+    if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._viewportHeight) {
+      this.$.items.style.height = `${this._estScrollHeight}px`;
+      this._scrollHeight = this._estScrollHeight;
     }
   },
 
@@ -726,9 +718,7 @@ export const ironList = {
   },
 
   _debounce(name, cb, asyncModule) {
-    if (!this._debouncers) {
-      this._debouncers = {};
-    }
+    this._debouncers = this._debouncers || {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
   },

package/src/keyboard-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/keyboard-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/media-query-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { ReactiveController } from 'lit';

package/src/media-query-controller.js

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 

package/src/overflow-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { ReactiveController } from 'lit';

package/src/overflow-controller.js

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -92,7 +92,7 @@ export class OverflowController {
       overflow += ' top';
     }
 
-    if (Math.ceil(target.scrollTop) < Math.ceil(target.scrollHeight - target.clientHeight)) {
+    if (target.scrollTop < target.scrollHeight - target.clientHeight) {
       overflow += ' bottom';
     }
 
@@ -101,7 +101,7 @@ export class OverflowController {
       overflow += ' start';
     }
 
-    if (Math.ceil(scrollLeft) < Math.ceil(target.scrollWidth - target.clientWidth)) {
+    if (scrollLeft < target.scrollWidth - target.clientWidth) {
       overflow += ' end';
     }
 

package/src/polylit-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -14,10 +14,10 @@ export declare class PolylitMixinClass {
   /**
    * Reads a value from a path.
    */
-  protected _get(root: object, path: string): any;
+  protected _get(root: Object, path: String): any;
 
   /**
    * Sets a value to a path.
    */
-  protected _set(root: object, path: string, value: any): void;
+  protected _set(root: Object, path: String, value: any): void;
 }

package/src/polylit-mixin.js

@@ -1,18 +1,16 @@
 /**
  * @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/
  */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 const caseMap = {};
 
-const CAMEL_TO_DASH = /([A-Z])/gu;
+const CAMEL_TO_DASH = /([A-Z])/g;
 
 function camelToDash(camel) {
-  if (!caseMap[camel]) {
-    caseMap[camel] = camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
-  }
+  caseMap[camel] = caseMap[camel] || camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
   return caseMap[camel];
 }
 
@@ -171,10 +169,7 @@ const PolylitMixinImplementation = (superclass) => {
     firstUpdated() {
       super.firstUpdated();
 
-      if (!this.$) {
-        this.$ = {};
-      }
-
+      this.$ = this.$ || {};
       this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
         this.$[node.id] = node;
       });

package/src/resize-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/resize-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
@@ -28,16 +28,6 @@ const observer = new ResizeObserver((entries) => {
 export const ResizeMixin = dedupingMixin(
   (superclass) =>
     class ResizeMixinClass extends superclass {
-      /**
-       * When true, the parent element resize will be also observed.
-       * Override this getter and return `true` to enable this.
-       *
-       * @protected
-       */
-      get _observeParent() {
-        return false;
-      }
-
       /** @protected */
       connectedCallback() {
         super.connectedCallback();
@@ -77,6 +67,16 @@ export const ResizeMixin = dedupingMixin(
         }
       }
 
+      /**
+       * When true, the parent element resize will be also observed.
+       * Override this getter and return `true` to enable this.
+       *
+       * @protected
+       */
+      get _observeParent() {
+        return false;
+      }
+
       /**
        * A handler invoked on host resize. By default, it does nothing.
        * Override the method to implement your own behavior.
@@ -86,5 +86,15 @@ export const ResizeMixin = dedupingMixin(
       _onResize(_contentRect) {
         // To be implemented.
       }
+
+      /**
+       * @deprecated Since Vaadin 23, `notifyResize()` is deprecated. The component uses a
+       * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
+       */
+      notifyResize() {
+        console.warn(
+          `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`,
+        );
+      }
     },
 );

package/src/slot-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { ReactiveController } from 'lit';
@@ -16,16 +16,8 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   node: HTMLElement;
 
-  /**
-   * The list of slotted nodes managed by the controller.
-   * Only used when `multiple` property is set to `true`.
-   */
-  nodes: HTMLElement[];
-
   protected initialized: boolean;
 
-  protected multiple: boolean;
-
   protected defaultNode: Node;
 
   protected defaultId: string;
@@ -33,40 +25,20 @@ export class SlotController extends EventTarget implements ReactiveController {
   constructor(
     host: HTMLElement,
     slotName: string,
-    tagName?: string,
-    config?: {
-      multiple?: boolean;
-      observe?: boolean;
-      useUniqueId?: boolean;
-      initializer?(host: HTMLElement, node: HTMLElement): void;
-    },
+    slotFactory?: () => HTMLElement,
+    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
+    useUniqueId?: boolean,
   );
 
   hostConnected(): void;
 
-  /**
-   * Return the list of nodes matching the slot managed by the controller.
-   */
-  getSlotChildren(): Node[];
-
   /**
    * Return a reference to the node managed by the controller.
    */
   getSlotChild(): Node;
 
-  /**
-   * Create and attach default node using the provided tag name, if any.
-   */
   protected attachDefaultNode(): Node | undefined;
 
-  /**
-   * Run both `initCustomNode` and `initNode` for a custom slotted node.
-   */
-  protected initAddedNode(node: Node): void;
-
-  /**
-   * Run `slotInitializer` for the node managed by the controller.
-   */
   protected initNode(node: Node): void;
 
   /**
@@ -82,5 +54,5 @@ export class SlotController extends EventTarget implements ReactiveController {
   /**
    * Setup the observer to manage slot content changes.
    */
-  protected observeSlot(): void;
+  protected observe(): void;
 }