@vaadin/field-base 24.0.0-alpha1 → 24.0.0-alpha10

package/src/delegate-focus-mixin.js

@@ -1,228 +0,0 @@
-/**
- * @license
- * 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';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { TabindexMixin } from '@vaadin/component-base/src/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 - 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';
-
-/**
- * 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 - 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';
-
-/**
- * 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/shadow-focus-mixin.d.ts

@@ -1,23 +0,0 @@
-/**
- * @license
- * 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';
-import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
-import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-
-/**
- * A mixin to forward focus to an element in the shadow DOM.
- */
-export declare function ShadowFocusMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<DelegateFocusMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<KeyboardMixinClass> &
-  Constructor<TabindexMixinClass> &
-  T;

package/src/shadow-focus-mixin.js

@@ -1,97 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixin } from './delegate-focus-mixin.js';
-
-/**
- * A mixin to forward focus to an element in the shadow DOM.
- *
- * @polymerMixin
- * @mixes DelegateFocusMixin
- * @mixes KeyboardMixin
- */
-export const ShadowFocusMixin = (superClass) =>
-  class ShadowFocusMixinClass extends DelegateFocusMixin(KeyboardMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-        },
-      };
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`
-     * to prevent focusing the host element on Shift Tab.
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      // When focus moves with Shift + Tab, skip focusing the host element
-      // by focusing it before the default browser focus handling runs
-      if (!event.defaultPrevented && event.keyCode === 9 && event.shiftKey) {
-        HTMLElement.prototype.focus.apply(this);
-      }
-    }
-
-    /**
-     * Override method inherited from `FocusMixin`
-     * to support focusElement in Shadow DOM.
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldSetFocus(event) {
-      if (!this.disabled && this.focusElement) {
-        const path = event.composedPath();
-
-        // When focus moves to the host element itself, then delegate it to the focusElement
-        // This should only move focus when using keyboard navigation, for clicks we don't want to interfere,
-        // for example when the user tries to select some text
-        if (path[0] === this && this._keyboardActive) {
-          this.focusElement.focus();
-        }
-        if (path[0] === this || path.includes(this.focusElement)) {
-          return true;
-        }
-      }
-
-      return false;
-    }
-
-    /**
-     * Override an observer from `TabindexMixin`.
-     * Do not call super to remove tabindex attribute
-     * from host when disabled by setting undefined.
-     * @param {string} tabindex
-     * @protected
-     * @override
-     */
-    _tabindexChanged(tabindex) {
-      if (tabindex !== undefined) {
-        this.focusElement.tabIndex = tabindex;
-      }
-
-      if (this.disabled && tabindex) {
-        // If tabindex attribute was changed while component was disabled
-        if (tabindex !== -1) {
-          this._lastTabIndex = tabindex;
-        }
-        this.tabindex = undefined;
-      }
-    }
-  };

package/src/slot-target-controller.d.ts

@@ -1,31 +0,0 @@
-/**
- * @license
- * 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';
-
-export class SlotTargetController implements ReactiveController {
-  /**
-   * The source `<slot>` element to copy nodes from.
-   */
-  protected sourceSlot: HTMLSlotElement;
-
-  /**
-   * Function used to get a reference to slot target.
-   */
-  protected targetFactory: () => HTMLElement;
-
-  /**
-   * Function called after copying nodes to target.
-   */
-  protected copyCallback?: (nodes: HTMLElement[]) => void;
-
-  constructor(
-    sourceSlot: HTMLSlotElement,
-    targetFactory: () => HTMLElement,
-    copyCallback?: (nodes: HTMLElement[]) => void,
-  );
-
-  hostConnected(): void;
-}

package/src/slot-target-controller.js

@@ -1,123 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A controller to copy the content from a source slot to a target element.
- */
-export class SlotTargetController {
-  constructor(sourceSlot, targetFactory, callback) {
-    /**
-     * The source `<slot>` element to copy nodes from.
-     */
-    this.sourceSlot = sourceSlot;
-
-    /**
-     * Function used to get a reference to slot target.
-     */
-    this.targetFactory = targetFactory;
-
-    /**
-     * Function called after copying nodes to target.
-     */
-    this.copyCallback = callback;
-
-    if (sourceSlot) {
-      sourceSlot.addEventListener('slotchange', () => {
-        // Copy in progress, ignore this event.
-        if (this.__copying) {
-          this.__copying = false;
-        } else {
-          this.__checkAndCopyNodesToSlotTarget();
-        }
-      });
-    }
-  }
-
-  hostConnected() {
-    this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
-
-    // Ensure the content is up to date when host is connected
-    // to handle e.g. mutating text content while disconnected.
-    // Note, `hostConnected()` is called twice if the controller
-    // is initialized in `ready()` when using `ControllerMixin`.
-    if (!this.__copying) {
-      this.__checkAndCopyNodesToSlotTarget();
-    }
-  }
-
-  /**
-   * Copies every node from the source slot to the target element
-   * once the source slot' content is changed.
-   *
-   * @private
-   */
-  __checkAndCopyNodesToSlotTarget() {
-    this.__sourceSlotObserver.disconnect();
-
-    // Ensure slot target element is up to date.
-    const slotTarget = this.targetFactory();
-
-    if (!slotTarget) {
-      return;
-    }
-
-    // Remove any existing clones from the slot target
-    if (this.__slotTargetClones) {
-      this.__slotTargetClones.forEach((node) => {
-        if (node.parentElement === slotTarget) {
-          slotTarget.removeChild(node);
-        }
-      });
-      delete this.__slotTargetClones;
-    }
-
-    // Exclude whitespace text nodes
-    const nodes = this.sourceSlot
-      .assignedNodes({ flatten: true })
-      .filter((node) => !(node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ''));
-
-    if (nodes.length > 0) {
-      slotTarget.innerHTML = '';
-
-      // Ignore next slotchange
-      this.__copying = true;
-
-      this.__copyNodesToSlotTarget(nodes, slotTarget);
-    }
-  }
-
-  /**
-   * Copies the nodes to the target element.
-   *
-   * @param {!Array<!Node>} nodes
-   * @param {HTMLElement} slotTarget
-   * @private
-   */
-  __copyNodesToSlotTarget(nodes, slotTarget) {
-    this.__slotTargetClones = this.__slotTargetClones || [];
-
-    nodes.forEach((node) => {
-      // Clone the nodes and append the clones to the target
-      const clone = node.cloneNode(true);
-      this.__slotTargetClones.push(clone);
-
-      slotTarget.appendChild(clone);
-
-      // Observe all changes to the source node to have the clones updated
-      this.__sourceSlotObserver.observe(node, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true,
-      });
-    });
-
-    // Run callback e.g. to show a deprecation warning
-    if (typeof this.copyCallback === 'function') {
-      this.copyCallback(nodes);
-    }
-  }
-}