@vaadin/number-field - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/number-field",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-number-field",
@@ -28,9 +28,9 @@ "main": "vaadin-number-field.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha4",
-    "@vaadin/input-container": "^22.0.0-alpha4",
-    "@vaadin/text-field": "^22.0.0-alpha4",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/field-base": "^22.0.0-alpha5",
+    "@vaadin/input-container": "^22.0.0-alpha5",
+    "@vaadin/text-field": "^22.0.0-alpha5",
+    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
   },
@@ -45,3 +45,3 @@ "devDependencies": {
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

src/vaadin-number-field.d.ts

@@ -9,2 +9,3 @@ /**
 import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js';
+import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -69,3 +70,5 @@
  */
-declare class NumberField extends InputFieldMixin(InputSlotMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+declare class NumberField extends InputFieldMixin(
+  SlotStylesMixin(InputSlotMixin(ThemableMixin(ElementMixin(HTMLElement))))
+) {
   /**
@@ -72,0 +75,0 @@ * Set to true to display value increase/decrease controls.

src/vaadin-number-field.js

@@ -11,2 +11,3 @@ /**
 import { InputSlotMixin } from '@vaadin/field-base/src/input-slot-mixin.js';
+import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
@@ -60,3 +61,5 @@ import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
  */
-export class NumberField extends InputFieldMixin(InputSlotMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+export class NumberField extends InputFieldMixin(
+  SlotStylesMixin(InputSlotMixin(ThemableMixin(ElementMixin(PolymerElement))))
+) {
   static get is() {
@@ -91,11 +94,2 @@ return 'vaadin-number-field';
         }
-
-        /* TODO: provide alternatives for Safari */
-        :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-          direction: rtl;
-        }
-
-        :host([dir='rtl']:not([has-controls])) [part='input-field'] ::slotted(input)::placeholder {
-          text-align: left;
-        }
       </style>
@@ -198,2 +192,28 @@
 
+  /** @protected */
+  get slotStyles() {
+    const tag = this.localName;
+    return [
+      `
+        ${tag} input[type="number"]::-webkit-outer-spin-button,
+        ${tag} input[type="number"]::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        ${tag} input[type="number"] {
+          -moz-appearance: textfield;
+        }
+
+        ${tag}[dir='rtl'] input[type="number"]::placeholder {
+          direction: rtl;
+        }
+
+        ${tag}[dir='rtl']:not([has-controls]) input[type="number"]::placeholder {
+          text-align: left;
+        }
+      `
+    ];
+  }
+
   /**
@@ -200,0 +220,0 @@ * Used by `ClearButtonMixin` as a reference to the clear button element.

theme/lumo/vaadin-number-field-styles.js

@@ -8,41 +8,41 @@ /**
 import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
+import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
+import { inputFieldShared } from '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
 
-registerStyles(
-  'vaadin-number-field',
-  css`
-    :host {
-      width: 8em;
-    }
+const numberField = css`
+  :host {
+    width: 8em;
+  }
 
-    :host([has-controls]:not([theme~='align-right'])) ::slotted(input) {
-      text-align: center;
-    }
+  :host([has-controls]:not([theme~='align-right'])) ::slotted(input) {
+    text-align: center;
+  }
 
-    [part$='button'][disabled] {
-      opacity: 0.2;
-    }
+  [part$='button'][disabled] {
+    opacity: 0.2;
+  }
 
-    :host([has-controls]) [part='input-field'] {
-      padding: 0;
-    }
+  :host([has-controls]) [part='input-field'] {
+    padding: 0;
+  }
 
-    [part\$='button'] {
-      cursor: pointer;
-      font-size: var(--lumo-icon-size-s);
-      width: 1.6em;
-      height: 1.6em;
-    }
+  [part\$='button'] {
+    cursor: pointer;
+    font-size: var(--lumo-icon-size-s);
+    width: 1.6em;
+    height: 1.6em;
+  }
 
-    [part\$='button']::before {
-      margin-top: 0.2em;
-    }
+  [part\$='button']::before {
+    margin-top: 0.2em;
+  }
 
-    /* RTL specific styles */
-    :host([dir='rtl']) [part='input-field'] ::slotted(input) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-    }
-  `,
-  { moduleId: 'lumo-number-field', include: ['lumo-input-field-shared-styles', 'lumo-field-button'] }
-);
+  /* RTL specific styles */
+  :host([dir='rtl']) [part='input-field'] ::slotted(input) {
+    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+  }
+`;
+
+registerStyles('vaadin-number-field', [inputFieldShared, fieldButton, numberField], {
+  moduleId: 'lumo-number-field'
+});

theme/material/vaadin-number-field-styles.js

@@ -7,27 +7,27 @@ /**
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-material-styles/mixins/field-button.js';
-import '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
+import { fieldButton } from '@vaadin/vaadin-material-styles/mixins/field-button.js';
+import { inputFieldShared } from '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
 
-registerStyles(
-  'vaadin-number-field',
-  css`
-    :host {
-      width: 8em;
-    }
+const numberField = css`
+  :host {
+    width: 8em;
+  }
 
-    :host([has-controls]) ::slotted(input) {
-      text-align: center;
-    }
+  :host([has-controls]) ::slotted(input) {
+    text-align: center;
+  }
 
-    [part$='button'][disabled] {
-      opacity: 0.2;
-    }
+  [part$='button'][disabled] {
+    opacity: 0.2;
+  }
 
-    [part$='decrease-button'] {
-      cursor: pointer;
-      font-size: var(--material-body-font-size);
-      padding-bottom: 0.21em;
-    }
-  `,
-  { moduleId: 'material-number-field', include: ['material-input-field-shared-styles', 'material-field-button'] }
-);
+  [part$='decrease-button'] {
+    cursor: pointer;
+    font-size: var(--material-body-font-size);
+    padding-bottom: 0.21em;
+  }
+`;
+
+registerStyles('vaadin-number-field', [inputFieldShared, fieldButton, numberField], {
+  moduleId: 'material-number-field'
+});

No alert changes

Improved metrics

Total package byte prevSize

33545

increased by1.52%

Lines of code

611

increased by3.21%

Dependency changes

• Updated@vaadin/field-base@^22.0.0-alpha5

• Updated@vaadin/input-container@^22.0.0-alpha5

• Updated@vaadin/text-field@^22.0.0-alpha5

• Updated@vaadin/vaadin-element-mixin@^22.0.0-alpha5

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-themable-mixin@^22.0.0-alpha5