@vaadin/component-base 23.2.16 → 23.2.17

package/custom_typings/vaadin-usage-statistics.d.ts

@@ -1,5 +1,5 @@
 declare module '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js' {
-  function usageStatistics(): void;
-
   export { usageStatistics };
+
+  function usageStatistics(): void;
 }

package/index.d.ts

@@ -8,4 +8,5 @@ export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
+export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/index.js

@@ -7,4 +7,5 @@ export { FocusMixin } from './src/focus-mixin.js';
 export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { SlotController } from './src/slot-controller.js';
+export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.2.16",
+  "version": "23.2.17",
   "publishConfig": {
     "access": "public"
   },
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "57010013e59a3ecdc70ceef4377dbc3b1ac03fb3"
+  "gitHead": "60bf51d55e8b93a30536ebb4966248ba256c9b5d"
 }

package/src/a11y-announcer.d.ts

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

package/src/a11y-announcer.js

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

package/src/active-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/active-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 { DisabledMixin } from './disabled-mixin.js';

package/src/async.d.ts

@@ -9,7 +9,6 @@
  */
 
 export interface AsyncInterface {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   run(fn: Function, delay?: number): number;
   cancel(handle: number): void;
 }
@@ -40,7 +39,6 @@ declare namespace timeOut {
    *
    * @returns Handle used for canceling task
    */
-  // eslint-disable-next-line @typescript-eslint/ban-types
   function run(fn: Function, delay?: number): number;
 
   /**
@@ -105,7 +103,6 @@ declare namespace microTask {
    *
    * @returns Handle used for canceling task
    */
-  // eslint-disable-next-line @typescript-eslint/ban-types
   function run(callback?: Function): number;
 
   /**

package/src/async.js

@@ -27,6 +27,7 @@ const microtaskCallbacks = [];
 let microtaskNodeContent = 0;
 let microtaskScheduled = false;
 const microtaskNode = document.createTextNode('');
+new window.MutationObserver(microtaskFlush).observe(microtaskNode, { characterData: true });
 
 function microtaskFlush() {
   microtaskScheduled = false;
@@ -47,8 +48,6 @@ function microtaskFlush() {
   microtaskLastHandle += len;
 }
 
-new window.MutationObserver(microtaskFlush).observe(microtaskNode, { characterData: true });
-
 /**
  * Async interface wrapper around `setTimeout`.
  *

package/src/browser-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/
  */
 
@@ -10,20 +10,20 @@ const testPlatform = (regexp) => regexp.test(navigator.platform);
 
 const testVendor = (regexp) => regexp.test(navigator.vendor);
 
-export const isAndroid = testUserAgent(/Android/u);
+export const isAndroid = testUserAgent(/Android/);
 
-export const isChrome = testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
+export const isChrome = testUserAgent(/Chrome/) && testVendor(/Google Inc/);
 
-export const isFirefox = testUserAgent(/Firefox/u);
+export const isFirefox = testUserAgent(/Firefox/);
 
 // IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-export const isIPad = testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
+export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
 
-export const isIPhone = testPlatform(/^iPhone/u);
+export const isIPhone = testPlatform(/^iPhone/);
 
 export const isIOS = isIPhone || isIPad;
 
-export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/iu);
+export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
 
 export const isTouch = (() => {
   try {

package/src/controller-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/controller-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/debounce.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
 */
 
-const debouncerQueue = new Set();
-
 /**
  * @summary Collapse multiple callbacks into one invocation after a timer.
  */
@@ -135,6 +133,8 @@ export class Debouncer {
   }
 }
 
+let debouncerQueue = new Set();
+
 /**
  * Adds a `Debouncer` to a list of globally flushable tasks.
  *

package/src/dir-helper.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Helper that provides a set of functions for RTL.
+ */
+declare class DirHelper {
+  /**
+   * Get the scroll type in the current browser view.
+   *
+   * @returns the scroll type. Possible values are `default|reverse|negative`
+   */
+  static detectScrollType(): string;
+
+  /**
+   * Get the scrollLeft value of the element relative to the direction
+   *
+   * @param scrollType type of the scroll detected with `detectScrollType`
+   * @param direction current direction of the element
+   * @returns the scrollLeft value.
+   */
+  static getNormalizedScrollLeft(scrollType: string, direction: string, element: Element | null): number;
+
+  /**
+   * Set the scrollLeft value of the element relative to the direction
+   *
+   * @param scrollType type of the scroll detected with `detectScrollType`
+   * @param direction current direction of the element
+   * @param scrollLeft the scrollLeft value to be set
+   */
+  static setNormalizedScrollLeft(
+    scrollType: string,
+    direction: string,
+    element: Element | null,
+    scrollLeft: number,
+  ): void;
+}
+
+export { DirHelper };

package/src/dir-helper.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Helper that provides a set of functions for RTL.
+ */
+class DirHelper {
+  /**
+   * Get the scroll type in the current browser view.
+   *
+   * @return {string} the scroll type. Possible values are `default|reverse|negative`
+   */
+  static detectScrollType() {
+    const dummy = document.createElement('div');
+    dummy.textContent = 'ABCD';
+    dummy.dir = 'rtl';
+    dummy.style.fontSize = '14px';
+    dummy.style.width = '4px';
+    dummy.style.height = '1px';
+    dummy.style.position = 'absolute';
+    dummy.style.top = '-1000px';
+    dummy.style.overflow = 'scroll';
+    document.body.appendChild(dummy);
+
+    let cachedType = 'reverse';
+    if (dummy.scrollLeft > 0) {
+      cachedType = 'default';
+    } else {
+      dummy.scrollLeft = 2;
+      if (dummy.scrollLeft < 2) {
+        cachedType = 'negative';
+      }
+    }
+    document.body.removeChild(dummy);
+    return cachedType;
+  }
+
+  /**
+   * Get the scrollLeft value of the element relative to the direction
+   *
+   * @param {string} scrollType type of the scroll detected with `detectScrollType`
+   * @param {string} direction current direction of the element
+   * @param {Element} element
+   * @return {number} the scrollLeft value.
+   */
+  static getNormalizedScrollLeft(scrollType, direction, element) {
+    const { scrollLeft } = element;
+    if (direction !== 'rtl' || !scrollType) {
+      return scrollLeft;
+    }
+
+    switch (scrollType) {
+      case 'negative':
+        return element.scrollWidth - element.clientWidth + scrollLeft;
+      case 'reverse':
+        return element.scrollWidth - element.clientWidth - scrollLeft;
+      default:
+        return scrollLeft;
+    }
+  }
+
+  /**
+   * Set the scrollLeft value of the element relative to the direction
+   *
+   * @param {string} scrollType type of the scroll detected with `detectScrollType`
+   * @param {string} direction current direction of the element
+   * @param {Element} element
+   * @param {number} scrollLeft the scrollLeft value to be set
+   */
+  static setNormalizedScrollLeft(scrollType, direction, element, scrollLeft) {
+    if (direction !== 'rtl' || !scrollType) {
+      element.scrollLeft = scrollLeft;
+      return;
+    }
+
+    switch (scrollType) {
+      case 'negative':
+        element.scrollLeft = element.clientWidth - element.scrollWidth + scrollLeft;
+        break;
+      case 'reverse':
+        element.scrollLeft = element.scrollWidth - element.clientWidth - scrollLeft;
+        break;
+      default:
+        element.scrollLeft = scrollLeft;
+        break;
+    }
+  }
+}
+
+export { DirHelper };

package/src/dir-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';
@@ -11,5 +11,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
 
 export declare class DirMixinClass {
-  protected readonly __isRTL: boolean;
+  protected __getNormalizedScrollLeft(element: Element | null): number;
+
+  protected __setNormalizedScrollLeft(element: Element | null, scrollLeft: number): void;
 }

package/src/dir-mixin.js

@@ -1,14 +1,27 @@
 /**
  * @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 { 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);
@@ -21,16 +34,6 @@ 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.
  *
@@ -59,12 +62,13 @@ export const DirMixin = (superClass) =>
       };
     }
 
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
+    /** @protected */
+    static finalize() {
+      super.finalize();
+
+      if (!scrollType) {
+        scrollType = DirHelper.detectScrollType();
+      }
     }
 
     /** @protected */
@@ -142,4 +146,22 @@ 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/disabled-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/disabled-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/dom-utils.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/
  */
 
@@ -23,8 +23,3 @@ 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

@@ -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/
  */
 
@@ -90,13 +90,3 @@ 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

@@ -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 '../custom_typings/vaadin-usage-statistics.js';

package/src/element-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 { setCancelSyntheticClickEvents } from '@polymer/polymer/lib/utils/settings.js';
@@ -15,20 +15,14 @@ import { DirMixin } from './dir-mixin.js';
 // for buttons that are based on `[role=button]` e.g vaadin-button.
 setCancelSyntheticClickEvents(false);
 
-if (!window.Vaadin) {
-  window.Vaadin = {};
-}
+window.Vaadin = window.Vaadin || {};
 
 /**
  * Array of Vaadin custom element classes that have been finalized.
  */
-if (!window.Vaadin.registrations) {
-  window.Vaadin.registrations = [];
-}
+window.Vaadin.registrations = window.Vaadin.registrations || [];
 
-if (!window.Vaadin.developmentModeCallback) {
-  window.Vaadin.developmentModeCallback = {};
-}
+window.Vaadin.developmentModeCallback = window.Vaadin.developmentModeCallback || {};
 
 window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
   usageStatistics();
@@ -45,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.2.16';
+      return '23.2.17';
     }
 
     /** @protected */

package/src/focus-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/focus-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';
@@ -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

@@ -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/focus-trap-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 { getFocusableElements, isElementFocused } from './focus-utils.js';
@@ -33,27 +33,6 @@ 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);
   }
@@ -152,4 +131,25 @@ 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

@@ -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/
  */