@vaadin/custom-field - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

package.json

 {
   "name": "@vaadin/custom-field",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-custom-field",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/custom-field"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-custom-field.js",
   "module": "vaadin-custom-field.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
@@ -14,35 +33,28 @@ "Vaadin",
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/web-components/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.0-alpha6",
-    "@vaadin/field-base": "^22.0.0-alpha6",
-    "@vaadin/text-area": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
+    "@vaadin/component-base": "22.0.0-alpha7",
+    "@vaadin/field-base": "22.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-material-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha7"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/email-field": "^22.0.0-alpha6",
-    "@vaadin/password-field": "^22.0.0-alpha6",
+    "@vaadin/combo-box": "22.0.0-alpha7",
+    "@vaadin/date-picker": "22.0.0-alpha7",
+    "@vaadin/email-field": "22.0.0-alpha7",
+    "@vaadin/form-layout": "22.0.0-alpha7",
+    "@vaadin/list-box": "22.0.0-alpha7",
+    "@vaadin/number-field": "22.0.0-alpha7",
+    "@vaadin/password-field": "22.0.0-alpha7",
+    "@vaadin/polymer-legacy-adapter": "22.0.0-alpha7",
+    "@vaadin/select": "22.0.0-alpha7",
     "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/text-area": "22.0.0-alpha7",
+    "@vaadin/text-field": "22.0.0-alpha7",
+    "@vaadin/time-picker": "22.0.0-alpha7",
     "sinon": "^9.2.1"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

src/interfaces.d.ts

@@ -15,1 +15,19 @@ /**
 }
+
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type CustomFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type CustomFieldValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface CustomFieldCustomEventMap {
+  'invalid-changed': CustomFieldInvalidChangedEvent;
+
+  'value-changed': CustomFieldValueChangedEvent;
+}
+
+export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCustomEventMap {}

src/vaadin-custom-field.d.ts

@@ -6,10 +6,52 @@ /**
  */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { FieldAriaMixin } from '@vaadin/field-base/src/field-aria-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
-import { CustomFieldI18n } from './interfaces';
+import { CustomFieldEventMap, CustomFieldI18n } from './interfaces';
 
-declare class CustomField extends FieldAriaMixin(LabelMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
+/**
+ * `<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.
+ *
+ * ```
+ * <vaadin-custom-field label="Appointment time">
+ *   <vaadin-date-picker></vaadin-date-picker>
+ *   <vaadin-time-picker></vaadin-time-picker>
+ * </vaadin-custom-field>
+ * ```
+ *
+ * ### Styling
+ *
+ * You may set the attribute `disabled` or `readonly` on this component to make the label styles
+ * behave the same way as they would on a `<vaadin-text-field>` which is disabled or readonly.
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The slotted label element wrapper
+ * `helper-text`        | The slotted helper text element wrapper
+ * `error-message`      | The slotted error message element wrapper
+ * `required-indicator` | The `required` state indicator element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description                               | Part name
+ * --------------------|-------------------------------------------|------------
+ * `disabled`          | Set when the element is disabled          | :host
+ * `invalid`           | Set when the element is invalid           | :host
+ * `focused`           | Set when the element is focused           | :host
+ * `has-label`         | Set when the element has a label          | :host
+ * `has-value`         | Set when the element has a value          | :host
+ * `has-helper`        | Set when the element has helper text      | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
+ * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ */
+declare class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**
@@ -69,4 +111,22 @@ * Array of available input nodes
   checkValidity(): boolean;
+
+  addEventListener<K extends keyof CustomFieldEventMap>(
+    type: K,
+    listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof CustomFieldEventMap>(
+    type: K,
+    listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
 }
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-custom-field': CustomField;
+  }
+}
+
 export { CustomField };

src/vaadin-custom-field.js

@@ -8,9 +8,57 @@ /**
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { FieldAriaMixin } from '@vaadin/field-base/src/field-aria-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 
-class CustomField extends FieldAriaMixin(LabelMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
+/**
+ * `<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.
+ *
+ * ```
+ * <vaadin-custom-field label="Appointment time">
+ *   <vaadin-date-picker></vaadin-date-picker>
+ *   <vaadin-time-picker></vaadin-time-picker>
+ * </vaadin-custom-field>
+ * ```
+ *
+ * ### Styling
+ *
+ * You may set the attribute `disabled` or `readonly` on this component to make the label styles
+ * behave the same way as they would on a `<vaadin-text-field>` which is disabled or readonly.
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The slotted label element wrapper
+ * `helper-text`        | The slotted helper text element wrapper
+ * `error-message`      | The slotted error message element wrapper
+ * `required-indicator` | The `required` state indicator element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description                               | Part name
+ * --------------------|-------------------------------------------|------------
+ * `disabled`          | Set when the element is disabled          | :host
+ * `invalid`           | Set when the element is invalid           | :host
+ * `focused`           | Set when the element is focused           | :host
+ * `has-label`         | Set when the element has a label          | :host
+ * `has-value`         | Set when the element has a value          | :host
+ * `has-helper`        | Set when the element has helper text      | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ *
+ * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
+ * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ *
+ * @extends HTMLElement
+ * @mixes FieldMixin
+ * @mixes FocusMixin
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ */
+class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
@@ -39,3 +87,3 @@ return 'vaadin-custom-field';
 
-        [part='container'] {
+        .vaadin-custom-field-container {
           width: 100%;
@@ -51,6 +99,6 @@ display: flex;
 
-      <div part="container">
+      <div class="vaadin-custom-field-container">
         <div part="label" on-click="focus">
           <slot name="label"></slot>
-          <span part="indicator" aria-hidden="true"></span>
+          <span part="required-indicator" aria-hidden="true"></span>
         </div>
@@ -182,2 +230,4 @@
 
+    this.ariaTarget = this;
+
     this.__setInputsFromSlot();
@@ -305,5 +355,10 @@ this.__observer = new FlattenedNodesObserver(this.$.slot, () => {
   /** @private */
+  __isInput(node) {
+    const isSlottedInput = node.getAttribute('slot') === 'input' || node.getAttribute('slot') === 'textarea';
+    return !isSlottedInput && (node.validate || node.checkValidity);
+  }
+
+  /** @private */
   __getInputsFromSlot() {
-    const isInput = (node) => node.validate || node.checkValidity;
-    return this.__queryAllAssignedElements(this.$.slot).filter(isInput);
+    return this.__queryAllAssignedElements(this.$.slot).filter((node) => this.__isInput(node));
   }
@@ -343,2 +398,4 @@
 
+customElements.define(CustomField.is, CustomField);
+
 export { CustomField };

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

@@ -11,2 +11,3 @@ /**
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
@@ -36,8 +37,2 @@
 
-  /* 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 */
@@ -54,3 +49,3 @@ :host([has-label]) [part='label'] {
   /* align with text-field error message */
-  :host([invalid]) [part='error-message']:not(:empty)::before {
+  :host([has-error-message]) [part='error-message']::before {
     height: calc(0.4em - var(--lumo-space-xs));
@@ -68,45 +63,2 @@ }
 
-  :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;
-  }
-
-  /* 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='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']) .inputs-wrapper {
-    order: 2;
-  }
-
-  :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
-    order: 3;
-  }
-
   /* Touch device adjustment */
@@ -140,4 +92,6 @@ @media (pointer: coarse) {
 
-registerStyles('vaadin-custom-field', [requiredField, customField], {
+registerStyles('vaadin-custom-field', [requiredField, helper, customField], {
   moduleId: 'lumo-custom-field'
 });
+
+export { customField };

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

@@ -9,2 +9,3 @@ /**
 import '@vaadin/vaadin-material-styles/typography.js';
+import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
@@ -26,8 +27,2 @@
 
-  /* 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 */
@@ -39,3 +34,3 @@ :host([has-label]) {
   /* align with text-field error message */
-  [part='error-message']:not(:empty),
+  :host([has-error-message]) [part='error-message'],
   :host([has-helper]) [part='helper-text'] {
@@ -53,23 +48,8 @@ margin-top: -8px;
   }
-
-  /* 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;
-  }
-
-  [part='helper-text'] {
-    font-size: 0.75em;
-    line-height: 1;
-    color: var(--material-secondary-text-color);
-  }
 `;
 
-registerStyles('vaadin-custom-field', [requiredField, customField], {
+registerStyles('vaadin-custom-field', [requiredField, helper, customField], {
   moduleId: 'material-custom-field'
 });
+
+export { customField };

vaadin-custom-field.d.ts

@@ -1,1 +0,2 @@
-export { CustomField } from './src/vaadin-custom-field.js';
+export * from './src/vaadin-custom-field.js';
+export * from './src/interfaces';

vaadin-custom-field.js

 import './theme/lumo/vaadin-custom-field.js';
 
-export { CustomField } from './src/vaadin-custom-field.js';
+export * from './src/vaadin-custom-field.js';

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35704

increased by13.94%

Dependency count

6

decreased by-25%

Lines of code

635

increased by12.39%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

15

increased by200%

Dependency changes

• + Added@vaadin/component-base@22.0.0-alpha7(transitive)

• + Added@vaadin/field-base@22.0.0-alpha7(transitive)

• + Added@vaadin/icon@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-themable-mixin@22.0.0-alpha7(transitive)

• - Removed@vaadin/text-area@^22.0.0-alpha6

• - Removed@vaadin/vaadin-element-mixin@^22.0.0-alpha6

• - Removed@open-wc/dedupe-mixin@1.4.0(transitive)

• - Removed@vaadin/component-base@22.1.0(transitive)

• - Removed@vaadin/field-base@22.1.0(transitive)

• - Removed@vaadin/icon@22.1.0(transitive)

• - Removed@vaadin/input-container@22.1.0(transitive)

• - Removed@vaadin/text-area@22.1.0(transitive)

• - Removed@vaadin/vaadin-element-mixin@22.0.0-alpha6(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-material-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)

• Updated@vaadin/component-base@22.0.0-alpha7

• Updated@vaadin/field-base@22.0.0-alpha7

• Updated@vaadin/vaadin-lumo-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-material-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-themable-mixin@22.0.0-alpha7