@ukpc-lib/react 0.3.33 → 0.3.34

package/dist/components/index.js

@@ -1,7 +1,7 @@
 import { jsxs as T, Fragment as $e, jsx as c } from "react/jsx-runtime";
 import * as L from "react";
-import Eo, { useState as G, useContext as xe, useEffect as Q, useRef as be, useCallback as bt, forwardRef as Co, createElement as er, PureComponent as Oo } from "react";
-import { c as Te, Q as $n, C as Ne, p as At, u as hr, S as To, a as No, L as ko, b as Pr, d as $o, e as mt, f as Io, s as pt, _ as z, g as _e, P as k, h as he, i as Mo, o as Ao, j as Po, k as Ro, l as Rr, m as In, n as xt, q as Dr, I as Do, r as zo, t as zr, D as Fo, v as Mn, w as An, x as Lo, y as jo, z as Oe, A as Vo, B as gt } from "../index.module-6577468c.js";
+import Eo, { useState as G, useContext as _e, useEffect as Q, useRef as xe, useCallback as bt, forwardRef as Co, createElement as er, PureComponent as Oo } from "react";
+import { c as be, Q as $n, C as Ne, p as At, u as hr, S as To, a as No, L as ko, b as Pr, d as $o, e as mt, f as Io, s as pt, _ as z, g as we, P as k, h as he, i as Mo, o as Ao, j as Po, k as Ro, l as Rr, m as In, n as xt, q as Dr, I as Do, r as zo, t as zr, D as Fo, v as Mn, w as An, x as Lo, y as jo, z as Te, A as Vo, B as gt } from "../index.module-6577468c.js";
 import { G as Cc, E as Oc, F as Tc } from "../index.module-6577468c.js";
 import Z from "moment";
 import mr from "axios";
@@ -54,7 +54,7 @@ const Qo = (e) => {
             display: "flex",
             width: "100%",
             height: "50px",
-            borderBottom: `1px solid ${Te.grey200}`
+            borderBottom: `1px solid ${be.grey200}`
           },
           className: "tab-container__title",
           children: t.map((i, a) => /* @__PURE__ */ c(
@@ -110,9 +110,9 @@ const Qo = (e) => {
     id: e.id,
     isRead: e.isRead
   }), f = l.isRead === !1 ? "unread" : "read", h = {
-    borderColor: l.isRead ? "#c5c5c5" : (o == null ? void 0 : o.primary500) || Te.primary500,
-    backgroundColor: l.isRead ? "#c5c5c5" : (o == null ? void 0 : o.primary500) || Te.primary500
-  }, { setNotiData: m } = xe(Ne), g = hr({ baseUrl: t, notiPath: r, setNotiData: m }), b = async (x, w) => {
+    borderColor: l.isRead ? "#c5c5c5" : (o == null ? void 0 : o.primary500) || be.primary500,
+    backgroundColor: l.isRead ? "#c5c5c5" : (o == null ? void 0 : o.primary500) || be.primary500
+  }, { setNotiData: m } = _e(Ne), g = hr({ baseUrl: t, notiPath: r, setNotiData: m }), b = async (x, w) => {
     var E, p;
     try {
       const _ = r || `/notification-management/api/v1/notifications/${x}`, S = t + _;
@@ -194,7 +194,7 @@ const Qo = (e) => {
             "button",
             {
               style: {
-                color: Te.primary400,
+                color: be.primary400,
                 textDecoration: "underline"
               },
               onClick: s,
@@ -238,7 +238,7 @@ const Qo = (e) => {
                 /* @__PURE__ */ c(
                   "span",
                   {
-                    style: { backgroundColor: Te.primary400 },
+                    style: { backgroundColor: be.primary400 },
                     className: "list-dot"
                   }
                 ),
@@ -259,7 +259,7 @@ const Qo = (e) => {
 }) => {
   const [o, i] = G(!1);
   console.log(o);
-  const { setNotiData: a } = xe(Ne), l = hr({ baseUrl: t, notiPath: r, setNotiData: a }), u = async () => {
+  const { setNotiData: a } = _e(Ne), l = hr({ baseUrl: t, notiPath: r, setNotiData: a }), u = async () => {
     var h, m;
     try {
       const b = t + (r || "/notification-management/api/v1/notifications");
@@ -295,7 +295,7 @@ const Qo = (e) => {
   brandColors: r
 }) => {
   var u, f, h, m;
-  const { setShowModalFalse: n } = xe(Ne), { notidata: o } = xe(Ne);
+  const { setShowModalFalse: n } = _e(Ne), { notidata: o } = _e(Ne);
   console.log(o);
   const [i, a] = G("all"), l = [
     {
@@ -353,7 +353,11 @@ const Qo = (e) => {
               /* @__PURE__ */ c(
                 "h3",
                 {
-                  style: { fontSize: "24px", fontWeight: "500" },
+                  style: {
+                    fontSize: "24px",
+                    fontWeight: "500",
+                    color: be.textPrimary
+                  },
                   className: "list-title",
                   children: "Notifications"
                 }
@@ -416,7 +420,7 @@ function ri({
   brandColors: n
 }) {
   var m, g;
-  const { isOpen: o, toggleOpen: i, setShowModalFalse: a } = xe(Ne), { notidata: l, setNotiData: u } = xe(Ne), f = hr({ baseUrl: t, notiPath: r, setNotiData: u }), h = async () => {
+  const { isOpen: o, toggleOpen: i, setShowModalFalse: a } = _e(Ne), { notidata: l, setNotiData: u } = _e(Ne), f = hr({ baseUrl: t, notiPath: r, setNotiData: u }), h = async () => {
     var b, y;
     try {
       await f();
@@ -481,7 +485,7 @@ function ri({
             position: "absolute",
             top: "-9px",
             right: "-6px",
-            background: `${Te}`,
+            background: `${be}`,
             width: "20px",
             height: "20px",
             border: "1px solid #fff",
@@ -491,7 +495,7 @@ function ri({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: Te.danger
+            backgroundColor: be.danger
           },
           className: "notification-badge",
           children: ((m = l == null ? void 0 : l.unread) == null ? void 0 : m.total) > 9 ? "9+" : `${(g = l == null ? void 0 : l.unread) == null ? void 0 : g.total}`
@@ -502,7 +506,7 @@ function ri({
   ] });
 }
 const ni = `.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{position:fixed;display:flex;z-index:30;background:#292929;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between}.logo-container{height:100%;display:flex;align-items:center}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.languageDropdown{height:100%;padding:0 8px;display:flex;flex-direction:row;gap:8px;border-radius:3px;align-items:center;justify-content:center;height:41px;background-color:#ffffff1a;cursor:pointer;transition:background-color .2s ease-in-out}.languageDropdown:hover{background-color:#fff3}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem}.userAvatar{width:2.5rem;height:2.5rem;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}#userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}
-`, oi = `:root{--textPrimary: #292929;--textWhite: #fff;--primary500: #2E7D32;--grey100: #FAFAFA;--gray200: #EEEEEE;--gray600: #85858A;--link: #007BFF }.list-content{overflow-y:auto;overflow-x:hidden}.mark-all-read{text-align:right;color:#007bff;margin-bottom:12px;font-size:12px}.notification-items__wrapper{overflow:hidden}.notification-items__content{height:calc(100vh - 275px);overflow-x:hidden;overflow-y:auto;color:#292929}.notitification-item__container{display:flex;justify-content:space-between;padding:16px;border-bottom:#FAFAFA 1px solid;text-align:left;font-size:12px;position:relative;z-index:10;cursor:pointer;border-radius:4px;margin-bottom:8px}.notitification-item__container:hover{background-color:#fafafa}.notification-item__image-container{width:46px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;margin-right:16px}.notification-item__image-container img{width:100%;height:100%;text-align:center;-o-object-fit:cover;object-fit:cover;color:transparent;text-indent:10000px}.notification-item__content-wrapper{width:100%;display:flex;align-items:center;justify-content:space-between}.notification-item__context-link{color:#007bff}.notification-item__content{width:75%;padding-right:16px}.notification-item__user-name{margin-bottom:2px;font-size:14px}.notification-item__time{margin-right:15px;text-align:right}.notification-item__read-at{border-width:2px;border-style:solid;border-radius:50%;width:10px;height:10px;display:block;position:relative}.notification-item__read-at:before{position:absolute;top:-30px;right:0;width:91px;background-color:#85858a;color:#fff;border-radius:4px;font-size:10px;text-align:center;padding:4px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.39,.575,.565,1)}.notification-item__read-at:hover:before{opacity:1;visibility:visible}.notification-item__read-at.read:before{content:"Mark as unread"}.notification-item__read-at.unread:before{content:"Mark as read"}.notification-item__read-at.read{border-color:#eee}.notification-item__read-at.unread{border-color:#2e7d32;background-color:#2e7d32}.list-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:block}
+`, oi = `:root{--textPrimary: #292929;--textWhite: #fff;--primary500: #2E7D32;--grey100: #FAFAFA;--gray200: #EEEEEE;--gray600: #85858A;--link: #007BFF }.list-content{overflow-y:auto;overflow-x:hidden}.mark-all-read{text-align:right;color:#007bff;margin-bottom:12px;font-size:12px}.notification-items__wrapper{overflow:hidden}.notification-items__content{height:calc(100vh - 275px);overflow-x:hidden;overflow-y:auto;color:#292929}.notitification-item__container{display:flex;justify-content:space-between;padding:16px;border-bottom:#FAFAFA 1px solid;text-align:left;font-size:12px;position:relative;z-index:10;cursor:pointer;border-radius:4px;margin-bottom:8px}.notitification-item__container:hover{background-color:#fafafa}.notification-item__image-container{width:46px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;margin-right:16px}.notification-item__image-container img{width:100%;height:100%;text-align:center;-o-object-fit:cover;object-fit:cover;color:transparent;text-indent:10000px}.notification-item__content-wrapper{width:100%;display:flex;align-items:center;justify-content:space-between}.notification-item__context-link{color:#007bff}.notification-item__content{width:68%;padding-right:16px}.notification-item__user-name{margin-bottom:2px;font-size:14px}.notification-item__time{margin-right:15px;text-align:right}.notification-item__read-at{border-width:2px;border-style:solid;border-radius:50%;width:10px;height:10px;display:block;position:relative}.notification-item__read-at:before{position:absolute;top:-30px;right:0;width:91px;background-color:#85858a;color:#fff;border-radius:4px;font-size:10px;text-align:center;padding:4px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.39,.575,.565,1)}.notification-item__read-at:hover:before{opacity:1;visibility:visible}.notification-item__read-at.read:before{content:"Mark as unread"}.notification-item__read-at.unread:before{content:"Mark as read"}.notification-item__read-at.read{border-color:#eee}.notification-item__read-at.unread{border-color:#2e7d32;background-color:#2e7d32}.list-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:block}
 `, ii = `._notification-massage_container_ql4az_1{background:#fff;padding:0 64px 0 84px;border-radius:8px;font-family:TT Firs Neue Trl,sans-serif}._notification-massage_container_ql4az_1:before{position:absolute;content:"";width:48px;height:48px;background:url(https://ukpcsaprod.blob.core.windows.net/saas/notification-icon.svg) no-repeat center/100%;top:12px;left:24px}._notification-name_ql4az_18{font-weight:500;font-size:14px}._notification-message_service_ql4az_23{font-size:12px}._notification-message_button-close_ql4az_27{position:absolute;top:12px;right:24px;width:24px;height:24px}
 `, ai = `._subscription-diaglog_1gvmm_2{position:fixed;width:100vw;height:100vh;top:0;left:0;background-color:#0006;z-index:10000;display:flex;align-items:center;justify-content:center}._subscription-container_1gvmm_15{width:610px;height:222px;border-radius:8px;padding:32px 24px 40px;background:#fff;color:#292929}._subscription-title_1gvmm_25{font-size:20px;font-weight:500;text-align:center;color:#292929}._subscription-title_1gvmm_25,._subscription-text_1gvmm_34{margin-bottom:24px}._subscription-btn__container_1gvmm_38{display:flex;justify-content:space-between;align-items:center}._btn-success_1gvmm_44,._btn-cancel_1gvmm_45{width:150px;height:40px;display:flex;align-items:center;justify-content:center;padding:8px;color:#292929;border-radius:1px}._btn-cancel_1gvmm_45{background-color:#ddd}._btn-success_1gvmm_44{background-color:#93d500}
 `;
@@ -759,8 +763,8 @@ function di({
   avatarUrl: e,
   userName: t
 }) {
-  const [r, n] = G(!1), o = be(null);
-  return be(null), G(!1), G(!1), Q(() => {
+  const [r, n] = G(!1), o = xe(null);
+  return xe(null), G(!1), G(!1), Q(() => {
     pr({
       childrenClass: "userAvatar",
       action() {
@@ -1456,8 +1460,8 @@ function xi() {
         }
       }
     }
-    var _ = a, S = i, $ = e, N = u, B = r, F = g, W = m, K = t, ce = o, Se = n, Ee = f, Me = h, me = !1, Ae = !1;
-    function Ce(O) {
+    var _ = a, S = i, $ = e, N = u, B = r, F = g, W = m, K = t, ce = o, Ee = n, Ce = f, Me = h, me = !1, Ae = !1;
+    function Oe(O) {
       return me || (me = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
     function Xe(O) {
@@ -1499,7 +1503,7 @@ function xi() {
     function Qe(O) {
       return p(O) === h;
     }
-    P.ContextConsumer = _, P.ContextProvider = S, P.Element = $, P.ForwardRef = N, P.Fragment = B, P.Lazy = F, P.Memo = W, P.Portal = K, P.Profiler = ce, P.StrictMode = Se, P.Suspense = Ee, P.SuspenseList = Me, P.isAsyncMode = Ce, P.isConcurrentMode = Xe, P.isContextConsumer = Je, P.isContextProvider = Pe, P.isElement = pe, P.isForwardRef = Re, P.isFragment = Gt, P.isLazy = Kt, P.isMemo = Zt, P.isPortal = Xt, P.isProfiler = Jt, P.isStrictMode = Qt, P.isSuspense = C, P.isSuspenseList = Qe, P.isValidElementType = E, P.typeOf = p;
+    P.ContextConsumer = _, P.ContextProvider = S, P.Element = $, P.ForwardRef = N, P.Fragment = B, P.Lazy = F, P.Memo = W, P.Portal = K, P.Profiler = ce, P.StrictMode = Ee, P.Suspense = Ce, P.SuspenseList = Me, P.isAsyncMode = Oe, P.isConcurrentMode = Xe, P.isContextConsumer = Je, P.isContextProvider = Pe, P.isElement = pe, P.isForwardRef = Re, P.isFragment = Gt, P.isLazy = Kt, P.isMemo = Zt, P.isPortal = Xt, P.isProfiler = Jt, P.isStrictMode = Qt, P.isSuspense = C, P.isSuspenseList = Qe, P.isValidElementType = E, P.typeOf = p;
   }()), P;
 }
 process.env.NODE_ENV === "production" ? ar.exports = bi() : ar.exports = xi();
@@ -1656,7 +1660,7 @@ function Ln(e) {
     },
     unit: r = "px",
     step: n = 5
-  } = e, o = _e(e, Pi), i = Ri(t), a = Object.keys(i);
+  } = e, o = we(e, Pi), i = Ri(t), a = Object.keys(i);
   function l(g) {
     return `@media (min-width:${typeof t[g] == "number" ? t[g] : g}${r})`;
   }
@@ -1687,7 +1691,7 @@ function Ln(e) {
 }
 const Di = {
   borderRadius: 4
-}, zi = Di, Fi = process.env.NODE_ENV !== "production" ? k.oneOfType([k.number, k.string, k.object, k.array]) : {}, we = Fi;
+}, zi = Di, Fi = process.env.NODE_ENV !== "production" ? k.oneOfType([k.number, k.string, k.object, k.array]) : {}, Se = Fi;
 function rt(e, t) {
   return t ? ue(e, t, {
     clone: !1
@@ -1777,7 +1781,7 @@ function U(e) {
     });
   };
   return i.propTypes = process.env.NODE_ENV !== "production" ? {
-    [t]: we
+    [t]: Se
   } : {}, i.filterProps = [t], i;
 }
 function Vi(e) {
@@ -1842,14 +1846,14 @@ function Vn(e, t) {
 function V(e) {
   return Vn(e, Rt);
 }
-V.propTypes = process.env.NODE_ENV !== "production" ? Rt.reduce((e, t) => (e[t] = we, e), {}) : {};
+V.propTypes = process.env.NODE_ENV !== "production" ? Rt.reduce((e, t) => (e[t] = Se, e), {}) : {};
 V.filterProps = Rt;
 function H(e) {
   return Vn(e, Dt);
 }
-H.propTypes = process.env.NODE_ENV !== "production" ? Dt.reduce((e, t) => (e[t] = we, e), {}) : {};
+H.propTypes = process.env.NODE_ENV !== "production" ? Dt.reduce((e, t) => (e[t] = Se, e), {}) : {};
 H.filterProps = Dt;
-process.env.NODE_ENV !== "production" && Ui.reduce((e, t) => (e[t] = we, e), {});
+process.env.NODE_ENV !== "production" && Ui.reduce((e, t) => (e[t] = Se, e), {});
 function Gi(e = 8) {
   if (e.mui)
     return e;
@@ -1887,7 +1891,7 @@ const Ki = se("border", ie), Zi = se("borderTop", ie), Xi = se("borderRight", ie
   return null;
 };
 Ft.propTypes = process.env.NODE_ENV !== "production" ? {
-  borderRadius: we
+  borderRadius: Se
 } : {};
 Ft.filterProps = ["borderRadius"];
 zt(Ki, Zi, Xi, Ji, Qi, ea, ta, ra, na, oa, Ft, ia, aa);
@@ -1901,7 +1905,7 @@ const Lt = (e) => {
   return null;
 };
 Lt.propTypes = process.env.NODE_ENV !== "production" ? {
-  gap: we
+  gap: Se
 } : {};
 Lt.filterProps = ["gap"];
 const jt = (e) => {
@@ -1914,7 +1918,7 @@ const jt = (e) => {
   return null;
 };
 jt.propTypes = process.env.NODE_ENV !== "production" ? {
-  columnGap: we
+  columnGap: Se
 } : {};
 jt.filterProps = ["columnGap"];
 const Vt = (e) => {
@@ -1927,7 +1931,7 @@ const Vt = (e) => {
   return null;
 };
 Vt.propTypes = process.env.NODE_ENV !== "production" ? {
-  rowGap: we
+  rowGap: Se
 } : {};
 Vt.filterProps = ["rowGap"];
 const sa = U({
@@ -2401,7 +2405,7 @@ function xr(e = {}, ...t) {
     palette: n = {},
     spacing: o,
     shape: i = {}
-  } = e, a = _e(e, Na), l = Ln(r), u = Gi(o);
+  } = e, a = we(e, Na), l = Ln(r), u = Gi(o);
   let f = ue({
     breakpoints: l,
     direction: "ltr",
@@ -3180,11 +3184,11 @@ function fs() {
         }
       }
     }
-    var p = u, _ = f, S = l, $ = a, N = t, B = h, F = n, W = y, K = b, ce = r, Se = i, Ee = o, Me = m, me = !1;
+    var p = u, _ = f, S = l, $ = a, N = t, B = h, F = n, W = y, K = b, ce = r, Ee = i, Ce = o, Me = m, me = !1;
     function Ae(C) {
-      return me || (me = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), Ce(C) || E(C) === u;
+      return me || (me = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), Oe(C) || E(C) === u;
     }
-    function Ce(C) {
+    function Oe(C) {
       return E(C) === f;
     }
     function Xe(C) {
@@ -3220,7 +3224,7 @@ function fs() {
     function Qt(C) {
       return E(C) === m;
     }
-    D.AsyncMode = p, D.ConcurrentMode = _, D.ContextConsumer = S, D.ContextProvider = $, D.Element = N, D.ForwardRef = B, D.Fragment = F, D.Lazy = W, D.Memo = K, D.Portal = ce, D.Profiler = Se, D.StrictMode = Ee, D.Suspense = Me, D.isAsyncMode = Ae, D.isConcurrentMode = Ce, D.isContextConsumer = Xe, D.isContextProvider = Je, D.isElement = Pe, D.isForwardRef = pe, D.isFragment = Re, D.isLazy = Gt, D.isMemo = Kt, D.isPortal = Zt, D.isProfiler = Xt, D.isStrictMode = Jt, D.isSuspense = Qt, D.isValidElementType = w, D.typeOf = E;
+    D.AsyncMode = p, D.ConcurrentMode = _, D.ContextConsumer = S, D.ContextProvider = $, D.Element = N, D.ForwardRef = B, D.Fragment = F, D.Lazy = W, D.Memo = K, D.Portal = ce, D.Profiler = Ee, D.StrictMode = Ce, D.Suspense = Me, D.isAsyncMode = Ae, D.isConcurrentMode = Oe, D.isContextConsumer = Xe, D.isContextProvider = Je, D.isElement = Pe, D.isForwardRef = pe, D.isFragment = Re, D.isLazy = Gt, D.isMemo = Kt, D.isPortal = Zt, D.isProfiler = Xt, D.isStrictMode = Jt, D.isSuspense = Qt, D.isValidElementType = w, D.typeOf = E;
   }()), D;
 }
 process.env.NODE_ENV === "production" ? cr.exports = us() : cr.exports = fs();
@@ -3512,7 +3516,7 @@ var le, Ye = function(t, r, n) {
 process.env.NODE_ENV !== "production" && (Nr.displayName = "EmotionCacheContext");
 var ks = Nr.Provider, Yt = function(t) {
   return /* @__PURE__ */ Co(function(r, n) {
-    var o = xe(Nr);
+    var o = _e(Nr);
     return t(r, o, n);
   });
 }, Ie = /* @__PURE__ */ L.createContext({});
@@ -4108,7 +4112,7 @@ const Qs = ["sx"], e0 = (e) => {
 function t0(e) {
   const {
     sx: t
-  } = e, r = _e(e, Qs), {
+  } = e, r = we(e, Qs), {
     systemProps: n,
     otherProps: o
   } = e0(r);
@@ -4570,7 +4574,7 @@ function P0(e) {
     mode: t = "light",
     contrastThreshold: r = 3,
     tonalOffset: n = 0.2
-  } = e, o = _e(e, T0), i = e.primary || N0(t), a = e.secondary || k0(t), l = e.error || $0(t), u = e.info || I0(t), f = e.success || M0(t), h = e.warning || A0(t);
+  } = e, o = we(e, T0), i = e.primary || N0(t), a = e.secondary || k0(t), l = e.error || $0(t), u = e.info || I0(t), f = e.success || M0(t), h = e.warning || A0(t);
   function m(s) {
     const d = hn(s, rr.text.primary) >= r ? rr.text.primary : pn.text.primary;
     if (process.env.NODE_ENV !== "production") {
@@ -4687,7 +4691,7 @@ function z0(e, t) {
     // Apply the CSS properties to all the variants.
     allVariants: h,
     pxToRem: m
-  } = r, g = _e(r, R0);
+  } = r, g = we(r, R0);
   process.env.NODE_ENV !== "production" && (typeof o != "number" && console.error("MUI: `fontSize` is required to be a number."), typeof f != "number" && console.error("MUI: `htmlFontSize` is required to be a number."));
   const b = o / 14, y = m || ((v) => `${v / f * b}rem`), s = (v, x, w, E, p) => z({
     fontFamily: n,
@@ -4779,7 +4783,7 @@ function Y0(e) {
         duration: a = r.standard,
         easing: l = t.easeInOut,
         delay: u = 0
-      } = i, f = _e(i, B0);
+      } = i, f = we(i, B0);
       if (process.env.NODE_ENV !== "production") {
         const h = (g) => typeof g == "string", m = (g) => !isNaN(parseFloat(g));
         !h(o) && !Array.isArray(o) && console.error('MUI: Argument "props" must be a string or Array.'), !m(a) && !h(a) && console.error(`MUI: Argument "duration" must be a number or a string but found ${a}.`), h(l) || console.error('MUI: Argument "easing" must be a string.'), !m(u) && !h(u) && console.error('MUI: Argument "delay" must be a number or a string.'), typeof i != "object" && console.error(["MUI: Secong argument of transition.create must be an object.", "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join(`
@@ -4808,7 +4812,7 @@ function X0(e = {}, ...t) {
     palette: n = {},
     transitions: o = {},
     typography: i = {}
-  } = e, a = _e(e, Z0);
+  } = e, a = we(e, Z0);
   if (e.vars)
     throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name." : nt(18));
   const l = P0(n), u = xr(e);
@@ -5001,8 +5005,8 @@ function Sl(e = {}) {
         if (!W.components || !W.components[u] || !W.components[u].styleOverrides)
           return null;
         const K = W.components[u].styleOverrides, ce = {};
-        return Object.entries(K).forEach(([Se, Ee]) => {
-          ce[Se] = Ct(Ee, (0, oe.default)({}, F, {
+        return Object.entries(K).forEach(([Ee, Ce]) => {
+          ce[Ee] = Ct(Ce, (0, oe.default)({}, F, {
             theme: W
           }));
         }), g(F, ce);
@@ -5104,7 +5108,7 @@ const Nl = ["children", "className", "color", "component", "fontSize", "htmlColo
     inheritViewBox: h = !1,
     titleAccess: m,
     viewBox: g = "0 0 24 24"
-  } = n, b = _e(n, Nl), y = /* @__PURE__ */ L.isValidElement(o) && o.type === "svg", s = z({}, n, {
+  } = n, b = we(n, Nl), y = /* @__PURE__ */ L.isValidElement(o) && o.type === "svg", s = z({}, n, {
     color: a,
     component: l,
     fontSize: u,
@@ -5430,14 +5434,14 @@ function Ll(e) {
     }, b.componentWillUnmount = function() {
       this._resetIsScrollingTimeoutId !== null && Cn(this._resetIsScrollingTimeoutId);
     }, b.render = function() {
-      var s = this.props, d = s.children, v = s.className, x = s.direction, w = s.height, E = s.innerRef, p = s.innerElementType, _ = s.innerTagName, S = s.itemCount, $ = s.itemData, N = s.itemKey, B = N === void 0 ? Fl : N, F = s.layout, W = s.outerElementType, K = s.outerTagName, ce = s.style, Se = s.useIsScrolling, Ee = s.width, Me = this.state.isScrolling, me = x === "horizontal" || F === "horizontal", Ae = me ? this._onScrollHorizontal : this._onScrollVertical, Ce = this._getRangeToRender(), Xe = Ce[0], Je = Ce[1], Pe = [];
+      var s = this.props, d = s.children, v = s.className, x = s.direction, w = s.height, E = s.innerRef, p = s.innerElementType, _ = s.innerTagName, S = s.itemCount, $ = s.itemData, N = s.itemKey, B = N === void 0 ? Fl : N, F = s.layout, W = s.outerElementType, K = s.outerTagName, ce = s.style, Ee = s.useIsScrolling, Ce = s.width, Me = this.state.isScrolling, me = x === "horizontal" || F === "horizontal", Ae = me ? this._onScrollHorizontal : this._onScrollVertical, Oe = this._getRangeToRender(), Xe = Oe[0], Je = Oe[1], Pe = [];
       if (S > 0)
         for (var pe = Xe; pe <= Je; pe++)
           Pe.push(er(d, {
             data: $,
             key: B(pe, $),
             index: pe,
-            isScrolling: Se ? Me : void 0,
+            isScrolling: Ee ? Me : void 0,
             style: this._getItemStyle(pe)
           }));
       var Re = n(this.props, this._instanceProps);
@@ -5448,7 +5452,7 @@ function Ll(e) {
         style: z({
           position: "relative",
           height: w,
-          width: Ee,
+          width: Ce,
           overflow: "auto",
           WebkitOverflowScrolling: "touch",
           willChange: "transform",
@@ -5667,7 +5671,7 @@ function yc(e) {
   }, [e.paging.rows, e.searchLoading]);
   const b = e.paging.rows, { hasNextPage: y } = e, s = y ? b.length + 1 : b.length, d = () => e.isNextPageLoading ? void 0 : e.loadNextPage(i), v = (_) => !y || _ < b.length, x = (_) => {
     o(_.target.value), t && (a(_.target.value), h(_.target.value), u(!0));
-  }, w = be(null), E = be(null), p = be(null);
+  }, w = xe(null), E = xe(null), p = xe(null);
   return Q(() => {
     var _, S, $, N;
     t ? ((_ = E.current) == null || _.classList.add("Mui-focused"), (S = p.current) == null || S.classList.add("Mui-focused")) : (($ = E.current) == null || $.classList.remove("Mui-focused"), (N = p.current) == null || N.classList.remove("Mui-focused"));
@@ -6057,7 +6061,7 @@ function bc(e) {
   Q(() => {
     r(e.value);
   }, [e.value]);
-  const o = be(null), i = be(null), a = be(null);
+  const o = xe(null), i = xe(null), a = xe(null);
   return console.log("inputRef", o), console.log("labelRef", i), /* @__PURE__ */ c(
     Fo,
     {
@@ -6285,15 +6289,15 @@ const So = (e) => {
   }, o = () => {
     r(!0);
   };
-  return /* @__PURE__ */ c($e, { children: t ? "" : /* @__PURE__ */ c("div", { className: Oe["subscription-diaglog"], children: /* @__PURE__ */ T("div", { className: Oe["subscription-container"], children: [
-    /* @__PURE__ */ c("h4", { className: Oe["subscription-title"], children: "Notification" }),
-    /* @__PURE__ */ c("p", { className: Oe["subscription-text"], children: "Choice to receive notifications for the most recent updates. You have the flexibility to disable them whenever you prefer." }),
-    /* @__PURE__ */ T("div", { className: Oe["subscription-btn__container"], children: [
-      /* @__PURE__ */ c("button", { className: Oe["btn-cancel"], onClick: o, children: "Not now" }),
+  return /* @__PURE__ */ c($e, { children: t ? "" : /* @__PURE__ */ c("div", { className: Te["subscription-diaglog"], children: /* @__PURE__ */ T("div", { className: Te["subscription-container"], children: [
+    /* @__PURE__ */ c("h4", { className: Te["subscription-title"], children: "Notification" }),
+    /* @__PURE__ */ c("p", { className: Te["subscription-text"], children: "Choice to receive notifications for the most recent updates. You have the flexibility to disable them whenever you prefer." }),
+    /* @__PURE__ */ T("div", { className: Te["subscription-btn__container"], children: [
+      /* @__PURE__ */ c("button", { className: Te["btn-cancel"], onClick: o, children: "Not now" }),
       /* @__PURE__ */ c(
         "button",
         {
-          className: Oe["btn-success"],
+          className: Te["btn-success"],
           onClick: n,
           children: "Turn on"
         }
@@ -6307,7 +6311,7 @@ const So = (e) => {
     context: ""
   });
   console.log(t);
-  const { setNotiData: n } = xe(Ne);
+  const { setNotiData: n } = _e(Ne);
   function o() {
     return /* @__PURE__ */ c("div", { className: gt["notification-massage_container"], children: /* @__PURE__ */ T("div", { className: gt["notification-massage_content"], children: [
       /* @__PURE__ */ c("h6", { className: gt["notification-name"], children: t == null ? void 0 : t.actorName }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ukpc-lib/react",
   "private": false,
-  "version": "0.3.33",
+  "version": "0.3.34",
   "type": "module",
   "main": "./dist/",
   "module": "./dist/",

package/web-components-bundle/global-topbar/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../react-to-web-component-3847ebf5.cjs");require("../index-70d1d0a6.cjs");const e=require("../index-70a23cc4.cjs");require("../index-4327002b.cjs");exports.TopBar=e.TopBar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../react-to-web-component-3847ebf5.cjs");require("../index-70d1d0a6.cjs");const e=require("../index-883b5f26.cjs");require("../index-4327002b.cjs");exports.TopBar=e.TopBar;

package/web-components-bundle/global-topbar/index.js

@@ -1,6 +1,6 @@
 import "../react-to-web-component-469d91d4.js";
 import "../index-9b0d9ee5.js";
-import { T as i } from "../index-d164d394.js";
+import { T as i } from "../index-a93aa353.js";
 import "../index-b3659f2e.js";
 export {
   i as TopBar

package/web-components-bundle/has-permission/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../react-to-web-component-3847ebf5.cjs");const e=require("../index-70a23cc4.cjs");require("../index-70d1d0a6.cjs");require("../index-4327002b.cjs");exports.HasPermission=e.HasPermission;exports.getUseHasPermission=e.getUseHasPermission;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../react-to-web-component-3847ebf5.cjs");const e=require("../index-883b5f26.cjs");require("../index-70d1d0a6.cjs");require("../index-4327002b.cjs");exports.HasPermission=e.HasPermission;exports.getUseHasPermission=e.getUseHasPermission;

package/web-components-bundle/has-permission/index.js

@@ -1,5 +1,5 @@
 import "../react-to-web-component-469d91d4.js";
-import { H as e, g as t } from "../index-d164d394.js";
+import { H as e, g as t } from "../index-a93aa353.js";
 import "../index-9b0d9ee5.js";
 import "../index-b3659f2e.js";
 export {

package/web-components-bundle/{index-70a23cc4.cjs → index-883b5f26.cjs}

@@ -1089,8 +1089,8 @@ function print() { __p += __j.call(arguments, '') }
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */function dy(e=BA()){return wI().then(t=>{if(!t)throw nn.create("unsupported-browser")},t=>{throw nn.create("indexed-db-unsupported")}),Hd(Wd(e),"messaging").getImmediate()}async function kI(e,t){return e=Wd(e),fy(e,t)}function CI(e,t){return e=Wd(e),SI(e,t)}_I();const hy=e=>{"serviceWorker"in navigator&&navigator.serviceWorker.register(e.path).then(function(t){console.log("Registration successful, scope is:",t.scope),console.log("initialize service worker props ",e);const r=dy(Ud({apiKey:e.apiKey,authDomain:e.authDomain,projectId:e.projectId,storageBucket:e.storageBucket,messagingSenderId:e.messagingSenderId,appId:e.appId,measurementId:e.measurementId}));kI(r,{serviceWorkerRegistration:t,vapidKey:e.vapidKey}).then(async s=>{var o,c;if(s){console.log("current token for client: ",s);try{const h="/notification-management/api/v1/notifications/registrations",b=e.baseUrl+h;await se.axios.post(b,{deviceToken:s},{withCredentials:!0})}catch(h){console.log(h),se.pushError(((c=(o=h.response)==null?void 0:o.data)==null?void 0:c.errorMessage)||"Have error when get notification list")}}else console.log("No registration token available. Request permission to generate one.")}).catch(s=>{console.log("An error occurred while retrieving token. ",s)})}).catch(function(t){console.log("Service worker registration failed, error:",t)})},DI=e=>{const t=new BroadcastChannel("my-channel");t.onmessage=r=>{console.log("Broadcast chanel message",r),r&&e(s=>({...s,unread:{...s.unread,total:s.unread.total+1}}))}},EI=e=>new Promise(t=>{const r=dy(Ud({apiKey:e.apiKey,authDomain:e.authDomain,projectId:e.projectId,storageBucket:e.storageBucket,messagingSenderId:e.messagingSenderId,appId:e.appId,measurementId:e.measurementId}));CI(r,s=>{console.log("payload",s),t(s)})}),us={"subscription-diaglog":"_subscription-diaglog_1gvmm_2","subscription-container":"_subscription-container_1gvmm_15","subscription-title":"_subscription-title_1gvmm_25","subscription-text":"_subscription-text_1gvmm_34","subscription-btn__container":"_subscription-btn__container_1gvmm_38","btn-success":"_btn-success_1gvmm_44","btn-cancel":"_btn-cancel_1gvmm_45"},TI=["granted","denied"],RI=e=>{const[t,r]=D.reactExports.useState(!1),s=()=>{Notification.requestPermission(function(c){c==="granted"&&hy(e),TI.includes(c)&&r(!0)})},o=()=>{r(!0)};return D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:t?"":D.jsxRuntimeExports.jsx("div",{className:us["subscription-diaglog"],children:D.jsxRuntimeExports.jsxs("div",{className:us["subscription-container"],children:[D.jsxRuntimeExports.jsx("h4",{className:us["subscription-title"],children:"Notification"}),D.jsxRuntimeExports.jsx("p",{className:us["subscription-text"],children:"Choice to receive notifications for the most recent updates. You have the flexibility to disable them whenever you prefer."}),D.jsxRuntimeExports.jsxs("div",{className:us["subscription-btn__container"],children:[D.jsxRuntimeExports.jsx("button",{className:us["btn-cancel"],onClick:o,children:"Not now"}),D.jsxRuntimeExports.jsx("button",{className:us["btn-success"],onClick:s,children:"Turn on"})]})]})})})},Ou={"notification-massage_container":"_notification-massage_container_ql4az_1","notification-name":"_notification-name_ql4az_18","notification-message_service":"_notification-message_service_ql4az_23","notification-message_button-close":"_notification-message_button-close_ql4az_27"},Hi=D.reactExports.createContext({}),MI=({children:e})=>{const[t,r]=D.reactExports.useState(!0),[s,o]=D.reactExports.useState({all:{rows:[],total:0},unread:{rows:[],total:0}}),c=()=>{r(!t)},h=()=>{r(!0)};return D.jsxRuntimeExports.jsx(Hi.Provider,{value:{isOpen:t,toggleOpen:c,setShowModalFalse:h,notidata:s,setNotiData:o},children:e})},AI=e=>{const[t,r]=D.reactExports.useState({actorName:"",message:"",context:""});console.log(t);const{setNotiData:s}=D.reactExports.useContext(Hi);function o(){return D.jsxRuntimeExports.jsx("div",{className:Ou["notification-massage_container"],children:D.jsxRuntimeExports.jsxs("div",{className:Ou["notification-massage_content"],children:[D.jsxRuntimeExports.jsx("h6",{className:Ou["notification-name"],children:t==null?void 0:t.actorName}),D.jsxRuntimeExports.jsxs("div",{className:Ou["notification-message_service"],children:[D.jsxRuntimeExports.jsxs("span",{children:[`${t==null?void 0:t.message} `," "]}),D.jsxRuntimeExports.jsx("span",{children:t==null?void 0:t.context})]})]})})}return D.reactExports.useEffect(()=>{t&&Notification.permission==="granted"&&(t.actorName||t.message||t.context)&&se.notify(D.jsxRuntimeExports.jsx(o,{}))},[t]),D.reactExports.useEffect(()=>{Notification.permission==="granted"&&hy(e)},[Notification.permission]),D.reactExports.useEffect(()=>{DI(s)},[]),EI(e).then(c=>{var h,b,S;console.log("aaa",c),r({actorName:(h=c==null?void 0:c.data)==null?void 0:h.actorName,message:(b=c==null?void 0:c.data)==null?void 0:b.message,context:(S=c==null?void 0:c.data)==null?void 0:S.context}),s(E=>{var A;return{...E,unread:{...E.unread,total:((A=E.unread)==null?void 0:A.total)+1}}})}).catch(c=>console.log("failed: ",c)),D.jsxRuntimeExports.jsx("div",{children:"Notification"in window&&Notification.permission==="default"?D.jsxRuntimeExports.jsx(RI,{...e}):""})};function OI({config:e,pushError:t=se.pushError}){const r=se.axios.create(e);r.interceptors.request.use(async o=>(o.headers={Accept:"application/json","Content-Type":"application/json"},o),o=>Promise.reject(o)),r.interceptors.response.use(o=>o,async o=>s(o));async function s(o){var S,E,A,$;console.error("Error 🚨:",o);const c=o.config,h=(E=(S=o.response)==null?void 0:S.data)==null?void 0:E.errorMessage,b=h===se.ERROR_MESSAGE.TOKEN_EXPIRED;return((A=o.response)==null?void 0:A.status)===401?b&&!c._retry?(c._retry=!0,r.post("/authentication/api/v1/auth/refresh-token").then(()=>r(c)).catch(()=>se.login(e.baseURL))):((!h||!b)&&se.login(e.baseURL),Promise.reject("Unauthorized! Please login again.")):((($=o.response)==null?void 0:$.status)===403||t(ps.t(`${h||"Something went wrong!"}`)),Promise.reject(o.response.data))}return r}const II=e=>{const[t,r]=D.reactExports.useState([]);return D.reactExports.useEffect(()=>{se.axios.get(`${e}/user-management/api/v1/users/my-account/permissions`,{withCredentials:!0}).then(s=>r(s.data)).catch(s=>{console.error("Getting user permission error:",s)})},[e]),t},py=e=>(t,r)=>{const s=II(e);return r?t.every(o=>s==null?void 0:s.includes(o)):t.some(o=>s==null?void 0:s.includes(o))},gy=({baseUrl:e,accessWith:t,requireAll:r,children:s})=>py(e)(t,r)?D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:s}):null;{const e=D.s(gy,{props:{baseUrl:"string",accessWith:"json",requireAll:"boolean",children:"json"},shadow:"open"});customElements.define("has-permission",e)}function PI(){const[e,t]=D.reactExports.useState();return D.reactExports.useEffect(()=>{const r=localStorage.getItem("language");t(r||ps.Language.en)},[]),{language:e,setLanguage:t}}const my=D.reactExports.createContext({}),NI=()=>D.reactExports.useContext(my),LI=({children:e})=>{const t=PI();return D.jsxRuntimeExports.jsx(my.Provider,{value:t,children:D.jsxRuntimeExports.jsx(ps.I18nextProvider,{i18n:ps.instance,children:e})})},jI=OI({config:{withCredentials:!0}}),eh=({baseUrl:e,notiPath:t,setNotiData:r})=>async()=>{var E;const c=e+(t||"/notification-management/api/v1/notifications"),b=(E=(await jI.get(c,{params:{filter:{notificationFilterType:"all"}},withCredentials:!0})).data)==null?void 0:E.rows,S=b==null?void 0:b.filter(A=>A.isRead===!1);r({all:{rows:b??[],total:(b==null?void 0:b.length)??0},unread:{rows:S??[],total:(S==null?void 0:S.length)??0}})},$I=({notification:e,baseUrl:t,notiPath:r,markAllAsReadState:s,brandColors:o})=>{var H;const[c,h]=D.reactExports.useState(!1),[b,S]=D.reactExports.useState({id:e.id,isRead:e.isRead}),E=b.isRead===!1?"unread":"read",A={borderColor:b.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||se.color.primary500,backgroundColor:b.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||se.color.primary500},{setNotiData:$}=D.reactExports.useContext(Hi),B=eh({baseUrl:t,notiPath:r,setNotiData:$}),K=async(oe,de)=>{var he,te;try{const ie=r||`/notification-management/api/v1/notifications/${oe}`,d=t+ie;await se.axios.put(d,{isRead:de},{withCredentials:!0})}catch(ie){S({id:e.id,isRead:e.isRead}),se.pushError(((te=(he=ie.response)==null?void 0:he.data)==null?void 0:te.errorMessage)||"Have error when get notification list")}await B()},q=(oe,de)=>{console.log("specificNotificationID",oe);const he=!de;S(te=>({...te,isRead:he})),console.log("newIsReadState",he),K(oe,he)};D.reactExports.useEffect(()=>{S(s?oe=>({...oe,isRead:!0}):{id:e.id,isRead:e.isRead})},[s,e.id,e.isRead]);const F=()=>{h(!c)},re=oe=>{const de=le(),he=le(oe),te=de.diff(he,"days"),ie=de.diff(he,"minutes"),d=de.diff(he,"months"),Me=de.diff(he,"years");if(console.log("diffInMonths",d),ie<1)return"Just now";if(te===0){if(ie<=60)return`${ie} minute${ie>1?"s":""} ago`;const ae=Math.floor(ie/60);return console.log("diffIhours",ae),`${ae} hour${ae>1?"s":""} ago`}if(te===1)return"Yesterday";if(te>=2&&te<7)return`${te} days ago`;if(te<30){const ae=Math.floor(te/7);return`${ae} week${ae>1?"s":""} ago`}return d===0||d===1?"1 month ago":d<12?`${d} months ago`:Me===0||Me===1?"1 year ago":"Over 1 year ago"};return D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:D.jsxRuntimeExports.jsxs("div",{className:"notitification-item__container",children:[D.jsxRuntimeExports.jsx("div",{className:"notification-item__image-container",children:D.jsxRuntimeExports.jsx("img",{src:e==null?void 0:e.actorAvatarUrl,onError:({currentTarget:oe})=>{oe.onerror=null,oe.src="https://ukpcsaprod.blob.core.windows.net/account/logo.png"},alt:e.actorName})}),D.jsxRuntimeExports.jsxs("div",{style:{width:"100%"},children:[D.jsxRuntimeExports.jsxs("div",{className:"notification-item__content-wrapper",children:[D.jsxRuntimeExports.jsxs("div",{className:"notification-item__content",children:[D.jsxRuntimeExports.jsx("p",{className:"notification-item__user-name",children:e.actorName}),D.jsxRuntimeExports.jsxs("p",{children:[`${e.message} `,D.jsxRuntimeExports.jsx("span",{children:e==null?void 0:e.context})]}),(e==null?void 0:e.notificationType)==="deleteMultiple"&&D.jsxRuntimeExports.jsxs("button",{style:{color:se.color.primary400,textDecoration:"underline"},onClick:F,children:[c?"Hide":"Show  "," details"]})]}),D.jsxRuntimeExports.jsx("div",{className:"notification-item__time",children:D.jsxRuntimeExports.jsx("p",{children:re(e.createdAt)})}),D.jsxRuntimeExports.jsx("button",{className:`${E} notification-item__read-at`,"aria-label":"Mark as read",style:A,onClick:()=>q(e.id,e.isRead)})]}),c&&D.jsxRuntimeExports.jsx("div",{style:{background:"#fff",width:"100%",padding:"8px",fontSize:"12px",marginTop:"8px"},children:D.jsxRuntimeExports.jsx("ul",{children:(H=e==null?void 0:e.data)==null?void 0:H.map((oe,de)=>D.jsxRuntimeExports.jsxs("li",{style:{display:"flex",alignItems:"center",marginBottom:"4px"},children:[D.jsxRuntimeExports.jsx("span",{style:{backgroundColor:se.color.primary400},className:"list-dot"}),oe.name]},de))})})]})]})})},Ug=({notidata:e,baseUrl:t,notiPath:r,brandColors:s})=>{const[o,c]=D.reactExports.useState(!1);console.log(o);const{setNotiData:h}=D.reactExports.useContext(Hi),b=eh({baseUrl:t,notiPath:r,setNotiData:h}),S=async()=>{var A,$;try{const K=t+(r||"/notification-management/api/v1/notifications");await se.axios.put(K,{withCredentials:!0})}catch(B){console.log(B),c(!1),se.pushError((($=(A=B.response)==null?void 0:A.data)==null?void 0:$.errorMessage)||"Have error when get notification list")}await b(),c(!1)},E=()=>{c(!0),S()};return D.jsxRuntimeExports.jsxs("div",{children:[D.jsxRuntimeExports.jsx("div",{className:"mark-all-read",children:D.jsxRuntimeExports.jsx("button",{onClick:E,children:"Mark all as read"})}),D.jsxRuntimeExports.jsx("div",{className:"notification-items__wrapper",children:D.jsxRuntimeExports.jsx("div",{className:"notification-items__content",children:Object.values(e).map((A,$)=>D.jsxRuntimeExports.jsx($I,{notification:A,baseUrl:t,notiPath:r,markAllAsReadState:o,brandColors:s},$))})})]})},FI=({baseUrl:e,notiPath:t,brandColors:r})=>{var S,E,A,$;const{setShowModalFalse:s}=D.reactExports.useContext(Hi),{notidata:o}=D.reactExports.useContext(Hi);console.log(o);const[c,h]=D.reactExports.useState("all"),b=[{id:"all",tabTitle:`All (${((S=o==null?void 0:o.all)==null?void 0:S.total)||0})`,children:D.jsxRuntimeExports.jsx(Ug,{notidata:((E=o==null?void 0:o.all)==null?void 0:E.rows)||[],baseUrl:e,notiPath:t,brandColors:r})},{id:"unread",tabTitle:`Unread (${((A=o==null?void 0:o.unread)==null?void 0:A.total)||0})`,children:D.jsxRuntimeExports.jsx(Ug,{notidata:(($=o==null?void 0:o.unread)==null?void 0:$.rows)||[],baseUrl:e,notiPath:t,brandColors:r})}];return D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:D.jsxRuntimeExports.jsx("div",{style:{position:"absolute",backgroundColor:"#fff",width:"550px",height:"90vh",right:"100px",top:"100%",padding:"32px",boxShadow:"10px 0px 20px #999",borderRadius:"0 0 8px 8px",overflow:"hidden"},children:D.jsxRuntimeExports.jsxs("div",{className:"list-content",children:[D.jsxRuntimeExports.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[D.jsxRuntimeExports.jsx("h3",{style:{fontSize:"24px",fontWeight:"500"},className:"list-title",children:"Notifications"}),D.jsxRuntimeExports.jsx("button",{onClick:s,children:D.jsxRuntimeExports.jsx("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:D.jsxRuntimeExports.jsx("path",{d:"M7.05086 6.13616C6.66033 5.74563 6.02717 5.74563 5.63664 6.13616C5.24612 6.52668 5.24612 7.15984 5.63664 7.55037L10.5864 12.5001L5.63664 17.4499C5.24612 17.8404 5.24612 18.4736 5.63664 18.8641C6.02717 19.2546 6.66033 19.2546 7.05086 18.8641L12.0006 13.9143L16.9504 18.8641C17.3409 19.2546 17.974 19.2546 18.3646 18.8641C18.7551 18.4736 18.7551 17.8404 18.3646 17.4499L13.4148 12.5001L18.3646 7.55037C18.7551 7.15984 18.7551 6.52668 18.3646 6.13616C17.974 5.74563 17.3409 5.74563 16.9504 6.13616L12.0006 11.0859L7.05086 6.13616Z",fill:"#85858A"})})})]}),D.jsxRuntimeExports.jsx(Sw,{tabs:b,setCurrentTab:h,currentTab:c,brandColors:r})]})})})};function th({childrenClass:e,action:t,childrenOpenClass:r}){const s=document.querySelector("#topbar-wrapper"),o=s==null?void 0:s.shadowRoot,c=o==null?void 0:o.querySelector(`.${e}`),h=o==null?void 0:o.querySelector(`.${r}`),b=o==null?void 0:o.querySelector("nav"),S=E=>{b==null||b.addEventListener("click",function(A){if(r&&h&&h.contains(A.target)){if(c&&!c.contains(A.target))return}else c&&!c.contains(A.target)&&t()}),s&&!s.contains(E.target)&&t()};document.addEventListener("click",S,!0)}function YI({iconColor:e="#fff",baseUrl:t,notiPath:r,brandColors:s}){var $,B;const{isOpen:o,toggleOpen:c,setShowModalFalse:h}=D.reactExports.useContext(Hi),{notidata:b,setNotiData:S}=D.reactExports.useContext(Hi),E=eh({baseUrl:t,notiPath:r,setNotiData:S}),A=async()=>{var K,q;try{await E()}catch(F){se.pushError(((q=(K=F.response)==null?void 0:K.data)==null?void 0:q.errorMessage)||"Have error when get notification list")}};return D.reactExports.useEffect(()=>{A()},[o]),D.reactExports.useEffect(()=>{th({childrenClass:"noti-container",childrenOpenClass:"noti-list-container",action(){h()}})}),D.jsxRuntimeExports.jsxs("div",{children:[D.jsxRuntimeExports.jsxs("div",{className:"noti-container",style:{position:"relative"},children:[D.jsxRuntimeExports.jsxs("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",onClick:c,style:{cursor:"pointer",color:e},children:[D.jsxRuntimeExports.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7968 17.4705C16.5901 17.4705 18.8076 16.8556 19.0218 14.3874C19.0218 11.921 17.4757 12.0796 17.4757 9.05334C17.4757 6.68952 15.2352 4 11.7968 4C8.35833 4 6.1178 6.68952 6.1178 9.05334C6.1178 12.0796 4.57178 11.921 4.57178 14.3874C4.78679 16.8649 7.00428 17.4705 11.7968 17.4705Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),D.jsxRuntimeExports.jsx("path",{d:"M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),(b==null?void 0:b.unread)&&(b==null?void 0:b.unread.total)!=0&&D.jsxRuntimeExports.jsx("span",{style:{position:"absolute",top:"-9px",right:"-6px",background:`${se.color}`,width:"20px",height:"20px",border:"1px solid #fff",borderRadius:"50%",color:"#fff",fontSize:"12px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:se.color.danger},className:"notification-badge",children:(($=b==null?void 0:b.unread)==null?void 0:$.total)>9?"9+":`${(B=b==null?void 0:b.unread)==null?void 0:B.total}`})]}),D.jsxRuntimeExports.jsx("div",{className:"noti-list-container",children:!o&&D.jsxRuntimeExports.jsx(FI,{baseUrl:t,notiPath:r,brandColors:s})})]})}const WI=`.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{position:fixed;display:flex;z-index:30;background:#292929;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between}.logo-container{height:100%;display:flex;align-items:center}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.languageDropdown{height:100%;padding:0 8px;display:flex;flex-direction:row;gap:8px;border-radius:3px;align-items:center;justify-content:center;height:41px;background-color:#ffffff1a;cursor:pointer;transition:background-color .2s ease-in-out}.languageDropdown:hover{background-color:#fff3}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem}.userAvatar{width:2.5rem;height:2.5rem;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}#userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}
-`,BI=`:root{--textPrimary: #292929;--textWhite: #fff;--primary500: #2E7D32;--grey100: #FAFAFA;--gray200: #EEEEEE;--gray600: #85858A;--link: #007BFF }.list-content{overflow-y:auto;overflow-x:hidden}.mark-all-read{text-align:right;color:#007bff;margin-bottom:12px;font-size:12px}.notification-items__wrapper{overflow:hidden}.notification-items__content{height:calc(100vh - 275px);overflow-x:hidden;overflow-y:auto;color:#292929}.notitification-item__container{display:flex;justify-content:space-between;padding:16px;border-bottom:#FAFAFA 1px solid;text-align:left;font-size:12px;position:relative;z-index:10;cursor:pointer;border-radius:4px;margin-bottom:8px}.notitification-item__container:hover{background-color:#fafafa}.notification-item__image-container{width:46px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;margin-right:16px}.notification-item__image-container img{width:100%;height:100%;text-align:center;-o-object-fit:cover;object-fit:cover;color:transparent;text-indent:10000px}.notification-item__content-wrapper{width:100%;display:flex;align-items:center;justify-content:space-between}.notification-item__context-link{color:#007bff}.notification-item__content{width:75%;padding-right:16px}.notification-item__user-name{margin-bottom:2px;font-size:14px}.notification-item__time{margin-right:15px;text-align:right}.notification-item__read-at{border-width:2px;border-style:solid;border-radius:50%;width:10px;height:10px;display:block;position:relative}.notification-item__read-at:before{position:absolute;top:-30px;right:0;width:91px;background-color:#85858a;color:#fff;border-radius:4px;font-size:10px;text-align:center;padding:4px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.39,.575,.565,1)}.notification-item__read-at:hover:before{opacity:1;visibility:visible}.notification-item__read-at.read:before{content:"Mark as unread"}.notification-item__read-at.unread:before{content:"Mark as read"}.notification-item__read-at.read{border-color:#eee}.notification-item__read-at.unread{border-color:#2e7d32;background-color:#2e7d32}.list-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:block}
+ */function dy(e=BA()){return wI().then(t=>{if(!t)throw nn.create("unsupported-browser")},t=>{throw nn.create("indexed-db-unsupported")}),Hd(Wd(e),"messaging").getImmediate()}async function kI(e,t){return e=Wd(e),fy(e,t)}function CI(e,t){return e=Wd(e),SI(e,t)}_I();const hy=e=>{"serviceWorker"in navigator&&navigator.serviceWorker.register(e.path).then(function(t){console.log("Registration successful, scope is:",t.scope),console.log("initialize service worker props ",e);const r=dy(Ud({apiKey:e.apiKey,authDomain:e.authDomain,projectId:e.projectId,storageBucket:e.storageBucket,messagingSenderId:e.messagingSenderId,appId:e.appId,measurementId:e.measurementId}));kI(r,{serviceWorkerRegistration:t,vapidKey:e.vapidKey}).then(async s=>{var o,c;if(s){console.log("current token for client: ",s);try{const h="/notification-management/api/v1/notifications/registrations",b=e.baseUrl+h;await se.axios.post(b,{deviceToken:s},{withCredentials:!0})}catch(h){console.log(h),se.pushError(((c=(o=h.response)==null?void 0:o.data)==null?void 0:c.errorMessage)||"Have error when get notification list")}}else console.log("No registration token available. Request permission to generate one.")}).catch(s=>{console.log("An error occurred while retrieving token. ",s)})}).catch(function(t){console.log("Service worker registration failed, error:",t)})},DI=e=>{const t=new BroadcastChannel("my-channel");t.onmessage=r=>{console.log("Broadcast chanel message",r),r&&e(s=>({...s,unread:{...s.unread,total:s.unread.total+1}}))}},EI=e=>new Promise(t=>{const r=dy(Ud({apiKey:e.apiKey,authDomain:e.authDomain,projectId:e.projectId,storageBucket:e.storageBucket,messagingSenderId:e.messagingSenderId,appId:e.appId,measurementId:e.measurementId}));CI(r,s=>{console.log("payload",s),t(s)})}),us={"subscription-diaglog":"_subscription-diaglog_1gvmm_2","subscription-container":"_subscription-container_1gvmm_15","subscription-title":"_subscription-title_1gvmm_25","subscription-text":"_subscription-text_1gvmm_34","subscription-btn__container":"_subscription-btn__container_1gvmm_38","btn-success":"_btn-success_1gvmm_44","btn-cancel":"_btn-cancel_1gvmm_45"},TI=["granted","denied"],RI=e=>{const[t,r]=D.reactExports.useState(!1),s=()=>{Notification.requestPermission(function(c){c==="granted"&&hy(e),TI.includes(c)&&r(!0)})},o=()=>{r(!0)};return D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:t?"":D.jsxRuntimeExports.jsx("div",{className:us["subscription-diaglog"],children:D.jsxRuntimeExports.jsxs("div",{className:us["subscription-container"],children:[D.jsxRuntimeExports.jsx("h4",{className:us["subscription-title"],children:"Notification"}),D.jsxRuntimeExports.jsx("p",{className:us["subscription-text"],children:"Choice to receive notifications for the most recent updates. You have the flexibility to disable them whenever you prefer."}),D.jsxRuntimeExports.jsxs("div",{className:us["subscription-btn__container"],children:[D.jsxRuntimeExports.jsx("button",{className:us["btn-cancel"],onClick:o,children:"Not now"}),D.jsxRuntimeExports.jsx("button",{className:us["btn-success"],onClick:s,children:"Turn on"})]})]})})})},Ou={"notification-massage_container":"_notification-massage_container_ql4az_1","notification-name":"_notification-name_ql4az_18","notification-message_service":"_notification-message_service_ql4az_23","notification-message_button-close":"_notification-message_button-close_ql4az_27"},Hi=D.reactExports.createContext({}),MI=({children:e})=>{const[t,r]=D.reactExports.useState(!0),[s,o]=D.reactExports.useState({all:{rows:[],total:0},unread:{rows:[],total:0}}),c=()=>{r(!t)},h=()=>{r(!0)};return D.jsxRuntimeExports.jsx(Hi.Provider,{value:{isOpen:t,toggleOpen:c,setShowModalFalse:h,notidata:s,setNotiData:o},children:e})},AI=e=>{const[t,r]=D.reactExports.useState({actorName:"",message:"",context:""});console.log(t);const{setNotiData:s}=D.reactExports.useContext(Hi);function o(){return D.jsxRuntimeExports.jsx("div",{className:Ou["notification-massage_container"],children:D.jsxRuntimeExports.jsxs("div",{className:Ou["notification-massage_content"],children:[D.jsxRuntimeExports.jsx("h6",{className:Ou["notification-name"],children:t==null?void 0:t.actorName}),D.jsxRuntimeExports.jsxs("div",{className:Ou["notification-message_service"],children:[D.jsxRuntimeExports.jsxs("span",{children:[`${t==null?void 0:t.message} `," "]}),D.jsxRuntimeExports.jsx("span",{children:t==null?void 0:t.context})]})]})})}return D.reactExports.useEffect(()=>{t&&Notification.permission==="granted"&&(t.actorName||t.message||t.context)&&se.notify(D.jsxRuntimeExports.jsx(o,{}))},[t]),D.reactExports.useEffect(()=>{Notification.permission==="granted"&&hy(e)},[Notification.permission]),D.reactExports.useEffect(()=>{DI(s)},[]),EI(e).then(c=>{var h,b,S;console.log("aaa",c),r({actorName:(h=c==null?void 0:c.data)==null?void 0:h.actorName,message:(b=c==null?void 0:c.data)==null?void 0:b.message,context:(S=c==null?void 0:c.data)==null?void 0:S.context}),s(E=>{var A;return{...E,unread:{...E.unread,total:((A=E.unread)==null?void 0:A.total)+1}}})}).catch(c=>console.log("failed: ",c)),D.jsxRuntimeExports.jsx("div",{children:"Notification"in window&&Notification.permission==="default"?D.jsxRuntimeExports.jsx(RI,{...e}):""})};function OI({config:e,pushError:t=se.pushError}){const r=se.axios.create(e);r.interceptors.request.use(async o=>(o.headers={Accept:"application/json","Content-Type":"application/json"},o),o=>Promise.reject(o)),r.interceptors.response.use(o=>o,async o=>s(o));async function s(o){var S,E,A,$;console.error("Error 🚨:",o);const c=o.config,h=(E=(S=o.response)==null?void 0:S.data)==null?void 0:E.errorMessage,b=h===se.ERROR_MESSAGE.TOKEN_EXPIRED;return((A=o.response)==null?void 0:A.status)===401?b&&!c._retry?(c._retry=!0,r.post("/authentication/api/v1/auth/refresh-token").then(()=>r(c)).catch(()=>se.login(e.baseURL))):((!h||!b)&&se.login(e.baseURL),Promise.reject("Unauthorized! Please login again.")):((($=o.response)==null?void 0:$.status)===403||t(ps.t(`${h||"Something went wrong!"}`)),Promise.reject(o.response.data))}return r}const II=e=>{const[t,r]=D.reactExports.useState([]);return D.reactExports.useEffect(()=>{se.axios.get(`${e}/user-management/api/v1/users/my-account/permissions`,{withCredentials:!0}).then(s=>r(s.data)).catch(s=>{console.error("Getting user permission error:",s)})},[e]),t},py=e=>(t,r)=>{const s=II(e);return r?t.every(o=>s==null?void 0:s.includes(o)):t.some(o=>s==null?void 0:s.includes(o))},gy=({baseUrl:e,accessWith:t,requireAll:r,children:s})=>py(e)(t,r)?D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:s}):null;{const e=D.s(gy,{props:{baseUrl:"string",accessWith:"json",requireAll:"boolean",children:"json"},shadow:"open"});customElements.define("has-permission",e)}function PI(){const[e,t]=D.reactExports.useState();return D.reactExports.useEffect(()=>{const r=localStorage.getItem("language");t(r||ps.Language.en)},[]),{language:e,setLanguage:t}}const my=D.reactExports.createContext({}),NI=()=>D.reactExports.useContext(my),LI=({children:e})=>{const t=PI();return D.jsxRuntimeExports.jsx(my.Provider,{value:t,children:D.jsxRuntimeExports.jsx(ps.I18nextProvider,{i18n:ps.instance,children:e})})},jI=OI({config:{withCredentials:!0}}),eh=({baseUrl:e,notiPath:t,setNotiData:r})=>async()=>{var E;const c=e+(t||"/notification-management/api/v1/notifications"),b=(E=(await jI.get(c,{params:{filter:{notificationFilterType:"all"}},withCredentials:!0})).data)==null?void 0:E.rows,S=b==null?void 0:b.filter(A=>A.isRead===!1);r({all:{rows:b??[],total:(b==null?void 0:b.length)??0},unread:{rows:S??[],total:(S==null?void 0:S.length)??0}})},$I=({notification:e,baseUrl:t,notiPath:r,markAllAsReadState:s,brandColors:o})=>{var H;const[c,h]=D.reactExports.useState(!1),[b,S]=D.reactExports.useState({id:e.id,isRead:e.isRead}),E=b.isRead===!1?"unread":"read",A={borderColor:b.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||se.color.primary500,backgroundColor:b.isRead?"#c5c5c5":(o==null?void 0:o.primary500)||se.color.primary500},{setNotiData:$}=D.reactExports.useContext(Hi),B=eh({baseUrl:t,notiPath:r,setNotiData:$}),K=async(oe,de)=>{var he,te;try{const ie=r||`/notification-management/api/v1/notifications/${oe}`,d=t+ie;await se.axios.put(d,{isRead:de},{withCredentials:!0})}catch(ie){S({id:e.id,isRead:e.isRead}),se.pushError(((te=(he=ie.response)==null?void 0:he.data)==null?void 0:te.errorMessage)||"Have error when get notification list")}await B()},q=(oe,de)=>{console.log("specificNotificationID",oe);const he=!de;S(te=>({...te,isRead:he})),console.log("newIsReadState",he),K(oe,he)};D.reactExports.useEffect(()=>{S(s?oe=>({...oe,isRead:!0}):{id:e.id,isRead:e.isRead})},[s,e.id,e.isRead]);const F=()=>{h(!c)},re=oe=>{const de=le(),he=le(oe),te=de.diff(he,"days"),ie=de.diff(he,"minutes"),d=de.diff(he,"months"),Me=de.diff(he,"years");if(console.log("diffInMonths",d),ie<1)return"Just now";if(te===0){if(ie<=60)return`${ie} minute${ie>1?"s":""} ago`;const ae=Math.floor(ie/60);return console.log("diffIhours",ae),`${ae} hour${ae>1?"s":""} ago`}if(te===1)return"Yesterday";if(te>=2&&te<7)return`${te} days ago`;if(te<30){const ae=Math.floor(te/7);return`${ae} week${ae>1?"s":""} ago`}return d===0||d===1?"1 month ago":d<12?`${d} months ago`:Me===0||Me===1?"1 year ago":"Over 1 year ago"};return D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:D.jsxRuntimeExports.jsxs("div",{className:"notitification-item__container",children:[D.jsxRuntimeExports.jsx("div",{className:"notification-item__image-container",children:D.jsxRuntimeExports.jsx("img",{src:e==null?void 0:e.actorAvatarUrl,onError:({currentTarget:oe})=>{oe.onerror=null,oe.src="https://ukpcsaprod.blob.core.windows.net/account/logo.png"},alt:e.actorName})}),D.jsxRuntimeExports.jsxs("div",{style:{width:"100%"},children:[D.jsxRuntimeExports.jsxs("div",{className:"notification-item__content-wrapper",children:[D.jsxRuntimeExports.jsxs("div",{className:"notification-item__content",children:[D.jsxRuntimeExports.jsx("p",{className:"notification-item__user-name",children:e.actorName}),D.jsxRuntimeExports.jsxs("p",{children:[`${e.message} `,D.jsxRuntimeExports.jsx("span",{children:e==null?void 0:e.context})]}),(e==null?void 0:e.notificationType)==="deleteMultiple"&&D.jsxRuntimeExports.jsxs("button",{style:{color:se.color.primary400,textDecoration:"underline"},onClick:F,children:[c?"Hide":"Show  "," details"]})]}),D.jsxRuntimeExports.jsx("div",{className:"notification-item__time",children:D.jsxRuntimeExports.jsx("p",{children:re(e.createdAt)})}),D.jsxRuntimeExports.jsx("button",{className:`${E} notification-item__read-at`,"aria-label":"Mark as read",style:A,onClick:()=>q(e.id,e.isRead)})]}),c&&D.jsxRuntimeExports.jsx("div",{style:{background:"#fff",width:"100%",padding:"8px",fontSize:"12px",marginTop:"8px"},children:D.jsxRuntimeExports.jsx("ul",{children:(H=e==null?void 0:e.data)==null?void 0:H.map((oe,de)=>D.jsxRuntimeExports.jsxs("li",{style:{display:"flex",alignItems:"center",marginBottom:"4px"},children:[D.jsxRuntimeExports.jsx("span",{style:{backgroundColor:se.color.primary400},className:"list-dot"}),oe.name]},de))})})]})]})})},Ug=({notidata:e,baseUrl:t,notiPath:r,brandColors:s})=>{const[o,c]=D.reactExports.useState(!1);console.log(o);const{setNotiData:h}=D.reactExports.useContext(Hi),b=eh({baseUrl:t,notiPath:r,setNotiData:h}),S=async()=>{var A,$;try{const K=t+(r||"/notification-management/api/v1/notifications");await se.axios.put(K,{withCredentials:!0})}catch(B){console.log(B),c(!1),se.pushError((($=(A=B.response)==null?void 0:A.data)==null?void 0:$.errorMessage)||"Have error when get notification list")}await b(),c(!1)},E=()=>{c(!0),S()};return D.jsxRuntimeExports.jsxs("div",{children:[D.jsxRuntimeExports.jsx("div",{className:"mark-all-read",children:D.jsxRuntimeExports.jsx("button",{onClick:E,children:"Mark all as read"})}),D.jsxRuntimeExports.jsx("div",{className:"notification-items__wrapper",children:D.jsxRuntimeExports.jsx("div",{className:"notification-items__content",children:Object.values(e).map((A,$)=>D.jsxRuntimeExports.jsx($I,{notification:A,baseUrl:t,notiPath:r,markAllAsReadState:o,brandColors:s},$))})})]})},FI=({baseUrl:e,notiPath:t,brandColors:r})=>{var S,E,A,$;const{setShowModalFalse:s}=D.reactExports.useContext(Hi),{notidata:o}=D.reactExports.useContext(Hi);console.log(o);const[c,h]=D.reactExports.useState("all"),b=[{id:"all",tabTitle:`All (${((S=o==null?void 0:o.all)==null?void 0:S.total)||0})`,children:D.jsxRuntimeExports.jsx(Ug,{notidata:((E=o==null?void 0:o.all)==null?void 0:E.rows)||[],baseUrl:e,notiPath:t,brandColors:r})},{id:"unread",tabTitle:`Unread (${((A=o==null?void 0:o.unread)==null?void 0:A.total)||0})`,children:D.jsxRuntimeExports.jsx(Ug,{notidata:(($=o==null?void 0:o.unread)==null?void 0:$.rows)||[],baseUrl:e,notiPath:t,brandColors:r})}];return D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:D.jsxRuntimeExports.jsx("div",{style:{position:"absolute",backgroundColor:"#fff",width:"550px",height:"90vh",right:"100px",top:"100%",padding:"32px",boxShadow:"10px 0px 20px #999",borderRadius:"0 0 8px 8px",overflow:"hidden"},children:D.jsxRuntimeExports.jsxs("div",{className:"list-content",children:[D.jsxRuntimeExports.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[D.jsxRuntimeExports.jsx("h3",{style:{fontSize:"24px",fontWeight:"500",color:se.color.textPrimary},className:"list-title",children:"Notifications"}),D.jsxRuntimeExports.jsx("button",{onClick:s,children:D.jsxRuntimeExports.jsx("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:D.jsxRuntimeExports.jsx("path",{d:"M7.05086 6.13616C6.66033 5.74563 6.02717 5.74563 5.63664 6.13616C5.24612 6.52668 5.24612 7.15984 5.63664 7.55037L10.5864 12.5001L5.63664 17.4499C5.24612 17.8404 5.24612 18.4736 5.63664 18.8641C6.02717 19.2546 6.66033 19.2546 7.05086 18.8641L12.0006 13.9143L16.9504 18.8641C17.3409 19.2546 17.974 19.2546 18.3646 18.8641C18.7551 18.4736 18.7551 17.8404 18.3646 17.4499L13.4148 12.5001L18.3646 7.55037C18.7551 7.15984 18.7551 6.52668 18.3646 6.13616C17.974 5.74563 17.3409 5.74563 16.9504 6.13616L12.0006 11.0859L7.05086 6.13616Z",fill:"#85858A"})})})]}),D.jsxRuntimeExports.jsx(Sw,{tabs:b,setCurrentTab:h,currentTab:c,brandColors:r})]})})})};function th({childrenClass:e,action:t,childrenOpenClass:r}){const s=document.querySelector("#topbar-wrapper"),o=s==null?void 0:s.shadowRoot,c=o==null?void 0:o.querySelector(`.${e}`),h=o==null?void 0:o.querySelector(`.${r}`),b=o==null?void 0:o.querySelector("nav"),S=E=>{b==null||b.addEventListener("click",function(A){if(r&&h&&h.contains(A.target)){if(c&&!c.contains(A.target))return}else c&&!c.contains(A.target)&&t()}),s&&!s.contains(E.target)&&t()};document.addEventListener("click",S,!0)}function YI({iconColor:e="#fff",baseUrl:t,notiPath:r,brandColors:s}){var $,B;const{isOpen:o,toggleOpen:c,setShowModalFalse:h}=D.reactExports.useContext(Hi),{notidata:b,setNotiData:S}=D.reactExports.useContext(Hi),E=eh({baseUrl:t,notiPath:r,setNotiData:S}),A=async()=>{var K,q;try{await E()}catch(F){se.pushError(((q=(K=F.response)==null?void 0:K.data)==null?void 0:q.errorMessage)||"Have error when get notification list")}};return D.reactExports.useEffect(()=>{A()},[o]),D.reactExports.useEffect(()=>{th({childrenClass:"noti-container",childrenOpenClass:"noti-list-container",action(){h()}})}),D.jsxRuntimeExports.jsxs("div",{children:[D.jsxRuntimeExports.jsxs("div",{className:"noti-container",style:{position:"relative"},children:[D.jsxRuntimeExports.jsxs("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",onClick:c,style:{cursor:"pointer",color:e},children:[D.jsxRuntimeExports.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7968 17.4705C16.5901 17.4705 18.8076 16.8556 19.0218 14.3874C19.0218 11.921 17.4757 12.0796 17.4757 9.05334C17.4757 6.68952 15.2352 4 11.7968 4C8.35833 4 6.1178 6.68952 6.1178 9.05334C6.1178 12.0796 4.57178 11.921 4.57178 14.3874C4.78679 16.8649 7.00428 17.4705 11.7968 17.4705Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),D.jsxRuntimeExports.jsx("path",{d:"M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),(b==null?void 0:b.unread)&&(b==null?void 0:b.unread.total)!=0&&D.jsxRuntimeExports.jsx("span",{style:{position:"absolute",top:"-9px",right:"-6px",background:`${se.color}`,width:"20px",height:"20px",border:"1px solid #fff",borderRadius:"50%",color:"#fff",fontSize:"12px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:se.color.danger},className:"notification-badge",children:(($=b==null?void 0:b.unread)==null?void 0:$.total)>9?"9+":`${(B=b==null?void 0:b.unread)==null?void 0:B.total}`})]}),D.jsxRuntimeExports.jsx("div",{className:"noti-list-container",children:!o&&D.jsxRuntimeExports.jsx(FI,{baseUrl:t,notiPath:r,brandColors:s})})]})}const WI=`.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{position:fixed;display:flex;z-index:30;background:#292929;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between}.logo-container{height:100%;display:flex;align-items:center}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.languageDropdown{height:100%;padding:0 8px;display:flex;flex-direction:row;gap:8px;border-radius:3px;align-items:center;justify-content:center;height:41px;background-color:#ffffff1a;cursor:pointer;transition:background-color .2s ease-in-out}.languageDropdown:hover{background-color:#fff3}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem}.userAvatar{width:2.5rem;height:2.5rem;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}#userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}
+`,BI=`:root{--textPrimary: #292929;--textWhite: #fff;--primary500: #2E7D32;--grey100: #FAFAFA;--gray200: #EEEEEE;--gray600: #85858A;--link: #007BFF }.list-content{overflow-y:auto;overflow-x:hidden}.mark-all-read{text-align:right;color:#007bff;margin-bottom:12px;font-size:12px}.notification-items__wrapper{overflow:hidden}.notification-items__content{height:calc(100vh - 275px);overflow-x:hidden;overflow-y:auto;color:#292929}.notitification-item__container{display:flex;justify-content:space-between;padding:16px;border-bottom:#FAFAFA 1px solid;text-align:left;font-size:12px;position:relative;z-index:10;cursor:pointer;border-radius:4px;margin-bottom:8px}.notitification-item__container:hover{background-color:#fafafa}.notification-item__image-container{width:46px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;margin-right:16px}.notification-item__image-container img{width:100%;height:100%;text-align:center;-o-object-fit:cover;object-fit:cover;color:transparent;text-indent:10000px}.notification-item__content-wrapper{width:100%;display:flex;align-items:center;justify-content:space-between}.notification-item__context-link{color:#007bff}.notification-item__content{width:68%;padding-right:16px}.notification-item__user-name{margin-bottom:2px;font-size:14px}.notification-item__time{margin-right:15px;text-align:right}.notification-item__read-at{border-width:2px;border-style:solid;border-radius:50%;width:10px;height:10px;display:block;position:relative}.notification-item__read-at:before{position:absolute;top:-30px;right:0;width:91px;background-color:#85858a;color:#fff;border-radius:4px;font-size:10px;text-align:center;padding:4px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.39,.575,.565,1)}.notification-item__read-at:hover:before{opacity:1;visibility:visible}.notification-item__read-at.read:before{content:"Mark as unread"}.notification-item__read-at.unread:before{content:"Mark as read"}.notification-item__read-at.read{border-color:#eee}.notification-item__read-at.unread{border-color:#2e7d32;background-color:#2e7d32}.list-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:block}
 `,HI=`._notification-massage_container_ql4az_1{background:#fff;padding:0 64px 0 84px;border-radius:8px;font-family:TT Firs Neue Trl,sans-serif}._notification-massage_container_ql4az_1:before{position:absolute;content:"";width:48px;height:48px;background:url(https://ukpcsaprod.blob.core.windows.net/saas/notification-icon.svg) no-repeat center/100%;top:12px;left:24px}._notification-name_ql4az_18{font-weight:500;font-size:14px}._notification-message_service_ql4az_23{font-size:12px}._notification-message_button-close_ql4az_27{position:absolute;top:12px;right:24px;width:24px;height:24px}
 `,UI=`._subscription-diaglog_1gvmm_2{position:fixed;width:100vw;height:100vh;top:0;left:0;background-color:#0006;z-index:10000;display:flex;align-items:center;justify-content:center}._subscription-container_1gvmm_15{width:610px;height:222px;border-radius:8px;padding:32px 24px 40px;background:#fff;color:#292929}._subscription-title_1gvmm_25{font-size:20px;font-weight:500;text-align:center;color:#292929}._subscription-title_1gvmm_25,._subscription-text_1gvmm_34{margin-bottom:24px}._subscription-btn__container_1gvmm_38{display:flex;justify-content:space-between;align-items:center}._btn-success_1gvmm_44,._btn-cancel_1gvmm_45{width:150px;height:40px;display:flex;align-items:center;justify-content:center;padding:8px;color:#292929;border-radius:1px}._btn-cancel_1gvmm_45{background-color:#ddd}._btn-success_1gvmm_44{background-color:#93d500}
 `;function qI(e){return D.jsxRuntimeExports.jsxs("svg",{width:"34",height:"25",viewBox:"0 0 34 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[D.jsxRuntimeExports.jsxs("g",{"clip-path":"url(#clip0_16865_28134)",children:[D.jsxRuntimeExports.jsx("rect",{y:"0.5",width:"34",height:"24",rx:"3",fill:"#1A47B8"}),D.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3.61691 0.5H0V4.5L30.3635 24.5L34 24.5V20.5L3.61691 0.5Z",fill:"white"}),D.jsxRuntimeExports.jsx("path",{d:"M1.20635 0.5L34 22.1567V24.5H32.8219L0 2.82089V0.5H1.20635Z",fill:"#F93939"}),D.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M30.7619 0.5H34V4.5C34 4.5 12.9683 17.8249 3.2381 24.5H0V20.5L30.7619 0.5Z",fill:"white"}),D.jsxRuntimeExports.jsx("path",{d:"M34 0.5H32.9019L0 22.1753V24.5H1.20635L34 2.83842V0.5Z",fill:"#F93939"}),D.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.3648 0.5H21.6635V7.90291H34V17.0922H21.6635V24.5H12.3648V17.0922H0V7.90291H12.3648V0.5Z",fill:"white"}),D.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M14.3158 0.5H19.6842V9.73077H34V15.2692H19.6842V24.5H14.3158V15.2692H0V9.73077H14.3158V0.5Z",fill:"#F93939"})]}),D.jsxRuntimeExports.jsx("defs",{children:D.jsxRuntimeExports.jsx("clipPath",{id:"clip0_16865_28134",children:D.jsxRuntimeExports.jsx("rect",{y:"0.5",width:"34",height:"24",rx:"3",fill:"white"})})})]})}function zI(e){return D.jsxRuntimeExports.jsxs("svg",{width:"34",height:"24",viewBox:"0 0 34 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[D.jsxRuntimeExports.jsxs("g",{"clip-path":"url(#clip0_16886_62505)",children:[D.jsxRuntimeExports.jsx("rect",{width:"34",height:"24",rx:"3",fill:"#F93939"}),D.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M0 16H34V24H0V16Z",fill:"#FFDA2C"}),D.jsxRuntimeExports.jsx("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M0 0H34V8H0V0Z",fill:"#151515"})]}),D.jsxRuntimeExports.jsx("defs",{children:D.jsxRuntimeExports.jsx("clipPath",{id:"clip0_16886_62505",children:D.jsxRuntimeExports.jsx("rect",{width:"34",height:"24",rx:"3",fill:"white"})})})]})}function yy({logo:e,user:t,baseUrl:r,notiPath:s,style:o,classNames:c="",customColors:h,notiprops:b}){const S=e||"https://ukpcsaprod.blob.core.windows.net/lib/images/logo-header.png",E={...o,color:(h==null?void 0:h.headerTextColor)||"white",backgroundColor:(h==null?void 0:h.headerBgColor)||"black"},[A,$]=D.reactExports.useState(!1),B=()=>{window.location.href=`${r}/authentication/logout?callbackUrl=${window.location.href}`};return D.jsxRuntimeExports.jsxs(se.ShadowDomWrapper,{styles:[WI,BI,HI,UI],style:{zIndex:1202},id:"topbar-wrapper",children:[D.jsxRuntimeExports.jsx("nav",{className:`navbar ${c}`,style:h?E:o,children:D.jsxRuntimeExports.jsxs("div",{className:"navbar-container",children:[D.jsxRuntimeExports.jsx("div",{className:"logo-container",children:D.jsxRuntimeExports.jsx("img",{src:S,alt:"logo-header",style:{height:"40px"}})}),D.jsxRuntimeExports.jsxs("div",{className:"right-side-container",children:[D.jsxRuntimeExports.jsx("span",{children:D.jsxRuntimeExports.jsxs(MI,{children:[D.jsxRuntimeExports.jsx(AI,{baseUrl:b.baseUrl,path:b.path,apiKey:b.apiKey,authDomain:b.authDomain,projectId:b.projectId,storageBucket:b.storageBucket,messagingSenderId:b.messagingSenderId,appId:b.appId,measurementId:b.measurementId,vapidKey:b.vapidKey}),D.jsxRuntimeExports.jsx(YI,{iconColor:h==null?void 0:h.headerTextColor,baseUrl:r,notiPath:s,brandColors:h})]})}),D.jsxRuntimeExports.jsx(VI,{}),D.jsxRuntimeExports.jsxs("div",{className:"userContainer",children:[D.jsxRuntimeExports.jsx(GI,{primaryColor:h==null?void 0:h.headerTextColor,avatarUrl:t==null?void 0:t.avatarUrl,userName:t==null?void 0:t.firstName,setShowConfirmModal:$}),D.jsxRuntimeExports.jsx("p",{className:"userFullName",style:{color:h==null?void 0:h.headerTextColor},children:`${(t==null?void 0:t.firstName)||"Unknown"} ${(t==null?void 0:t.lastName)||"User"}`})]})]})]})}),D.jsxRuntimeExports.jsx(se.LogoutConfirmModal,{isOpen:A,onClose:()=>$(!1),onConfirm:B})]})}function VI(){var h;const e=[{value:ps.Language.en,element:D.jsxRuntimeExports.jsx(qI,{})},{value:ps.Language.de,element:D.jsxRuntimeExports.jsx(zI,{})}],[t,r]=D.reactExports.useState(!1);D.reactExports.useState(new Array(e.length).fill(!1));const{language:s,setLanguage:o}=NI();D.reactExports.useEffect(()=>{th({childrenClass:"languageDropdown",action(){r(!1)}})},[]);const c=(h=e.find(b=>b.value==s))==null?void 0:h.element;return D.jsxRuntimeExports.jsx("div",{className:"languageDropdownContainer",style:{position:"relative"},children:D.jsxRuntimeExports.jsx("div",{className:"languageDropdown",onClick:()=>{r(!t)},children:c})})}function GI({avatarUrl:e,userName:t}){const[r,s]=D.reactExports.useState(!1),o=D.reactExports.useRef(null);return D.reactExports.useRef(null),D.reactExports.useState(!1),D.reactExports.useState(!1),D.reactExports.useEffect(()=>{th({childrenClass:"userAvatar",action(){s(!1)}})},[]),D.jsxRuntimeExports.jsx(D.jsxRuntimeExports.Fragment,{children:D.jsxRuntimeExports.jsx("div",{style:{position:"relative"},children:e?D.jsxRuntimeExports.jsx("img",{onClick:()=>s(!r),ref:o,alt:"user avatar",className:"userAvatar",src:e}):D.jsxRuntimeExports.jsx("div",{onClick:()=>s(!r),ref:o,className:"userAvatar",id:"userAvatarNull",children:(t==null?void 0:t.charAt(0))??""})})})}const KI=e=>D.jsxRuntimeExports.jsx(LI,{children:D.jsxRuntimeExports.jsx(yy,{...e})});{const e=D.s(KI,{props:{logo:"string",user:"json",baseUrl:"string",notiPath:"string",classNames:"string",style:"json",customColors:"json",notiprops:"json"},shadow:"open"});customElements.define("global-topbar",e)}exports.HasPermission=gy;exports.TopBar=yy;exports.getUseHasPermission=py;