@ukpc-lib/react 0.2.26 → 0.2.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ukpc-lib/react",
   "private": false,
-  "version": "0.2.26",
+  "version": "0.2.28",
   "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("../index-ea3fddce.cjs");const e=require("../index-04dc6603.cjs");exports.TopBar=e.TopBar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-ea3fddce.cjs");const e=require("../index-f93fc96f.cjs");exports.TopBar=e.TopBar;

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

@@ -1,5 +1,5 @@
 import "../index-a16031d2.js";
-import { T as a } from "../index-aff1e7a4.js";
+import { T as a } from "../index-ed2b29bc.js";
 export {
   a as TopBar
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-ea3fddce.cjs");const e=require("../index-04dc6603.cjs");exports.HasPermission=e.HasPermission;exports.getUseHasPermission=e.getUseHasPermission;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-ea3fddce.cjs");const e=require("../index-f93fc96f.cjs");exports.HasPermission=e.HasPermission;exports.getUseHasPermission=e.getUseHasPermission;

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

@@ -1,5 +1,5 @@
 import "../index-a16031d2.js";
-import { H as o, g as r } from "../index-aff1e7a4.js";
+import { H as o, g as r } from "../index-ed2b29bc.js";
 export {
   o as HasPermission,
   r as getUseHasPermission

package/web-components-bundle/{index-aff1e7a4.js → index-ed2b29bc.js}

@@ -2701,8 +2701,24 @@ const KT = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   default: ge
 }, Symbol.toStringTag, { value: "Module" })), XT = ({ notification: e, handleUpdateRead: t }) => {
   const n = (i) => {
-    const a = ge(), u = ge(i), c = a.diff(u, "days");
-    return c === 0 ? "Today" : c === 1 ? "Yesterday" : c >= 2 && c <= 7 ? `Last ${c} days` : c === 8 || c === 9 || c === 10 ? "1 week ago" : c >= 11 && c <= 14 ? "2 weeks ago" : u.format("MMMM DD, YYYY");
+    const a = ge(), u = ge(i), c = a.diff(u, "days"), m = a.diff(u, "minutes"), y = a.diff(u, "months"), x = a.diff(u, "years");
+    if (m < 1)
+      return "Just now";
+    if (c === 0) {
+      if (m <= 60)
+        return `${m} minutes ago`;
+      const S = Math.floor(m / 60);
+      return `${S} hour${S > 1 ? "s" : ""} ago`;
+    }
+    if (c === 1)
+      return "Yesterday";
+    if (c >= 2 && c <= 7)
+      return `${c} days ago`;
+    if (y === 0 || y === 1) {
+      const S = Math.ceil(c / 7);
+      return `${S} week${S > 1 ? "s" : ""} ago`;
+    }
+    return y < 12 ? `${Math.floor(y / 4)} months ago` : x === 1 ? "1 year ago" : "Over 1 year ago";
   };
   return /* @__PURE__ */ G.jsxs(
     "div",
@@ -20958,80 +20974,86 @@ function wN({
   baseUrl: t,
   notiPath: n
 }) {
-  var x;
+  var x, S;
   const { isOpen: i, toggleOpen: a } = se.useContext(ua), { notidata: u, setNotiData: c } = se.useContext(ua), m = Rv({ baseUrl: t, notiPath: n, setNotiData: c }), y = async () => {
-    var S, E;
+    var E, T;
     try {
       await m();
-    } catch (T) {
+    } catch (B) {
       ul(
-        ((E = (S = T.response) == null ? void 0 : S.data) == null ? void 0 : E.errorMessage) || "Have error when get notification list"
+        ((T = (E = B.response) == null ? void 0 : E.data) == null ? void 0 : T.errorMessage) || "Have error when get notification list"
       );
     }
   };
   return se.useEffect(() => {
     y();
-  }, []), /* @__PURE__ */ G.jsxs("div", { children: [
-    /* @__PURE__ */ G.jsxs(
-      "svg",
-      {
-        width: "24",
-        height: "25",
-        viewBox: "0 0 24 25",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        onClick: a,
-        style: { cursor: "pointer" },
-        children: [
-          /* @__PURE__ */ G.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: e,
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ),
-          /* @__PURE__ */ G.jsx(
-            "path",
-            {
-              d: "M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",
-              stroke: e,
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        ]
-      }
-    ),
-    (u == null ? void 0 : u.unread) && (u == null ? void 0 : u.unread.total) != 0 && /* @__PURE__ */ G.jsx(
-      "span",
-      {
-        style: {
-          position: "absolute",
-          top: "18px",
-          background: `${Pd.dangerDark}`,
-          width: "13px",
-          height: "13px",
-          border: "1px solid #fff",
-          borderRadius: "50%",
-          color: "#fff",
-          fontSize: "8px"
-        },
-        className: "notification-badge",
-        children: (x = u == null ? void 0 : u.unread) == null ? void 0 : x.total
-      }
-    ),
+  }, [i]), /* @__PURE__ */ G.jsxs("div", { children: [
+    /* @__PURE__ */ G.jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ G.jsxs(
+        "svg",
+        {
+          width: "24",
+          height: "25",
+          viewBox: "0 0 24 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          onClick: a,
+          style: { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ G.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: e,
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ G.jsx(
+              "path",
+              {
+                d: "M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",
+                stroke: e,
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      ),
+      (u == null ? void 0 : u.unread) && (u == null ? void 0 : u.unread.total) != 0 && /* @__PURE__ */ G.jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: "-9px",
+            right: "-6px",
+            background: `${Pd.dangerDark}`,
+            width: "20px",
+            height: "20px",
+            border: "1px solid #fff",
+            borderRadius: "50%",
+            color: "#fff",
+            fontSize: "12px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          className: "notification-badge",
+          children: ((x = u == null ? void 0 : u.unread) == null ? void 0 : x.total) > 9 ? "9+" : `${(S = u == null ? void 0 : u.unread) == null ? void 0 : S.total}`
+        }
+      )
+    ] }),
     !i && /* @__PURE__ */ G.jsx(bN, { baseUrl: t, notiPath: n })
   ] });
 }
 const xN = `.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{padding:16px 0;height:100%}.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;cursor:pointer;-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}
 `, _N = `.tab-title{min-width:90px;padding:5px 16px;font-size:14px;font-weight:500;color:#c5c5c5;transition:all .3s ease-in-out;position:relative}.tab-title.is-active{color:#2e7d32}.tab-title.is-active:before{transition:all .3s ease-in-out;position:absolute;content:"";width:100%;height:100%;top:0;left:0;border-bottom:2px solid #2E7D32}.tab-content{padding:16px 0}
-`, SN = `: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}.notitification-item__container{display:flex;align-items:center;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}.notitification-item__container:not(:last-child):before{position:absolute;content:"";width:100%;bottom:-5px;left:0;border:1px solid #FAFAFA}.notitification-item__container:hover:before{opacity:1}.notification-item__image-container{width:40px;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__context-link{color:#007bff}.notification-item__content{width:65%;padding-right:16px}.notification-item__user-name{margin-bottom:2px;font-size:14px}.notification-item__time{margin-right:15px}.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}
+`, SN = `: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}.notitification-item__container{display:flex;align-items:center;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}.notitification-item__container:not(:last-child):before{position:absolute;content:"";width:100%;bottom:-5px;left:0;border:1px solid #FAFAFA}.notitification-item__container:hover:before{opacity:1}.notification-item__image-container{width:40px;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__context-link{color:#007bff}.notification-item__content{width:62%;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}
 `, kN = `._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}
 `, CN = `._subscription-diaglog_12x9u_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_12x9u_15{width:610px;height:222px;border-radius:8px;padding:32px 24px 40px;background:#fff}._subscription-title_12x9u_24{font-size:20px;font-weight:500;text-align:center;color:#292929}._subscription-title_12x9u_24,._subscription-text_12x9u_33{margin-bottom:24px}._subscription-btn__container_12x9u_37{display:flex;justify-content:space-between;align-items:center}._btn-success_12x9u_43,._btn-cancel_12x9u_44{width:150px;height:40px;display:flex;align-items:center;justify-content:center;padding:8px;color:#292929;border-radius:1px}._btn-cancel_12x9u_44{background-color:#ddd}._btn-success_12x9u_43{background-color:#93d500}
 `;