@progressive-development/pd-calendar 0.6.8 → 1.0.0

package/dist/pd-datepicker/PdDatepicker.js

@@ -0,0 +1,701 @@
+import { css, nothing, html } from 'lit';
+import { localized, msg } from '@lit/localize';
+import { property, state } from 'lit/decorators.js';
+import { parse, format } from 'date-fns';
+import { PdBaseInputElement } from '@progressive-development/pd-forms';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-forms/pd-input';
+import '@progressive-development/pd-forms/pd-button';
+import '@progressive-development/pd-forms/pd-select';
+import '../pd-calendar.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const UNDEF = "UNDEF";
+const INPUT_TYPE_DATE = 7;
+const DEFAULT_FORMAT = "yyyy-MM-dd";
+const TIME_VALUES = [
+  { name: "07:00", value: "07:00" },
+  { name: "07:30", value: "07:30" },
+  { name: "08:00", value: "08:00" },
+  { name: "08:30", value: "08:30" },
+  { name: "09:00", value: "09:00" },
+  { name: "09:30", value: "09:30" },
+  { name: "10:00", value: "10:00" },
+  { name: "10:30", value: "10:30" },
+  { name: "11:00", value: "11:00" },
+  { name: "11:30", value: "11:30" },
+  { name: "12:00", value: "12:00" },
+  { name: "12:30", value: "12:30" },
+  { name: "13:00", value: "13:00" },
+  { name: "13:30", value: "13:30" },
+  { name: "14:00", value: "14:00" },
+  { name: "14:30", value: "14:30" },
+  { name: "15:00", value: "15:00" },
+  { name: "15:30", value: "15:30" },
+  { name: "16:00", value: "16:00" },
+  { name: "16:30", value: "16:30" },
+  { name: "17:00", value: "17:00" },
+  { name: "17:30", value: "17:30" },
+  { name: "18:00", value: "18:00" },
+  { name: "18:30", value: "18:30" },
+  { name: "19:00", value: "19:00" },
+  { name: "19:30", value: "19:30" }
+];
+function getDateRangeValue(start, end, formatStr = DEFAULT_FORMAT) {
+  return `${start ? format(start, formatStr) : "--"} - ${end ? format(end, formatStr) : "--"}`;
+}
+function getDateTimeValue(date, time, formatStr = DEFAULT_FORMAT) {
+  return `${date ? format(date, formatStr) : ""} ${time && time !== UNDEF ? time : ""}`;
+}
+function getDataForDaysBetween(start, end) {
+  const result = {};
+  let from = new Date(start);
+  let to = new Date(end);
+  if (from > to) [from, to] = [to, from];
+  while (from <= to) {
+    result[format(from, DEFAULT_FORMAT)] = [{ category: "range" }];
+    from.setDate(from.getDate() + 1);
+  }
+  return result;
+}
+let PdDatepicker = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this.dateRange = false;
+    this.hideToday = false;
+    this.withYearPopup = [];
+    this.withTime = false;
+    this.disabledDays = [];
+    this.modal = false;
+    this.modalBreakpoint = 480;
+    this._showCalendar = false;
+    this._timeSelection = UNDEF;
+    this._useModal = false;
+    this._displayedMonth = /* @__PURE__ */ new Date();
+    /** @ignore */
+    this._calendarPosition = "bottom";
+    this._inputType = INPUT_TYPE_DATE;
+    this._validators = [this._requiredDateTimeValidator.bind(this)];
+  }
+  /** Time selection options with i18n placeholder. */
+  get _timeOptions() {
+    return [
+      {
+        name: msg("Uhrzeit auswählen", { id: "pd.datepicker.selectTime" }),
+        value: UNDEF
+      },
+      ...TIME_VALUES
+    ];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._boundHandleClickOutside) {
+      document.removeEventListener("click", this._boundHandleClickOutside);
+      this._boundHandleClickOutside = void 0;
+    }
+    if (this._useModal && this._showCalendar) {
+      document.body.style.overflow = "";
+    }
+  }
+  _requiredDateTimeValidator() {
+    return this.required && !this._startDateValue || this.dateRange && this._startDateValue && !this._endDateValue || this.withTime && this._startDateValue && this._timeSelection === UNDEF ? msg("Eingabe unvollständig", {
+      id: "pd.form.field.selectDateTimeRequired"
+    }) : null;
+  }
+  update(changedProps) {
+    if (changedProps.has("initialDate") && this.initialDate) {
+      this._prepareFieldsFromInitDate();
+      this._updateInputField(this.handleChangeForInitVal, void 0);
+    }
+    super.update(changedProps);
+  }
+  render() {
+    const popupId = `${this.id || "datepicker"}-popup`;
+    return html`
+      <pd-input
+        id="datePickerId"
+        .label="${this.label}"
+        .placeHolder="${this.placeHolder}"
+        .icon="${pdIcons.ICON_DATE}"
+        .initValue="${this._value}"
+        ?readonly=${true}
+        ?required="${this.required}"
+        ?disabled="${this.disabled}"
+        icon-right
+        aria-haspopup="dialog"
+        aria-expanded="${this._showCalendar}"
+        aria-controls="${popupId}"
+        @click="${this._inputClick}"
+        @keydown="${this._onInputKeyDown}"
+        @pd-form-element-change="${this._innerFormChange}"
+        @pd-form-element-blur="${this._innerBlur}"
+        @pd-form-element-focus="${this._innerFocus}"
+        @pd-form-element-register="${this._innerRegister}"
+        @enter-pressed="${this._innerEnter}"
+      ></pd-input>
+      ${this._renderErrorMsg()}
+      <div
+        class="modal-backdrop ${this._useModal ? "active" : ""}"
+        @click="${this._closeCalendar}"
+      ></div>
+      <div
+        id="${popupId}"
+        class="calendar-small ${this._useModal ? "modal" : this._calendarPosition}"
+        role="dialog"
+        aria-modal="true"
+        aria-label="${msg("Datum auswählen", {
+      id: "pd.datepicker.selectDate"
+    })}"
+        @keydown="${this._onPopupKeyDown}"
+      >
+        <pd-calendar
+          .withYearPopup="${this.withYearPopup}"
+          .refDate="${this._startDateValue}"
+          .data="${this._buildConstrainedData(this._displayedMonth)}"
+          numberClass="center"
+          selectableDates
+          showSelection
+          withWheelNavigation
+          withTouchNavigation
+          prevMonthConstraint="-1"
+          nextMonthConstraint="-1"
+          @select-date="${this._triggerCalendarDateSelected}"
+          @mouse-enter-date="${this._triggerHoverCalculateRange}"
+          @change-month="${this._onCalendarMonthChange}"
+        ></pd-calendar>
+
+        ${this.withTime ? html`
+              <pd-select
+                class="date-time-select"
+                id="dateTimeSelectId"
+                .values="${this._timeOptions}"
+                label="${msg("Uhrzeit", { id: "pd.datepicker.time" })}"
+                initValue="${this._timeSelection}"
+                required
+                @pd-form-element-change="${(e) => {
+      this._timeSelection = e.detail.value;
+      e.stopPropagation();
+    }}"
+                @pd-form-element-blur="${this._innerBlur}"
+                @pd-form-element-focus="${this._innerFocus}"
+                @pd-form-element-register="${this._innerRegister}"
+                @enter-pressed="${this._innerEnter}"
+              ></pd-select>
+            ` : nothing}
+
+        <div class="bottom-buttons">
+          ${!this.hideToday && !this.dateRange ? html`<pd-button
+                text="${msg("Heute", { id: "pd.datepicker.today" })}"
+                @button-clicked="${this._triggerSetTodayButton}"
+              ></pd-button>` : nothing}
+          <pd-button
+            text="${msg("Reset", { id: "pd.datepicker.reset" })}"
+            @button-clicked="${this._triggerResetButton}"
+          ></pd-button>
+          ${this.withTime ? html`
+                <pd-button
+                  id="buttonSetValueId"
+                  text="Ok"
+                  ?disabled="${!this._startDateValue || this._timeSelection === UNDEF}"
+                  @button-clicked="${this._triggerSetValueButton}"
+                ></pd-button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Getter for outside call.
+   *
+   * @returns obj: { start?: Date; end?: Date } - the prepared date values.
+   */
+  get dateValues() {
+    const start = this.withTime && this._startDateValue ? parse(
+      `${format(this._startDateValue, "yyyy-MM-dd")} ${this._timeSelection}`,
+      "yyyy-MM-dd HH:mm",
+      /* @__PURE__ */ new Date()
+    ) : this._startDateValue;
+    return { start, end: this._endDateValue };
+  }
+  reset() {
+    if (this.initialDate) {
+      this._prepareFieldsFromInitDate();
+    } else {
+      this._clearFields();
+    }
+    super.reset();
+  }
+  clear() {
+    this._clearFields();
+    this._updateInputField(true, void 0);
+  }
+  /**
+   * @returns formated value from current field selections.
+   */
+  _getInitialValue() {
+    return this._formatDateValue();
+  }
+  /**
+   * Returns the parsed date values.
+   * @returns Object with start and optional end date: `{ start?: Date; end?: Date }`
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _getParsedValue() {
+    return this.dateValues;
+  }
+  /**
+   * Init _startDateValue and _timeSelection from initial date.
+   */
+  _prepareFieldsFromInitDate() {
+    if (this.initialDate) {
+      this._startDateValue = new Date(
+        this.initialDate.getFullYear(),
+        this.initialDate.getMonth(),
+        this.initialDate.getDate()
+      );
+      if (this.withTime) {
+        this._timeSelection = format(this.initialDate, "HH:mm");
+      }
+    }
+  }
+  /**
+   * Clear _startDateValue and _timeSelection.
+   */
+  _clearFields() {
+    this._startDateValue = void 0;
+    this._endDateValue = void 0;
+    this._rangeSelection = void 0;
+    this._timeSelection = UNDEF;
+  }
+  /**
+   * Update element value from input fields.
+   */
+  _updateInputField(dispatchEvent, e) {
+    this._handleChangedValue(
+      this._formatDateValue(),
+      e,
+      dispatchEvent,
+      false,
+      void 0
+    );
+  }
+  /**
+   * Toggle view calendar on click into pd-input field.
+   */
+  _inputClick() {
+    if (this._showCalendar) {
+      this._closeCalendar();
+    } else {
+      this._openCalendar();
+    }
+  }
+  /**
+   * Handle keyboard events on the input field.
+   * Enter toggles calendar, Space/ArrowDown opens, Escape closes.
+   */
+  _onInputKeyDown(e) {
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        if (this._showCalendar) {
+          this._closeCalendar();
+        } else {
+          this._openCalendar();
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!this._showCalendar) this._openCalendar();
+        break;
+      case "Escape":
+        if (this._showCalendar) {
+          e.preventDefault();
+          this._closeCalendar();
+        }
+        break;
+    }
+  }
+  /**
+   * Handle keyboard events within the popup.
+   */
+  _onPopupKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      this._closeCalendar();
+    }
+  }
+  /**
+   * Open the calendar popup.
+   */
+  _openCalendar() {
+    this._displayedMonth = this._startDateValue || /* @__PURE__ */ new Date();
+    this._useModal = this.modal || window.innerWidth < this.modalBreakpoint;
+    if (!this._useModal) {
+      const input = this.shadowRoot?.getElementById("datePickerId");
+      if (input) {
+        const rect = input.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        this._calendarPosition = spaceBelow < 380 && spaceAbove > spaceBelow ? "top" : "bottom";
+      }
+    }
+    if (this._useModal) {
+      document.body.style.overflow = "hidden";
+    }
+    this._showCalendar = true;
+    if (!this._useModal) {
+      setTimeout(() => {
+        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+        document.addEventListener("click", this._boundHandleClickOutside);
+      }, 0);
+    }
+  }
+  /**
+   * Close the calendar popup and return focus to input.
+   */
+  _closeCalendar() {
+    this._showCalendar = false;
+    if (this._useModal) {
+      document.body.style.overflow = "";
+    }
+    if (this._boundHandleClickOutside) {
+      document.removeEventListener("click", this._boundHandleClickOutside);
+      this._boundHandleClickOutside = void 0;
+    }
+    const input = this.shadowRoot?.getElementById(
+      "datePickerId"
+    );
+    input?.focus();
+  }
+  /**
+   * Handle clicks outside the popup.
+   */
+  _handleClickOutside(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this._closeCalendar();
+    }
+  }
+  /**
+   * Triggered by date selection in small calendar.
+   * Set internal values depending on daterange configuration.
+   *
+   * @param e Event from small calendar.
+   */
+  _triggerCalendarDateSelected(e) {
+    const date = e.detail.date;
+    if (this.dateRange) {
+      if (!this._startDateValue) {
+        this._startDateValue = date;
+        this._endDateValue = void 0;
+      } else if (!this._endDateValue) {
+        if (date.getTime() < this._startDateValue.getTime()) {
+          this._endDateValue = this._startDateValue;
+          this._startDateValue = date;
+        } else {
+          this._endDateValue = date;
+        }
+        this._closeCalendar();
+      } else {
+        this._startDateValue = date;
+        this._endDateValue = void 0;
+      }
+    } else {
+      this._startDateValue = date;
+      if (this.withTime) {
+        const el = this.shadowRoot?.getElementById(
+          this._timeSelection === UNDEF ? "dateTimeSelectId" : "buttonSetValueId"
+        );
+        el?.focus();
+      } else {
+        this._closeCalendar();
+      }
+    }
+    if (!this._showCalendar) {
+      this._updateInputField(true, e);
+    }
+    e.stopPropagation();
+  }
+  /**
+   * Triggered by Today button in small calendar view.
+   * Set calendar date to today.
+   */
+  _triggerSetTodayButton(e) {
+    this._startDateValue = /* @__PURE__ */ new Date();
+    if (this.dateRange) {
+      this._endDateValue = void 0;
+      this._rangeSelection = void 0;
+    } else if (!this.withTime) {
+      this._closeCalendar();
+      this._updateInputField(true, e);
+      e.stopPropagation();
+      return;
+    }
+    this._updateInputField(!this._showCalendar, e);
+    e.stopPropagation();
+  }
+  /**
+   * Triggered by Reset button in small calendar view.
+   * Reset selected values to origin state (initaldate or empty).
+   */
+  _triggerResetButton(e) {
+    this.reset();
+    this._closeCalendar();
+    e.stopPropagation();
+  }
+  /**
+   * Triggered by ok button in small calendar view.
+   * Set selected value and close calendar.
+   */
+  _triggerSetValueButton(e) {
+    this._updateInputField(true, e);
+    this._closeCalendar();
+    e.stopPropagation();
+  }
+  /**
+   * Handle month change from calendar navigation.
+   * Updates _displayedMonth to recalculate constraints for the new month.
+   */
+  _onCalendarMonthChange(e) {
+    if (e.detail.newDate) {
+      this._displayedMonth = e.detail.newDate;
+    }
+    e.stopPropagation();
+  }
+  /**
+   * Calculate range of dates between two dates on mouse over.
+   * Only needed for date range visuell selection in small calendar.
+   *
+   * @param e
+   */
+  _triggerHoverCalculateRange(e) {
+    if (this._startDateValue && this.dateRange && e.detail.date && !this._endDateValue) {
+      this._rangeSelection = getDataForDaysBetween(
+        this._startDateValue,
+        e.detail.date
+      );
+    }
+  }
+  /**
+   * Format date value from _startDateValue and _startDateValue and _timeSelection.
+   * Depending on daterange and withtime configuration.
+   *
+   * @returns string with date value
+   */
+  _formatDateValue() {
+    if (!this._startDateValue && !this._endDateValue && this._timeSelection === UNDEF)
+      return "";
+    return this.dateRange ? getDateRangeValue(
+      this._startDateValue,
+      this._endDateValue,
+      this.dateFormat
+    ) : getDateTimeValue(
+      this._startDateValue,
+      this._timeSelection,
+      this.dateFormat
+    );
+  }
+  /**
+   * Builds calendar data with disabled days based on min/max constraints and disabledDays.
+   * Merges with existing range selection data.
+   */
+  _buildConstrainedData(currentMonth) {
+    const result = { ...this._rangeSelection || {} };
+    const minDate = this.min ? parse(this.min, DEFAULT_FORMAT, /* @__PURE__ */ new Date()) : null;
+    const maxDate = this.max ? parse(this.max, DEFAULT_FORMAT, /* @__PURE__ */ new Date()) : null;
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    for (let day = new Date(firstDay); day <= lastDay; day.setDate(day.getDate() + 1)) {
+      const key = format(day, DEFAULT_FORMAT);
+      const isBeforeMin = minDate && day < minDate;
+      const isAfterMax = maxDate && day > maxDate;
+      const isInDisabledDays = this.disabledDays.includes(key);
+      if (isBeforeMin || isAfterMax || isInDisabledDays) {
+        result[key] = [{ ...result[key]?.[0], disabled: true }];
+      }
+    }
+    return result;
+  }
+  // ###### Start Inner Element Events
+  _innerEnter(e) {
+    e.stopPropagation();
+  }
+  _innerRegister(e) {
+    e.stopPropagation();
+  }
+  _innerUnRegister(e) {
+    e.stopPropagation();
+  }
+  _innerFocus(e) {
+    e.stopPropagation();
+  }
+  _innerBlur(e) {
+    e.stopPropagation();
+  }
+  _innerFormChange(e) {
+    e.stopPropagation();
+  }
+};
+PdDatepicker.styles = [
+  PdBaseInputElement.styles,
+  css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      :host([disabled]) {
+        pointer-events: none;
+      }
+
+      :host([_showCalendar]) .calendar-small {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .calendar-small {
+        position: absolute;
+        background-color: var(--pd-default-bg-col);
+        visibility: hidden;
+        z-index: var(--pd-datepicker-z-index, 1000);
+        box-shadow: var(--pd-menu-shadow, var(--pd-shadow-lg));
+        transition: 0.5s ease-out;
+        transform: translateY(0);
+        opacity: 0;
+        padding: 0.5em;
+        max-width: 400px;
+        --pd-calendar-cell-selectable-shadow: 0;
+        --pd-calendar-cell-day-free-bg-col: var(--pd-default-bg-col);
+        --pd-calendar-cell-day-info-free-col: var(--pd-default-font-title-col);
+      }
+
+      .calendar-small.bottom {
+        top: 100%; /* Unter dem Input-Feld */
+      }
+
+      .calendar-small.top {
+        bottom: 100%; /* Über dem Input-Feld */
+      }
+
+      .date-time-select {
+        display: block;
+        --pd-input-field-height: 32px;
+        margin-top: var(--pd-spacing-sm);
+      }
+
+      .bottom-buttons {
+        display: flex;
+        --pd-button-min-height: 32px;
+        --pd-button-height: 32px;
+        --pd-button-scale: 0.9;
+        gap: var(--pd-spacing-sm);
+        margin-top: var(--pd-spacing-sm);
+      }
+
+      /* Modal backdrop overlay */
+      .modal-backdrop {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background-color: var(--pd-modal-overlay-col, rgba(0, 0, 0, 0.5));
+        z-index: calc(var(--pd-datepicker-z-index, 1000) - 1);
+      }
+
+      :host([_showCalendar]) .modal-backdrop.active {
+        display: block;
+      }
+
+      /* Modal mode: centered calendar, slightly above center for mobile usability */
+      .calendar-small.modal {
+        position: fixed;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        margin: 0;
+        padding: var(--pd-spacing-md);
+        border-radius: var(--pd-radius-lg);
+        max-height: 90vh;
+        min-height: 360px; /* Prevent jumping between months with different week counts */
+        overflow-y: auto;
+        width: calc(100vw - 2rem); /* 1rem Abstand links + rechts */
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdDatepicker.prototype, "locale", 2);
+__decorateClass([
+  property({ type: Object })
+], PdDatepicker.prototype, "initialDate", 2);
+__decorateClass([
+  property({ type: String })
+], PdDatepicker.prototype, "dateFormat", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdDatepicker.prototype, "dateRange", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdDatepicker.prototype, "hideToday", 2);
+__decorateClass([
+  property({ type: Array })
+], PdDatepicker.prototype, "withYearPopup", 2);
+__decorateClass([
+  property({ type: String })
+], PdDatepicker.prototype, "placeHolderTime", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdDatepicker.prototype, "withTime", 2);
+__decorateClass([
+  property({ type: String })
+], PdDatepicker.prototype, "min", 2);
+__decorateClass([
+  property({ type: String })
+], PdDatepicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Array })
+], PdDatepicker.prototype, "disabledDays", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdDatepicker.prototype, "modal", 2);
+__decorateClass([
+  property({ type: Number })
+], PdDatepicker.prototype, "modalBreakpoint", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdDatepicker.prototype, "_showCalendar", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_startDateValue", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_endDateValue", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_rangeSelection", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_timeSelection", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_useModal", 2);
+__decorateClass([
+  state()
+], PdDatepicker.prototype, "_displayedMonth", 2);
+PdDatepicker = __decorateClass([
+  localized()
+], PdDatepicker);
+
+export { PdDatepicker };