@kompasid/lit-web-components 0.9.19 → 0.9.21

package/src/components/kompasid-menu-side-bar/SidebarDataController.ts

@@ -0,0 +1,113 @@
+// SidebarDataController.ts
+export interface DataExternalLink {
+  external: boolean
+  gtmClass: string
+  icon: string | null
+  iconify: string | null
+  isNew: boolean
+  name: string
+  url: string
+}
+
+export interface DataRedDot {
+  start: string | null
+  end: string | null
+}
+
+export interface DataSideBarItem {
+  isShow: boolean
+  href: string
+  external?: boolean
+  icon: string | null
+  iconify: string | null
+  name: string
+  slug: string
+  redDot: DataRedDot
+  children: DataSideBarItem[]
+}
+
+export interface DataSideBarLink {
+  bundles: DataSideBarItem[]
+  feature: DataSideBarItem[]
+  category: DataSideBarItem[]
+  lainnya: DataSideBarItem[]
+}
+
+// ---- Fetch External Links ----
+export async function fetchExternalLinks(
+  isProduction: boolean
+): Promise<DataExternalLink[]> {
+  try {
+    const baseUrl = isProduction
+      ? 'https://cdn-www.kompas.id'
+      : 'https://cdn-dev-www.kompas.id'
+    const response = await fetch(
+      `${baseUrl}/assets/json/ApiMenuExternalLinkV2.json`
+    )
+    const data = await response.json()
+
+    return Array.isArray(data)
+      ? data.map(
+          (item: any): DataExternalLink => ({
+            external: item.external ?? false,
+            gtmClass: item.gtmClass ?? '',
+            icon: item.icon ?? null,
+            iconify: item.iconify ?? null,
+            isNew: item.isNew ?? false,
+            name: item.name ?? '',
+            url: item.url ?? '',
+          })
+        )
+      : []
+  } catch (error) {
+    console.error('Error fetching external links:', error)
+    return []
+  }
+}
+
+// ---- Fetch Sidebar Data ----
+export async function fetchSidebarData(
+  isProduction: Boolean
+): Promise<DataSideBarLink> {
+  try {
+    const baseUrl = isProduction
+      ? 'https://cdn-www.kompas.id'
+      : 'https://cdn-dev-www.kompas.id'
+    const response = await fetch(`${baseUrl}/assets/json/ApiMenuSideV4.json`)
+    const data = await response.json()
+
+    if (data && typeof data === 'object') {
+      const mapItem = (item: any): DataSideBarItem => ({
+        isShow: item.isShow ?? true,
+        href: item.href ?? '',
+        external: item.external ?? false,
+        icon: item.icon ?? null,
+        iconify: item.iconify ?? null,
+        name: item.name ?? '',
+        slug: item.slug ?? '',
+        redDot: {
+          start: item.redDot?.start ?? '',
+          end: item.redDot?.end ?? '',
+        },
+        children: Array.isArray(item.children)
+          ? item.children.map(mapItem)
+          : [],
+      })
+
+      const mapper = (list: any[]): DataSideBarItem[] =>
+        Array.isArray(list) ? list.map(mapItem) : []
+
+      return {
+        bundles: mapper(data.bundles),
+        feature: mapper(data.feature),
+        category: mapper(data.category),
+        lainnya: mapper(data.lainnya),
+      }
+    }
+
+    return { bundles: [], feature: [], category: [], lainnya: [] }
+  } catch (error) {
+    console.error('Error fetching sidebar data:', error)
+    return { bundles: [], feature: [], category: [], lainnya: [] }
+  }
+}

package/tailwind/tailwind.ts

@@ -672,6 +672,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: 1rem;
   }
 
+  .mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
   .mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -1735,6 +1740,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-left: 0.25rem;
   }
 
+  .pl-8 {
+    padding-left: 2rem;
+  }
+
   .pl-11 {
     padding-left: 2.75rem;
   }