npm - @kompasid/lit-web-components - Versions diffs - 0.9.23 → 0.9.26 - Mend

@kompasid/lit-web-components 0.9.23 → 0.9.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/demo/index.html CHANGED Viewed

@@ -58,7 +58,7 @@
       import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
       import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
-      const type = 'epaper'
+      const type = 'proMiningArticle'
       const theme = ''
       const paywallLocation = 'paywall_location'
       const paywallSubscriptionId = 'testId'
@@ -73,6 +73,7 @@
       const trackerContentCategories = 'content_categories'
       const trackerUserId = 'user_id'
       const trackerUserType = 'user_type'
+      const trackerContentPublisher = 'publisher'
       const trackerMeteredWallBalance = 0
       const subscriptionStatus = 'subscription_status'
       const trackerPageDomain = 'page_domain'
@@ -250,6 +251,7 @@
             .subscriptionStatus=${subscriptionStatus}
             .tracker_epaper_edition=${trackerEpaperEdition}
             .metered_wall_balance=${meteredWallBalance}
+            .tracker_content_publisher=${trackerContentPublisher}
             .isLogin=${isLogin}
             .isWithHeader=${isWithHeader}
             .swgEnable=${swgEnable}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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(\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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidebarDataController.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/SidebarDataController.ts"],"names":[],"mappings":"~~AAoCA~~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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"]}
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 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/KompasPaywall.d.ts CHANGED Viewed

@@ -63,6 +63,7 @@ export declare class KompasPaywall extends LitElement {
     tracker_metered_wall_type: string;
     tracker_metered_wall_balance: number;
     tracker_epaper_edition: string;
+    tracker_content_publisher: string;
     theme: string;
     mockResult: PaywallProduct;
     get darkUrl(): "" | "-dark";

package/dist/src/components/kompasid-paywall/KompasPaywall.js CHANGED Viewed

@@ -66,6 +66,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
         this.tracker_metered_wall_type = '';
         this.tracker_metered_wall_balance = 0;
         this.tracker_epaper_edition = '';
+        this.tracker_content_publisher = '';
         this.theme = '';
         this.mockResult = {
             informations: {
@@ -83,6 +84,11 @@ let KompasPaywall = class KompasPaywall extends LitElement {
                     maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',
                     url: 'https://kompas.id/berlangganan',
                 },
+                cta: {
+                    show: true,
+                    text: 'Lihat Paket Lainnya',
+                    url: 'https://www.kompas.id/berlangganan/v2',
+                },
             },
             packages: {
                 title: 'Sekali bayar, tanpa perpanjang otomatis',
@@ -222,6 +228,8 @@ let KompasPaywall = class KompasPaywall extends LitElement {
         this.selectorTypePaywall = (type) => {
             switch (type) {
                 case 'epaper':
+                case 'proMiningArticle':
+                case 'proMiningOutlook':
                     return this.renderEpaperPaywallSection();
                 case 'audio':
                     return this.renderAudioPaywallSection();
@@ -243,19 +251,30 @@ let KompasPaywall = class KompasPaywall extends LitElement {
         try {
             const response = await fetch('https://cdn-www.kompas.id/web-component/paywall.json');
             const json = await response.json();
+            const listType = [
+                'reguler',
+                'audio',
+                'proMiningOutlook',
+                'proMiningArticle',
+                'epaper',
+                'custom',
+            ];
+            const findTypeOnTheList = listType.includes(this.type);
+            const defaultType = findTypeOnTheList ? this.type : 'reguler';
             this.paywallData = {
                 ...this.mockResult,
                 informations: {
                     ...this.mockResult.informations,
-                    title: json[this.type].head,
-                    description: json[this.type].content,
+                    title: json[defaultType].head,
+                    description: json[defaultType].content,
+                    cta: json[defaultType].cta,
                 },
                 packages: {
                     ...this.mockResult.packages,
-                    memberships: json[this.type].memberships,
-                    swgEnable: json[this.type].swgEnable,
-                    freeTrial: json[this.type].freeTrial,
-                    swgContent: json[this.type].swgContent,
+                    memberships: json[defaultType].memberships,
+                    swgEnable: json[defaultType].swgEnable,
+                    freeTrial: json[defaultType].freeTrial,
+                    swgContent: json[defaultType].swgContent,
                 },
             };
         }
@@ -292,6 +311,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
       tracker_metered_wall_type=${this.tracker_metered_wall_type}
       tracker_epaper_edition=${this.tracker_epaper_edition}
       tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+      tracker_content_publisher=${this.tracker_content_publisher}
       ?swgEnable=${this.swgEnable}
       tracker_content_type=${this.tracker_content_type}
       ?isLogin=${this.isLogin}
@@ -338,6 +358,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
                 tracker_metered_wall_balance=${this
                 .tracker_metered_wall_balance}
                 tracker_content_type=${this.tracker_content_type}
+                tracker_content_publisher=${this.tracker_content_publisher}
                 ?swgEnable=${this.swgEnable}
                 ?isLogin=${this.isLogin}
                 type=${this.type}
@@ -378,6 +399,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
               tracker_page_domain=${this.tracker_page_domain}
               tracker_metered_wall_type=${this.tracker_metered_wall_type}
               tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+              tracker_content_publisher=${this.tracker_content_publisher}
               ?swgEnable=${this.swgEnable}
               ?isLogin=${this.isLogin}
               type=${this.type}
@@ -427,6 +449,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
                 tracker_metered_wall_balance=${this
                 .tracker_metered_wall_balance}
                 tracker_content_type=${this.tracker_content_type}
+                tracker_content_publisher=${this.tracker_content_publisher}
                 ?swgEnable=${this.swgEnable}
                 ?isLogin=${this.isLogin}
                 type=${this.type}
@@ -468,6 +491,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
               tracker_page_domain=${this.tracker_page_domain}
               tracker_metered_wall_type=${this.tracker_metered_wall_type}
               tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+              tracker_content_publisher=${this.tracker_content_publisher}
               ?swgEnable=${this.swgEnable}
               ?isLogin=${this.isLogin}
               type=${this.type}
@@ -607,6 +631,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasPaywall.prototype, "tracker_epaper_edition", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_content_publisher", void 0);
 __decorate([
     property({ type: String })
 ], KompasPaywall.prototype, "theme", void 0);