@vaadin/field-base 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha1",
+    "@vaadin/component-base": "23.1.0-alpha4",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.1"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/checked-mixin.d.ts

@@ -12,7 +12,7 @@ import { InputMixinClass } from './input-mixin.js';
  * A mixin to manage the checked state.
  */
 export declare function CheckedMixin<T extends Constructor<object>>(
-  base: T
+  base: T,
 ): T &
   Constructor<CheckedMixinClass> &
   Constructor<DelegateStateMixinClass> &

package/src/checked-mixin.js

@@ -29,8 +29,8 @@ export const CheckedMixin = dedupingMixin(
             type: Boolean,
             value: false,
             notify: true,
-            reflectToAttribute: true
-          }
+            reflectToAttribute: true,
+          },
         };
       }
 
@@ -50,5 +50,5 @@ export const CheckedMixin = dedupingMixin(
       _toggleChecked(checked) {
         this.checked = checked;
       }
-    }
+    },
 );

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

@@ -12,7 +12,7 @@ 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
+  base: T,
 ): T &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/delegate-focus-mixin.js

@@ -23,7 +23,7 @@ export const DelegateFocusMixin = dedupingMixin(
            * Specify that this control should have input focus when the page loads.
            */
           autofocus: {
-            type: Boolean
+            type: Boolean,
           },
 
           /**
@@ -33,27 +33,28 @@ export const DelegateFocusMixin = dedupingMixin(
            * 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'
+            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`.
+           * 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
            */
-          tabindex: {
-            type: Number,
-            value: undefined
-          }
+          _lastTabIndex: {
+            value: 0,
+          },
         };
       }
 
@@ -218,10 +219,10 @@ export const DelegateFocusMixin = dedupingMixin(
         if (this.disabled && tabindex) {
           // If tabindex attribute was changed while component was disabled
           if (tabindex !== -1) {
-            this.__lastTabIndex = tabindex;
+            this._lastTabIndex = tabindex;
           }
           this.tabindex = undefined;
         }
       }
-    }
+    },
 );

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

@@ -9,7 +9,7 @@ import { 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
+  base: T,
 ): T & Constructor<DelegateStateMixinClass>;
 
 export declare class DelegateStateMixinClass {

package/src/delegate-state-mixin.js

@@ -21,8 +21,8 @@ export const DelegateStateMixin = dedupingMixin(
            */
           stateTarget: {
             type: Object,
-            observer: '_stateTargetChanged'
-          }
+            observer: '_stateTargetChanged',
+          },
         };
       }
 
@@ -121,5 +121,5 @@ export const DelegateStateMixin = dedupingMixin(
 
         this.stateTarget[name] = value;
       }
-    }
+    },
 );

package/src/error-controller.js

@@ -18,7 +18,7 @@ export class ErrorController extends SlotController {
         this.__updateErrorId(node);
 
         this.__updateHasError();
-      }
+      },
     );
   }
 

package/src/field-mixin.d.ts

@@ -13,7 +13,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  * A mixin to provide common field logic: label, error message and helper text.
  */
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
-  superclass: T
+  superclass: T,
 ): T &
   Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &

package/src/field-mixin.js

@@ -28,7 +28,7 @@ export const FieldMixin = (superclass) =>
          */
         ariaTarget: {
           type: Object,
-          observer: '_ariaTargetChanged'
+          observer: '_ariaTargetChanged',
         },
 
         /**
@@ -38,7 +38,7 @@ export const FieldMixin = (superclass) =>
          */
         errorMessage: {
           type: String,
-          observer: '_errorMessageChanged'
+          observer: '_errorMessageChanged',
         },
 
         /**
@@ -47,11 +47,11 @@ export const FieldMixin = (superclass) =>
          */
         helperText: {
           type: String,
-          observer: '_helperTextChanged'
+          observer: '_helperTextChanged',
         },
 
         /** @protected */
-        _helperId: String
+        _helperId: String,
       };
     }
 

package/src/helper-controller.js

@@ -151,7 +151,7 @@ export class HelperController extends SlotController {
       attributeFilter: ['id'],
       childList: true,
       subtree: true,
-      characterData: true
+      characterData: true,
     });
   }
 
@@ -167,9 +167,9 @@ export class HelperController extends SlotController {
       new CustomEvent('helper-changed', {
         detail: {
           hasHelper,
-          node: this.node
-        }
-      })
+          node: this.node,
+        },
+      }),
     );
   }
 

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

@@ -13,7 +13,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  * A mixin to combine multiple input validation constraints.
  */
 export declare function InputConstraintsMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/input-constraints-mixin.js

@@ -108,11 +108,11 @@ export const InputConstraintsMixin = dedupingMixin(
         this.dispatchEvent(
           new CustomEvent('change', {
             detail: {
-              sourceEvent: event
+              sourceEvent: event,
             },
             bubbles: event.bubbles,
-            cancelable: event.cancelable
-          })
+            cancelable: event.cancelable,
+          }),
         );
       }
 
@@ -121,5 +121,5 @@ export const InputConstraintsMixin = dedupingMixin(
         // 0 is valid for `minlength` and `maxlength`
         return Boolean(constraint) || constraint === 0;
       }
-    }
+    },
 );

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

@@ -20,7 +20,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  * A mixin to provide shared logic for the editable form input controls.
  */
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T &
   Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &

package/src/input-control-mixin.js

@@ -19,7 +19,7 @@ import { InputConstraintsMixin } from './input-constraints-mixin.js';
  */
 export const InputControlMixin = (superclass) =>
   class InputControlMixinClass extends DelegateFocusMixin(
-    InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass)))
+    InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass))),
   ) {
     static get properties() {
       return {
@@ -28,7 +28,7 @@ export const InputControlMixin = (superclass) =>
          */
         autoselect: {
           type: Boolean,
-          value: false
+          value: false,
         },
 
         /**
@@ -38,7 +38,7 @@ export const InputControlMixin = (superclass) =>
         clearButtonVisible: {
           type: Boolean,
           reflectToAttribute: true,
-          value: false
+          value: false,
         },
 
         /**
@@ -46,7 +46,7 @@ export const InputControlMixin = (superclass) =>
          */
         name: {
           type: String,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /**
@@ -54,7 +54,7 @@ export const InputControlMixin = (superclass) =>
          */
         placeholder: {
           type: String,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /**
@@ -63,7 +63,7 @@ export const InputControlMixin = (superclass) =>
         readonly: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /**
@@ -71,8 +71,8 @@ export const InputControlMixin = (superclass) =>
          */
         title: {
           type: String,
-          reflectToAttribute: true
-        }
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -156,11 +156,11 @@ export const InputControlMixin = (superclass) =>
       this.dispatchEvent(
         new CustomEvent('change', {
           detail: {
-            sourceEvent: event
+            sourceEvent: event,
           },
           bubbles: event.bubbles,
-          cancelable: event.cancelable
-        })
+          cancelable: event.cancelable,
+        }),
       );
     }
 

package/src/input-controller.js

@@ -27,10 +27,10 @@ export class InputController extends SlotController {
         host._inputId = `${host.localName}-${uniqueId}`;
         node.id = host._inputId;
 
-        if (typeof callback == 'function') {
+        if (typeof callback === 'function') {
           callback(node);
         }
-      }
+      },
     );
   }
 }

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

@@ -21,7 +21,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  * A mixin to provide logic for vaadin-text-field and related components.
  */
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T &
   Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &

package/src/input-field-mixin.js

@@ -21,7 +21,7 @@ export const InputFieldMixin = (superclass) =>
          * https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete
          */
         autocomplete: {
-          type: String
+          type: String,
         },
 
         /**
@@ -32,7 +32,7 @@ export const InputFieldMixin = (superclass) =>
          * off: Disable autocorrection.
          */
         autocorrect: {
-          type: String
+          type: String,
         },
 
         /**
@@ -45,7 +45,7 @@ export const InputFieldMixin = (superclass) =>
          * none: No capitalization.
          */
         autocapitalize: {
-          type: String
+          type: String,
         },
 
         /**
@@ -61,8 +61,8 @@ export const InputFieldMixin = (superclass) =>
          */
         _enabledCharPattern: {
           type: String,
-          observer: '_enabledCharPatternChanged'
-        }
+          observer: '_enabledCharPatternChanged',
+        },
       };
     }
 
@@ -238,8 +238,8 @@ export const InputFieldMixin = (superclass) =>
     /** @private */
     _enabledCharPatternChanged(charPattern) {
       if (charPattern) {
-        this.__enabledCharRegExp = new RegExp('^' + charPattern + '$');
-        this.__enabledTextRegExp = new RegExp('^' + charPattern + '*$');
+        this.__enabledCharRegExp = new RegExp(`^${charPattern}$`);
+        this.__enabledTextRegExp = new RegExp(`^${charPattern}*$`);
       }
     }
   };

package/src/input-mixin.js

@@ -31,7 +31,7 @@ export const InputMixin = dedupingMixin(
           inputElement: {
             type: Object,
             readOnly: true,
-            observer: '_inputElementChanged'
+            observer: '_inputElementChanged',
           },
 
           /**
@@ -40,7 +40,7 @@ export const InputMixin = dedupingMixin(
            */
           type: {
             type: String,
-            readOnly: true
+            readOnly: true,
           },
 
           /**
@@ -50,8 +50,8 @@ export const InputMixin = dedupingMixin(
             type: String,
             value: '',
             observer: '_valueChanged',
-            notify: true
-          }
+            notify: true,
+          },
         };
       }
 
@@ -105,7 +105,7 @@ export const InputMixin = dedupingMixin(
           return;
         }
 
-        if (value != undefined) {
+        if (value != null) {
           this.inputElement.value = value;
         } else {
           this.inputElement.value = '';
@@ -176,5 +176,5 @@ export const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
-    }
+    },
 );

package/src/label-controller.js

@@ -22,7 +22,7 @@ export class LabelController extends SlotController {
         this.__updateDefaultLabel(this.label);
 
         this.__observeLabel(node);
-      }
+      },
     );
   }
 
@@ -138,7 +138,7 @@ export class LabelController extends SlotController {
       attributeFilter: ['id'],
       childList: true,
       subtree: true,
-      characterData: true
+      characterData: true,
     });
   }
 
@@ -154,9 +154,9 @@ export class LabelController extends SlotController {
       new CustomEvent('label-changed', {
         detail: {
           hasLabel,
-          node: this.node
-        }
-      })
+          node: this.node,
+        },
+      }),
     );
   }
 

package/src/label-mixin.d.ts

@@ -11,7 +11,7 @@ import { LabelController } from './label-controller.js';
  * A mixin to provide label via corresponding property or named slot.
  */
 export declare function LabelMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<LabelMixinClass> & Constructor<SlotMixinClass>;
 
 export declare class LabelMixinClass {

package/src/label-mixin.js

@@ -24,8 +24,8 @@ export const LabelMixin = dedupingMixin(
            */
           label: {
             type: String,
-            observer: '_labelChanged'
-          }
+            observer: '_labelChanged',
+          },
         };
       }
 
@@ -50,5 +50,5 @@ export const LabelMixin = dedupingMixin(
       _labelChanged(label) {
         this._labelController.setLabel(label);
       }
-    }
+    },
 );

package/src/pattern-mixin.d.ts

@@ -14,7 +14,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  * A mixin to provide `pattern` and `preventInvalidInput` properties.
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/pattern-mixin.js

@@ -22,7 +22,7 @@ export const PatternMixin = (superclass) =>
          * The pattern must match the entire value, not just some subset.
          */
         pattern: {
-          type: String
+          type: String,
         },
 
         /**
@@ -31,8 +31,8 @@ export const PatternMixin = (superclass) =>
          * @attr {boolean} prevent-invalid-input
          */
         preventInvalidInput: {
-          type: Boolean
-        }
+          type: Boolean,
+        },
       };
     }
 

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

@@ -14,7 +14,7 @@ import { 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
+  base: T,
 ): T &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/shadow-focus-mixin.js

@@ -20,12 +20,13 @@ export const ShadowFocusMixin = (superClass) =>
         /**
          * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
          *
+         * @override
          * @protected
          */
         tabindex: {
           type: Number,
-          value: 0
-        }
+          value: 0,
+        },
       };
     }
 
@@ -88,7 +89,7 @@ export const ShadowFocusMixin = (superClass) =>
       if (this.disabled && tabindex) {
         // If tabindex attribute was changed while component was disabled
         if (tabindex !== -1) {
-          this.__lastTabIndex = tabindex;
+          this._lastTabIndex = tabindex;
         }
         this.tabindex = undefined;
       }

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

@@ -10,7 +10,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
  * This is useful e.g. to hide native `<input type="number">` controls.
  */
 export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<SlotStylesMixinClass>;
 
 export declare class SlotStylesMixinClass {

package/src/slot-styles-mixin.js

@@ -72,5 +72,5 @@ export const SlotStylesMixin = dedupingMixin(
           }
         });
       }
-    }
+    },
 );

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

@@ -9,7 +9,7 @@ export class SlotTargetController implements ReactiveController {
   constructor(
     sourceSlot: HTMLSlotElement,
     targetFactory: () => HTMLElement,
-    copyCallback?: (nodes: HTMLElement[]) => void
+    copyCallback?: (nodes: HTMLElement[]) => void,
   );
 
   hostConnected(): void;

package/src/slot-target-controller.js

@@ -73,7 +73,7 @@ export class SlotTargetController {
     // Exclude whitespace text nodes
     const nodes = this.sourceSlot
       .assignedNodes({ flatten: true })
-      .filter((node) => !(node.nodeType == Node.TEXT_NODE && node.textContent.trim() === ''));
+      .filter((node) => !(node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ''));
 
     if (nodes.length > 0) {
       slotTarget.innerHTML = '';
@@ -107,7 +107,7 @@ export class SlotTargetController {
         attributes: true,
         childList: true,
         subtree: true,
-        characterData: true
+        characterData: true,
       });
     });
 

package/src/text-area-controller.js

@@ -30,10 +30,10 @@ export class TextAreaController extends SlotController {
         host._textareaId = `${host.localName}-${uniqueId}`;
         node.id = host._textareaId;
 
-        if (typeof callback == 'function') {
+        if (typeof callback === 'function') {
           callback(node);
         }
-      }
+      },
     );
   }
 }

package/src/validate-mixin.js

@@ -22,7 +22,7 @@ export const ValidateMixin = dedupingMixin(
             type: Boolean,
             reflectToAttribute: true,
             notify: true,
-            value: false
+            value: false,
           },
 
           /**
@@ -30,8 +30,8 @@ export const ValidateMixin = dedupingMixin(
            */
           required: {
             type: Boolean,
-            reflectToAttribute: true
-          }
+            reflectToAttribute: true,
+          },
         };
       }
 
@@ -52,5 +52,5 @@ export const ValidateMixin = dedupingMixin(
       checkValidity() {
         return !this.required || !!this.value;
       }
-    }
+    },
 );