@vaadin/field-base 22.0.1 → 22.0.5

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2021 Vaadin Ltd.
+   Copyright 2021 - 2022 Vaadin Ltd..
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "22.0.1",
+  "version": "22.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/component-base": "^22.0.5",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -39,5 +39,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "3e1990867670f3de2dec6fa1200d945623b2710c"
 }

package/src/checked-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/checked-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * 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';

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

@@ -1,18 +1,23 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { TabindexMixinClass } from '@vaadin/component-base/src/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
-): T & Constructor<DelegateFocusMixinClass> & Constructor<DisabledMixinClass> & Constructor<FocusMixinClass>;
+): T &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass>;
 
 export declare class DelegateFocusMixinClass {
   /**

package/src/delegate-focus-mixin.js

@@ -1,22 +1,22 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * 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 { DisabledMixin } from '@vaadin/component-base/src/disabled-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 DisabledMixin
  * @mixes FocusMixin
+ * @mixes TabindexMixin
  */
 export const DelegateFocusMixin = dedupingMixin(
   (superclass) =>
-    class DelegateFocusMixinClass extends FocusMixin(DisabledMixin(superclass)) {
+    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
       static get properties() {
         return {
           /**
@@ -40,6 +40,19 @@ export const DelegateFocusMixin = dedupingMixin(
             type: Object,
             readOnly: true,
             observer: '_focusElementChanged'
+          },
+
+          /**
+           * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+           *
+           * By default, the host element does not have tabindex attribute. Instead, `focusElement` should have it.
+           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
+           *
+           * @protected
+           */
+          tabindex: {
+            type: Number,
+            value: undefined
           }
         };
       }
@@ -103,6 +116,7 @@ export const DelegateFocusMixin = dedupingMixin(
         if (element) {
           element.disabled = this.disabled;
           this._addFocusListeners(element);
+          this.__forwardTabIndex(this.tabindex);
         } else if (oldElement) {
           this._removeFocusListeners(oldElement);
         }
@@ -162,10 +176,12 @@ export const DelegateFocusMixin = dedupingMixin(
 
       /**
        * @param {boolean} disabled
+       * @param {boolean} oldDisabled
        * @protected
+       * @override
        */
-      _disabledChanged(disabled) {
-        super._disabledChanged(disabled);
+      _disabledChanged(disabled, oldDisabled) {
+        super._disabledChanged(disabled, oldDisabled);
 
         if (this.focusElement) {
           this.focusElement.disabled = disabled;
@@ -175,5 +191,37 @@ export const DelegateFocusMixin = dedupingMixin(
           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,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/delegate-state-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * 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';

package/src/error-controller.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the error message node content.
+ */
+export class ErrorController extends SlotController {
+  /**
+   * ID attribute value set on the error message element.
+   */
+  readonly errorId: string;
+
+  /**
+   * String used for the error message text content.
+   */
+  protected errorMessage: string | null | undefined;
+
+  /**
+   * Set to true when the host element is invalid.
+   */
+  protected invalid: boolean;
+
+  /**
+   * Set the error message element text content.
+   */
+  setErrorMessage(errorMessage: string | null | undefined): void;
+
+  /**
+   * Set invalid state for detecting whether to show error message.
+   */
+  setInvalid(invalid: boolean): void;
+}

package/src/error-controller.js

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the error message node content.
+ */
+export class ErrorController extends SlotController {
+  constructor(host) {
+    super(
+      host,
+      'error-message',
+      () => document.createElement('div'),
+      (_host, node) => {
+        this.__updateErrorId(node);
+
+        this.__updateHasError();
+      }
+    );
+  }
+
+  /**
+   * ID attribute value set on the error message element.
+   *
+   * @return {string}
+   */
+  get errorId() {
+    return this.node && this.node.id;
+  }
+
+  /**
+   * Set the error message element text content.
+   *
+   * @param {string} errorMessage
+   */
+  setErrorMessage(errorMessage) {
+    this.errorMessage = errorMessage;
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Set invalid state for detecting whether to show error message.
+   *
+   * @param {boolean} invalid
+   */
+  setInvalid(invalid) {
+    this.invalid = invalid;
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Override to initialize the newly added custom label.
+   *
+   * @param {Node} errorNode
+   * @protected
+   * @override
+   */
+  initCustomNode(errorNode) {
+    this.__updateErrorId(errorNode);
+
+    // Save the custom error message content on the host.
+    if (errorNode.textContent && !this.errorMessage) {
+      this.errorMessage = errorNode.textContent.trim();
+    }
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Override to cleanup label node when it's removed.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  teardownNode(node) {
+    let errorNode = this.getSlotChild();
+
+    // If custom error was removed, restore the default one.
+    if (!errorNode && node !== this.defaultNode) {
+      errorNode = this.attachDefaultNode();
+
+      // Run initializer to update default label and ID.
+      this.initNode(errorNode);
+    }
+
+    this.__updateHasError();
+  }
+
+  /**
+   * @param {string} error
+   * @private
+   */
+  __isNotEmpty(error) {
+    return Boolean(error && error.trim() !== '');
+  }
+
+  /** @private */
+  __updateHasError() {
+    const errorNode = this.node;
+    const hasError = Boolean(this.invalid && this.__isNotEmpty(this.errorMessage));
+
+    // Update both default and custom error message node.
+    if (errorNode) {
+      errorNode.textContent = hasError ? this.errorMessage : '';
+      errorNode.hidden = !hasError;
+
+      // Role alert will make the error message announce immediately
+      // as the field becomes invalid
+      if (hasError) {
+        errorNode.setAttribute('role', 'alert');
+      } else {
+        errorNode.removeAttribute('role');
+      }
+    }
+
+    this.host.toggleAttribute('has-error-message', hasError);
+  }
+
+  /**
+   * @param {HTMLElement} errorNode
+   * @private
+   */
+  __updateErrorId(errorNode) {
+    if (!errorNode.id) {
+      errorNode.id = this.defaultId;
+    }
+  }
+}

package/src/field-aria-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/field-aria-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/field-mixin.d.ts

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import { SlotMixinClass } from '@vaadin/component-base/src/slot-mixin.js';
 import { LabelMixinClass } from './label-mixin.js';
 import { ValidateMixinClass } from './validate-mixin.js';
 
@@ -17,6 +18,7 @@ export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<SlotMixinClass> &
   Constructor<ValidateMixinClass>;
 
 export declare class FieldMixinClass {