@kompasid/lit-web-components 0.7.1 → 0.7.3

package/demo/index.html

@@ -54,6 +54,7 @@
       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'
+      import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
 
       const type = 'reguler'
       const theme = ''
@@ -111,19 +112,13 @@
       }
 
       const widgetRelatedPost = {
-        navigation: {
-          name: 'Artikel Terkait',
-          permalink: undefined
-        },
         permalinkArticle: 'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
         slugs: 'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision'
       }
 
       const widgetOtherPost = {
-        navigation: {
-          name: 'Lainnya Dalam Opini',
-          permalink: '/kategori/opini'
-        }
+        titleName: 'Lainnya Dalam Opini',
+        titleLink: '/kategori/opini'
       }
 
       render(
@@ -142,13 +137,13 @@
           ></kompasid-header-account>
 
           <kompasid-widget-recirculations-default
-            .navigation=${widgetRelatedPost.navigation}
             .permalinkArticle=${widgetRelatedPost.permalinkArticle}
             .slugs=${widgetRelatedPost.slugs}
           ></kompasid-widget-recirculations-default>
 
           <kompasid-widget-recirculations-default
-            .navigation=${widgetOtherPost.navigation}
+            .titleName=${widgetOtherPost.titleName}
+            .titleLink=${widgetOtherPost.titleLink}
             type='otherArticle'
             mainCategory='opini'
           ></kompasid-widget-recirculations-default>
@@ -250,6 +245,8 @@
           .tracker_metered_wall_balance=${trackerMeteredWallBalance}
           .tracker_page_domain=${trackerPageDomain}
           ></kompasid-metered-wall-register>
+
+          <!-- <kompasid-grace-period totalGracePeriod="5" subscriptionId="9802032"></kompasid-grace-period> -->
         `,
         document.querySelector('#demo')
       )

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export declare class KompasGracePeriod extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * property totalGracePeriod = how many days are left in grace period
+     * property isColumn = changes how the component looks on different screen sizes
+     * property isShowButton = shows or hides a subscription button
+     * property subscriptionId = used for renewal subs
+     */
+    totalGracePeriod: number;
+    isColumn: boolean;
+    isShowButton: boolean;
+    subscriptionId: string;
+    /**
+     * State
+     */
+    private maxGracePeriod;
+    private updateSubscription;
+    private getCountdownGracePeriod;
+    private redirectToBerlangganan;
+    private dataLayeronPerbaruiLanggananButton;
+    private dataLayeronGracePeriod;
+    private gracePeriodTemplate;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js

@@ -0,0 +1,146 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { deviceType } from '../../utils/deviceType.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+let KompasGracePeriod = class KompasGracePeriod extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        /**
+         * property totalGracePeriod = how many days are left in grace period
+         * property isColumn = changes how the component looks on different screen sizes
+         * property isShowButton = shows or hides a subscription button
+         * property subscriptionId = used for renewal subs
+         */
+        this.totalGracePeriod = 0;
+        this.isColumn = false;
+        this.isShowButton = false;
+        this.subscriptionId = '';
+        /**
+         * State
+         */
+        this.maxGracePeriod = 7;
+        this.updateSubscription = 'https://checkoutv2.kompas.id';
+    }
+    getCountdownGracePeriod() {
+        const { totalGracePeriod } = this;
+        const { maxGracePeriod } = this;
+        if (totalGracePeriod === 7) {
+            return html `
+        <p>
+          Anda dalam <b class="text-orange-500"> hari terakhir</b> masa tenggang
+          langganan. Segera perbarui paket langganan untuk tetap mengakses
+          konten premium tanpa batas.
+        </p>
+      `;
+        }
+        return html `
+      <p>
+        Masa tenggang langganan Anda tersisa
+        <b class="text-orange-500"
+          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b
+        >. Segera perbarui paket langganan untuk tetap mengakses konten premium
+        tanpa batas.
+      </p>
+    `;
+    }
+    redirectToBerlangganan() {
+        this.dataLayeronPerbaruiLanggananButton();
+        window.open(`${this.updateSubscription}/kdp?productId=${this.subscriptionId}`);
+    }
+    dataLayeronPerbaruiLanggananButton() {
+        window.dataLayer.push({
+            event: 'gracePeriodClick',
+            interface: deviceType(),
+            dayLeft: this.maxGracePeriod - this.totalGracePeriod,
+            urlName: window.location.href,
+        });
+    }
+    dataLayeronGracePeriod() {
+        window.dataLayer.push({
+            event: 'gracePeriodImpression',
+            interface: deviceType(),
+            dayLeft: this.maxGracePeriod - this.totalGracePeriod,
+            urlName: window.location.href,
+        });
+    }
+    gracePeriodTemplate() {
+        return html `
+      <div
+        class="${this.isColumn
+            ? 'rounded-lg'
+            : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto"
+      >
+        <div class="text-grey-600 text-sm md:text-base self-center text-left">
+          ${this.getCountdownGracePeriod()}
+        </div>
+        ${!this.isShowButton
+            ? html `
+              <div
+                class="flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0"
+              >
+                <button
+                  @click=${this.redirectToBerlangganan}
+                  class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto"
+                >
+                  Perbarui Langganan
+                </button>
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.dataLayeronGracePeriod();
+    }
+    render() {
+        return html `
+      <div class="sticky bottom-0 w-full h-full bg-orange-100">
+        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}
+      </div>
+    `;
+    }
+};
+KompasGracePeriod.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "totalGracePeriod", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasGracePeriod.prototype, "isColumn", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasGracePeriod.prototype, "isShowButton", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "subscriptionId", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "maxGracePeriod", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "updateSubscription", void 0);
+KompasGracePeriod = __decorate([
+    customElement('kompasid-grace-period')
+], KompasGracePeriod);
+export { KompasGracePeriod };
+//# sourceMappingURL=KompasGracePeriod.js.map

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property subscriptionId = used for renewal subs\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = false\n  @property({ type: String }) subscriptionId = ''\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n          langganan. Segera perbarui paket langganan untuk tetap mengakses\n          konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <b class=\"text-orange-500\"\n          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    window.open(\n      `${this.updateSubscription}/kdp?productId=${this.subscriptionId}`\n    )\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    return html`\n      <div\n        class=\"${this.isColumn\n          ? 'rounded-lg'\n          : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n      >\n        <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${!this.isShowButton\n          ? html`\n              <div\n                class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n              >\n                <button\n                  @click=${this.redirectToBerlangganan}\n                  class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n                >\n                  Perbarui Langganan\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}

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

@@ -1,22 +1,19 @@
 import { LitElement } from 'lit';
-import { Post, Navigation } from './types.js';
+import { Post } from './types.js';
 export declare class KompasWidgetRecirculationsDefault extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
      * Props
      */
     posts: Post[][];
-    navigation: Navigation | undefined;
     accessToken: string;
     permalinkArticle: string;
     userGuid: string;
     slugs: string;
     type: 'relatedArticle' | 'otherArticle';
     mainCategory: string;
-    /**
-     * Getters
-     */
-    get navigationPermalink(): string | undefined;
+    titleName: string;
+    titleLink: string;
     /**
      * Fetch Data
      */
@@ -32,7 +29,8 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
     /**
      * Render widget components
      */
-    private WidgetTitle;
+    private titleRelatedArticle;
+    private titleOtherArticle;
     renderChips(post: Post): import("lit").TemplateResult<1>[];
     renderImage(post: Post): import("lit").TemplateResult<1> | "";
     render(): import("lit").TemplateResult<1>;

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

@@ -11,20 +11,14 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
          * Props
          */
         this.posts = [];
-        this.navigation = undefined;
         this.accessToken = '';
         this.permalinkArticle = '';
         this.userGuid = '0';
         this.slugs = '';
         this.type = 'relatedArticle';
         this.mainCategory = '';
-    }
-    /**
-     * Getters
-     */
-    get navigationPermalink() {
-        var _a;
-        return (_a = this.navigation) === null || _a === void 0 ? void 0 : _a.permalink;
+        this.titleName = ''; // contoh: Artikel Terkait / Lainnya dalam 'kategori'
+        this.titleLink = ''; // contoh: /kategori/opini
     }
     /**
      * Fetch Data
@@ -133,40 +127,29 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
     /**
      * Render widget components
      */
-    WidgetTitle() {
-        var _a, _b;
-        if (this.navigationPermalink) {
-            return html `
-        <a
-          href="${this.navigationPermalink}"
-          class="flex font-sans uppercase items-start mb-6 mt-8"
-        >
-          <h5
-            class="${[
-                'capitalize font-bold font-sans',
-                this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
-            ].join(' ')}"
-          >
-            ${(_a = this.navigation) === null || _a === void 0 ? void 0 : _a.name}
-          </h5>
-        </a>
-      `;
-        }
+    titleRelatedArticle() {
         return html `
       <div class="flex font-sans uppercase items-start mb-6 mt-8">
         <div>
-          <h5
-            class="${[
-            'capitalize font-bold font-sans',
-            this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
-        ].join(' ')}"
-          >
-            ${(_b = this.navigation) === null || _b === void 0 ? void 0 : _b.name}
+          <h5 class="capitalize font-bold font-sans text-grey-600">
+            Artikel Terkait
           </h5>
         </div>
       </div>
     `;
     }
+    titleOtherArticle() {
+        return html `
+      <a
+        href="${this.titleLink}"
+        class="flex font-sans uppercase items-start mb-6 mt-8"
+      >
+        <h5 class="capitalize font-bold font-sans text-brand-1">
+          ${this.titleName}
+        </h5>
+      </a>
+    `;
+    }
     renderChips(post) {
         var _a, _b;
         const chips = [];
@@ -223,7 +206,9 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         return html `
       <div class="w-full">
         <!-- start: widget title -->
-        ${this.WidgetTitle()}
+        ${this.type === 'relatedArticle'
+            ? this.titleRelatedArticle()
+            : this.titleOtherArticle()}
         <!-- end: widget title -->
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
@@ -312,9 +297,6 @@ KompasWidgetRecirculationsDefault.styles = [
 __decorate([
     property({ type: Array })
 ], KompasWidgetRecirculationsDefault.prototype, "posts", void 0);
-__decorate([
-    property({ type: Object })
-], KompasWidgetRecirculationsDefault.prototype, "navigation", void 0);
 __decorate([
     property({ type: String })
 ], KompasWidgetRecirculationsDefault.prototype, "accessToken", void 0);
@@ -333,6 +315,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasWidgetRecirculationsDefault.prototype, "mainCategory", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "titleName", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "titleLink", 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 { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post, Navigation } from './types.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: Object }) navigation: Navigation | undefined = undefined\n  @property({ type: String }) accessToken = ''\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\n  /**\n   * Getters\n   */\n  get navigationPermalink(): string | undefined {\n    return this.navigation?.permalink\n  }\n\n  /**\n   * Fetch Data\n   */\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchAccessToken()\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 fetchAccessToken() {\n    const response = await fetch(\n      'https://api.kompas.id/account/api/v1/login/guest',\n      {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          email: 'anonynous.user@kompas.id',\n        }),\n      }\n    )\n\n    const result = await response.json()\n\n    if (result?.data?.accessToken) {\n      this.accessToken = result.data.accessToken\n    } else {\n      throw new Error('Token akses tidak tersedia dalam respons')\n    }\n  }\n\n  async relatedArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\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        Authorization: `Bearer ${this.accessToken}`,\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      console.log('related article:', this.posts)\n    } else {\n      throw new Error('Data artikel terkait tidak ditemukan')\n    }\n  }\n\n  async otherArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\n    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\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        Authorization: `Bearer ${this.accessToken}`,\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      console.log('other article:', this.posts)\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   * Function to format date\n   */\n  formatDate(date: string) {\n    return format(new Date(date), 'dd MMMM yyyy', { locale: id })\n  }\n\n  /**\n   * Render widget components\n   */\n\n  private WidgetTitle() {\n    if (this.navigationPermalink) {\n      return html`\n        <a\n          href=\"${this.navigationPermalink}\"\n          class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n        >\n          <h5\n            class=\"${[\n              'capitalize font-bold font-sans',\n              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',\n            ].join(' ')}\"\n          >\n            ${this.navigation?.name}\n          </h5>\n        </a>\n      `\n    }\n\n    return html`\n      <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n        <div>\n          <h5\n            class=\"${[\n              'capitalize font-bold font-sans',\n              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',\n            ].join(' ')}\"\n          >\n            ${this.navigation?.name}\n          </h5>\n        </div>\n      </div>\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 isFreemium = post.isFreemium === true\n\n    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\">\n        <!-- start: widget title -->\n        ${this.WidgetTitle()}\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-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\n                              ${this.formatDate(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-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\n                              ${this.formatDate(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":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAIjD,IAAM,iCAAiC,GAAvC,MAAM,iCAAkC,SAAQ,UAAU;IAA1D;;QAuBL;;WAEG;QACwB,UAAK,GAAa,EAAE,CAAA;QACnB,gBAAW,GAAG,EAAE,CAAA;QAChB,qBAAgB,GAAG,EAAE,CAAA;QACrB,aAAQ,GAAG,GAAG,CAAA;QACd,UAAK,GAAG,EAAE,CAAA;QACV,SAAI,GAC9B,gBAAgB,CAAA;QACU,iBAAY,GAAG,EAAE,CAAA;QACjB,cAAS,GAAG,EAAE,CAAA,CAAC,qDAAqD;QACpE,cAAS,GAAG,EAAE,CAAA,CAAC,0BAA0B;IA4RvE,CAAC;IA1RC;;OAEG;IACH,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI;YACF,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;YAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,EAAE;gBAClC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAA;aAC7B;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,cAAc,EAAE;gBACvC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;aAC3B;SACF;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;SAC7B;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB;;QACpB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAC1B,kDAAkD,EAClD;YACE,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;aACnC;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gBACnB,KAAK,EAAE,0BAA0B;aAClC,CAAC;SACH,CACF,CAAA;QAED,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAEpC,IAAI,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,0CAAE,WAAW,EAAE;YAC7B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAA;SAC3C;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAA;SAC5D;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAA;SAC9C;QAED,MAAM,WAAW,GAAG,6BAA6B,CAAA;QAEjD,0BAA0B;QAC1B,MAAM,MAAM,GAAG,IAAI,eAAe,EAAE,CAAA;QACpC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAChD,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QAClC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;QACtC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACpC,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAElC,uCAAuC;QACvC,MAAM,QAAQ,GAAG,GAAG,WAAW,mBAAmB,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAA;QAErE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,IAAI,CAAC,WAAW,EAAE;gBAC3C,cAAc,EAAE,kBAAkB;aACnC;SACF,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAEpC,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE;YAClB,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;YAC3B,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACrC,IAAI,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;YACpE,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;SAC5C;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;SACxD;IACH,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAA;SAC9C;QAED,MAAM,eAAe,GAAG,8BAA8B,CAAA;QAEtD,uCAAuC;QACvC,MAAM,QAAQ,GAAG,GAAG,eAAe,0BAA0B,IAAI,CAAC,YAAY,EAAE,CAAA;QAEhF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,IAAI,CAAC,WAAW,EAAE;gBAC3C,cAAc,EAAE,kBAAkB;aACnC;SACF,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAEpC,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE;YAClB,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;YAC3B,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACrC,IAAI,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;YACpE,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;SAC1C;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;SACxD;IACH,CAAC;IAED,gBAAgB,CAAC,KAAc;QAC7B,MAAM,YAAY,GAChB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAA;QACtE,KAAK,CAAC,sBAAsB,YAAY,EAAE,CAAC,CAAA;IAC7C,CAAC;IAED;;OAEG;IACH,UAAU,CAAC,IAAY;QACrB,OAAO,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;IAC/D,CAAC;IAED;;OAEG;IAEK,mBAAmB;QACzB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAA;IACH,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,SAAS;;;;YAIlB,IAAI,CAAC,SAAS;;;KAGrB,CAAA;IACH,CAAC;IAED,WAAW,CAAC,IAAU;;QACpB,MAAM,KAAK,GAAG,EAAE,CAAA;QAChB,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,UAAU,CAAC,CAAA;QACrE,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QACvE,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAA;QAE3C,IAAI,WAAW,EAAE;YACf,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;;;;;;;;SAWH,CACF,CAAA;SACF;aAAM,IAAI,UAAU,EAAE;YACrB,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;SAIH,CACF,CAAA;SACF;aAAM,IAAI,UAAU,EAAE;YACrB,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;SAIH,CACF,CAAA;SACF;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAED,WAAW,CAAC,IAAU;;QACpB,MAAM,EAAE,eAAe,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,KAAI,EAAE,CAAA;QACxD,IAAI,CAAC,eAAe;YAAE,OAAO,EAAE,CAAA;QAE/B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,eAAe,CAAA;QACpD,OAAO,IAAI,CAAA;;eAEA,SAAS;iBACP,KAAK;kBACJ,MAAM;eACT,IAAI,CAAC,KAAK;;;KAGpB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAC9B,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;;;;cAMtB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;6CAGe,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;qCAE9B,IAAI,CAAC,SAAS;8BACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;;;gCAIpB,IAAI,CAAC,KAAK;;;gCAGV,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;mBAMhD,CACF;YACH,CAAC,CAAC,mBAAmB;;;;;;cAMrB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CACf,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;6CAGe,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;qCAE9B,IAAI,CAAC,SAAS;8BACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;;;gCAIpB,IAAI,CAAC,KAAK;;;gCAGV,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;mBAMhD,CACF;YACH,CAAC,CAAC,EAAE;;;;;;;;KAQb,CAAA;IACH,CAAC;;AA7TM,wCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;IACD,QAAQ;CACT,CAAA;AAK0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gEAAqB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2EAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DACT;AACU;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAe;AAnC/B,iCAAiC;IAD7C,aAAa,CAAC,wCAAwC,CAAC;GAC3C,iCAAiC,CA+T7C;SA/TY,iCAAiC","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.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 }) accessToken = ''\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  /**\n   * Fetch Data\n   */\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchAccessToken()\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 fetchAccessToken() {\n    const response = await fetch(\n      'https://api.kompas.id/account/api/v1/login/guest',\n      {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          email: 'anonynous.user@kompas.id',\n        }),\n      }\n    )\n\n    const result = await response.json()\n\n    if (result?.data?.accessToken) {\n      this.accessToken = result.data.accessToken\n    } else {\n      throw new Error('Token akses tidak tersedia dalam respons')\n    }\n  }\n\n  async relatedArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\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        Authorization: `Bearer ${this.accessToken}`,\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      console.log('related article:', this.posts)\n    } else {\n      throw new Error('Data artikel terkait tidak ditemukan')\n    }\n  }\n\n  async otherArticles() {\n    if (!this.accessToken) {\n      throw new Error('Token akses tidak tersedia')\n    }\n\n    const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\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        Authorization: `Bearer ${this.accessToken}`,\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      console.log('other article:', this.posts)\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   * Function to format date\n   */\n  formatDate(date: string) {\n    return format(new Date(date), 'dd MMMM yyyy', { locale: id })\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 class=\"capitalize font-bold font-sans text-grey-600\">\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 class=\"capitalize font-bold font-sans text-brand-1\">\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 isFreemium = post.isFreemium === true\n\n    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\">\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-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\n                              ${this.formatDate(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-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\n                              ${this.formatDate(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

@@ -20,8 +20,4 @@ export interface Post {
         };
     };
 }
-export interface Navigation {
-    name: string;
-    permalink: string;
-}
 export {};

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\nexport interface Navigation {\n  name: string\n  permalink: string\n}\n"]}
+{"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"]}

package/dist/src/index.d.ts

@@ -7,6 +7,7 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js';
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js';
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js';
 declare global {
     interface Window {
         gtag: (...args: any[]) => void;

package/dist/src/index.js

@@ -7,4 +7,5 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js';
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js';
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,0FAA0F,CAAA;AAC5I,OAAO,EAAE,8BAA8B,EAAE,MAAM,oFAAoF,CAAA;AACnI,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAA","sourcesContent":["export { KompasWidgetRecirculationsDefault } from './components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'\nexport { KompasWidgetRecirculationsList } from './components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'\nexport { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\nexport { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'\nexport { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'\n\ndeclare global {\n  interface Window {\n    gtag: (...args: any[]) => void\n    dataLayer: Record<string, any>\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,0FAA0F,CAAA;AAC5I,OAAO,EAAE,8BAA8B,EAAE,MAAM,oFAAoF,CAAA;AACnI,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAA;AACjG,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAA","sourcesContent":["export { KompasWidgetRecirculationsDefault } from './components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'\nexport { KompasWidgetRecirculationsList } from './components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'\nexport { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\nexport { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'\nexport { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'\nexport { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'\n\ndeclare global {\n  interface Window {\n    gtag: (...args: any[]) => void\n    dataLayer: Record<string, any>\n  }\n}\n"]}

package/dist/tailwind/tailwind.js

@@ -983,14 +983,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
-  .w-\\[165px\\] {
-    width: 165px;
-  }
-
-  .min-w-\\[165px\\] {
-    min-width: 165px;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1011,10 +1003,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 20rem;
   }
 
-  .max-w-\\[165px\\] {
-    max-width: 165px;
-  }
-
   .flex-none {
     flex: none;
   }
@@ -1483,6 +1471,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1rem;
   }
 
+  .px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -1533,11 +1526,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -2030,6 +2018,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 13rem;
     }
 
+    .md\\:w-\\[165px\\] {
+      width: 165px;
+    }
+
     .md\\:w-\\[350px\\] {
       width: 350px;
     }
@@ -2058,10 +2050,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: auto;
     }
 
-    .md\\:w-\\[165px\\] {
-      width: 165px;
-    }
-
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
@@ -2126,6 +2114,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .md\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-x-reverse: 0;
+      margin-right: calc(1rem * var(--tw-space-x-reverse));
+      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2226,6 +2220,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1.75rem;
     }
 
+    .md\\:pt-0 {
+      padding-top: 0px;
+    }
+
     .md\\:pt-3 {
       padding-top: 0.75rem;
     }
@@ -2389,6 +2387,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 0px;
     }
 
+    .lg\\:px-20 {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
+
     .lg\\:px-24 {
       padding-left: 6rem;
       padding-right: 6rem;
@@ -2399,6 +2402,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 2.5rem;
     }
 
+    .lg\\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .lg\\:pb-0 {
       padding-bottom: 0px;
     }