@addsign/moje-agenda-shared-lib 1.0.27 → 1.0.29

package/dist/ConfirmationModalDialog-CM6ONyzM.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { F as FaRegTrashAlt } from "./index-DH-TC1O6.js";
+import { G as GenIcon } from "./iconBase-B8_TsgYI.js";
+import Button from "./components/Button.js";
+function IoCloseOutline(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round", "strokeWidth": "32", "d": "M368 368 144 144m224 0L144 368" }, "child": [] }] })(props);
+}
+function ConfirmationModalDialog({
+  title,
+  confirmAction,
+  cancelAction,
+  description,
+  agreeeText,
+  cancelText
+}) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        cancelAction();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [cancelAction]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4",
+      style: { zIndex: 50 },
+      children: /* @__PURE__ */ jsxs("div", { className: "w-96 h-64 bg-white rounded-xl shadow flex-col justify-start items-center inline-flex relative overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: "graphics",
+            className: "w-80 h-80 left-[-120px] top-[-120px] absolute ",
+            children: /* @__PURE__ */ jsxs("div", { className: "w-80 h-80 left-0 top-0 absolute", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-24 h-24 left-[120px] top-[120px] absolute rounded-full border border-gray-150" }),
+              /* @__PURE__ */ jsx("div", { className: "w-36 h-36 left-[96px] top-[96px] absolute rounded-full border border-gray-100  " }),
+              /* @__PURE__ */ jsx("div", { className: "w-48 h-48 left-[72px] top-[72px] absolute rounded-full border border-gray-100  " }),
+              /* @__PURE__ */ jsx("div", { className: "w-60 h-60 left-[48px] top-[48px] absolute rounded-full border border-gray-50   " }),
+              /* @__PURE__ */ jsx("div", { className: "w-72 h-72 left-[24px] top-[24px] absolute rounded-full border border-gray-50" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: "header",
+            className: "self-stretch h-40 flex-col justify-start items-center flex z-40",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "self-stretch h-40 px-6 pt-6 flex-col justify-start items-start gap-4 flex", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-12 h-12 relative bg-red-100 rounded-full", children: /* @__PURE__ */ jsx(FaRegTrashAlt, { className: "w-6 h-6 left-[12px] top-[12px] absolute" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "self-stretch h-16 flex-col justify-start items-start gap-1 flex", children: [
+                  /* @__PURE__ */ jsx("div", { className: "self-stretch text-gray-900 text-lg font-semibold font-['Inter'] leading-7", children: title }),
+                  /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal font-['Open Sans'] leading-tight", children: description })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-11 h-11 p-2 right-0 top-[16px] absolute rounded-full justify-center items-center inline-flex mr-4 hover:bg-gray-100",
+                  onClick: cancelAction,
+                  children: /* @__PURE__ */ jsx(IoCloseOutline, { className: "w-6 h-6 relative text-gray-400" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: "actions",
+            className: "self-stretch h-24 pt-8 flex-col justify-start items-start flex z-40",
+            children: /* @__PURE__ */ jsxs("div", { className: "self-stretch px-6 pb-6 justify-start items-start gap-3  flex", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  id: "ConfirmationModalDialog:back",
+                  type: "button",
+                  variant: "secondary",
+                  onClick: cancelAction,
+                  className: "flex-1",
+                  children: cancelText || "Zrušit"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  id: "ConfirmationModalDialog:agree",
+                  type: "button",
+                  variant: "danger",
+                  onClick: () => {
+                    if (!isConfirming) {
+                      setIsConfirming(true);
+                      confirmAction();
+                    }
+                  },
+                  disabled: isConfirming,
+                  className: "flex-1",
+                  children: [
+                    agreeeText || "OK",
+                    " "
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ConfirmationModalDialog as C,
+  IoCloseOutline as I
+};
+//# sourceMappingURL=ConfirmationModalDialog-CM6ONyzM.js.map