@triptease/tt-multi-date-picker 0.2.0

package/dist/cjs/package.json

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

package/dist/cjs/src/TtMultiDatePicker.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.TtMultiDatePicker = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const luxon_1 = require("luxon");
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const icons_1 = require("@triptease/icons");
+require("@triptease/tt-calendar/tt-calendar.js");
+const styles_js_1 = require("./styles.js");
+const selection_model_js_1 = require("./selection-model.js");
+class TtMultiDatePicker extends lit_1.LitElement {
+    constructor() {
+        super();
+        this.months = 6;
+        this.value = [];
+        this.name = '';
+        this.required = false;
+        this._currentStartMonth = luxon_1.DateTime.local().startOf('month');
+        this._focusedDate = luxon_1.DateTime.local();
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.startMonth) {
+            this._currentStartMonth = luxon_1.DateTime.fromISO(this.startMonth + '-01');
+        }
+        this._syncForm();
+    }
+    _syncForm() {
+        const val = this.value.length > 0 ? JSON.stringify(this.value) : null;
+        this._internals.setFormValue(val);
+        if (this.required && this.value.length === 0) {
+            this._internals.setValidity({ valueMissing: true }, 'Please select at least one date');
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+    formResetCallback() {
+        this.value = [];
+        this._lastClickedDate = undefined;
+        this._syncForm();
+    }
+    _getMonthList() {
+        return Array.from({ length: this.months }, (_, i) => this._currentStartMonth.plus({ months: i }));
+    }
+    _previousPage() {
+        this._currentStartMonth = this._currentStartMonth.minus({ months: this.months });
+    }
+    _nextPage() {
+        this._currentStartMonth = this._currentStartMonth.plus({ months: this.months });
+    }
+    _getDateRangeLabel() {
+        const first = this._currentStartMonth;
+        const last = this._currentStartMonth.plus({ months: this.months - 1 });
+        return `${first.toFormat('MMMM yyyy')} — ${last.toFormat('MMMM yyyy')}`;
+    }
+    _getCalendarForDate(date) {
+        const monthStr = date.toFormat('yyyy-MM');
+        const calendars = this.shadowRoot.querySelectorAll('tt-calendar');
+        for (const cal of calendars) {
+            if (cal.getAttribute('month') === monthStr)
+                return cal;
+        }
+        return undefined;
+    }
+    _moveFocus(date) {
+        this._focusedDate = date;
+        this.updateComplete.then(() => {
+            const cal = this._getCalendarForDate(date);
+            cal?.focusDay(date);
+        });
+    }
+    _handleDayClick(event) {
+        const target = event.composedPath()[0];
+        const dayCell = target.closest?.('.day') ?? (target.classList?.contains('day') ? target : null);
+        const dateStr = dayCell?.getAttribute('data-date');
+        if (!dateStr)
+            return;
+        this._focusedDate = luxon_1.DateTime.fromISO(dateStr);
+        if (event.shiftKey && this._lastClickedDate) {
+            this.value = (0, selection_model_js_1.extendRange)(this.value, this._lastClickedDate, dateStr);
+        }
+        else {
+            this.value = (0, selection_model_js_1.toggleDate)(this.value, dateStr);
+        }
+        this._lastClickedDate = dateStr;
+        this._syncForm();
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    _handleKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this._moveFocus(this._focusedDate.plus({ days: 1 }));
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this._moveFocus(this._focusedDate.minus({ days: 1 }));
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this._moveFocus(this._focusedDate.plus({ weeks: 1 }));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._moveFocus(this._focusedDate.minus({ weeks: 1 }));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._moveFocus(this._focusedDate.startOf('week'));
+                break;
+            case 'End':
+                event.preventDefault();
+                this._moveFocus(this._focusedDate.endOf('week'));
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this._nextPage();
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this._previousPage();
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const dateStr = this._focusedDate.toISODate();
+                if (event.shiftKey && this._lastClickedDate) {
+                    this.value = (0, selection_model_js_1.extendRange)(this.value, this._lastClickedDate, dateStr);
+                }
+                else {
+                    this.value = (0, selection_model_js_1.toggleDate)(this.value, dateStr);
+                }
+                this._lastClickedDate = dateStr;
+                this._syncForm();
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+                break;
+            }
+        }
+    }
+    _clearAll() {
+        this.value = [];
+        this._lastClickedDate = undefined;
+        this._syncForm();
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    render() {
+        const monthList = this._getMonthList();
+        return (0, lit_1.html) `
+      <div class="navigation">
+        <button @click=${this._previousPage} aria-label="Previous ${this.months} months">${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevron)}</button>
+        <h2>${this._getDateRangeLabel()}</h2>
+        <button @click=${this._nextPage} aria-label="Next ${this.months} months" class="right">
+          ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevron)}
+        </button>
+      </div>
+      <div class="calendar-grid" @click=${this._handleDayClick} @keydown=${this._handleKeyDown} tabindex="0">
+        ${monthList.map((month) => (0, lit_1.html) `
+            <tt-calendar
+              display-only
+              month="${month.toFormat('yyyy-MM')}"
+              .highlightedRanges=${this.value}
+              min-date="${this.minDate ?? ''}"
+              max-date="${this.maxDate ?? ''}"
+            ></tt-calendar>
+          `)}
+      </div>
+      ${this.value.length > 0
+            ? (0, lit_1.html) `
+            <div class="footer">
+              <span class="selection-summary">${this.value.length} selection${this.value.length > 1 ? 's' : ''}</span>
+              <button data-action="clear" data-theme="secondary" @click=${this._clearAll}>Clear all</button>
+            </div>
+          `
+            : lit_1.nothing}
+    `;
+    }
+}
+exports.TtMultiDatePicker = TtMultiDatePicker;
+TtMultiDatePicker.formAssociated = true;
+TtMultiDatePicker.styles = styles_js_1.styles;
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], TtMultiDatePicker.prototype, "months", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'start-month' })
+], TtMultiDatePicker.prototype, "startMonth", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: false })
+], TtMultiDatePicker.prototype, "value", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ reflect: true })
+], TtMultiDatePicker.prototype, "name", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], TtMultiDatePicker.prototype, "required", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'min-date' })
+], TtMultiDatePicker.prototype, "minDate", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'max-date' })
+], TtMultiDatePicker.prototype, "maxDate", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtMultiDatePicker.prototype, "_currentStartMonth", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtMultiDatePicker.prototype, "_lastClickedDate", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtMultiDatePicker.prototype, "_focusedDate", void 0);
+//# sourceMappingURL=TtMultiDatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TtMultiDatePicker.js","sourceRoot":"","sources":["../../../src/TtMultiDatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { DateTime } from 'luxon';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevron } from '@triptease/icons';\nimport '@triptease/tt-calendar/tt-calendar.js';\nimport { styles } from './styles.js';\nimport { toggleDate, extendRange } from './selection-model.js';\nimport type { DateRange } from '@triptease/tt-calendar/date-selection-context.js';\n\ntype Selection = Required<DateRange>[];\n\nexport class TtMultiDatePicker extends LitElement {\n  static formAssociated = true;\n  static override styles = styles;\n\n  private _internals: ElementInternals;\n\n  @property({ type: Number })\n  months: 3 | 6 | 12 = 6;\n\n  @property({ attribute: 'start-month' })\n  startMonth?: string;\n\n  @property({ attribute: false })\n  value: Selection = [];\n\n  @property({ reflect: true }) name: string = '';\n  @property({ type: Boolean, reflect: true }) required: boolean = false;\n  @property({ attribute: 'min-date' }) minDate?: string;\n  @property({ attribute: 'max-date' }) maxDate?: string;\n\n  @state()\n  private _currentStartMonth: DateTime = DateTime.local().startOf('month');\n\n  @state()\n  private _lastClickedDate?: string;\n\n  @state()\n  private _focusedDate: DateTime = DateTime.local();\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.startMonth) {\n      this._currentStartMonth = DateTime.fromISO(this.startMonth + '-01');\n    }\n    this._syncForm();\n  }\n\n  private _syncForm() {\n    const val = this.value.length > 0 ? JSON.stringify(this.value) : null;\n    this._internals.setFormValue(val);\n    if (this.required && this.value.length === 0) {\n      this._internals.setValidity({ valueMissing: true }, 'Please select at least one date');\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  formResetCallback() {\n    this.value = [];\n    this._lastClickedDate = undefined;\n    this._syncForm();\n  }\n\n  private _getMonthList(): DateTime[] {\n    return Array.from({ length: this.months }, (_, i) => this._currentStartMonth.plus({ months: i }));\n  }\n\n  private _previousPage() {\n    this._currentStartMonth = this._currentStartMonth.minus({ months: this.months });\n  }\n\n  private _nextPage() {\n    this._currentStartMonth = this._currentStartMonth.plus({ months: this.months });\n  }\n\n  private _getDateRangeLabel(): string {\n    const first = this._currentStartMonth;\n    const last = this._currentStartMonth.plus({ months: this.months - 1 });\n    return `${first.toFormat('MMMM yyyy')} — ${last.toFormat('MMMM yyyy')}`;\n  }\n\n  private _getCalendarForDate(date: DateTime): Element | undefined {\n    const monthStr = date.toFormat('yyyy-MM');\n    const calendars = this.shadowRoot!.querySelectorAll('tt-calendar');\n    for (const cal of calendars) {\n      if (cal.getAttribute('month') === monthStr) return cal;\n    }\n    return undefined;\n  }\n\n  private _moveFocus(date: DateTime) {\n    this._focusedDate = date;\n    this.updateComplete.then(() => {\n      const cal = this._getCalendarForDate(date) as (Element & { focusDay: (d: DateTime) => void }) | undefined;\n      cal?.focusDay(date);\n    });\n  }\n\n  private _handleDayClick(event: MouseEvent) {\n    const target = event.composedPath()[0] as HTMLElement;\n    const dayCell = target.closest?.('.day') ?? (target.classList?.contains('day') ? target : null);\n    const dateStr = dayCell?.getAttribute('data-date');\n    if (!dateStr) return;\n\n    this._focusedDate = DateTime.fromISO(dateStr);\n\n    if (event.shiftKey && this._lastClickedDate) {\n      this.value = extendRange(this.value, this._lastClickedDate, dateStr);\n    } else {\n      this.value = toggleDate(this.value, dateStr);\n    }\n\n    this._lastClickedDate = dateStr;\n    this._syncForm();\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault();\n        this._moveFocus(this._focusedDate.plus({ days: 1 }));\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        this._moveFocus(this._focusedDate.minus({ days: 1 }));\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        this._moveFocus(this._focusedDate.plus({ weeks: 1 }));\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this._moveFocus(this._focusedDate.minus({ weeks: 1 }));\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._moveFocus(this._focusedDate.startOf('week'));\n        break;\n      case 'End':\n        event.preventDefault();\n        this._moveFocus(this._focusedDate.endOf('week'));\n        break;\n      case 'PageDown':\n        event.preventDefault();\n        this._nextPage();\n        break;\n      case 'PageUp':\n        event.preventDefault();\n        this._previousPage();\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        const dateStr = this._focusedDate.toISODate()!;\n        if (event.shiftKey && this._lastClickedDate) {\n          this.value = extendRange(this.value, this._lastClickedDate, dateStr);\n        } else {\n          this.value = toggleDate(this.value, dateStr);\n        }\n        this._lastClickedDate = dateStr;\n        this._syncForm();\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n        break;\n      }\n    }\n  }\n\n  private _clearAll() {\n    this.value = [];\n    this._lastClickedDate = undefined;\n    this._syncForm();\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const monthList = this._getMonthList();\n\n    return html`\n      <div class=\"navigation\">\n        <button @click=${this._previousPage} aria-label=\"Previous ${this.months} months\">${unsafeSVG(chevron)}</button>\n        <h2>${this._getDateRangeLabel()}</h2>\n        <button @click=${this._nextPage} aria-label=\"Next ${this.months} months\" class=\"right\">\n          ${unsafeSVG(chevron)}\n        </button>\n      </div>\n      <div class=\"calendar-grid\" @click=${this._handleDayClick} @keydown=${this._handleKeyDown} tabindex=\"0\">\n        ${monthList.map(\n          (month) => html`\n            <tt-calendar\n              display-only\n              month=\"${month.toFormat('yyyy-MM')}\"\n              .highlightedRanges=${this.value}\n              min-date=\"${this.minDate ?? ''}\"\n              max-date=\"${this.maxDate ?? ''}\"\n            ></tt-calendar>\n          `\n        )}\n      </div>\n      ${this.value.length > 0\n        ? html`\n            <div class=\"footer\">\n              <span class=\"selection-summary\">${this.value.length} selection${this.value.length > 1 ? 's' : ''}</span>\n              <button data-action=\"clear\" data-theme=\"secondary\" @click=${this._clearAll}>Clear all</button>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\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.TtMultiDatePicker = void 0;
+var tt_multi_date_picker_js_1 = require("./tt-multi-date-picker.js");
+Object.defineProperty(exports, "TtMultiDatePicker", { enumerable: true, get: function () { return tt_multi_date_picker_js_1.TtMultiDatePicker; } });
+__exportStar(require("./types.js"), exports);
+//# 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,qEAA8D;AAArD,4HAAA,iBAAiB,OAAA;AAC1B,6CAA2B","sourcesContent":["export { TtMultiDatePicker } from './tt-multi-date-picker.js';\nexport * from './types.js';\n"]}

package/dist/cjs/src/selection-model.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleDate = toggleDate;
+exports.extendRange = extendRange;
+const luxon_1 = require("luxon");
+function toggleDate(selections, isoDate) {
+    const date = luxon_1.DateTime.fromISO(isoDate);
+    const result = [];
+    let handled = false;
+    for (const range of selections) {
+        const start = luxon_1.DateTime.fromISO(range.startDate);
+        const end = luxon_1.DateTime.fromISO(range.endDate);
+        if (date < start || date > end) {
+            result.push(range);
+            continue;
+        }
+        handled = true;
+        if (start.equals(end)) {
+            continue; // remove single-date selection
+        }
+        if (date.equals(start)) {
+            result.push({ startDate: start.plus({ days: 1 }).toISODate(), endDate: range.endDate });
+        }
+        else if (date.equals(end)) {
+            result.push({ startDate: range.startDate, endDate: end.minus({ days: 1 }).toISODate() });
+        }
+        else {
+            result.push({ startDate: range.startDate, endDate: date.minus({ days: 1 }).toISODate() });
+            result.push({ startDate: date.plus({ days: 1 }).toISODate(), endDate: range.endDate });
+        }
+    }
+    if (!handled) {
+        result.push({ startDate: isoDate, endDate: isoDate });
+    }
+    return sortSelections(result);
+}
+function sortSelections(selections) {
+    return [...selections].sort((a, b) => a.startDate.localeCompare(b.startDate));
+}
+function extendRange(selections, anchorDate, targetDate) {
+    const anchor = luxon_1.DateTime.fromISO(anchorDate);
+    const target = luxon_1.DateTime.fromISO(targetDate);
+    const start = anchor < target ? anchor : target;
+    const end = anchor < target ? target : anchor;
+    const newRange = {
+        startDate: start.toISODate(),
+        endDate: end.toISODate(),
+    };
+    return mergeIntoSelections(selections, newRange);
+}
+function mergeIntoSelections(selections, newRange) {
+    const all = sortSelections([...selections, newRange]);
+    const result = [all[0]];
+    for (let i = 1; i < all.length; i++) {
+        const prev = result[result.length - 1];
+        const curr = all[i];
+        const prevEnd = luxon_1.DateTime.fromISO(prev.endDate);
+        const currStart = luxon_1.DateTime.fromISO(curr.startDate);
+        if (currStart <= prevEnd.plus({ days: 1 })) {
+            const currEnd = luxon_1.DateTime.fromISO(curr.endDate);
+            result[result.length - 1] = {
+                startDate: prev.startDate,
+                endDate: currEnd > prevEnd ? curr.endDate : prev.endDate,
+            };
+        }
+        else {
+            result.push(curr);
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=selection-model.js.map

package/dist/cjs/src/selection-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-model.js","sourceRoot":"","sources":["../../../src/selection-model.ts"],"names":[],"mappings":"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","sourcesContent":["import { DateTime } from 'luxon';\nimport type { DateRange } from '@triptease/tt-calendar/date-selection-context.js';\n\ntype Selection = Required<DateRange>[];\n\nexport function toggleDate(selections: Selection, isoDate: string): Selection {\n  const date = DateTime.fromISO(isoDate);\n  const result: Selection = [];\n  let handled = false;\n\n  for (const range of selections) {\n    const start = DateTime.fromISO(range.startDate);\n    const end = DateTime.fromISO(range.endDate);\n\n    if (date < start || date > end) {\n      result.push(range);\n      continue;\n    }\n\n    handled = true;\n\n    if (start.equals(end)) {\n      continue; // remove single-date selection\n    }\n\n    if (date.equals(start)) {\n      result.push({ startDate: start.plus({ days: 1 }).toISODate()!, endDate: range.endDate });\n    } else if (date.equals(end)) {\n      result.push({ startDate: range.startDate, endDate: end.minus({ days: 1 }).toISODate()! });\n    } else {\n      result.push({ startDate: range.startDate, endDate: date.minus({ days: 1 }).toISODate()! });\n      result.push({ startDate: date.plus({ days: 1 }).toISODate()!, endDate: range.endDate });\n    }\n  }\n\n  if (!handled) {\n    result.push({ startDate: isoDate, endDate: isoDate });\n  }\n\n  return sortSelections(result);\n}\n\nfunction sortSelections(selections: Selection): Selection {\n  return [...selections].sort((a, b) => a.startDate.localeCompare(b.startDate));\n}\n\nexport function extendRange(selections: Selection, anchorDate: string, targetDate: string): Selection {\n  const anchor = DateTime.fromISO(anchorDate);\n  const target = DateTime.fromISO(targetDate);\n  const start = anchor < target ? anchor : target;\n  const end = anchor < target ? target : anchor;\n\n  const newRange: Required<DateRange> = {\n    startDate: start.toISODate()!,\n    endDate: end.toISODate()!,\n  };\n\n  return mergeIntoSelections(selections, newRange);\n}\n\nfunction mergeIntoSelections(selections: Selection, newRange: Required<DateRange>): Selection {\n  const all = sortSelections([...selections, newRange]);\n  const result: Selection = [all[0]];\n\n  for (let i = 1; i < all.length; i++) {\n    const prev = result[result.length - 1];\n    const curr = all[i];\n    const prevEnd = DateTime.fromISO(prev.endDate);\n    const currStart = DateTime.fromISO(curr.startDate);\n\n    if (currStart <= prevEnd.plus({ days: 1 })) {\n      const currEnd = DateTime.fromISO(curr.endDate);\n      result[result.length - 1] = {\n        startDate: prev.startDate,\n        endDate: currEnd > prevEnd ? curr.endDate : prev.endDate,\n      };\n    } else {\n      result.push(curr);\n    }\n  }\n\n  return result;\n}\n"]}

package/dist/cjs/src/styles.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const lit_1 = require("lit");
+const lit_2 = require("@triptease/stylesheet/lit");
+exports.styles = [
+    lit_2.styles,
+    (0, lit_1.css) `
+    :host {
+      display: block;
+    }
+
+    .navigation {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--space-scale-2) var(--space-scale-3);
+      border-bottom: 1px solid var(--color-border-200);
+    }
+
+    .navigation button svg {
+      display: block;
+    }
+
+    .navigation button.right svg {
+      transform: rotate(180deg);
+    }
+
+    .navigation h2 {
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-400);
+      color: var(--color-text-500);
+    }
+
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--space-scale-3);
+      padding: var(--space-scale-3);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--space-scale-2) var(--space-scale-3);
+      border-top: 1px solid var(--color-border-200);
+    }
+
+    .selection-summary {
+      font-size: var(--font-size-100);
+      color: var(--color-text-400);
+    }
+  `,
+];
+//# 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;AAC1B,mDAAiE;AAEpD,QAAA,MAAM,GAAG;IACpB,YAAU;IACV,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n  baseStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .navigation {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--space-scale-2) var(--space-scale-3);\n      border-bottom: 1px solid var(--color-border-200);\n    }\n\n    .navigation button svg {\n      display: block;\n    }\n\n    .navigation button.right svg {\n      transform: rotate(180deg);\n    }\n\n    .navigation h2 {\n      font-weight: var(--font-weight-semibold);\n      font-size: var(--font-size-400);\n      color: var(--color-text-500);\n    }\n\n    .calendar-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: var(--space-scale-3);\n      padding: var(--space-scale-3);\n    }\n\n    .footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--space-scale-2) var(--space-scale-3);\n      border-top: 1px solid var(--color-border-200);\n    }\n\n    .selection-summary {\n      font-size: var(--font-size-100);\n      color: var(--color-text-400);\n    }\n  `,\n];\n"]}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtMultiDatePicker = void 0;
+const TtMultiDatePicker_js_1 = require("./TtMultiDatePicker.js");
+Object.defineProperty(exports, "TtMultiDatePicker", { enumerable: true, get: function () { return TtMultiDatePicker_js_1.TtMultiDatePicker; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-multi-date-picker')) {
+        window.customElements.define('tt-multi-date-picker', TtMultiDatePicker_js_1.TtMultiDatePicker);
+    }
+}
+//# sourceMappingURL=tt-multi-date-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-multi-date-picker.js","sourceRoot":"","sources":["../../../src/tt-multi-date-picker.ts"],"names":[],"mappings":";;;AAAA,iEAA2D;AAQlD,kGARA,wCAAiB,OAQA;AAN1B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAE,CAAC;QACvD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,wCAAiB,CAAC,CAAC;IAC1E,CAAC;AACH,CAAC","sourcesContent":["import { TtMultiDatePicker } from './TtMultiDatePicker.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-multi-date-picker')) {\n    window.customElements.define('tt-multi-date-picker', TtMultiDatePicker);\n  }\n}\n\nexport { TtMultiDatePicker };\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 { TtMultiDatePicker } from './TtMultiDatePicker.js';\n\ninterface TtMultiDatePickerExternalAttributes {\n  months?: '3' | '6' | '12';\n  'start-month'?: string;\n  name?: string;\n  required?: boolean;\n  'min-date'?: string;\n  'max-date'?: string;\n  id?: string;\n  'data-testid'?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-multi-date-picker': TtMultiDatePicker;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-multi-date-picker': TtMultiDatePickerExternalAttributes & { style?: string };\n    }\n  }\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-multi-date-picker': TtMultiDatePickerExternalAttributes & {\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/TtMultiDatePicker.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import '@triptease/tt-calendar/tt-calendar.js';
+import type { Selection } from './selection-model.js';
+export declare class TtMultiDatePicker extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    private _internals;
+    months: 3 | 6 | 12;
+    startMonth?: string;
+    value: Selection;
+    name: string;
+    required: boolean;
+    minDate?: string;
+    maxDate?: string;
+    private _currentStartMonth;
+    private _lastClickedDate?;
+    private _focusedDate;
+    constructor();
+    connectedCallback(): void;
+    private _syncForm;
+    formResetCallback(): void;
+    private _getMonthList;
+    private _previousPage;
+    private _nextPage;
+    private _getDateRangeLabel;
+    private _getCalendarForDate;
+    private _moveFocus;
+    private _applySelection;
+    private _handleDayClick;
+    private _handleKeyDown;
+    private _clearAll;
+    render(): import("lit-html").TemplateResult<1>;
+}