@digital-realty/ix-date 1.0.4 → 1.0.6
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.
- package/dist/IxDate.d.ts +2 -5
- package/dist/IxDate.js +32 -52
- package/dist/IxDate.js.map +1 -1
- package/package.json +3 -2
package/dist/IxDate.d.ts
CHANGED
|
@@ -25,12 +25,10 @@ export declare class IxDate extends LitElement {
|
|
|
25
25
|
* This error state overrides the error state controlled by
|
|
26
26
|
* `reportValidity()`.
|
|
27
27
|
*/
|
|
28
|
-
error: boolean;
|
|
28
|
+
get error(): boolean;
|
|
29
29
|
errorText: string;
|
|
30
|
-
errorTextBelowRange: string;
|
|
31
|
-
errorTextAboveRange: string;
|
|
32
|
-
private errorMsg;
|
|
33
30
|
required: boolean;
|
|
31
|
+
hideError: boolean;
|
|
34
32
|
/**
|
|
35
33
|
* The associated form element with which this element's value will submit.
|
|
36
34
|
*/
|
|
@@ -76,7 +74,6 @@ export declare class IxDate extends LitElement {
|
|
|
76
74
|
focus(): void;
|
|
77
75
|
onChanged: any;
|
|
78
76
|
private focused;
|
|
79
|
-
private range;
|
|
80
77
|
firstUpdated(): void;
|
|
81
78
|
focusin: () => void;
|
|
82
79
|
clear: () => void;
|
package/dist/IxDate.js
CHANGED
|
@@ -11,29 +11,16 @@ export class IxDate extends LitElement {
|
|
|
11
11
|
this.label = '';
|
|
12
12
|
this.value = '';
|
|
13
13
|
this.min = '';
|
|
14
|
-
this.max = '';
|
|
14
|
+
this.max = '9999-12-31';
|
|
15
15
|
this.internals = this /* needed for closure */
|
|
16
16
|
.attachInternals();
|
|
17
17
|
this.disabled = false;
|
|
18
|
-
|
|
19
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
20
|
-
*
|
|
21
|
-
* This error state overrides the error state controlled by
|
|
22
|
-
* `reportValidity()`.
|
|
23
|
-
*/
|
|
24
|
-
this.error = false;
|
|
25
|
-
this.errorText = 'Invalid date';
|
|
26
|
-
this.errorTextBelowRange = 'Below range';
|
|
27
|
-
this.errorTextAboveRange = 'Above range';
|
|
28
|
-
this.errorMsg = 'Invalid date';
|
|
18
|
+
this.errorText = '';
|
|
29
19
|
this.required = false;
|
|
20
|
+
this.hideError = false;
|
|
30
21
|
// eslint-disable-next-line class-methods-use-this
|
|
31
22
|
this.onChanged = () => { };
|
|
32
23
|
this.focused = false;
|
|
33
|
-
this.range = {
|
|
34
|
-
min: undefined,
|
|
35
|
-
max: undefined,
|
|
36
|
-
};
|
|
37
24
|
this.focusin = () => {
|
|
38
25
|
this.focused = true;
|
|
39
26
|
};
|
|
@@ -47,23 +34,11 @@ export class IxDate extends LitElement {
|
|
|
47
34
|
this.onChanged(value);
|
|
48
35
|
};
|
|
49
36
|
this.validateDate = () => {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
else if (this.range.min && date < this.range.min) {
|
|
56
|
-
errorType = 'errorTextBelowRange';
|
|
57
|
-
}
|
|
58
|
-
else if (this.range.max && date > this.range.max) {
|
|
59
|
-
errorType = 'errorTextAboveRange';
|
|
60
|
-
}
|
|
61
|
-
if (errorType) {
|
|
62
|
-
this.error = true;
|
|
63
|
-
this.errorMsg = this[errorType];
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
this.error = false;
|
|
37
|
+
if (this.value) {
|
|
38
|
+
const date = new Date(this.value);
|
|
39
|
+
if (!date || Number.isNaN(date.valueOf())) {
|
|
40
|
+
this.errorText = 'Invalid date format.';
|
|
41
|
+
}
|
|
67
42
|
}
|
|
68
43
|
};
|
|
69
44
|
this.focusOut = () => {
|
|
@@ -73,6 +48,15 @@ export class IxDate extends LitElement {
|
|
|
73
48
|
static get styles() {
|
|
74
49
|
return [IxDateStyles];
|
|
75
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
53
|
+
*
|
|
54
|
+
* This error state overrides the error state controlled by
|
|
55
|
+
* `reportValidity()`.
|
|
56
|
+
*/
|
|
57
|
+
get error() {
|
|
58
|
+
return !!this.errorText;
|
|
59
|
+
}
|
|
76
60
|
/**
|
|
77
61
|
* The associated form element with which this element's value will submit.
|
|
78
62
|
*/
|
|
@@ -149,8 +133,16 @@ export class IxDate extends LitElement {
|
|
|
149
133
|
this.dateInput.focus();
|
|
150
134
|
}
|
|
151
135
|
firstUpdated() {
|
|
152
|
-
|
|
153
|
-
|
|
136
|
+
const minDate = new Date(this.min);
|
|
137
|
+
const maxDate = new Date(this.max);
|
|
138
|
+
if (minDate && !Number.isNaN(minDate.valueOf())) {
|
|
139
|
+
const [min] = minDate.toISOString().split('T');
|
|
140
|
+
this.min = min;
|
|
141
|
+
}
|
|
142
|
+
if (maxDate && !Number.isNaN(maxDate.valueOf())) {
|
|
143
|
+
const [max] = maxDate.toISOString().split('T');
|
|
144
|
+
this.max = max;
|
|
145
|
+
}
|
|
154
146
|
this.validateDate();
|
|
155
147
|
}
|
|
156
148
|
render() {
|
|
@@ -165,8 +157,8 @@ export class IxDate extends LitElement {
|
|
|
165
157
|
?populated=${this.value}
|
|
166
158
|
?disabled=${this.disabled}
|
|
167
159
|
?required=${this.required}
|
|
168
|
-
?error=${this.error}
|
|
169
|
-
error-text=${this.
|
|
160
|
+
?error=${this.error && !this.hideError}
|
|
161
|
+
error-text=${this.errorText}
|
|
170
162
|
label=${this.label}
|
|
171
163
|
@focusin=${this.focusin}
|
|
172
164
|
@focusout=${this.focusOut}
|
|
@@ -213,31 +205,19 @@ __decorate([
|
|
|
213
205
|
__decorate([
|
|
214
206
|
property({ type: Boolean, reflect: true })
|
|
215
207
|
], IxDate.prototype, "disabled", void 0);
|
|
216
|
-
__decorate([
|
|
217
|
-
property({ type: Boolean, reflect: true })
|
|
218
|
-
], IxDate.prototype, "error", void 0);
|
|
219
208
|
__decorate([
|
|
220
209
|
property({ type: String, attribute: 'error-text' })
|
|
221
210
|
], IxDate.prototype, "errorText", void 0);
|
|
222
|
-
__decorate([
|
|
223
|
-
property({ type: String, attribute: 'error-text-below-range' })
|
|
224
|
-
], IxDate.prototype, "errorTextBelowRange", void 0);
|
|
225
|
-
__decorate([
|
|
226
|
-
property({ type: String, attribute: 'error-text-above-range' })
|
|
227
|
-
], IxDate.prototype, "errorTextAboveRange", void 0);
|
|
228
|
-
__decorate([
|
|
229
|
-
state()
|
|
230
|
-
], IxDate.prototype, "errorMsg", void 0);
|
|
231
211
|
__decorate([
|
|
232
212
|
property({ type: Boolean, reflect: true })
|
|
233
213
|
], IxDate.prototype, "required", void 0);
|
|
214
|
+
__decorate([
|
|
215
|
+
property({ type: Boolean, reflect: true })
|
|
216
|
+
], IxDate.prototype, "hideError", void 0);
|
|
234
217
|
__decorate([
|
|
235
218
|
property({ type: Function })
|
|
236
219
|
], IxDate.prototype, "onChanged", void 0);
|
|
237
220
|
__decorate([
|
|
238
221
|
state()
|
|
239
222
|
], IxDate.prototype, "focused", void 0);
|
|
240
|
-
__decorate([
|
|
241
|
-
state()
|
|
242
|
-
], IxDate.prototype, "range", void 0);
|
|
243
223
|
//# sourceMappingURL=IxDate.js.map
|
package/dist/IxDate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxDate.js","sourceRoot":"","sources":["../src/IxDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { IxDateStyles } from './ix-date-styles.js';\n\nexport class IxDate extends LitElement {\n static {\n requestUpdateOnAriaChange(IxDate);\n }\n\n static get styles() {\n return [IxDateStyles];\n }\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: String }) min = '';\n\n @property({ type: String }) max = '';\n\n // Form association\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n @query('#date-input') dateInput!: HTMLInputElement;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid date';\n\n @property({ type: String, attribute: 'error-text-below-range' })\n errorTextBelowRange = 'Below range';\n\n @property({ type: String, attribute: 'error-text-above-range' })\n errorTextAboveRange = 'Above range';\n\n @state() private errorMsg = 'Invalid date';\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.clear();\n this.value = this.getAttribute('value') ?? '';\n }\n\n protected override updated() {\n this.internals.setValidity(\n {\n badInput: this.error,\n },\n this.error ? this.errorText : '',\n this.dateInput\n );\n this.internals.setFormValue(this.value);\n }\n\n override focus() {\n this.dateInput.focus();\n }\n\n // eslint-disable-next-line class-methods-use-this\n @property({ type: Function }) onChanged: any = () => {};\n\n @state() private focused = false;\n\n @state() private range: { min: Date | undefined; max: Date | undefined } = {\n min: undefined,\n max: undefined,\n };\n\n firstUpdated() {\n this.range.min = new Date(this.min);\n this.range.max = new Date(this.max);\n this.validateDate();\n }\n\n focusin = () => {\n this.focused = true;\n };\n\n clear = () => {\n this.value = '';\n };\n\n handleChange = (e: InputEvent) => {\n const { value } = e.target as HTMLInputElement;\n this.value = value;\n this.validateDate();\n this.onChanged(value);\n };\n\n validateDate = () => {\n const date = new Date(this.value);\n let errorType:\n | 'errorText'\n | 'errorTextBelowRange'\n | 'errorTextAboveRange'\n | undefined;\n if (!date) {\n errorType = 'errorText';\n } else if (this.range.min && date < this.range.min) {\n errorType = 'errorTextBelowRange';\n } else if (this.range.max && date > this.range.max) {\n errorType = 'errorTextAboveRange';\n }\n if (errorType) {\n this.error = true;\n this.errorMsg = this[errorType];\n } else {\n this.error = false;\n }\n };\n\n focusOut = () => {\n this.focused = false;\n };\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <ix-field\n class=\"${classMap(classes)}\"\n ?focused=${this.focused}\n ?populated=${this.value}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${this.errorMsg}\n label=${this.label}\n @focusin=${this.focusin}\n @focusout=${this.focusOut}\n >\n <input\n id=\"date-input\"\n @change=${this.handleChange}\n .value=${this.value}\n class=\"flex-fill\"\n type=\"date\"\n min=${this.min}\n max=${this.max}\n />\n </ix-field>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxDate.js","sourceRoot":"","sources":["../src/IxDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { IxDateStyles } from './ix-date-styles.js';\n\nexport class IxDate extends LitElement {\n static {\n requestUpdateOnAriaChange(IxDate);\n }\n\n static get styles() {\n return [IxDateStyles];\n }\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: String }) min = '';\n\n @property({ type: String }) max = '9999-12-31';\n\n // Form association\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n @query('#date-input') dateInput!: HTMLInputElement;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n get error() {\n return !!this.errorText;\n }\n\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Boolean, reflect: true }) hideError = false;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.clear();\n this.value = this.getAttribute('value') ?? '';\n }\n\n protected override updated() {\n this.internals.setValidity(\n {\n badInput: this.error,\n },\n this.error ? this.errorText : '',\n this.dateInput\n );\n this.internals.setFormValue(this.value);\n }\n\n override focus() {\n this.dateInput.focus();\n }\n\n // eslint-disable-next-line class-methods-use-this\n @property({ type: Function }) onChanged: any = () => {};\n\n @state() private focused = false;\n\n firstUpdated() {\n const minDate = new Date(this.min);\n const maxDate = new Date(this.max);\n\n if (minDate && !Number.isNaN(minDate.valueOf())) {\n const [min] = minDate.toISOString().split('T');\n this.min = min;\n }\n\n if (maxDate && !Number.isNaN(maxDate.valueOf())) {\n const [max] = maxDate.toISOString().split('T');\n this.max = max;\n }\n\n this.validateDate();\n }\n\n focusin = () => {\n this.focused = true;\n };\n\n clear = () => {\n this.value = '';\n };\n\n handleChange = (e: InputEvent) => {\n const { value } = e.target as HTMLInputElement;\n this.value = value;\n this.validateDate();\n this.onChanged(value);\n };\n\n validateDate = () => {\n if (this.value) {\n const date = new Date(this.value);\n\n if (!date || Number.isNaN(date.valueOf())) {\n this.errorText = 'Invalid date format.';\n }\n }\n };\n\n focusOut = () => {\n this.focused = false;\n };\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <ix-field\n class=\"${classMap(classes)}\"\n ?focused=${this.focused}\n ?populated=${this.value}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error && !this.hideError}\n error-text=${this.errorText}\n label=${this.label}\n @focusin=${this.focusin}\n @focusout=${this.focusOut}\n >\n <input\n id=\"date-input\"\n @change=${this.handleChange}\n .value=${this.value}\n class=\"flex-fill\"\n type=\"date\"\n min=${this.min}\n max=${this.max}\n />\n </ix-field>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-date following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.6",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
36
36
|
"@open-wc/eslint-config": "^9.2.1",
|
|
37
37
|
"@open-wc/testing": "^3.1.6",
|
|
38
|
+
"@types/glob": "^8.1.0",
|
|
38
39
|
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
|
39
40
|
"@typescript-eslint/parser": "^5.48.0",
|
|
40
41
|
"@web/dev-server": "^0.1.34",
|
|
@@ -95,5 +96,5 @@
|
|
|
95
96
|
"README.md",
|
|
96
97
|
"LICENSE"
|
|
97
98
|
],
|
|
98
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "d75b568e37715189d480b8d0656a0cf65d0ce865"
|
|
99
100
|
}
|