@kompasid/lit-web-components 0.8.15 → 0.8.17

package/src/utils/customFetch.ts

@@ -0,0 +1,89 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-undef */
+// Define types for the API responses
+interface RefreshTokenResponse {
+  data: {
+    accessToken: string
+    deviceKeyId: string
+    isVerified: boolean
+    refreshToken: string
+  }
+}
+
+interface ApiResponse<T> extends Response {
+  json(): Promise<T>
+}
+
+interface RequestInit {
+  method?: string
+  headers?: Headers | { [key: string]: string }
+  body?: BodyInit | null
+  mode?: RequestMode
+  credentials?: RequestCredentials
+  cache?: RequestCache
+  redirect?: RequestRedirect
+  referrer?: string
+  referrerPolicy?: ReferrerPolicy
+  integrity?: string
+  keepalive?: boolean
+  signal?: AbortSignal
+}
+
+// Function to refresh the token
+async function refreshAccessToken(
+  refreshToken: string,
+  domain: string
+): Promise<string> {
+  const response = await fetch(
+    `https://api.kompas.${domain}/account/api/v1/tokens/refresh`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        refreshToken,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to refresh token')
+  }
+
+  const data: RefreshTokenResponse = await response.json()
+  return data.data.accessToken
+}
+
+// Custom fetch function that retries after 401
+export async function customFetch<T>(
+  url: string,
+  refreshToken: string,
+  accessToken: string,
+  domain: string,
+  options: RequestInit = {}
+): Promise<ApiResponse<T>> {
+  try {
+    // Retrieve and set access token in headers
+    const headers = new Headers(options.headers || {})
+    if (accessToken) {
+      headers.set('Authorization', `Bearer ${accessToken}`)
+    }
+
+    // Set updated headers
+    options.headers = headers
+    let response = await fetch(url, options)
+
+    // Retry request if 401 error occurs
+    if (response.status === 401) {
+      const newToken = await refreshAccessToken(refreshToken, domain)
+      headers.set('Authorization', `Bearer ${newToken}`)
+      // Retry the original request with the new token
+      response = await fetch(url, { ...options, headers })
+    }
+
+    return response as ApiResponse<T>
+  } catch (error) {
+    throw Error('Error making API call')
+  }
+}

package/src/utils/ellipsisText.ts

@@ -0,0 +1,26 @@
+/**
+ * Shorten a string to a given length, appending an ellipsis if necessary.
+ * @param {string} string The string to be shortened.
+ * @param {number} [length=255] The desired length of the output string.
+ * @return {string}
+ */
+const ellipsisText = (string: string, length: number = 255): string => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(string, 'text/html')
+
+  let fullText = doc.body.textContent || ''
+
+  if (fullText.length <= length) {
+    return fullText
+  }
+  fullText = fullText.substring(0, length - 1)
+
+  const lastSpace = fullText.lastIndexOf(' ')
+
+  return `${fullText.substring(
+    0,
+    Math.sign(lastSpace) > 0 ? lastSpace : length
+  )}...`
+}
+
+export { ellipsisText }

package/src/utils/getCookies.ts

@@ -0,0 +1,8 @@
+export const getCookie = (name: string) => {
+  const value = `; ${document.cookie}`
+  const parts: any = value.split(`; ${name}=`)
+  if (parts && parts.length === 2) {
+    return parts.pop().split(';').shift()
+  }
+  return null
+}

package/tailwind/tailwind.css

@@ -713,10 +713,6 @@ video {
   margin-left: 0.75rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .ml-8 {
   margin-left: 2rem;
 }
@@ -745,6 +741,14 @@ video {
   margin-right: 1.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -801,6 +805,10 @@ video {
   height: 3rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -845,6 +853,10 @@ video {
   height: 17px;
 }
 
+.h-\[300px\] {
+  height: 300px;
+}
+
 .h-\[68px\] {
   height: 68px;
 }
@@ -874,6 +886,10 @@ video {
   width: 33.333333%;
 }
 
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-1\/5 {
   width: 20%;
 }
@@ -886,6 +902,10 @@ video {
   width: 91.666667%;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1029,6 +1049,16 @@ video {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1173,6 +1203,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1183,6 +1217,10 @@ video {
   white-space: nowrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1351,6 +1389,11 @@ video {
   background-color: rgb(46 46 46 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 252 210 / var(--tw-bg-opacity));
+}
+
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(151 219 83 / var(--tw-bg-opacity));
@@ -1391,6 +1434,11 @@ video {
   background-color: rgb(255 238 204 / var(--tw-bg-opacity));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 225 207 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1443,6 +1491,11 @@ video {
   padding: 1.5rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1488,6 +1541,11 @@ video {
   padding-bottom: 0.125rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1573,8 +1631,8 @@ video {
   padding-left: 1px;
 }
 
-.pr-14 {
-  padding-right: 3.5rem;
+.pr-1 {
+  padding-right: 0.25rem;
 }
 
 .pr-2 {
@@ -1822,6 +1880,11 @@ video {
   color: rgb(51 51 51 / var(--tw-text-opacity));
 }
 
+.text-grey-700 {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-orange-400 {
   --tw-text-opacity: 1;
   color: rgb(255 122 0 / var(--tw-text-opacity));
@@ -1832,6 +1895,11 @@ video {
   color: rgb(219 93 0 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(174 9 27 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1930,8 +1998,8 @@ video {
     margin-right: 1.25rem;
   }
 
-  .md\:mt-0 {
-    margin-top: 0px;
+  .md\:mr-6 {
+    margin-right: 1.5rem;
   }
 
   .md\:mt-2 {
@@ -2011,10 +2079,6 @@ video {
     width: 13rem;
   }
 
-  .md\:w-\[165px\] {
-    width: 165px;
-  }
-
   .md\:w-\[350px\] {
     width: 350px;
   }
@@ -2055,6 +2119,10 @@ video {
     max-width: 464px;
   }
 
+  .md\:max-w-\[737px\] {
+    max-width: 737px;
+  }
+
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -2091,10 +2159,6 @@ video {
     justify-content: center;
   }
 
-  .md\:gap-2 {
-    gap: 0.5rem;
-  }
-
   .md\:gap-8 {
     gap: 2rem;
   }
@@ -2149,10 +2213,6 @@ video {
     align-self: flex-end;
   }
 
-  .md\:self-center {
-    align-self: center;
-  }
-
   .md\:rounded {
     border-radius: 0.25rem;
   }