@vaadin/component-base 23.2.16 → 23.2.18

package/src/delegate-focus-mixin.js

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

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

@@ -1,125 +0,0 @@
-/**
- * @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-utils.d.ts

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

@@ -1,36 +0,0 @@
-/**
- * @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/keyboard-direction-mixin.d.ts

@@ -1,41 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 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 { KeyboardMixinClass } from './keyboard-mixin.js';
-
-/**
- * A mixin for navigating items with keyboard.
- */
-export declare function KeyboardDirectionMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<KeyboardDirectionMixinClass> & Constructor<KeyboardMixinClass> & T;
-
-export declare class KeyboardDirectionMixinClass {
-  protected readonly focused: Element | null;
-
-  protected readonly _vertical: boolean;
-
-  /**
-   * Returns index of the next item that satisfies the given condition,
-   * based on the index of the current item and a numeric increment.
-   */
-  protected _getAvailableIndex(
-    items: Element[],
-    index: number,
-    increment: number,
-    condition: (item: Element) => boolean,
-  ): number;
-
-  /**
-   * Focus the item at given index. Override this method to add custom logic.
-   */
-  protected _focus(index: number, navigating: boolean): void;
-
-  /**
-   * Focus the given item. Override this method to add custom logic.
-   */
-  protected _focusItem(item: Element, navigating: boolean): void;
-}

package/src/keyboard-direction-mixin.js

@@ -1,192 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { isElementFocused, isElementHidden } from './focus-utils.js';
-import { KeyboardMixin } from './keyboard-mixin.js';
-
-/**
- * A mixin for navigating items with keyboard.
- *
- * @polymerMixin
- * @mixes KeyboardMixin
- */
-export const KeyboardDirectionMixin = (superclass) =>
-  class KeyboardDirectionMixinClass extends KeyboardMixin(superclass) {
-    /**
-     * @return {Element | null}
-     * @protected
-     */
-    get focused() {
-      return (this._getItems() || []).find(isElementFocused);
-    }
-
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    get _vertical() {
-      return true;
-    }
-
-    /** @protected */
-    focus() {
-      const items = this._getItems();
-      if (Array.isArray(items)) {
-        const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
-        if (idx >= 0) {
-          items[idx].focus();
-        }
-      }
-    }
-
-    /**
-     * Get the list of items participating in keyboard navigation.
-     * By default, it treats all the light DOM children as items.
-     * Override this method to provide custom list of elements.
-     *
-     * @return {Element[]}
-     * @protected
-     */
-    _getItems() {
-      return Array.from(this.children);
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     *
-     * @param {!KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (event.metaKey || event.ctrlKey) {
-        return;
-      }
-
-      const { key } = event;
-      const items = this._getItems() || [];
-      const currentIdx = items.indexOf(this.focused);
-
-      let idx;
-      let increment;
-
-      const isRTL = !this._vertical && this.getAttribute('dir') === 'rtl';
-      const dirIncrement = isRTL ? -1 : 1;
-
-      if (this.__isPrevKey(key)) {
-        increment = -dirIncrement;
-        idx = currentIdx - dirIncrement;
-      } else if (this.__isNextKey(key)) {
-        increment = dirIncrement;
-        idx = currentIdx + dirIncrement;
-      } else if (key === 'Home') {
-        increment = 1;
-        idx = 0;
-      } else if (key === 'End') {
-        increment = -1;
-        idx = items.length - 1;
-      }
-
-      idx = this._getAvailableIndex(items, idx, increment, (item) => !isElementHidden(item));
-
-      if (idx >= 0) {
-        event.preventDefault();
-        this._focus(idx, true);
-      }
-    }
-
-    /**
-     * @param {string} key
-     * @return {boolean}
-     * @private
-     */
-    __isPrevKey(key) {
-      return this._vertical ? key === 'ArrowUp' : key === 'ArrowLeft';
-    }
-
-    /**
-     * @param {string} key
-     * @return {boolean}
-     * @private
-     */
-    __isNextKey(key) {
-      return this._vertical ? key === 'ArrowDown' : key === 'ArrowRight';
-    }
-
-    /**
-     * Focus the item at given index. Override this method to add custom logic.
-     *
-     * @param {number} index
-     * @param {boolean} navigating
-     * @protected
-     */
-    _focus(index, navigating = false) {
-      const items = this._getItems();
-
-      this._focusItem(items[index], navigating);
-    }
-
-    /**
-     * Focus the given item. Override this method to add custom logic.
-     *
-     * @param {Element} item
-     * @param {boolean} navigating
-     * @protected
-     */
-    _focusItem(item) {
-      if (item) {
-        item.focus();
-
-        // Generally, the items are expected to implement `FocusMixin`
-        // that would set this attribute based on the `keydown` event.
-        // We set it manually to handle programmatic focus() calls.
-        item.setAttribute('focus-ring', '');
-      }
-    }
-
-    /**
-     * Returns index of the next item that satisfies the given condition,
-     * based on the index of the current item and a numeric increment.
-     *
-     * @param {Element[]} items - array of items to iterate over
-     * @param {number} index - index of the current item
-     * @param {number} increment - numeric increment, can be either 1 or -1
-     * @param {Function} condition - function used to check the item
-     * @return {number}
-     * @protected
-     */
-    _getAvailableIndex(items, index, increment, condition) {
-      const totalItems = items.length;
-      let idx = index;
-      for (let i = 0; typeof idx === 'number' && i < totalItems; i += 1, idx += increment || 1) {
-        if (idx < 0) {
-          idx = totalItems - 1;
-        } else if (idx >= totalItems) {
-          idx = 0;
-        }
-
-        const item = items[idx];
-
-        if (!item.hasAttribute('disabled') && this.__isMatchingItem(item, condition)) {
-          return idx;
-        }
-      }
-      return -1;
-    }
-
-    /**
-     * Returns true if the item matches condition.
-     *
-     * @param {Element} item - item to check
-     * @param {Function} condition - function used to check the item
-     * @return {number}
-     * @private
-     */
-    __isMatchingItem(item, condition) {
-      return typeof condition === 'function' ? condition(item) : true;
-    }
-  };