@gez/date-time-kit/dist/components/popover/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;
import {
  autoUpdate,
  computePosition,
  flip,
  offset,
  size
} from "@floating-ui/dom";
import { html } from "../../utils/index.mjs";
import {
  UiBase
} from "../web-component-base/index.mjs";
import { styleStr } from "./css.mjs";
const cacheStyle = {};
let hiddenCount = 0;
const hiddenBodyOverflow = () => {
  if (hiddenCount++) return;
  const { style } = document.body;
  Array.from(style).forEach((prop) => {
    cacheStyle[prop] = style[prop];
  });
  style.overflow = "hidden";
};
const resetBodyOverflow = () => {
  if (--hiddenCount > 0) return;
  const { style } = document.body;
  style.overflow = "";
  for (const prop in cacheStyle) {
    style[prop] = cacheStyle[prop];
    Reflect.deleteProperty(cacheStyle, prop);
  }
};
export class Ele extends UiBase {
  constructor() {
    super(...arguments);
    /**
     * toggle open state
     * @returns null if disabled, otherwise the new open state
     */
    __publicField(this, "toggleOpen", (force = !this.open) => {
      if (this.disabled) return null;
      return this.open = force;
    });
    __publicField(this, "_onTriggerClick", () => {
      this.toggleOpen();
    });
    __publicField(this, "_onDocClick", (e) => {
      const popEle = this._popAssignedEle;
      if (popEle) {
        const composedPath = e.composedPath();
        if (composedPath.includes(popEle)) return;
        if (composedPath.includes(this)) {
          const popRect = popEle.getBoundingClientRect();
          if (e.clientX >= popRect.left && e.clientX <= popRect.right && e.clientY >= popRect.top && e.clientY <= popRect.bottom) {
            return;
          }
        }
      }
      e.stopPropagation();
      e.preventDefault();
      this.open = false;
      document.removeEventListener("click", this._onDocClick, true);
    });
    __publicField(this, "_cleanupAutoUpdate", null);
  }
  static get observedAttributes() {
    return [
      ...super.observedAttributes,
      "open",
      "disabled",
      "placement",
      "strategy",
      "offset",
      "min-width-with-trigger"
    ];
  }
  get open() {
    return this.hasAttribute("open");
  }
  set open(v) {
    this.toggleAttribute("open", v);
  }
  get disabled() {
    return this.hasAttribute("disabled");
  }
  set disabled(v) {
    this.toggleAttribute("disabled", v);
  }
  get placement() {
    return this._getAttr("placement", "bottom-start");
  }
  set placement(v) {
    if (v) this.setAttribute("placement", v);
    else this.removeAttribute("placement");
  }
  get strategy() {
    return this._getAttr("strategy", "none");
  }
  set strategy(v) {
    if (v) this.setAttribute("strategy", v);
    else this.removeAttribute("strategy");
  }
  get offset() {
    const n = +this._getAttr("offset", "0");
    return Number.isNaN(n) ? 0 : n;
  }
  set offset(v) {
    if (!Number.isNaN(v)) this.setAttribute("offset", v + "");
    else this.removeAttribute("offset");
  }
  get _staticEls() {
    return {
      ...super._staticEls,
      pop: this.$0(_b || (_b = __template(['slot[name="pop"]']))),
      trigger: this.$0(_c || (_c = __template(['slot[name="trigger"]'])))
    };
  }
  get _triggerAssignedEle() {
    return this._els.trigger.assignedElements({ flatten: true })[0];
  }
  get _popAssignedEle() {
    return this._els.pop.assignedElements({ flatten: true })[0] || this.querySelector('[slot="pop"]');
  }
  connectedCallback() {
    if (!super.connectedCallback()) return;
    this._bindEvt(this._els.trigger)("click", this._onTriggerClick);
    this.strategy = this.strategy;
  }
  disconnectedCallback() {
    var _a2;
    (_a2 = this._cleanupAutoUpdate) == null ? void 0 : _a2.call(this);
    document.removeEventListener("click", this._onDocClick, true);
    return super.disconnectedCallback();
  }
  _onAttrChanged(name, oldValue, newValue) {
    var _a2;
    super._onAttrChanged(name, oldValue, newValue);
    if (name !== "open") return;
    const isOpen = newValue !== null;
    setTimeout(() => {
      document[(isOpen ? "add" : "remove") + "EventListener"](
        "click",
        this._onDocClick,
        true
      );
    });
    if (!isOpen || this.strategy === "none" || this._isSmallScreen)
      (_a2 = this._cleanupAutoUpdate) == null ? void 0 : _a2.call(this);
    else this._autoUpdatePosition();
    if (this._isSmallScreen) {
      if (isOpen) hiddenBodyOverflow();
      else resetBodyOverflow();
    }
    this.dispatchEvent("open-change", this.open, true);
  }
  _autoUpdatePosition() {
    var _a2;
    (_a2 = this._cleanupAutoUpdate) == null ? void 0 : _a2.call(this);
    const updatePosition = async () => {
      const { _triggerAssignedEle, _els, strategy } = this;
      if (!_triggerAssignedEle || strategy === "none") return;
      const { x, y } = await computePosition(
        _triggerAssignedEle,
        _els.pop,
        {
          placement: this.placement,
          strategy,
          middleware: [
            offset(this.offset),
            flip(),
            size({
              apply: ({ elements, rects }) => {
                if (!this.hasAttribute("min-width-with-trigger"))
                  return;
                elements.floating.style.minWidth = rects.reference.width + "px";
              }
            })
          ]
        }
      );
      function roundByDPR(value) {
        const dpr = window.devicePixelRatio || 1;
        return Math.round(value * dpr) / dpr;
      }
      _els.pop.style.transform = "translate(".concat(roundByDPR(x), "px, ").concat(roundByDPR(y), "px)");
    };
    const cleanup = autoUpdate(
      this._els.trigger,
      this._els.pop,
      updatePosition
    );
    this._cleanupAutoUpdate = () => {
      cleanup();
      this._cleanupAutoUpdate = null;
      this._els.pop.style.transform = "";
    };
  }
  _onScreenSizeChanged(isSmall) {
    var _a2;
    super._onScreenSizeChanged(isSmall);
    if (!this.open || this.strategy === "none") return;
    if (isSmall) {
      (_a2 = this._cleanupAutoUpdate) == null ? void 0 : _a2.call(this);
      this._els.pop.style.transform = "";
      hiddenBodyOverflow();
    } else {
      this._autoUpdatePosition();
      resetBodyOverflow();
    }
  }
}
__publicField(Ele, "tagName", "dt-popover");
__publicField(Ele, "_style", styleStr);
__publicField(Ele, "_template", html(_a || (_a = __template(['<slot name="trigger" part="trigger"></slot><slot name="pop" part="pop"></slot>']))));
Ele.define();