callix-dialer-widget 1.2.2 → 1.2.4

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

@@ -55177,52 +55177,107 @@ function ActiveCallSummary({
   ] }) });
 }
 function InlineDialer({ variant = "default", ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: ["callix", "mode", variant === "min" ? "min" : "inline"].join(" "), "data-callix-variant": variant === "min" ? "min" : "inline", style: { width: "100%", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__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;
+            /* Estilos para modo mini quando Tailwind CDN não processa classes */
+            .callix.mode.min {
+              display: flex !important;
+              flex-direction: column !important;
+              gap: 0.75rem !important;
+              border-radius: 1rem !important;
+              border: 1px solid #e2e8f0 !important;
+              background: rgba(255, 255, 255, 0.95) !important;
+              padding: 0.75rem !important;
+              box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
+              color: #1e293b !important;
               width: 100% !important;
-              height: 100% !important;
+              max-width: 100% !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] {
-              position: relative !important;
-              inset: auto !important;
-              transform: none !important;
-              width: 100% !important;
-              height: 100% !important;
-              box-shadow: none !important;
-              backdrop-filter: none !important;
+
+            /* Botões do modo mini */
+            .callix.mode.min button {
+              cursor: pointer !important;
+              transition: all 0.2s ease !important;
+            }
+            
+            .callix.mode.min button:disabled {
+              cursor: not-allowed !important;
+              opacity: 0.6 !important;
+            }
+
+            /* Grid do teclado numérico */
+            .callix.mode.min [class*="grid-cols-3"] {
+              display: grid !important;
+              grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+              gap: 0.5rem !important;
+            }
+
+            /* Botões do teclado */
+            .callix.mode.min [class*="grid-cols-3"] button {
+              display: flex !important;
+              height: 3rem !important;
+              flex-direction: column !important;
+              align-items: center !important;
+              justify-content: center !important;
+              border-radius: 0.5rem !important;
+              border: 1px solid #e2e8f0 !important;
+              background: white !important;
+              font-size: 1rem !important;
+              font-weight: 600 !important;
+              color: #1e293b !important;
+              box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
+            }
+
+            .callix.mode.min [class*="grid-cols-3"] button:hover:not(:disabled) {
+              border-color: #cbd5e1 !important;
+              box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] > div:first-child {
+
+            .callix.mode.min [class*="grid-cols-3"] button:active:not(:disabled) {
+              transform: scale(0.95) !important;
+            }
+
+            /* Botão principal de Ligar/Encerrar */
+            .callix.mode.min > button[class*="bg-emerald"],
+            .callix.mode.min > button[class*="bg-rose"] {
+              display: flex !important;
+              height: 2.75rem !important;
               width: 100% !important;
-              height: 100% !important;
-              transform-origin: top left !important;
+              align-items: center !important;
+              justify-content: center !important;
+              gap: 0.5rem !important;
+              border-radius: 0.75rem !important;
+              font-size: 0.875rem !important;
+              font-weight: 700 !important;
+              color: white !important;
+              box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
+              border: none !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] [data-floating-dialer-content] {
-              width: auto !important;
-              min-width: 448px !important;
-              min-height: 640px !important;
+
+            .callix.mode.min > button[class*="bg-emerald"] {
+              background: #10b981 !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-resize] {
-              display: none !important;
+
+            .callix.mode.min > button[class*="bg-emerald"]:hover:not(:disabled) {
+              background: #059669 !important;
+            }
+
+            .callix.mode.min > button[class*="bg-rose"] {
+              background: #f43f5e !important;
+            }
+
+            .callix.mode.min > button[class*="bg-rose"]:hover:not(:disabled) {
+              background: #e11d48 !important;
             }
           `
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "callix-inline-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props, variant }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props, variant })
   ] });
 }
 function deriveOptionsFromElement(element) {