callix-dialer-widget 1.2.1 → 1.2.3

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

@@ -54367,14 +54367,16 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, vari
   ] }) }) : null;
   if (isMiniMode) {
     const isCallActive = isInCall || isConnecting;
-    const callButtonDisabled = !isCallActive && !isNumberValid;
+    const hasNumber = sanitizedDialValue.length > 0;
+    const callButtonDisabled = !isCallActive && !hasNumber;
     const miniCanUseKeypad = !availabilityError && (canUseKeypad || isIdle || isOnBreak);
-    console.log("[FloatingDialer Mini] Estado do teclado:", {
+    console.log("[FloatingDialer Mini] Estado:", {
       miniCanUseKeypad,
+      callButtonDisabled,
+      hasNumber,
+      dialValue: sanitizedDialValue,
+      isNumberValid,
       availabilityError,
-      canUseKeypad,
-      isIdle,
-      isOnBreak,
       callState,
       operatorState: operatorState == null ? void 0 : operatorState.state
     });
@@ -55181,6 +55183,7 @@ function InlineDialer({ variant = "default", ...props }) {
       {
         dangerouslySetInnerHTML: {
           __html: `
+            /* Wrapper base */
             .callix-inline-wrapper {
               position: relative;
               display: flex;
@@ -55216,6 +55219,97 @@ function InlineDialer({ variant = "default", ...props }) {
             .callix-inline-wrapper [data-floating-dialer-resize] {
               display: 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;
+              max-width: 100% !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.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;
+              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.mode.min > button[class*="bg-emerald"] {
+              background: #10b981 !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;
+            }
           `
         }
       }