@kompasid/lit-web-components 0.8.27 → 0.8.28

package/demo/index.html

@@ -70,6 +70,7 @@
       const trackerContentType = 'content_type'
       const trackerContentTitle = 'content_title'
       const trackerContentCategories = 'content_categories'
+      const trackerUserId = 'user_id'
       const trackerUserType = 'user_type'
       const trackerMeteredWallBalance = 0
       const subscriptionStatus = 'subscription_status'
@@ -195,9 +196,24 @@
           >
           </kompasid-widget-recirculations-list>
 
+          <kompasid-widget-recirculations-list
+            widgetTitle="Terbaru"
+            apiSlug="list"
+          >
+          </kompasid-widget-recirculations-list>
+
           <kompasid-widget-recirculations-default
             .permalinkArticle=${widgetRelatedPost.permalinkArticle}
             .slugs=${widgetRelatedPost.slugs}
+            .tracker_content_id=${trackerContentId}
+            .tracker_content_categories=${trackerContentCategories}
+            .tracker_user_id=${trackerUserId}
+            .tracker_user_type=${trackerUserType}
+            .tracker_subscription_status=${trackerSubscriptionStatus}
+            .tracker_subscription_package=${paywallSubscriptionPackage}
+            .tracker_metered_wall_type=${meteredWallType}
+            .tracker_metered_wall_balance=${trackerMeteredWallBalance}
+            .tracker_page_domain=${trackerPageDomain}
           ></kompasid-widget-recirculations-default>
 
           <kompasid-widget-recirculations-default

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts

@@ -6,6 +6,7 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
      * Props
      */
     posts: Post[][];
+    recoID: string;
     permalinkArticle: string;
     userGuid: string;
     slugs: string;
@@ -14,6 +15,15 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
     titleName: string;
     titleLink: string;
     isDark: boolean;
+    tracker_content_id: string;
+    tracker_content_categories: string;
+    tracker_user_id: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_subscription_package: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    tracker_page_domain: string;
     /**
      * Fetch Data
      */
@@ -28,5 +38,11 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
     private titleOtherArticle;
     renderChips(post: Post): import("lit").TemplateResult<1>[];
     renderImage(post: Post): import("lit").TemplateResult<1> | "";
+    /**
+     * mengirim event ke datalayer
+     */
+    private recoContentClicked;
+    private recoContentViewed;
+    handleObserver(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js

@@ -3,6 +3,8 @@ import { html, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TWStyles } from '../../../tailwind/tailwind.js';
 import { useTimeDifference } from '../../utils/useTimeDIfference.js';
+import { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js';
+createIntersectionObserverComponent();
 let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault extends LitElement {
     constructor() {
         super(...arguments);
@@ -10,6 +12,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
          * Props
          */
         this.posts = [];
+        this.recoID = '';
         this.permalinkArticle = '';
         this.userGuid = '0';
         this.slugs = '';
@@ -18,6 +21,17 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         this.titleName = ''; // contoh: Artikel Terkait / Lainnya dalam 'kategori'
         this.titleLink = ''; // contoh: /kategori/opini
         this.isDark = false;
+        // data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed
+        this.tracker_content_id = ''; //
+        this.tracker_content_categories = '';
+        // datau user
+        this.tracker_user_id = '';
+        this.tracker_user_type = '';
+        this.tracker_subscription_status = '';
+        this.tracker_subscription_package = '';
+        this.tracker_metered_wall_type = '';
+        this.tracker_metered_wall_balance = 0;
+        this.tracker_page_domain = '';
     }
     /**
      * Fetch Data
@@ -52,6 +66,9 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                 'Content-Type': 'application/json',
             },
         });
+        // get x-request-id from headers
+        const recoId = response.headers.get('X-Request-Id') || '';
+        this.recoID = recoId;
         const result = await response.json();
         if (result === null || result === void 0 ? void 0 : result.result) {
             const items = result.result;
@@ -182,6 +199,54 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
       />
     `;
     }
+    /**
+     * mengirim event ke datalayer
+     */
+    recoContentClicked(post, recoIndex) {
+        var _a;
+        if (this.type !== 'relatedArticle')
+            return; // Hanya trigger event jika type 'relatedArticle'
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+            // data dari component
+            event: 'reco_content_clicked',
+            content_id: post.name,
+            content_categories: ((_a = post.category) === null || _a === void 0 ? void 0 : _a.map(cat => cat.name).join('|')) || '',
+            reco_index: recoIndex,
+            reco_id: this.recoID || '',
+            reco_model: 'context',
+            // data dari implementor
+            user_id: this.tracker_user_id || 'NA',
+            user_type: this.tracker_user_type || '',
+            subscription_status: this.tracker_subscription_status || '',
+            subscription_package: this.tracker_subscription_package || '',
+            metered_wall_type: this.tracker_metered_wall_type || '',
+            metered_wall_balance: this.tracker_metered_wall_balance,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+        });
+    }
+    recoContentViewed() {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+            event: 'reco_content_viewed',
+            content_id: this.tracker_content_id || '',
+            content_categories: this.tracker_content_categories || '',
+            user_type: this.tracker_user_type || '',
+            subscription_status: this.tracker_subscription_status || '',
+            subscription_package: this.tracker_subscription_package || '',
+            metered_wall_type: this.tracker_metered_wall_type || '',
+            metered_wall_balance: this.tracker_metered_wall_balance,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+        });
+    }
+    handleObserver() {
+        if (this.type === 'relatedArticle') {
+            this.recoContentViewed();
+        }
+        else {
+            // kalo mau implemen buat artikel lainnya
+        }
+    }
     render() {
         return html `
       <div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
@@ -190,17 +255,25 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
             ? this.titleRelatedArticle()
             : this.titleOtherArticle()}
         <!-- end: widget title -->
-
+        <intersection-observer-component
+          .onTrigger="${() => this.handleObserver()}"
+        ></intersection-observer-component>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
           <!-- start: left-post-loop -->
           <div class="grid grid-cols-1 gap-6">
             ${this.posts[0]
-            ? this.posts[0].map(post => html `
+            ? this.posts[0].map((post, index) => html `
                     <div class="w-full">
                       <div class="flex">
                         <div class="w-1/2">${this.renderImage(post)}</div>
                         <div class="flex-grow pl-4 w-1/2">
-                          <a href="${post.permalink}">
+                          <a
+                            href="${post.permalink}?open_from=${this.type ===
+                'relatedArticle'
+                ? 'Artikel_Terkait'
+                : 'Artikel_Lainnya'}"
+                            @click="${() => this.recoContentClicked(post, index + 1)}"
+                          >
                             ${this.renderChips(post)}
                             <h5
                               class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
@@ -229,12 +302,18 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
           <!-- start: right-post-loop -->
           <div class="flex flex-col w-full">
             ${this.posts[1]
-            ? this.posts[1].map(post => html `
+            ? this.posts[1].map((post, index) => html `
                     <div class="mb-6">
                       <div class="flex">
                         <div class="w-1/2">${this.renderImage(post)}</div>
                         <div class="flex-grow pl-4 w-1/2">
-                          <a href="${post.permalink}">
+                          <a
+                            href="${post.permalink}?open_from=${this.type ===
+                'relatedArticle'
+                ? 'Artikel_Terkait'
+                : 'Artikel_Lainnya'}"
+                            @click="${() => this.recoContentClicked(post, index + 6)}"
+                          >
                             ${this.renderChips(post)}
                             <h5
                               class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
@@ -291,6 +370,9 @@ KompasWidgetRecirculationsDefault.styles = [
 __decorate([
     property({ type: Array })
 ], KompasWidgetRecirculationsDefault.prototype, "posts", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "recoID", void 0);
 __decorate([
     property({ type: String })
 ], KompasWidgetRecirculationsDefault.prototype, "permalinkArticle", void 0);
@@ -315,6 +397,33 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], KompasWidgetRecirculationsDefault.prototype, "isDark", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_user_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_subscription_package", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "tracker_page_domain", void 0);
 KompasWidgetRecirculationsDefault = __decorate([
     customElement('kompasid-widget-recirculations-default')
 ], KompasWidgetRecirculationsDefault);

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .chip {\n        align-items: center;\n        border-radius: 0.25rem;\n        display: flex;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.75rem;\n        font-weight: bold;\n        height: 1.5rem;\n        justify-content: center;\n        line-height: 1rem;\n        margin-bottom: 0.25rem;\n        padding: 0.375rem 0.5rem;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: Array }) posts: Post[][] = []\n  @property({ type: String }) permalinkArticle = ''\n  @property({ type: String }) userGuid = '0'\n  @property({ type: String }) slugs = ''\n  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n    'relatedArticle'\n  @property({ type: String }) mainCategory = ''\n  @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n  @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n  @property({ type: Boolean }) isDark = false\n\n  /**\n   * Fetch Data\n   */\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      if (this.type === 'relatedArticle') {\n        await this.relatedArticles()\n      } else if (this.type === 'otherArticle') {\n        await this.otherArticles()\n      }\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n\n  async relatedArticles() {\n    const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n    // Constructing parameters\n    const params = new URLSearchParams()\n    params.append('page_url', this.permalinkArticle)\n    params.append('page_type', 'read')\n    params.append('item_type', 'articles')\n    params.append('guid', this.userGuid)\n    params.append('slugs', this.slugs)\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n    } else {\n      throw new Error('Data artikel terkait tidak ditemukan')\n    }\n  }\n\n  async otherArticles() {\n    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n    } else {\n      throw new Error('Data artikel lainnya tidak ditemukan')\n    }\n  }\n\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  /**\n   * Render widget components\n   */\n\n  private titleRelatedArticle() {\n    return html`\n      <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n        <div>\n          <h5\n            class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n              .isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            Artikel Terkait\n          </h5>\n        </div>\n      </div>\n    `\n  }\n\n  private titleOtherArticle() {\n    return html`\n      <a\n        href=\"${this.titleLink}\"\n        class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n      >\n        <h5\n          class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n            ? 'text-blue-200'\n            : 'text-brand-1'}\"\n        >\n          ${this.titleName}\n        </h5>\n      </a>\n    `\n  }\n\n  renderChips(post: Post) {\n    const chips = []\n    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n    const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n    const isFreemium = post.isFreemium === true\n\n    if (isKompasBrief) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n          </div>\n        `\n      )\n    } else if (isEksklusif) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-grey-600 text-white\">\n              <img\n                src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n                alt=\"Kompas Icon\"\n                style=\"width: 16px; height: 16px; margin-right: 4px;\"\n              />\n              Eksklusif\n            </div>\n          </div>\n        `\n      )\n    } else if (isFreemium) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n          </div>\n        `\n      )\n    } else if (isAnalisis) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n          </div>\n        `\n      )\n    }\n\n    return chips\n  }\n\n  renderImage(post: Post) {\n    const { thumbnailMedium } = post.thumbnails?.sizes || {}\n    if (!thumbnailMedium) return ''\n\n    const { permalink, width, height } = thumbnailMedium\n    return html`\n      <img\n        src=\"${permalink}\"\n        width=\"${width}\"\n        height=\"${height}\"\n        alt=\"${post.title}\"\n        class=\"aspect-video object-cover w-full\"\n      />\n    `\n  }\n\n  render() {\n    return html`\n      <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n        <!-- start: widget title -->\n        ${this.type === 'relatedArticle'\n          ? this.titleRelatedArticle()\n          : this.titleOtherArticle()}\n        <!-- end: widget title -->\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n          <!-- start: left-post-loop -->\n          <div class=\"grid grid-cols-1 gap-6\">\n            ${this.posts[0]\n              ? this.posts[0].map(\n                  post => html`\n                    <div class=\"w-full\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a href=\"${post.permalink}\">\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n                                .isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p\n                              class=\"font-sans pt-2 text-sm ${this.isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${useTimeDifference(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : 'Belum ada artikel'}\n          </div>\n          <!-- end: left-post-loop -->\n\n          <!-- start: right-post-loop -->\n          <div class=\"flex flex-col w-full\">\n            ${this.posts[1]\n              ? this.posts[1].map(\n                  post => html`\n                    <div class=\"mb-6\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a href=\"${post.permalink}\">\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n                                .isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p\n                              class=\"font-sans pt-2 text-sm ${this.isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${useTimeDifference(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : ''}\n            <!-- start: ads -->\n            <slot></slot>\n            <!-- end: ads -->\n          </div>\n          <!-- end: right-post-loop -->\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\nimport { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js'\n\ncreateIntersectionObserverComponent()\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .chip {\n        align-items: center;\n        border-radius: 0.25rem;\n        display: flex;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.75rem;\n        font-weight: bold;\n        height: 1.5rem;\n        justify-content: center;\n        line-height: 1rem;\n        margin-bottom: 0.25rem;\n        padding: 0.375rem 0.5rem;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: Array }) posts: Post[][] = []\n  @property({ type: String }) recoID = ''\n  @property({ type: String }) permalinkArticle = ''\n  @property({ type: String }) userGuid = '0'\n  @property({ type: String }) slugs = ''\n  @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n    'relatedArticle'\n  @property({ type: String }) mainCategory = ''\n  @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n  @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n  @property({ type: Boolean }) isDark = false\n\n  // data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed\n  @property({ type: String }) tracker_content_id = '' //\n  @property({ type: String }) tracker_content_categories = ''\n  // datau user\n  @property({ type: String }) tracker_user_id = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_subscription_package = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_page_domain = ''\n\n  /**\n   * Fetch Data\n   */\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      if (this.type === 'relatedArticle') {\n        await this.relatedArticles()\n      } else if (this.type === 'otherArticle') {\n        await this.otherArticles()\n      }\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n\n  async relatedArticles() {\n    const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n    // Constructing parameters\n    const params = new URLSearchParams()\n    params.append('page_url', this.permalinkArticle)\n    params.append('page_type', 'read')\n    params.append('item_type', 'articles')\n    params.append('guid', this.userGuid)\n    params.append('slugs', this.slugs)\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    // get x-request-id from headers\n    const recoId = response.headers.get('X-Request-Id') || ''\n    this.recoID = recoId\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n    } else {\n      throw new Error('Data artikel terkait tidak ditemukan')\n    }\n  }\n\n  async otherArticles() {\n    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'\n\n    // Constructing the URL with parameters\n    const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      const items = result.result\n      const firstChunk = items.slice(0, 5)\n      const secondChunk = items.slice(5, 7)\n      this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n    } else {\n      throw new Error('Data artikel lainnya tidak ditemukan')\n    }\n  }\n\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  /**\n   * Render widget components\n   */\n\n  private titleRelatedArticle() {\n    return html`\n      <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n        <div>\n          <h5\n            class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n              .isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            Artikel Terkait\n          </h5>\n        </div>\n      </div>\n    `\n  }\n\n  private titleOtherArticle() {\n    return html`\n      <a\n        href=\"${this.titleLink}\"\n        class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n      >\n        <h5\n          class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n            ? 'text-blue-200'\n            : 'text-brand-1'}\"\n        >\n          ${this.titleName}\n        </h5>\n      </a>\n    `\n  }\n\n  renderChips(post: Post) {\n    const chips = []\n    const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n    const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n    const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n    const isFreemium = post.isFreemium === true\n\n    if (isKompasBrief) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n          </div>\n        `\n      )\n    } else if (isEksklusif) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-grey-600 text-white\">\n              <img\n                src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n                alt=\"Kompas Icon\"\n                style=\"width: 16px; height: 16px; margin-right: 4px;\"\n              />\n              Eksklusif\n            </div>\n          </div>\n        `\n      )\n    } else if (isFreemium) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n          </div>\n        `\n      )\n    } else if (isAnalisis) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n          </div>\n        `\n      )\n    }\n\n    return chips\n  }\n\n  renderImage(post: Post) {\n    const { thumbnailMedium } = post.thumbnails?.sizes || {}\n    if (!thumbnailMedium) return ''\n\n    const { permalink, width, height } = thumbnailMedium\n    return html`\n      <img\n        src=\"${permalink}\"\n        width=\"${width}\"\n        height=\"${height}\"\n        alt=\"${post.title}\"\n        class=\"aspect-video object-cover w-full\"\n      />\n    `\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private recoContentClicked(post: Post, recoIndex: number) {\n    if (this.type !== 'relatedArticle') return // Hanya trigger event jika type 'relatedArticle'\n\n    window.dataLayer = window.dataLayer || []\n    window.dataLayer.push({\n      // data dari component\n      event: 'reco_content_clicked',\n      content_id: post.name,\n      content_categories: post.category?.map(cat => cat.name).join('|') || '',\n      reco_index: recoIndex,\n      reco_id: this.recoID || '',\n      reco_model: 'context',\n      // data dari implementor\n      user_id: this.tracker_user_id || 'NA',\n      user_type: this.tracker_user_type || '',\n      subscription_status: this.tracker_subscription_status || '',\n      subscription_package: this.tracker_subscription_package || '',\n      metered_wall_type: this.tracker_metered_wall_type || '',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  private recoContentViewed() {\n    window.dataLayer = window.dataLayer || []\n    window.dataLayer.push({\n      event: 'reco_content_viewed',\n      content_id: this.tracker_content_id || '',\n      content_categories: this.tracker_content_categories || '',\n      user_type: this.tracker_user_type || '',\n      subscription_status: this.tracker_subscription_status || '',\n      subscription_package: this.tracker_subscription_package || '',\n      metered_wall_type: this.tracker_metered_wall_type || '',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  handleObserver() {\n    if (this.type === 'relatedArticle') {\n      this.recoContentViewed()\n    } else {\n      // kalo mau implemen buat artikel lainnya\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n        <!-- start: widget title -->\n        ${this.type === 'relatedArticle'\n          ? this.titleRelatedArticle()\n          : this.titleOtherArticle()}\n        <!-- end: widget title -->\n        <intersection-observer-component\n          .onTrigger=\"${() => this.handleObserver()}\"\n        ></intersection-observer-component>\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n          <!-- start: left-post-loop -->\n          <div class=\"grid grid-cols-1 gap-6\">\n            ${this.posts[0]\n              ? this.posts[0].map(\n                  (post, index) => html`\n                    <div class=\"w-full\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a\n                            href=\"${post.permalink}?open_from=${this.type ===\n                            'relatedArticle'\n                              ? 'Artikel_Terkait'\n                              : 'Artikel_Lainnya'}\"\n                            @click=\"${() =>\n                              this.recoContentClicked(post, index + 1)}\"\n                          >\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n                                .isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p\n                              class=\"font-sans pt-2 text-sm ${this.isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${useTimeDifference(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : 'Belum ada artikel'}\n          </div>\n          <!-- end: left-post-loop -->\n\n          <!-- start: right-post-loop -->\n          <div class=\"flex flex-col w-full\">\n            ${this.posts[1]\n              ? this.posts[1].map(\n                  (post, index) => html`\n                    <div class=\"mb-6\">\n                      <div class=\"flex\">\n                        <div class=\"w-1/2\">${this.renderImage(post)}</div>\n                        <div class=\"flex-grow pl-4 w-1/2\">\n                          <a\n                            href=\"${post.permalink}?open_from=${this.type ===\n                            'relatedArticle'\n                              ? 'Artikel_Terkait'\n                              : 'Artikel_Lainnya'}\"\n                            @click=\"${() =>\n                              this.recoContentClicked(post, index + 6)}\"\n                          >\n                            ${this.renderChips(post)}\n                            <h5\n                              class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n                                .isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p\n                              class=\"font-sans pt-2 text-sm ${this.isDark\n                                ? 'text-white'\n                                : 'text-grey-600'}\"\n                            >\n                              ${useTimeDifference(post.publishedDate)}\n                            </p>\n                          </a>\n                        </div>\n                      </div>\n                    </div>\n                  `\n                )\n              : ''}\n            <!-- start: ads -->\n            <slot></slot>\n            <!-- end: ads -->\n          </div>\n          <!-- end: right-post-loop -->\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-widget-recirculations-default/types.d.ts

@@ -1,8 +1,16 @@
+interface Category {
+    id: number;
+    name: string;
+    slug: string;
+}
 interface PostTag {
     slug: string;
 }
 export interface Post {
+    id: number;
     title: string;
+    name: string;
+    category: Category[];
     isAnalisis?: boolean;
     isEksklusif?: boolean;
     isFreemium?: boolean;

package/dist/src/components/kompasid-widget-recirculations-default/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/types.ts"],"names":[],"mappings":"","sourcesContent":["interface PostTag {\n  slug: string\n}\n\nexport interface Post {\n  title: string\n  isAnalisis?: boolean\n  isEksklusif?: boolean\n  isFreemium?: boolean\n  featuredImageThumbnailMedium: string\n  permalink: string\n  publishedDate: string\n  postTag?: PostTag[]\n  thumbnails: {\n    sizes: {\n      thumbnailMedium: {\n        permalink: string\n        width: number\n        height: number\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/types.ts"],"names":[],"mappings":"","sourcesContent":["interface Category {\n  id: number\n  name: string\n  slug: string\n}\n\ninterface PostTag {\n  slug: string\n}\n\nexport interface Post {\n  id: number\n  title: string\n  name: string\n  category: Category[]\n  isAnalisis?: boolean\n  isEksklusif?: boolean\n  isFreemium?: boolean\n  featuredImageThumbnailMedium: string\n  permalink: string\n  publishedDate: string\n  postTag?: PostTag[]\n  thumbnails: {\n    sizes: {\n      thumbnailMedium: {\n        permalink: string\n        width: number\n        height: number\n      }\n    }\n  }\n}\n"]}

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts

@@ -22,6 +22,7 @@ export declare class KompasWidgetRecirculationsList extends LitElement {
     fetchArticles(): Promise<void>;
     handleFetchError(error: unknown): void;
     renderChips(item: ListItem): import("lit").TemplateResult<1>[];
+    getSectionName(): "Section_Terbaru" | "Section_Terpopuler";
     render(): import("lit").TemplateResult<1>;
 }
 export {};

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js

@@ -92,6 +92,13 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
         }
         return chips;
     }
+    getSectionName() {
+        const sectionMapping = {
+            Terbaru: 'Section_Terbaru',
+            Terpopuler: 'Section_Terpopuler',
+        };
+        return sectionMapping[this.widgetTitle] || '';
+    }
     render() {
         return html `
       <div class="${this.isDark ? 'bg-dark-5 ' : ''}">
@@ -113,7 +120,7 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
                     <div class="flex flex-col w-full">
                       ${this.renderChips(item)}
                       <a
-                        href="${item.permalink}"
+                        href="${item.permalink}?open_from=${this.getSectionName()}"
                         class="font-bold font-lora hover:underline leading-normal text-xl ${this
             .isDark
             ? 'text-white'

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\ninterface PostTag {\n  slug: string\n}\n\ninterface ListItem {\n  title: string\n  isAnalisis?: boolean\n  isEksklusif?: boolean\n  isFreemium?: boolean\n  isKompasBrief?: boolean\n  permalink: string\n  publishedDate?: string\n  postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n  @property({ type: String }) widgetTitle = ''\n  @property({ type: Array }) articleList: ListItem[] = []\n  @property({ type: String }) apiSlug = ''\n\n  @property({ type: Boolean }) isDark = false\n\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .chip {\n        align-items: center;\n        border-radius: 0.25rem;\n        display: flex;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.75rem;\n        font-weight: bold;\n        height: 1.5rem;\n        justify-content: center;\n        line-height: 1rem;\n        margin-bottom: 0.25rem;\n        padding: 0.375rem 0.5rem;\n      }\n    `,\n    TWStyles,\n  ]\n\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchArticles()\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n\n  async fetchArticles() {\n    const endpoint = `https://cds.kompas.id/api/v2/article/${this.apiSlug}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      this.articleList = result.result.map(\n        (article: {\n          postTag?: never[] | undefined\n          isFreemium?: false | undefined\n          title: any\n          permalink: any\n          publishedDate: any\n        }) => {\n          const {\n            postTag = [],\n            isFreemium = false,\n            title,\n            permalink,\n            publishedDate,\n          } = article\n\n          const isAnalisis = postTag.some(\n            (tag: { slug: string }) => tag.slug === 'analisis'\n          )\n          const isEksklusif = postTag.some(\n            (tag: { slug: string }) => tag.slug === 'eksklusif'\n          )\n          const isKompasBrief = postTag.some(\n            (tag: { slug: string }) => tag.slug === 'kompas-brief'\n          )\n\n          return {\n            isAnalisis,\n            isEksklusif,\n            isFreemium,\n            isKompasBrief,\n            title,\n            permalink,\n            publishedDate,\n          }\n        }\n      )\n    } else {\n      throw new Error('Data artikel populer tidak ditemukan')\n    }\n  }\n\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  renderChips(item: ListItem) {\n    const chips = []\n\n    if (item.isKompasBrief) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n          </div>\n        `\n      )\n    } else if (item.isEksklusif) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-grey-600 text-white\">\n              <img\n                src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n                alt=\"Kompas Icon\"\n                style=\"width: 16px; height: 16px; margin-right: 4px;\"\n              />\n              Eksklusif\n            </div>\n          </div>\n        `\n      )\n    } else if (item.isFreemium) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n          </div>\n        `\n      )\n    } else if (item.isAnalisis) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n          </div>\n        `\n      )\n    }\n\n    return chips\n  }\n\n  render() {\n    return html`\n      <div class=\"${this.isDark ? 'bg-dark-5 ' : ''}\">\n        <div class=\"mb-6\">\n          <h5\n            class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n              .isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            ${this.widgetTitle}\n          </h5>\n        </div>\n\n        <ul class=\"flex flex-col\">\n          ${this.articleList.slice(0, 5).map(\n            item =>\n              html`\n                <li class=\"flex flex-col items-start mb-3\">\n                  <div class=\"flex w-full\">\n                    <div class=\"flex flex-col w-full\">\n                      ${this.renderChips(item)}\n                      <a\n                        href=\"${item.permalink}\"\n                        class=\"font-bold font-lora hover:underline leading-normal text-xl ${this\n                          .isDark\n                          ? 'text-white'\n                          : 'text-grey-600'}\"\n                      >\n                        ${item.title}\n                      </a>\n                      <div\n                        class=\"flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this\n                          .isDark\n                          ? 'text-white'\n                          : 'text-grey-500'}\"\n                      >\n                        ${item.publishedDate\n                          ? useTimeDifference(item.publishedDate, true)\n                          : 'Tanggal tidak tersedia'}\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\ninterface PostTag {\n  slug: string\n}\n\ninterface ListItem {\n  title: string\n  isAnalisis?: boolean\n  isEksklusif?: boolean\n  isFreemium?: boolean\n  isKompasBrief?: boolean\n  permalink: string\n  publishedDate?: string\n  postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n  @property({ type: String }) widgetTitle = ''\n  @property({ type: Array }) articleList: ListItem[] = []\n  @property({ type: String }) apiSlug = ''\n\n  @property({ type: Boolean }) isDark = false\n\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .chip {\n        align-items: center;\n        border-radius: 0.25rem;\n        display: flex;\n        font-family: 'PT Sans', sans-serif;\n        font-size: 0.75rem;\n        font-weight: bold;\n        height: 1.5rem;\n        justify-content: center;\n        line-height: 1rem;\n        margin-bottom: 0.25rem;\n        padding: 0.375rem 0.5rem;\n      }\n    `,\n    TWStyles,\n  ]\n\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchArticles()\n    } catch (error) {\n      this.handleFetchError(error)\n    }\n  }\n\n  async fetchArticles() {\n    const endpoint = `https://cds.kompas.id/api/v2/article/${this.apiSlug}`\n\n    const response = await fetch(endpoint, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n\n    const result = await response.json()\n\n    if (result?.result) {\n      this.articleList = result.result.map(\n        (article: {\n          postTag?: never[] | undefined\n          isFreemium?: false | undefined\n          title: any\n          permalink: any\n          publishedDate: any\n        }) => {\n          const {\n            postTag = [],\n            isFreemium = false,\n            title,\n            permalink,\n            publishedDate,\n          } = article\n\n          const isAnalisis = postTag.some(\n            (tag: { slug: string }) => tag.slug === 'analisis'\n          )\n          const isEksklusif = postTag.some(\n            (tag: { slug: string }) => tag.slug === 'eksklusif'\n          )\n          const isKompasBrief = postTag.some(\n            (tag: { slug: string }) => tag.slug === 'kompas-brief'\n          )\n\n          return {\n            isAnalisis,\n            isEksklusif,\n            isFreemium,\n            isKompasBrief,\n            title,\n            permalink,\n            publishedDate,\n          }\n        }\n      )\n    } else {\n      throw new Error('Data artikel populer tidak ditemukan')\n    }\n  }\n\n  handleFetchError(error: unknown) {\n    const errorMessage =\n      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n    alert(`Terjadi kesalahan: ${errorMessage}`)\n  }\n\n  renderChips(item: ListItem) {\n    const chips = []\n\n    if (item.isKompasBrief) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n          </div>\n        `\n      )\n    } else if (item.isEksklusif) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-grey-600 text-white\">\n              <img\n                src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n                alt=\"Kompas Icon\"\n                style=\"width: 16px; height: 16px; margin-right: 4px;\"\n              />\n              Eksklusif\n            </div>\n          </div>\n        `\n      )\n    } else if (item.isFreemium) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n          </div>\n        `\n      )\n    } else if (item.isAnalisis) {\n      chips.push(\n        html`\n          <div class=\"flex\">\n            <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n          </div>\n        `\n      )\n    }\n\n    return chips\n  }\n\n  getSectionName() {\n    const sectionMapping = {\n      Terbaru: 'Section_Terbaru',\n      Terpopuler: 'Section_Terpopuler',\n    } as const\n\n    return sectionMapping[this.widgetTitle as keyof typeof sectionMapping] || ''\n  }\n\n  render() {\n    return html`\n      <div class=\"${this.isDark ? 'bg-dark-5 ' : ''}\">\n        <div class=\"mb-6\">\n          <h5\n            class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n              .isDark\n              ? 'text-white'\n              : 'text-grey-600'}\"\n          >\n            ${this.widgetTitle}\n          </h5>\n        </div>\n\n        <ul class=\"flex flex-col\">\n          ${this.articleList.slice(0, 5).map(\n            item =>\n              html`\n                <li class=\"flex flex-col items-start mb-3\">\n                  <div class=\"flex w-full\">\n                    <div class=\"flex flex-col w-full\">\n                      ${this.renderChips(item)}\n                      <a\n                        href=\"${item.permalink}?open_from=${this.getSectionName()}\"\n                        class=\"font-bold font-lora hover:underline leading-normal text-xl ${this\n                          .isDark\n                          ? 'text-white'\n                          : 'text-grey-600'}\"\n                      >\n                        ${item.title}\n                      </a>\n                      <div\n                        class=\"flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this\n                          .isDark\n                          ? 'text-white'\n                          : 'text-grey-500'}\"\n                      >\n                        ${item.publishedDate\n                          ? useTimeDifference(item.publishedDate, true)\n                          : 'Tanggal tidak tersedia'}\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              `\n          )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export declare class IntersectionObserverComponent extends LitElement {
+    rootMargin: string;
+    threshold: number;
+    multipleTrigger: boolean;
+    forceTrigger: boolean;
+    timer: number;
+    onTrigger?: () => void;
+    elementTarget: HTMLElement;
+    private intersectionObserver;
+    private timerId;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleIntersection;
+    private handleEntryInView;
+    private clearTimer;
+    private emitTrigger;
+    render(): import("lit").TemplateResult<1>;
+}
+export declare const createIntersectionObserverComponent: () => typeof IntersectionObserverComponent;

package/dist/src/utils/IntersectionObserver.js

@@ -0,0 +1,109 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+export class IntersectionObserverComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rootMargin = '0px 0px 0px 0px';
+        this.threshold = 1;
+        this.multipleTrigger = false;
+        this.forceTrigger = false;
+        this.timer = 0;
+        this.intersectionObserver = null;
+        this.timerId = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), {
+            threshold: this.threshold,
+            rootMargin: this.rootMargin,
+        });
+    }
+    firstUpdated() {
+        var _a;
+        if (this.elementTarget) {
+            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(this.elementTarget);
+        }
+        if (this.forceTrigger) {
+            this.emitTrigger();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.clearTimer();
+    }
+    handleIntersection(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                this.handleEntryInView();
+            }
+            else {
+                this.clearTimer();
+            }
+        });
+    }
+    handleEntryInView() {
+        var _a;
+        if (this.timer > 0) {
+            this.clearTimer();
+            this.timerId = window.setTimeout(() => {
+                var _a;
+                this.emitTrigger();
+                if (!this.multipleTrigger) {
+                    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                }
+            }, this.timer);
+        }
+        else {
+            this.emitTrigger();
+            if (!this.multipleTrigger) {
+                (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            }
+        }
+    }
+    clearTimer() {
+        if (this.timerId !== null) {
+            clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+    }
+    emitTrigger() {
+        this.dispatchEvent(new CustomEvent('trigger'));
+        if (this.onTrigger) {
+            this.onTrigger();
+        }
+    }
+    render() {
+        return html `<div id="elementTarget"><slot></slot></div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], IntersectionObserverComponent.prototype, "rootMargin", void 0);
+__decorate([
+    property({ type: Number })
+], IntersectionObserverComponent.prototype, "threshold", void 0);
+__decorate([
+    property({ type: Boolean })
+], IntersectionObserverComponent.prototype, "multipleTrigger", void 0);
+__decorate([
+    property({ type: Boolean })
+], IntersectionObserverComponent.prototype, "forceTrigger", void 0);
+__decorate([
+    property({ type: Number })
+], IntersectionObserverComponent.prototype, "timer", void 0);
+__decorate([
+    property({ attribute: false })
+], IntersectionObserverComponent.prototype, "onTrigger", void 0);
+__decorate([
+    query('#elementTarget')
+], IntersectionObserverComponent.prototype, "elementTarget", void 0);
+export const createIntersectionObserverComponent = () => {
+    if (!customElements.get('intersection-observer-component')) {
+        customElements.define('intersection-observer-component', IntersectionObserverComponent);
+    }
+    return IntersectionObserverComponent;
+};
+//# sourceMappingURL=IntersectionObserver.js.map

package/dist/src/utils/IntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserver.js","sourceRoot":"","sources":["../../../src/utils/IntersectionObserver.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nexport class IntersectionObserverComponent extends LitElement {\n  @property({ type: String }) rootMargin: string = '0px 0px 0px 0px'\n  @property({ type: Number }) threshold: number = 1\n  @property({ type: Boolean }) multipleTrigger: boolean = false\n  @property({ type: Boolean }) forceTrigger: boolean = false\n  @property({ type: Number }) timer: number = 0\n  @property({ attribute: false }) onTrigger?: () => void\n\n  @query('#elementTarget') elementTarget!: HTMLElement\n\n  private intersectionObserver: IntersectionObserver | null = null\n  private timerId: number | null = null\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.intersectionObserver = new IntersectionObserver(\n      this.handleIntersection.bind(this),\n      {\n        threshold: this.threshold,\n        rootMargin: this.rootMargin,\n      }\n    )\n  }\n\n  firstUpdated(): void {\n    if (this.elementTarget) {\n      this.intersectionObserver?.observe(this.elementTarget)\n    }\n    if (this.forceTrigger) {\n      this.emitTrigger()\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.intersectionObserver?.disconnect()\n    this.clearTimer()\n  }\n\n  private handleIntersection(entries: IntersectionObserverEntry[]): void {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        this.handleEntryInView()\n      } else {\n        this.clearTimer()\n      }\n    })\n  }\n\n  private handleEntryInView(): void {\n    if (this.timer > 0) {\n      this.clearTimer()\n      this.timerId = window.setTimeout(() => {\n        this.emitTrigger()\n        if (!this.multipleTrigger) {\n          this.intersectionObserver?.disconnect()\n        }\n      }, this.timer)\n    } else {\n      this.emitTrigger()\n      if (!this.multipleTrigger) {\n        this.intersectionObserver?.disconnect()\n      }\n    }\n  }\n\n  private clearTimer(): void {\n    if (this.timerId !== null) {\n      clearTimeout(this.timerId)\n      this.timerId = null\n    }\n  }\n\n  private emitTrigger(): void {\n    this.dispatchEvent(new CustomEvent('trigger'))\n    if (this.onTrigger) {\n      this.onTrigger()\n    }\n  }\n\n  render() {\n    return html`<div id=\"elementTarget\"><slot></slot></div>`\n  }\n}\n\nexport const createIntersectionObserverComponent = () => {\n  if (!customElements.get('intersection-observer-component')) {\n    customElements.define(\n      'intersection-observer-component',\n      IntersectionObserverComponent\n    )\n  }\n  return IntersectionObserverComponent\n}\n"]}