import { h } from './chunks/d4789960.js';
import { g as useHost } from './chunks/456564be.js';
import './chunks/d4058887.js';
import { b as useState, u as useEffect } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './kun-icon-close.js';
import './kun-search-input.js';

var style = ":host {\n}\n\n.search {\n  position: fixed;\n  top: 56px;\n  left: 0;\n  background-color: #fffaf0;\n  z-index: 999;\n  width: 100%;\n  height: calc(100vh - 56px);\n}\n\n.position-right {\n}";

const KunSearchPage = ({
  content
}) => {
  const [show, setShow] = useState(false);

  const setShowEvent = event => {
    if (event.key === "Escape") {
      setShow(false);
      event.preventDefault();
    }
  };

  const host = useHost();
  useEffect(() => {
    host.current.addEventListener("keydown", setShowEvent);
    return () => {
      host.current.removeEventListener("keydown", setShowEvent);
    };
  });
  return h("host", null, h("style", null, style), h("div", {
    onclick: () => setShow(true),
    role: "presentation"
  }, h("button", {
    type: "button"
  }, content)), show && h("div", {
    className: "search w-full flex flex-col relative"
  }, h("kun-icon-close", {
    onclick: () => setShow(false),
    className: " right-0 absolute p-4"
  }), h("div", {
    className: "mt-20  w-full flex justify-center "
  }, h("kun-search-input", null))));
};

KunSearchPage.props = {
  content: {
    type: String,
    value: "Search",
    reflect: true,
    event: {
      type: "changeMessage"
    }
  }
};
var kunSearchPage = getComponentOrDefine("kun-search-page", KunSearchPage);

export default kunSearchPage;
//# sourceMappingURL=kun-search-page.js.map
