callix-dialer-widget 1.1.7 → 1.1.9

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

@@ -53084,7 +53084,8 @@ function FloatingDialer({
   onLogin,
   onLogout,
   isLoadingSession,
-  sessionError
+  sessionError,
+  variant = "default"
 }) {
   const containerRef = useRef(null);
   const cardRef = useRef(null);
@@ -53110,6 +53111,7 @@ function FloatingDialer({
   });
   const prevAuthRef = useRef(isAuthenticated);
   const dialValue = useMemo(() => sanitizeDialInput(rawDialValue), [rawDialValue]);
+  const isMiniMode = variant === "min";
   const contentScale = useMemo(() => {
     const widthRatio = observedSize.width / DEFAULT_DIALER_DIMENSIONS.width;
     const heightRatio = observedSize.height / DEFAULT_DIALER_DIMENSIONS.height;
@@ -53401,7 +53403,8 @@ function FloatingDialer({
       username: username ?? "",
       dialValue,
       setDialValue: updateDialValue,
-      onLogout
+      onLogout,
+      variant
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     LoginForm,
@@ -53412,6 +53415,17 @@ function FloatingDialer({
       error: sessionError
     }
   );
+  if (isMiniMode) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: ["callix", "mode", "min", tw`w-full`].join(" "),
+        "data-callix-variant": "min",
+        style: { width: "100%", height: "100%" },
+        children: dialerContent
+      }
+    );
+  }
   const scale = Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
   const scaledWidth = DEFAULT_DIALER_DIMENSIONS.width / scale;
   const scaledHeight = DEFAULT_DIALER_DIMENSIONS.height / scale;
@@ -53443,7 +53457,8 @@ function FloatingDialer({
     "div",
     {
       ref: containerRef,
-      className: tw`fixed z-50 select-none`,
+      className: ["callix", "mode", "full", tw`fixed z-50 select-none`].join(" "),
+      "data-callix-variant": "default",
       style: {
         transform: `translate3d(${position2.x}px, ${position2.y}px, 0)`,
         top: 0,
@@ -53592,9 +53607,10 @@ function LoginForm({ defaultValue, onSubmit, isLoading, error: error2 }) {
     )
   ] });
 }
-function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
+function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, variant }) {
   var _a2, _b;
   const operator = clientSdkReactExports.useCallOperator();
+  const isMiniMode = variant === "min";
   const operatorState = clientSdkReactExports.useCallOperatorState();
   const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
   const currentCallInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
@@ -54297,6 +54313,167 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
       }
     );
   }
+  const breakModal = isBreakModalOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-lg font-bold text-slate-800`, children: "Selecione uma Pausa" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsBreakModalOpen(false);
+            setBreakError(null);
+          },
+          className: tw`text-slate-400 hover:text-slate-600 transition`,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-xl` })
+        }
+      )
+    ] }),
+    breakError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg bg-red-50 border border-red-200 px-3 py-2 flex items-start gap-2`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`text-red-500 shrink-0 mt-0.5` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-red-700`, children: breakError })
+    ] }),
+    !breaks || breaks.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`text-center py-8`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-slate-500`, children: "Nenhuma pausa disponivel" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2 max-h-96 overflow-y-auto`, children: breaks.map((breakItem) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleGoOnBreak(breakItem.id),
+        className: tw`w-full flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 text-left transition-all hover:border-amber-300 hover:bg-amber-50 hover:shadow-md`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-xl text-amber-600 shrink-0` }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 min-w-0`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`font-semibold text-slate-800 truncate`, children: breakItem.name }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-xs text-slate-500`, children: [
+              "ID: ",
+              breakItem.id
+            ] })
+          ] })
+        ]
+      },
+      breakItem.id
+    )) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setIsBreakModalOpen(false);
+          setBreakError(null);
+        },
+        className: tw`w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-100`,
+        children: "Cancelar"
+      }
+    )
+  ] }) }) : null;
+  if (isMiniMode) {
+    const isCallActive = isInCall || isConnecting;
+    const callButtonDisabled = !isCallActive && !isNumberValid;
+    const miniCanUseKeypad = !availabilityError && (canUseKeypad || isIdle || isOnBreak);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: ["callix", "mode", "min", tw`flex w-full max-w-full flex-col gap-3 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm text-slate-800`].join(" "),
+        "data-callix-variant": "min",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`${statusVisual.badgeClass} flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase leading-tight`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(statusVisual.Icon, { className: tw`text-xs` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: statusLabel })
+            ] }),
+            isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleGoOffBreak(),
+                className: tw`inline-flex items-center gap-1 rounded-full border border-emerald-400 bg-emerald-50 px-2.5 py-1 text-[10px] font-semibold text-emerald-700 transition hover:bg-emerald-100`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiCheckCircle, { className: tw`text-xs` }),
+                  "Voltar"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsBreakModalOpen(true),
+                className: tw`inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-50 px-2.5 py-1 text-[10px] font-semibold text-amber-700 transition hover:bg-amber-100`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-xs` }),
+                  "Pausa"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[10px] font-semibold uppercase tracking-wide text-slate-500`, children: "Numero" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`flex-1 truncate text-lg font-semibold text-slate-800`, children: dialDisplayText || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-slate-400 text-base font-normal`, children: "Digite um numero" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleBackspace,
+                  disabled: !miniCanUseKeypad,
+                  className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-600 transition hover:border-slate-400 hover:text-slate-800 disabled:opacity-40 disabled:cursor-not-allowed`,
+                  "aria-label": "Apagar ultimo digito",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiDelete, { className: tw`text-base` })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  disabled: !miniCanUseKeypad,
+                  className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-300 bg-rose-50 text-rose-600 transition hover:border-rose-400 hover:bg-rose-100 disabled:opacity-40 disabled:cursor-not-allowed`,
+                  "aria-label": "Limpar numero",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-sm` })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-3 gap-2`, children: keypadKeys.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleDial(item.value),
+              disabled: !miniCanUseKeypad,
+              className: tw`flex h-12 flex-col items-center justify-center rounded-lg border border-slate-200 bg-white text-base font-semibold text-slate-800 shadow-sm transition active:scale-95 hover:border-slate-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-40`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.value }),
+                item.detail && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[8px] font-semibold uppercase tracking-widest text-slate-400`, children: item.detail })
+              ]
+            },
+            item.value
+          )) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (isCallActive) {
+                  void handleHangup();
+                } else {
+                  void handleCall();
+                }
+              },
+              disabled: callButtonDisabled,
+              className: tw`${isCallActive ? "bg-rose-500 hover:bg-rose-600" : "bg-emerald-500 hover:bg-emerald-600"} flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-bold text-white shadow-md transition disabled:cursor-not-allowed disabled:opacity-60`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhone, { className: tw`text-base` }),
+                isCallActive ? "Encerrar" : "Ligar"
+              ]
+            }
+          ),
+          (callError || availabilityError || audioDeviceError) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[11px] text-rose-700`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`mr-1 inline text-xs` }),
+            callError || availabilityError || audioDeviceError
+          ] }),
+          breakModal
+        ]
+      }
+    );
+  }
   const showActiveSummary = isInCall || isConnecting;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -54638,58 +54815,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: audioDeviceError })
           ] })
         ] }),
-        isBreakModalOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-lg font-bold text-slate-800`, children: "Selecione uma Pausa" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setIsBreakModalOpen(false);
-                  setBreakError(null);
-                },
-                className: tw`text-slate-400 hover:text-slate-600 transition`,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-xl` })
-              }
-            )
-          ] }),
-          breakError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg bg-red-50 border border-red-200 px-3 py-2 flex items-start gap-2`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`text-red-500 shrink-0 mt-0.5` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-red-700`, children: breakError })
-          ] }),
-          !breaks || breaks.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`text-center py-8`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-slate-500`, children: "Nenhuma pausa disponível" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2 max-h-96 overflow-y-auto`, children: breaks.map((breakItem) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleGoOnBreak(breakItem.id),
-              className: tw`w-full flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 text-left transition-all hover:border-amber-300 hover:bg-amber-50 hover:shadow-md`,
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-xl text-amber-600 shrink-0` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 min-w-0`, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`font-semibold text-slate-800 truncate`, children: breakItem.name }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-xs text-slate-500`, children: [
-                    "ID: ",
-                    breakItem.id
-                  ] })
-                ] })
-              ]
-            },
-            breakItem.id
-          )) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setIsBreakModalOpen(false);
-                setBreakError(null);
-              },
-              className: tw`w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-100`,
-              children: "Cancelar"
-            }
-          )
-        ] }) }),
+        breakModal,
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -55039,8 +55165,8 @@ function ActiveCallSummary({
     ] })
   ] }) });
 }
-function InlineDialer(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
+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: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "style",
       {
@@ -55085,9 +55211,41 @@ function InlineDialer(props) {
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "callix-inline-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "callix-inline-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props, variant }) })
   ] });
 }
+function deriveOptionsFromElement(element) {
+  const result2 = {};
+  const datasetMode = element.getAttribute("data-callix-mode") || element.dataset.callixMode || element.dataset.mode;
+  const datasetUsername = element.getAttribute("data-callix-username") || element.dataset.callixUsername || element.dataset.username;
+  const classList = Array.from(element.classList);
+  const lowerClasses = classList.map((cls) => cls.toLowerCase());
+  const hasCallixClass = lowerClasses.includes("callix");
+  const normalizedMode = datasetMode ? datasetMode.toLowerCase() : void 0;
+  if (normalizedMode === "min" || normalizedMode === "mini") {
+    result2.uiVariant = "min";
+  } else if (hasCallixClass) {
+    if (lowerClasses.includes("mode-min") || lowerClasses.includes("mode-mini") || lowerClasses.includes("mode") && lowerClasses.includes("min")) {
+      result2.uiVariant = "min";
+    }
+  }
+  if (!result2.presetUsername && datasetUsername) {
+    result2.presetUsername = datasetUsername.trim();
+  }
+  if (!result2.presetUsername) {
+    for (const className of classList) {
+      const match2 = className.match(/(?:user|username|callix-user)[-_:]([A-Za-z0-9.@_-]+)/i);
+      if (match2) {
+        result2.presetUsername = match2[1];
+        break;
+      }
+    }
+  }
+  if (result2.presetUsername) {
+    result2.presetUsername = result2.presetUsername.trim();
+  }
+  return result2;
+}
 class CallixDialerWidget {
   constructor(options) {
     this.root = null;
@@ -55108,6 +55266,13 @@ class CallixDialerWidget {
       if (!this.container) {
         throw new Error(`Container não encontrado: ${this.options.container}`);
       }
+      const derived = deriveOptionsFromElement(this.container);
+      if (!this.options.uiVariant && derived.uiVariant) {
+        this.options.uiVariant = derived.uiVariant;
+      }
+      if (!this.options.presetUsername && derived.presetUsername) {
+        this.options.presetUsername = derived.presetUsername;
+      }
       this.root = clientExports.createRoot(this.container);
       this.root.render(
         /* @__PURE__ */ jsxRuntimeExports.jsx(StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialerWrapper, { options: this.options }) })
@@ -55148,6 +55313,10 @@ function DialerWrapper({ options }) {
   const [sessionToken, setSessionToken] = useState(null);
   const [callixDomain, setCallixDomain] = useState(null);
   const [isRestoringSession, setIsRestoringSession] = useState(true);
+  const presetUsername = options.presetUsername ? options.presetUsername.trim() : null;
+  const uiVariant = options.uiVariant ?? "default";
+  const autoLoginAttemptedRef = useRef(false);
+  const lastPresetRef = useRef(presetUsername);
   useEffect(() => {
     if (typeof window === "undefined") {
       setIsRestoringSession(false);
@@ -55159,6 +55328,11 @@ function DialerWrapper({ options }) {
         setIsRestoringSession(false);
         return;
       }
+      if (presetUsername && storedLastUsername !== presetUsername) {
+        console.log("[Callix Dialer] Ignorando sessao salva por mismatch com preset:", storedLastUsername, "!=", presetUsername);
+        setIsRestoringSession(false);
+        return;
+      }
       const STORAGE_KEYS = getStorageKeys(storedLastUsername);
       const storedToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN);
       const storedDomain = localStorage.getItem(STORAGE_KEYS.DOMAIN);
@@ -55186,7 +55360,12 @@ function DialerWrapper({ options }) {
       setIsRestoringSession(false);
     }
   }, []);
-  const handleLogin = async (user) => {
+  useEffect(() => {
+    if (presetUsername && username !== presetUsername) {
+      setUsername(presetUsername);
+    }
+  }, [presetUsername, username]);
+  const handleLogin = useCallback(async (user) => {
     setIsLoading(true);
     setError(null);
     try {
@@ -55231,14 +55410,32 @@ function DialerWrapper({ options }) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [options.apiUrl]);
+  useEffect(() => {
+    if (!presetUsername) {
+      lastPresetRef.current = null;
+      autoLoginAttemptedRef.current = false;
+      return;
+    }
+    if (lastPresetRef.current !== presetUsername) {
+      lastPresetRef.current = presetUsername;
+      autoLoginAttemptedRef.current = false;
+    }
+    if (isAuthenticated || isLoading || isRestoringSession || autoLoginAttemptedRef.current) {
+      return;
+    }
+    autoLoginAttemptedRef.current = true;
+    void handleLogin(presetUsername);
+  }, [presetUsername, isAuthenticated, isLoading, isRestoringSession, handleLogin]);
   const handleLogout = () => {
     const currentUsername = username;
-    setUsername(null);
+    setUsername(presetUsername ?? null);
     setIsAuthenticated(false);
     setSessionToken(null);
     setCallixDomain(null);
     setError(null);
+    autoLoginAttemptedRef.current = false;
+    lastPresetRef.current = presetUsername ?? null;
     if (typeof window !== "undefined" && currentUsername) {
       try {
         const STORAGE_KEYS = getStorageKeys(currentUsername);
@@ -55262,7 +55459,8 @@ function DialerWrapper({ options }) {
         onLogin: handleLogin,
         onLogout: handleLogout,
         isLoadingSession: isLoading || isRestoringSession,
-        sessionError: error2
+        sessionError: error2,
+        variant: uiVariant
       }
     );
   }
@@ -55279,7 +55477,8 @@ function DialerWrapper({ options }) {
           onLogin: handleLogin,
           onLogout: handleLogout,
           isLoadingSession: isLoading,
-          sessionError: error2
+          sessionError: error2,
+          variant: uiVariant
         }
       )
     }