@digital-realty/ix-date 1.1.6 → 1.1.7

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 CHANGED
@@ -1,7 +1,11 @@
1
- import { LitElement } from 'lit';
2
1
  import '@digital-realty/ix-field/ix-field.js';
3
- export declare class IxDate extends LitElement {
2
+ import { MobxLitElement } from '@adobe/lit-mobx';
3
+ export declare class IxDate extends MobxLitElement {
4
4
  static get styles(): import("lit").CSSResult[];
5
+ type: string;
6
+ format: string;
7
+ timeFormat: string;
8
+ variant: string;
5
9
  label: string;
6
10
  value: string;
7
11
  min: string;
@@ -18,6 +22,7 @@ export declare class IxDate extends LitElement {
18
22
  static readonly formAssociated = true;
19
23
  private readonly internals;
20
24
  dateInput: HTMLInputElement;
25
+ datePicker: any;
21
26
  disabled: boolean;
22
27
  /**
23
28
  * Gets or sets whether or not the text field is in a visually invalid state.
@@ -29,6 +34,7 @@ export declare class IxDate extends LitElement {
29
34
  errorText: string;
30
35
  required: boolean;
31
36
  hideError: boolean;
37
+ clearButtonVisible: boolean;
32
38
  /**
33
39
  * The associated form element with which this element's value will submit.
34
40
  */
@@ -70,15 +76,20 @@ export declare class IxDate extends LitElement {
70
76
  * Reset the text field to its default value.
71
77
  */
72
78
  reset(): void;
73
- protected updated(): void;
79
+ protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
74
80
  focus(): void;
75
81
  onChanged: any;
76
82
  private focused;
83
+ connectedCallback(): void;
84
+ disconnectedCallback(): void;
85
+ handleDateFormatChanged: () => Promise<void>;
77
86
  firstUpdated(): void;
78
87
  focusin: () => void;
79
88
  clear: () => void;
80
89
  handleChange: (e: InputEvent) => void;
81
90
  validateDate: () => void;
82
91
  focusOut: () => void;
83
- render(): import("lit").TemplateResult<1>;
92
+ formatDate: (date: string) => string;
93
+ formatTime: (date: string) => string;
94
+ render(): import("lit-html").TemplateResult<1>;
84
95
  }
package/dist/IxDate.js CHANGED
@@ -1,13 +1,21 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, LitElement } from 'lit';
2
+ import { html, LitElement, nothing } from 'lit';
3
3
  import { property, query, state } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import '@digital-realty/ix-field/ix-field.js';
6
6
  import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
7
+ import { format } from 'date-fns/format.js';
8
+ import { parse } from 'date-fns/parse.js';
9
+ import { MobxLitElement } from '@adobe/lit-mobx';
10
+ import { dateFormatState } from './state/date-format-state.js';
7
11
  import { IxDateStyles } from './ix-date-styles.js';
8
- export class IxDate extends LitElement {
12
+ export class IxDate extends MobxLitElement {
9
13
  constructor() {
10
14
  super(...arguments);
15
+ this.type = 'default';
16
+ this.format = 'dd/MM/yyyy';
17
+ this.timeFormat = 'HH:mm';
18
+ this.variant = 'date';
11
19
  this.label = '';
12
20
  this.value = '';
13
21
  this.min = '';
@@ -18,9 +26,15 @@ export class IxDate extends LitElement {
18
26
  this.errorText = '';
19
27
  this.required = false;
20
28
  this.hideError = false;
29
+ this.clearButtonVisible = true;
21
30
  // eslint-disable-next-line class-methods-use-this
22
31
  this.onChanged = () => { };
23
32
  this.focused = false;
33
+ this.handleDateFormatChanged = async () => {
34
+ await dateFormatState.hydrateStore();
35
+ this.format = dateFormatState.preferredDateFormat;
36
+ this.timeFormat = dateFormatState.preferredTimeFormat;
37
+ };
24
38
  this.focusin = () => {
25
39
  this.focused = true;
26
40
  };
@@ -44,6 +58,8 @@ export class IxDate extends LitElement {
44
58
  this.focusOut = () => {
45
59
  this.focused = false;
46
60
  };
61
+ this.formatDate = (date) => date ? format(new Date(date), this.format) : '';
62
+ this.formatTime = (date) => date ? format(new Date(date), this.timeFormat) : '';
47
63
  }
48
64
  static get styles() {
49
65
  return [IxDateStyles];
@@ -123,15 +139,28 @@ export class IxDate extends LitElement {
123
139
  this.clear();
124
140
  this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
125
141
  }
126
- updated() {
127
- this.internals.setValidity({
128
- badInput: this.error,
129
- }, this.error ? this.errorText : '', this.dateInput);
142
+ updated(changedProperties) {
143
+ if (changedProperties.has('value')) {
144
+ const inputVal = this.dateInput ? this.dateInput : this.datePicker;
145
+ if (inputVal) {
146
+ this.internals.setValidity({
147
+ badInput: this.error,
148
+ }, this.error ? this.errorText : '', inputVal);
149
+ }
150
+ }
130
151
  this.internals.setFormValue(this.value);
131
152
  }
132
153
  focus() {
133
154
  this.dateInput.focus();
134
155
  }
156
+ connectedCallback() {
157
+ super.connectedCallback();
158
+ document.addEventListener('dateFormatChanged', this.handleDateFormatChanged);
159
+ }
160
+ disconnectedCallback() {
161
+ super.disconnectedCallback();
162
+ document.removeEventListener('dateFormatChanged', this.handleDateFormatChanged);
163
+ }
135
164
  firstUpdated() {
136
165
  const minDate = new Date(this.min);
137
166
  const maxDate = new Date(this.max);
@@ -144,36 +173,62 @@ export class IxDate extends LitElement {
144
173
  this.max = max;
145
174
  }
146
175
  this.validateDate();
176
+ this.format = dateFormatState.preferredDateFormat;
177
+ this.timeFormat = dateFormatState.preferredTimeFormat;
178
+ if (this.datePicker) {
179
+ const formatDateIso8601 = (dateParts) => {
180
+ const { year, month, day } = dateParts;
181
+ const date = new Date(year, month, day);
182
+ return format(date, this.format);
183
+ };
184
+ const parseDateIso8601 = (inputValue) => {
185
+ const date = parse(inputValue, this.format, new Date());
186
+ return {
187
+ year: date.getFullYear(),
188
+ month: date.getMonth(),
189
+ day: date.getDate(),
190
+ };
191
+ };
192
+ this.datePicker.i18n = {
193
+ ...this.datePicker.i18n,
194
+ formatDate: formatDateIso8601,
195
+ parseDate: parseDateIso8601,
196
+ };
197
+ }
147
198
  }
148
199
  render() {
149
200
  const classes = {
150
201
  disabled: this.disabled,
151
202
  error: !this.disabled && this.error,
152
203
  };
153
- return html `
154
- <ix-field
155
- class="${classMap(classes)}"
156
- ?focused=${this.focused}
157
- ?populated=${this.value}
158
- ?disabled=${this.disabled}
159
- ?required=${this.required}
160
- ?error=${this.error && !this.hideError}
161
- error-text=${this.errorText}
162
- label=${this.label}
163
- @focusin=${this.focusin}
164
- @focusout=${this.focusOut}
165
- >
166
- <input
167
- id="date-input"
168
- @change=${this.handleChange}
169
- .value=${this.value}
170
- class="flex-fill"
171
- type="date"
172
- min=${this.min}
173
- max=${this.max}
174
- />
175
- </ix-field>
176
- `;
204
+ return this.type === 'static'
205
+ ? html `<span
206
+ >${this.formatDate(this.value)}${this.variant === 'date-time'
207
+ ? ` ${this.formatTime(this.value)}`
208
+ : nothing}</span
209
+ >`
210
+ : html `<ix-field
211
+ class="${classMap(classes)}"
212
+ ?focused=${this.focused}
213
+ ?populated=${this.value}
214
+ ?disabled=${this.disabled}
215
+ ?required=${this.required}
216
+ ?error=${this.error && !this.hideError}
217
+ error-text=${this.errorText}
218
+ label=${this.label}
219
+ @focusin=${this.focusin}
220
+ @focusout=${this.focusOut}
221
+ >
222
+ ${html `<input
223
+ id="date-input"
224
+ @change=${this.handleChange}
225
+ .value=${this.value}
226
+ class="flex-fill"
227
+ type="date"
228
+ min=${this.min}
229
+ max=${this.max}
230
+ />`}
231
+ </ix-field> `;
177
232
  }
178
233
  }
179
234
  (() => {
@@ -187,6 +242,18 @@ IxDate.shadowRootOptions = {
187
242
  };
188
243
  /** @nocollapse */
189
244
  IxDate.formAssociated = true;
245
+ __decorate([
246
+ property({ type: String })
247
+ ], IxDate.prototype, "type", void 0);
248
+ __decorate([
249
+ property({ type: String })
250
+ ], IxDate.prototype, "format", void 0);
251
+ __decorate([
252
+ property({ type: String })
253
+ ], IxDate.prototype, "timeFormat", void 0);
254
+ __decorate([
255
+ property({ type: String })
256
+ ], IxDate.prototype, "variant", void 0);
190
257
  __decorate([
191
258
  property({ type: String })
192
259
  ], IxDate.prototype, "label", void 0);
@@ -202,6 +269,9 @@ __decorate([
202
269
  __decorate([
203
270
  query('#date-input')
204
271
  ], IxDate.prototype, "dateInput", void 0);
272
+ __decorate([
273
+ query('vaadin-date-picker')
274
+ ], IxDate.prototype, "datePicker", void 0);
205
275
  __decorate([
206
276
  property({ type: Boolean, reflect: true })
207
277
  ], IxDate.prototype, "disabled", void 0);
@@ -214,6 +284,9 @@ __decorate([
214
284
  __decorate([
215
285
  property({ type: Boolean, reflect: true })
216
286
  ], IxDate.prototype, "hideError", void 0);
287
+ __decorate([
288
+ property({ type: Boolean, attribute: 'clear-button-visible' })
289
+ ], IxDate.prototype, "clearButtonVisible", void 0);
217
290
  __decorate([
218
291
  property({ type: Function })
219
292
  ], IxDate.prototype, "onChanged", void 0);
@@ -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 = '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"]}
1
+ {"version":3,"file":"IxDate.js","sourceRoot":"","sources":["../src/IxDate.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,OAAO,MAAO,SAAQ,cAAc;IAA1C;;QAS8B,SAAI,GAAG,SAAS,CAAC;QAEjB,WAAM,GAAG,YAAY,CAAC;QAEtB,eAAU,GAAG,OAAO,CAAC;QAErB,YAAO,GAAG,MAAM,CAAC;QAEjB,UAAK,GAAG,EAAE,CAAC;QAEX,UAAK,GAAG,EAAE,CAAC;QAEX,QAAG,GAAG,EAAE,CAAC;QAET,QAAG,GAAG,YAAY,CAAC;QAa9B,cAAS,GAAI,IAAoB,CAAC,wBAAwB;aACxE,eAAe,EAAE,CAAC;QAMuB,aAAQ,GAAG,KAAK,CAAC;QAYR,cAAS,GAAG,EAAE,CAAC;QAExB,aAAQ,GAAG,KAAK,CAAC;QAEjB,cAAS,GAAG,KAAK,CAAC;QAG9D,uBAAkB,GAAG,IAAI,CAAC;QAoG1B,kDAAkD;QACpB,cAAS,GAAQ,GAAG,EAAE,GAAE,CAAC,CAAC;QAEvC,YAAO,GAAG,KAAK,CAAC;QAkBjC,4BAAuB,GAAG,KAAK,IAAI,EAAE;YACnC,MAAM,eAAe,CAAC,YAAY,EAAE,CAAC;YAErC,IAAI,CAAC,MAAM,GAAG,eAAe,CAAC,mBAAmB,CAAC;YAClD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,mBAAmB,CAAC;QACxD,CAAC,CAAC;QAgDF,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEF,UAAK,GAAG,GAAG,EAAE;YACX,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC,CAAC;QAEF,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAElC,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE;oBACzC,IAAI,CAAC,SAAS,GAAG,sBAAsB,CAAC;iBACzC;aACF;QACH,CAAC,CAAC;QAEF,aAAQ,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,IAAY,EAAE,EAAE,CAC5B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAElD,eAAU,GAAG,CAAC,IAAY,EAAE,EAAE,CAC5B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAqCxD,CAAC;IA7SC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,YAAY,CAAC,CAAC;IACxB,CAAC;IAsCD;;;;;OAKG;IACH,IAAI,KAAK;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IAWD;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAED;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAED,eAAe;IACf,iBAAiB;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED;;OAEG;IACH,KAAK;;QACH,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC;IAChD,CAAC;IAEkB,OAAO,CACxB,iBAAyD;QAEzD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;YACnE,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB;oBACE,QAAQ,EAAE,IAAI,CAAC,KAAK;iBACrB,EACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAChC,QAAQ,CACT,CAAC;aACH;SACF;QAED,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAOD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CACvB,mBAAmB,EACnB,IAAI,CAAC,uBAAuB,CAC7B,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAC1B,mBAAmB,EACnB,IAAI,CAAC,uBAAuB,CAC7B,CAAC;IACJ,CAAC;IASD,YAAY;QACV,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnC,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEnC,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE;YAC/C,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;SAChB;QAED,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,EAAE;YAC/C,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;SAChB;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,CAAC,MAAM,GAAG,eAAe,CAAC,mBAAmB,CAAC;QAElD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,mBAAmB,CAAC;QAEtD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,CAAC,SAAc,EAAU,EAAE;gBACnD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC;gBACvC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;gBAExC,OAAO,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC,CAAC;YAEF,MAAM,gBAAgB,GAAG,CAAC,UAAkB,EAAE,EAAE;gBAC9C,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;gBAExD,OAAO;oBACL,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE;oBACxB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACtB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE;iBACpB,CAAC;YACJ,CAAC,CAAC;YAEF,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG;gBACrB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI;gBACvB,UAAU,EAAE,iBAAiB;gBAC7B,SAAS,EAAE,gBAAgB;aAC5B,CAAC;SACH;IACH,CAAC;IAqCD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK;SACpC,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAA;aACC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC3D,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBACnC,CAAC,CAAC,OAAO;UACX;YACJ,CAAC,CAAC,IAAI,CAAA;mBACO,QAAQ,CAAC,OAAO,CAAC;qBACf,IAAI,CAAC,OAAO;uBACV,IAAI,CAAC,KAAK;sBACX,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS;uBACzB,IAAI,CAAC,SAAS;kBACnB,IAAI,CAAC,KAAK;qBACP,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;;YAEvB,IAAI,CAAA;;sBAEM,IAAI,CAAC,YAAY;qBAClB,IAAI,CAAC,KAAK;;;kBAGb,IAAI,CAAC,GAAG;kBACR,IAAI,CAAC,GAAG;aACb;qBACQ,CAAC;IACpB,CAAC;;AAhTD;IACE,yBAAyB,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC,GAAA,CAAA;AAsBD,mBAAmB;AAEnB,kBAAkB;AACF,wBAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,mBAAmB;AACH,qBAAc,GAAG,IAAI,CAAC;AAzBV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAoB;AAgBzB;IAArB,KAAK,CAAC,aAAa,CAAC;yCAA8B;AAEtB;IAA5B,KAAK,CAAC,oBAAoB,CAAC;0CAAkB;AAEF;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkB;AAYR;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yCAAgB;AAExB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkB;AAEjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAmB;AAG9D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;kDACrC;AAqGI;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;yCAA2B;AAE/C;IAAR,KAAK,EAAE;uCAAyB","sourcesContent":["import { html, LitElement, nothing } 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 { format } from 'date-fns/format.js';\nimport { parse } from 'date-fns/parse.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { dateFormatState } from './state/date-format-state.js';\nimport { IxDateStyles } from './ix-date-styles.js';\n\nexport class IxDate extends MobxLitElement {\n static {\n requestUpdateOnAriaChange(IxDate);\n }\n\n static get styles() {\n return [IxDateStyles];\n }\n\n @property({ type: String }) type = 'default';\n\n @property({ type: String }) format = 'dd/MM/yyyy';\n\n @property({ type: String }) timeFormat = 'HH:mm';\n\n @property({ type: String }) variant = 'date';\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 @query('vaadin-date-picker') datePicker!: any;\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 @property({ type: Boolean, attribute: 'clear-button-visible' })\n clearButtonVisible = true;\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 changedProperties: Map<string | number | symbol, unknown>\n ) {\n if (changedProperties.has('value')) {\n const inputVal = this.dateInput ? this.dateInput : this.datePicker;\n if (inputVal) {\n this.internals.setValidity(\n {\n badInput: this.error,\n },\n this.error ? this.errorText : '',\n inputVal\n );\n }\n }\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 connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener(\n 'dateFormatChanged',\n this.handleDateFormatChanged\n );\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener(\n 'dateFormatChanged',\n this.handleDateFormatChanged\n );\n }\n\n handleDateFormatChanged = async () => {\n await dateFormatState.hydrateStore();\n\n this.format = dateFormatState.preferredDateFormat;\n this.timeFormat = dateFormatState.preferredTimeFormat;\n };\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 this.format = dateFormatState.preferredDateFormat;\n\n this.timeFormat = dateFormatState.preferredTimeFormat;\n\n if (this.datePicker) {\n const formatDateIso8601 = (dateParts: any): string => {\n const { year, month, day } = dateParts;\n const date = new Date(year, month, day);\n\n return format(date, this.format);\n };\n\n const parseDateIso8601 = (inputValue: string) => {\n const date = parse(inputValue, this.format, new Date());\n\n return {\n year: date.getFullYear(),\n month: date.getMonth(),\n day: date.getDate(),\n };\n };\n\n this.datePicker.i18n = {\n ...this.datePicker.i18n,\n formatDate: formatDateIso8601,\n parseDate: parseDateIso8601,\n };\n }\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 formatDate = (date: string) =>\n date ? format(new Date(date), this.format) : '';\n\n formatTime = (date: string) =>\n date ? format(new Date(date), this.timeFormat) : '';\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return this.type === 'static'\n ? html`<span\n >${this.formatDate(this.value)}${this.variant === 'date-time'\n ? ` ${this.formatTime(this.value)}`\n : nothing}</span\n >`\n : html`<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 ${html`<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"]}
@@ -3,14 +3,29 @@ export const IxDateStyles = css `
3
3
  :host {
4
4
  display: block;
5
5
  }
6
+
7
+ ::part(input-field) {
8
+ background: transparent;
9
+ padding: 0;
10
+ height: 26px;
11
+ }
12
+
13
+ #search-input-vaadin-date-picker-3 {
14
+ padding: 0 !important;
15
+ --_hover-highlight: transparent;
16
+ }
17
+
6
18
  ix-field {
7
19
  display: block;
20
+ position: relative;
21
+ --vaadin-field-default-width: auto;
8
22
 
9
23
  input {
10
24
  -webkit-text-fill-color: var(--_content-color);
11
25
  height: var(--ix-line-height);
12
26
  cursor: pointer;
13
27
  }
28
+
14
29
  input::-webkit-calendar-picker-indicator {
15
30
  cursor: pointer;
16
31
  }
@@ -25,5 +40,9 @@ export const IxDateStyles = css `
25
40
  flex: 1;
26
41
  align-items: center;
27
42
  }
43
+
44
+ vaadin-date-picker::before {
45
+ display: none;
46
+ }
28
47
  `;
29
48
  //# sourceMappingURL=ix-date-styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ix-date-styles.js","sourceRoot":"","sources":["../src/ix-date-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDateStyles = css`\n :host {\n display: block;\n }\n ix-field {\n display: block;\n\n input {\n -webkit-text-fill-color: var(--_content-color);\n height: var(--ix-line-height);\n cursor: pointer;\n }\n input::-webkit-calendar-picker-indicator {\n cursor: pointer;\n }\n }\n\n ix-field.error {\n input {\n -webkit-text-fill-color: var(--_error-content-color);\n }\n }\n .flex-fill {\n flex: 1;\n align-items: center;\n }\n`;\n"]}
1
+ {"version":3,"file":"ix-date-styles.js","sourceRoot":"","sources":["../src/ix-date-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxDateStyles = css`\n :host {\n display: block;\n }\n\n ::part(input-field) {\n background: transparent;\n padding: 0;\n height: 26px;\n }\n\n #search-input-vaadin-date-picker-3 {\n padding: 0 !important;\n --_hover-highlight: transparent;\n }\n\n ix-field {\n display: block;\n position: relative;\n --vaadin-field-default-width: auto;\n\n input {\n -webkit-text-fill-color: var(--_content-color);\n height: var(--ix-line-height);\n cursor: pointer;\n }\n\n input::-webkit-calendar-picker-indicator {\n cursor: pointer;\n }\n }\n\n ix-field.error {\n input {\n -webkit-text-fill-color: var(--_error-content-color);\n }\n }\n .flex-fill {\n flex: 1;\n align-items: center;\n }\n\n vaadin-date-picker::before {\n display: none;\n }\n`;\n"]}
@@ -1 +1 @@
1
- import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property,query,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import"@digital-realty/ix-field/ix-field.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";let IxDateStyles=css`:host{display:block}ix-field{display:block;height:var(--ix-line-height);cursor:pointer}input::-webkit-calendar-picker-indicator{cursor:pointer}`;class IxDate extends LitElement{constructor(){super(...arguments),this.label="",this.value="",this.min="",this.max="9999-12-31",this.internals=this.attachInternals(),this.disabled=!1,this.errorText="",this.required=!1,this.hideError=!1,this.onChanged=()=>{},this.focused=!1,this.focusin=()=>{this.focused=!0},this.clear=()=>{this.value=""},this.handleChange=t=>{t=t.target.value;this.value=t,this.validateDate(),this.onChanged(t)},this.validateDate=()=>{var t;!this.value||(t=new Date(this.value))&&!Number.isNaN(t.valueOf())||(this.errorText="Invalid date format.")},this.focusOut=()=>{this.focused=!1}}static get styles(){return[IxDateStyles]}get error(){return!!this.errorText}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var t;return null!=(t=this.getAttribute("name"))?t:""}set name(t){this.setAttribute("name",t)}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}formResetCallback(){this.reset()}reset(){var t;this.clear(),this.value=null!=(t=this.getAttribute("value"))?t:""}updated(){this.internals.setValidity({badInput:this.error},this.error?this.errorText:"",this.dateInput),this.internals.setFormValue(this.value)}focus(){this.dateInput.focus()}firstUpdated(){var t=new Date(this.min),e=new Date(this.max);t&&!Number.isNaN(t.valueOf())&&([t]=t.toISOString().split("T"),this.min=t),e&&!Number.isNaN(e.valueOf())&&([t]=e.toISOString().split("T"),this.max=t),this.validateDate()}render(){var t={disabled:this.disabled,error:!this.disabled&&this.error};return html`<ix-field class="${classMap(t)}" ?focused="${this.focused}" ?populated="${this.value}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.error&&!this.hideError}" error-text="${this.errorText}" label="${this.label}" @focusin="${this.focusin}" @focusout="${this.focusOut}"><input id="date-input" @change="${this.handleChange}" .value="${this.value}" class="flex-fill" type="date" min="${this.min}" max="${this.max}"></ix-field>`}}requestUpdateOnAriaChange(IxDate),IxDate.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxDate.formAssociated=!0,__decorate([property({type:String})],IxDate.prototype,"label",void 0),__decorate([property({type:String})],IxDate.prototype,"value",void 0),__decorate([property({type:String})],IxDate.prototype,"min",void 0),__decorate([property({type:String})],IxDate.prototype,"max",void 0),__decorate([query("#date-input")],IxDate.prototype,"dateInput",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDate.prototype,"disabled",void 0),__decorate([property({type:String,attribute:"error-text"})],IxDate.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDate.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDate.prototype,"hideError",void 0),__decorate([property({type:Function})],IxDate.prototype,"onChanged",void 0),__decorate([state()],IxDate.prototype,"focused",void 0),window.customElements.define("ix-date",IxDate);
1
+ import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import"@digital-realty/ix-field/ix-field.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{format}from"date-fns/format.js";import{parse}from"date-fns/parse.js";import{MobxLitElement}from"@adobe/lit-mobx";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";class DateFormatState{constructor(){this.preferredDateFormat="dd/MM/yyyy",this.preferredTimeFormat="HH:mm",makeAutoObservable(this),makePersistable(this,{name:"date-format",properties:["preferredDateFormat","preferredTimeFormat"],storage:window.localStorage})}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredDate(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}}let dateFormatState=new DateFormatState,IxDateStyles=css`:host{display:block}::part(input-field){background:0 0;padding:0;height:26px}#search-input-vaadin-date-picker-3{padding:0!important;--_hover-highlight:transparent}ix-field{display:block;position:relative;--vaadin-field-default-width:auto;height:var(--ix-line-height);cursor:pointer}input::-webkit-calendar-picker-indicator{cursor:pointer}vaadin-date-picker::before{display:none}`;class IxDate extends MobxLitElement{constructor(){super(...arguments),this.type="default",this.format="dd/MM/yyyy",this.timeFormat="HH:mm",this.variant="date",this.label="",this.value="",this.min="",this.max="9999-12-31",this.internals=this.attachInternals(),this.disabled=!1,this.errorText="",this.required=!1,this.hideError=!1,this.clearButtonVisible=!0,this.onChanged=()=>{},this.focused=!1,this.handleDateFormatChanged=async()=>{await dateFormatState.hydrateStore(),this.format=dateFormatState.preferredDateFormat,this.timeFormat=dateFormatState.preferredTimeFormat},this.focusin=()=>{this.focused=!0},this.clear=()=>{this.value=""},this.handleChange=t=>{t=t.target.value;this.value=t,this.validateDate(),this.onChanged(t)},this.validateDate=()=>{var t;!this.value||(t=new Date(this.value))&&!Number.isNaN(t.valueOf())||(this.errorText="Invalid date format.")},this.focusOut=()=>{this.focused=!1},this.formatDate=t=>t?format(new Date(t),this.format):"",this.formatTime=t=>t?format(new Date(t),this.timeFormat):""}static get styles(){return[IxDateStyles]}get error(){return!!this.errorText}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var t;return null!=(t=this.getAttribute("name"))?t:""}set name(t){this.setAttribute("name",t)}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}formResetCallback(){this.reset()}reset(){var t;this.clear(),this.value=null!=(t=this.getAttribute("value"))?t:""}updated(t){t.has("value")&&(t=this.dateInput||this.datePicker)&&this.internals.setValidity({badInput:this.error},this.error?this.errorText:"",t),this.internals.setFormValue(this.value)}focus(){this.dateInput.focus()}connectedCallback(){super.connectedCallback(),document.addEventListener("dateFormatChanged",this.handleDateFormatChanged)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("dateFormatChanged",this.handleDateFormatChanged)}firstUpdated(){var t=new Date(this.min),e=new Date(this.max);t&&!Number.isNaN(t.valueOf())&&([t]=t.toISOString().split("T"),this.min=t),e&&!Number.isNaN(e.valueOf())&&([t]=e.toISOString().split("T"),this.max=t),this.validateDate(),this.format=dateFormatState.preferredDateFormat,this.timeFormat=dateFormatState.preferredTimeFormat,this.datePicker&&(this.datePicker.i18n={...this.datePicker.i18n,formatDate:t=>{var{year:t,month:e,day:r}=t,t=new Date(t,e,r);return format(t,this.format)},parseDate:t=>{t=parse(t,this.format,new Date);return{year:t.getFullYear(),month:t.getMonth(),day:t.getDate()}}})}render(){var t={disabled:this.disabled,error:!this.disabled&&this.error};return"static"===this.type?html`<span>${this.formatDate(this.value)}${"date-time"===this.variant?" "+this.formatTime(this.value):nothing}</span>`:html`<ix-field class="${classMap(t)}" ?focused="${this.focused}" ?populated="${this.value}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.error&&!this.hideError}" error-text="${this.errorText}" label="${this.label}" @focusin="${this.focusin}" @focusout="${this.focusOut}">${html`<input id="date-input" @change="${this.handleChange}" .value="${this.value}" class="flex-fill" type="date" min="${this.min}" max="${this.max}">`}</ix-field>`}}requestUpdateOnAriaChange(IxDate),IxDate.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxDate.formAssociated=!0,__decorate([property({type:String})],IxDate.prototype,"type",void 0),__decorate([property({type:String})],IxDate.prototype,"format",void 0),__decorate([property({type:String})],IxDate.prototype,"timeFormat",void 0),__decorate([property({type:String})],IxDate.prototype,"variant",void 0),__decorate([property({type:String})],IxDate.prototype,"label",void 0),__decorate([property({type:String})],IxDate.prototype,"value",void 0),__decorate([property({type:String})],IxDate.prototype,"min",void 0),__decorate([property({type:String})],IxDate.prototype,"max",void 0),__decorate([query("#date-input")],IxDate.prototype,"dateInput",void 0),__decorate([query("vaadin-date-picker")],IxDate.prototype,"datePicker",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDate.prototype,"disabled",void 0),__decorate([property({type:String,attribute:"error-text"})],IxDate.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDate.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDate.prototype,"hideError",void 0),__decorate([property({type:Boolean,attribute:"clear-button-visible"})],IxDate.prototype,"clearButtonVisible",void 0),__decorate([property({type:Function})],IxDate.prototype,"onChanged",void 0),__decorate([state()],IxDate.prototype,"focused",void 0),window.customElements.define("ix-date",IxDate);
@@ -0,0 +1,11 @@
1
+ declare class DateFormatState {
2
+ constructor();
3
+ preferredDateFormat: string;
4
+ preferredTimeFormat: string;
5
+ get isHydrated(): boolean;
6
+ hydrateStore(): Promise<void>;
7
+ clearStoredDate(): Promise<void>;
8
+ getStoredData(): Promise<this | null>;
9
+ }
10
+ export declare const dateFormatState: DateFormatState;
11
+ export {};
@@ -0,0 +1,28 @@
1
+ import { makeAutoObservable } from 'mobx';
2
+ import { makePersistable, isHydrated, hydrateStore, clearPersistedStore, getPersistedStore, } from 'mobx-persist-store';
3
+ class DateFormatState {
4
+ constructor() {
5
+ this.preferredDateFormat = 'dd/MM/yyyy';
6
+ this.preferredTimeFormat = 'HH:mm';
7
+ makeAutoObservable(this);
8
+ makePersistable(this, {
9
+ name: 'date-format',
10
+ properties: ['preferredDateFormat', 'preferredTimeFormat'],
11
+ storage: window.localStorage,
12
+ });
13
+ }
14
+ get isHydrated() {
15
+ return isHydrated(this);
16
+ }
17
+ async hydrateStore() {
18
+ await hydrateStore(this);
19
+ }
20
+ async clearStoredDate() {
21
+ await clearPersistedStore(this);
22
+ }
23
+ async getStoredData() {
24
+ return getPersistedStore(this);
25
+ }
26
+ }
27
+ export const dateFormatState = new DateFormatState();
28
+ //# sourceMappingURL=date-format-state.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-format-state.js","sourceRoot":"","sources":["../../src/state/date-format-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,eAAe;IACnB;QASO,wBAAmB,GAAW,YAAY,CAAC;QAE3C,wBAAmB,GAAW,OAAO,CAAC;QAV3C,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,eAAe,CAAC,IAAI,EAAE;YACpB,IAAI,EAAE,aAAa;YACnB,UAAU,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;YAC1D,OAAO,EAAE,MAAM,CAAC,YAAY;SAC7B,CAAC,CAAC;IACL,CAAC;IAMD,IAAI,UAAU;QACZ,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport {\n makePersistable,\n isHydrated,\n hydrateStore,\n clearPersistedStore,\n getPersistedStore,\n} from 'mobx-persist-store';\n\nclass DateFormatState {\n constructor() {\n makeAutoObservable(this);\n makePersistable(this, {\n name: 'date-format',\n properties: ['preferredDateFormat', 'preferredTimeFormat'],\n storage: window.localStorage,\n });\n }\n\n public preferredDateFormat: string = 'dd/MM/yyyy';\n\n public preferredTimeFormat: string = 'HH:mm';\n\n get isHydrated() {\n return isHydrated(this);\n }\n\n async hydrateStore() {\n await hydrateStore(this);\n }\n\n async clearStoredDate() {\n await clearPersistedStore(this);\n }\n\n async getStoredData() {\n return getPersistedStore(this);\n }\n}\n\nexport const dateFormatState = new DateFormatState();\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.1.6",
6
+ "version": "1.1.7",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -26,20 +26,26 @@
26
26
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
27
27
  },
28
28
  "dependencies": {
29
- "@digital-realty/ix-field": "^1.1.5",
29
+ "@adobe/lit-mobx": "^2.2.2",
30
+ "@digital-realty/ix-field": "^1.1.6",
30
31
  "@material/web": "1.2.0",
32
+ "@vaadin/date-picker": "^24.6.0",
31
33
  "@web/test-runner-commands": "^0.9.0",
32
- "lit": "^2.8.0 || ^3.0.0"
34
+ "date-fns": "^4.1.0",
35
+ "lit": "^3.2.1",
36
+ "mobx": "^6.12.1",
37
+ "mobx-persist-store": "^1.1.3"
33
38
  },
34
39
  "devDependencies": {
35
40
  "@custom-elements-manifest/analyzer": "^0.4.17",
36
- "@digital-realty/theme": "^1.0.30",
37
41
  "@open-wc/eslint-config": "^9.2.1",
38
42
  "@open-wc/testing": "^3.1.6",
39
43
  "@types/glob": "^8.1.0",
40
44
  "@typescript-eslint/eslint-plugin": "^5.48.0",
41
45
  "@typescript-eslint/parser": "^5.48.0",
42
46
  "@web/dev-server": "^0.1.34",
47
+ "@web/dev-server-import-maps": "^0.2.1",
48
+ "@web/dev-server-rollup": "^0.6.4",
43
49
  "@web/test-runner": "^0.14.0",
44
50
  "concurrently": "^9.1.0",
45
51
  "eslint": "^8.31.0",
@@ -49,6 +55,7 @@
49
55
  "prettier": "^2.4.1",
50
56
  "rollup": "^4.29.1",
51
57
  "rollup-plugin-minify-html-literals": "^1.2.6",
58
+ "rollup-plugin-replace": "^2.2.0",
52
59
  "rollup-plugin-summary": "^2.0.0",
53
60
  "rollup-plugin-uglify": "^6.0.4",
54
61
  "tslib": "^2.3.1",
@@ -101,5 +108,5 @@
101
108
  "README.md",
102
109
  "LICENSE"
103
110
  ],
104
- "gitHead": "3590ef8890b3526a1395c48f0e94c72757c33c35"
111
+ "gitHead": "a781e30ec63dcc3307d86b94e35fa93c4e61f22f"
105
112
  }