@digital-realty/ix-date 1.1.13 → 1.1.22

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 (10) hide show
  1. package/dist/IxDate.d.ts +4 -1
  2. package/dist/IxDate.js +30 -4
  3. package/dist/IxDate.js.map +1 -1
  4. package/dist/ix-date.min.js +1 -1
  5. package/dist/state/date-format-state.js +1 -1
  6. package/dist/state/date-format-state.js.map +1 -1
  7. package/package.json +2 -5
  8. package/dist/date-utils.d.ts +0 -2
  9. package/dist/date-utils.js +0 -19
  10. package/dist/date-utils.js.map +0 -1
package/dist/IxDate.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare class IxDate extends MobxLitElement {
10
10
  label: string;
11
11
  dateTimeText: string;
12
12
  value: string;
13
+ showCalendarOnMouseDown: boolean;
13
14
  min: string;
14
15
  max: string;
15
16
  /** @nocollapse */
@@ -17,7 +18,6 @@ export declare class IxDate extends MobxLitElement {
17
18
  delegatesFocus: boolean;
18
19
  mode: ShadowRootMode;
19
20
  slotAssignment?: SlotAssignmentMode | undefined;
20
- /** @nocollapse */
21
21
  customElements?: CustomElementRegistry | undefined;
22
22
  registry?: CustomElementRegistry | undefined;
23
23
  };
@@ -87,11 +87,14 @@ export declare class IxDate extends MobxLitElement {
87
87
  disconnectedCallback(): void;
88
88
  handleDateFormatChanged: () => Promise<void>;
89
89
  firstUpdated(): void;
90
+ handleMouseDown: (e: Event) => void;
90
91
  focusin: () => void;
91
92
  clear: () => void;
92
93
  handleChange: (e: InputEvent) => void;
93
94
  validateDate: () => void;
94
95
  focusOut: () => void;
96
+ formatDate: (date: string | Date) => string;
97
+ formatTime: (date: string | Date) => string;
95
98
  get nativeInputValue(): string;
96
99
  render(): import("lit-html").TemplateResult<1>;
97
100
  }
package/dist/IxDate.js CHANGED
@@ -5,22 +5,24 @@ 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
7
  import { format } from 'date-fns/format.js';
8
+ import { isValid } from 'date-fns/isValid.js';
8
9
  import { parse } from 'date-fns/parse.js';
10
+ import { parseISO } from 'date-fns/parseISO.js';
9
11
  import { MobxLitElement } from '@adobe/lit-mobx';
10
12
  import { dateFormatState } from './state/date-format-state.js';
11
13
  import { IxDateStyles } from './ix-date-styles.js';
12
- import { formatDate, formatTime } from './date-utils.js';
13
14
  export const NativeInputDateFormat = 'yyyy-MM-dd';
14
15
  export class IxDate extends MobxLitElement {
15
16
  constructor() {
16
17
  super(...arguments);
17
18
  this.type = 'default';
18
19
  this.format = 'dd/MM/yyyy';
19
- this.timeFormat = 'hh:mm a';
20
+ this.timeFormat = 'HH:mm';
20
21
  this.variant = 'date';
21
22
  this.label = '';
22
23
  this.dateTimeText = '';
23
24
  this.value = '';
25
+ this.showCalendarOnMouseDown = false;
24
26
  this.min = '';
25
27
  this.max = '9999-12-31';
26
28
  this.internals = this /* needed for closure */
@@ -38,6 +40,14 @@ export class IxDate extends MobxLitElement {
38
40
  this.format = dateFormatState.preferredDateFormat;
39
41
  this.timeFormat = dateFormatState.preferredTimeFormat;
40
42
  };
43
+ this.handleMouseDown = (e) => {
44
+ if (this.showCalendarOnMouseDown) {
45
+ const inputElement = e.target;
46
+ if ('showPicker' in inputElement) {
47
+ inputElement.showPicker();
48
+ }
49
+ }
50
+ };
41
51
  this.focusin = () => {
42
52
  this.focused = true;
43
53
  };
@@ -61,6 +71,18 @@ export class IxDate extends MobxLitElement {
61
71
  this.focusOut = () => {
62
72
  this.focused = false;
63
73
  };
74
+ this.formatDate = (date) => {
75
+ const parsedDate = typeof date === 'string' ? parseISO(date) : date;
76
+ return isValid(parsedDate)
77
+ ? format(parsedDate, this.format || 'dd/MM/yyyy')
78
+ : '';
79
+ };
80
+ this.formatTime = (date) => {
81
+ const parsedDate = typeof date === 'string' ? parseISO(date) : date;
82
+ return isValid(parsedDate)
83
+ ? format(parsedDate, this.timeFormat || 'HH:mm')
84
+ : '';
85
+ };
64
86
  }
65
87
  static get styles() {
66
88
  return [IxDateStyles];
@@ -213,8 +235,8 @@ export class IxDate extends MobxLitElement {
213
235
  return this.type === 'static'
214
236
  ? html `
215
237
  <span
216
- >${formatDate(this.value, this.format)}${this.variant === 'date-time'
217
- ? `${this.dateTimeText ? ` ${this.dateTimeText} ` : ' '}${formatTime(this.value, this.timeFormat)}`
238
+ >${this.formatDate(this.value)}${this.variant === 'date-time'
239
+ ? `${this.dateTimeText ? ` ${this.dateTimeText} ` : ' '}${this.formatTime(this.value)}`
218
240
  : ''}</span
219
241
  >
220
242
  `
@@ -233,6 +255,7 @@ export class IxDate extends MobxLitElement {
233
255
  ${html `<input
234
256
  id="date-input"
235
257
  @change=${this.handleChange}
258
+ @mousedown=${this.handleMouseDown}
236
259
  .value=${this.nativeInputValue}
237
260
  class="flex-fill"
238
261
  type="date"
@@ -275,6 +298,9 @@ __decorate([
275
298
  __decorate([
276
299
  property({ type: String })
277
300
  ], IxDate.prototype, "value", void 0);
301
+ __decorate([
302
+ property({ type: Boolean })
303
+ ], IxDate.prototype, "showCalendarOnMouseDown", void 0);
278
304
  __decorate([
279
305
  property({ type: String })
280
306
  ], IxDate.prototype, "min", void 0);
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 { 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';\nimport { formatDate, formatTime } from './date-utils.js';\n\nexport const NativeInputDateFormat = 'yyyy-MM-dd';\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 a';\n\n @property({ type: String }) variant = 'date';\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) dateTimeText = '';\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 get nativeInputValue() {\n try {\n return new Date(this.value).toISOString().split('T')[0];\n } catch (error) {\n return this.value;\n }\n }\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`\n <span\n >${formatDate(this.value, this.format)}${this.variant === 'date-time'\n ? `${\n this.dateTimeText ? ` ${this.dateTimeText} ` : ' '\n }${formatTime(this.value, this.timeFormat)}`\n : ''}</span\n >\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.nativeInputValue}\n class=\"flex-fill\"\n type=\"date\"\n min=${this.min}\n max=${this.max}\n ?disabled=${this.disabled}\n />`}\n </ix-field> `;\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 { format } from 'date-fns/format.js';\nimport { isValid } from 'date-fns/isValid.js';\nimport { parse } from 'date-fns/parse.js';\nimport { parseISO } from 'date-fns/parseISO.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { dateFormatState } from './state/date-format-state.js';\nimport { IxDateStyles } from './ix-date-styles.js';\n\nexport const NativeInputDateFormat = 'yyyy-MM-dd';\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 }) dateTimeText = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: Boolean }) showCalendarOnMouseDown = false;\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 handleMouseDown = (e: Event) => {\n if (this.showCalendarOnMouseDown) {\n const inputElement = e.target as HTMLInputElement;\n\n if ('showPicker' in inputElement) {\n inputElement.showPicker();\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 | Date) => {\n const parsedDate = typeof date === 'string' ? parseISO(date) : date;\n return isValid(parsedDate)\n ? format(parsedDate, this.format || 'dd/MM/yyyy')\n : '';\n };\n\n formatTime = (date: string | Date) => {\n const parsedDate = typeof date === 'string' ? parseISO(date) : date;\n return isValid(parsedDate)\n ? format(parsedDate, this.timeFormat || 'HH:mm')\n : '';\n };\n\n get nativeInputValue() {\n try {\n return new Date(this.value).toISOString().split('T')[0];\n } catch (error) {\n return this.value;\n }\n }\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`\n <span\n >${this.formatDate(this.value)}${this.variant === 'date-time'\n ? `${\n this.dateTimeText ? ` ${this.dateTimeText} ` : ' '\n }${this.formatTime(this.value)}`\n : ''}</span\n >\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 @mousedown=${this.handleMouseDown}\n .value=${this.nativeInputValue}\n class=\"flex-fill\"\n type=\"date\"\n min=${this.min}\n max=${this.max}\n ?disabled=${this.disabled}\n />`}\n </ix-field> `;\n }\n}\n"]}
package/dist/ix-date.min.js CHANGED
@@ -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";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";import{isValid}from"date-fns/isValid.js";import{parseISO}from"date-fns/parseISO.js";import{toZonedTime}from"date-fns-tz";class DateFormatState{constructor(){this.preferredDateFormat="dd/MM/yyyy",this.preferredTimeFormat="hh:mm a",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}`,formatDate=(t,e)=>{t="string"==typeof t?parseISO(t):t,t=toZonedTime(t,"UTC");return isValid(t)?format(t,e):""},formatTime=(t,e)=>{t="string"==typeof t?parseISO(t):t,t=toZonedTime(t,"UTC");return isValid(t)?format(t,e):""};class IxDate extends MobxLitElement{constructor(){super(...arguments),this.type="default",this.format="dd/MM/yyyy",this.timeFormat="hh:mm a",this.variant="date",this.label="",this.dateTimeText="",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}}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()}}})}get nativeInputValue(){try{return new Date(this.value).toISOString().split("T")[0]}catch(t){return this.value}}render(){var t={disabled:this.disabled,error:!this.disabled&&this.error};return"static"===this.type?html`<span>${formatDate(this.value,this.format)}${"date-time"===this.variant?(this.dateTimeText?` ${this.dateTimeText} `:" ")+formatTime(this.value,this.timeFormat):""}</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.nativeInputValue}" class="flex-fill" type="date" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}">`}</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,"dateTimeText",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);
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";import{format}from"date-fns/format.js";import{isValid}from"date-fns/isValid.js";import{parse}from"date-fns/parse.js";import{parseISO}from"date-fns/parseISO.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.dateTimeText="",this.value="",this.showCalendarOnMouseDown=!1,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.handleMouseDown=t=>{this.showCalendarOnMouseDown&&"showPicker"in(t=t.target)&&t.showPicker()},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="string"==typeof t?parseISO(t):t;return isValid(t)?format(t,this.format||"dd/MM/yyyy"):""},this.formatTime=t=>{t="string"==typeof t?parseISO(t):t;return isValid(t)?format(t,this.timeFormat||"HH:mm"):""}}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()}}})}get nativeInputValue(){try{return new Date(this.value).toISOString().split("T")[0]}catch(t){return this.value}}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.dateTimeText?` ${this.dateTimeText} `:" ")+this.formatTime(this.value):""}</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}" @mousedown="${this.handleMouseDown}" .value="${this.nativeInputValue}" class="flex-fill" type="date" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}">`}</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,"dateTimeText",void 0),__decorate([property({type:String})],IxDate.prototype,"value",void 0),__decorate([property({type:Boolean})],IxDate.prototype,"showCalendarOnMouseDown",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);
package/dist/state/date-format-state.js CHANGED
@@ -3,7 +3,7 @@ import { makePersistable, isHydrated, hydrateStore, clearPersistedStore, getPers
3
3
  class DateFormatState {
4
4
  constructor() {
5
5
  this.preferredDateFormat = 'dd/MM/yyyy';
6
- this.preferredTimeFormat = 'hh:mm a';
6
+ this.preferredTimeFormat = 'HH:mm';
7
7
  makeAutoObservable(this);
8
8
  makePersistable(this, {
9
9
  name: 'date-format',
package/dist/state/date-format-state.js.map CHANGED
@@ -1 +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,SAAS,CAAC;QAV7C,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 a';\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"]}
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,13 +3,12 @@
3
3
  "description": "Webcomponent ix-date following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.1.13",
6
+ "version": "1.1.22",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
10
10
  "exports": {
11
11
  ".": "./dist/index.js",
12
- "./dist/date-utils.js": "./dist/date-utils.js",
13
12
  "./ix-date.js": "./dist/ix-date.js",
14
13
  "./ix-date.min.js": "./dist/ix-date.min.js"
15
14
  },
@@ -30,11 +29,9 @@
30
29
  "@adobe/lit-mobx": "^2.2.2",
31
30
  "@digital-realty/ix-field": "^1.1.6",
32
31
  "@material/web": "1.2.0",
33
- "@rollup/plugin-replace": "^6.0.2",
34
32
  "@vaadin/date-picker": "^24.6.0",
35
33
  "@web/test-runner-commands": "^0.9.0",
36
34
  "date-fns": "^4.1.0",
37
- "date-fns-tz": "^3.2.0",
38
35
  "lit": "^3.2.1",
39
36
  "mobx": "^6.12.1",
40
37
  "mobx-persist-store": "^1.1.3"
@@ -111,5 +108,5 @@
111
108
  "README.md",
112
109
  "LICENSE"
113
110
  ],
114
- "gitHead": "5706516f4bf3b8260ad0db0d78869a58653acb6e"
111
+ "gitHead": "15f4dd5cd6ac90da99b1aafb7f7729941df4c0f2"
115
112
  }
package/dist/date-utils.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const formatDate: (date: string | Date, dateFormat: string) => string;
2
- export declare const formatTime: (date: string | Date, timeFormat: string) => string;
package/dist/date-utils.js DELETED
@@ -1,19 +0,0 @@
1
- import { format } from 'date-fns/format.js';
2
- import { isValid } from 'date-fns/isValid.js';
3
- import { parseISO } from 'date-fns/parseISO.js';
4
- import { toZonedTime } from "date-fns-tz";
5
- export const formatDate = (date, dateFormat) => {
6
- const parsedDate = typeof date === 'string' ? parseISO(date) : date;
7
- const utcDate = toZonedTime(parsedDate, 'UTC'); // Force UTC time zone
8
- return isValid(utcDate)
9
- ? format(utcDate, dateFormat)
10
- : '';
11
- };
12
- export const formatTime = (date, timeFormat) => {
13
- const parsedDate = typeof date === 'string' ? parseISO(date) : date;
14
- const utcDate = toZonedTime(parsedDate, 'UTC'); // Force UTC time zone
15
- return isValid(utcDate)
16
- ? format(utcDate, timeFormat)
17
- : '';
18
- };
19
- //# sourceMappingURL=date-utils.js.map
package/dist/date-utils.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-utils.js","sourceRoot":"","sources":["../src/date-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAmB,EAAE,UAAkB,EAAE,EAAE;IACpE,MAAM,UAAU,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpE,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,sBAAsB;IACtE,OAAO,OAAO,CAAC,OAAO,CAAC;QACrB,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC;QAC7B,CAAC,CAAC,EAAE,CAAC;AAET,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAmB,EAAE,UAAkB,EAAE,EAAE;IACpE,MAAM,UAAU,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpE,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,sBAAsB;IACtE,OAAO,OAAO,CAAC,OAAO,CAAC;QACrB,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC;QAC7B,CAAC,CAAC,EAAE,CAAC;AACT,CAAC,CAAC","sourcesContent":["import { format } from 'date-fns/format.js';\nimport { isValid } from 'date-fns/isValid.js';\nimport { parseISO } from 'date-fns/parseISO.js';\nimport { toZonedTime } from \"date-fns-tz\";\n\nexport const formatDate = (date: string | Date, dateFormat: string) => {\n const parsedDate = typeof date === 'string' ? parseISO(date) : date;\n const utcDate = toZonedTime(parsedDate, 'UTC'); // Force UTC time zone\n return isValid(utcDate)\n ? format(utcDate, dateFormat)\n : '';\n\n}\n\nexport const formatTime = (date: string | Date, timeFormat: string) => {\n const parsedDate = typeof date === 'string' ? parseISO(date) : date;\n const utcDate = toZonedTime(parsedDate, 'UTC'); // Force UTC time zone\n return isValid(utcDate)\n ? format(utcDate, timeFormat)\n : '';\n};"]}