@vaadin/field-base - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

index.d.ts

@@ -0,1 +1,2 @@
+export { ActiveMixin } from './src/active-mixin.js';
 export { AriaLabelMixin } from './src/aria-label-mixin.js';
@@ -5,6 +6,7 @@ export { CharLengthMixin } from './src/char-length-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
+export { DelegateInputStateMixin } from './src/delegate-input-state-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DisabledMixin } from './src/disabled-mixin.js';
 export { FieldAriaMixin } from './src/field-aria-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
-export { ForwardInputPropsMixin } from './src/forward-input-props-mixin.js';
 export { HelperTextMixin } from './src/helper-text-mixin.js';
@@ -14,9 +16,10 @@ export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputSlotMixin } from './src/input-slot-mixin.js';
+export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
 export { SlotMixin } from './src/slot-mixin.js';
+export { SlotStylesMixin } from './src/slot-styles-mixin.js';
+export { TabindexMixin } from './src/tabindex-mixin.js';
 export { TextAreaSlotMixin } from './src/text-area-slot-mixin.js';
 export { TextFieldMixin } from './src/text-field-mixin.js';
 export { ValidateMixin } from './src/validate-mixin.js';
-export { TabindexMixin } from './src/tabindex-mixin.js';
-export { ActiveMixin } from './src/active-mixin.js';

index.js

@@ -0,1 +1,2 @@
+export { ActiveMixin } from './src/active-mixin.js';
 export { AriaLabelMixin } from './src/aria-label-mixin.js';
@@ -5,6 +6,7 @@ export { CharLengthMixin } from './src/char-length-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
+export { DelegateInputStateMixin } from './src/delegate-input-state-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DisabledMixin } from './src/disabled-mixin.js';
 export { FieldAriaMixin } from './src/field-aria-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
-export { ForwardInputPropsMixin } from './src/forward-input-props-mixin.js';
 export { HelperTextMixin } from './src/helper-text-mixin.js';
@@ -14,9 +16,10 @@ export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputSlotMixin } from './src/input-slot-mixin.js';
+export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
 export { SlotMixin } from './src/slot-mixin.js';
+export { SlotStylesMixin } from './src/slot-styles-mixin.js';
+export { TabindexMixin } from './src/tabindex-mixin.js';
 export { TextAreaSlotMixin } from './src/text-area-slot-mixin.js';
 export { TextFieldMixin } from './src/text-field-mixin.js';
 export { ValidateMixin } from './src/validate-mixin.js';
-export { TabindexMixin } from './src/tabindex-mixin.js';
-export { ActiveMixin } from './src/active-mixin.js';

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "Vaadin field base mixins",
@@ -35,3 +35,3 @@ "main": "index.js",
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

src/active-mixin.d.ts

@@ -7,2 +7,3 @@ /**
 import { DisabledMixin } from './disabled-mixin.js';
+import { KeyboardMixin } from './keyboard-mixin.js';
 
@@ -24,4 +25,4 @@ /**
 
-interface ActiveMixin extends DisabledMixin {}
+interface ActiveMixin extends DisabledMixin, KeyboardMixin {}
 
 export { ActiveMixinConstructor, ActiveMixin };

src/active-mixin.js

@@ -8,6 +8,7 @@ /**
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { KeyboardMixin } from './keyboard-mixin.js';
 import { DisabledMixin } from './disabled-mixin.js';
 
 const ActiveMixinImplementation = (superclass) =>
-  class ActiveMixinClass extends DisabledMixin(GestureEventListeners(superclass)) {
+  class ActiveMixinClass extends DisabledMixin(GestureEventListeners(KeyboardMixin(superclass))) {
     /**
@@ -23,3 +24,3 @@ * An array of activation keys.
     get _activeKeys() {
-      return ['Enter', ' '];
+      return [' '];
     }
@@ -31,33 +32,14 @@
 
-      // POINTERDOWN
       this._addEventListenerToNode(this, 'down', () => {
         if (this.disabled) return;
 
-        this.setAttribute('active', '');
+        this._setActive(true);
       });
 
-      // POINTERUP
       this._addEventListenerToNode(this, 'up', () => {
-        this.removeAttribute('active');
+        this._setActive(false);
       });
 
-      // KEYDOWN
-      this.addEventListener('keydown', (event) => {
-        if (this.disabled) return;
-
-        if (this._activeKeys.includes(event.key)) {
-          this.setAttribute('active', '');
-        }
-      });
-
-      // KEYUP
-      this.addEventListener('keyup', (event) => {
-        if (this._activeKeys.includes(event.key)) {
-          this.removeAttribute('active');
-        }
-      });
-
-      // BLUR
       this.addEventListener('blur', () => {
-        this.removeAttribute('active');
+        this._setActive(false);
       });
@@ -74,4 +56,44 @@ }
       // The case reproduces for `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-      this.removeAttribute('active');
+      this._setActive(false);
     }
+
+    /**
+     * Sets the `active` attribute on the element if an activation key is pressed.
+     *
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      if (!this.disabled && this._activeKeys.includes(event.key)) {
+        this._setActive(true);
+      }
+    }
+
+    /**
+     * Removes the `active` attribute from the element if the activation key is released.
+     *
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyUp(event) {
+      super._onKeyUp(event);
+
+      if (this._activeKeys.includes(event.key)) {
+        this._setActive(false);
+      }
+    }
+
+    /**
+     * Toggles the `active` attribute on the element.
+     *
+     * @param {boolean} active
+     * @protected
+     */
+    _setActive(active) {
+      this.toggleAttribute('active', active);
+    }
   };
@@ -78,0 +100,0 @@

src/char-length-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ForwardInputPropsMixin } from './forward-input-props-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
@@ -19,3 +19,3 @@ /**
 
-interface CharLengthMixin extends ForwardInputPropsMixin {
+interface CharLengthMixin extends InputConstraintsMixin {
   /**
@@ -22,0 +22,0 @@ * Maximum number of characters (in Unicode code points) that the user can enter.

src/char-length-mixin.js

@@ -7,6 +7,6 @@ /**
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { ForwardInputPropsMixin } from './forward-input-props-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 const CharLengthMixinImplementation = (superclass) =>
-  class CharLengthMixinClass extends ForwardInputPropsMixin(superclass) {
+  class CharLengthMixinClass extends InputConstraintsMixin(superclass) {
     static get properties() {
@@ -30,4 +30,4 @@ return {
 
-    static get forwardProps() {
-      return [...super.forwardProps, 'maxlength', 'minlength'];
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'maxlength', 'minlength'];
     }
@@ -34,0 +34,0 @@

src/clear-button-mixin.d.ts

@@ -7,2 +7,3 @@ /**
 import { InputMixin } from './input-mixin.js';
+import { KeyboardMixin } from './keyboard-mixin.js';
 
@@ -18,3 +19,3 @@ /**
 
-interface ClearButtonMixin extends InputMixin {
+interface ClearButtonMixin extends InputMixin, KeyboardMixin {
   /**
@@ -21,0 +22,0 @@ * Set to true to display the clear icon which clears the input.

src/clear-button-mixin.js

@@ -8,5 +8,6 @@ /**
 import { InputMixin } from './input-mixin.js';
+import { KeyboardMixin } from './keyboard-mixin.js';
 
 const ClearButtonMixinImplementation = (superclass) =>
-  class ClearButtonMixinClass extends InputMixin(superclass) {
+  class ClearButtonMixinClass extends InputMixin(KeyboardMixin(superclass)) {
     static get properties() {
@@ -46,4 +47,2 @@ return {
 
-      this.addEventListener('keydown', (e) => this._onKeyDown(e));
-
       if (this.clearElement) {
@@ -67,6 +66,9 @@ this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
     /**
-     * @param {Event} event
+     * @param {KeyboardEvent} event
      * @protected
+     * @override
      */
     _onKeyDown(event) {
+      super._onKeyDown(event);
+
       if (event.key === 'Escape' && this.clearButtonVisible && this._clearOnEsc) {
@@ -73,0 +75,0 @@ const dispatchChange = !!this.value;

src/disabled-mixin.js

@@ -43,2 +43,14 @@ /**
     }
+
+    /**
+     * Overrides the default element `click` method in order to prevent
+     * firing the `click` event when the element is disabled.
+     *
+     * @override
+     */
+    click() {
+      if (!this.disabled) {
+        super.click();
+      }
+    }
   };
@@ -45,0 +57,0 @@

src/field-aria-mixin.js

@@ -27,4 +27,4 @@ /**
     /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    ready() {
+      super.ready();
 
@@ -31,0 +31,0 @@ this._updateAriaAttribute(this.invalid, this._helperId);

src/input-constraints-mixin.d.ts

@@ -6,4 +6,3 @@ /**
  */
-import { InputMixin } from './input-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
+import { DelegateInputStateMixin } from './delegate-input-state-mixin.js';
 
@@ -21,3 +20,3 @@ /**
 
-interface InputConstraintsMixin extends InputMixin, ValidateMixin {
+interface InputConstraintsMixin extends DelegateInputStateMixin {
   /**
@@ -24,0 +23,0 @@ * Returns true if the current input value satisfies all constraints (if any).

src/input-constraints-mixin.js

@@ -7,7 +7,16 @@ /**
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { InputMixin } from './input-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
+import { DelegateInputStateMixin } from './delegate-input-state-mixin.js';
 
 const InputConstraintsMixinImplementation = (superclass) =>
-  class InputConstraintsMixinClass extends ValidateMixin(InputMixin(superclass)) {
+  class InputConstraintsMixinClass extends DelegateInputStateMixin(superclass) {
+    /**
+     * An array of attributes which participate in the input validation.
+     * Changing these attributes will cause the input to re-validate.
+     *
+     * IMPORTANT: The attributes should be properly delegated to the input element from the host
+     * which can be achieved by listing them in the list of delegated attributes (see `DelegateStateMixin.delegateAttrs`).
+     * Otherwise, the input validation will not work correctly.
+     *
+     * Note, the `required` attribute is already delegated in the parent `DelegateInputStateMixin`.
+     */
     static get constraints() {
@@ -14,0 +23,0 @@ return ['required'];

src/input-field-mixin.d.ts

@@ -9,4 +9,4 @@ /**
 import { DelegateFocusMixin } from './delegate-focus-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
 import { FieldAriaMixin } from './field-aria-mixin.js';
-import { ForwardInputPropsMixin } from './forward-input-props-mixin.js';
 
@@ -27,3 +27,3 @@ /**
     FieldAriaMixin,
-    ForwardInputPropsMixin {
+    InputConstraintsMixin {
   /**
@@ -30,0 +30,0 @@ * Whether the value of the control can be automatically completed by the browser.

src/input-field-mixin.js

@@ -13,7 +13,7 @@ /**
 import { FieldAriaMixin } from './field-aria-mixin.js';
-import { ForwardInputPropsMixin } from './forward-input-props-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 const InputFieldMixinImplementation = (superclass) =>
   class InputFieldMixinClass extends ClearButtonMixin(
-    FieldAriaMixin(ForwardInputPropsMixin(AriaLabelMixin(DelegateFocusMixin(superclass))))
+    FieldAriaMixin(InputConstraintsMixin(AriaLabelMixin(DelegateFocusMixin(superclass))))
   ) {
@@ -65,4 +65,4 @@ static get properties() {
 
-    static get forwardProps() {
-      return [...super.forwardProps, 'autocapitalize', 'autocomplete', 'autocorrect'];
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
@@ -83,5 +83,14 @@
     /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    ready() {
+      super.ready();
 
+      // Lumo theme defines a max-height transition for the "error-message"
+      // part on invalid state change.
+      const errorPart = this.shadowRoot.querySelector('[part="error-message"]');
+      if (errorPart) {
+        errorPart.addEventListener('transitionend', () => {
+          this.__observeOffsetHeight();
+        });
+      }
+
       if (this.inputElement) {
@@ -100,16 +109,2 @@ // Discard value set on the custom slotted input.
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // Lumo theme defines a max-height transition for the "error-message"
-      // part on invalid state change.
-      const errorPart = this.shadowRoot.querySelector('[part="error-message"]');
-      if (errorPart) {
-        errorPart.addEventListener('transitionend', () => {
-          this.__observeOffsetHeight();
-        });
-      }
-    }
-
     // Workaround for https://github.com/Polymer/polymer/issues/5259
@@ -116,0 +111,0 @@ get __data() {

src/input-slot-mixin.js

@@ -55,4 +55,4 @@ /**
     /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    ready() {
+      super.ready();
 
@@ -59,0 +59,0 @@ const inputNode = this._getDirectSlotChild('input');

src/pattern-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ForwardInputPropsMixin } from './forward-input-props-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
@@ -18,3 +18,3 @@ /**
 
-interface PatternMixin extends ForwardInputPropsMixin {
+interface PatternMixin extends InputConstraintsMixin {
   /**
@@ -21,0 +21,0 @@ * A regular expression that the value is checked against.

src/pattern-mixin.js

@@ -9,6 +9,6 @@ /**
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { ForwardInputPropsMixin } from './forward-input-props-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 const PatternMixinImplementation = (superclass) =>
-  class PatternMixinClass extends ForwardInputPropsMixin(superclass) {
+  class PatternMixinClass extends InputConstraintsMixin(superclass) {
     static get properties() {
@@ -35,4 +35,4 @@ return {
 
-    static get forwardProps() {
-      return [...super.forwardProps, 'pattern'];
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'pattern'];
     }
@@ -39,0 +39,0 @@

src/slot-mixin.js

@@ -18,4 +18,4 @@ /**
     /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    ready() {
+      super.ready();
       this._connectSlotMixin();
@@ -26,6 +26,2 @@ }
     _connectSlotMixin() {
-      if (this.__isConnectedSlotMixin) {
-        return;
-      }
-
       Object.keys(this.slots).forEach((slotName) => {
@@ -44,4 +40,2 @@ // Ignore labels of nested components, if any
       });
-
-      this.__isConnectedSlotMixin = true;
     }
@@ -48,0 +42,0 @@

src/tabindex-mixin.js

@@ -44,4 +44,4 @@ /**
      */
-    _disabledChanged(disabled) {
-      super._disabledChanged(disabled);
+    _disabledChanged(disabled, oldDisabled) {
+      super._disabledChanged(disabled, oldDisabled);
 
@@ -51,3 +51,3 @@ if (disabled) {
         this.tabindex = -1;
-      } else {
+      } else if (oldDisabled) {
         this.tabindex = this.__lastTabIndex;
@@ -54,0 +54,0 @@ }

src/text-area-slot-mixin.js

@@ -40,4 +40,4 @@ /**
     /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    ready() {
+      super.ready();
 
@@ -44,0 +44,0 @@ const textArea = this._getDirectSlotChild('textarea');

src/validate-mixin.js

@@ -72,4 +72,4 @@ /**
     /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    ready() {
+      super.ready();
 
@@ -76,0 +76,0 @@ if (this._errorNode) {

No alert changes

Improved metrics

Total package byte prevSize

94824

increased by9.89%

Number of package files

53

increased by12.77%

Lines of code

2490

increased by12.06%

No dependency changes