dap-design-system/dist/components/calendar/calendar.component.js

Official design system for the DÁP (dap.gov.hu)

var w = Object.getPrototypeOf;
var x = Reflect.get;
var b = (f, e, a) => x(w(f), a, e);
var C = (f, e, a) => new Promise((s, r) => {
  var l = (u) => {
    try {
      c(a.next(u));
    } catch (p) {
      r(p);
    }
  }, n = (u) => {
    try {
      c(a.throw(u));
    } catch (p) {
      r(p);
    }
  }, c = (u) => u.done ? s(u.value) : Promise.resolve(u.value).then(l, n);
  c((a = a.apply(f, e)).next());
});
import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
import t from "../../_virtual/dayjs.min.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as _ } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { queryAll as O } from "../../node_modules/@lit/reactive-element/decorators/query-all.js";
import { html as h } from "../../node_modules/lit-html/static.js";
import { DdsElement as S } from "../../internal/dds-hu-element.js";
import "../../localization/localization.js";
import M from "../icon-button/icon-button.component.js";
import A from "../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component.js";
import k from "../option-item/option-item.component.js";
import I from "../select/select.component.js";
import E from "./calendar.scss.js";
import $ from "./calendar-cell.component.js";
import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as R } from "../../node_modules/@lit/reactive-element/css-tag.js";
var L = Object.defineProperty, o = (f, e, a, s) => {
  for (var r = void 0, l = f.length - 1, n; l >= 0; l--)
    (n = f[l]) && (r = n(e, a, r) || r);
  return r && L(e, a, r), r;
};
const D = class D extends S {
  constructor() {
    super(...arguments), this.mode = "single", this.hideAdjacentMonths = !1, this.currentDate = t(), this.minDate = t().subtract(50, "year"), this.maxDate = t().add(50, "year"), this.disabledDate = (e) => !e, this.locale = t.locale(), this.prevButtonTestId = "calendar-prev-button", this.nextButtonTestId = "calendar-next-button", this._yearOptionsLoaded = !1, this.instanceLocalData = t().localeData(), this.updateLocale = (e) => {
      e ? (this.instanceLocalData = t().locale(e).localeData(), this.locale = e, this.updateComplete.then(() => {
        var s;
        (s = this.monthSelect) == null || s.querySelectorAll("dap-ds-option-item").forEach((r) => r.remove()), this.getAllowedMonths(
          t(this.currentDate).locale(this.locale)
        ).map((r) => {
          const l = document.createElement("dap-ds-option-item");
          return l.value = `${this.instanceLocalData.months().indexOf(r) + 1}`, l.appendChild(document.createTextNode(r)), l;
        }).forEach(
          (r) => {
            var l;
            return (l = this.monthSelect) == null ? void 0 : l.appendChild(r);
          }
        );
      })) : this.locale = t.locale();
    }, this.updateLocaleFromHtml = (e) => {
      this.updateLocale(e[0].target[e[0].attributeName]);
    }, this.getWeeksInMonth = (e) => {
      const a = e.daysInMonth(), s = e.weekday();
      return Math.ceil((a + s) / 7);
    };
  }
  connectedCallback() {
    return C(this, null, function* () {
      b(D.prototype, this, "connectedCallback").call(this), t.isDayjs(this.currentDate) || (this.currentDate = t(this.currentDate)), this.locale && (this.instanceLocalData = t().locale(this.locale).localeData(), this.currentDate = t(this.currentDate).locale(this.locale));
    });
  }
  get startDate() {
    return t.isDayjs(this.currentDate) ? t(this.currentDate.toDate()).locale(this.locale).startOf("month") : t(this.currentDate).locale(this.locale).startOf("month");
  }
  get endDate() {
    return t(this.currentDate).locale(this.locale).endOf("month");
  }
  get shouldHideAdjacentMonths() {
    return this.mode === "range" ? !0 : this.hideAdjacentMonths;
  }
  firstUpdated(e) {
    super.firstUpdated(e), new MutationObserver(
      this.updateLocaleFromHtml
    ).observe(document.documentElement, {
      attributes: !0,
      attributeFilter: ["dir", "lang"]
    }), this.setValue(this.value, !1), queueMicrotask(() => this.loadYearOptions());
  }
  updated(e) {
    super.updated(e), e.has("value") && this.setValue(this.value, !1);
  }
  attributeChangedCallback(e, a, s) {
    super.attributeChangedCallback(e, a, s), e === "locale" && this.updateLocale(s);
  }
  setValue(e, a = !0) {
    if (e)
      if (this.isOutOfRange(
        t(this.currentDate).locale(this.locale),
        t(e)
      ))
        this.setToFirstDayOfMonth();
      else {
        const s = this.getCellByDate(t(e));
        this.setCurrentCell(s, a);
      }
    else this.isOutOfRange(t(this.currentDate).locale(this.locale), t()) ? this.setToFirstAllowedDayOfMonth() : this.setToToday();
  }
  loadYearOptions() {
    this._yearOptionsLoaded || (this._yearOptionsLoaded = !0, this.requestUpdate());
  }
  isOutOfRange(e, a) {
    return !t(e).locale(this.locale).isSame(a, "month");
  }
  isToday(e) {
    return e.isSame(/* @__PURE__ */ new Date(), "day");
  }
  isSelected(e) {
    return this.mode === "range" ? this.isRangeStart(e) || this.isRangeEnd(e) : this.value ? e.isSame(this.value, "day") : !1;
  }
  isRangeStart(e) {
    return this.mode !== "range" || !this.rangeStart ? !1 : e.isSame(this.rangeStart, "day");
  }
  isRangeEnd(e) {
    return this.mode !== "range" || !this.rangeEnd ? !1 : e.isSame(this.rangeEnd, "day");
  }
  isInRange(e) {
    return this.mode !== "range" || !this.rangeStart || !this.rangeEnd ? !1 : e.isAfter(this.rangeStart, "day") && e.isBefore(this.rangeEnd, "day");
  }
  getDatesInWeek(e, a) {
    let s = a.startOf("week").add(e, "week");
    const r = [];
    for (; r.length < 7; ) {
      r.push(s);
      const l = s.add(1, "day");
      if (s.isSame(a.endOf("month")))
        break;
      s = l;
    }
    return r;
  }
  isDateInAllowedRange(e) {
    const a = t(this.minDate).locale(this.locale), s = t(this.maxDate).locale(this.locale);
    return !e.isBefore(a, "day") && !e.isAfter(s, "day");
  }
  isMonthInAllowedRange(e, a) {
    const s = t(new Date(e, a, 1)).locale(this.locale), r = s.endOf("month"), l = t(this.minDate).locale(this.locale), n = t(this.maxDate).locale(this.locale);
    return !r.isBefore(l, "day") && !s.isAfter(n, "day");
  }
  isDateInAllowedRangeByDate(e, a, s) {
    return this.isDateInAllowedRange(t(new Date(e, a, s)));
  }
  getAllowedMonths(e) {
    const a = t(this.minDate).locale(this.locale), s = t(this.maxDate).locale(this.locale), r = a.year(), l = s.year(), n = a.month(), c = s.month();
    return e.year() === r && e.year() === l ? Array.from(
      { length: c - n + 1 },
      (p, m) => this.instanceLocalData.months()[m + n]
    ) : e.year() === r ? Array.from(
      { length: 12 - n },
      (p, m) => this.instanceLocalData.months()[m + n]
    ) : e.year() === l ? Array.from(
      { length: c + 1 },
      (p, m) => this.instanceLocalData.months()[m]
    ) : Array.from(
      { length: 12 },
      (p, m) => this.instanceLocalData.months()[m]
    );
  }
  setMonth(e) {
    if (e < 0 && this.isMonthInAllowedRange(t(this.currentDate).year() - 1, 11)) {
      this.setYear(t(this.currentDate).locale(this.locale).year() - 1), this.currentDate = this.currentDate.locale(this.locale).set("month", 11);
      return;
    }
    if (e > 11 && this.isMonthInAllowedRange(
      t(this.currentDate).locale(this.locale).year() + 1,
      0
    )) {
      this.setYear(t(this.currentDate).year() + 1), this.currentDate = this.currentDate.set("month", 0);
      return;
    }
    this.isMonthInAllowedRange(
      t(this.currentDate).locale(this.locale).year(),
      e
    ) && (this.currentDate = t(this.currentDate).locale(this.locale).set("month", e));
  }
  setDay(e) {
    const a = t(this.currentDate).locale(this.locale);
    this.isDateInAllowedRangeByDate(a.year(), a.month(), e) && (this.currentDate = a.set("date", e));
  }
  setYear(e) {
    const a = t(this.currentDate).locale(this.locale);
    this.currentDate = a.set("year", e);
  }
  setSelectedDate(e) {
    this.disabledDate(e) || this.isDateInAllowedRange(e) && (this.isOutOfRange(t(this.currentDate).locale(this.locale), e) && this.setMonth(e.month()), this.mode === "range" ? (!this.rangeStart || this.rangeStart && this.rangeEnd ? (this.rangeStart = e, this.rangeEnd = void 0, this.currentDate = t(e).locale(this.locale)) : this.rangeStart && !this.rangeEnd && (e.isBefore(this.rangeStart) ? (this.rangeEnd = this.rangeStart, this.rangeStart = e) : this.rangeEnd = e, this.currentDate = t(this.rangeStart).locale(this.locale), this.emit("dds-range-change", {
      startDate: this.rangeStart,
      endDate: this.rangeEnd
    })), this.setCurrentCell(this.getCellByDate(e))) : (this.value = e, this.setCurrentCell(this.getCellByDate(e)), this.emit("dds-change", {
      value: this.value,
      type: "value"
    })));
  }
  getFirstDayOfMonthCell() {
    return [...this.cells].find((e) => t(e.value).locale(this.locale).isSame(this.startDate, "day"));
  }
  getCellByDate(e) {
    return [...this.cells].find((a) => t(a.value).locale(this.locale).isSame(e, "day"));
  }
  handleKeyDown(e) {
    if (e.key === "Tab")
      return;
    e.preventDefault();
    const a = e.composedPath()[0];
    if (a instanceof $)
      switch (e.code) {
        case "ArrowLeft":
          this.focusNextCell(a, -1);
          break;
        case "ArrowRight":
          this.focusNextCell(a, 1);
          break;
        case "ArrowUp":
          this.focusNextCell(a, -7);
          break;
        case "ArrowDown":
          this.focusNextCell(a, 7);
          break;
        case "PageUp":
          this.setMonth(t(this.currentDate).locale(this.locale).month() - 1);
          break;
        case "PageDown":
          this.setMonth(t(this.currentDate).locale(this.locale).month() + 1);
          break;
        case "Enter":
          this.setSelectedDate(a.value);
          break;
        case "Escape":
          this.emit("dds-close");
          break;
      }
    else e.key === "Escape" && this.emit("dds-close");
  }
  setCurrentCell(e, a = !0) {
    this._currentCell && this._currentCell.setAttribute("tabindex", "-1"), this._currentCell = e, this._currentCell && this._currentCell.setAttribute("tabindex", "0"), a && this._currentCell && this.setFocusToCurrentCell();
  }
  setFocusToCurrentCell() {
    this._currentCell.focus();
  }
  setToFirstDayOfMonth() {
    const e = this.getFirstDayOfMonthCell();
    e == null || e.setAttribute("tabindex", "0"), this._currentCell = e;
  }
  setToToday() {
    const e = this.getCellByDate(t());
    e == null || e.setAttribute("tabindex", "0"), this._currentCell = e;
  }
  setToFirstAllowedDayOfMonth(e = this.currentDate) {
    const a = this.getCellByDate(
      t(e).locale(this.locale).startOf("month")
    );
    a == null || a.setAttribute("tabindex", "0"), this._currentCell = a;
  }
  focusNextCell(e, a) {
    const r = [...this.cells].indexOf(e) + a, l = t(this.currentDate).locale(this.locale).month();
    if (r >= 0 && r < this.cells.length) {
      const n = this.cells[r];
      this.setCurrentCell(n);
    } else r < 0 ? (this.setMonth(l - 1), this.currentDate.month() < l && this.updateComplete.then(() => {
      const n = t(this.currentDate).locale(this.locale).endOf("month"), c = this.getCellByDate(n);
      this.setCurrentCell(c);
    })) : r >= this.cells.length && (this.setMonth(l + 1), this.currentDate.month() > l && this.updateComplete.then(() => {
      const n = t(this.currentDate).locale(this.locale).startOf("month"), c = this.getCellByDate(n);
      this.setCurrentCell(c);
    }));
  }
  captureFocus() {
    this.focus(), this.setFocusToCurrentCell();
  }
  getWeekdaysMin() {
    const e = this.instanceLocalData.firstDayOfWeek(), a = this.instanceLocalData.weekdaysMin();
    return a.slice(e).concat(a.slice(0, e));
  }
  renderCalendarGridHeader() {
    return h`<thead part="calendar-grid-header" class="calendar-grid-header">
      <tr class="calendar-grid-header-row">
        ${this.getWeekdaysMin().map(
      (e) => h`<th class="calendar-cell">
              <dap-ds-calendar-cell
                header
                part="calendar-grid-header-cell"
                exportparts="base: calendar-grid-header-cell-base"
                locale=${this.locale}
                >${e}</dap-ds-calendar-cell
              >
            </th>`
    )}
      </tr>
    </thead>`;
  }
  renderCalendarGridBody(e) {
    return h`<tbody part="body" class="calendar-grid-body">
      ${[
      ...new Array(
        this.getWeeksInMonth(e || t().locale(this.locale))
      ).keys()
    ].map(
      (a) => h`<tr class="calendar-grid-row">
            ${this.getDatesInWeek(a, e).map((s) => {
        const r = this.isOutOfRange(e, s), l = !this.isDateInAllowedRange(s) || this.disabledDate(s), n = this.isRangeStart(s), c = this.isRangeEnd(s), u = this.isInRange(s);
        return this.shouldHideAdjacentMonths && r ? h`<td
                  role="gridcell"
                  class="${g("calendar-cell calendar-cell--empty")}"></td>` : h`<td
                role="gridcell"
                class="${g("calendar-cell")}"
                aria-disabled=${l}>
                <dap-ds-calendar-cell
                  part="calendar-grid-cell"
                  exportparts="base: calendar-grid-cell-base, today-mark: calendar-grid-cell-today-mark"
                  ?outofrange=${r}
                  ?today=${this.isToday(s)}
                  ?selected=${this.isSelected(s)}
                  ?rangestart=${n}
                  ?rangeend=${c}
                  ?inrange=${u}
                  .value=${s}
                  locale=${this.locale}
                  ?disabledDay=${l}
                  role="button"
                  aria-pressed=${this.isSelected(s)}
                  aria-disabled=${l}
                  @click=${() => !l && this.setSelectedDate(s)}
                  @keydown=${this.handleKeyDown}
                  >${s.date()}</dap-ds-calendar-cell
                >
              </td>`;
      })}
          </tr> `
    )}
    </tbody>`;
  }
  renderCalendarHeader() {
    return h`
      <header
        part="calendar-header"
        class="calendar__header"
        @keydown=${this.handleKeyDown}>
        <dap-ds-icon-button
          part="calendar-header-button-prev"
          class="calendar__header-button-prev"
          data-testid=${this.prevButtonTestId}
          clean
          size="lg"
          variant="brand"
          icon="arrow-left-l-line"
          @keydown=${this.handleKeyDown}
          aria-label=${y("calendar.prevMonth", { lng: this.locale })}
          @click=${() => {
      this.setMonth(this.currentDate.month() - 1);
    }}>
        </dap-ds-icon-button>
        <dap-ds-select
          part="calendar-header-year-select"
          floatingStrategy="fixed"
          class=${g(
      "calendar__header-select",
      "calendar__header-year-select"
    )}
          @dds-keydown=${this.handleKeyDown}
          size="sm"
          noAnimation
          aria-label=${y("calendar.year", { lng: this.locale })}
          value=${t(this.currentDate).year()}
          @dds-change=${(e) => {
      e.preventDefault(), e.stopPropagation(), e.detail.value && !isNaN(parseInt(e.detail.value)) && parseInt(e.detail.value) !== t(this.currentDate).locale(this.locale).year() && (this.currentDate = t(this.currentDate).locale(this.locale).set("year", parseInt(e.detail.value)));
    }}>
          <dap-ds-icon-expand-up-down-fill
            slot="indicator-icon"
            size="16"></dap-ds-icon-expand-up-down-fill>
          ${this._yearOptionsLoaded ? [
      ...new Array(
        t(this.maxDate).locale(this.locale).year() - t(this.minDate).locale(this.locale).year() + 1
      ).keys()
    ].map(
      (e) => h`<dap-ds-option-item
                    value=${t(this.minDate).locale(this.locale).year() + e}>
                    ${t(this.minDate).locale(this.locale).year() + e}
                  </dap-ds-option-item>`
    ) : h`<dap-ds-option-item value=${t(this.currentDate).year()}>
                ${t(this.currentDate).year()}
              </dap-ds-option-item>`}
        </dap-ds-select>
        <dap-ds-select
          id="monthSelect"
          part="calendar-header-month-select"
          floatingStrategy="fixed"
          class=${g(
      "calendar__header-select",
      "calendar__header-month-select"
    )}
          size="sm"
          noAnimation
          aria-label=${y("calendar.month", { lng: this.locale })}
          value=${t(this.currentDate).locale(this.locale).month() + 1}
          @dds-change=${(e) => {
      e.preventDefault(), e.stopPropagation(), e.detail.value && !isNaN(parseInt(e.detail.value)) && parseInt(e.detail.value) !== t(this.currentDate).locale(this.locale).month() + 1 && this.setMonth(parseInt(e.detail.value) - 1);
    }}>
          <dap-ds-icon-expand-up-down-fill
            slot="indicator-icon"
            size="16"></dap-ds-icon-expand-up-down-fill>
          ${this.getAllowedMonths(
      t(this.currentDate).locale(this.locale)
    ).map(
      (e) => h`<dap-ds-option-item
                value=${this.instanceLocalData.months().indexOf(e) + 1}>
                ${e}
              </dap-ds-option-item>`
    )}
        </dap-ds-select>
        <dap-ds-icon-button
          part="calendar-header-button-next"
          class="calendar__header-button-next"
          data-testid=${this.nextButtonTestId}
          clean
          size="lg"
          variant="brand"
          icon="arrow-right-l-line"
          aria-label=${y("calendar.nextMonth", { lng: this.locale })}
          @click=${() => {
      this.setMonth(
        t(this.currentDate).locale(this.locale).month() + 1
      );
    }}>
        </dap-ds-icon-button>
      </header>
    `;
  }
  render() {
    if (this.mode === "range") {
      const a = t(this.currentDate).locale(this.locale).add(1, "month");
      return h` <div class="calendar calendar--range">
        ${this.renderCalendarHeader()}
        <div class="calendar__months">
          <div class="calendar__month">
            <table
              part="base"
              class="calendar__grid"
              role="grid"
              aria-label=${`${this.rangeStart ? t(this.rangeStart).locale(this.locale).format("LL, dddd") : ""}`}>
              ${this.renderCalendarGridHeader()}
              ${this.renderCalendarGridBody(this.startDate)}
            </table>
          </div>
          <div class="calendar__month calendar__month--next">
            <table
              part="base"
              class="calendar__grid"
              role="grid"
              aria-label=${`${this.rangeEnd ? t(this.rangeEnd).locale(this.locale).format("LL, dddd") : ""}`}>
              ${this.renderCalendarGridHeader()}
              ${this.renderCalendarGridBody(a.startOf("month"))}
            </table>
          </div>
        </div>
      </div>`;
    }
    return h` <div class="calendar">
      ${this.renderCalendarHeader()}
      <table
        part="base"
        class="calendar__grid"
        role="grid"
        aria-label=${`${this.value ? t(this.value).locale(this.locale).format("LL, dddd") : ""}`}>
        ${this.renderCalendarGridHeader()}
        ${this.renderCalendarGridBody(this.startDate)}
      </table>
    </div>`;
  }
};
D.tagName = "dap-ds-calendar", D.dependencies = {
  "dap-ds-calendar-cell": $,
  "dap-ds-icon-button": M,
  "dap-ds-select": I,
  "dap-ds-icon-expand-up-down-fill": A,
  "dap-ds-option-item": k
}, D.styles = R(E);
let i = D;
o([
  O("dap-ds-calendar-cell:not([header])")
], i.prototype, "cells");
o([
  _("#monthSelect")
], i.prototype, "monthSelect");
o([
  d({ reflect: !0 })
], i.prototype, "mode");
o([
  d({ type: Boolean })
], i.prototype, "hideAdjacentMonths");
o([
  d({ attribute: !1 })
], i.prototype, "value");
o([
  d({ attribute: !1 })
], i.prototype, "rangeStart");
o([
  d({ attribute: !1 })
], i.prototype, "rangeEnd");
o([
  d({ attribute: !1 })
], i.prototype, "currentDate");
o([
  d({ attribute: !1 })
], i.prototype, "minDate");
o([
  d({ attribute: !1 })
], i.prototype, "maxDate");
o([
  d({ attribute: !1 })
], i.prototype, "disabledDate");
o([
  d({ reflect: !0 })
], i.prototype, "locale");
o([
  d()
], i.prototype, "prevButtonTestId");
o([
  d()
], i.prototype, "nextButtonTestId");
o([
  v()
], i.prototype, "_currentCell");
o([
  v()
], i.prototype, "_yearOptionsLoaded");
export {
  i as default
};
//# sourceMappingURL=calendar.component.js.map