import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { b as useState, a as useRef, u as useEffect } from './chunks/4ccc6eeb.js';
import './chunks/34f18ef7.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import './chunks/d76d6172.js';
import './kun-icon.js';
import './chunks/e5702756.js';
import { isChildOf } from './kun-dropdown.js';

var style = ".kun-fold-button {\n  position: relative;\n}\n\n.kun-series-item {\n  padding-left: 10px;\n  color: rgb(113, 128, 150);\n  height: 37px;\n  text-align:left;\n  line-height:37px;\n  cursor: pointer;\n  position: relative;\n}\n\n.kun-series-selected {\n  text-align:left;\n  position: relative;\n  background-color: white;\n  height: 37px;\n  line-height:37px;\n  cursor: pointer;\n  border-color: rgb(230, 236, 241);\n  border-width: 1px;\n  border-style: solid;\n  padding-left: 10px;\n}\n\n.fixed-right {\n  z-index: 100;\n  background-color: white;\n  left: 16px;\n  margin-left: 100%;\n  position: absolute;\n  padding: 20px 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: rgb(230, 236, 241);\n  top: -47%;\n}\n";

const KunFoldButton = () => {
  const [showDialog, setShowDialog] = useState(false);
  const [kunTitle] = useProp("kunTitle");
  const ref = useRef();
  const onMyClick = useEvent("MyClick", {
    composed: true,
    bubbles: true
  });

  const onClick = event => {
    if (showDialog) {
      setShowDialog(false);
    } else {
      setShowDialog(true);
    }

    onMyClick({});
    event.preventDefault();
    event.stopPropagation();
  };

  const clickEventI = event => {
    if (event.target != null && !isChildOf(event.target, ref.current)) {
      if (showDialog) {
        setShowDialog(false);
        event.preventDefault();
      }
    }
  };

  useEffect(() => {
    document.addEventListener("click", clickEventI);
    return () => {
      document.removeEventListener("click", clickEventI);
    };
  }, [showDialog]);
  return h("host", {
    shadowDom: true
  }, h("style", null, style), h("div", {
    ref: ref,
    className: "kun-fold-button"
  }, h("div", {
    onclick: event => onClick(event),
    className: showDialog ? "kun-series-selected" : "kun-series-item"
  }, kunTitle), showDialog && h("div", {
    className: "fixed-right bg-white"
  }, h("slot", {
    name: "content"
  }))));
};

KunFoldButton.props = {
  kunTitle: {
    type: String,
    value: "kun-fold-button",
    reflect: true,
    event: {
      type: "changeMessage"
    }
  }
};
var kunFoldButton = getComponentOrDefine("kun-fold-button", KunFoldButton);

export default kunFoldButton;
//# sourceMappingURL=kun-fold-button.js.map
