@gez/date-time-kit/dist/components/date-time-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;
import {
  closestByEvent,
  granHelper
} from "../../utils/index.mjs";
import {
  weekKey
} from "../calendar/index.mjs";
import {
  clearupPopEleAttrSync2Parent,
  isPopoverAttrKey,
  parentPopAttrSync2PopEle,
  popEleAttrSync2Parent,
  popoverAttrKeys
} from "../popover/attr-sync-helper.mjs";
import {
  UiBase
} from "../web-component-base/index.mjs";
import {
  Ele as YyyyMmNavEle
} from "../yyyymm-nav/index.mjs";
import { GranType } from "./common.mjs";
import html from "./index.html.mjs";
import { styleStr } from "./styleStr.mjs";
export const granularityList = granHelper.dateTime.list;
export class Ele extends UiBase {
  constructor() {
    super(...arguments);
    __publicField(this, "_ob", null);
    __publicField(this, "_render", super._genRenderFn(() => {
      this._updateOpenState();
      const currentTime = this.currentTime;
      const { _els, _granType } = this;
      _els.hostWrapper.dataset.type = _granType;
      const { min: minGran, max: maxGran } = this._minmaxGran;
      const gen = () => ({
        minGranularity: minGran,
        maxGranularity: maxGran,
        currentTime
      });
      if (_granType !== GranType.Time) {
        Object.assign(_els.echoInPopover, gen());
        Object.assign(_els.echoInDate, gen());
      }
      if (_granType === GranType.CalendarTime || _granType === GranType.DateTime) {
        Object.assign(_els.timeSelectorInCalendar, {
          minGranularity: minGran,
          currentTime
        });
      }
      if (_granType === GranType.Calendar || _granType === GranType.CalendarTime) {
        _els.nav.millisecond = +currentTime;
        const { min, max } = this._getMaxMinTime();
        Object.assign(_els.calendar, {
          weekStartAt: this.weekStartAt,
          timeStart: +currentTime,
          timeEnd: +currentTime,
          showingTime: this.showingTime,
          minTime: min,
          maxTime: max
        });
      } else if (_granType === GranType.Time) {
        Object.assign(_els.timeSelectorOnly, gen());
      } else if (_granType === GranType.Date) {
        Object.assign(_els.dateSelector, gen());
      } else if (_granType === GranType.DateTime) {
        Object.assign(_els.dateSelector, {
          maxGranularity: maxGran,
          minGranularity: "day",
          currentTime
        });
        Object.assign(_els.timeSelectorInDate, {
          maxGranularity: "hour",
          minGranularity: minGran,
          currentTime
        });
      }
      this._updateSlot();
    }));
    __publicField(this, "_onCalendarSelect", (e) => {
      e.stopPropagation();
      this.currentTime = +e.detail + (this._minmaxGran.min === "day" ? 0 : this._els.timeSelectorInCalendar.millisecond);
    });
    __publicField(this, "_onNavChange", (e) => {
      e.stopPropagation();
      if (!closestByEvent(e, ".wrapper")) return;
      this._els.calendar.showingTime = +e.detail.newTime;
    });
    __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) => {
      this.currentTime = e.detail;
    });
    __publicField(this, "_onDateSelectorSelect", (e) => {
      e.stopPropagation();
      const time = new Date(e.detail);
      time.setHours(0, 0, 0, 0);
      time.setMilliseconds(this._els.timeSelectorInDate.millisecond);
      this.currentTime = +time;
    });
    __publicField(this, "_onConfirmBtnClick", () => {
      this.dispatchEvent("select-time", this.currentTime);
      this.open = false;
    });
  }
  static get observedAttributes() {
    return [
      ...super.observedAttributes,
      "week-start-at",
      "current-time",
      "showing-time",
      "min-time",
      "max-time",
      "min-granularity",
      "max-granularity",
      ...popoverAttrKeys
    ];
  }
  _getTimeAttr(name, defaultValue) {
    const v = this._getAttr(name, defaultValue);
    return new Date(Number.isNaN(+v) ? v : +v);
  }
  _setTimeAttr(name, value) {
    const v = new Date(value);
    if (Number.isNaN(+v)) return;
    this.setAttribute(name, +v + "");
  }
  _getMaxMinTime({
    min = +this._getTimeAttr("min-time", "NaN"),
    max = +this._getTimeAttr("max-time", "NaN")
  } = {}) {
    if (Number.isNaN(min)) min = Number.NEGATIVE_INFINITY;
    if (Number.isNaN(max)) max = Number.POSITIVE_INFINITY;
    if (min > max) [min, max] = [max, min];
    return { min, max };
  }
  get currentTime() {
    const { min, max } = this._getMaxMinTime();
    const currTime = this._getTimeAttr("current-time", "" + Date.now());
    if (+currTime < min) return new Date(min);
    if (+currTime > max) return new Date(max);
    return currTime;
  }
  set currentTime(val) {
    const v = new Date(val);
    if (Number.isNaN(+v)) return;
    const { min, max } = this._getMaxMinTime();
    this._setTimeAttr("current-time", Math.min(max, Math.max(min, +v)));
  }
  get showingTime() {
    return this._getTimeAttr("showing-time", "" + +this.currentTime);
  }
  set showingTime(val) {
    this._setTimeAttr("showing-time", val);
  }
  get minTime() {
    return this._getMaxMinTime().min;
  }
  set minTime(val) {
    const { min, max } = this._getMaxMinTime({
      min: +new Date(Number.isNaN(+val) ? val : +val)
    });
    this._setTimeAttr("min-time", min);
    this._setTimeAttr("max-time", max);
  }
  get maxTime() {
    return this._getMaxMinTime().max;
  }
  set maxTime(val) {
    const { min, max } = this._getMaxMinTime({
      max: +new Date(Number.isNaN(+val) ? val : +val)
    });
    this._setTimeAttr("min-time", min);
    this._setTimeAttr("max-time", max);
  }
  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 maxGranularity() {
    return this._getAttr("max-granularity", "year");
  }
  set maxGranularity(val) {
    if (!granHelper.dateTime.has(val)) return;
    this.setAttribute("max-granularity", val);
  }
  get _staticEls() {
    return {
      ...super._staticEls,
      hostWrapper: this.$0(_a || (_a = __template([".host-wrapper"]))),
      nav: this.$0(_b || (_b = __template(["dt-yyyymm-nav"]))),
      calendar: this.$0(_c || (_c = __template(["dt-calendar-base"]))),
      timeSelectorInCalendar: this.$0(_d || (_d = __template(["dt-popover dt-hhmmss-ms-selector"]))),
      timeSelectorOnly: this.$0(_e || (_e = __template(["dt-hhmmss-ms-selector.timeOnly"]))),
      dateSelector: this.$0(_f || (_f = __template(["dt-yyyymmdd-selector"]))),
      timeSelectorInDate: this.$0(_g || (_g = __template(["dt-yyyymmdd-selector dt-hhmmss-ms-selector"]))),
      popover: this.$0(_h || (_h = __template(["dt-popover"]))),
      slots: this.$(_i || (_i = __template(["slot"]))),
      echoInDate: this.$0(_j || (_j = __template(["dt-yyyymmdd-selector dt-echo"]))),
      echoInPopover: this.$0(_k || (_k = __template(["dt-popover dt-echo"])))
    };
  }
  get _minmaxGran() {
    const [min, max] = granHelper.dateTime.minmax(
      this.minGranularity,
      this.maxGranularity
    );
    return { min, max };
  }
  get _granType() {
    const { isDateGran, isTimeGran } = granHelper.dateTime;
    const { min, max } = this._minmaxGran;
    if (max === "year" && min === "day") {
      return GranType.Calendar;
    } else if (isTimeGran(max) && isTimeGran(min)) {
      return GranType.Time;
    } else if (isDateGran(max) && isDateGran(min)) {
      return GranType.Date;
    } else if ((max === "month" || max === "day") && isTimeGran(min)) {
      return GranType.DateTime;
    } else {
      return GranType.CalendarTime;
    }
  }
  _updateSlot() {
    const { _els, _granType } = this;
    const hasSlotTrigger = !!this.querySelector('[slot="trigger"]');
    _els.slots.forEach((slot) => {
      if (slot.matches("[data-type~='".concat(_granType, "']"))) {
        slot.setAttribute("name", "trigger");
      } else {
        slot.removeAttribute("name");
      }
      if (slot.matches("[data-type~='".concat(GranType.Time, "']"))) {
        if (hasSlotTrigger) {
          slot.setAttribute("slot", "trigger");
        } else {
          slot.removeAttribute("slot");
        }
      }
    });
  }
  _updateOpenState(force = this.hasAttribute("pop-open")) {
    const { _els, _granType } = this;
    const isDateGran = _granType === GranType.Date || _granType === GranType.DateTime;
    const isCalendarGran = _granType === GranType.Calendar || _granType === GranType.CalendarTime;
    const isTimeGran = _granType === GranType.Time;
    _els.popover.toggleAttribute("open", force && isCalendarGran);
    _els.echoInPopover.toggleAttribute("active", force && isCalendarGran);
    _els.dateSelector.toggleAttribute("pop-open", force && isDateGran);
    _els.echoInDate.toggleAttribute("active", force && isDateGran);
    _els.timeSelectorOnly.toggleAttribute("pop-open", force && isTimeGran);
    this.toggleAttribute("pop-open", force);
  }
  get open() {
    return this.hasAttribute("pop-open");
  }
  set open(v) {
    this._updateOpenState(v);
  }
  connectedCallback() {
    if (!super.connectedCallback()) return;
    const { _els } = this;
    this._render();
    popEleAttrSync2Parent(this, _els.popover);
    this._bindEvt(_els.calendar)("select-time", this._onCalendarSelect);
    this._bindEvt(_els.nav)("change", this._onNavChange);
    this._bindEvt(_els.nav)("popover-open-change", this._onNavOpenToggle);
    this._bindEvt([_els.timeSelectorInCalendar, _els.timeSelectorOnly])(
      "select-time",
      this._onTimeSelectorChange
    );
    this._bindEvt([_els.timeSelectorInCalendar, _els.timeSelectorInDate])(
      "open-change",
      this._stopEvent
    );
    this._bindEvt(_els.dateSelector)("open-change", (e) => {
      if (!(this.open = e.detail))
        _els.timeSelectorInDate.currentTime = this.currentTime;
    });
    this._bindEvt(_els.dateSelector)(
      "select-time",
      this._onDateSelectorSelect
    );
    this._bindEvt(_els.timeSelectorOnly)(
      "open-change",
      (e) => this.open = e.detail
    );
    this._bindEvt(_l || (_l = __template([".confirmBtn"])))(
      "click",
      this._onConfirmBtnClick
    );
    this._ob = new MutationObserver(() => this._updateSlot());
    this._ob.observe(this, { childList: true });
    this.dispatchEvent("select-time", this.currentTime);
  }
  disconnectedCallback() {
    var _a2;
    clearupPopEleAttrSync2Parent(this);
    (_a2 = this._ob) == null ? void 0 : _a2.disconnect();
    this._ob = null;
    return super.disconnectedCallback();
  }
  _onAttrChanged(name, oldValue, newValue) {
    super._onAttrChanged(name, oldValue, newValue);
    const { _els } = this;
    if (isPopoverAttrKey(name)) {
      if (oldValue === newValue) return;
      if (name === "pop-open") {
        this._updateOpenState();
        return;
      }
      parentPopAttrSync2PopEle(name, oldValue, newValue, _els.popover);
      if (newValue === null) {
        _els.timeSelectorOnly.removeAttribute(name);
        _els.dateSelector.removeAttribute(name);
        return;
      }
      _els.timeSelectorOnly.setAttribute(name, newValue);
      _els.dateSelector.setAttribute(name, newValue);
      return;
    }
    this._render();
    if (name === "current-time" && this._granType !== GranType.CalendarTime) {
      this.dispatchEvent("select-time", this.currentTime);
    }
  }
  /** 时分秒毫秒回显格式化函数。设置为 `null` 则重置为默认值 */
  get timeFormatter() {
    return this._els.timeSelectorInCalendar.timeFormatter;
  }
  set timeFormatter(fn) {
    const { _els } = this;
    _els.timeSelectorInCalendar.timeFormatter = _els.timeSelectorOnly.timeFormatter = _els.timeSelectorInDate.timeFormatter = _els.echoInDate.timeFormatter = _els.echoInPopover.timeFormatter = fn;
  }
  /** 年月日回显格式化函数。设置为 `null` 则重置为默认值 */
  get dateFormatter() {
    return this._els.dateSelector.dateFormatter;
  }
  set dateFormatter(fn) {
    const { _els } = this;
    _els.echoInDate.dateFormatter = _els.echoInPopover.dateFormatter = fn;
  }
  /** 日期时间回显格式化函数。设置为 `null` 则重置为默认值 */
  get dateTimeFormatter() {
    return this._els.echoInDate.dateTimeFormatter;
  }
  set dateTimeFormatter(fn) {
    const { _els } = this;
    _els.echoInDate.dateTimeFormatter = _els.echoInPopover.dateTimeFormatter = fn;
  }
}
__publicField(Ele, "tagName", "dt-date-time-selector");
__publicField(Ele, "_style", styleStr);
__publicField(Ele, "_template", html);
Ele.define();