@vaadin/component-base 23.2.14 → 23.2.16

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

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

package/index.d.ts

@@ -8,5 +8,4 @@ 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,5 +7,4 @@ 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.14",
+  "version": "23.2.16",
   "publishConfig": {
     "access": "public"
   },
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "bf387396a1974ba0b1e652a9b8c4bbb2bc732ed2"
+  "gitHead": "57010013e59a3ecdc70ceef4377dbc3b1ac03fb3"
 }

package/src/a11y-announcer.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 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 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 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 - 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/active-mixin.js

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

package/src/async.d.ts

@@ -9,6 +9,7 @@
  */
 
 export interface AsyncInterface {
+  // eslint-disable-next-line @typescript-eslint/ban-types
   run(fn: Function, delay?: number): number;
   cancel(handle: number): void;
 }
@@ -39,6 +40,7 @@ declare namespace timeOut {
    *
    * @returns Handle used for canceling task
    */
+  // eslint-disable-next-line @typescript-eslint/ban-types
   function run(fn: Function, delay?: number): number;
 
   /**
@@ -103,6 +105,7 @@ 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,7 +27,6 @@ const microtaskCallbacks = [];
 let microtaskNodeContent = 0;
 let microtaskScheduled = false;
 const microtaskNode = document.createTextNode('');
-new window.MutationObserver(microtaskFlush).observe(microtaskNode, { characterData: true });
 
 function microtaskFlush() {
   microtaskScheduled = false;
@@ -48,6 +47,8 @@ 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 - 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/
  */
 
@@ -10,20 +10,20 @@ const testPlatform = (regexp) => regexp.test(navigator.platform);
 
 const testVendor = (regexp) => regexp.test(navigator.vendor);
 
-export const isAndroid = testUserAgent(/Android/);
+export const isAndroid = testUserAgent(/Android/u);
 
-export const isChrome = testUserAgent(/Chrome/) && testVendor(/Google Inc/);
+export const isChrome = testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
 
-export const isFirefox = testUserAgent(/Firefox/);
+export const isFirefox = testUserAgent(/Firefox/u);
 
 // IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
+export const isIPad = testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
 
-export const isIPhone = testPlatform(/^iPhone/);
+export const isIPhone = testPlatform(/^iPhone/u);
 
 export const isIOS = isIPhone || isIPad;
 
-export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
+export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/iu);
 
 export const isTouch = (() => {
   try {

package/src/controller-mixin.d.ts

@@ -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/controller-mixin.js

@@ -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/debounce.js

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

package/src/delegate-focus-mixin.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * 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';
+import type { DisabledMixinClass } from './disabled-mixin.js';
+import type { FocusMixinClass } from './focus-mixin.js';
+import type { TabindexMixinClass } from './tabindex-mixin.js';
+
+/**
+ * A mixin to forward focus to an element in the light DOM.
+ */
+export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass> &
+  T;
+
+export declare class DelegateFocusMixinClass {
+  /**
+   * Specify that this control should have input focus when the page loads.
+   */
+  autofocus: boolean;
+
+  /**
+   * A reference to the focusable element controlled by the mixin.
+   * It can be an input, textarea, button or any element with tabindex > -1.
+   *
+   * Any component implementing this mixin is expected to provide it
+   * by using `this._setFocusElement(input)` Polymer API.
+   */
+  readonly focusElement: HTMLElement | null | undefined;
+
+  protected _addFocusListeners(element: HTMLElement): void;
+
+  protected _removeFocusListeners(element: HTMLElement): void;
+
+  protected _focusElementChanged(element: HTMLElement, oldElement: HTMLElement): void;
+
+  protected _onBlur(event: FocusEvent): void;
+
+  protected _onFocus(event: FocusEvent): void;
+
+  protected _setFocusElement(element: HTMLElement): void;
+}

package/src/delegate-focus-mixin.js

@@ -0,0 +1,228 @@
+/**
+ * @license
+ * 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';
+import { FocusMixin } from './focus-mixin.js';
+import { TabindexMixin } from './tabindex-mixin.js';
+
+/**
+ * A mixin to forward focus to an element in the light DOM.
+ *
+ * @polymerMixin
+ * @mixes FocusMixin
+ * @mixes TabindexMixin
+ */
+export const DelegateFocusMixin = dedupingMixin(
+  (superclass) =>
+    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
+      static get properties() {
+        return {
+          /**
+           * Specify that this control should have input focus when the page loads.
+           */
+          autofocus: {
+            type: Boolean,
+          },
+
+          /**
+           * A reference to the focusable element controlled by the mixin.
+           * It can be an input, textarea, button or any element with tabindex > -1.
+           *
+           * Any component implementing this mixin is expected to provide it
+           * by using `this._setFocusElement(input)` Polymer API.
+           *
+           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
+           *
+           * @protected
+           * @type {!HTMLElement}
+           */
+          focusElement: {
+            type: Object,
+            readOnly: true,
+            observer: '_focusElementChanged',
+          },
+
+          /**
+           * Override the property from `TabIndexMixin`
+           * to ensure the `tabindex` attribute of the focus element
+           * will be restored to `0` after re-enabling the element.
+           *
+           * @protected
+           * @override
+           */
+          _lastTabIndex: {
+            value: 0,
+          },
+        };
+      }
+
+      constructor() {
+        super();
+
+        this._boundOnBlur = this._onBlur.bind(this);
+        this._boundOnFocus = this._onFocus.bind(this);
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+
+        if (this.autofocus && !this.disabled) {
+          requestAnimationFrame(() => {
+            this.focus();
+            this.setAttribute('focus-ring', '');
+          });
+        }
+      }
+
+      /**
+       * @protected
+       * @override
+       */
+      focus() {
+        if (!this.focusElement || this.disabled) {
+          return;
+        }
+
+        this.focusElement.focus();
+        this._setFocused(true);
+      }
+
+      /**
+       * @protected
+       * @override
+       */
+      blur() {
+        if (!this.focusElement) {
+          return;
+        }
+        this.focusElement.blur();
+        this._setFocused(false);
+      }
+
+      /**
+       * @protected
+       * @override
+       */
+      click() {
+        if (this.focusElement && !this.disabled) {
+          this.focusElement.click();
+        }
+      }
+
+      /** @protected */
+      _focusElementChanged(element, oldElement) {
+        if (element) {
+          element.disabled = this.disabled;
+          this._addFocusListeners(element);
+          this.__forwardTabIndex(this.tabindex);
+        } else if (oldElement) {
+          this._removeFocusListeners(oldElement);
+        }
+      }
+
+      /**
+       * @param {HTMLElement} element
+       * @protected
+       */
+      _addFocusListeners(element) {
+        element.addEventListener('blur', this._boundOnBlur);
+        element.addEventListener('focus', this._boundOnFocus);
+      }
+
+      /**
+       * @param {HTMLElement} element
+       * @protected
+       */
+      _removeFocusListeners(element) {
+        element.removeEventListener('blur', this._boundOnBlur);
+        element.removeEventListener('focus', this._boundOnFocus);
+      }
+
+      /**
+       * Focus event does not bubble, so we dispatch it manually
+       * on the host element to support adding focus listeners
+       * when the focusable element is placed in light DOM.
+       * @param {FocusEvent} event
+       * @protected
+       */
+      _onFocus(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new Event('focus'));
+      }
+
+      /**
+       * Blur event does not bubble, so we dispatch it manually
+       * on the host element to support adding blur listeners
+       * when the focusable element is placed in light DOM.
+       * @param {FocusEvent} event
+       * @protected
+       */
+      _onBlur(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new Event('blur'));
+      }
+
+      /**
+       * @param {Event} event
+       * @return {boolean}
+       * @protected
+       * @override
+       */
+      _shouldSetFocus(event) {
+        return event.target === this.focusElement;
+      }
+
+      /**
+       * @param {boolean} disabled
+       * @param {boolean} oldDisabled
+       * @protected
+       * @override
+       */
+      _disabledChanged(disabled, oldDisabled) {
+        super._disabledChanged(disabled, oldDisabled);
+
+        if (this.focusElement) {
+          this.focusElement.disabled = disabled;
+        }
+
+        if (disabled) {
+          this.blur();
+        }
+      }
+
+      /**
+       * Override an observer from `TabindexMixin`.
+       * Do not call super to remove tabindex attribute
+       * from the host after it has been forwarded.
+       * @param {string} tabindex
+       * @protected
+       * @override
+       */
+      _tabindexChanged(tabindex) {
+        this.__forwardTabIndex(tabindex);
+      }
+
+      /** @private */
+      __forwardTabIndex(tabindex) {
+        if (tabindex !== undefined && this.focusElement) {
+          this.focusElement.tabIndex = tabindex;
+
+          // Preserve tabindex="-1" on the host element
+          if (tabindex !== -1) {
+            this.tabindex = undefined;
+          }
+        }
+
+        if (this.disabled && tabindex) {
+          // If tabindex attribute was changed while component was disabled
+          if (tabindex !== -1) {
+            this._lastTabIndex = tabindex;
+          }
+          this.tabindex = undefined;
+        }
+      }
+    },
+);

package/src/delegate-state-mixin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A mixin to delegate properties and attributes to a target element.
+ */
+export declare function DelegateStateMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DelegateStateMixinClass> & T;
+
+export declare class DelegateStateMixinClass {
+  /**
+   * A target element to which attributes and properties are delegated.
+   */
+  stateTarget: HTMLElement | null;
+}

package/src/delegate-state-mixin.js

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A mixin to delegate properties and attributes to a target element.
+ *
+ * @polymerMixin
+ */
+export const DelegateStateMixin = dedupingMixin(
+  (superclass) =>
+    class DelegateStateMixinClass extends superclass {
+      static get properties() {
+        return {
+          /**
+           * A target element to which attributes and properties are delegated.
+           * @protected
+           */
+          stateTarget: {
+            type: Object,
+            observer: '_stateTargetChanged',
+          },
+        };
+      }
+
+      /**
+       * An array of the host attributes to delegate to the target element.
+       */
+      static get delegateAttrs() {
+        return [];
+      }
+
+      /**
+       * An array of the host properties to delegate to the target element.
+       */
+      static get delegateProps() {
+        return [];
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+
+        this._createDelegateAttrsObserver();
+        this._createDelegatePropsObserver();
+      }
+
+      /** @protected */
+      _stateTargetChanged(target) {
+        if (target) {
+          this._ensureAttrsDelegated();
+          this._ensurePropsDelegated();
+        }
+      }
+
+      /** @protected */
+      _createDelegateAttrsObserver() {
+        this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
+      }
+
+      /** @protected */
+      _createDelegatePropsObserver() {
+        this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
+      }
+
+      /** @protected */
+      _ensureAttrsDelegated() {
+        this.constructor.delegateAttrs.forEach((name) => {
+          this._delegateAttribute(name, this[name]);
+        });
+      }
+
+      /** @protected */
+      _ensurePropsDelegated() {
+        this.constructor.delegateProps.forEach((name) => {
+          this._delegateProperty(name, this[name]);
+        });
+      }
+
+      /** @protected */
+      _delegateAttrsChanged(...values) {
+        this.constructor.delegateAttrs.forEach((name, index) => {
+          this._delegateAttribute(name, values[index]);
+        });
+      }
+
+      /** @protected */
+      _delegatePropsChanged(...values) {
+        this.constructor.delegateProps.forEach((name, index) => {
+          this._delegateProperty(name, values[index]);
+        });
+      }
+
+      /** @protected */
+      _delegateAttribute(name, value) {
+        if (!this.stateTarget) {
+          return;
+        }
+
+        if (name === 'invalid') {
+          this._delegateAttribute('aria-invalid', value ? 'true' : false);
+        }
+
+        if (typeof value === 'boolean') {
+          this.stateTarget.toggleAttribute(name, value);
+        } else if (value) {
+          this.stateTarget.setAttribute(name, value);
+        } else {
+          this.stateTarget.removeAttribute(name);
+        }
+      }
+
+      /** @protected */
+      _delegateProperty(name, value) {
+        if (!this.stateTarget) {
+          return;
+        }
+
+        this.stateTarget[name] = value;
+      }
+    },
+);

package/src/dir-mixin.d.ts

@@ -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';
@@ -11,7 +11,5 @@ 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 __getNormalizedScrollLeft(element: Element | null): number;
-
-  protected __setNormalizedScrollLeft(element: Element | null, scrollLeft: number): void;
+  protected readonly __isRTL: boolean;
 }