@gez/date-time-kit/dist/components/period-selector/index.mjs

var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
import {
  closestByEvent,
  granHelper
} from "../../utils/index.mjs";
import {
  weekKey
} from "../calendar/index.mjs";
import {
  Ele as HhMmSsMsSelectorEle
} from "../hhmmss-ms-list-grp/selector.mjs";
import { UiBase } from "../web-component-base/index.mjs";
import {
  Ele as YyyyMmNavEle
} from "../yyyymm-nav/index.mjs";
import styleStr from "./index.css.mjs";
import html from "./index.html.mjs";
export const granularityList = granHelper.dateTime.list;
const diffInMonth = (a, b) => {
  if (a > b) [a, b] = [b, a];
  const aYear = a.getFullYear();
  const aMonth = a.getMonth();
  const bYear = b.getFullYear();
  const bMonth = b.getMonth();
  return bYear * 12 + bMonth - (aYear * 12 + aMonth);
};
export class Ele extends UiBase {
  constructor() {
    super(...arguments);
    // 存放的是结束时间点
    __publicField(this, "_selectedDate", null);
    __publicField(this, "_render", super._genRenderFn(() => {
      let timeStart = this.timeStart;
      let timeEnd = this.timeEnd;
      if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
      const { _els } = this;
      _els.startCalendar.weekStartAt = _els.endCalendar.weekStartAt = this.weekStartAt;
      _els.startCalendar.timeStart = _els.endCalendar.timeStart = +timeStart;
      _els.endCalendar.timeEnd = _els.startCalendar.timeEnd = +timeEnd;
      const isSmall = this._isSmallScreen;
      _els.startNav.millisecond = _els.startCalendar.showingTime = !isSmall || !this._selectedDate || +timeStart !== +this._selectedDate ? +timeStart : +timeEnd;
      if (diffInMonth(timeStart, timeEnd) <= 1) {
        const nextMonth = new Date(
          timeStart.getFullYear(),
          timeStart.getMonth() + 1
        );
        _els.endCalendar.showingTime = nextMonth;
        _els.endNav.millisecond = +nextMonth;
      } else {
        _els.endCalendar.showingTime = timeEnd;
        _els.endNav.millisecond = +timeEnd;
      }
      if (this.minGranularity === "day") {
        _els.timeSelectors.forEach((e) => e.style.display = "none");
      } else if (granHelper.isTimeGran(this.minGranularity)) {
        _els.timeSelectors.forEach((e) => e.style.display = "");
        _els.startTimeSelector.currentTime = timeStart;
        _els.endTimeSelector.currentTime = timeEnd;
        _els.startTimeSelector.minGranularity = _els.endTimeSelector.minGranularity = this.minGranularity;
      }
      this._updateDateEcho();
      this._updateNavCtrlBtn();
      const dividingLine = this.$0(_j || (_j = __template([".start .dividing-line"])));
      if (this._isSmallScreen) {
        this.$0(_k || (_k = __template([".start .time-selector-wrapper"]))).appendChild(
          this._els.endTimeSelector
        );
        dividingLine.style.display = "";
      } else {
        this.$0(_l || (_l = __template([".end .time-selector-wrapper"]))).appendChild(
          this._els.endTimeSelector
        );
        dividingLine.style.display = "none";
      }
    }));
    __publicField(this, "_updateDatePoint", (datePoint) => {
      if (!this._selectedDate) return;
      const newDate = new Date(datePoint).setHours(0, 0, 0, 0);
      const oldDate = new Date(this._selectedDate).setHours(0, 0, 0, 0);
      const setStartDate = (date) => this.timeStart = new Date(
        date + this._getTimeSelectorMs("start")
      );
      const setEndDate = (date) => this.timeEnd = new Date(date + this._getTimeSelectorMs("end"));
      if (newDate === oldDate) {
        setStartDate(newDate);
        setEndDate(newDate);
      } else if (newDate < oldDate) {
        setStartDate(newDate);
        setEndDate(oldDate);
      } else {
        setStartDate(oldDate);
        setEndDate(newDate);
      }
    });
    __publicField(this, "_onCalendarSelect", (e) => {
      e.stopPropagation();
      if (this._selectedDate === null) {
        const newTimePoint = new Date(
          +e.detail + this._getTimeSelectorMs("start")
        );
        this._selectedDate = newTimePoint;
        this.timeStart = newTimePoint;
      } else {
        this._updateDatePoint(e.detail);
        this._selectedDate = null;
      }
    });
    __publicField(this, "_onCalendarItemHover", (e) => {
      e.stopPropagation();
      this._updateDatePoint(e.detail);
    });
    __publicField(this, "_onNavChange", (e) => {
      e.stopPropagation();
      const wrapper = closestByEvent(e, ".wrapper");
      if (!wrapper) return;
      const { newTime } = e.detail;
      if (wrapper.classList.contains("start")) {
        this._els.startCalendar.showingTime = +newTime;
      } else {
        this._els.endCalendar.showingTime = +newTime;
      }
      this._updateNavCtrlBtn();
    });
    __publicField(this, "_onNavOpenToggle", (e) => {
      var _a2;
      if (!(e.target instanceof YyyyMmNavEle)) return;
      e.stopPropagation();
      (_a2 = e.target.nextElementSibling) == null ? void 0 : _a2.classList.toggle("hide", e.detail);
    });
    __publicField(this, "_onTimeSelectorChange", (e) => {
      if (!(e.target instanceof HhMmSsMsSelectorEle)) return;
      e.stopPropagation();
      const type = e.target.dataset.type;
      if (type === "start") {
        this.timeStart = e.detail;
      } else if (type === "end") {
        this.timeEnd = e.detail;
      }
    });
    __publicField(this, "dateFormatter", (time, minGranularity, isSmall) => time.toLocaleDateString("en-GB"));
  }
  static get observedAttributes() {
    return [
      ...super.observedAttributes,
      "time-start",
      "time-end",
      "min-granularity",
      "week-start-at"
    ];
  }
  get timeStart() {
    const v = this._getAttr("time-start", "" + Date.now());
    return new Date(Number.isNaN(+v) ? v : +v);
  }
  set timeStart(val) {
    const v = new Date(val);
    if (Number.isNaN(+v)) return;
    this.setAttribute("time-start", +v + "");
  }
  get timeEnd() {
    const v = this._getAttr("time-end", "" + this.timeStart);
    return new Date(Number.isNaN(+v) ? v : +v);
  }
  set timeEnd(val) {
    const v = new Date(val);
    if (Number.isNaN(+v)) return;
    this.setAttribute("time-end", +v + "");
  }
  get weekStartAt() {
    return this._getAttr("week-start-at", "sun");
  }
  set weekStartAt(val) {
    if (!weekKey.includes(val)) return;
    this.setAttribute("week-start-at", val);
  }
  get minGranularity() {
    return this._getAttr("min-granularity", "millisecond");
  }
  set minGranularity(val) {
    if (!granHelper.dateTime.has(val)) return;
    this.setAttribute("min-granularity", val);
  }
  get _staticEls() {
    return {
      ...super._staticEls,
      allNav: this.$(_a || (_a = __template(["dt-yyyymm-nav"]))),
      startNav: this.$0(_b || (_b = __template([".start dt-yyyymm-nav"]))),
      endNav: this.$0(_c || (_c = __template([".end dt-yyyymm-nav"]))),
      calendars: this.$(_d || (_d = __template(["dt-calendar-base"]))),
      startCalendar: this.$0(_e || (_e = __template([".start dt-calendar-base"]))),
      endCalendar: this.$0(_f || (_f = __template([".end dt-calendar-base"]))),
      timeSelectors: this.$(_g || (_g = __template(["dt-hhmmss-ms-selector"]))),
      startTimeSelector: this.$0(_h || (_h = __template([".start dt-hhmmss-ms-selector"]))),
      endTimeSelector: this.$0(_i || (_i = __template([".end dt-hhmmss-ms-selector"])))
    };
  }
  connectedCallback() {
    if (!super.connectedCallback()) return;
    const { _els } = this;
    this._selectedDate = null;
    this._render();
    this._bindEvt(_els.allNav)("change", this._onNavChange);
    this._bindEvt(_els.allNav)(
      "popover-open-change",
      this._onNavOpenToggle
    );
    this._bindEvt(_els.calendars)("select-time", this._onCalendarSelect);
    this._bindEvt(_els.calendars)("hover-item", this._onCalendarItemHover);
    this._bindEvt(_els.timeSelectors)("open-change", this._stopEvent);
    this._bindEvt(_els.timeSelectors)(
      "select-time",
      this._onTimeSelectorChange
    );
  }
  _onScreenSizeChanged(isSmall) {
    super._onScreenSizeChanged(isSmall);
    this._render();
  }
  _onAttrChanged(name, oldValue, newValue) {
    super._onAttrChanged(name, oldValue, newValue);
    this._render();
  }
  _updateNavCtrlBtn() {
    const { _els } = this;
    const timeStart = new Date(_els.startNav.millisecond);
    const timeEnd = new Date(_els.endNav.millisecond);
    const showCtrlBtn = diffInMonth(timeStart, timeEnd) > 1;
    const isSmall = this._isSmallScreen;
    _els.startNav.showCtrlBtnMonthAdd = _els.endNav.showCtrlBtnMonthSub = isSmall || showCtrlBtn;
  }
  _updateDateEcho() {
    let timeStart = this.timeStart;
    let timeEnd = this.timeEnd;
    if (timeStart > timeEnd) [timeStart, timeEnd] = [timeEnd, timeStart];
    const isSmall = this._isSmallScreen;
    this.$0(_m || (_m = __template([".start-date-echo"]))).textContent = this.dateFormatter(
      timeStart,
      this.minGranularity,
      isSmall
    );
    this.$0(_n || (_n = __template([".end-date-echo"]))).textContent = this.dateFormatter(
      timeEnd,
      this.minGranularity,
      isSmall
    );
    this.$0(_o || (_o = __template([".start-date-echo-wrapper"]))).classList.toggle(
      "active",
      !this._selectedDate
    );
    this.$0(_p || (_p = __template([".end-date-echo-wrapper"]))).classList.toggle(
      "active",
      !!this._selectedDate
    );
  }
  _getTimeSelectorMs(type) {
    const selector = type === "start" ? this._els.startTimeSelector : this._els.endTimeSelector;
    return this.minGranularity === "day" ? type === "start" ? 0 : 86399999 : selector.millisecond;
  }
  abortSelecting() {
    if (!this._selectedDate) return;
    this._selectedDate = null;
    this._render();
  }
  showCalendarDatePoint() {
    this._render();
  }
  // + (isSmall && minGranularity !== 'day'
  //     ? ' ' + this.timeFormatter(time, minGranularity)
  //     : '');
  get timeFormatter() {
    return this._els.startTimeSelector.timeFormatter;
  }
  set timeFormatter(fn) {
    if (typeof fn !== "function") return;
    this._els.startTimeSelector.timeFormatter = fn;
    this._els.endTimeSelector.timeFormatter = fn;
  }
}
__publicField(Ele, "tagName", "dt-period-selector");
__publicField(Ele, "_style", styleStr);
__publicField(Ele, "_template", html);
Ele.define();