@vaadin/component-base 24.0.0-alpha1 → 24.0.0-alpha11

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": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

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/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/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;
 }

package/src/dir-mixin.js

@@ -1,9 +1,8 @@
 /**
  * @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.
@@ -17,8 +16,6 @@ function directionUpdater() {
   });
 }
 
-let scrollType;
-
 const directionObserver = new MutationObserver(directionUpdater);
 directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
 
@@ -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

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

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

@@ -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';