@triptease/tt-date-range-picker 6.2.5 → 6.3.1

package/dist/cjs/src/TtDateRangePicker.js

@@ -0,0 +1,243 @@
+"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.TtDateRangePicker = void 0;
+const decorators_js_1 = require("lit/decorators.js");
+const lit_1 = require("lit");
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const luxon_1 = require("luxon");
+const date_selection_context_js_1 = require("@triptease/tt-calendar/date-selection-context.js");
+const icons_1 = require("@triptease/icons");
+const styles_js_1 = require("./styles.js");
+class TtDateRangePicker extends lit_1.LitElement {
+    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.dateRangeInput.focus();
+        };
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('date-range-selection', this.onChange);
+        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-range-selection', this.onChange);
+        this.removeEventListener('dialog-open', this._onDialogOpen);
+        this.removeEventListener('dialog-close', this._onDialogClose);
+        this.removeEventListener('focusout', this.onFocusOut);
+        this.removeEventListener('focus', this._onFocus);
+    }
+    // Internal DateTime properties for calculations
+    get _startDateTime() {
+        return this.start ? luxon_1.DateTime.fromISO(this.start) : undefined;
+    }
+    get _endDateTime() {
+        return this.end ? luxon_1.DateTime.fromISO(this.end) : undefined;
+    }
+    get _minDateTime() {
+        return this.minDate ? luxon_1.DateTime.fromISO(this.minDate) : undefined;
+    }
+    get _maxDateTime() {
+        return this.maxDate ? luxon_1.DateTime.fromISO(this.maxDate) : undefined;
+    }
+    get _formValue() {
+        return JSON.stringify({
+            startDate: this._startDateTime?.toISODate(),
+            endDate: this._endDateTime?.toISODate(),
+        });
+    }
+    get value() {
+        return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;
+    }
+    showCalendar() {
+        this.dialog.toggleVisibility();
+        if (this.openLeft) {
+            this.style.setProperty('--calendar-left-distance', '-146px');
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('start') || changedProperties.has('end')) {
+            this.internals.setFormValue(this._formValue);
+        }
+        if (changedProperties.has('start') || changedProperties.has('end')) {
+            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;
+            }
+        }
+    }
+    onChange(e) {
+        if (!date_selection_context_js_1.DateRangeSelectionEvent.is(e) && e.type !== 'change')
+            return;
+        if (date_selection_context_js_1.DateRangeSelectionEvent.is(e)) {
+            this.start = e.detail.startDate;
+            this.end = e.detail.endDate;
+        }
+        else if (e.type === 'change') {
+            const { value } = e.target;
+            this.start = value.startDate ? value.startDate : undefined;
+            this.end = value.endDate ? value.endDate : undefined;
+        }
+        this.dispatchEvent(new InputEvent('change'));
+        this.dialog.hide();
+    }
+    validate() {
+        const wasValid = this.internals.validity.valid;
+        const oldMessage = this.internals.validationMessage;
+        this.internals.setValidity({});
+        if (this._endDateTime && this._startDateTime) {
+            if (this._endDateTime < this._startDateTime) {
+                this.internals.setValidity({ customError: true }, 'End date must be after start date');
+                return;
+            }
+            const differenceInDays = this._endDateTime.diff(this._startDateTime).as('days');
+            const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;
+            if (!minDaysAreValid) {
+                this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);
+                return;
+            }
+            const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;
+            if (!maxDaysAreValid) {
+                this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);
+                return;
+            }
+            const minDateIsValid = !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);
+            if (!minDateIsValid) {
+                this.internals.setValidity({ rangeUnderflow: true }, `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`);
+                return;
+            }
+            const maxDateIsValid = !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;
+            if (!maxDateIsValid) {
+                this.internals.setValidity({ rangeOverflow: true }, `End 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();
+        }
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div part="controls" aria-invalid=${!this.internals.validity.valid}>
+        <tt-date-range-input @change=${this.onChange} .value="${this.value}"></tt-date-range-input>
+        <button name="show calendar" @click=${this.showCalendar} class="show-calendar">
+          ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.calendarIcon)}
+        </button>
+      </div>
+      <tt-dialog name="calendar" aria-label="Choose date range" part="dialog">
+        <tt-calendar
+          max-date=${this.maxDate}
+          min-date=${this.minDate}
+          max-days=${this.maxDays}
+          @date-range-selection=${this.onChange}
+          .value="${this.value}"
+          range
+          part="calendar"
+        ></tt-calendar>
+        <tt-side-panel>
+          <slot name="preset" slot="side-preset"></slot>
+        </tt-side-panel>
+      </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.TtDateRangePicker = TtDateRangePicker;
+TtDateRangePicker.formAssociated = true;
+TtDateRangePicker.shadowRootOptions = {
+    ...lit_1.LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+TtDateRangePicker.styles = [
+    styles_js_1.styles,
+    (0, lit_1.css) `
+      [part='controls'] {
+        min-width: 35.3ch;
+      }
+    `,
+];
+__decorate([
+    (0, decorators_js_1.query)('tt-calendar')
+], TtDateRangePicker.prototype, "calendar", void 0);
+__decorate([
+    (0, decorators_js_1.query)('tt-dialog')
+], TtDateRangePicker.prototype, "dialog", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: String,
+    })
+], TtDateRangePicker.prototype, "start", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: String,
+    })
+], TtDateRangePicker.prototype, "end", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], TtDateRangePicker.prototype, "minDays", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], TtDateRangePicker.prototype, "maxDays", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: String,
+    })
+], TtDateRangePicker.prototype, "minDate", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: String,
+    })
+], TtDateRangePicker.prototype, "maxDate", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'open-left' })
+], TtDateRangePicker.prototype, "openLeft", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], TtDateRangePicker.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtDateRangePicker.prototype, "_open", void 0);
+__decorate([
+    (0, decorators_js_1.query)('tt-date-range-input')
+], TtDateRangePicker.prototype, "dateRangeInput", void 0);
+//# sourceMappingURL=TtDateRangePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TtDateRangePicker.js","sourceRoot":"","sources":["../../../src/TtDateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { calendarIcon } from '@triptease/icons';\nimport { DateRangeInput } from './DateRangeInput/DateRangeInput.js';\nimport { styles } from './styles.js';\n\nexport class TtDateRangePicker extends LitElement {\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('date-range-selection', this.onChange);\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  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('date-range-selection', this.onChange);\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  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = [\n    styles,\n    css`\n      [part='controls'] {\n        min-width: 35.3ch;\n      }\n    `,\n  ];\n\n  @query('tt-calendar')\n  calendar!: Calendar;\n\n  @query('tt-dialog')\n  dialog!: TtDialog;\n\n  @property({\n    type: String,\n  })\n  public start?: string;\n\n  @property({\n    type: String,\n  })\n  public end?: string;\n\n  @property({ type: Number })\n  public minDays?: number;\n\n  @property({ type: Number })\n  public maxDays?: number;\n\n  @property({\n    type: String,\n  })\n  public minDate?: string;\n\n  @property({\n    type: String,\n  })\n  public maxDate?: string;\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 _startDateTime(): DateTime | undefined {\n    return this.start ? DateTime.fromISO(this.start) : undefined;\n  }\n\n  private get _endDateTime(): DateTime | undefined {\n    return this.end ? DateTime.fromISO(this.end) : undefined;\n  }\n\n  private get _minDateTime(): DateTime | undefined {\n    return this.minDate ? DateTime.fromISO(this.minDate) : undefined;\n  }\n\n  private get _maxDateTime(): DateTime | undefined {\n    return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;\n  }\n\n  @state()\n  private _open: boolean = false;\n\n  @query('tt-date-range-input')\n  dateRangeInput!: DateRangeInput;\n\n  private get _formValue(): string | null {\n    return JSON.stringify({\n      startDate: this._startDateTime?.toISODate(),\n      endDate: this._endDateTime?.toISODate(),\n    });\n  }\n\n  public get value(): DateRange | undefined {\n    return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;\n  }\n\n  showCalendar() {\n    this.dialog.toggleVisibility();\n    if (this.openLeft) {\n      this.style.setProperty('--calendar-left-distance', '-146px');\n    }\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  protected updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('start') || changedProperties.has('end')) {\n      this.internals.setFormValue(this._formValue);\n    }\n\n    if (changedProperties.has('start') || changedProperties.has('end')) {\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 onChange(e: Event) {\n    if (!DateRangeSelectionEvent.is(e) && e.type !== 'change') return;\n\n    if (DateRangeSelectionEvent.is(e)) {\n      this.start = e.detail.startDate!;\n      this.end = e.detail.endDate!;\n    } else if (e.type === 'change') {\n      const { value } = e.target as DateRangeInput;\n      this.start = value!.startDate ? value!.startDate : undefined;\n      this.end = value!.endDate ? value!.endDate : undefined;\n    }\n\n    this.dispatchEvent(new InputEvent('change'));\n    this.dialog.hide();\n  }\n\n  private _onFocus = () => {\n    this.dateRangeInput.focus();\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._endDateTime && this._startDateTime) {\n      if (this._endDateTime < this._startDateTime) {\n        this.internals.setValidity({ customError: true }, 'End date must be after start date');\n        return;\n      }\n\n      const differenceInDays = this._endDateTime.diff(this._startDateTime!).as('days');\n      const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;\n      if (!minDaysAreValid) {\n        this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);\n        return;\n      }\n      const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;\n      if (!maxDaysAreValid) {\n        this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);\n        return;\n      }\n      const minDateIsValid =\n        !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);\n      if (!minDateIsValid) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n        );\n        return;\n      }\n      const maxDateIsValid =\n        !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;\n      if (!maxDateIsValid) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          `End date should be before or equal to ${this._maxDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n        );\n        return;\n      }\n    }\n    if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n      this.requestUpdate();\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"controls\" aria-invalid=${!this.internals.validity.valid}>\n        <tt-date-range-input @change=${this.onChange} .value=\"${this.value}\"></tt-date-range-input>\n        <button name=\"show calendar\" @click=${this.showCalendar} class=\"show-calendar\">\n          ${unsafeSVG(calendarIcon)}\n        </button>\n      </div>\n      <tt-dialog name=\"calendar\" aria-label=\"Choose date range\" part=\"dialog\">\n        <tt-calendar\n          max-date=${this.maxDate}\n          min-date=${this.minDate}\n          max-days=${this.maxDays}\n          @date-range-selection=${this.onChange}\n          .value=\"${this.value}\"\n          range\n          part=\"calendar\"\n        ></tt-calendar>\n        <tt-side-panel>\n          <slot name=\"preset\" slot=\"side-preset\"></slot>\n        </tt-side-panel>\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-range-picker': TtDateRangePicker;\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,24 @@
+"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.PresetButton = exports.Preset = exports.TtDateRangePicker = void 0;
+__exportStar(require("./types.js"), exports);
+var tt_date_range_picker_js_1 = require("./tt-date-range-picker.js");
+Object.defineProperty(exports, "TtDateRangePicker", { enumerable: true, get: function () { return tt_date_range_picker_js_1.TtDateRangePicker; } });
+var tt_side_panel_js_1 = require("./SidePanel/tt-side-panel.js");
+Object.defineProperty(exports, "Preset", { enumerable: true, get: function () { return tt_side_panel_js_1.Preset; } });
+Object.defineProperty(exports, "PresetButton", { enumerable: true, get: function () { return tt_side_panel_js_1.PresetButton; } });
+//# 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,qEAA8D;AAArD,4HAAA,iBAAiB,OAAA;AAC1B,iEAAoE;AAA3D,0GAAA,MAAM,OAAA;AAAE,gHAAA,YAAY,OAAA","sourcesContent":["export * from './types.js';\nexport { TtDateRangePicker } from './tt-date-range-picker.js';\nexport { Preset, PresetButton } from './SidePanel/tt-side-panel.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-range-picker.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtDateRangePicker = void 0;
+const tt_dialog_1 = require("@triptease/tt-dialog");
+const tt_calendar_1 = require("@triptease/tt-calendar");
+const TtDateRangePicker_js_1 = require("./TtDateRangePicker.js");
+Object.defineProperty(exports, "TtDateRangePicker", { enumerable: true, get: function () { return TtDateRangePicker_js_1.TtDateRangePicker; } });
+const tt_date_range_input_js_1 = require("./DateRangeInput/tt-date-range-input.js");
+const tt_side_panel_js_1 = require("./SidePanel/tt-side-panel.js");
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-calendar')) {
+        window.customElements.define('tt-calendar', tt_calendar_1.Calendar);
+    }
+    if (!window.customElements.get('tt-date-range-input')) {
+        window.customElements.define('tt-date-range-input', tt_date_range_input_js_1.DateRangeInput);
+    }
+    if (!window.customElements.get('tt-dialog')) {
+        window.customElements.define('tt-dialog', tt_dialog_1.TtDialog);
+    }
+    if (!window.customElements.get('tt-date-range-picker')) {
+        window.customElements.define('tt-date-range-picker', TtDateRangePicker_js_1.TtDateRangePicker);
+    }
+    if (!window.customElements.get('tt-side-panel')) {
+        window.customElements.define('tt-side-panel', tt_side_panel_js_1.SidePanel);
+    }
+    if (!window.customElements.get('tt-preset-button')) {
+        window.customElements.define('tt-preset-button', tt_side_panel_js_1.PresetButton);
+    }
+}
+//# sourceMappingURL=tt-date-range-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-date-range-picker.js","sourceRoot":"","sources":["../../../src/tt-date-range-picker.ts"],"names":[],"mappings":";;;AAAA,oDAAgD;AAChD,wDAAkD;AAClD,iEAA2D;AA4BlD,kGA5BA,wCAAiB,OA4BA;AA3B1B,oFAAyE;AACzE,mEAAuE;AAEvE,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,sBAAQ,CAAC,CAAC;IACxD,CAAC;IACD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACtD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,uCAAc,CAAC,CAAC;IACtE,CAAC;IACD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,oBAAQ,CAAC,CAAC;IACtD,CAAC;IAED,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;IAED,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,kBAAkB,CAAC,EAAE,CAAC;QACnD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,+BAAY,CAAC,CAAC;IACjE,CAAC;AACH,CAAC","sourcesContent":["import { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { DateRangeInput } from './DateRangeInput/tt-date-range-input.js';\nimport { SidePanel, PresetButton } from './SidePanel/tt-side-panel.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-range-input')) {\n    window.customElements.define('tt-date-range-input', DateRangeInput);\n  }\n  if (!window.customElements.get('tt-dialog')) {\n    window.customElements.define('tt-dialog', TtDialog);\n  }\n\n  if (!window.customElements.get('tt-date-range-picker')) {\n    window.customElements.define('tt-date-range-picker', TtDateRangePicker);\n  }\n\n  if (!window.customElements.get('tt-side-panel')) {\n    window.customElements.define('tt-side-panel', SidePanel);\n  }\n\n  if (!window.customElements.get('tt-preset-button')) {\n    window.customElements.define('tt-preset-button', PresetButton);\n  }\n}\n\nexport { TtDateRangePicker };\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 { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { PresetButton } from './SidePanel/PresetButton.js';\n\ninterface TtDateRangePickerExternalAttributes {\n  id?: string;\n  start?: string;\n  end?: string;\n  mindate?: string;\n  maxdate?: string;\n  mindays?: number;\n  maxdays?: number;\n  disabled?: boolean;\n  'open-left'?: boolean;\n  name?: string;\n}\n\ninterface TtPresetButtonExternalAttributes {\n  id?: string;\n  slot?: string;\n  preset?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-range-picker': TtDateRangePicker;\n    'tt-preset-button': PresetButton;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n        style?: string;\n        onChange?: (event: InputEvent) => void;\n      };\n\n      'tt-preset-button': TtPresetButtonExternalAttributes;\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n          style?: React.CSSProperties;\n          onChange?: (event: InputEvent) => void;\n        };\n\n        'tt-preset-button': TtPresetButtonExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n        };\n      }\n    }\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.js","sourceRoot":"","sources":["../../../../src/DateRangeInput/DateRangeInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QA+CU,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC,CAAC;IASJ,CAAC;IAjCQ,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAEO,QAAQ,CAAC,CAAa;QAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAmB,CAAC;QACrC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;QAC/B,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,MAAM,KAAK,GAAG,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;QAC/C,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7E,CAAC;IAMM,MAAM;QACX,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,KAAK,EAAE,SAAS;;gDAEjD,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,KAAK,EAAE,OAAO;KACxF,CAAC;IACJ,CAAC;;AAxDM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWX;AAQK,gCAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AARK;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACF;AAGzB;IADC,QAAQ,CAAC,eAAe,CAAC;kDACI","sourcesContent":["import { property, queryAll } from 'lit/decorators.js';\nimport { css, html, LitElement } from 'lit';\nimport { DateInput } from '@triptease/tt-date-input';\nimport { DateRange } from '@triptease/tt-calendar/date-selection-context.js';\n\nexport class DateRangeInput extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      padding: var(--space-scale-1) var(--space-scale-1-5);\n      gap: var(--space-scale-1);\n    }\n\n    :user-invalid {\n      outline: 1px solid red;\n    }\n  `;\n\n  @property({ type: Object })\n  public value?: DateRange;\n\n  @queryAll('tt-date-input')\n  dateInputs!: Array<DateInput>;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  private _onInput(e: InputEvent) {\n    const target = e.target as DateInput;\n    const { value, name } = target;\n    if (!value) return;\n\n    const field = name === 'start-date' ? 'startDate' : 'endDate';\n    this.value = { ...this.value, [field]: value };\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  private _onFocus = () => {\n    this.dateInputs[0].focus();\n  };\n\n  public render() {\n    return html`\n      <tt-date-input name=\"start-date\" @change=\"${this._onInput}\" .value=\"${this.value?.startDate}\"></tt-date-input>\n      <span>to</span>\n      <tt-date-input name=\"end-date\" @change=\"${this._onInput}\" .value=\"${this.value?.endDate}\"></tt-date-input>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-range-input': DateRangeInput;\n  }\n}\n"]}

package/dist/esm/src/DateRangeInput/tt-date-range-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-date-range-input.js","sourceRoot":"","sources":["../../../../src/DateRangeInput/tt-date-range-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,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;IACD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACtD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAC;IACtE,CAAC;AACH,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { DateInput } from '@triptease/tt-date-input';\nimport { DateRangeInput } from './DateRangeInput.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-date-input')) {\n    window.customElements.define('tt-date-input', DateInput);\n  }\n  if (!window.customElements.get('tt-date-range-input')) {\n    window.customElements.define('tt-date-range-input', DateRangeInput);\n  }\n}\n\nexport { DateRangeInput };\n"]}

package/dist/esm/src/SidePanel/PresetButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetButton.js","sourceRoot":"","sources":["../../../../src/SidePanel/PresetButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { DateTime } from 'luxon';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { button } from './styles.js';\n\nexport enum Preset {\n  ThisWeek = 'This week',\n  LastWeek = 'Last week',\n  ThisMonth = 'This month',\n  LastMonth = 'Last month',\n  ThisQuarter = 'This quarter',\n  LastQuarter = 'Last quarter',\n  YearToDate = 'Year to date',\n  LastYear = 'Last year',\n  Next1Month = 'Next 1 month',\n  Next3Months = 'Next 3 months',\n  Next6Months = 'Next 6 months',\n  Next12Months = 'Next 12 months',\n  AllTime = 'All time',\n}\n\nconst parsePreset = (value: string | null): Preset | undefined => {\n  if (!value) return undefined;\n  if (Object.values(Preset).includes(<Preset>value)) return <Preset>value;\n  return undefined;\n};\n\nexport class PresetButton extends LitElement {\n  static styles = button;\n\n  @property({ type: Preset, converter: parsePreset })\n  public preset?: Preset;\n\n  private _onClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n    this.dispatchEvent(new DateRangeSelectionEvent(this.range));\n  };\n\n  private get today(): DateTime {\n    return DateTime.local().startOf('day');\n  }\n\n  private get range(): DateRange {\n    switch (this.preset) {\n      case Preset.ThisWeek:\n        return { startDate: this.today.startOf('week').toISODate()!, endDate: this.today.endOf('week').toISODate()! };\n      case Preset.LastWeek:\n        return {\n          startDate: this.today.startOf('week').minus({ weeks: 1 }).toISODate()!,\n          endDate: this.today.endOf('week').minus({ weeks: 1 }).toISODate()!,\n        };\n      case Preset.ThisMonth:\n        return { startDate: this.today.startOf('month').toISODate()!, endDate: this.today.endOf('month').toISODate()! };\n      case Preset.LastMonth:\n        return {\n          startDate: this.today.minus({ months: 1 }).startOf('month').toISODate()!,\n          endDate: this.today.minus({ months: 1 }).endOf('month').toISODate()!,\n        };\n      case Preset.ThisQuarter:\n        return {\n          startDate: this.today.startOf('quarter').toISODate()!,\n          endDate: this.today.endOf('quarter').toISODate()!,\n        };\n      case Preset.YearToDate:\n        return { startDate: this.today.startOf('year').toISODate()!, endDate: this.today.toISODate()! };\n      case Preset.Next1Month:\n        return {\n          startDate: this.today.toISODate()!,\n          endDate: this.today.plus({ months: 1 }).toISODate()!,\n        };\n      case Preset.Next3Months:\n        return {\n          startDate: this.today.toISODate()!,\n          endDate: this.today.plus({ months: 3 }).toISODate()!,\n        };\n      case Preset.Next6Months:\n        return {\n          startDate: this.today.toISODate()!,\n          endDate: this.today.plus({ months: 6 }).toISODate()!,\n        };\n      case Preset.Next12Months:\n        return {\n          startDate: this.today.toISODate()!,\n          endDate: this.today.plus({ months: 12 }).toISODate()!,\n        };\n      case Preset.LastQuarter:\n        return {\n          startDate: this.today.minus({ quarters: 1 }).startOf('quarter').toISODate()!,\n          endDate: this.today.minus({ quarters: 1 }).endOf('quarter').toISODate()!,\n        };\n      case Preset.LastYear:\n        return {\n          startDate: this.today.minus({ years: 1 }).startOf('year').toISODate()!,\n          endDate: this.today.minus({ years: 1 }).endOf('year').toISODate()!,\n        };\n      case Preset.AllTime:\n        return { startDate: undefined, endDate: undefined };\n      default:\n        return { startDate: this.today.toISODate()!, endDate: this.today.plus({ days: 28 }).toISODate()! };\n    }\n  }\n\n  public render() {\n    return html` <button @click=\"${this._onClick}\">\n      <slot>${this.preset}</slot>\n    </button>`;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sourceRoot":"","sources":["../../../../src/SidePanel/SidePanel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,SAAU,SAAQ,UAAU;IAWhC,QAAQ,CAAC,KAAkB;QAChC,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QAEzB,OAAO,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAChH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,QAAQ,CAAC;YAChB,YAAY,EAAE,IAAI;YAClB,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC;SACzC,CAAC;;;gDAGsC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;KAErE,CAAC;IACJ,CAAC;;AA5BM,gBAAM,GAAG,MAAM,CAAC;AAKhB,2BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AALM;IADP,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;kDACjB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './styles.js';\n\nexport class SidePanel extends LitElement {\n  static styles = styles;\n\n  @queryAssignedElements({ flatten: true, slot: 'side-preset' })\n  private slottedElements!: Array<HTMLElement>;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  public contains(other: Node | null): boolean {\n    if (!other) return false;\n\n    return other === this || this.slottedElements.some((slotted) => slotted === other || slotted.contains(other));\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${classMap({\n          'side-panel': true,\n          empty: this.slottedElements.length === 0,\n        })}\"\n        part=\"side-panel\"\n      >\n        <slot name=\"side-preset\" @slotchange=\"${() => this.requestUpdate()}\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/SidePanel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  .side-panel {\n    padding: var(--space-scale-3);\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-scale-3);\n    height: 100%;\n    box-sizing: border-box;\n\n    /* Hide the panel when it is empty. Should use :has-slotted once support is widespread */\n\n    &.empty {\n      display: none;\n    }\n  }\n\n  button,\n  ::slotted(tt-preset-button) {\n    appearance: none;\n    padding: 0;\n    border-width: 0;\n    background-color: transparent;\n    border-radius: var(--space-scale-1);\n    padding-block: 0;\n    padding-inline: 0;\n    line-height: var(--space-scale-3);\n    font-size: var(--font-size-200);\n    text-wrap: nowrap;\n\n    &:hover {\n      box-shadow: none;\n      color: var(--color-primary-400);\n    }\n\n    &:focus {\n      outline: 1px solid var(--color-primary-400);\n    }\n\n    &[aria-selected='true'] {\n      color: var(--color-primary-400);\n    }\n\n    slot[name='presets']::slotted(*) {\n      display: none;\n    }\n  }\n`;\n\nexport const button = css`\n  button {\n    appearance: none;\n    padding: 0;\n    border-width: 0;\n    background-color: transparent;\n    border-radius: var(--space-scale-1);\n    padding-block: 0;\n    padding-inline: 0;\n    line-height: var(--space-scale-3);\n    font-size: var(--font-size-200);\n    text-wrap: nowrap;\n    outline-offset: var(--space-scale-0-5);\n\n    &:hover {\n      box-shadow: none;\n      color: var(--color-primary-400);\n    }\n\n    &:focus {\n      outline: 1px solid var(--color-primary-400);\n    }\n\n    &[aria-selected='true'] {\n      color: var(--color-primary-400);\n      font-weight: var(--font-weight-semibold);\n    }\n\n    slot[name='presets']::slotted(*) {\n      display: none;\n    }\n  }\n`;\n"]}

package/dist/esm/src/SidePanel/tt-side-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-side-panel.js","sourceRoot":"","sources":["../../../../src/SidePanel/tt-side-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEzD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,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,kBAAkB,CAAC,EAAE,CAAC;QACnD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC;IACjE,CAAC;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { SidePanel } from './SidePanel.js';\nimport { Preset, PresetButton } from './PresetButton.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-side-panel')) {\n    window.customElements.define('tt-side-panel', SidePanel);\n  }\n\n  if (!window.customElements.get('tt-preset-button')) {\n    window.customElements.define('tt-preset-button', PresetButton);\n  }\n}\n\nexport { SidePanel, PresetButton, Preset };\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"TtDateRangePicker.js","sourceRoot":"","sources":["../../../src/TtDateRangePicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAa,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAG/C;QACE,KAAK,EAAE,CAAC;QAuEH,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAoBhB,UAAK,GAAY,KAAK,CAAC;QAuBvB,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC;QAEK,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,KAAK;gBAAE,OAAO;YAExB,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,sBAAsB,CAAuB,CAAC;YAE3F,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAyCM,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC,CAAC;QA/KA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChE,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC9D,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAwDD,gDAAgD;IAChD,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/D,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,CAAC;IAQD,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC;YACpB,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE;YAC3C,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE;SACxC,CAAC,CAAC;IACL,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,CAAC;IAED,YAAY;QACV,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAoBS,OAAO,CAAC,iBAAiC;QACjD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/C,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAClC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO;QAElE,IAAI,uBAAuB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,SAAU,CAAC;YACjC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,OAAQ,CAAC;QAC/B,CAAC;aAAM,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAwB,CAAC;YAC7C,IAAI,CAAC,KAAK,GAAG,KAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YAC7D,IAAI,CAAC,GAAG,GAAG,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;QACzD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAMO,QAAQ;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;QACpD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAE/B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YAC7C,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC5C,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,mCAAmC,CAAC,CAAC;gBACvF,OAAO;YACT,CAAC;YAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,cAAe,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YACjF,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,IAAI,IAAI,CAAC,OAAO,CAAC;YAC1E,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,+BAA+B,IAAI,CAAC,OAAO,OAAO,CAAC,CAAC;gBACzG,OAAO;YACT,CAAC;YACD,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,IAAI,IAAI,CAAC,OAAO,CAAC;YAC1E,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,8BAA8B,IAAI,CAAC,OAAO,OAAO,CAAC,CAAC;gBACvG,OAAO;YACT,CAAC;YACD,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACjH,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,cAAc,EAAE,IAAI,EAAE,EACxB,uCAAuC,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CAChI,CAAC;gBACF,OAAO;YACT,CAAC;YACD,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YAC7G,IAAI,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,aAAa,EAAE,IAAI,EAAE,EACvB,yCAAyC,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CAClI,CAAC;gBACF,OAAO;YACT,CAAC;QACH,CAAC;QACD,IAAI,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,UAAU,KAAK,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,CAAC;YAClG,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0CAC2B,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK;uCACjC,IAAI,CAAC,QAAQ,YAAY,IAAI,CAAC,KAAK;8CAC5B,IAAI,CAAC,YAAY;YACnD,SAAS,CAAC,YAAY,CAAC;;;;;qBAKd,IAAI,CAAC,OAAO;qBACZ,IAAI,CAAC,OAAO;qBACZ,IAAI,CAAC,OAAO;kCACC,IAAI,CAAC,QAAQ;oBAC3B,IAAI,CAAC,KAAK;;;;;;;;gDAQkB,IAAI,CAAC,EAAE;UAC7C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB;;KAE/E,CAAC;IACJ,CAAC;;AApOM,gCAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,mCAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAEK,wBAAM,GAAG;IACd,MAAM;IACN,GAAG,CAAA;;;;KAIF;CACF,AAPY,CAOX;AAGF;IADC,KAAK,CAAC,aAAa,CAAC;mDACD;AAGpB;IADC,KAAK,CAAC,WAAW,CAAC;iDACD;AAKX;IAHN,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;KACb,CAAC;gDACoB;AAKf;IAHN,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;KACb,CAAC;8CACkB;AAGb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACH;AAGjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACH;AAKjB;IAHN,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;KACb,CAAC;kDACsB;AAKjB;IAHN,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;KACb,CAAC;kDACsB;AAGjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDAC5B;AAGjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACJ;AAoBhB;IADP,KAAK,EAAE;gDACuB;AAG/B;IADC,KAAK,CAAC,qBAAqB,CAAC;yDACG","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { DateTime } from 'luxon';\nimport { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { DateRange, DateRangeSelectionEvent } from '@triptease/tt-calendar/date-selection-context.js';\nimport { calendarIcon } from '@triptease/icons';\nimport { DateRangeInput } from './DateRangeInput/DateRangeInput.js';\nimport { styles } from './styles.js';\n\nexport class TtDateRangePicker extends LitElement {\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('date-range-selection', this.onChange);\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  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('date-range-selection', this.onChange);\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  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = [\n    styles,\n    css`\n      [part='controls'] {\n        min-width: 35.3ch;\n      }\n    `,\n  ];\n\n  @query('tt-calendar')\n  calendar!: Calendar;\n\n  @query('tt-dialog')\n  dialog!: TtDialog;\n\n  @property({\n    type: String,\n  })\n  public start?: string;\n\n  @property({\n    type: String,\n  })\n  public end?: string;\n\n  @property({ type: Number })\n  public minDays?: number;\n\n  @property({ type: Number })\n  public maxDays?: number;\n\n  @property({\n    type: String,\n  })\n  public minDate?: string;\n\n  @property({\n    type: String,\n  })\n  public maxDate?: string;\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 _startDateTime(): DateTime | undefined {\n    return this.start ? DateTime.fromISO(this.start) : undefined;\n  }\n\n  private get _endDateTime(): DateTime | undefined {\n    return this.end ? DateTime.fromISO(this.end) : undefined;\n  }\n\n  private get _minDateTime(): DateTime | undefined {\n    return this.minDate ? DateTime.fromISO(this.minDate) : undefined;\n  }\n\n  private get _maxDateTime(): DateTime | undefined {\n    return this.maxDate ? DateTime.fromISO(this.maxDate) : undefined;\n  }\n\n  @state()\n  private _open: boolean = false;\n\n  @query('tt-date-range-input')\n  dateRangeInput!: DateRangeInput;\n\n  private get _formValue(): string | null {\n    return JSON.stringify({\n      startDate: this._startDateTime?.toISODate(),\n      endDate: this._endDateTime?.toISODate(),\n    });\n  }\n\n  public get value(): DateRange | undefined {\n    return this.end || this.start ? { startDate: this.start, endDate: this.end } : undefined;\n  }\n\n  showCalendar() {\n    this.dialog.toggleVisibility();\n    if (this.openLeft) {\n      this.style.setProperty('--calendar-left-distance', '-146px');\n    }\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  protected updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('start') || changedProperties.has('end')) {\n      this.internals.setFormValue(this._formValue);\n    }\n\n    if (changedProperties.has('start') || changedProperties.has('end')) {\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 onChange(e: Event) {\n    if (!DateRangeSelectionEvent.is(e) && e.type !== 'change') return;\n\n    if (DateRangeSelectionEvent.is(e)) {\n      this.start = e.detail.startDate!;\n      this.end = e.detail.endDate!;\n    } else if (e.type === 'change') {\n      const { value } = e.target as DateRangeInput;\n      this.start = value!.startDate ? value!.startDate : undefined;\n      this.end = value!.endDate ? value!.endDate : undefined;\n    }\n\n    this.dispatchEvent(new InputEvent('change'));\n    this.dialog.hide();\n  }\n\n  private _onFocus = () => {\n    this.dateRangeInput.focus();\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._endDateTime && this._startDateTime) {\n      if (this._endDateTime < this._startDateTime) {\n        this.internals.setValidity({ customError: true }, 'End date must be after start date');\n        return;\n      }\n\n      const differenceInDays = this._endDateTime.diff(this._startDateTime!).as('days');\n      const minDaysAreValid = !this.minDays || differenceInDays >= this.minDays;\n      if (!minDaysAreValid) {\n        this.internals.setValidity({ rangeUnderflow: true }, `Date range must be at least ${this.minDays} days`);\n        return;\n      }\n      const maxDaysAreValid = !this.maxDays || differenceInDays <= this.maxDays;\n      if (!maxDaysAreValid) {\n        this.internals.setValidity({ rangeOverflow: true }, `Date range must be at most ${this.maxDays} days`);\n        return;\n      }\n      const minDateIsValid =\n        !this._minDateTime || this._startDateTime > this._minDateTime || this._startDateTime.equals(this._minDateTime);\n      if (!minDateIsValid) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          `Start date should be equal or after ${this._minDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n        );\n        return;\n      }\n      const maxDateIsValid =\n        !this._maxDateTime || this._endDateTime.equals(this._maxDateTime) || this._endDateTime < this._maxDateTime;\n      if (!maxDateIsValid) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          `End date should be before or equal to ${this._maxDateTime?.toLocaleString({ month: 'short', day: 'numeric', year: 'numeric' })}`\n        );\n        return;\n      }\n    }\n    if (wasValid !== this.internals.validity.valid || oldMessage !== this.internals.validationMessage) {\n      this.requestUpdate();\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"controls\" aria-invalid=${!this.internals.validity.valid}>\n        <tt-date-range-input @change=${this.onChange} .value=\"${this.value}\"></tt-date-range-input>\n        <button name=\"show calendar\" @click=${this.showCalendar} class=\"show-calendar\">\n          ${unsafeSVG(calendarIcon)}\n        </button>\n      </div>\n      <tt-dialog name=\"calendar\" aria-label=\"Choose date range\" part=\"dialog\">\n        <tt-calendar\n          max-date=${this.maxDate}\n          min-date=${this.minDate}\n          max-days=${this.maxDays}\n          @date-range-selection=${this.onChange}\n          .value=\"${this.value}\"\n          range\n          part=\"calendar\"\n        ></tt-calendar>\n        <tt-side-panel>\n          <slot name=\"preset\" slot=\"side-preset\"></slot>\n        </tt-side-panel>\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-range-picker': TtDateRangePicker;\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,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["export * from './types.js';\nexport { TtDateRangePicker } from './tt-date-range-picker.js';\nexport { Preset, PresetButton } from './SidePanel/tt-side-panel.js';\n"]}

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-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-date-range-picker.js","sourceRoot":"","sources":["../../../src/tt-date-range-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEvE,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,qBAAqB,CAAC,EAAE,CAAC;QACtD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAC;IACtE,CAAC;IACD,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,sBAAsB,CAAC,EAAE,CAAC;QACvD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;IAC1E,CAAC;IAED,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,kBAAkB,CAAC,EAAE,CAAC;QACnD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC;IACjE,CAAC;AACH,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import { TtDialog } from '@triptease/tt-dialog';\nimport { Calendar } from '@triptease/tt-calendar';\nimport { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { DateRangeInput } from './DateRangeInput/tt-date-range-input.js';\nimport { SidePanel, PresetButton } from './SidePanel/tt-side-panel.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-range-input')) {\n    window.customElements.define('tt-date-range-input', DateRangeInput);\n  }\n  if (!window.customElements.get('tt-dialog')) {\n    window.customElements.define('tt-dialog', TtDialog);\n  }\n\n  if (!window.customElements.get('tt-date-range-picker')) {\n    window.customElements.define('tt-date-range-picker', TtDateRangePicker);\n  }\n\n  if (!window.customElements.get('tt-side-panel')) {\n    window.customElements.define('tt-side-panel', SidePanel);\n  }\n\n  if (!window.customElements.get('tt-preset-button')) {\n    window.customElements.define('tt-preset-button', PresetButton);\n  }\n}\n\nexport { TtDateRangePicker };\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 { TtDateRangePicker } from './TtDateRangePicker.js';\nimport { PresetButton } from './SidePanel/PresetButton.js';\n\ninterface TtDateRangePickerExternalAttributes {\n  id?: string;\n  start?: string;\n  end?: string;\n  mindate?: string;\n  maxdate?: string;\n  mindays?: number;\n  maxdays?: number;\n  disabled?: boolean;\n  'open-left'?: boolean;\n  name?: string;\n}\n\ninterface TtPresetButtonExternalAttributes {\n  id?: string;\n  slot?: string;\n  preset?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-date-range-picker': TtDateRangePicker;\n    'tt-preset-button': PresetButton;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n        style?: string;\n        onChange?: (event: InputEvent) => void;\n      };\n\n      'tt-preset-button': TtPresetButtonExternalAttributes;\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-date-range-picker': TtDateRangePickerExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n          style?: React.CSSProperties;\n          onChange?: (event: InputEvent) => void;\n        };\n\n        'tt-preset-button': TtPresetButtonExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          children?: React.ReactNode;\n        };\n      }\n    }\n  }\n}\n"]}