@triptease/tt-date-picker 6.1.3 → 6.2.0

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/TtDatePicker.js

@@ -0,0 +1,220 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtDatePicker = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const luxon_1 = require("luxon");
+const icons_1 = require("@triptease/icons");
+const date_selection_context_js_1 = require("@triptease/tt-calendar/date-selection-context.js");
+const helpers_js_1 = require("./helpers.js");
+const styles_js_1 = require("./styles.js");
+class TtDatePicker extends lit_1.LitElement {
+    // Internal DateTime properties for calculations
+    get _valueDateTime() {
+        return this.value ? luxon_1.DateTime.fromISO(this.value) : undefined;
+    }
+    get _minDateTime() {
+        return this.minDate ? luxon_1.DateTime.fromJSDate(this.minDate) : undefined;
+    }
+    get _maxDateTime() {
+        return this.maxDate ? luxon_1.DateTime.fromJSDate(this.maxDate) : undefined;
+    }
+    get _formValue() {
+        return this.value ?? '';
+    }
+    constructor() {
+        super();
+        this.openLeft = false;
+        this.disabled = false;
+        this._open = false;
+        this._onDialogOpen = () => {
+            this._open = true;
+        };
+        this._onDialogClose = () => {
+            this._open = false;
+        };
+        this.onFocusOut = (event) => {
+            if (!this._open)
+                return;
+            const target = (event.relatedTarget ?? event.explicitOriginalTarget);
+            if (!this.contains(target)) {
+                this.dialog.hide();
+            }
+        };
+        this._onFocus = () => {
+            this.dateInput.focus();
+        };
+        this.internals = this.attachInternals();
+    }
+    onDateChange(e) {
+        if (date_selection_context_js_1.DateSelectionEvent.is(e)) {
+            this.value = e.detail;
+        }
+        else if (e.type === 'change') {
+            this.value = e.target.value;
+        }
+        this.dispatchEvent(new InputEvent('change'));
+        this.dialog.hide();
+    }
+    get form() {
+        return this.internals.form;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.internals.setFormValue(this._formValue);
+            this.validate();
+        }
+        if (changedProperties.has('disabled')) {
+            if (this.disabled) {
+                this.internals.setFormValue(null);
+                this.internals.states.add('disabled');
+                this.inert = true;
+            }
+            else {
+                this.internals.states.delete('disabled');
+                this.internals.setFormValue(this._formValue);
+                this.inert = false;
+            }
+        }
+    }
+    validate() {
+        const wasValid = this.internals.validity.valid;
+        const oldMessage = this.internals.validationMessage;
+        this.internals.setValidity({});
+        if (this._valueDateTime) {
+            const minDateIsValid = !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);
+            if (!minDateIsValid) {
+                this.internals.setValidity({ rangeUnderflow: true }, `Date should be equal or after ${this._minDateTime?.toLocaleString({
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                })}`);
+                return;
+            }
+            const maxDateIsValid = !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;
+            if (!maxDateIsValid) {
+                this.internals.setValidity({ rangeOverflow: true }, `Date should be before or equal to ${this._maxDateTime?.toLocaleString({
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                })}`);
+                return;
+            }
+        }
+        if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {
+            this.requestUpdate();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('date-selection', this.onDateChange);
+        this.addEventListener('dialog-open', this._onDialogOpen);
+        this.addEventListener('dialog-close', this._onDialogClose);
+        this.addEventListener('focusout', this.onFocusOut);
+        this.addEventListener('focus', this._onFocus);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('date-selection', this.onDateChange);
+        this.removeEventListener('dialog-open', this._onDialogOpen);
+        this.removeEventListener('dialog-close', this._onDialogClose);
+        this.removeEventListener('focusout', this.onFocusOut);
+        this.removeEventListener('focus', this._onFocus);
+    }
+    showCalendar() {
+        if (!this._open) {
+            this.dialog.show();
+            if (this.openLeft) {
+                this.style.setProperty('--calendar-left-distance', '-192px');
+            }
+        }
+        else {
+            this.dialog.hide();
+        }
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div part="controls" aria-invalid=${!this.internals.validity.valid} aria-disabled="${this.disabled}">
+        <div name="container" part="container">
+          <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>
+        </div>
+        <button
+          name="Show calendar"
+          @click=${this.showCalendar}
+          class="show-calendar"
+          aria-label="Choose date, ${this}"
+          ?disabled=${this.disabled}
+        >
+          ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.calendarIcon)}
+        </button>
+      </div>
+      <tt-dialog name="calendar" aria-label="Choose date" part="dialog">
+        <tt-calendar
+          .value="${this.value}"
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          part="calendar"
+        ></tt-calendar>
+      </tt-dialog>
+      <div class="errormessage" id="error-msg-${this.id}" role="alert" aria-atomic="true" part="error">
+        ${this.internals.validity.valid ? lit_1.nothing : this.internals.validationMessage}
+      </div>
+    `;
+    }
+}
+exports.TtDatePicker = TtDatePicker;
+TtDatePicker.styles = [
+    styles_js_1.styles,
+    (0, lit_1.css) `
+      [part='controls'] {
+        min-width: 19.1ch;
+      }
+    `,
+];
+TtDatePicker.formAssociated = true;
+TtDatePicker.shadowRootOptions = {
+    ...lit_1.LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    (0, decorators_js_1.query)('tt-calendar')
+], TtDatePicker.prototype, "calendar", void 0);
+__decorate([
+    (0, decorators_js_1.query)('tt-dialog')
+], TtDatePicker.prototype, "dialog", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtDatePicker.prototype, "value", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: Date,
+        converter: helpers_js_1.dateConverter,
+    })
+], TtDatePicker.prototype, "minDate", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: Date,
+        converter: helpers_js_1.dateConverter,
+    })
+], TtDatePicker.prototype, "maxDate", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'open-left' })
+], TtDatePicker.prototype, "openLeft", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], TtDatePicker.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtDatePicker.prototype, "_open", void 0);
+__decorate([
+    (0, decorators_js_1.query)('tt-date-input')
+], TtDatePicker.prototype, "dateInput", void 0);
+//# sourceMappingURL=TtDatePicker.js.map

package/dist/{src → cjs/src}/TtDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../src/TtDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n  static styles = [\n    styles,\n    css`\n      [part='controls'] {\n        min-width: 19.1ch;\n      }\n    `,\n  ];\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @query('tt-calendar')\n  calendar!: Calendar;\n\n  @query('tt-dialog')\n  dialog!: TtDialog;\n\n  @property({ type: String })\n  public value?: string;\n\n  @property({\n    type: Date,\n    converter: dateConverter,\n  })\n  public minDate?: Date;\n\n  @property({\n    type: Date,\n    converter: dateConverter,\n  })\n  public maxDate?: Date;\n\n  @property({ type: Boolean, attribute: 'open-left' })\n  public openLeft = false;\n\n  @property({ type: Boolean })\n  public disabled = false;\n\n  // Internal DateTime properties for calculations\n  private get _valueDateTime(): DateTime | undefined {\n    return this.value ? DateTime.fromISO(this.value) : undefined;\n  }\n\n  private get _minDateTime(): DateTime | undefined {\n    return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n  }\n\n  private get _maxDateTime(): DateTime | undefined {\n    return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n  }\n\n  @state()\n  private _open: boolean = false;\n\n  @query('tt-date-input')\n  private dateInput!: DateInput;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  private get _formValue(): string {\n    return this.value ?? '';\n  }\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  onDateChange(e: Event) {\n    if (DateSelectionEvent.is(e)) {\n      this.value = e.detail;\n    } else if (e.type === 'change') {\n      this.value = (e.target as HTMLInputElement).value;\n    }\n\n    this.dispatchEvent(new InputEvent('change'));\n    this.dialog.hide();\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  public updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this._formValue);\n      this.validate();\n    }\n\n    if (changedProperties.has('disabled')) {\n      if (this.disabled) {\n        this.internals.setFormValue(null);\n        this.internals.states.add('disabled');\n        this.inert = true;\n      } else {\n        this.internals.states.delete('disabled');\n        this.internals.setFormValue(this._formValue);\n        this.inert = false;\n      }\n    }\n  }\n\n  private validate() {\n    const wasValid = this.internals.validity.valid;\n    const oldMessage = this.internals.validationMessage;\n    this.internals.setValidity({});\n\n    if (this._valueDateTime) {\n      const minDateIsValid =\n        !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n      if (!minDateIsValid) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          `Date should be equal or after ${this._minDateTime?.toLocaleString({\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n          })}`\n        );\n        return;\n      }\n      const maxDateIsValid =\n        !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n      if (!maxDateIsValid) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n          })}`\n        );\n        return;\n      }\n    }\n    if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n      this.requestUpdate();\n    }\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('date-selection', this.onDateChange);\n    this.addEventListener('dialog-open', this._onDialogOpen);\n    this.addEventListener('dialog-close', this._onDialogClose);\n    this.addEventListener('focusout', this.onFocusOut);\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  private _onDialogOpen = () => {\n    this._open = true;\n  };\n\n  private _onDialogClose = () => {\n    this._open = false;\n  };\n\n  public onFocusOut = (event: FocusEvent) => {\n    if (!this._open) return;\n\n    const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n    if (!this.contains(target)) {\n      this.dialog.hide();\n    }\n  };\n\n  private _onFocus = () => {\n    this.dateInput.focus();\n  };\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('date-selection', this.onDateChange);\n    this.removeEventListener('dialog-open', this._onDialogOpen);\n    this.removeEventListener('dialog-close', this._onDialogClose);\n    this.removeEventListener('focusout', this.onFocusOut);\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  showCalendar() {\n    if (!this._open) {\n      this.dialog.show();\n\n      if (this.openLeft) {\n        this.style.setProperty('--calendar-left-distance', '-192px');\n      }\n    } else {\n      this.dialog.hide();\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n        <div name=\"container\" part=\"container\">\n          <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n        </div>\n        <button\n          name=\"Show calendar\"\n          @click=${this.showCalendar}\n          class=\"show-calendar\"\n          aria-label=\"Choose date, ${this}\"\n          ?disabled=${this.disabled}\n        >\n          ${unsafeSVG(calendarIcon)}\n        </button>\n      </div>\n      <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n        <tt-calendar\n          .value=\"${this.value}\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          part=\"calendar\"\n        ></tt-calendar>\n      </tt-dialog>\n      <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n        ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-picker': TtDatePicker;\n  }\n}\n"]}
+{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../../src/TtDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n  static styles = [\n    styles,\n    css`\n      [part='controls'] {\n        min-width: 19.1ch;\n      }\n    `,\n  ];\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @query('tt-calendar')\n  calendar!: Calendar;\n\n  @query('tt-dialog')\n  dialog!: TtDialog;\n\n  @property({ type: String })\n  public value?: string;\n\n  @property({\n    type: Date,\n    converter: dateConverter,\n  })\n  public minDate?: Date;\n\n  @property({\n    type: Date,\n    converter: dateConverter,\n  })\n  public maxDate?: Date;\n\n  @property({ type: Boolean, attribute: 'open-left' })\n  public openLeft = false;\n\n  @property({ type: Boolean })\n  public disabled = false;\n\n  // Internal DateTime properties for calculations\n  private get _valueDateTime(): DateTime | undefined {\n    return this.value ? DateTime.fromISO(this.value) : undefined;\n  }\n\n  private get _minDateTime(): DateTime | undefined {\n    return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n  }\n\n  private get _maxDateTime(): DateTime | undefined {\n    return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n  }\n\n  @state()\n  private _open: boolean = false;\n\n  @query('tt-date-input')\n  private dateInput!: DateInput;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  private get _formValue(): string {\n    return this.value ?? '';\n  }\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  onDateChange(e: Event) {\n    if (DateSelectionEvent.is(e)) {\n      this.value = e.detail;\n    } else if (e.type === 'change') {\n      this.value = (e.target as HTMLInputElement).value;\n    }\n\n    this.dispatchEvent(new InputEvent('change'));\n    this.dialog.hide();\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  public updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this._formValue);\n      this.validate();\n    }\n\n    if (changedProperties.has('disabled')) {\n      if (this.disabled) {\n        this.internals.setFormValue(null);\n        this.internals.states.add('disabled');\n        this.inert = true;\n      } else {\n        this.internals.states.delete('disabled');\n        this.internals.setFormValue(this._formValue);\n        this.inert = false;\n      }\n    }\n  }\n\n  private validate() {\n    const wasValid = this.internals.validity.valid;\n    const oldMessage = this.internals.validationMessage;\n    this.internals.setValidity({});\n\n    if (this._valueDateTime) {\n      const minDateIsValid =\n        !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n      if (!minDateIsValid) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          `Date should be equal or after ${this._minDateTime?.toLocaleString({\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n          })}`\n        );\n        return;\n      }\n      const maxDateIsValid =\n        !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n      if (!maxDateIsValid) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n          })}`\n        );\n        return;\n      }\n    }\n    if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n      this.requestUpdate();\n    }\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('date-selection', this.onDateChange);\n    this.addEventListener('dialog-open', this._onDialogOpen);\n    this.addEventListener('dialog-close', this._onDialogClose);\n    this.addEventListener('focusout', this.onFocusOut);\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  private _onDialogOpen = () => {\n    this._open = true;\n  };\n\n  private _onDialogClose = () => {\n    this._open = false;\n  };\n\n  public onFocusOut = (event: FocusEvent) => {\n    if (!this._open) return;\n\n    const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n    if (!this.contains(target)) {\n      this.dialog.hide();\n    }\n  };\n\n  private _onFocus = () => {\n    this.dateInput.focus();\n  };\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('date-selection', this.onDateChange);\n    this.removeEventListener('dialog-open', this._onDialogOpen);\n    this.removeEventListener('dialog-close', this._onDialogClose);\n    this.removeEventListener('focusout', this.onFocusOut);\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  showCalendar() {\n    if (!this._open) {\n      this.dialog.show();\n\n      if (this.openLeft) {\n        this.style.setProperty('--calendar-left-distance', '-192px');\n      }\n    } else {\n      this.dialog.hide();\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n        <div name=\"container\" part=\"container\">\n          <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n        </div>\n        <button\n          name=\"Show calendar\"\n          @click=${this.showCalendar}\n          class=\"show-calendar\"\n          aria-label=\"Choose date, ${this}\"\n          ?disabled=${this.disabled}\n        >\n          ${unsafeSVG(calendarIcon)}\n        </button>\n      </div>\n      <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n        <tt-calendar\n          .value=\"${this.value}\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          part=\"calendar\"\n        ></tt-calendar>\n      </tt-dialog>\n      <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n        ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-picker': TtDatePicker;\n  }\n}\n"]}

package/dist/cjs/src/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateTimeConverter = exports.dateConverter = void 0;
+const luxon_1 = require("luxon");
+const dateConverter = (value) => value ? luxon_1.DateTime.fromISO(value).toJSDate() : undefined;
+exports.dateConverter = dateConverter;
+const dateTimeConverter = (value) => value ? luxon_1.DateTime.fromISO(value) : undefined;
+exports.dateTimeConverter = dateTimeConverter;
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/src/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/helpers.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AAE1B,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAoB,EAAE,CACtE,KAAK,CAAC,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAD5C,QAAA,aAAa,iBAC+B;AAElD,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAwB,EAAE,CAC9E,KAAK,CAAC,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AADjC,QAAA,iBAAiB,qBACgB","sourcesContent":["import { DateTime } from 'luxon';\n\nexport const dateConverter = (value: string | null): Date | undefined =>\n  value ? DateTime.fromISO(value).toJSDate() : undefined;\n\nexport const dateTimeConverter = (value: string | null): DateTime | undefined =>\n  value ? DateTime.fromISO(value) : undefined;\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtDatePicker = void 0;
+__exportStar(require("./types.js"), exports);
+var tt_date_picker_js_1 = require("./tt-date-picker.js");
+Object.defineProperty(exports, "TtDatePicker", { enumerable: true, get: function () { return tt_date_picker_js_1.TtDatePicker; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,6CAA2B;AAC3B,yDAAmD;AAA1C,iHAAA,YAAY,OAAA","sourcesContent":["export * from './types.js';\nexport { TtDatePicker } from './tt-date-picker.js';\n"]}

package/dist/cjs/src/styles.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const lit_1 = require("lit");
+exports.styles = (0, lit_1.css) `
+  :host {
+    position: relative;
+  }
+
+  :host(:state(disabled)) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  tt-side-panel::part(side-panel) {
+    border-right: 1px solid var(--color-border-200);
+  }
+
+  tt-side-panel:empty {
+    display: none;
+  }
+
+  [part='container'] {
+    padding: var(--space-scale-1) var(--space-scale-1-5);
+    gap: var(--space-scale-1);
+  }
+
+  [part='controls'] {
+    display: flex;
+    border: 1px solid var(--color-border-200);
+    border-radius: var(--border-radius);
+    width: fit-content;
+    height: var(--date-picker-height, fit-content);
+    background-color: var(--color-surface-100);
+    font-size: var(--font-size-200);
+    color: var(--color-text-400);
+    align-items: stretch;
+    justify-content: space-around;
+    padding: 0;
+
+    &[aria-invalid='true'] {
+      outline: 2px solid var(--color-alert-strong);
+    }
+
+    button {
+      border: 0;
+      padding-inline: var(--space-scale-1);
+      background-color: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-self: stretch;
+      border-left: 1px solid var(--color-border-200);
+      box-sizing: border-box;
+      color: var(--color-text-400);
+    }
+
+    &:has(+ tt-dialog[open]) .show-calendar svg,
+    .show-calendar:hover svg {
+      color: var(--color-primary-400);
+    }
+  }
+
+  [part='dialog']::part(dialog) {
+    margin-top: var(--space-scale-1);
+    flex-direction: row-reverse;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    position: relative;\n  }\n\n  :host(:state(disabled)) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  tt-side-panel::part(side-panel) {\n    border-right: 1px solid var(--color-border-200);\n  }\n\n  tt-side-panel:empty {\n    display: none;\n  }\n\n  [part='container'] {\n    padding: var(--space-scale-1) var(--space-scale-1-5);\n    gap: var(--space-scale-1);\n  }\n\n  [part='controls'] {\n    display: flex;\n    border: 1px solid var(--color-border-200);\n    border-radius: var(--border-radius);\n    width: fit-content;\n    height: var(--date-picker-height, fit-content);\n    background-color: var(--color-surface-100);\n    font-size: var(--font-size-200);\n    color: var(--color-text-400);\n    align-items: stretch;\n    justify-content: space-around;\n    padding: 0;\n\n    &[aria-invalid='true'] {\n      outline: 2px solid var(--color-alert-strong);\n    }\n\n    button {\n      border: 0;\n      padding-inline: var(--space-scale-1);\n      background-color: transparent;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      align-self: stretch;\n      border-left: 1px solid var(--color-border-200);\n      box-sizing: border-box;\n      color: var(--color-text-400);\n    }\n\n    &:has(+ tt-dialog[open]) .show-calendar svg,\n    .show-calendar:hover svg {\n      color: var(--color-primary-400);\n    }\n  }\n\n  [part='dialog']::part(dialog) {\n    margin-top: var(--space-scale-1);\n    flex-direction: row-reverse;\n  }\n`;\n"]}

package/dist/cjs/src/tt-date-picker.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtDatePicker = void 0;
+const tt_calendar_js_1 = require("@triptease/tt-calendar/tt-calendar.js");
+const tt_date_input_js_1 = require("@triptease/tt-date-input/tt-date-input.js");
+const tt_dialog_js_1 = require("@triptease/tt-dialog/tt-dialog.js");
+const TtDatePicker_js_1 = require("./TtDatePicker.js");
+Object.defineProperty(exports, "TtDatePicker", { enumerable: true, get: function () { return TtDatePicker_js_1.TtDatePicker; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-calendar')) {
+        window.customElements.define('tt-calendar', tt_calendar_js_1.Calendar);
+    }
+    if (!window.customElements.get('tt-date-input')) {
+        window.customElements.define('tt-date-input', tt_date_input_js_1.DateInput);
+    }
+    if (!window.customElements.get('tt-dialog')) {
+        window.customElements.define('tt-dialog', tt_dialog_js_1.TtDialog);
+    }
+    if (!window.customElements.get('tt-date-picker')) {
+        window.customElements.define('tt-date-picker', TtDatePicker_js_1.TtDatePicker);
+    }
+}
+//# sourceMappingURL=tt-date-picker.js.map

package/dist/cjs/src/tt-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-date-picker.js","sourceRoot":"","sources":["../../../src/tt-date-picker.ts"],"names":[],"mappings":";;;AAAA,0EAAiE;AACjE,gFAAsE;AACtE,oEAA6D;AAC7D,uDAAiD;AAmBxC,6FAnBA,8BAAY,OAmBA;AAjBrB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,yBAAQ,CAAC,CAAC;IACxD,CAAC;IACD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;QAChD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,4BAAS,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,uBAAQ,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;QACjD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,8BAAY,CAAC,CAAC;IAC/D,CAAC;AACH,CAAC","sourcesContent":["import { Calendar } from '@triptease/tt-calendar/tt-calendar.js';\nimport { DateInput } from '@triptease/tt-date-input/tt-date-input.js';\nimport { TtDialog } from '@triptease/tt-dialog/tt-dialog.js';\nimport { TtDatePicker } from './TtDatePicker.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-calendar')) {\n    window.customElements.define('tt-calendar', Calendar);\n  }\n  if (!window.customElements.get('tt-date-input')) {\n    window.customElements.define('tt-date-input', DateInput);\n  }\n\n  if (!window.customElements.get('tt-dialog')) {\n    window.customElements.define('tt-dialog', TtDialog);\n  }\n\n  if (!window.customElements.get('tt-date-picker')) {\n    window.customElements.define('tt-date-picker', TtDatePicker);\n  }\n}\n\nexport { TtDatePicker };\n"]}

package/dist/cjs/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDatePicker } from './TtDatePicker.js';\n\ninterface TtDatePickerExternalAttributes {\n  id?: string;\n  value?: string;\n  disabled?: boolean;\n  'open-left'?: boolean;\n  name?: string;\n  minDate?: string;\n  maxDate?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-picker': TtDatePicker;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-date-picker': TtDatePickerExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-date-picker': TtDatePickerExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/TtDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtDatePicker.js","sourceRoot":"","sources":["../../../src/TtDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { calendarIcon } from '@triptease/icons';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { dateConverter } from './helpers.js';\nimport { styles } from './styles.js';\n\nexport class TtDatePicker extends LitElement {\n  static styles = [\n    styles,\n    css`\n      [part='controls'] {\n        min-width: 19.1ch;\n      }\n    `,\n  ];\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @query('tt-calendar')\n  calendar!: Calendar;\n\n  @query('tt-dialog')\n  dialog!: TtDialog;\n\n  @property({ type: String })\n  public value?: string;\n\n  @property({\n    type: Date,\n    converter: dateConverter,\n  })\n  public minDate?: Date;\n\n  @property({\n    type: Date,\n    converter: dateConverter,\n  })\n  public maxDate?: Date;\n\n  @property({ type: Boolean, attribute: 'open-left' })\n  public openLeft = false;\n\n  @property({ type: Boolean })\n  public disabled = false;\n\n  // Internal DateTime properties for calculations\n  private get _valueDateTime(): DateTime | undefined {\n    return this.value ? DateTime.fromISO(this.value) : undefined;\n  }\n\n  private get _minDateTime(): DateTime | undefined {\n    return this.minDate ? DateTime.fromJSDate(this.minDate) : undefined;\n  }\n\n  private get _maxDateTime(): DateTime | undefined {\n    return this.maxDate ? DateTime.fromJSDate(this.maxDate) : undefined;\n  }\n\n  @state()\n  private _open: boolean = false;\n\n  @query('tt-date-input')\n  private dateInput!: DateInput;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  private get _formValue(): string {\n    return this.value ?? '';\n  }\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  onDateChange(e: Event) {\n    if (DateSelectionEvent.is(e)) {\n      this.value = e.detail;\n    } else if (e.type === 'change') {\n      this.value = (e.target as HTMLInputElement).value;\n    }\n\n    this.dispatchEvent(new InputEvent('change'));\n    this.dialog.hide();\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  public updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this._formValue);\n      this.validate();\n    }\n\n    if (changedProperties.has('disabled')) {\n      if (this.disabled) {\n        this.internals.setFormValue(null);\n        this.internals.states.add('disabled');\n        this.inert = true;\n      } else {\n        this.internals.states.delete('disabled');\n        this.internals.setFormValue(this._formValue);\n        this.inert = false;\n      }\n    }\n  }\n\n  private validate() {\n    const wasValid = this.internals.validity.valid;\n    const oldMessage = this.internals.validationMessage;\n    this.internals.setValidity({});\n\n    if (this._valueDateTime) {\n      const minDateIsValid =\n        !this._minDateTime || this._valueDateTime > this._minDateTime || this._valueDateTime.equals(this._minDateTime);\n      if (!minDateIsValid) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          `Date should be equal or after ${this._minDateTime?.toLocaleString({\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n          })}`\n        );\n        return;\n      }\n      const maxDateIsValid =\n        !this._maxDateTime || this._valueDateTime.equals(this._maxDateTime) || this._valueDateTime < this._maxDateTime;\n      if (!maxDateIsValid) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          `Date should be before or equal to ${this._maxDateTime?.toLocaleString({\n            month: 'short',\n            day: 'numeric',\n            year: 'numeric',\n          })}`\n        );\n        return;\n      }\n    }\n    if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n      this.requestUpdate();\n    }\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('date-selection', this.onDateChange);\n    this.addEventListener('dialog-open', this._onDialogOpen);\n    this.addEventListener('dialog-close', this._onDialogClose);\n    this.addEventListener('focusout', this.onFocusOut);\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  private _onDialogOpen = () => {\n    this._open = true;\n  };\n\n  private _onDialogClose = () => {\n    this._open = false;\n  };\n\n  public onFocusOut = (event: FocusEvent) => {\n    if (!this._open) return;\n\n    const target = (event.relatedTarget ?? event.explicitOriginalTarget) as HTMLElement | null;\n\n    if (!this.contains(target)) {\n      this.dialog.hide();\n    }\n  };\n\n  private _onFocus = () => {\n    this.dateInput.focus();\n  };\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('date-selection', this.onDateChange);\n    this.removeEventListener('dialog-open', this._onDialogOpen);\n    this.removeEventListener('dialog-close', this._onDialogClose);\n    this.removeEventListener('focusout', this.onFocusOut);\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  showCalendar() {\n    if (!this._open) {\n      this.dialog.show();\n\n      if (this.openLeft) {\n        this.style.setProperty('--calendar-left-distance', '-192px');\n      }\n    } else {\n      this.dialog.hide();\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"controls\" aria-invalid=${!this.internals.validity.valid} aria-disabled=\"${this.disabled}\">\n        <div name=\"container\" part=\"container\">\n          <tt-date-input @change=${this.onDateChange} .value=${this.value} .disabled=${this.disabled}></tt-date-input>\n        </div>\n        <button\n          name=\"Show calendar\"\n          @click=${this.showCalendar}\n          class=\"show-calendar\"\n          aria-label=\"Choose date, ${this}\"\n          ?disabled=${this.disabled}\n        >\n          ${unsafeSVG(calendarIcon)}\n        </button>\n      </div>\n      <tt-dialog name=\"calendar\" aria-label=\"Choose date\" part=\"dialog\">\n        <tt-calendar\n          .value=\"${this.value}\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          part=\"calendar\"\n        ></tt-calendar>\n      </tt-dialog>\n      <div class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" part=\"error\">\n        ${this.internals.validity.valid ? nothing : this.internals.validationMessage}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-picker': TtDatePicker;\n  }\n}\n"]}

package/dist/esm/src/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAoB,EAAE,CACtE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAEzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAwB,EAAE,CAC9E,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["import { DateTime } from 'luxon';\n\nexport const dateConverter = (value: string | null): Date | undefined =>\n  value ? DateTime.fromISO(value).toJSDate() : undefined;\n\nexport const dateTimeConverter = (value: string | null): DateTime | undefined =>\n  value ? DateTime.fromISO(value) : undefined;\n"]}

package/dist/esm/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export * from './types.js';\nexport { TtDatePicker } from './tt-date-picker.js';\n"]}

package/dist/{src → esm/src}/styles.js

@@ -36,7 +36,7 @@ export const styles = css `
     padding: 0;
 
     &[aria-invalid='true'] {
-      outline: 2px solid var(--color-alert-300, red);
+      outline: 2px solid var(--color-alert-strong);
     }
 
     button {

package/dist/esm/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    position: relative;\n  }\n\n  :host(:state(disabled)) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  tt-side-panel::part(side-panel) {\n    border-right: 1px solid var(--color-border-200);\n  }\n\n  tt-side-panel:empty {\n    display: none;\n  }\n\n  [part='container'] {\n    padding: var(--space-scale-1) var(--space-scale-1-5);\n    gap: var(--space-scale-1);\n  }\n\n  [part='controls'] {\n    display: flex;\n    border: 1px solid var(--color-border-200);\n    border-radius: var(--border-radius);\n    width: fit-content;\n    height: var(--date-picker-height, fit-content);\n    background-color: var(--color-surface-100);\n    font-size: var(--font-size-200);\n    color: var(--color-text-400);\n    align-items: stretch;\n    justify-content: space-around;\n    padding: 0;\n\n    &[aria-invalid='true'] {\n      outline: 2px solid var(--color-alert-strong);\n    }\n\n    button {\n      border: 0;\n      padding-inline: var(--space-scale-1);\n      background-color: transparent;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      align-self: stretch;\n      border-left: 1px solid var(--color-border-200);\n      box-sizing: border-box;\n      color: var(--color-text-400);\n    }\n\n    &:has(+ tt-dialog[open]) .show-calendar svg,\n    .show-calendar:hover svg {\n      color: var(--color-primary-400);\n    }\n  }\n\n  [part='dialog']::part(dialog) {\n    margin-top: var(--space-scale-1);\n    flex-direction: row-reverse;\n  }\n`;\n"]}

package/dist/esm/src/tt-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-date-picker.js","sourceRoot":"","sources":["../../../src/tt-date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IACxD,CAAC;IACD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;QAChD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;QACjD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;IAC/D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { Calendar } from '@triptease/tt-calendar/tt-calendar.js';\nimport { DateInput } from '@triptease/tt-date-input/tt-date-input.js';\nimport { TtDialog } from '@triptease/tt-dialog/tt-dialog.js';\nimport { TtDatePicker } from './TtDatePicker.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-calendar')) {\n    window.customElements.define('tt-calendar', Calendar);\n  }\n  if (!window.customElements.get('tt-date-input')) {\n    window.customElements.define('tt-date-input', DateInput);\n  }\n\n  if (!window.customElements.get('tt-dialog')) {\n    window.customElements.define('tt-dialog', TtDialog);\n  }\n\n  if (!window.customElements.get('tt-date-picker')) {\n    window.customElements.define('tt-date-picker', TtDatePicker);\n  }\n}\n\nexport { TtDatePicker };\n"]}

package/dist/esm/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDatePicker } from './TtDatePicker.js';\n\ninterface TtDatePickerExternalAttributes {\n  id?: string;\n  value?: string;\n  disabled?: boolean;\n  'open-left'?: boolean;\n  name?: string;\n  minDate?: string;\n  maxDate?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-picker': TtDatePicker;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-date-picker': TtDatePickerExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-date-picker': TtDatePickerExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/test/date-picker.test.d.ts

@@ -0,0 +1 @@
+import '../src/index.js';

package/dist/esm/test/date-picker.test.js

@@ -0,0 +1,57 @@
+import { elementUpdated, expect, fixture, oneDefaultPreventedEvent, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import { Settings } from 'luxon';
+import '../src/index.js'; // This handles the registration
+describe('TtDatePicker', () => {
+    afterEach(() => {
+        Settings.defaultZone = 'system';
+    });
+    ['Australia/Brisbane', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Etc/UTC'].forEach((timezone) => {
+        it('should include date value in form submission data', async () => {
+            Settings.defaultZone = timezone;
+            const form = await fixture(html `
+        <form method="post" action="#">
+          <input type="text" name="other_field" value="test_value" />
+          <tt-date-picker name="booking_date" value="2025-04-16"></tt-date-picker>
+          <button type="submit">Submit</button>
+        </form>
+      `);
+            const datePicker = form.querySelector('tt-date-picker');
+            expect(datePicker).to.exist;
+            await elementUpdated(datePicker);
+            setTimeout(() => form.querySelector('button').click());
+            await oneDefaultPreventedEvent(form, 'submit');
+            const formData = new FormData(form);
+            const dateValue = formData.get('booking_date');
+            const expectedDate = `2025-04-16`;
+            expect(dateValue).to.equal(expectedDate);
+        });
+        it(`should emit change event on date selection for ${timezone}`, async () => {
+            Settings.defaultZone = timezone;
+            const datePicker = await fixture(html ` <tt-date-picker value="2025-05-01"></tt-date-picker> `);
+            const showCalendarButton = datePicker.shadowRoot.querySelector('[name="Show calendar"]');
+            showCalendarButton.click();
+            await elementUpdated(datePicker);
+            const changeEventPromise = oneEvent(datePicker, 'change');
+            const calendar = datePicker.shadowRoot.querySelector('tt-calendar');
+            const desiredDate = calendar.shadowRoot.querySelector('[role="gridcell"][data-date="2025-05-02"]');
+            desiredDate.click();
+            await elementUpdated(datePicker);
+            const event = await changeEventPromise;
+            const eventValue = event.target.value;
+            const expectedEndDate = '2025-05-02';
+            expect(eventValue).to.equal(expectedEndDate);
+        });
+    });
+    it('should disable the date picker when disabled attribute is set', async () => {
+        const datePicker = await fixture(html `
+      <tt-date-picker value="2025-05-01" disabled></tt-date-picker>
+    `);
+        expect(datePicker.inert).to.be.true;
+        const showCalendarButton = datePicker.shadowRoot.querySelector('button.show-calendar');
+        showCalendarButton.click();
+        const dialog = datePicker.shadowRoot.querySelector('tt-dialog');
+        expect(dialog.open).to.be.false;
+    });
+});
+//# sourceMappingURL=date-picker.test.js.map

package/dist/esm/test/date-picker.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.test.js","sourceRoot":"","sources":["../../../test/date-picker.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { elementUpdated, expect, fixture, oneDefaultPreventedEvent, oneEvent } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { Settings } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport '../src/index.js'; // This handles the registration\nimport { TtDatePicker } from '../src/index.js';\n\ndescribe('TtDatePicker', () => {\n  afterEach(() => {\n    Settings.defaultZone = 'system';\n  });\n\n  ['Australia/Brisbane', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Etc/UTC'].forEach((timezone) => {\n    it('should include date value in form submission data', async () => {\n      Settings.defaultZone = timezone;\n      const form = await fixture<HTMLFormElement>(html`\n        <form method=\"post\" action=\"#\">\n          <input type=\"text\" name=\"other_field\" value=\"test_value\" />\n          <tt-date-picker name=\"booking_date\" value=\"2025-04-16\"></tt-date-picker>\n          <button type=\"submit\">Submit</button>\n        </form>\n      `);\n\n      const datePicker = form.querySelector('tt-date-picker') as TtDatePicker;\n      expect(datePicker).to.exist;\n\n      await elementUpdated(datePicker);\n\n      setTimeout(() => form.querySelector('button')!.click());\n      await oneDefaultPreventedEvent(form, 'submit');\n\n      const formData = new FormData(form);\n      const dateValue = formData.get('booking_date');\n      const expectedDate = `2025-04-16`;\n\n      expect(dateValue).to.equal(expectedDate);\n    });\n\n    it(`should emit change event on date selection for ${timezone}`, async () => {\n      Settings.defaultZone = timezone;\n      const datePicker = await fixture<TtDatePicker>(html` <tt-date-picker value=\"2025-05-01\"></tt-date-picker> `);\n\n      const showCalendarButton = datePicker.shadowRoot!.querySelector('[name=\"Show calendar\"]') as HTMLButtonElement;\n      showCalendarButton.click();\n      await elementUpdated(datePicker);\n\n      const changeEventPromise = oneEvent(datePicker, 'change');\n\n      const calendar = datePicker.shadowRoot!.querySelector('tt-calendar')!;\n      const desiredDate = calendar.shadowRoot!.querySelector(\n        '[role=\"gridcell\"][data-date=\"2025-05-02\"]'\n      ) as HTMLLIElement;\n      desiredDate.click();\n      await elementUpdated(datePicker);\n\n      const event = await changeEventPromise;\n      const eventValue = (event.target as TtDatePicker).value;\n\n      const expectedEndDate = '2025-05-02';\n\n      expect(eventValue).to.equal(expectedEndDate);\n    });\n  });\n\n  it('should disable the date picker when disabled attribute is set', async () => {\n    const datePicker = await fixture<TtDatePicker>(html`\n      <tt-date-picker value=\"2025-05-01\" disabled></tt-date-picker>\n    `);\n\n    expect(datePicker.inert).to.be.true;\n\n    const showCalendarButton = datePicker.shadowRoot!.querySelector('button.show-calendar') as HTMLButtonElement;\n    showCalendarButton.click();\n\n    const dialog = datePicker.shadowRoot!.querySelector('tt-dialog') as TtDialog;\n    expect(dialog.open).to.be.false;\n  });\n});\n"]}

package/package.json

@@ -3,28 +3,33 @@
   "description": "Webcomponent tt-date-picker following open-wc recommendations",
   "license": "MIT",
   "author": "@triptease",
-  "version": "6.1.3",
+  "version": "6.2.0",
   "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
   "exports": {
     ".": {
-      "import": "./dist/src/index.js",
-      "types": "./dist/src/types.d.ts"
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
     },
     "./tt-date-picker.js": {
-      "import": "./dist/src/tt-date-picker.js",
-      "types": "./dist/src/types.d.ts"
+      "types": "./dist/esm/src/tt-date-picker.d.ts",
+      "import": "./dist/esm/src/tt-date-picker.js",
+      "require": "./dist/cjs/src/tt-date-picker.js"
     }
   },
   "files": [
-    "dist/src"
+    "dist/esm",
+    "dist/cjs"
   ],
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
     "build": "yarn build:node && yarn build:web && npm run analyze -- --exclude dist",
-    "build:node": "tsc",
+    "build:esm": "tsc",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
     "build:node:watch": "tsc --watch",
     "build:web": "node ../../scripts/esbuild.mjs",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
@@ -32,10 +37,10 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@triptease/icons": "1.3.14",
-    "@triptease/tt-calendar": "6.0.17",
-    "@triptease/tt-date-input": "6.0.6",
-    "@triptease/tt-dialog": "5.1.1",
+    "@triptease/icons": "1.4.0",
+    "@triptease/tt-calendar": "6.1.0",
+    "@triptease/tt-date-input": "6.1.0",
+    "@triptease/tt-dialog": "5.2.0",
     "@types/luxon": "^3.6.2",
     "lit": "^3.1.4",
     "luxon": "^3.6.1"

package/dist/src/helpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAoB,EAAE,CACtE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAEzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAwB,EAAE,CAC9E,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["import { DateTime } from 'luxon';\n\nexport const dateConverter = (value: string | null): Date | undefined =>\n  value ? DateTime.fromISO(value).toJSDate() : undefined;\n\nexport const dateTimeConverter = (value: string | null): DateTime | undefined =>\n  value ? DateTime.fromISO(value) : undefined;\n"]}

package/dist/src/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export * from './types.js';\nexport { TtDatePicker } from './tt-date-picker.js';\n"]}

package/dist/src/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    position: relative;\n  }\n\n  :host(:state(disabled)) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  tt-side-panel::part(side-panel) {\n    border-right: 1px solid var(--color-border-200);\n  }\n\n  tt-side-panel:empty {\n    display: none;\n  }\n\n  [part='container'] {\n    padding: var(--space-scale-1) var(--space-scale-1-5);\n    gap: var(--space-scale-1);\n  }\n\n  [part='controls'] {\n    display: flex;\n    border: 1px solid var(--color-border-200);\n    border-radius: var(--border-radius);\n    width: fit-content;\n    height: var(--date-picker-height, fit-content);\n    background-color: var(--color-surface-100);\n    font-size: var(--font-size-200);\n    color: var(--color-text-400);\n    align-items: stretch;\n    justify-content: space-around;\n    padding: 0;\n\n    &[aria-invalid='true'] {\n      outline: 2px solid var(--color-alert-300, red);\n    }\n\n    button {\n      border: 0;\n      padding-inline: var(--space-scale-1);\n      background-color: transparent;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      align-self: stretch;\n      border-left: 1px solid var(--color-border-200);\n      box-sizing: border-box;\n      color: var(--color-text-400);\n    }\n\n    &:has(+ tt-dialog[open]) .show-calendar svg,\n    .show-calendar:hover svg {\n      color: var(--color-primary-400);\n    }\n  }\n\n  [part='dialog']::part(dialog) {\n    margin-top: var(--space-scale-1);\n    flex-direction: row-reverse;\n  }\n`;\n"]}

package/dist/src/tt-date-picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tt-date-picker.js","sourceRoot":"","sources":["../../src/tt-date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IACxD,CAAC;IACD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;QAChD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;QACjD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;IAC/D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { Calendar } from '@triptease/tt-calendar/tt-calendar.js';\nimport { DateInput } from '@triptease/tt-date-input/tt-date-input.js';\nimport { TtDialog } from '@triptease/tt-dialog/tt-dialog.js';\nimport { TtDatePicker } from './TtDatePicker.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-calendar')) {\n    window.customElements.define('tt-calendar', Calendar);\n  }\n  if (!window.customElements.get('tt-date-input')) {\n    window.customElements.define('tt-date-input', DateInput);\n  }\n\n  if (!window.customElements.get('tt-dialog')) {\n    window.customElements.define('tt-dialog', TtDialog);\n  }\n\n  if (!window.customElements.get('tt-date-picker')) {\n    window.customElements.define('tt-date-picker', TtDatePicker);\n  }\n}\n\nexport { TtDatePicker };\n"]}

package/dist/src/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtDatePicker } from './TtDatePicker.js';\n\ninterface TtDatePickerExternalAttributes {\n  id?: string;\n  value?: string;\n  disabled?: boolean;\n  'open-left'?: boolean;\n  name?: string;\n  minDate?: string;\n  maxDate?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-picker': TtDatePicker;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-date-picker': TtDatePickerExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-date-picker': TtDatePickerExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}