@vaadin/field-base 22.0.0-alpha3 → 22.0.0-alpha7

package/src/field-aria-mixin.js

@@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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 { HelperTextMixin } from './helper-text-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
-
-const FieldAriaMixinImplementation = (superclass) =>
-  class FieldAriaMixinClass extends HelperTextMixin(ValidateMixin(superclass)) {
-    /** @protected */
-    get _ariaTarget() {
-      return this;
-    }
-
-    /** @protected */
-    get _ariaAttr() {
-      return 'aria-describedby';
-    }
-
-    static get observers() {
-      return ['_invalidChanged(invalid)'];
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this._updateAriaAttribute(this.invalid);
-    }
-
-    /** @protected */
-    _updateAriaAttribute(invalid) {
-      const attr = this._ariaAttr;
-
-      if (this._ariaTarget && attr) {
-        // For groups, add all IDs to aria-labelledby rather than aria-describedby -
-        // that should guarantee that it's announced when the group is entered.
-        const ariaIds = attr === 'aria-describedby' ? [this._helperId] : [this._labelId, this._helperId];
-
-        // Error message ID needs to be dynamically added / removed based on the validity
-        // Otherwise assistive technologies would announce the error, even if we hide it.
-        if (invalid) {
-          ariaIds.push(this._errorId);
-        }
-
-        this._ariaTarget.setAttribute(attr, ariaIds.join(' '));
-      }
-    }
-
-    /** @protected */
-    _invalidChanged(invalid) {
-      this._updateAriaAttribute(invalid);
-    }
-  };
-
-/**
- * A mixin to handle field ARIA attributes based on the label, error message and helper text.
- */
-export const FieldAriaMixin = dedupingMixin(FieldAriaMixinImplementation);

package/src/focus-mixin.d.ts

@@ -1,33 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to handle `focused` and `focus-ring` attributes based on focus.
- */
-declare function FocusMixin<T extends new (...args: any[]) => {}>(base: T): T & FocusMixinConstructor;
-
-interface FocusMixinConstructor {
-  new (...args: any[]): FocusMixin;
-}
-
-interface FocusMixin {
-  /**
-   * Override to change how focused and focus-ring attributes are set.
-   */
-  _setFocused(focused: boolean): void;
-
-  /**
-   * Override to define if the field receives focus based on the event.
-   */
-  _shouldSetFocus(event: FocusEvent): boolean;
-
-  /**
-   * Override to define if the field loses focus based on the event.
-   */
-  _shouldRemoveFocus(event: FocusEvent): boolean;
-}
-
-export { FocusMixinConstructor, FocusMixin };

package/src/focus-mixin.js

@@ -1,104 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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';
-
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
-
-// Listen for top-level keydown and mousedown events.
-// Use capture phase so we detect events even if they're handled.
-window.addEventListener(
-  'keydown',
-  () => {
-    keyboardActive = true;
-  },
-  { capture: true }
-);
-
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  { capture: true }
-);
-
-const FocusMixinImplementation = (superclass) =>
-  class FocusMixinClass extends superclass {
-    /** @protected */
-    ready() {
-      this.addEventListener('focusin', (e) => {
-        if (this._shouldSetFocus(e)) {
-          this._setFocused(true);
-        }
-      });
-
-      this.addEventListener('focusout', (e) => {
-        if (this._shouldRemoveFocus(e)) {
-          this._setFocused(false);
-        }
-      });
-
-      // 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.
-      super.ready();
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
-      // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-      if (this.hasAttribute('focused')) {
-        this._setFocused(false);
-      }
-    }
-
-    /**
-     * Override to change how focused and focus-ring attributes are set.
-     *
-     * @param {boolean} focused
-     * @protected
-     */
-    _setFocused(focused) {
-      this.toggleAttribute('focused', focused);
-
-      // focus-ring is true when the element was focused from the keyboard.
-      // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-      this.toggleAttribute('focus-ring', focused && keyboardActive);
-    }
-
-    /**
-     * Override to define if the field receives focus based on the event.
-     *
-     * @param {FocusEvent} event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldSetFocus(_event) {
-      return true;
-    }
-
-    /**
-     * Override to define if the field loses focus based on the event.
-     *
-     * @param {FocusEvent} event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldRemoveFocus(_event) {
-      return true;
-    }
-  };
-
-/**
- * A mixin to handle `focused` and `focus-ring` attributes based on focus.
- */
-export const FocusMixin = dedupingMixin(FocusMixinImplementation);

package/src/forward-input-props-mixin.d.ts

@@ -1,41 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { InputConstraintsMixin } from './input-constraints-mixin.js';
-
-/**
- * A mixin to forward properties to the input element.
- */
-declare function ForwardInputPropsMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & ForwardInputPropsMixinConstructor;
-
-interface ForwardInputPropsMixinConstructor {
-  new (...args: any[]): ForwardInputPropsMixin;
-}
-
-interface ForwardInputPropsMixin extends InputConstraintsMixin {
-  /**
-   * The name of this field.
-   */
-  name: string;
-
-  /**
-   * A hint to the user of what can be entered in the field.
-   */
-  placeholder: string;
-
-  /**
-   * When present, it specifies that the field is read-only.
-   */
-  readonly: boolean;
-
-  /**
-   * The text usually displayed in a tooltip popup when the mouse is over the field.
-   */
-  title: string;
-}
-
-export { ForwardInputPropsMixinConstructor, ForwardInputPropsMixin };

package/src/forward-input-props-mixin.js

@@ -1,110 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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 { InputConstraintsMixin } from './input-constraints-mixin.js';
-
-const ForwardInputPropsMixinImplementation = (superclass) =>
-  class ForwardInputPropsMixinClass extends InputConstraintsMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * The name of this field.
-         */
-        name: {
-          type: String
-        },
-
-        /**
-         * A hint to the user of what can be entered in the field.
-         */
-        placeholder: {
-          type: String
-        },
-
-        /**
-         * When present, it specifies that the field is read-only.
-         */
-        readonly: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true
-        },
-
-        /**
-         * The text usually displayed in a tooltip popup when the mouse is over the field.
-         */
-        title: {
-          type: String
-        }
-      };
-    }
-
-    static get forwardProps() {
-      return ['name', 'type', 'placeholder', 'readonly', 'required', 'invalid', 'title'];
-    }
-
-    /** @protected */
-    ready() {
-      // Create observer dynamically to allow subclasses to override forwardProps
-      // Note, this needs to be done before calling `super.ready()` to propagate changes
-      // to the validation constraints, e.g. when setting `required` property to `false`,
-      // before the observer created by `InputConstraintsMixin` to validate properly.
-      this._createMethodObserver(`_forwardPropsChanged(${this.constructor.forwardProps.join(', ')})`);
-
-      super.ready();
-    }
-
-    /** @protected */
-    _inputElementChanged(input) {
-      super._inputElementChanged(input);
-
-      if (input) {
-        // Propagate initially defined properties to the slotted input
-        this._propagateHostAttributes(
-          this.constructor.forwardProps.map((attr) => this[attr] || this.getAttribute(attr))
-        );
-      }
-    }
-
-    /** @private */
-    _forwardPropsChanged(...attributesValues) {
-      this._propagateHostAttributes(attributesValues);
-    }
-
-    /** @private */
-    _propagateHostAttributes(attributesValues) {
-      const input = this.inputElement;
-      const attributeNames = this.constructor.forwardProps;
-
-      attributeNames.forEach((attr, index) => {
-        const value = attributesValues[index];
-        if (attr === 'invalid') {
-          this._setOrToggleAttribute(attr, value, input);
-          this._setOrToggleAttribute('aria-invalid', value ? 'true' : false, input);
-        } else {
-          this._setOrToggleAttribute(attr, value, input);
-        }
-      });
-    }
-
-    /** @protected */
-    _setOrToggleAttribute(name, value, node) {
-      if (!name || !node) {
-        return;
-      }
-
-      if (value) {
-        node.setAttribute(name, typeof value === 'boolean' ? '' : value);
-      } else {
-        node.removeAttribute(name);
-      }
-    }
-  };
-
-/**
- * A mixin to forward properties to the input element.
- */
-export const ForwardInputPropsMixin = dedupingMixin(ForwardInputPropsMixinImplementation);

package/src/helper-text-mixin.d.ts

@@ -1,24 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { SlotMixin } from './slot-mixin.js';
-
-/**
- * A mixin to provide helper text via corresponding property or named slot.
- */
-declare function HelperTextMixin<T extends new (...args: any[]) => {}>(base: T): T & HelperTextMixinConstructor;
-
-interface HelperTextMixinConstructor {
-  new (...args: any[]): HelperTextMixin;
-}
-
-interface HelperTextMixin extends SlotMixin {
-  /**
-   * String used for the helper text.
-   */
-  helperText: string;
-}
-
-export { HelperTextMixinConstructor, HelperTextMixin };

package/src/helper-text-mixin.js

@@ -1,109 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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 { SlotMixin } from './slot-mixin.js';
-
-const HelperTextMixinImplementation = (superclass) =>
-  class HelperTextMixinClass extends SlotMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * String used for the helper text.
-         * @attr {string} helper-text
-         */
-        helperText: {
-          type: String,
-          observer: '_helperTextChanged'
-        }
-      };
-    }
-
-    get slots() {
-      return {
-        ...super.slots,
-        helper: () => {
-          const helper = document.createElement('div');
-          helper.textContent = this.helperText;
-          return helper;
-        }
-      };
-    }
-
-    /** @protected */
-    get _helperNode() {
-      return this._getDirectSlotChild('helper');
-    }
-
-    constructor() {
-      super();
-
-      // Ensure every instance has unique ID
-      const uniqueId = (HelperTextMixinClass._uniqueId = 1 + HelperTextMixinClass._uniqueId || 0);
-      this._helperId = `helper-${this.localName}-${uniqueId}`;
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      if (this._helperNode) {
-        this._currentHelper = this._helperNode;
-        this._helperNode.id = this._helperId;
-
-        this._applyCustomHelper();
-      }
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.__helperSlot = this.shadowRoot.querySelector('[name="helper"]');
-      this.__helperSlot.addEventListener('slotchange', this.__onHelperSlotChange.bind(this));
-    }
-
-    /** @private */
-    __onHelperSlotChange() {
-      // Check fot slotted element node that is not the one created by this mixin.
-      const customHelper = this.__helperSlot
-        .assignedElements({ flatten: true })
-        .find((node) => node !== this._currentHelper);
-
-      if (customHelper) {
-        customHelper.id = this._helperId;
-
-        if (this._currentHelper.isConnected) {
-          this._currentHelper.remove();
-        }
-
-        this._applyCustomHelper();
-
-        this._currentHelper = customHelper;
-      }
-    }
-
-    /** @protected */
-    _applyCustomHelper() {
-      const helper = this._helperNode.textContent;
-      if (helper !== this.helperText) {
-        this.helperText = helper;
-      }
-    }
-
-    /** @protected */
-    _helperTextChanged(helper) {
-      if (this._helperNode) {
-        this._helperNode.textContent = helper;
-      }
-
-      this.toggleAttribute('has-helper', Boolean(helper));
-    }
-  };
-
-/**
- * A mixin to provide helper text via corresponding property or named slot.
- */
-export const HelperTextMixin = dedupingMixin(HelperTextMixinImplementation);

package/src/input-slot-mixin.d.ts

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { DelegatesFocusMixin } from './delegate-focus-mixin.js';
-import { SlotMixin } from './slot-mixin.js';
-import { InputMixin } from './input-mixin.js';
-
-/**
- * A mixin to add `<input>` element to the corresponding named slot.
- */
-declare function InputSlotMixin<T extends new (...args: any[]) => {}>(base: T): T & InputSlotMixinConstructor;
-
-interface InputSlotMixinConstructor {
-  new (...args: any[]): InputSlotMixin;
-}
-
-interface InputSlotMixin extends DelegatesFocusMixin, InputMixin, SlotMixin {
-  /**
-   * String used to define input type.
-   */
-  readonly type: string;
-}
-
-export { InputSlotMixinConstructor, InputSlotMixin };

package/src/input-slot-mixin.js

@@ -1,71 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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 { DelegateFocusMixin } from './delegate-focus-mixin.js';
-import { InputMixin } from './input-mixin.js';
-import { SlotMixin } from './slot-mixin.js';
-
-const InputSlotMixinImplementation = (superclass) =>
-  class InputSlotMixinClass extends DelegateFocusMixin(InputMixin(SlotMixin(superclass))) {
-    static get properties() {
-      /**
-       * String used to define input type.
-       */
-      return {
-        type: {
-          type: String,
-          readOnly: true
-        }
-      };
-    }
-
-    get slots() {
-      return {
-        ...super.slots,
-        input: () => {
-          const native = document.createElement('input');
-          const value = this.getAttribute('value');
-          if (value) {
-            native.setAttribute('value', value);
-          }
-          const name = this.getAttribute('name');
-          if (name) {
-            native.setAttribute('name', name);
-          }
-          if (this.type) {
-            native.setAttribute('type', this.type);
-          }
-          return native;
-        }
-      };
-    }
-
-    constructor() {
-      super();
-
-      // Ensure every instance has unique ID
-      const uniqueId = (InputSlotMixinClass._uniqueId = 1 + InputSlotMixinClass._uniqueId || 0);
-      this._inputId = `${this.localName}-${uniqueId}`;
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      const inputNode = this._getDirectSlotChild('input');
-      if (inputNode) {
-        inputNode.id = this._inputId;
-
-        this._setInputElement(inputNode);
-        this._setFocusElement(inputNode);
-      }
-    }
-  };
-
-/**
- * A mixin to add `<input>` element to the corresponding named slot.
- */
-export const InputSlotMixin = dedupingMixin(InputSlotMixinImplementation);

package/src/slot-mixin.d.ts

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-declare function SlotMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotMixinConstructor;
-
-interface SlotMixinConstructor {
-  new (...args: any[]): SlotMixin;
-}
-
-interface SlotMixin {
-  /**
-   * List of named slots to initialize.
-   */
-  readonly slots: Record<string, () => HTMLElement>;
-}
-
-export { SlotMixinConstructor, SlotMixin };

package/src/slot-mixin.js

@@ -1,55 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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';
-
-const SlotMixinImplementation = (superclass) =>
-  class SlotMixinClass extends superclass {
-    /**
-     * List of named slots to initialize.
-     */
-    get slots() {
-      return {};
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-      this._connectSlotMixin();
-    }
-
-    /** @private */
-    _connectSlotMixin() {
-      if (this.__isConnectedSlotMixin) {
-        return;
-      }
-
-      Object.keys(this.slots).forEach((slotName) => {
-        // Ignore labels of nested components, if any
-        const hasContent = this._getDirectSlotChild(slotName) !== undefined;
-
-        if (!hasContent) {
-          const slotFactory = this.slots[slotName];
-          const slotContent = slotFactory();
-          if (slotContent instanceof Element) {
-            slotContent.setAttribute('slot', slotName);
-            this.appendChild(slotContent);
-          }
-        }
-      });
-
-      this.__isConnectedSlotMixin = true;
-    }
-
-    /** @protected */
-    _getDirectSlotChild(slotName) {
-      return Array.from(this.children).find((el) => el.slot === slotName);
-    }
-  };
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-export const SlotMixin = dedupingMixin(SlotMixinImplementation);

package/src/tabindex-mixin.d.ts

@@ -1,29 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { DisabledMixin } from './disabled-mixin.js';
-
-/**
- * A mixin to provide the `tabindex` attribute.
- *
- * By default, the attribute is set to 0 that makes the element focusable.
- *
- * The attribute is removed whenever the user disables the element
- * and restored with the last known value once the element is enabled again.
- */
-declare function TabindexMixin<T extends new (...args: any[]) => {}>(base: T): T & TabindexMixinConstructor;
-
-interface TabindexMixinConstructor {
-  new (...args: any[]): TabindexMixin;
-}
-
-interface TabindexMixin extends DisabledMixin {
-  /**
-   * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-   */
-  tabindex: number | undefined | null;
-}
-
-export { TabindexMixinConstructor, TabindexMixin };