@digital-realty/ix-date 1.1.21 → 1.1.23

package/dist/IxDate.d.ts

@@ -3,15 +3,33 @@ import { MobxLitElement } from '@adobe/lit-mobx';
 export declare const NativeInputDateFormat = "yyyy-MM-dd";
 export declare class IxDate extends MobxLitElement {
     static get styles(): import("lit").CSSResult[];
-    type: string;
+    type: 'default' | 'static';
+    variant: 'date' | 'time' | 'date-time';
     format: string;
     timeFormat: string;
-    variant: string;
     label: string;
     dateTimeText: string;
+    /**
+     * For `type='default'`, should be any value that is accepted by [new Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date).
+     *
+     * For `type='static'`, should be a date string that can be parsed by [parseISO](https://date-fns.org/v2.0.0/docs/parseISO), e.g.
+     * - `2025-01-01`
+     * - `2025-01-01 12:30Z`
+     * - `2025-01-01T12:30:00.000+02:00`
+     * */
     value: string;
+    showCalendarOnMouseDown: boolean;
     min: string;
     max: string;
+    /**
+     * Applies when type=static. Defaults to `false`.
+     *
+     * If `true`, the value is formatted but no time zone conversions are applied.
+     *
+     * If `false`, values that do not specify a time zone are interpreted as being in the
+     * user's local time zone and all values are displayed in the user's local time zone.
+     */
+    noTimeZoneConversion: boolean;
     /** @nocollapse */
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -86,13 +104,19 @@ export declare class IxDate extends MobxLitElement {
     disconnectedCallback(): void;
     handleDateFormatChanged: () => Promise<void>;
     firstUpdated(): void;
+    handleMouseDown: (e: Event) => void;
     focusin: () => void;
     clear: () => void;
     handleChange: (e: InputEvent) => void;
     validateDate: () => void;
     focusOut: () => void;
-    formatDate: (date: string | Date) => string;
-    formatTime: (date: string | Date) => string;
+    parseValue: () => Date;
+    formatValueAsDate: (date: Date) => string;
+    formatValueAsTime: (date: Date) => string;
+    formatValueAsDateTime: (date: Date) => string;
+    formatValue: () => string;
     get nativeInputValue(): string;
+    renderStaticDate(): import("lit-html").TemplateResult<1>;
+    renderDateInput(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/IxDate.js

@@ -9,21 +9,39 @@ 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 { dateFormatState } from './state/date-format-state.js';
+import { dateFormatState, defaultDateFormat, defaultTimeFormat, } from './state/date-format-state.js';
 import { IxDateStyles } from './ix-date-styles.js';
 export const NativeInputDateFormat = 'yyyy-MM-dd';
 export class IxDate extends MobxLitElement {
     constructor() {
         super(...arguments);
         this.type = 'default';
-        this.format = 'dd/MM/yyyy';
-        this.timeFormat = 'HH:mm';
         this.variant = 'date';
+        this.format = defaultDateFormat;
+        this.timeFormat = defaultTimeFormat;
         this.label = '';
         this.dateTimeText = '';
+        /**
+         * For `type='default'`, should be any value that is accepted by [new Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date).
+         *
+         * For `type='static'`, should be a date string that can be parsed by [parseISO](https://date-fns.org/v2.0.0/docs/parseISO), e.g.
+         * - `2025-01-01`
+         * - `2025-01-01 12:30Z`
+         * - `2025-01-01T12:30:00.000+02:00`
+         * */
         this.value = '';
+        this.showCalendarOnMouseDown = false;
         this.min = '';
         this.max = '9999-12-31';
+        /**
+         * Applies when type=static. Defaults to `false`.
+         *
+         * If `true`, the value is formatted but no time zone conversions are applied.
+         *
+         * If `false`, values that do not specify a time zone are interpreted as being in the
+         * user's local time zone and all values are displayed in the user's local time zone.
+         */
+        this.noTimeZoneConversion = false;
         this.internals = this /* needed for closure */
             .attachInternals();
         this.disabled = false;
@@ -39,6 +57,14 @@ export class IxDate extends MobxLitElement {
             this.format = dateFormatState.preferredDateFormat;
             this.timeFormat = dateFormatState.preferredTimeFormat;
         };
+        this.handleMouseDown = (e) => {
+            if (this.showCalendarOnMouseDown) {
+                const inputElement = e.target;
+                if ('showPicker' in inputElement) {
+                    inputElement.showPicker();
+                }
+            }
+        };
         this.focusin = () => {
             this.focused = true;
         };
@@ -62,17 +88,36 @@ export class IxDate extends MobxLitElement {
         this.focusOut = () => {
             this.focused = false;
         };
-        this.formatDate = (date) => {
-            const parsedDate = typeof date === 'string' ? parseISO(date) : date;
-            return isValid(parsedDate)
-                ? format(parsedDate, this.format || 'dd/MM/yyyy')
-                : '';
+        this.parseValue = () => {
+            if (typeof this.value !== 'string') {
+                return this.value;
+            }
+            if (this.noTimeZoneConversion) {
+                // Matches the time zone designator, e.g. `Z` or `-02:00`.
+                // Note: does not match `-02` and `-0200`, which are valid ISO 8601 but rarely used.
+                const timeZoneRegex = /Z|([+-]\d\d:\d\d)/;
+                const valueWithoutTimeZone = this.value.split(timeZoneRegex)[0];
+                return parseISO(valueWithoutTimeZone);
+            }
+            return parseISO(this.value);
         };
-        this.formatTime = (date) => {
-            const parsedDate = typeof date === 'string' ? parseISO(date) : date;
-            return isValid(parsedDate)
-                ? format(parsedDate, this.timeFormat || 'HH:mm')
-                : '';
+        this.formatValueAsDate = (date) => format(date, this.format || defaultDateFormat);
+        this.formatValueAsTime = (date) => format(date, this.timeFormat || defaultTimeFormat);
+        this.formatValueAsDateTime = (date) => `${this.formatValueAsDate(date)}${this.dateTimeText ? ` ${this.dateTimeText} ` : ' '}${this.formatValueAsTime(date)}`;
+        this.formatValue = () => {
+            const parsedDate = this.parseValue();
+            if (!isValid(parsedDate))
+                return '';
+            switch (this.variant) {
+                case 'date':
+                    return this.formatValueAsDate(parsedDate);
+                case 'time':
+                    return this.formatValueAsTime(parsedDate);
+                case 'date-time':
+                    return this.formatValueAsDateTime(parsedDate);
+                default:
+                    return '';
+            }
         };
     }
     static get styles() {
@@ -218,42 +263,43 @@ export class IxDate extends MobxLitElement {
             return this.value;
         }
     }
-    render() {
+    renderStaticDate() {
+        return html `<span>${this.formatValue()}</span>`;
+    }
+    renderDateInput() {
         const classes = {
             disabled: this.disabled,
             error: !this.disabled && this.error,
         };
+        return html `<ix-field
+      class="${classMap(classes)}"
+      ?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>`;
+    }
+    render() {
         return this.type === 'static'
-            ? html `
-          <span
-            >${this.formatDate(this.value)}${this.variant === 'date-time'
-                ? `${this.dateTimeText ? ` ${this.dateTimeText} ` : ' '}${this.formatTime(this.value)}`
-                : ''}</span
-          >
-        `
-            : html `<ix-field
-          class="${classMap(classes)}"
-          ?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> `;
+            ? this.renderStaticDate()
+            : this.renderDateInput();
     }
 }
 (() => {
@@ -272,13 +318,13 @@ __decorate([
 ], IxDate.prototype, "type", void 0);
 __decorate([
     property({ type: String })
-], IxDate.prototype, "format", void 0);
+], IxDate.prototype, "variant", void 0);
 __decorate([
     property({ type: String })
-], IxDate.prototype, "timeFormat", void 0);
+], IxDate.prototype, "format", void 0);
 __decorate([
     property({ type: String })
-], IxDate.prototype, "variant", void 0);
+], IxDate.prototype, "timeFormat", void 0);
 __decorate([
     property({ type: String })
 ], IxDate.prototype, "label", void 0);
@@ -288,12 +334,18 @@ __decorate([
 __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([
+    property({ type: Boolean, attribute: 'no-time-zone-conversion' })
+], IxDate.prototype, "noTimeZoneConversion", void 0);
 __decorate([
     query('#date-input')
 ], IxDate.prototype, "dateInput", void 0);

package/dist/IxDate.js.map

@@ -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 { 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: 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 | 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            .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"]}
+{"version":3,"file":"IxDate.js","sourceRoot":"","sources":["../src/IxDate.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,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,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,CAAC,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAElD,MAAM,OAAO,MAAO,SAAQ,cAAc;IAA1C;;QAS8B,SAAI,GAAyB,SAAS,CAAC;QAEvC,YAAO,GAAkC,MAAM,CAAC;QAEhD,WAAM,GAAG,iBAAiB,CAAC;QAE3B,eAAU,GAAG,iBAAiB,CAAC;QAE/B,UAAK,GAAG,EAAE,CAAC;QAEX,iBAAY,GAAG,EAAE,CAAC;QAE9C;;;;;;;aAOK;QACuB,UAAK,GAAG,EAAE,CAAC;QAEV,4BAAuB,GAAG,KAAK,CAAC;QAEjC,QAAG,GAAG,EAAE,CAAC;QAET,QAAG,GAAG,YAAY,CAAC;QAE/C;;;;;;;WAOG;QAEH,yBAAoB,GAAG,KAAK,CAAC;QAaZ,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,oBAAe,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC7B,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBAChC,MAAM,YAAY,GAAG,CAAC,CAAC,MAA0B,CAAC;gBAElD,IAAI,YAAY,IAAI,YAAY,EAAE;oBAChC,YAAY,CAAC,UAAU,EAAE,CAAC;iBAC3B;aACF;QACH,CAAC,CAAC;QAEF,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,GAAG,EAAE;YAChB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;gBAClC,OAAO,IAAI,CAAC,KAAK,CAAC;aACnB;YAED,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,0DAA0D;gBAC1D,oFAAoF;gBACpF,MAAM,aAAa,GAAG,mBAAmB,CAAC;gBAC1C,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChE,OAAO,QAAQ,CAAC,oBAAoB,CAAC,CAAC;aACvC;YAED,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,sBAAiB,GAAG,CAAC,IAAU,EAAE,EAAE,CACjC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,iBAAiB,CAAC,CAAC;QAEjD,sBAAiB,GAAG,CAAC,IAAU,EAAE,EAAE,CACjC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAC,CAAC;QAErD,0BAAqB,GAAG,CAAC,IAAU,EAAE,EAAE,CACrC,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAC7B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,GACjD,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC;QAEpC,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;gBAAE,OAAO,EAAE,CAAC;YACpC,QAAQ,IAAI,CAAC,OAAO,EAAE;gBACpB,KAAK,MAAM;oBACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;gBAC5C,KAAK,MAAM;oBACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;gBAC5C,KAAK,WAAW;oBACd,OAAO,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;gBAChD;oBACE,OAAO,EAAE,CAAC;aACb;QACH,CAAC,CAAC;IAmDJ,CAAC;IAhYC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,YAAY,CAAC,CAAC;IACxB,CAAC;IA6DD;;;;;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;IAmFD,IAAI,gBAAgB;QAClB,IAAI;YACF,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SACzD;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;SACnB;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAA,SAAS,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAClD,CAAC;IAED,eAAe;QACb,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,CAAA;eACA,QAAQ,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,OAAO;mBACV,IAAI,CAAC,KAAK;kBACX,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;eAChB,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS;mBACzB,IAAI,CAAC,SAAS;cACnB,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;;QAEvB,IAAI,CAAA;;kBAEM,IAAI,CAAC,YAAY;qBACd,IAAI,CAAC,eAAe;iBACxB,IAAI,CAAC,gBAAgB;;;cAGxB,IAAI,CAAC,GAAG;cACR,IAAI,CAAC,GAAG;oBACF,IAAI,CAAC,QAAQ;SACxB;gBACO,CAAC;IACf,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;YACzB,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;IAC7B,CAAC;;AAnYD;IACE,yBAAyB,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC,GAAA,CAAA;AA6CD,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;AAhDV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiD;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgC;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAUlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AAEV;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAiC;AAEjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAoB;AAW/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC;oDACrC;AAgBP;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 } 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 {\n  dateFormatState,\n  defaultDateFormat,\n  defaultTimeFormat,\n} 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' | 'static' = 'default';\n\n  @property({ type: String }) variant: 'date' | 'time' | 'date-time' = 'date';\n\n  @property({ type: String }) format = defaultDateFormat;\n\n  @property({ type: String }) timeFormat = defaultTimeFormat;\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) dateTimeText = '';\n\n  /**\n   * For `type='default'`, should be any value that is accepted by [new Date()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date).\n   *\n   * For `type='static'`, should be a date string that can be parsed by [parseISO](https://date-fns.org/v2.0.0/docs/parseISO), e.g.\n   * - `2025-01-01`\n   * - `2025-01-01 12:30Z`\n   * - `2025-01-01T12:30:00.000+02:00`\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  /**\n   * Applies when type=static. Defaults to `false`.\n   *\n   * If `true`, the value is formatted but no time zone conversions are applied.\n   *\n   * If `false`, values that do not specify a time zone are interpreted as being in the\n   * user's local time zone and all values are displayed in the user's local time zone.\n   */\n  @property({ type: Boolean, attribute: 'no-time-zone-conversion' })\n  noTimeZoneConversion = false;\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  parseValue = () => {\n    if (typeof this.value !== 'string') {\n      return this.value;\n    }\n\n    if (this.noTimeZoneConversion) {\n      // Matches the time zone designator, e.g. `Z` or `-02:00`.\n      // Note: does not match `-02` and `-0200`, which are valid ISO 8601 but rarely used.\n      const timeZoneRegex = /Z|([+-]\\d\\d:\\d\\d)/;\n      const valueWithoutTimeZone = this.value.split(timeZoneRegex)[0];\n      return parseISO(valueWithoutTimeZone);\n    }\n\n    return parseISO(this.value);\n  };\n\n  formatValueAsDate = (date: Date) =>\n    format(date, this.format || defaultDateFormat);\n\n  formatValueAsTime = (date: Date) =>\n    format(date, this.timeFormat || defaultTimeFormat);\n\n  formatValueAsDateTime = (date: Date) =>\n    `${this.formatValueAsDate(date)}${\n      this.dateTimeText ? ` ${this.dateTimeText} ` : ' '\n    }${this.formatValueAsTime(date)}`;\n\n  formatValue = () => {\n    const parsedDate = this.parseValue();\n    if (!isValid(parsedDate)) return '';\n    switch (this.variant) {\n      case 'date':\n        return this.formatValueAsDate(parsedDate);\n      case 'time':\n        return this.formatValueAsTime(parsedDate);\n      case 'date-time':\n        return this.formatValueAsDateTime(parsedDate);\n      default:\n        return '';\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  renderStaticDate() {\n    return html`<span>${this.formatValue()}</span>`;\n  }\n\n  renderDateInput() {\n    const classes = {\n      disabled: this.disabled,\n      error: !this.disabled && this.error,\n    };\n\n    return 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  render() {\n    return this.type === 'static'\n      ? this.renderStaticDate()\n      : this.renderDateInput();\n  }\n}\n"]}

package/dist/ix-date.min.js

@@ -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{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.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="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}" .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);
+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";let defaultDateFormat="dd/MM/yyyy",defaultTimeFormat="HH:mm";class DateFormatState{constructor(){this.preferredDateFormat=defaultDateFormat,this.preferredTimeFormat=defaultTimeFormat,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.variant="date",this.format=defaultDateFormat,this.timeFormat=defaultTimeFormat,this.label="",this.dateTimeText="",this.value="",this.showCalendarOnMouseDown=!1,this.min="",this.max="9999-12-31",this.noTimeZoneConversion=!1,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.parseValue=()=>{var t;return"string"!=typeof this.value?this.value:this.noTimeZoneConversion?(t=this.value.split(/Z|([+-]\d\d:\d\d)/)[0],parseISO(t)):parseISO(this.value)},this.formatValueAsDate=t=>format(t,this.format||defaultDateFormat),this.formatValueAsTime=t=>format(t,this.timeFormat||defaultTimeFormat),this.formatValueAsDateTime=t=>""+this.formatValueAsDate(t)+(this.dateTimeText?` ${this.dateTimeText} `:" ")+this.formatValueAsTime(t),this.formatValue=()=>{var t=this.parseValue();if(!isValid(t))return"";switch(this.variant){case"date":return this.formatValueAsDate(t);case"time":return this.formatValueAsTime(t);case"date-time":return this.formatValueAsDateTime(t);default:return""}}}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:a}=t,t=new Date(t,e,a);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}}renderStaticDate(){return html`<span>${this.formatValue()}</span>`}renderDateInput(){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}">${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>`}render(){return"static"===this.type?this.renderStaticDate():this.renderDateInput()}}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,"variant",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,"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([property({type:Boolean,attribute:"no-time-zone-conversion"})],IxDate.prototype,"noTimeZoneConversion",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.d.ts

@@ -1,3 +1,5 @@
+export declare const defaultDateFormat = "dd/MM/yyyy";
+export declare const defaultTimeFormat = "HH:mm";
 declare class DateFormatState {
     constructor();
     preferredDateFormat: string;

package/dist/state/date-format-state.js

@@ -1,9 +1,11 @@
 import { makeAutoObservable } from 'mobx';
 import { makePersistable, isHydrated, hydrateStore, clearPersistedStore, getPersistedStore, } from 'mobx-persist-store';
+export const defaultDateFormat = 'dd/MM/yyyy';
+export const defaultTimeFormat = 'HH:mm';
 class DateFormatState {
     constructor() {
-        this.preferredDateFormat = 'dd/MM/yyyy';
-        this.preferredTimeFormat = 'HH:mm';
+        this.preferredDateFormat = defaultDateFormat;
+        this.preferredTimeFormat = defaultTimeFormat;
         makeAutoObservable(this);
         makePersistable(this, {
             name: 'date-format',

package/dist/state/date-format-state.js.map

@@ -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"]}
+{"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,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;AAEzC,MAAM,eAAe;IACnB;QASO,wBAAmB,GAAW,iBAAiB,CAAC;QAEhD,wBAAmB,GAAW,iBAAiB,CAAC;QAVrD,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\nexport const defaultDateFormat = 'dd/MM/yyyy';\nexport const defaultTimeFormat = 'HH:mm';\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 = defaultDateFormat;\n\n  public preferredTimeFormat: string = defaultTimeFormat;\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

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-date following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,9 @@
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@types/glob": "^8.1.0",
+    "@types/timezoned-date": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@web/dev-server": "^0.1.34",
@@ -52,12 +54,14 @@
     "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
+    "mockdate": "^3.0.5",
     "prettier": "^2.4.1",
     "rollup": "^4.29.1",
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-summary": "^2.0.0",
     "rollup-plugin-uglify": "^6.0.4",
+    "timezoned-date": "^3.0.2",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
@@ -108,5 +112,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "9cbf40ec90ee95771ba1a35595d73bdbd9c4bd22"
+  "gitHead": "d37e3ce6b4ce957dac894bab5320e2f21b83a57b"
 }