@kompasid/lit-web-components 0.9.25 → 0.9.27

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

@@ -24,8 +24,11 @@ export declare class KompasMenuSideBar extends LitElement {
     private rubricClicked;
     private hasChildren;
     private toggleChildren;
+    private hasBundleAccess;
+    private shouldOpenDropdown;
     private renderItem;
     private renderSection;
     private renderChips;
+    private closeNavSidebar;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js

@@ -90,13 +90,18 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
         this.showNavBar = !this.showNavBar;
     }
     rubricClicked(item, event) {
-        if (event) {
-            event.stopPropagation(); // Prevent parent click event
-        }
-        if (item.href) {
+        if (event)
+            event.stopPropagation();
+        const isDropdown = this.shouldOpenDropdown(item);
+        // Kalau bukan dropdown tapi ada href, langsung redirect
+        if (!isDropdown && item.href) {
             window.location.href = item.href;
+            return;
+        }
+        // Kalau dropdown, toggle anak
+        if (isDropdown) {
+            this.toggleChildren(item);
         }
-        // add data layer here
     }
     hasChildren(item) {
         return Array.isArray(item.children) && item.children.length > 0;
@@ -104,71 +109,99 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
     toggleChildren(item) {
         this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug;
     }
+    hasBundleAccess(item) {
+        if (item.name === 'Kompas One')
+            return this.hasKompasOnePackage();
+        if (item.name === 'Kompas Pro')
+            return this.hasKompasProPackage();
+        return true; // default non-subscription bundles
+    }
+    shouldOpenDropdown(item) {
+        var _a;
+        const hasChild = ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        // 🔹 1. Parent dengan children + toExpand true
+        if (hasChild && item.toExpand) {
+            // kalau user nggak punya akses → redirect ke href
+            if (!this.hasBundleAccess(item) && item.href) {
+                return false;
+            }
+            return true; // punya akses → expand
+        }
+        // 🔹 2. Parent dengan children + tidak ada href → dropdown
+        if (hasChild && !item.href) {
+            return true;
+        }
+        // 🔹 3. Parent dengan children + toExpand false + ada href → redirect
+        if (hasChild && !item.toExpand && item.href) {
+            return false;
+        }
+        // 🔹 4. Item biasa tanpa child → redirect
+        return false;
+    }
     renderItem(item, padClass) {
         var _a, _b, _c;
         const hasChild = this.hasChildren(item);
         return html `
       <div class="w-full font-sans text-black">
         <div
-          class="flex items-center justify-between text-sm font-medium ${padClass} transition-all cursor-pointer"
-          role="button"
-          tabindex="0"
-          @click=${(e) => {
-            e.stopPropagation();
-            if (hasChild) {
-                this.toggleChildren(item);
-            }
-            else {
-                this.rubricClicked(item, e);
-            }
-        }}
-          @keydown=${(e) => {
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-                if (hasChild) {
-                    this.toggleChildren(item);
-                }
-                else {
-                    this.rubricClicked(item, e);
-                }
-            }
-        }}
+          class="flex items-center justify-between text-sm font-medium ${padClass}"
         >
+          <!-- Label / Link area -->
           <div
-            class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
+            class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
           >
-            ${item.iconSrc
+            <div
+              class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
+              role="button"
+              tabindex="0"
+              @click=${(e) => this.rubricClicked(item, e)}
+              @keydown=${(e) => {
+            if (e.key === 'Enter')
+                this.rubricClicked(item, e);
+        }}
+            >
+              ${item.iconSrc
             ? html `<div class="flex">
-                  <img
-                    src="${item.iconSrc}"
-                    alt="${item.name}"
-                    width="20"
-                    height="20"
-                    class="block"
-                  />
-                </div>`
+                    <img
+                      src="${item.iconSrc}"
+                      alt="${item.name}"
+                      width="20"
+                      height="20"
+                      class="block"
+                    />
+                  </div>`
             : ''}
-            <span class="font-bold">${decodeSpecialChars(item.name)}</span>
-            ${timedContent((_a = item.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = item.redDot.end) !== null && _b !== void 0 ? _b : '')
+              <span class="font-bold">${decodeSpecialChars(item.name)}</span>
+              ${timedContent((_a = item.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = item.redDot.end) !== null && _b !== void 0 ? _b : '')
             ? html `<span
-                  class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
-                ></span>`
+                    class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
+                  ></span>`
             : ''}
-          </div>
+            </div>
 
-          ${hasChild
+            ${hasChild
             ? html `
-                <span
-                  class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400"
-                >
-                  ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlug === item.slug
+                  <span
+                    class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400"
+                    @click=${(e) => {
+                e.stopPropagation();
+                this.toggleChildren(item); // 🚨 chevron khusus toggle
+            }}
+                    @keydown=${(e) => {
+                if (e.key === 'Enter')
+                    this.toggleChildren(item);
+            }}
+                  >
+                    ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlug === item.slug
                 ? 'chevron-up'
                 : 'chevron-down', 12, 12))}
-                </span>
-              `
+                  </span>
+                `
             : null}
+          </div>
         </div>
 
+        <!-- Children list -->
         ${hasChild && this.expandedSlug === item.slug
             ? html `<div
               class="${padClass.includes('px-6')
@@ -235,6 +268,10 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
       </div>
     `;
     }
+    closeNavSidebar() {
+        console.log('closing sidebar');
+        this.showNavBar = false;
+    }
     render() {
         return html `
       <!-- Toggle Button -->
@@ -272,12 +309,22 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
       <!-- Sidebar Menu -->
       <nav
         class=${this.showNavBar
-            ? 'fixed left-0 top-0 w-screen z-[100]'
+            ? 'fixed inset-0 z-[100] flex h-screen'
             : 'hidden'}
       >
+        <!-- Overlay -->
+        <div
+          class="absolute inset-0 bg-[#00000066]"
+          @click=${this.closeNavSidebar}
+          @keydown=${(e) => {
+            if (e.key === 'Enter')
+                this.toggleNavSidebar(e);
+        }}
+        ></div>
+
         <!-- Sidebar Content -->
         <div
-          class="bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 shadow-lg"
+          class="relative bg-white h-full menu-menu-sidebar overflow-y-auto pb-20 shadow-lg"
           style="width:312px;"
         >
           <!-- Logo and Close Button -->
@@ -300,7 +347,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                 role="button"
                 tabindex="0"
                 class="font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
-                @click=${this.toggleNavSidebar}
+                @click=${this.closeNavSidebar}
                 @keydown=${(e) => {
             if (e.key === 'Enter')
                 this.toggleNavSidebar(e);

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

@@ -1 +1 @@
-{"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAE1D,qCAAqC;AACrC,OAAO,EACL,kBAAkB,EAClB,gBAAgB,GAIjB,MAAM,4BAA4B,CAAA;AAG5B,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAsCL;;;WAGG;QAE0B,WAAM,GAAG,KAAK,CAAA;QACd,qBAAgB,GAAG,KAAK,CAAA;QACzB,wBAAmB,GAAG,EAAE,CAAA;QAE3C,iBAAY,GAAuB,EAAE,CAAA;QACrC,gBAAW,GAAoB;YACtC,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;SACZ,CAAA;QACQ,eAAU,GAAG,KAAK,CAAA;QAClB,iBAAY,GAAkB,IAAI,CAAA;QAC3C,mBAAc,GAAG,KAAK,CAAA;IAoXxB,CAAC;IAlXC,wDAAwD;IACxD,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAA;IACvB,CAAC;IAED,YAAY;;QACV,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAA;QACnD,MAAM,aAAa,GAAG,IAAK,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAE5D,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAA;IAChD,CAAC;IAEO,mBAAmB;;QACzB,OAAO,MAAA,IAAI,CAAC,mBAAmB,0CAC3B,KAAK,CAAC,GAAG,EACV,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5C,CAAC;IAEO,mBAAmB;;QACzB,OAAO,MAAA,IAAI,CAAC,mBAAmB,0CAC3B,KAAK,CAAC,GAAG,EACV,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5C,CAAC;IAEO,aAAa,CAAC,OAA0B;QAC9C,OAAO,OAAO;aACX,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;aACrB,GAAG,CAAC,CAAC,CAAC,EAAE;YACP,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;gBAC3B,OAAO;oBACL,GAAG,CAAC;oBACJ,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;iBACvD,CAAA;aACF;YACD,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;gBAC3B,OAAO;oBACL,GAAG,CAAC;oBACJ,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;iBACvD,CAAA;aACF;YACD,OAAO,CAAC,CAAA;QACV,CAAC,CAAC,CAAA;IACN,CAAC;IAED,kDAAkD;IAC1C,KAAK,CAAC,QAAQ;QACpB,IAAI;YACF,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;gBAC1C,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,CAAC;gBACzC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC;aACxC,CAAC,CAAA;YAEF,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;YAC3B,IAAI,CAAC,WAAW,GAAG;gBACjB,GAAG,MAAM;gBACT,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC;aAC5C,CAAA;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAA;SAC5C;IACH,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAA;IACpC,CAAC;IAEO,aAAa,CACnB,IAAqC,EACrC,KAAa;QAEb,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,eAAe,EAAE,CAAA,CAAC,6BAA6B;SACtD;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;SACjC;QAED,sBAAsB;IACxB,CAAC;IAEO,WAAW,CAAC,IAAqB;QACvC,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;IACjE,CAAC;IAEO,cAAc,CAAC,IAAqB;QAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAA;IACxE,CAAC;IAEO,UAAU,CAAC,IAAS,EAAE,QAAgB;;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA;;;yEAG0D,QAAQ;;;mBAG9D,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;aAC1B;iBAAM;gBACL,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;aAC5B;QACH,CAAC;qBACU,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,QAAQ,EAAE;oBACZ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;iBAC1B;qBAAM;oBACL,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;iBAC5B;aACF;QACH,CAAC;;;;;cAKG,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;2BAEO,IAAI,CAAC,OAAO;2BACZ,IAAI,CAAC,IAAI;;;;;uBAKb;YACT,CAAC,CAAC,EAAE;sCACoB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;cACrD,YAAY,CAAC,MAAA,IAAI,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE,EAAE,MAAA,IAAI,CAAC,MAAM,CAAC,GAAG,mCAAI,EAAE,CAAC;YAC5D,CAAC,CAAC,IAAI,CAAA;;yBAEK;YACX,CAAC,CAAC,EAAE;;;YAGN,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;;;;oBAIE,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI;gBAC7B,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,cAAc,EAClB,EAAE,EACF,EAAE,CACH,CACF;;eAEJ;YACH,CAAC,CAAC,IAAI;;;UAGR,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,IAAI;YAC3C,CAAC,CAAC,IAAI,CAAA;uBACO,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAChC,CAAC,CAAC,gCAAgC;gBAClC,CAAC,CAAC,sCAAsC;;gBAExC,MAAM,CACN,MAAA,IAAI,CAAC,QAAQ,mCAAI,EAAE,EACnB,CAAC,CAAkB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAC9B,CAAC,KAAsB,EAAE,EAAE;;gBAAC,OAAA,IAAI,CAAA;;;;;6BAKnB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;+BAC7B,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;wBAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;gBACrD,CAAC;;;;;wBAKG,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;wBAC9B,YAAY,CACZ,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE,EACxB,MAAA,KAAK,CAAC,MAAM,CAAC,GAAG,mCAAI,EAAE,CACvB;oBACC,CAAC,CAAC,IAAI,CAAA;;mCAEK;oBACX,CAAC,CAAC,EAAE;;;wBAGJ,KAAK,CAAC,QAAQ;oBACd,CAAC,CAAC,SAAS,CACP,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,CAAC,CACnD;oBACH,CAAC,CAAC,EAAE;;;iBAGX,CAAA;aAAA,CACF;mBACI;YACT,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB,EAAE,KAAY,EAAE,QAAgB;QACxE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA,CAAC,qBAAqB;QACnE,OAAO,IAAI,CAAA;QACP,KAAK;YACL,CAAC,CAAC,IAAI,CAAA,sCAAsC,QAAQ;eAC7C,KAAK;YACR;YACJ,CAAC,CAAC,IAAI;QACN,MAAM,CACN,KAAK,EACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CACxC;KACF,CAAA;IACH,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;iBAME,IAAI,CAAC,gBAAgB;mBACnB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC;;;UAGC,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;;yCAEyB,IAAI,CAAC,MAAM;gBAClC,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,cAAc;;kBAEhB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;;;iFAGmB,IAAI;iBAClE,MAAM;gBACP,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,cAAc;;;;aAIrB;YACH,CAAC,CAAC,EAAE;;;;gBAIE,IAAI,CAAC,UAAU;YACrB,CAAC,CAAC,qCAAqC;YACvC,CAAC,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA2BK,IAAI,CAAC,gBAAgB;2BACnB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC;;kBAEC,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;cAMxD,MAAM,CACN,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EACjB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;2BACC,IAAI,CAAC,GAAG;;sBAEb,IAAI,CAAC,IAAI;YACX,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA;4BACA,SAAS,CACT,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC/C;+BACI;YACT,CAAC,CAAC,EAAE;;yBAED,IAAI,CAAC,IAAI;;sBAEZ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,WAAW,EAAE,SAAS;YACvD,CAAC,CAAC,EAAE;;;eAGX,CACF;;YAED,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAClB,aAAa,EACb,IAAI,CAAC,WAAW,CAAC,QAAQ,EACzB,MAAM,CACP;YACC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YACpC,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;;YAGN,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;;;KAGtE,CAAA;IACH,CAAC;;AA1aM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;IACD,QAAQ;CACT,CAAA;AAO4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAe;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAAyB;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAyB;AAE3C;IAAR,KAAK,EAAE;uDAAsC;AACrC;IAAR,KAAK,EAAE;sDAKP;AACQ;IAAR,KAAK,EAAE;qDAAmB;AAClB;IAAR,KAAK,EAAE;uDAAmC;AAvDhC,iBAAiB;IAD7B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,iBAAiB,CA4a7B;SA5aY,iBAAiB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.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\n// Importing the data fetch functions\nimport {\n  fetchExternalLinks,\n  fetchSidebarData,\n  DataExternalLink,\n  DataSideBarLink,\n  DataSideBarItem,\n} from './SidebarDataController.js'\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      .menu-menu-sidebar::-webkit-scrollbar-track {\n        background: white;\n      }\n      .menu-menu-sidebar::-webkit-scrollbar-thumb {\n        background-color: #00557d; /* Replace with your brand color */\n        border-radius: 8px;\n      }\n      .menu-menu-sidebar::-webkit-scrollbar-button,\n      .menu-menu-sidebar::-webkit-scrollbar-corner {\n        background-color: white;\n      }\n      /* existing styles */\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   * property kompasProSubscription untuk menghandle apakah user sudah login atau belum\n   */\n\n  @property({ type: Boolean }) isDark = false\n  @property({ type: Boolean }) isProductionMode = false\n  @property({ type: String }) subscriptionPackage = ''\n\n  @state() dataExternal: DataExternalLink[] = []\n  @state() dataSidebar: DataSideBarLink = {\n    bundles: [],\n    feature: [],\n    category: [],\n    lainnya: [],\n  }\n  @state() showNavBar = false\n  @state() expandedSlug: string | null = null\n  hasSlotContent = false\n\n  // Fetch data when the component is connected to the DOM\n  async connectedCallback() {\n    super.connectedCallback()\n    await this.loadData()\n  }\n\n  firstUpdated() {\n    const slot = this.shadowRoot?.querySelector('slot')\n    const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n    this.hasSlotContent = assignedNodes.length > 0\n  }\n\n  private hasKompasOnePackage(): boolean {\n    return this.subscriptionPackage\n      ?.split(' ')\n      .some(pkg => pkg.includes('kompas-one'))\n  }\n\n  private hasKompasProPackage(): boolean {\n    return this.subscriptionPackage\n      ?.split(' ')\n      .some(pkg => pkg.includes('kompas-pro'))\n  }\n\n  private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {\n    return bundles\n      .filter(b => b.isShow)\n      .map(b => {\n        if (b.name === 'Kompas One') {\n          return {\n            ...b,\n            children: this.hasKompasOnePackage() ? b.children : [],\n          }\n        }\n        if (b.name === 'Kompas Pro') {\n          return {\n            ...b,\n            children: this.hasKompasProPackage() ? b.children : [],\n          }\n        }\n        return b\n      })\n  }\n\n  // Function to load the data using async API calls\n  private async loadData() {\n    try {\n      const [extData, sbData] = await Promise.all([\n        fetchExternalLinks(this.isProductionMode),\n        fetchSidebarData(this.isProductionMode),\n      ])\n\n      this.dataExternal = extData\n      this.dataSidebar = {\n        ...sbData,\n        bundles: this.filterBundles(sbData.bundles),\n      }\n    } catch (error) {\n      console.error('Error loading data:', error)\n    }\n  }\n\n  private toggleNavSidebar(e: Event) {\n    e.stopPropagation()\n    this.showNavBar = !this.showNavBar\n  }\n\n  private rubricClicked(\n    item: { name: string; href?: string },\n    event?: Event\n  ): 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  private hasChildren(item: DataSideBarItem): boolean {\n    return Array.isArray(item.children) && item.children.length > 0\n  }\n\n  private toggleChildren(item: DataSideBarItem) {\n    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n  }\n\n  private renderItem(item: any, padClass: string) {\n    const hasChild = this.hasChildren(item)\n\n    return html`\n      <div class=\"w-full font-sans text-black\">\n        <div\n          class=\"flex items-center justify-between text-sm font-medium ${padClass} transition-all cursor-pointer\"\n          role=\"button\"\n          tabindex=\"0\"\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            if (hasChild) {\n              this.toggleChildren(item)\n            } else {\n              this.rubricClicked(item, e)\n            }\n          }}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              e.stopPropagation()\n              if (hasChild) {\n                this.toggleChildren(item)\n              } else {\n                this.rubricClicked(item, e)\n              }\n            }\n          }}\n        >\n          <div\n            class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3\"\n          >\n            ${item.iconSrc\n              ? html`<div class=\"flex\">\n                  <img\n                    src=\"${item.iconSrc}\"\n                    alt=\"${item.name}\"\n                    width=\"20\"\n                    height=\"20\"\n                    class=\"block\"\n                  />\n                </div>`\n              : ''}\n            <span class=\"font-bold\">${decodeSpecialChars(item.name)}</span>\n            ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')\n              ? html`<span\n                  class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n                ></span>`\n              : ''}\n          </div>\n\n          ${hasChild\n            ? html`\n                <span\n                  class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400\"\n                >\n                  ${unsafeSVG(\n                    getFontAwesomeIcon(\n                      'fas',\n                      this.expandedSlug === item.slug\n                        ? 'chevron-up'\n                        : 'chevron-down',\n                      12,\n                      12\n                    )\n                  )}\n                </span>\n              `\n            : null}\n        </div>\n\n        ${hasChild && this.expandedSlug === item.slug\n          ? html`<div\n              class=\"${padClass.includes('px-6')\n                ? 'pt-1 pb-2 space-y-1 text-black'\n                : 'pl-14 pt-1 pb-2 space-y-1 text-black'}\"\n            >\n              ${repeat(\n                item.children ?? [],\n                (c: DataSideBarItem) => c.slug,\n                (child: DataSideBarItem) => html`\n                  <div\n                    role=\"button\"\n                    tabindex=\"0\"\n                    class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n                    @click=${() => this.rubricClicked(child)}\n                    @keydown=${(e: KeyboardEvent) => {\n                      if (e.key === 'Enter') this.rubricClicked(child, e)\n                    }}\n                  >\n                    <div\n                      class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8\"\n                    >\n                      ${decodeSpecialChars(child.name)}\n                      ${timedContent(\n                        child.redDot.start ?? '',\n                        child.redDot.end ?? ''\n                      )\n                        ? html`<span\n                            class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n                          ></span>`\n                        : ''}\n                    </div>\n                    <span class=\"ml-auto text-grey-400\">\n                      ${child.external\n                        ? unsafeSVG(\n                            getFontAwesomeIcon('fas', 'external-link', 16, 16)\n                          )\n                        : ''}\n                    </span>\n                  </div>\n                `\n              )}\n            </div>`\n          : ''}\n      </div>\n    `\n  }\n\n  private renderSection(title: string | null, items: any[], padClass: string) {\n    if (!items || items.length === 0) return null // skip if empty data\n    return html`\n      ${title\n        ? html`<span class=\"text-sm text-grey-400 ${padClass} font-normal\"\n            >${title}</span\n          >`\n        : null}\n      ${repeat(\n        items,\n        item => item.slug,\n        item => this.renderItem(item, padClass)\n      )}\n    `\n  }\n\n  private renderChips() {\n    return html`\n      <div\n        class=\"py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex\"\n        style=\"background-color:#D71920;\"\n      >\n        <span class=\"font-bold font-sans text-xs text-white capitalize\"\n          >Baru</span\n        >\n      </div>\n    `\n  }\n\n  render() {\n    return html`\n      <!-- Toggle Button -->\n      <div\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n        @click=${this.toggleNavSidebar}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') this.toggleNavSidebar(e)\n        }}\n      >\n        <slot></slot>\n        ${!this.hasSlotContent\n          ? html`\n              <div\n                class=\"h-4 inline-flex ${this.isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n              </div>\n              <span\n                class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n                  .isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                Menu\n              </span>\n            `\n          : ''}\n      </div>\n      <!-- Sidebar Menu -->\n      <nav\n        class=${this.showNavBar\n          ? 'fixed left-0 top-0 w-screen z-[100]'\n          : 'hidden'}\n      >\n        <!-- Sidebar Content -->\n        <div\n          class=\"bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 shadow-lg\"\n          style=\"width:312px;\"\n        >\n          <!-- Logo and Close Button -->\n          <div\n            class=\"bg-[#FFFFFF] flex flex-col items-center justify-center w-full\"\n          >\n            <div\n              ref=\"logo-kompas\"\n              class=\"flex items-center justify-between p-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-gold.svg\"\n                  alt=\"Kompas.id\"\n                  scale=\"0\"\n                  class=\"block w-full\"\n                />\n              </a>\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n                @click=${this.toggleNavSidebar}\n                @keydown=${(e: KeyboardEvent) => {\n                  if (e.key === 'Enter') this.toggleNavSidebar(e)\n                }}\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n              </span>\n            </div>\n          </div>\n          <!-- External Links -->\n          <div class=\"flex flex-wrap px-6\">\n            ${repeat(\n              this.dataExternal,\n              item => item.name,\n              item => html`\n                <a href=\"${item.url}\" class=\"flex w-1/2 no-underline px-2\">\n                  <div class=\"cursor-pointer flex items-center pb-4\">\n                    ${item.icon &&\n                    Array.isArray(item.icon) &&\n                    item.icon.length >= 2\n                      ? html`<div class=\"flex mr-2 text-brand-1\">\n                          ${unsafeSVG(\n                            getFontAwesomeIcon(item.icon[0], item.icon[1])\n                          )}\n                        </div>`\n                      : ''}\n                    <span class=\"font-sans text-xs text-[#666666]\"\n                      >${item.name}</span\n                    >\n                    ${item.isNew\n                      ? html`<span class=\"ml-1\">${this.renderChips()}</span>`\n                      : ''}\n                  </div>\n                </a>\n              `\n            )}\n          </div>\n          ${this.dataExternal.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Bundle Section -->\n          ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}\n          ${this.dataSidebar.bundles.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Feature Section -->\n          ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}\n          ${this.dataSidebar.feature.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Category (Redaksional) -->\n          ${this.renderSection(\n            'Redaksional',\n            this.dataSidebar.category,\n            'px-6'\n          )}\n          ${this.dataSidebar.category.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Others (Lainnya) -->\n          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}\n        </div>\n      </nav>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.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\n// Importing the data fetch functions\nimport {\n  fetchExternalLinks,\n  fetchSidebarData,\n  DataExternalLink,\n  DataSideBarLink,\n  DataSideBarItem,\n} from './SidebarDataController.js'\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      .menu-menu-sidebar::-webkit-scrollbar-track {\n        background: white;\n      }\n      .menu-menu-sidebar::-webkit-scrollbar-thumb {\n        background-color: #00557d; /* Replace with your brand color */\n        border-radius: 8px;\n      }\n      .menu-menu-sidebar::-webkit-scrollbar-button,\n      .menu-menu-sidebar::-webkit-scrollbar-corner {\n        background-color: white;\n      }\n      /* existing styles */\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   * property kompasProSubscription untuk menghandle apakah user sudah login atau belum\n   */\n\n  @property({ type: Boolean }) isDark = false\n  @property({ type: Boolean }) isProductionMode = false\n  @property({ type: String }) subscriptionPackage = ''\n\n  @state() dataExternal: DataExternalLink[] = []\n  @state() dataSidebar: DataSideBarLink = {\n    bundles: [],\n    feature: [],\n    category: [],\n    lainnya: [],\n  }\n  @state() showNavBar = false\n  @state() expandedSlug: string | null = null\n  hasSlotContent = false\n\n  // Fetch data when the component is connected to the DOM\n  async connectedCallback() {\n    super.connectedCallback()\n    await this.loadData()\n  }\n\n  firstUpdated() {\n    const slot = this.shadowRoot?.querySelector('slot')\n    const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n    this.hasSlotContent = assignedNodes.length > 0\n  }\n\n  private hasKompasOnePackage(): boolean {\n    return this.subscriptionPackage\n      ?.split(' ')\n      .some(pkg => pkg.includes('kompas-one'))\n  }\n\n  private hasKompasProPackage(): boolean {\n    return this.subscriptionPackage\n      ?.split(' ')\n      .some(pkg => pkg.includes('kompas-pro'))\n  }\n\n  private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {\n    return bundles\n      .filter(b => b.isShow)\n      .map(b => {\n        if (b.name === 'Kompas One') {\n          return {\n            ...b,\n            children: this.hasKompasOnePackage() ? b.children : [],\n          }\n        }\n        if (b.name === 'Kompas Pro') {\n          return {\n            ...b,\n            children: this.hasKompasProPackage() ? b.children : [],\n          }\n        }\n        return b\n      })\n  }\n\n  // Function to load the data using async API calls\n  private async loadData() {\n    try {\n      const [extData, sbData] = await Promise.all([\n        fetchExternalLinks(this.isProductionMode),\n        fetchSidebarData(this.isProductionMode),\n      ])\n\n      this.dataExternal = extData\n      this.dataSidebar = {\n        ...sbData,\n        bundles: this.filterBundles(sbData.bundles),\n      }\n    } catch (error) {\n      console.error('Error loading data:', error)\n    }\n  }\n\n  private toggleNavSidebar(e: Event) {\n    e.stopPropagation()\n    this.showNavBar = !this.showNavBar\n  }\n\n  private rubricClicked(item: DataSideBarItem, event?: Event): void {\n    if (event) event.stopPropagation()\n\n    const isDropdown = this.shouldOpenDropdown(item)\n\n    // Kalau bukan dropdown tapi ada href, langsung redirect\n    if (!isDropdown && item.href) {\n      window.location.href = item.href\n      return\n    }\n\n    // Kalau dropdown, toggle anak\n    if (isDropdown) {\n      this.toggleChildren(item)\n    }\n  }\n\n  private hasChildren(item: DataSideBarItem): boolean {\n    return Array.isArray(item.children) && item.children.length > 0\n  }\n\n  private toggleChildren(item: DataSideBarItem) {\n    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n  }\n\n  private hasBundleAccess(item: DataSideBarItem): boolean {\n    if (item.name === 'Kompas One') return this.hasKompasOnePackage()\n    if (item.name === 'Kompas Pro') return this.hasKompasProPackage()\n    return true // default non-subscription bundles\n  }\n\n  private shouldOpenDropdown(item: DataSideBarItem): boolean {\n    const hasChild = item.children?.length > 0\n\n    // 🔹 1. Parent dengan children + toExpand true\n    if (hasChild && item.toExpand) {\n      // kalau user nggak punya akses → redirect ke href\n      if (!this.hasBundleAccess(item) && item.href) {\n        return false\n      }\n      return true // punya akses → expand\n    }\n\n    // 🔹 2. Parent dengan children + tidak ada href → dropdown\n    if (hasChild && !item.href) {\n      return true\n    }\n\n    // 🔹 3. Parent dengan children + toExpand false + ada href → redirect\n    if (hasChild && !item.toExpand && item.href) {\n      return false\n    }\n\n    // 🔹 4. Item biasa tanpa child → redirect\n    return false\n  }\n\n  private renderItem(item: any, padClass: string) {\n    const hasChild = this.hasChildren(item)\n\n    return html`\n      <div class=\"w-full font-sans text-black\">\n        <div\n          class=\"flex items-center justify-between text-sm font-medium ${padClass}\"\n        >\n          <!-- Label / Link area -->\n          <div\n            class=\"flex items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n          >\n            <div\n              class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3\"\n              role=\"button\"\n              tabindex=\"0\"\n              @click=${(e: Event) => this.rubricClicked(item, e)}\n              @keydown=${(e: KeyboardEvent) => {\n                if (e.key === 'Enter') this.rubricClicked(item, e)\n              }}\n            >\n              ${item.iconSrc\n                ? html`<div class=\"flex\">\n                    <img\n                      src=\"${item.iconSrc}\"\n                      alt=\"${item.name}\"\n                      width=\"20\"\n                      height=\"20\"\n                      class=\"block\"\n                    />\n                  </div>`\n                : ''}\n              <span class=\"font-bold\">${decodeSpecialChars(item.name)}</span>\n              ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')\n                ? html`<span\n                    class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n                  ></span>`\n                : ''}\n            </div>\n\n            ${hasChild\n              ? html`\n                  <span\n                    class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400\"\n                    @click=${(e: Event) => {\n                      e.stopPropagation()\n                      this.toggleChildren(item) // 🚨 chevron khusus toggle\n                    }}\n                    @keydown=${(e: KeyboardEvent) => {\n                      if (e.key === 'Enter') this.toggleChildren(item)\n                    }}\n                  >\n                    ${unsafeSVG(\n                      getFontAwesomeIcon(\n                        'fas',\n                        this.expandedSlug === item.slug\n                          ? 'chevron-up'\n                          : 'chevron-down',\n                        12,\n                        12\n                      )\n                    )}\n                  </span>\n                `\n              : null}\n          </div>\n        </div>\n\n        <!-- Children list -->\n        ${hasChild && this.expandedSlug === item.slug\n          ? html`<div\n              class=\"${padClass.includes('px-6')\n                ? 'pt-1 pb-2 space-y-1 text-black'\n                : 'pl-14 pt-1 pb-2 space-y-1 text-black'}\"\n            >\n              ${repeat(\n                item.children ?? [],\n                (c: DataSideBarItem) => c.slug,\n                (child: DataSideBarItem) => html`\n                  <div\n                    role=\"button\"\n                    tabindex=\"0\"\n                    class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n                    @click=${() => this.rubricClicked(child)}\n                    @keydown=${(e: KeyboardEvent) => {\n                      if (e.key === 'Enter') this.rubricClicked(child, e)\n                    }}\n                  >\n                    <div\n                      class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8\"\n                    >\n                      ${decodeSpecialChars(child.name)}\n                      ${timedContent(\n                        child.redDot.start ?? '',\n                        child.redDot.end ?? ''\n                      )\n                        ? html`<span\n                            class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n                          ></span>`\n                        : ''}\n                    </div>\n                    <span class=\"ml-auto text-grey-400\">\n                      ${child.external\n                        ? unsafeSVG(\n                            getFontAwesomeIcon('fas', 'external-link', 16, 16)\n                          )\n                        : ''}\n                    </span>\n                  </div>\n                `\n              )}\n            </div>`\n          : ''}\n      </div>\n    `\n  }\n\n  private renderSection(title: string | null, items: any[], padClass: string) {\n    if (!items || items.length === 0) return null // skip if empty data\n    return html`\n      ${title\n        ? html`<span class=\"text-sm text-grey-400 ${padClass} font-normal\"\n            >${title}</span\n          >`\n        : null}\n      ${repeat(\n        items,\n        item => item.slug,\n        item => this.renderItem(item, padClass)\n      )}\n    `\n  }\n\n  private renderChips() {\n    return html`\n      <div\n        class=\"py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex\"\n        style=\"background-color:#D71920;\"\n      >\n        <span class=\"font-bold font-sans text-xs text-white capitalize\"\n          >Baru</span\n        >\n      </div>\n    `\n  }\n\n  private closeNavSidebar() {\n    console.log('closing sidebar')\n    this.showNavBar = false\n  }\n\n  render() {\n    return html`\n      <!-- Toggle Button -->\n      <div\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n        @click=${this.toggleNavSidebar}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') this.toggleNavSidebar(e)\n        }}\n      >\n        <slot></slot>\n        ${!this.hasSlotContent\n          ? html`\n              <div\n                class=\"h-4 inline-flex ${this.isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n              </div>\n              <span\n                class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n                  .isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                Menu\n              </span>\n            `\n          : ''}\n      </div>\n      <!-- Sidebar Menu -->\n      <nav\n        class=${this.showNavBar\n          ? 'fixed inset-0 z-[100] flex h-screen'\n          : 'hidden'}\n      >\n        <!-- Overlay -->\n        <div\n          class=\"absolute inset-0 bg-[#00000066]\"\n          @click=${this.closeNavSidebar}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === 'Enter') this.toggleNavSidebar(e)\n          }}\n        ></div>\n\n        <!-- Sidebar Content -->\n        <div\n          class=\"relative bg-white h-full menu-menu-sidebar overflow-y-auto pb-20 shadow-lg\"\n          style=\"width:312px;\"\n        >\n          <!-- Logo and Close Button -->\n          <div\n            class=\"bg-[#FFFFFF] flex flex-col items-center justify-center w-full\"\n          >\n            <div\n              ref=\"logo-kompas\"\n              class=\"flex items-center justify-between p-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-gold.svg\"\n                  alt=\"Kompas.id\"\n                  scale=\"0\"\n                  class=\"block w-full\"\n                />\n              </a>\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n                @click=${this.closeNavSidebar}\n                @keydown=${(e: KeyboardEvent) => {\n                  if (e.key === 'Enter') this.toggleNavSidebar(e)\n                }}\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n              </span>\n            </div>\n          </div>\n          <!-- External Links -->\n          <div class=\"flex flex-wrap px-6\">\n            ${repeat(\n              this.dataExternal,\n              item => item.name,\n              item => html`\n                <a href=\"${item.url}\" class=\"flex w-1/2 no-underline px-2\">\n                  <div class=\"cursor-pointer flex items-center pb-4\">\n                    ${item.icon &&\n                    Array.isArray(item.icon) &&\n                    item.icon.length >= 2\n                      ? html`<div class=\"flex mr-2 text-brand-1\">\n                          ${unsafeSVG(\n                            getFontAwesomeIcon(item.icon[0], item.icon[1])\n                          )}\n                        </div>`\n                      : ''}\n                    <span class=\"font-sans text-xs text-[#666666]\"\n                      >${item.name}</span\n                    >\n                    ${item.isNew\n                      ? html`<span class=\"ml-1\">${this.renderChips()}</span>`\n                      : ''}\n                  </div>\n                </a>\n              `\n            )}\n          </div>\n          ${this.dataExternal.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Bundle Section -->\n          ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}\n          ${this.dataSidebar.bundles.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Feature Section -->\n          ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}\n          ${this.dataSidebar.feature.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Category (Redaksional) -->\n          ${this.renderSection(\n            'Redaksional',\n            this.dataSidebar.category,\n            'px-6'\n          )}\n          ${this.dataSidebar.category.length > 0\n            ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n            : null}\n\n          <!-- Others (Lainnya) -->\n          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}\n        </div>\n      </nav>\n    `\n  }\n}\n"]}

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

@@ -15,6 +15,7 @@ export interface DataSideBarItem {
     isShow: boolean;
     href: string;
     external?: boolean;
+    toExpand?: boolean;
     icon: string | null;
     iconify: string | null;
     iconSrc: string | null;

package/dist/src/components/kompasid-menu-side-bar/SidebarDataController.js

@@ -36,19 +36,20 @@ export async function fetchSidebarData(isProduction) {
         const data = await response.json();
         if (data && typeof data === 'object') {
             const mapItem = (item) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
                 return ({
                     isShow: (_a = item.isShow) !== null && _a !== void 0 ? _a : true,
-                    href: (_b = item.href) !== null && _b !== void 0 ? _b : '',
-                    external: (_c = item.external) !== null && _c !== void 0 ? _c : false,
-                    icon: (_d = item.icon) !== null && _d !== void 0 ? _d : null,
-                    iconify: (_e = item.iconify) !== null && _e !== void 0 ? _e : null,
-                    iconSrc: (_f = item.iconSrc) !== null && _f !== void 0 ? _f : null,
-                    name: (_g = item.name) !== null && _g !== void 0 ? _g : '',
-                    slug: (_h = item.slug) !== null && _h !== void 0 ? _h : '',
+                    toExpand: (_b = item.toExpand) !== null && _b !== void 0 ? _b : false,
+                    href: (_c = item.href) !== null && _c !== void 0 ? _c : '',
+                    external: (_d = item.external) !== null && _d !== void 0 ? _d : false,
+                    icon: (_e = item.icon) !== null && _e !== void 0 ? _e : null,
+                    iconify: (_f = item.iconify) !== null && _f !== void 0 ? _f : null,
+                    iconSrc: (_g = item.iconSrc) !== null && _g !== void 0 ? _g : null,
+                    name: (_h = item.name) !== null && _h !== void 0 ? _h : '',
+                    slug: (_j = item.slug) !== null && _j !== void 0 ? _j : '',
                     redDot: {
-                        start: (_k = (_j = item.redDot) === null || _j === void 0 ? void 0 : _j.start) !== null && _k !== void 0 ? _k : '',
-                        end: (_m = (_l = item.redDot) === null || _l === void 0 ? void 0 : _l.end) !== null && _m !== void 0 ? _m : '',
+                        start: (_l = (_k = item.redDot) === null || _k === void 0 ? void 0 : _k.start) !== null && _l !== void 0 ? _l : '',
+                        end: (_o = (_m = item.redDot) === null || _m === void 0 ? void 0 : _m.end) !== null && _o !== void 0 ? _o : '',
                     },
                     children: Array.isArray(item.children)
                         ? item.children.map(mapItem)

package/dist/src/components/kompasid-menu-side-bar/SidebarDataController.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarDataController.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/SidebarDataController.ts"],"names":[],"mappings":"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","sourcesContent":["// SidebarDataController.ts\nexport interface DataExternalLink {\n  external: boolean\n  gtmClass: string\n  icon: string | null\n  iconify: string | null\n  isNew: boolean\n  name: string\n  url: string\n}\n\nexport interface DataRedDot {\n  start: string | null\n  end: string | null\n}\n\nexport interface DataSideBarItem {\n  isShow: boolean\n  href: string\n  external?: boolean\n  icon: string | null\n  iconify: string | null\n  iconSrc: string | null\n  name: string\n  slug: string\n  redDot: DataRedDot\n  children: DataSideBarItem[]\n}\n\nexport interface DataSideBarLink {\n  bundles: DataSideBarItem[]\n  feature: DataSideBarItem[]\n  category: DataSideBarItem[]\n  lainnya: DataSideBarItem[]\n}\n\n// ---- Fetch External Links ----\nexport async function fetchExternalLinks(\n  isProduction: boolean\n): Promise<DataExternalLink[]> {\n  try {\n    const baseUrl = isProduction\n      ? 'https://cdn-www.kompas.id'\n      : 'https://cdn-dev-www.kompas.id'\n    const response = await fetch(\n      `${baseUrl}/assets/json/ApiMenuExternalLinkV2.json`\n    )\n    const data = await response.json()\n\n    return Array.isArray(data)\n      ? data.map(\n          (item: any): DataExternalLink => ({\n            external: item.external ?? false,\n            gtmClass: item.gtmClass ?? '',\n            icon: item.icon ?? null,\n            iconify: item.iconify ?? null,\n            isNew: item.isNew ?? false,\n            name: item.name ?? '',\n            url: item.url ?? '',\n          })\n        )\n      : []\n  } catch (error) {\n    console.error('Error fetching external links:', error)\n    return []\n  }\n}\n\n// ---- Fetch Sidebar Data ----\nexport async function fetchSidebarData(\n  isProduction: Boolean\n): Promise<DataSideBarLink> {\n  try {\n    const baseUrl = isProduction\n      ? 'https://cdn-www.kompas.id'\n      : 'https://cdn-dev-www.kompas.id'\n    const response = await fetch(`${baseUrl}/assets/json/ApiMenuSideV4.json`)\n    const data = await response.json()\n\n    if (data && typeof data === 'object') {\n      const mapItem = (item: any): DataSideBarItem => ({\n        isShow: item.isShow ?? true,\n        href: item.href ?? '',\n        external: item.external ?? false,\n        icon: item.icon ?? null,\n        iconify: item.iconify ?? null,\n        iconSrc: item.iconSrc ?? null,\n        name: item.name ?? '',\n        slug: item.slug ?? '',\n        redDot: {\n          start: item.redDot?.start ?? '',\n          end: item.redDot?.end ?? '',\n        },\n        children: Array.isArray(item.children)\n          ? item.children.map(mapItem)\n          : [],\n      })\n\n      const mapper = (list: any[]): DataSideBarItem[] =>\n        Array.isArray(list) ? list.map(mapItem) : []\n\n      return {\n        bundles: mapper(data.bundles),\n        feature: mapper(data.feature),\n        category: mapper(data.category),\n        lainnya: mapper(data.lainnya),\n      }\n    }\n\n    return { bundles: [], feature: [], category: [], lainnya: [] }\n  } catch (error) {\n    console.error('Error fetching sidebar data:', error)\n    return { bundles: [], feature: [], category: [], lainnya: [] }\n  }\n}\n"]}
+{"version":3,"file":"SidebarDataController.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/SidebarDataController.ts"],"names":[],"mappings":"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","sourcesContent":["// SidebarDataController.ts\nexport interface DataExternalLink {\n  external: boolean\n  gtmClass: string\n  icon: string | null\n  iconify: string | null\n  isNew: boolean\n  name: string\n  url: string\n}\n\nexport interface DataRedDot {\n  start: string | null\n  end: string | null\n}\n\nexport interface DataSideBarItem {\n  isShow: boolean\n  href: string\n  external?: boolean\n  toExpand?: boolean\n  icon: string | null\n  iconify: string | null\n  iconSrc: string | null\n  name: string\n  slug: string\n  redDot: DataRedDot\n  children: DataSideBarItem[]\n}\n\nexport interface DataSideBarLink {\n  bundles: DataSideBarItem[]\n  feature: DataSideBarItem[]\n  category: DataSideBarItem[]\n  lainnya: DataSideBarItem[]\n}\n\n// ---- Fetch External Links ----\nexport async function fetchExternalLinks(\n  isProduction: boolean\n): Promise<DataExternalLink[]> {\n  try {\n    const baseUrl = isProduction\n      ? 'https://cdn-www.kompas.id'\n      : 'https://cdn-dev-www.kompas.id'\n    const response = await fetch(\n      `${baseUrl}/assets/json/ApiMenuExternalLinkV2.json`\n    )\n    const data = await response.json()\n\n    return Array.isArray(data)\n      ? data.map(\n          (item: any): DataExternalLink => ({\n            external: item.external ?? false,\n            gtmClass: item.gtmClass ?? '',\n            icon: item.icon ?? null,\n            iconify: item.iconify ?? null,\n            isNew: item.isNew ?? false,\n            name: item.name ?? '',\n            url: item.url ?? '',\n          })\n        )\n      : []\n  } catch (error) {\n    console.error('Error fetching external links:', error)\n    return []\n  }\n}\n\n// ---- Fetch Sidebar Data ----\nexport async function fetchSidebarData(\n  isProduction: Boolean\n): Promise<DataSideBarLink> {\n  try {\n    const baseUrl = isProduction\n      ? 'https://cdn-www.kompas.id'\n      : 'https://cdn-dev-www.kompas.id'\n    const response = await fetch(`${baseUrl}/assets/json/ApiMenuSideV4.json`)\n    const data = await response.json()\n\n    if (data && typeof data === 'object') {\n      const mapItem = (item: any): DataSideBarItem => ({\n        isShow: item.isShow ?? true,\n        toExpand: item.toExpand ?? false,\n        href: item.href ?? '',\n        external: item.external ?? false,\n        icon: item.icon ?? null,\n        iconify: item.iconify ?? null,\n        iconSrc: item.iconSrc ?? null,\n        name: item.name ?? '',\n        slug: item.slug ?? '',\n        redDot: {\n          start: item.redDot?.start ?? '',\n          end: item.redDot?.end ?? '',\n        },\n        children: Array.isArray(item.children)\n          ? item.children.map(mapItem)\n          : [],\n      })\n\n      const mapper = (list: any[]): DataSideBarItem[] =>\n        Array.isArray(list) ? list.map(mapItem) : []\n\n      return {\n        bundles: mapper(data.bundles),\n        feature: mapper(data.feature),\n        category: mapper(data.category),\n        lainnya: mapper(data.lainnya),\n      }\n    }\n\n    return { bundles: [], feature: [], category: [], lainnya: [] }\n  } catch (error) {\n    console.error('Error fetching sidebar data:', error)\n    return { bundles: [], feature: [], category: [], lainnya: [] }\n  }\n}\n"]}

package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js

@@ -534,7 +534,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
                   ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
                 </div>
                 <h6
-                  class="text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
+                  class="text-sm md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
                 >
                   ${item}
                 </h6>
@@ -585,24 +585,33 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     regulerRegistrationSection() {
         const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
         const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600';
+        const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
         return html `
-      <div class="flex flex-col items-center justify-center">
-        <div>
-          <button
-            @click=${() => redirectToRegister('hard_paywall')}
-            class="text-sm md:text-base font-bold underline ${textColorClass}"
-          >
-            Daftar
-          </button>
-          <span class="${buttonTextColorClass}"
-            >untuk kuota artikel gratis</span
-          >
-        </div>
+      <div
+        class="flex flex-col items-center justify-center text-sm md:text-base"
+      >
+        ${!isPro
+            ? html `
+              <div>
+                <button
+                  @click=${() => redirectToRegister('hard_paywall')}
+                  class="font-bold underline ${textColorClass}"
+                >
+                  Daftar
+                </button>
+                <span class="${buttonTextColorClass}"
+                  >untuk kuota artikel gratis</span
+                >
+              </div>
+            `
+            : nothing}
         <div>
-          <span class="${buttonTextColorClass}">atau</span>
+          ${!isPro
+            ? html ` <span class="${buttonTextColorClass}">atau</span>`
+            : nothing}
           <button
             @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
-            class="text-sm md:text-base font-bold underline ${textColorClass}"
+            class="font-bold underline ${textColorClass}"
           >
             Masuk
           </button>