callix-dialer-widget 1.1.3 → 1.1.5

package/dist-widget/callix-dialer.es.js

@@ -53041,6 +53041,15 @@ function useOperatorBreak() {
 }
 const DEFAULT_COUNTRY_PREFIX = "+55";
 const MAX_DIAL_LENGTH = 32;
+const DEFAULT_DIALER_DIMENSIONS = { width: 448, height: 640 };
+const MIN_DIALER_WIDTH = 280;
+const MIN_DIALER_HEIGHT = 420;
+const MAX_DIALER_WIDTH = 720;
+const MAX_DIALER_HEIGHT = 900;
+const MIN_DIALER_SCALE = 0.7;
+const MAX_DIALER_SCALE = 1.25;
+const VIEWPORT_MARGIN_SMALL = 12;
+const VIEWPORT_MARGIN_DEFAULT = 16;
 const keypadKeys = [
   { value: "1", detail: "" },
   { value: "2", detail: "ABC" },
@@ -53078,14 +53087,55 @@ function FloatingDialer({
   sessionError
 }) {
   const containerRef = useRef(null);
+  const cardRef = useRef(null);
   const pointerRef = useRef({ pointerId: null, offsetX: 0, offsetY: 0 });
+  const resizeRef = useRef({
+    pointerId: null,
+    originX: 0,
+    originY: 0,
+    startWidth: DEFAULT_DIALER_DIMENSIONS.width,
+    startHeight: DEFAULT_DIALER_DIMENSIONS.height,
+    edge: "corner"
+  });
   const dragMovedRef = useRef(false);
   const [position2, setPosition] = useState({ x: 24, y: 24 });
   const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [rawDialValue, setRawDialValue] = useState("");
+  const [manualSize, setManualSize] = useState(null);
+  const [observedSize, setObservedSize] = useState({
+    width: DEFAULT_DIALER_DIMENSIONS.width,
+    height: DEFAULT_DIALER_DIMENSIONS.height
+  });
   const prevAuthRef = useRef(isAuthenticated);
   const dialValue = useMemo(() => sanitizeDialInput(rawDialValue), [rawDialValue]);
+  const contentScale = useMemo(() => {
+    const widthRatio = observedSize.width / DEFAULT_DIALER_DIMENSIONS.width;
+    const heightRatio = observedSize.height / DEFAULT_DIALER_DIMENSIONS.height;
+    const ratio = Math.min(widthRatio, heightRatio);
+    return clamp(ratio, MIN_DIALER_SCALE, MAX_DIALER_SCALE);
+  }, [observedSize]);
+  const clampSizeToViewport = useCallback(
+    (proposed) => {
+      if (typeof window === "undefined") {
+        return {
+          width: clamp(proposed.width, MIN_DIALER_WIDTH, MAX_DIALER_WIDTH),
+          height: clamp(proposed.height, MIN_DIALER_HEIGHT, MAX_DIALER_HEIGHT)
+        };
+      }
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const margin2 = viewportWidth < 640 ? VIEWPORT_MARGIN_SMALL : VIEWPORT_MARGIN_DEFAULT;
+      const maxWidth = Math.min(MAX_DIALER_WIDTH, viewportWidth - margin2 * 2);
+      const maxHeight = Math.min(MAX_DIALER_HEIGHT, viewportHeight - margin2 * 2);
+      return {
+        width: clamp(proposed.width, MIN_DIALER_WIDTH, Math.max(MIN_DIALER_WIDTH, maxWidth)),
+        height: clamp(proposed.height, MIN_DIALER_HEIGHT, Math.max(MIN_DIALER_HEIGHT, maxHeight))
+      };
+    },
+    []
+  );
   const clampPositionToViewport = useCallback(
     (proposed) => {
       if (typeof window === "undefined") {
@@ -53096,15 +53146,16 @@ function FloatingDialer({
       const element = containerRef.current;
       const rawWidth = (element == null ? void 0 : element.offsetWidth) ?? 0;
       const rawHeight = (element == null ? void 0 : element.offsetHeight) ?? 0;
-      const fallbackWidth = isOpen ? 360 : 80;
-      const fallbackHeight = isOpen ? 520 : 80;
+      const activeSize = manualSize ?? observedSize ?? DEFAULT_DIALER_DIMENSIONS;
+      const fallbackWidth = isOpen ? activeSize.width : 80;
+      const fallbackHeight = isOpen ? activeSize.height : 80;
       const width = rawWidth > 0 ? rawWidth : fallbackWidth;
       const height = rawHeight > 0 ? rawHeight : fallbackHeight;
-      const margin2 = viewportWidth < 640 ? 12 : 16;
+      const margin2 = viewportWidth < 640 ? VIEWPORT_MARGIN_SMALL : VIEWPORT_MARGIN_DEFAULT;
       const minX = margin2;
       const minY = margin2;
-      const maxX = viewportWidth - width - margin2;
-      const maxY = viewportHeight - height - margin2;
+      const maxX = Math.max(minX, viewportWidth - width - margin2);
+      const maxY = Math.max(minY, viewportHeight - height - margin2);
       let nextX = proposed.x;
       let nextY = proposed.y;
       if (viewportWidth < 640 && isOpen) {
@@ -53119,7 +53170,7 @@ function FloatingDialer({
         y: clamp(nextY, minY, maxY)
       };
     },
-    [isOpen]
+    [isOpen, manualSize, observedSize]
   );
   const updateDialValue = useCallback((next) => {
     setRawDialValue((prev) => {
@@ -53147,6 +53198,7 @@ function FloatingDialer({
     }
     const handleViewportChange = () => {
       setPosition((prev) => clampPositionToViewport(prev));
+      setManualSize((prev) => prev ? clampSizeToViewport(prev) : prev);
     };
     window.addEventListener("resize", handleViewportChange);
     window.addEventListener("orientationchange", handleViewportChange);
@@ -53154,7 +53206,32 @@ function FloatingDialer({
       window.removeEventListener("resize", handleViewportChange);
       window.removeEventListener("orientationchange", handleViewportChange);
     };
-  }, [clampPositionToViewport]);
+  }, [clampPositionToViewport, clampSizeToViewport]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const element = cardRef.current;
+    if (!element) {
+      return;
+    }
+    const applySize = (width, height) => {
+      setObservedSize({ width, height });
+    };
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          const { width, height } = entry.contentRect;
+          applySize(width, height);
+        }
+      });
+      observer.observe(element);
+      return () => observer.disconnect();
+    }
+    const rect = element.getBoundingClientRect();
+    applySize(rect.width, rect.height);
+  }, [isOpen, manualSize]);
   useEffect(() => {
     if (isAuthenticated && !prevAuthRef.current) {
       setIsOpen(true);
@@ -53175,11 +53252,16 @@ function FloatingDialer({
       const modalHeight = ((_b = containerRef.current) == null ? void 0 : _b.offsetHeight) ?? 0;
       const nextX = event2.clientX - pointerRef.current.offsetX;
       const nextY = event2.clientY - pointerRef.current.offsetY;
-      const maxX = (typeof window !== "undefined" ? window.innerWidth : 0) - modalWidth - 16;
-      const maxY = (typeof window !== "undefined" ? window.innerHeight : 0) - modalHeight - 16;
+      const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
+      const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+      const margin2 = viewportWidth < 640 ? VIEWPORT_MARGIN_SMALL : VIEWPORT_MARGIN_DEFAULT;
+      const maxX = viewportWidth - modalWidth - margin2;
+      const maxY = viewportHeight - modalHeight - margin2;
+      const safeMaxX = Math.max(margin2, maxX);
+      const safeMaxY = Math.max(margin2, maxY);
       setPosition({
-        x: clamp(nextX, 16, maxX),
-        y: clamp(nextY, 16, maxY)
+        x: clamp(nextX, margin2, safeMaxX),
+        y: clamp(nextY, margin2, safeMaxY)
       });
     };
     const handlePointerUp = (event2) => {
@@ -53196,11 +53278,92 @@ function FloatingDialer({
       window.removeEventListener("pointerup", handlePointerUp);
     };
   }, [isDragging]);
+  useEffect(() => {
+    if (!isResizing) {
+      return;
+    }
+    const handlePointerMove = (event2) => {
+      if (resizeRef.current.pointerId !== event2.pointerId) {
+        return;
+      }
+      event2.preventDefault();
+      const { edge: edge2, startWidth, startHeight, originX, originY } = resizeRef.current;
+      let nextWidth = startWidth;
+      let nextHeight = startHeight;
+      if (edge2 === "right" || edge2 === "corner") {
+        nextWidth = startWidth + (event2.clientX - originX);
+      }
+      if (edge2 === "bottom" || edge2 === "corner") {
+        nextHeight = startHeight + (event2.clientY - originY);
+      }
+      const clamped = clampSizeToViewport({ width: nextWidth, height: nextHeight });
+      setManualSize((prev) => {
+        if (prev && prev.width === clamped.width && prev.height === clamped.height) {
+          return prev;
+        }
+        return clamped;
+      });
+    };
+    const handlePointerEnd = (event2) => {
+      var _a2, _b;
+      if (resizeRef.current.pointerId !== event2.pointerId) {
+        return;
+      }
+      try {
+        (_b = (_a2 = event2.target) == null ? void 0 : _a2.releasePointerCapture) == null ? void 0 : _b.call(_a2, event2.pointerId);
+      } catch {
+      }
+      setIsResizing(false);
+      resizeRef.current = {
+        ...resizeRef.current,
+        pointerId: null
+      };
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerEnd);
+    window.addEventListener("pointercancel", handlePointerEnd);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerEnd);
+      window.removeEventListener("pointercancel", handlePointerEnd);
+    };
+  }, [isResizing, clampSizeToViewport]);
   useEffect(() => {
     if (!isOpen) {
       dragMovedRef.current = false;
     }
   }, [isOpen]);
+  useEffect(() => {
+    setPosition((prev) => clampPositionToViewport(prev));
+  }, [manualSize, observedSize, clampPositionToViewport]);
+  const beginResize = useCallback(
+    (edge2) => (event2) => {
+      var _a2, _b;
+      if (event2.button !== 0 && event2.pointerType !== "touch") {
+        return;
+      }
+      event2.preventDefault();
+      event2.stopPropagation();
+      const element = cardRef.current;
+      const rect = element == null ? void 0 : element.getBoundingClientRect();
+      const startWidth = (rect == null ? void 0 : rect.width) ?? ((manualSize == null ? void 0 : manualSize.width) ?? DEFAULT_DIALER_DIMENSIONS.width);
+      const startHeight = (rect == null ? void 0 : rect.height) ?? ((manualSize == null ? void 0 : manualSize.height) ?? DEFAULT_DIALER_DIMENSIONS.height);
+      resizeRef.current = {
+        pointerId: event2.pointerId,
+        originX: event2.clientX,
+        originY: event2.clientY,
+        startWidth,
+        startHeight,
+        edge: edge2
+      };
+      try {
+        (_b = (_a2 = event2.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a2, event2.pointerId);
+      } catch {
+      }
+      setIsResizing(true);
+    },
+    [manualSize]
+  );
   const beginDrag = useCallback((event2) => {
     var _a2;
     if (event2.button !== 0) {
@@ -53249,6 +53412,31 @@ function FloatingDialer({
       error: sessionError
     }
   );
+  const scale = Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
+  const cardStyle = {
+    width: manualSize ? `${manualSize.width}px` : void 0,
+    height: manualSize ? `${manualSize.height}px` : void 0,
+    minWidth: `${MIN_DIALER_WIDTH}px`,
+    minHeight: `${MIN_DIALER_HEIGHT}px`,
+    maxWidth: `min(${MAX_DIALER_WIDTH}px, calc(100vw - 1.5rem))`,
+    maxHeight: `calc(100vh - 3rem)`
+  };
+  const scaledWrapperStyle = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`,
+    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`
+  };
+  const cardContentStyle = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`,
+    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -53262,47 +53450,71 @@ function FloatingDialer({
       children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: tw`w-[min(32rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] sm:w-[28rem] md:w-[30rem] rounded-3xl border border-slate-200/60 bg-gradient-to-br from-white/95 via-slate-50/95 to-white/90 shadow-2xl backdrop-blur-lg overflow-y-auto sm:overflow-hidden max-h-[calc(100vh-3rem)] sm:max-h-none transition-all duration-300`,
+          ref: cardRef,
+          "data-floating-dialer-card": "true",
+          className: tw`relative flex flex-col items-start overflow-hidden rounded-3xl border border-slate-200/60 bg-gradient-to-br from-white/95 via-slate-50/95 to-white/90 shadow-2xl backdrop-blur-lg transition-all duration-300 w-[min(32rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] sm:w-[28rem] md:w-[30rem] max-h-[calc(100vh-3rem)] sm:max-h-none`,
+          style: cardStyle,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex flex-1 flex-col overflow-hidden`, style: scaledWrapperStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-1 flex-col rounded-3xl overflow-hidden`, style: cardContentStyle, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: tw`cursor-grab touch-none active:cursor-grabbing flex items-center justify-between bg-gradient-to-r from-primary to-primaryDark px-4 py-3 sm:px-5 sm:py-4 text-white shadow-sm`,
+                  onPointerDown: beginDrag,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15 shadow-inner sm:h-11 sm:w-11`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-0.5`, children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] uppercase tracking-[0.2em] text-white/70`, children: "Discadora" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold sm:text-base`, children: username ?? "Visitante" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: tw`rounded-full p-2 text-white/80 transition hover:bg-white/15 hover:text-white`,
+                        onClick: () => setIsOpen(false),
+                        "aria-label": "Fechar discadora",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex-1 overflow-y-auto p-3 sm:p-4`, children: dialerContent })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: tw`cursor-grab touch-none active:cursor-grabbing flex items-center justify-between bg-gradient-to-r from-primary to-primaryDark px-4 py-3 sm:px-5 sm:py-4 text-white shadow-sm`,
-                onPointerDown: beginDrag,
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "div",
-                    {
-                      className: tw`flex items-center gap-3`,
-                      children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(
-                          "span",
-                          {
-                            className: tw`inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15 shadow-inner sm:h-11 sm:w-11`,
-                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` })
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-0.5`, children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] uppercase tracking-[0.2em] text-white/70`, children: "Discadora" }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm font-semibold sm:text-base`, children: username ?? "Visitante" })
-                        ] })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: tw`rounded-full p-2 text-white/80 transition hover:bg-white/15 hover:text-white`,
-                      onClick: () => setIsOpen(false),
-                      "aria-label": "Fechar discadora",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
-                    }
-                  )
-                ]
+                role: "presentation",
+                "data-floating-dialer-resize": "right",
+                "aria-hidden": "true",
+                className: tw`absolute right-0 top-16 bottom-12 w-3 cursor-ew-resize touch-none rounded-md border border-transparent transition-colors duration-150 hover:border-primary/30 hover:bg-primary/10`,
+                onPointerDown: beginResize("right")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                role: "presentation",
+                "data-floating-dialer-resize": "bottom",
+                "aria-hidden": "true",
+                className: tw`absolute left-16 right-12 bottom-0 h-3 cursor-ns-resize touch-none rounded-md border border-transparent transition-colors duration-150 hover:border-primary/30 hover:bg-primary/10`,
+                onPointerDown: beginResize("bottom")
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`p-3 sm:p-4`, children: dialerContent })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                role: "presentation",
+                "data-floating-dialer-resize": "corner",
+                className: tw`absolute bottom-1 right-1 flex h-6 w-6 items-center justify-center cursor-nwse-resize touch-none`,
+                onPointerDown: beginResize("corner"),
+                "aria-label": "Redimensionar discadora",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`h-3 w-3 rotate-45 rounded-sm border border-slate-300 bg-white/80 shadow` })
+              }
+            )
           ]
         }
       ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -54819,29 +55031,61 @@ function ActiveCallSummary({
 }
 function InlineDialer(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: `
-        .callix-inline-wrapper > div {
-          position: static !important;
-          width: 100% !important;
-          max-width: 100% !important;
-          min-width: 0 !important;
-          height: 100% !important;
-          max-height: 100% !important;
-          min-height: 0 !important;
-          left: auto !important;
-          top: auto !important;
-          transform: none !important;
-        }
-        .callix-inline-wrapper > div > div {
-          width: 100% !important;
-          max-width: 100% !important;
-          min-width: 0 !important;
-          height: auto !important;
-          max-height: none !important;
-          min-height: 0 !important;
-          overflow: visible !important;
-        }
-      ` } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+            .callix-inline-wrapper {
+              position: relative;
+              display: flex;
+              width: 100%;
+              height: 100%;
+            }
+            .callix-inline-wrapper > div {
+              position: static !important;
+              inset: auto !important;
+              transform: none !important;
+              width: 100% !important;
+              max-width: 100% !important;
+              min-width: 0 !important;
+              height: 100% !important;
+              max-height: 100% !important;
+              min-height: 0 !important;
+            }
+            .callix-inline-wrapper [data-floating-dialer-card] {
+              width: 100% !important;
+              max-width: 100% !important;
+              min-width: 0 !important;
+              height: 100% !important;
+              max-height: 100% !important;
+              min-height: 0 !important;
+              box-shadow: none !important;
+              backdrop-filter: none !important;
+            }
+            .callix-inline-wrapper [data-floating-dialer-card] > * {
+              width: 100% !important;
+              height: 100% !important;
+            }
+            .callix-inline-wrapper [data-floating-dialer-card] > div:first-child {
+              transform: none !important;
+              width: 100% !important;
+              min-height: 100% !important;
+            }
+            .callix-inline-wrapper [data-floating-dialer-card] > div:first-child > div:first-child {
+              width: 100% !important;
+              min-height: 100% !important;
+            }
+            .callix-inline-wrapper [data-floating-dialer-card] .overflow-y-auto {
+              max-height: none !important;
+            }
+            .callix-inline-wrapper [data-floating-dialer-resize] {
+              display: none !important;
+            }
+          `
+        }
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "callix-inline-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props }) })
   ] });
 }