npm - @kompasid/lit-web-components - Versions diffs - 0.9.27 → 0.9.29 - Mend

@kompasid/lit-web-components 0.9.27 → 0.9.29

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

@@ -52,6 +52,7 @@
       import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
       import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
       import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+      import '../dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js'
       import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
       import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
       import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
@@ -260,7 +261,7 @@
             .tracker_subscription_status=${trackerSubscriptionStatus}
           >
           </kompasid-paywall>
-          <div class="metered font-sans">
+          <div class="metered font-sans" style="position: sticky; bottom: 0; width: 100%; z-index: 999;">
             <kompasid-metered-paywall
             .paywall_location=${paywallLocation}
               .paywall_subscription_id=${paywallSubscriptionId}
@@ -280,6 +281,28 @@
               .metered_wall_balance=${meteredWallBalance}
             >
             </kompasid-metered-paywall>
+            <kompasid-metered-paywall-personalize
+              segment="Passive Faders"
+              offering="Q3"
+              user_name="Dummy User"
+              .paywall_location=${paywallLocation}
+              .paywall_subscription_id=${paywallSubscriptionId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              .paywall_position=${paywallPosition}
+              .tracker_page_type=${trackerPageType}
+              .tracker_content_id=${trackerContentId}
+              .tracker_content_type=${trackerContentType}
+              .tracker_content_title=${trackerContentTitle}
+              .tracker_content_categories=${trackerContentCategories}
+              .tracker_user_type=${trackerUserType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_page_domain=${trackerPageDomain}
+              .metered_wall_type=${meteredWallType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_epaper_edition=${trackerEpaperEdition}
+              .metered_wall_balance=${meteredWallBalance}
+            >
+            </kompasid-metered-paywall-personalize>
           </div>
           <!-- <div style="margin: 20px 0">

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

@@ -12,7 +12,7 @@ export declare class KompasMenuSideBar extends LitElement {
     dataExternal: DataExternalLink[];
     dataSidebar: DataSideBarLink;
     showNavBar: boolean;
-    expandedSlug: string | null;
+    expandedSlugs: string[];
     hasSlotContent: boolean;
     connectedCallback(): Promise<void>;
     firstUpdated(): void;

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

@@ -27,7 +27,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
             lainnya: [],
         };
         this.showNavBar = false;
-        this.expandedSlug = null;
+        this.expandedSlugs = [];
         this.hasSlotContent = false;
     }
     // Fetch data when the component is connected to the DOM
@@ -107,7 +107,15 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
         return Array.isArray(item.children) && item.children.length > 0;
     }
     toggleChildren(item) {
-        this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug;
+        const { slug } = item;
+        if (this.expandedSlugs.includes(slug)) {
+            // close it
+            this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug);
+        }
+        else {
+            // open it
+            this.expandedSlugs = [...this.expandedSlugs, slug];
+        }
     }
     hasBundleAccess(item) {
         if (item.name === 'Kompas One')
@@ -148,10 +156,10 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
         >
           <!-- Label / Link area -->
           <div
-            class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
+            class="flex gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer"
           >
             <div
-              class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
+              class="w-[216px] px-2 hover:bg-[#f4f4f4] rounded h-12 flex items-center space-x-3"
               role="button"
               tabindex="0"
               @click=${(e) => this.rubricClicked(item, e)}
@@ -171,7 +179,9 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                     />
                   </div>`
             : ''}
-              <span class="font-bold">${decodeSpecialChars(item.name)}</span>
+              <span class="font-bold text-grey-600 text-base"
+                >${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"
@@ -182,17 +192,17 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
             ${hasChild
             ? html `
                   <span
-                    class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400"
+                    class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 hover:bg-[#f4f4f4] text-grey-400"
                     @click=${(e) => {
                 e.stopPropagation();
-                this.toggleChildren(item); // 🚨 chevron khusus toggle
+                this.toggleChildren(item); // chevron khusus toggle
             }}
                     @keydown=${(e) => {
                 if (e.key === 'Enter')
                     this.toggleChildren(item);
             }}
                   >
-                    ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlug === item.slug
+                    ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlugs.includes(item.slug)
                 ? 'chevron-up'
                 : 'chevron-down', 12, 12))}
                   </span>
@@ -202,7 +212,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
         </div>
         <!-- Children list -->
-        ${hasChild && this.expandedSlug === item.slug
+        ${hasChild && this.expandedSlugs.includes(item.slug)
             ? html `<div
               class="${padClass.includes('px-6')
                 ? 'pt-1 pb-2 space-y-1 text-black'
@@ -214,7 +224,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                   <div
                     role="button"
                     tabindex="0"
-                    class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
+                    class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
                     @click=${() => this.rubricClicked(child)}
                     @keydown=${(e) => {
                     if (e.key === 'Enter')
@@ -222,7 +232,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                 }}
                   >
                     <div
-                      class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8"
+                      class="w-[216px] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2"
                     >
                       ${decodeSpecialChars(child.name)}
                       ${timedContent((_a = child.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = child.redDot.end) !== null && _b !== void 0 ? _b : '')
@@ -230,12 +240,13 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                             class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
                           ></span>`
                     : ''}
-                    </div>
-                    <span class="ml-auto text-grey-400">
-                      ${child.external
+                      <span class="absolute right-0 text-grey-400">
+                        ${child.external
                     ? unsafeSVG(getFontAwesomeIcon('fas', 'external-link', 16, 16))
                     : ''}
-                    </span>
+                      </span>
+                    </div>
                   </div>
                 `;
             })}
@@ -249,7 +260,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
             return null; // skip if empty data
         return html `
       ${title
-            ? html `<span class="text-sm text-grey-400 ${padClass} font-normal"
+            ? html `<span class="text-sm text-grey-400 ${padClass} font-normal mx-2"
             >${title}</span
           >`
             : null}
@@ -346,7 +357,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
               <span
                 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"
+                class="hover:bg-[#f4f4f4] font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
                 @click=${this.closeNavSidebar}
                 @keydown=${(e) => {
             if (e.key === 'Enter')
@@ -365,11 +376,12 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                     ${item.icon &&
             Array.isArray(item.icon) &&
             item.icon.length >= 2
-            ? html `<div class="flex mr-2 text-brand-1">
+            ? html `<div class="flex mr-2 text-[#666666]">
                           ${unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))}
                         </div>`
             : ''}
-                    <span class="font-sans text-xs text-[#666666]"
+                    <span
+                      class="font-sans font-normal text-xs hover:text-[#222222] text-[#666666]"
                       >${item.name}</span
                     >
                     ${item.isNew
@@ -384,25 +396,25 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
             : null}
           <!-- Bundle Section -->
-          ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}
+          ${this.renderSection(null, this.dataSidebar.bundles, 'px-4')}
           ${this.dataSidebar.bundles.length > 0
             ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
             : null}
           <!-- Feature Section -->
-          ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}
+          ${this.renderSection(null, this.dataSidebar.feature, 'px-4')}
           ${this.dataSidebar.feature.length > 0
             ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
             : null}
           <!-- Category (Redaksional) -->
-          ${this.renderSection('Redaksional', this.dataSidebar.category, 'px-6')}
+          ${this.renderSection('Redaksional', this.dataSidebar.category, 'px-4')}
           ${this.dataSidebar.category.length > 0
             ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
             : null}
           <!-- Others (Lainnya) -->
-          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}
+          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-4')}
         </div>
       </nav>
     `;
@@ -464,7 +476,7 @@ __decorate([
 ], KompasMenuSideBar.prototype, "showNavBar", void 0);
 __decorate([
     state()
-], KompasMenuSideBar.prototype, "expandedSlug", void 0);
+], KompasMenuSideBar.prototype, "expandedSlugs", void 0);
 KompasMenuSideBar = __decorate([
     customElement('kompasid-menu-side-bar')
 ], KompasMenuSideBar);

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(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"]}
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() expandedSlugs: string[] = []\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 const { slug } = item\n if (this.expandedSlugs.includes(slug)) {\n // close it\n this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug)\n } else {\n // open it\n this.expandedSlugs = [...this.expandedSlugs, slug]\n }\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 gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n >\n <div\n class=\"w-[216px] px-2 hover:bg-[#f4f4f4] 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 text-grey-600 text-base\"\n >${decodeSpecialChars(item.name)}</span\n >\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 hover:bg-[#f4f4f4] 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.expandedSlugs.includes(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.expandedSlugs.includes(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 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] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2\"\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\n <span class=\"absolute right-0 text-grey-400\">\n ${child.external\n ? unsafeSVG(\n getFontAwesomeIcon('fas', 'external-link', 16, 16)\n )\n : ''}\n </span>\n </div>\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 mx-2\"\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=\"hover:bg-[#f4f4f4] 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-[#666666]\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>`\n : ''}\n <span\n class=\"font-sans font-normal text-xs hover:text-[#222222] 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-4')}\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-4')}\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-4'\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-4')}\n </div>\n </nav>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts ADDED Viewed

@@ -0,0 +1,67 @@
+import { LitElement, nothing } from 'lit';
+export declare class KompasMeteredPaywallPersonalize extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private isLoading;
+    private maxQuota;
+    private packageData;
+    /**
+     * Props
+     */
+    /**
+     * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+     * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
+     * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
+     * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
+     * prop paywall_location = The location where user encounter the paywall
+     * prop paywall_subscription_package = The name of the subscription package viewed by user
+     * prop paywall_subscription_id = The ID of the subscription package viewed by user
+     * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+     * prop paywall_position = The position of ther subscription package viewed by user
+     * prop tracker_page_type = Type of the page
+     * prop tracker_content_id = ID of article (slug)
+     * prop tracker_content_type = Whether it's free article or paid article
+     * prop tracker_content_title = The title of article
+     * prop tracker_content_categories = The category of the content
+     * prop tracker_user_type = Type of user based on their subscription
+     * prop tracker_subscription_status = Status of their subscription
+     * prop tracker_page_domain = Page Domain
+     * prop tracker_metered_wall_type = The type of Metered Wall
+     * prop tracker_epaper_edition = The edition of epaper viewed by user
+     * prop tracker_metered_wall_balance = The balance of their metered wall
+     */
+    countdownArticle: number;
+    segment: string;
+    offering: string;
+    user_name: string;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: string;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    connectedCallback(): Promise<void>;
+    getMeteredPaywallData(): Promise<void>;
+    private redirectToBerlangganan;
+    private dataLayeronLanggananButton;
+    private dataLayeronMeteredPaywall;
+    private stateDefaultPaywall;
+    private computedstateDefaultPaywall;
+    /**
+     * Ganti placeholder _key_ di template dengan nilai dari data offering
+     * Hanya replace jika placeholder cocok dan datanya valid
+     */
+    private replacePlaceholdersFromOffering;
+    private engageReturners;
+    private passiveFaders;
+    private pickTemplate;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}