@vaadin/custom-field - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/custom-field",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-custom-field",
@@ -28,13 +28,13 @@ "main": "vaadin-custom-field.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha4",
-    "@vaadin/text-area": "^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/text-area": "^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"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/email-field": "^22.0.0-alpha4",
-    "@vaadin/password-field": "^22.0.0-alpha4",
+    "@vaadin/email-field": "^22.0.0-alpha5",
+    "@vaadin/password-field": "^22.0.0-alpha5",
     "@vaadin/testing-helpers": "^0.2.1",
@@ -46,3 +46,3 @@ "sinon": "^9.2.1"
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

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

@@ -11,129 +11,129 @@ /**
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
+import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
 
-registerStyles(
-  'vaadin-custom-field',
-  css`
-    :host {
-      --lumo-text-field-size: var(--lumo-size-m);
-      color: var(--lumo-body-text-color);
-      font-size: var(--lumo-font-size-m);
-      /* align with text-field height + vertical paddings */
-      line-height: calc(var(--lumo-text-field-size) + 2 * var(--lumo-space-xs));
-      font-family: var(--lumo-font-family);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-tap-highlight-color: transparent;
-      padding: 0;
-    }
+const customField = css`
+  :host {
+    --lumo-text-field-size: var(--lumo-size-m);
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-m);
+    /* align with text-field height + vertical paddings */
+    line-height: calc(var(--lumo-text-field-size) + 2 * var(--lumo-space-xs));
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: 0;
+  }
 
-    :host::before {
-      margin-top: var(--lumo-space-xs);
-      height: var(--lumo-text-field-size);
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: center;
-    }
+  :host::before {
+    margin-top: var(--lumo-space-xs);
+    height: var(--lumo-text-field-size);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
 
-    /* TODO: remove when the following components are updated to use new indicator:
-      combo-box, date-picker, time-picker, date-time-picker, select. */
-    [part='label']::after {
-      display: none;
-    }
+  /* TODO: remove when the following components are updated to use new indicator:
+  combo-box, date-picker, time-picker, date-time-picker, select. */
+  [part='label']::after {
+    display: none;
+  }
 
-    /* align with text-field label */
-    :host([has-label]) [part='label'] {
-      padding-bottom: calc(0.5em - var(--lumo-space-xs));
-    }
+  /* align with text-field label */
+  :host([has-label]) [part='label'] {
+    padding-bottom: calc(0.5em - var(--lumo-space-xs));
+  }
 
-    :host(:not([has-label])) [part='label'],
-    :host(:not([has-label]))::before {
-      display: none;
-    }
+  :host(:not([has-label])) [part='label'],
+  :host(:not([has-label]))::before {
+    display: none;
+  }
 
-    /* align with text-field error message */
-    :host([invalid]) [part='error-message']:not(:empty)::before {
-      height: calc(0.4em - var(--lumo-space-xs));
-    }
+  /* align with text-field error message */
+  :host([invalid]) [part='error-message']:not(:empty)::before {
+    height: calc(0.4em - var(--lumo-space-xs));
+  }
 
-    :host([focused]:not([readonly]):not([disabled])) [part='label'] {
-      color: var(--lumo-primary-text-color);
-    }
+  :host([focused]:not([readonly]):not([disabled])) [part='label'] {
+    color: var(--lumo-primary-text-color);
+  }
 
-    :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
-    :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
-      color: var(--lumo-body-text-color);
-    }
+  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
+  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
 
-    :host([has-helper]) [part='helper-text']::before {
-      content: '';
-      display: block;
-      height: 0.4em;
-    }
+  :host([has-helper]) [part='helper-text']::before {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
 
-    [part='helper-text'] {
-      display: block;
-      color: var(--lumo-secondary-text-color);
-      font-size: var(--lumo-font-size-xs);
-      line-height: var(--lumo-line-height-xs);
-      margin-left: calc(var(--lumo-border-radius-m) / 4);
-      transition: color 0.2s;
-    }
+  [part='helper-text'] {
+    display: block;
+    color: var(--lumo-secondary-text-color);
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    transition: color 0.2s;
+  }
 
-    /* Helper text position */
-    :host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
-      display: none;
-    }
+  /* Helper text position */
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
+    display: none;
+  }
 
-    :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
-      content: '';
-      display: block;
-      height: 0.4em;
-    }
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
 
-    :host([has-helper][theme~='helper-above-field']) [part='label'] {
-      order: 0;
-      padding-bottom: 0.4em;
-    }
+  :host([has-helper][theme~='helper-above-field']) [part='label'] {
+    order: 0;
+    padding-bottom: 0.4em;
+  }
 
-    :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
-      order: 1;
-    }
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
+    order: 1;
+  }
 
-    :host([has-helper][theme~='helper-above-field']) .inputs-wrapper {
-      order: 2;
-    }
+  :host([has-helper][theme~='helper-above-field']) .inputs-wrapper {
+    order: 2;
+  }
 
-    :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
-      order: 3;
-    }
+  :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
+    order: 3;
+  }
 
-    /* Touch device adjustment */
-    @media (pointer: coarse) {
-      :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
-        color: var(--lumo-secondary-text-color);
-      }
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
     }
+  }
 
-    /* Disabled */
-    :host([disabled]) [part='label'] {
-      color: var(--lumo-disabled-text-color);
-      -webkit-text-fill-color: var(--lumo-disabled-text-color);
-    }
+  /* Disabled */
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
 
-    /* Small theme */
-    :host([theme~='small']) {
-      font-size: var(--lumo-font-size-s);
-      --lumo-text-field-size: var(--lumo-size-s);
-    }
+  /* Small theme */
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-text-field-size: var(--lumo-size-s);
+  }
 
-    :host([theme~='small'][has-label]) [part='label'] {
-      font-size: var(--lumo-font-size-xs);
-    }
+  :host([theme~='small'][has-label]) [part='label'] {
+    font-size: var(--lumo-font-size-xs);
+  }
 
-    :host([theme~='small'][has-label]) [part='error-message'] {
-      font-size: var(--lumo-font-size-xxs);
-    }
-  `,
-  { moduleId: 'lumo-custom-field', include: ['lumo-required-field'] }
-);
+  :host([theme~='small'][has-label]) [part='error-message'] {
+    font-size: var(--lumo-font-size-xxs);
+  }
+`;
+
+registerStyles('vaadin-custom-field', [requiredField, customField], {
+  moduleId: 'lumo-custom-field'
+});

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

@@ -9,64 +9,64 @@ /**
 import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-material-styles/mixins/required-field.js';
+import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
 
-registerStyles(
-  'vaadin-custom-field',
-  css`
-    :host {
-      display: inline-flex;
-      position: relative;
-      margin-bottom: 8px;
-      outline: none;
-      color: var(--material-body-text-color);
-      font-size: var(--material-body-font-size);
-      font-family: var(--material-font-family);
-      line-height: 48px;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
+const customField = css`
+  :host {
+    display: inline-flex;
+    position: relative;
+    margin-bottom: 8px;
+    outline: none;
+    color: var(--material-body-text-color);
+    font-size: var(--material-body-font-size);
+    font-family: var(--material-font-family);
+    line-height: 48px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-    /* TODO: remove when the following components are updated to use new indicator:
-      combo-box, date-picker, time-picker, date-time-picker, select. */
-    [part='label']::after {
-      display: none;
-    }
+  /* TODO: remove when the following components are updated to use new indicator:
+  combo-box, date-picker, time-picker, date-time-picker, select. */
+  [part='label']::after {
+    display: none;
+  }
 
-    /* align with text-field label */
-    :host([has-label]) {
-      padding-top: 16px;
-    }
+  /* align with text-field label */
+  :host([has-label]) {
+    padding-top: 16px;
+  }
 
-    /* align with text-field error message */
-    [part='error-message']:not(:empty),
-    :host([has-helper]) [part='helper-text'] {
-      margin-top: -8px;
-    }
+  /* align with text-field error message */
+  [part='error-message']:not(:empty),
+  :host([has-helper]) [part='helper-text'] {
+    margin-top: -8px;
+  }
 
-    :host([disabled]) [part='label'] {
-      color: var(--material-disabled-text-color);
-      -webkit-text-fill-color: var(--material-disabled-text-color);
-    }
+  :host([disabled]) [part='label'] {
+    color: var(--material-disabled-text-color);
+    -webkit-text-fill-color: var(--material-disabled-text-color);
+  }
 
-    :host([focused]:not([invalid])) [part='label'] {
-      color: var(--material-primary-text-color);
-    }
+  :host([focused]:not([invalid])) [part='label'] {
+    color: var(--material-primary-text-color);
+  }
 
-    /* According to material theme guidelines, helper text should be hidden when error message is set and input is invalid */
-    :host([has-helper][invalid][has-error-message]) [part='helper-text'] {
-      display: none;
-    }
+  /* According to material theme guidelines, helper text should be hidden when error message is set and input is invalid */
+  :host([has-helper][invalid][has-error-message]) [part='helper-text'] {
+    display: none;
+  }
 
-    :host([has-helper]) [part='helper-text']::before {
-      content: '';
-      display: block;
-      height: 6px;
-    }
+  :host([has-helper]) [part='helper-text']::before {
+    content: '';
+    display: block;
+    height: 6px;
+  }
 
-    [part='helper-text'] {
-      font-size: 0.75em;
-      line-height: 1;
-      color: var(--material-secondary-text-color);
-    }
-  `,
-  { moduleId: 'material-custom-field', include: ['material-required-field'] }
-);
+  [part='helper-text'] {
+    font-size: 0.75em;
+    line-height: 1;
+    color: var(--material-secondary-text-color);
+  }
+`;
+
+registerStyles('vaadin-custom-field', [requiredField, customField], {
+  moduleId: 'material-custom-field'
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

31279

decreased by-0.76%

Lines of code

565

decreased by-0.35%

Dependency changes

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

• Updated@vaadin/text-area@^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