@kompasid/lit-web-components 0.8.30 → 0.9.0

package/demo/index.html

@@ -45,6 +45,7 @@
 
     <script type="module">
       import { html, render } from 'lit'
+      import '../dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.js'
       import '../dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'
       import '../dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'
       import '../dist/src/components/kompasid-footer/KompasFooter.js'
@@ -143,6 +144,7 @@
         titleLink: '/kategori/ekonomi',
       }
 
+
       render(
         html`
           <header
@@ -195,6 +197,7 @@
             apiSlug="popular-article"
           >
           </kompasid-widget-recirculations-list>
+          <kompasid-menu-side-bar></kompasid-menu-side-bar>
 
           <kompasid-widget-recirculations-list
             widgetTitle="Terbaru"

package/dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.d.ts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+interface DataExternalLink {
+    external?: boolean;
+    gtmClass?: string;
+    icon: object | null;
+    iconify: string | null;
+    isNew: boolean;
+    name: string;
+    url: string;
+}
+interface dataType {
+    href: string;
+    external?: boolean;
+    icon: object | null;
+    iconify: string | null;
+    name: string;
+    slug: string;
+    redDot: [
+        {
+            start: string;
+            end: string;
+        }
+    ];
+    children: [
+        {
+            href: string;
+            external: boolean;
+            icon: string;
+            iconify: string | null;
+            name: string;
+            slug: string;
+            redDot: [
+                {
+                    start: string;
+                    end: string;
+                }
+            ];
+        }
+    ];
+}
+interface DataSideBarLink {
+    feature: dataType[];
+    category: dataType[];
+}
+export declare class KompasMenuSideBar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    dataExternal: DataExternalLink[];
+    connectedCallback(): Promise<void>;
+    handleFetchError(error: unknown): void;
+    dataSidebar: DataSideBarLink;
+    fetchExternal(): Promise<void>;
+    renderChips(): import("lit").TemplateResult<1>[];
+    hasChildren(item: any): boolean;
+    rubricClicked(item: {
+        name: string;
+        href?: string;
+    }, event?: Event): void;
+    private expandedSlug;
+    private toggleChildren;
+    private showNavBar;
+    toggleNavSidebar: (e: Event) => void;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.js

@@ -0,0 +1,479 @@
+import { __decorate } from "tslib";
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { html, css, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { decodeSpecialChars } from '../../utils/decodeSpecialChars.js';
+import { timedContent } from '../../utils/timedContent.js';
+let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dataExternal = [];
+        this.dataSidebar = {
+            feature: [],
+            category: [],
+        };
+        this.expandedSlug = null;
+        this.showNavBar = false;
+        this.toggleNavSidebar = (e) => {
+            e.stopPropagation(); // prevent bubbling
+            this.showNavBar = !this.showNavBar;
+        };
+    }
+    // @property({ type: Array }) dataSidebar: DataSideBarLink[] = []
+    async connectedCallback() {
+        super.connectedCallback();
+        try {
+            await this.fetchExternal();
+        }
+        catch (error) {
+            this.handleFetchError(error);
+        }
+    }
+    handleFetchError(error) {
+        const errorMessage = error instanceof Error ? error.message : 'Kesalahan tidak diketahui';
+        alert(`Terjadi kesalahan: ${errorMessage}`);
+    }
+    async fetchExternal() {
+        var _a, _b;
+        // External
+        const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`;
+        const response = await fetch(endpointExternal, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        const resultExternal = await response.json();
+        // eslint-disable-next-line no-undef
+        if (!resultExternal || !Array.isArray(resultExternal)) {
+            console.error('Error: resultExternal.result is undefined or not an array', resultExternal);
+            this.dataExternal = []; // Ensure dataExternal is an empty array instead of undefined
+        }
+        else {
+            this.dataExternal = resultExternal.map((externalLink) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                return ({
+                    external: (_a = externalLink.external) !== null && _a !== void 0 ? _a : false,
+                    gtmClass: (_b = externalLink.gtmClass) !== null && _b !== void 0 ? _b : '',
+                    icon: (_c = externalLink.icon) !== null && _c !== void 0 ? _c : null,
+                    iconify: (_d = externalLink.iconify) !== null && _d !== void 0 ? _d : null,
+                    isNew: (_e = externalLink.isNew) !== null && _e !== void 0 ? _e : false,
+                    name: (_f = externalLink.name) !== null && _f !== void 0 ? _f : '',
+                    url: (_g = externalLink.url) !== null && _g !== void 0 ? _g : '',
+                });
+            });
+        }
+        // Sidebar
+        const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`;
+        const responseSidebar = await fetch(endpointSidebar, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        const resultSidebar = await responseSidebar.json();
+        // Validate the structure of the response
+        if (!resultSidebar || typeof resultSidebar !== 'object') {
+            console.error('Invalid response format:', resultSidebar);
+            return;
+        }
+        // Convert object to an array
+        const sidebarArray = Object.values(resultSidebar);
+        const [featureArray, categoryArray] = sidebarArray;
+        const features = (_a = featureArray === null || featureArray === void 0 ? void 0 : featureArray.map((item) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            return ({
+                href: (_a = item === null || item === void 0 ? void 0 : item.href) !== null && _a !== void 0 ? _a : '',
+                external: (_b = item === null || item === void 0 ? void 0 : item.external) !== null && _b !== void 0 ? _b : false,
+                icon: (_c = item === null || item === void 0 ? void 0 : item.icon) !== null && _c !== void 0 ? _c : null,
+                iconify: (_d = item === null || item === void 0 ? void 0 : item.iconify) !== null && _d !== void 0 ? _d : null,
+                name: (_e = item === null || item === void 0 ? void 0 : item.name) !== null && _e !== void 0 ? _e : '',
+                slug: (_f = item === null || item === void 0 ? void 0 : item.slug) !== null && _f !== void 0 ? _f : '',
+                redDot: [
+                    {
+                        start: (_h = (_g = item === null || item === void 0 ? void 0 : item.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
+                        end: (_k = (_j = item === null || item === void 0 ? void 0 : item.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
+                    },
+                ],
+                children: Array.isArray(item === null || item === void 0 ? void 0 : item.children)
+                    ? item.children.map((child) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                        return ({
+                            href: (_a = child === null || child === void 0 ? void 0 : child.href) !== null && _a !== void 0 ? _a : '',
+                            external: (_b = child === null || child === void 0 ? void 0 : child.external) !== null && _b !== void 0 ? _b : false,
+                            icon: (_c = child === null || child === void 0 ? void 0 : child.icon) !== null && _c !== void 0 ? _c : '',
+                            iconify: (_d = child === null || child === void 0 ? void 0 : child.iconify) !== null && _d !== void 0 ? _d : '',
+                            name: (_e = child === null || child === void 0 ? void 0 : child.name) !== null && _e !== void 0 ? _e : '',
+                            slug: (_f = child === null || child === void 0 ? void 0 : child.slug) !== null && _f !== void 0 ? _f : '',
+                            redDot: [
+                                {
+                                    start: (_h = (_g = child === null || child === void 0 ? void 0 : child.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
+                                    end: (_k = (_j = child === null || child === void 0 ? void 0 : child.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
+                                },
+                            ],
+                        });
+                    })
+                    : [],
+            });
+        })) !== null && _a !== void 0 ? _a : [];
+        // Map category data
+        const categories = (_b = categoryArray === null || categoryArray === void 0 ? void 0 : categoryArray.map((item) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            return ({
+                href: (_a = item === null || item === void 0 ? void 0 : item.href) !== null && _a !== void 0 ? _a : '',
+                external: (_b = item === null || item === void 0 ? void 0 : item.external) !== null && _b !== void 0 ? _b : false,
+                icon: (_c = item === null || item === void 0 ? void 0 : item.icon) !== null && _c !== void 0 ? _c : null,
+                iconify: (_d = item === null || item === void 0 ? void 0 : item.iconify) !== null && _d !== void 0 ? _d : null,
+                name: (_e = item === null || item === void 0 ? void 0 : item.name) !== null && _e !== void 0 ? _e : '',
+                slug: (_f = item === null || item === void 0 ? void 0 : item.slug) !== null && _f !== void 0 ? _f : '',
+                redDot: [
+                    {
+                        start: (_h = (_g = item === null || item === void 0 ? void 0 : item.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
+                        end: (_k = (_j = item === null || item === void 0 ? void 0 : item.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
+                    },
+                ],
+                children: Array.isArray(item === null || item === void 0 ? void 0 : item.children)
+                    ? item.children.map((child) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                        return ({
+                            href: (_a = child === null || child === void 0 ? void 0 : child.href) !== null && _a !== void 0 ? _a : '',
+                            external: (_b = child === null || child === void 0 ? void 0 : child.external) !== null && _b !== void 0 ? _b : false,
+                            icon: (_c = child === null || child === void 0 ? void 0 : child.icon) !== null && _c !== void 0 ? _c : '',
+                            iconify: (_d = child === null || child === void 0 ? void 0 : child.iconify) !== null && _d !== void 0 ? _d : '',
+                            name: (_e = child === null || child === void 0 ? void 0 : child.name) !== null && _e !== void 0 ? _e : '',
+                            slug: (_f = child === null || child === void 0 ? void 0 : child.slug) !== null && _f !== void 0 ? _f : '',
+                            redDot: [
+                                {
+                                    start: (_h = (_g = child === null || child === void 0 ? void 0 : child.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
+                                    end: (_k = (_j = child === null || child === void 0 ? void 0 : child.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
+                                },
+                            ],
+                        });
+                    })
+                    : [],
+            });
+        })) !== null && _b !== void 0 ? _b : [];
+        this.dataSidebar = { feature: features, category: categories };
+        this.requestUpdate();
+    }
+    renderChips() {
+        const chips = [];
+        chips.push(html `
+        <div class="flex">
+          <div
+            class="py-1 px-2 rounded text-xs"
+            style="position: absolute; top: -22px; right: -24px; display: inline-flex; background-color:#D71920;"
+          >
+            <span class="font-normal text-white capitalize">Baru</span>
+          </div>
+        </div>
+      `);
+        return chips;
+    }
+    hasChildren(item) {
+        return Array.isArray(item === null || item === void 0 ? void 0 : item.children) && item.children.length > 0;
+    }
+    rubricClicked(item, event) {
+        if (event) {
+            event.stopPropagation(); // Prevent parent click event
+        }
+        if (item.href) {
+            window.location.href = item.href;
+        }
+        // add data layer here
+    }
+    toggleChildren(item) {
+        this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug;
+    }
+    render() {
+        return html `
+      <!-- Button Menu -->
+      <div
+        class="w-fit flex items-center justify-center cursor-pointer relative"
+        @click=${this.toggleNavSidebar}
+      >
+        <div class="h-4 inline-flex text-brand-1">
+          ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
+        </div>
+        <span
+          class="font-sans hidden sm:inline ml-2 tracking-wide text-brand-1 font-bold"
+          >Menu</span
+        >
+      </div>
+      <!-- Side Menu -->
+      <nav
+        @click=${this.toggleNavSidebar}
+        class=${this.showNavBar
+            ? 'fixed left-0 top-0 w-screen z-[100]'
+            : 'hidden'}
+      >
+        <div
+          ref="toggle-nav-sidebar"
+          class="bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg"
+          style="width: 312px;"
+        >
+          <div
+            class="bg-[#e1f0ff] flex flex-col items-center justify-center mb-6 w-full"
+          >
+            <div
+              ref="logo-kompas"
+              class="flex items-center justify-between px-4 py-6 w-full"
+            >
+              <a href="/" class="flex h-9 w-9">
+                <img
+                  src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon.svg"
+                  alt="Kompas.id"
+                  scale="0"
+                  class="block w-full"
+                />
+              </a>
+              <span
+                class="bg-[#93c8fd] cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 p-4"
+                @click=${this.toggleNavSidebar}
+              >
+                ${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}
+              </span>
+            </div>
+            <div class="flex flex-wrap px-4 w-full">
+              ${this.dataExternal.map(item => html `
+                  <a href="${item.url}" class="block w-1/2 no-underline">
+                    <div class="cursor-pointer flex items-center pb-6 w-full">
+                      <div class="flex mr-2">
+                        ${item.icon &&
+            Array.isArray(item.icon) &&
+            item.icon.length >= 2
+            ? unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))
+            : ''}
+                      </div>
+                      <span class="font-sans relative text-sm text-brand-1">
+                        ${item.name} ${item.isNew ? this.renderChips() : ''}
+                      </span>
+                    </div>
+                  </a>
+                `)}
+            </div>
+          </div>
+          <!-- feature -->
+          <div class="flex">
+            <div class="flex justify-between flex-col">
+              ${this.dataSidebar.feature.map(item => html `
+                  <div class="w-full font-sans">
+                    <!-- Parent item -->
+                    <div
+                      class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
+                      @click=${(e) => this.rubricClicked(item, e)}
+                    >
+                      <div
+                        class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
+                      >
+                        <div class="flex items-center space-x-3">
+                          <span
+                            class="text-xl text-brand-1 w-8 h-8 flex items-center"
+                          >
+                            ${item.icon &&
+            Array.isArray(item.icon) &&
+            item.icon.length >= 2
+            ? unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))
+            : ''}
+                          </span>
+                          <span class="font-bold relative text-[#333] w-full"
+                            >${decodeSpecialChars(item.name)}</span
+                          >
+                          ${timedContent(item.redDot[0].start, item.redDot[0].end)
+            ? html `<span
+                                class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                              ></span>`
+            : ''}
+                        </div>
+                      </div>
+
+                      <!-- Toggle chevron -->
+                      ${this.hasChildren(item)
+            ? html `
+                            <span
+                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
+                              @click=${(e) => {
+                e.stopPropagation(); // Prevents click from bubbling to parent
+                this.toggleChildren(item);
+            }}
+                            >
+                              ${this.expandedSlug === item.slug
+                ? unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))
+                : unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+                            </span>
+                          `
+            : null}
+                    </div>
+
+                    <!-- Children items -->
+                    ${this.hasChildren(item) && this.expandedSlug === item.slug
+            ? html `
+                          <div class="pl-14 pt-1 pb-2 space-y-1">
+                            ${item.children.map(child => html `
+                                <div
+                                  class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
+                                  @click=${() => this.rubricClicked(child)}
+                                >
+                                  <div
+                                    class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
+                                  >
+                                    ${decodeSpecialChars(child.name)}
+                                    ${timedContent(child.redDot[0].start, child.redDot[0].end)
+                ? html `<span
+                                          class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                        ></span>`
+                : ''}
+                                    <div></div>
+                                  </div>
+                                </div>
+                              `)}
+                          </div>
+                        `
+            : ''}
+                  </div>
+                `)}
+            </div>
+          </div>
+          <div class="border-b border-[#DDD] m-6 "></div>
+          <!-- category -->
+          <div class="flex">
+            <div class="w-full flex justify-between flex-col">
+              ${this.dataSidebar.category.map(item => html `
+                  <div class="w-full font-sans">
+                    <!-- Parent item -->
+                    <div
+                      class="flex items-center justify-between text-sm font-medium text-gray-700 px-4 transition-all cursor-pointer"
+                      @click=${(e) => this.rubricClicked(item, e)}
+                    >
+                      <div
+                        class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
+                      >
+                        <div class="flex items-center space-x-3">
+                          <span
+                            class="text-xl text-brand-1 w-8 h-8 flex items-center"
+                          >
+                            ${item.icon &&
+            Array.isArray(item.icon) &&
+            item.icon.length >= 2
+            ? unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))
+            : ''}
+                          </span>
+                          <span
+                            class="font-bold ${item.name === 'Beranda'
+            ? 'text-[#00559a]'
+            : 'text-[#333] w-full'}"
+                            >${decodeSpecialChars(item.name)}</span
+                          >
+
+                          ${timedContent(item.redDot[0].start, item.redDot[0].end)
+            ? html `<span
+                                class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                              ></span>`
+            : ''}
+                        </div>
+                      </div>
+
+                      <!-- Toggle chevron -->
+                      ${this.hasChildren(item)
+            ? html `
+                            <span
+                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
+                              @click=${(e) => {
+                e.stopPropagation(); // Prevents click from bubbling to parent
+                this.toggleChildren(item);
+            }}
+                            >
+                              ${this.expandedSlug === item.slug
+                ? unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))
+                : unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+                            </span>
+                          `
+            : null}
+                    </div>
+
+                    <!-- Children items -->
+                    ${this.hasChildren(item) && this.expandedSlug === item.slug
+            ? html `
+                          <div class="pt-1 pb-2 space-y-1">
+                            ${item.children.map(child => html `
+                                <div
+                                  class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
+                                  @click=${() => this.rubricClicked(child)}
+                                >
+                                  <div
+                                    class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
+                                  >
+                                    ${decodeSpecialChars(child.name)}
+                                    ${timedContent(child.redDot[0].start, child.redDot[0].end)
+                ? html `<span
+                                          class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                        ></span>`
+                : ''}
+                                  </div>
+                                </div>
+                              `)}
+                          </div>
+                        `
+            : ''}
+                  </div>
+                `)}
+            </div>
+          </div>
+        </div>
+      </nav>
+    `;
+    }
+};
+KompasMenuSideBar.styles = [
+    css `
+      .slide-side-enter-active,
+      .slide-side-leave-active {
+        transition: all 0.3s ease-out;
+      }
+      .slide-side-enter,
+      .slide-side-leave-to {
+        transform: translateX(-100%);
+      }
+      /* end: transisi buat sidebar */
+      .nuxt-link-exact-active {
+        @apply text-brand-1;
+      }
+      .menu-menu-sidebar {
+        z-index: 99999;
+      }
+      /* Force scrollbar to always show (for debugging) */
+      .menu-menu-sidebar::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      .menu-menu-sidebar::-webkit-scrollbar-track {
+        background: white;
+      }
+
+      .menu-menu-sidebar::-webkit-scrollbar-thumb {
+        background-color: #00557d; /* Replace with your brand color */
+        border-radius: 8px;
+      }
+
+      .menu-menu-sidebar::-webkit-scrollbar-button,
+      .menu-menu-sidebar::-webkit-scrollbar-corner {
+        background-color: white;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: Array })
+], KompasMenuSideBar.prototype, "dataExternal", void 0);
+__decorate([
+    state()
+], KompasMenuSideBar.prototype, "expandedSlug", void 0);
+__decorate([
+    state()
+], KompasMenuSideBar.prototype, "showNavBar", void 0);
+KompasMenuSideBar = __decorate([
+    customElement('kompasid-menu-side-bar')
+], KompasMenuSideBar);
+export { KompasMenuSideBar };
+//# sourceMappingURL=KompasMenuSideBar.js.map

package/dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-sidebar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\ninterface DataExternalLink {\n  external?: boolean\n  gtmClass?: string\n  icon: object | null\n  iconify: string | null\n  isNew: boolean\n  name: string\n  url: string\n}\n\ninterface dataType {\n  href: string\n  external?: boolean\n  icon: object | null\n  iconify: string | null\n  name: string\n  slug: string\n  redDot: [\n    {\n      start: string\n      end: string\n    }\n  ]\n  children: [\n    {\n      href: string\n      external: boolean\n      icon: string\n      iconify: string | null\n      name: string\n      slug: string\n      redDot: [\n        {\n          start: string\n          end: string\n        }\n      ]\n    }\n  ]\n}\ninterface DataSideBarLink {\n  feature: dataType[]\n  category: dataType[]\n}\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n  static styles = [\n    css`\n      .slide-side-enter-active,\n      .slide-side-leave-active {\n        transition: all 0.3s ease-out;\n      }\n      .slide-side-enter,\n      .slide-side-leave-to {\n        transform: translateX(-100%);\n      }\n      /* end: transisi buat sidebar */\n      .nuxt-link-exact-active {\n        @apply text-brand-1;\n      }\n      .menu-menu-sidebar {\n        z-index: 99999;\n      }\n      /* Force scrollbar to always show (for debugging) */\n      .menu-menu-sidebar::-webkit-scrollbar {\n        width: 4px;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-track {\n        background: white;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-thumb {\n        background-color: #00557d; /* Replace with your brand color */\n        border-radius: 8px;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-button,\n      .menu-menu-sidebar::-webkit-scrollbar-corner {\n        background-color: white;\n      }\n    `,\n    TWStyles,\n  ]\n  @property({ type: Array }) dataExternal: DataExternalLink[] = []\n  // @property({ type: Array }) dataSidebar: DataSideBarLink[] = []\n\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchExternal()\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  dataSidebar: DataSideBarLink = {\n    feature: [],\n    category: [],\n  }\n  async fetchExternal() {\n    // External\n    const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`\n    const response = await fetch(endpointExternal, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n    const resultExternal = await response.json()\n    // eslint-disable-next-line no-undef\n    if (!resultExternal || !Array.isArray(resultExternal)) {\n      console.error(\n        'Error: resultExternal.result is undefined or not an array',\n        resultExternal\n      )\n      this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined\n    } else {\n      this.dataExternal = resultExternal.map(\n        (externalLink: Partial<DataExternalLink>) => ({\n          external: externalLink.external ?? false,\n          gtmClass: externalLink.gtmClass ?? '',\n          icon: externalLink.icon ?? null,\n          iconify: externalLink.iconify ?? null,\n          isNew: externalLink.isNew ?? false,\n          name: externalLink.name ?? '',\n          url: externalLink.url ?? '',\n        })\n      )\n    }\n    // Sidebar\n    const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`\n    const responseSidebar = await fetch(endpointSidebar, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n    const resultSidebar = await responseSidebar.json()\n    // Validate the structure of the response\n    if (!resultSidebar || typeof resultSidebar !== 'object') {\n      console.error('Invalid response format:', resultSidebar)\n      return\n    }\n\n    // Convert object to an array\n    const sidebarArray = Object.values(resultSidebar)\n    const [featureArray, categoryArray] = sidebarArray as [any[], any[]]\n    const features: dataType[] =\n      featureArray?.map((item: any) => ({\n        href: item?.href ?? '',\n        external: item?.external ?? false,\n        icon: item?.icon ?? null,\n        iconify: item?.iconify ?? null,\n        name: item?.name ?? '',\n        slug: item?.slug ?? '',\n        redDot: [\n          {\n            start: item?.redDot?.start ?? '',\n            end: item?.redDot?.end ?? '',\n          },\n        ],\n        children: Array.isArray(item?.children)\n          ? item.children.map((child: any) => ({\n              href: child?.href ?? '',\n              external: child?.external ?? false,\n              icon: child?.icon ?? '',\n              iconify: child?.iconify ?? '',\n              name: child?.name ?? '',\n              slug: child?.slug ?? '',\n              redDot: [\n                {\n                  start: child?.redDot?.start ?? '',\n                  end: child?.redDot?.end ?? '',\n                },\n              ],\n            }))\n          : [],\n      })) ?? []\n\n    // Map category data\n    const categories: dataType[] =\n      categoryArray?.map((item: any) => ({\n        href: item?.href ?? '',\n        external: item?.external ?? false,\n        icon: item?.icon ?? null,\n        iconify: item?.iconify ?? null,\n        name: item?.name ?? '',\n        slug: item?.slug ?? '',\n        redDot: [\n          {\n            start: item?.redDot?.start ?? '',\n            end: item?.redDot?.end ?? '',\n          },\n        ],\n        children: Array.isArray(item?.children)\n          ? item.children.map((child: any) => ({\n              href: child?.href ?? '',\n              external: child?.external ?? false,\n              icon: child?.icon ?? '',\n              iconify: child?.iconify ?? '',\n              name: child?.name ?? '',\n              slug: child?.slug ?? '',\n              redDot: [\n                {\n                  start: child?.redDot?.start ?? '',\n                  end: child?.redDot?.end ?? '',\n                },\n              ],\n            }))\n          : [],\n      })) ?? []\n    this.dataSidebar = { feature: features, category: categories }\n    this.requestUpdate()\n  }\n\n  renderChips() {\n    const chips = []\n    chips.push(\n      html`\n        <div class=\"flex\">\n          <div\n            class=\"py-1 px-2 rounded text-xs\"\n            style=\"position: absolute; top: -22px; right: -24px; display: inline-flex; background-color:#D71920;\"\n          >\n            <span class=\"font-normal text-white capitalize\">Baru</span>\n          </div>\n        </div>\n      `\n    )\n    return chips\n  }\n\n  hasChildren(item: any): boolean {\n    return Array.isArray(item?.children) && item.children.length > 0\n  }\n\n  rubricClicked(item: { name: string; href?: string }, event?: Event): void {\n    if (event) {\n      event.stopPropagation() // Prevent parent click event\n    }\n    if (item.href) {\n      window.location.href = item.href\n    }\n\n    // add data layer here\n  }\n\n  @state()\n  private expandedSlug: string | null = null\n  private toggleChildren(item: any) {\n    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n  }\n\n  @state()\n  private showNavBar: boolean = false\n\n  toggleNavSidebar = (e: Event) => {\n    e.stopPropagation() // prevent bubbling\n    this.showNavBar = !this.showNavBar\n  }\n\n  render() {\n    return html`\n      <!-- Button Menu -->\n      <div\n        class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n        @click=${this.toggleNavSidebar}\n      >\n        <div class=\"h-4 inline-flex text-brand-1\">\n          ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n        </div>\n        <span\n          class=\"font-sans hidden sm:inline ml-2 tracking-wide text-brand-1 font-bold\"\n          >Menu</span\n        >\n      </div>\n      <!-- Side Menu -->\n      <nav\n        @click=${this.toggleNavSidebar}\n        class=${this.showNavBar\n          ? 'fixed left-0 top-0 w-screen z-[100]'\n          : 'hidden'}\n      >\n        <div\n          ref=\"toggle-nav-sidebar\"\n          class=\"bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg\"\n          style=\"width: 312px;\"\n        >\n          <div\n            class=\"bg-[#e1f0ff] flex flex-col items-center justify-center mb-6 w-full\"\n          >\n            <div\n              ref=\"logo-kompas\"\n              class=\"flex items-center justify-between px-4 py-6 w-full\"\n            >\n              <a href=\"/\" class=\"flex h-9 w-9\">\n                <img\n                  src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon.svg\"\n                  alt=\"Kompas.id\"\n                  scale=\"0\"\n                  class=\"block w-full\"\n                />\n              </a>\n              <span\n                class=\"bg-[#93c8fd] cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 p-4\"\n                @click=${this.toggleNavSidebar}\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}\n              </span>\n            </div>\n            <div class=\"flex flex-wrap px-4 w-full\">\n              ${this.dataExternal.map(\n                item => html`\n                  <a href=\"${item.url}\" class=\"block w-1/2 no-underline\">\n                    <div class=\"cursor-pointer flex items-center pb-6 w-full\">\n                      <div class=\"flex mr-2\">\n                        ${item.icon &&\n                        Array.isArray(item.icon) &&\n                        item.icon.length >= 2\n                          ? unsafeSVG(\n                              getFontAwesomeIcon(item.icon[0], item.icon[1])\n                            )\n                          : ''}\n                      </div>\n                      <span class=\"font-sans relative text-sm text-brand-1\">\n                        ${item.name} ${item.isNew ? this.renderChips() : ''}\n                      </span>\n                    </div>\n                  </a>\n                `\n              )}\n            </div>\n          </div>\n          <!-- feature -->\n          <div class=\"flex\">\n            <div class=\"flex justify-between flex-col\">\n              ${this.dataSidebar.feature.map(\n                item => html`\n                  <div class=\"w-full font-sans\">\n                    <!-- Parent item -->\n                    <div\n                      class=\"flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer\"\n                      @click=${(e: Event) => this.rubricClicked(item, e)}\n                    >\n                      <div\n                        class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n                      >\n                        <div class=\"flex items-center space-x-3\">\n                          <span\n                            class=\"text-xl text-brand-1 w-8 h-8 flex items-center\"\n                          >\n                            ${item.icon &&\n                            Array.isArray(item.icon) &&\n                            item.icon.length >= 2\n                              ? unsafeSVG(\n                                  getFontAwesomeIcon(item.icon[0], item.icon[1])\n                                )\n                              : ''}\n                          </span>\n                          <span class=\"font-bold relative text-[#333] w-full\"\n                            >${decodeSpecialChars(item.name)}</span\n                          >\n                          ${timedContent(\n                            item.redDot[0].start,\n                            item.redDot[0].end\n                          )\n                            ? html`<span\n                                class=\"bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]\"\n                              ></span>`\n                            : ''}\n                        </div>\n                      </div>\n\n                      <!-- Toggle chevron -->\n                      ${this.hasChildren(item)\n                        ? html`\n                            <span\n                              class=\"text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer\"\n                              @click=${(e: Event) => {\n                                e.stopPropagation() // Prevents click from bubbling to parent\n                                this.toggleChildren(item)\n                              }}\n                            >\n                              ${this.expandedSlug === item.slug\n                                ? unsafeSVG(\n                                    getFontAwesomeIcon('fas', 'chevron-up')\n                                  )\n                                : unsafeSVG(\n                                    getFontAwesomeIcon('fas', 'chevron-down')\n                                  )}\n                            </span>\n                          `\n                        : null}\n                    </div>\n\n                    <!-- Children items -->\n                    ${this.hasChildren(item) && this.expandedSlug === item.slug\n                      ? html`\n                          <div class=\"pl-14 pt-1 pb-2 space-y-1\">\n                            ${item.children.map(\n                              child => html`\n                                <div\n                                  class=\"flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all\"\n                                  @click=${() => this.rubricClicked(child)}\n                                >\n                                  <div\n                                    class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n                                  >\n                                    ${decodeSpecialChars(child.name)}\n                                    ${timedContent(\n                                      child.redDot[0].start,\n                                      child.redDot[0].end\n                                    )\n                                      ? html`<span\n                                          class=\"bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]\"\n                                        ></span>`\n                                      : ''}\n                                    <div></div>\n                                  </div>\n                                </div>\n                              `\n                            )}\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n          <div class=\"border-b border-[#DDD] m-6 \"></div>\n          <!-- category -->\n          <div class=\"flex\">\n            <div class=\"w-full flex justify-between flex-col\">\n              ${this.dataSidebar.category.map(\n                item => html`\n                  <div class=\"w-full font-sans\">\n                    <!-- Parent item -->\n                    <div\n                      class=\"flex items-center justify-between text-sm font-medium text-gray-700 px-4 transition-all cursor-pointer\"\n                      @click=${(e: Event) => this.rubricClicked(item, e)}\n                    >\n                      <div\n                        class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n                      >\n                        <div class=\"flex items-center space-x-3\">\n                          <span\n                            class=\"text-xl text-brand-1 w-8 h-8 flex items-center\"\n                          >\n                            ${item.icon &&\n                            Array.isArray(item.icon) &&\n                            item.icon.length >= 2\n                              ? unsafeSVG(\n                                  getFontAwesomeIcon(item.icon[0], item.icon[1])\n                                )\n                              : ''}\n                          </span>\n                          <span\n                            class=\"font-bold ${item.name === 'Beranda'\n                              ? 'text-[#00559a]'\n                              : 'text-[#333] w-full'}\"\n                            >${decodeSpecialChars(item.name)}</span\n                          >\n\n                          ${timedContent(\n                            item.redDot[0].start,\n                            item.redDot[0].end\n                          )\n                            ? html`<span\n                                class=\"bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]\"\n                              ></span>`\n                            : ''}\n                        </div>\n                      </div>\n\n                      <!-- Toggle chevron -->\n                      ${this.hasChildren(item)\n                        ? html`\n                            <span\n                              class=\"text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer\"\n                              @click=${(e: Event) => {\n                                e.stopPropagation() // Prevents click from bubbling to parent\n                                this.toggleChildren(item)\n                              }}\n                            >\n                              ${this.expandedSlug === item.slug\n                                ? unsafeSVG(\n                                    getFontAwesomeIcon('fas', 'chevron-up')\n                                  )\n                                : unsafeSVG(\n                                    getFontAwesomeIcon('fas', 'chevron-down')\n                                  )}\n                            </span>\n                          `\n                        : null}\n                    </div>\n\n                    <!-- Children items -->\n                    ${this.hasChildren(item) && this.expandedSlug === item.slug\n                      ? html`\n                          <div class=\"pt-1 pb-2 space-y-1\">\n                            ${item.children.map(\n                              child => html`\n                                <div\n                                  class=\"flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all\"\n                                  @click=${() => this.rubricClicked(child)}\n                                >\n                                  <div\n                                    class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n                                  >\n                                    ${decodeSpecialChars(child.name)}\n                                    ${timedContent(\n                                      child.redDot[0].start,\n                                      child.redDot[0].end\n                                    )\n                                      ? html`<span\n                                          class=\"bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]\"\n                                        ></span>`\n                                      : ''}\n                                  </div>\n                                </div>\n                              `\n                            )}\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n        </div>\n      </nav>\n    `\n  }\n}\n"]}

package/dist/src/utils/decodeSpecialChars.d.ts

@@ -0,0 +1 @@
+export declare const decodeSpecialChars: (str: string) => string;