@vaadin/custom-field 24.3.0-alpha1 → 24.3.0-alpha11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +19 -19
  2. package/src/vaadin-custom-field-mixin.js +1 -20
  3. package/src/vaadin-custom-field.d.ts +1 -8
  4. package/src/vaadin-custom-field.js +2 -2
  5. package/web-types.json +4 -30
  6. package/web-types.lit.json +3 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/custom-field",
3
- "version": "24.3.0-alpha1",
3
+ "version": "24.3.0-alpha11",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -38,31 +38,31 @@
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
40
  "@polymer/polymer": "^3.0.0",
41
- "@vaadin/a11y-base": "24.3.0-alpha1",
42
- "@vaadin/component-base": "24.3.0-alpha1",
43
- "@vaadin/field-base": "24.3.0-alpha1",
44
- "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
45
- "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
46
- "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
41
+ "@vaadin/a11y-base": "24.3.0-alpha11",
42
+ "@vaadin/component-base": "24.3.0-alpha11",
43
+ "@vaadin/field-base": "24.3.0-alpha11",
44
+ "@vaadin/vaadin-lumo-styles": "24.3.0-alpha11",
45
+ "@vaadin/vaadin-material-styles": "24.3.0-alpha11",
46
+ "@vaadin/vaadin-themable-mixin": "24.3.0-alpha11"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@esm-bundle/chai": "^4.3.4",
50
- "@vaadin/combo-box": "24.3.0-alpha1",
51
- "@vaadin/date-picker": "24.3.0-alpha1",
52
- "@vaadin/email-field": "24.3.0-alpha1",
53
- "@vaadin/form-layout": "24.3.0-alpha1",
54
- "@vaadin/number-field": "24.3.0-alpha1",
55
- "@vaadin/password-field": "24.3.0-alpha1",
56
- "@vaadin/select": "24.3.0-alpha1",
57
- "@vaadin/testing-helpers": "^0.5.0",
58
- "@vaadin/text-area": "24.3.0-alpha1",
59
- "@vaadin/text-field": "24.3.0-alpha1",
60
- "@vaadin/time-picker": "24.3.0-alpha1",
50
+ "@vaadin/combo-box": "24.3.0-alpha11",
51
+ "@vaadin/date-picker": "24.3.0-alpha11",
52
+ "@vaadin/email-field": "24.3.0-alpha11",
53
+ "@vaadin/form-layout": "24.3.0-alpha11",
54
+ "@vaadin/number-field": "24.3.0-alpha11",
55
+ "@vaadin/password-field": "24.3.0-alpha11",
56
+ "@vaadin/select": "24.3.0-alpha11",
57
+ "@vaadin/testing-helpers": "^0.6.0",
58
+ "@vaadin/text-area": "24.3.0-alpha11",
59
+ "@vaadin/text-field": "24.3.0-alpha11",
60
+ "@vaadin/time-picker": "24.3.0-alpha11",
61
61
  "sinon": "^13.0.2"
62
62
  },
63
63
  "web-types": [
64
64
  "web-types.json",
65
65
  "web-types.lit.json"
66
66
  ],
67
- "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
67
+ "gitHead": "123cf569a1b6ef6f4ef5fe8e60cb8d988699b98c"
68
68
  }
package/src/vaadin-custom-field-mixin.js CHANGED
@@ -105,19 +105,6 @@ export const CustomFieldMixin = (superClass) =>
105
105
  parseValue: {
106
106
  type: Function,
107
107
  },
108
-
109
- /**
110
- * Whether the field is dirty.
111
- *
112
- * The field is automatically marked as dirty once the user triggers
113
- * an `input` or `change` event. Additionally, the field can be manually
114
- * marked as dirty by setting the property to `true`.
115
- */
116
- dirty: {
117
- type: Boolean,
118
- value: false,
119
- notify: true,
120
- },
121
108
  };
122
109
  }
123
110
 
@@ -223,15 +210,9 @@ export const CustomFieldMixin = (superClass) =>
223
210
  }
224
211
 
225
212
  /** @protected */
226
- _onInput() {
227
- this.dirty = true;
228
- }
229
-
230
- /** @protected */
231
- _onChange(event) {
213
+ _onInputChange(event) {
232
214
  // Stop native change events
233
215
  event.stopPropagation();
234
- this.dirty = true;
235
216
 
236
217
  this.__setValue();
237
218
  this.validate();
package/src/vaadin-custom-field.d.ts CHANGED
@@ -16,11 +16,6 @@ export type CustomFieldChangeEvent = Event & {
16
16
  target: CustomField;
17
17
  };
18
18
 
19
- /**
20
- * Fired when the `dirty` property changes.
21
- */
22
- export type CustomFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>;
23
-
24
19
  /**
25
20
  * Fired when the `invalid` property changes.
26
21
  */
@@ -44,8 +39,6 @@ export type CustomFieldInternalTabEvent = Event & {
44
39
  };
45
40
 
46
41
  export interface CustomFieldCustomEventMap {
47
- 'dirty-changed': CustomFieldDirtyChangedEvent;
48
-
49
42
  'invalid-changed': CustomFieldInvalidChangedEvent;
50
43
 
51
44
  'value-changed': CustomFieldValueChangedEvent;
@@ -79,6 +72,7 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
79
72
  * `helper-text` | The slotted helper text element wrapper
80
73
  * `error-message` | The slotted error message element wrapper
81
74
  * `required-indicator` | The `required` state indicator element
75
+ * `input-fields` | The slotted input elements wrapper
82
76
  *
83
77
  * The following state attributes are available for styling:
84
78
  *
@@ -98,7 +92,6 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
98
92
  *
99
93
  * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
100
94
  * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
101
- * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
102
95
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
103
96
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
104
97
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
package/src/vaadin-custom-field.js CHANGED
@@ -32,6 +32,7 @@ registerStyles('vaadin-custom-field', customFieldStyles, { moduleId: 'vaadin-cus
32
32
  * `helper-text` | The slotted helper text element wrapper
33
33
  * `error-message` | The slotted error message element wrapper
34
34
  * `required-indicator` | The `required` state indicator element
35
+ * `input-fields` | The slotted input elements wrapper
35
36
  *
36
37
  * The following state attributes are available for styling:
37
38
  *
@@ -51,7 +52,6 @@ registerStyles('vaadin-custom-field', customFieldStyles, { moduleId: 'vaadin-cus
51
52
  *
52
53
  * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
53
54
  * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
54
- * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
55
55
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
56
56
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
57
57
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
@@ -75,7 +75,7 @@ class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolymerEle
75
75
  <span part="required-indicator" aria-hidden="true"></span>
76
76
  </div>
77
77
 
78
- <div class="inputs-wrapper" on-change="_onChange" on-input="_onInput">
78
+ <div class="inputs-wrapper" part="input-fields" on-change="_onInputChange">
79
79
  <slot id="slot"></slot>
80
80
  </div>
81
81
 
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/custom-field",
4
- "version": "24.3.0-alpha1",
4
+ "version": "24.3.0-alpha11",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-custom-field",
11
- "description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nYou may also manually set `disabled` or `readonly` attribute on this component to make the label\npart look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n`input-fields` | The slotted input elements wrapper\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nYou may also manually set `disabled` or `readonly` attribute on this component to make the label\npart look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "label",
@@ -100,7 +100,7 @@
100
100
  },
101
101
  {
102
102
  "name": "value",
103
- "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
103
+ "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha11/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha11/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
104
104
  "value": {
105
105
  "type": [
106
106
  "string",
@@ -109,17 +109,6 @@
109
109
  ]
110
110
  }
111
111
  },
112
- {
113
- "name": "dirty",
114
- "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
115
- "value": {
116
- "type": [
117
- "boolean",
118
- "null",
119
- "undefined"
120
- ]
121
- }
122
- },
123
112
  {
124
113
  "name": "theme",
125
114
  "description": "The theme variants to apply to the component.",
@@ -224,7 +213,7 @@
224
213
  },
225
214
  {
226
215
  "name": "value",
227
- "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
216
+ "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha11/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha11/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
228
217
  "value": {
229
218
  "type": [
230
219
  "string",
@@ -252,17 +241,6 @@
252
241
  "undefined"
253
242
  ]
254
243
  }
255
- },
256
- {
257
- "name": "dirty",
258
- "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
259
- "value": {
260
- "type": [
261
- "boolean",
262
- "null",
263
- "undefined"
264
- ]
265
- }
266
244
  }
267
245
  ],
268
246
  "events": [
@@ -281,10 +259,6 @@
281
259
  {
282
260
  "name": "value-changed",
283
261
  "description": "Fired when the `value` property changes."
284
- },
285
- {
286
- "name": "dirty-changed",
287
- "description": "Fired when the `dirty` property changes."
288
262
  }
289
263
  ]
290
264
  }
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/custom-field",
4
- "version": "24.3.0-alpha1",
4
+ "version": "24.3.0-alpha11",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-custom-field",
19
- "description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nYou may also manually set `disabled` or `readonly` attribute on this component to make the label\npart look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n`input-fields` | The slotted input elements wrapper\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nYou may also manually set `disabled` or `readonly` attribute on this component to make the label\npart look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -33,13 +33,6 @@
33
33
  "kind": "expression"
34
34
  }
35
35
  },
36
- {
37
- "name": "?dirty",
38
- "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
39
- "value": {
40
- "kind": "expression"
41
- }
42
- },
43
36
  {
44
37
  "name": ".label",
45
38
  "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -84,7 +77,7 @@
84
77
  },
85
78
  {
86
79
  "name": ".value",
87
- "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
80
+ "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha11/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha11/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
88
81
  "value": {
89
82
  "kind": "expression"
90
83
  }
@@ -130,13 +123,6 @@
130
123
  "value": {
131
124
  "kind": "expression"
132
125
  }
133
- },
134
- {
135
- "name": "@dirty-changed",
136
- "description": "Fired when the `dirty` property changes.",
137
- "value": {
138
- "kind": "expression"
139
- }
140
126
  }
141
127
  ]
142
128
  }