@kompasid/lit-web-components 0.8.5 → 0.8.7

package/demo/index.html

@@ -87,7 +87,7 @@
       const headCopyExpand = ''
       const headCopyCollapse = ''
       const expand = false
-      const countdownArticle = 2
+      const countdownArticle = 1
       const trackerContentAuthors = 'Author 1|Author 2'
       const trackerContentEditors = 'Editor 1|Editor 2'
       const trackerContentTags = 'Tag1|Tag2|Tag3'
@@ -98,7 +98,7 @@
       const notificationUrl = '/notif'
       const notificationTotal = '10'
       const ordersUrl = '/orders'
-      const subscriptionUrl = ''
+      const subscriptionUrl = '/subs'
       const readLaterUrl = '/baca-nanti'
       const totalGracePeriod = '5'
       const productId = 9802032
@@ -122,8 +122,8 @@
       }
 
       const widgetOtherPost = {
-        titleName: 'Lainnya Dalam Opini',
-        titleLink: '/kategori/opini',
+        titleName: 'Lainnya Dalam ekonomi',
+        titleLink: '/kategori/ekonomi',
       }
 
       render(
@@ -143,7 +143,7 @@
                 .notification_url=${notificationUrl}
                 .notification_total=${notificationTotal}
                 .orders_url=${ordersUrl}
-                .subscription_url=${subscriptionUrl}
+                .subscriptionUrl=${subscriptionUrl}
                 .read_later_url=${readLaterUrl}
                 .total_grace_period=${totalGracePeriod}
                 .paywall_location=${paywallLocation}
@@ -165,23 +165,23 @@
               ></kompasid-header-account>
             </div>
           </header>
-
-          <kompasid-widget-recirculations-default
-            .permalinkArticle=${widgetRelatedPost.permalinkArticle}
-            .slugs=${widgetRelatedPost.slugs}
-          ></kompasid-widget-recirculations-default>
-
+          
           <kompasid-widget-recirculations-list
             widgetTitle="Terpopuler"
             apiSlug="popular-article"
           >
           </kompasid-widget-recirculations-list>
 
+          <kompasid-widget-recirculations-default
+            .permalinkArticle=${widgetRelatedPost.permalinkArticle}
+            .slugs=${widgetRelatedPost.slugs}
+          ></kompasid-widget-recirculations-default>
+
           <kompasid-widget-recirculations-default
             .titleName=${widgetOtherPost.titleName}
             .titleLink=${widgetOtherPost.titleLink}
             type="otherArticle"
-            mainCategory="opini"
+            mainCategory="ekonomi"
           ></kompasid-widget-recirculations-default>
 
           <kompasid-paywall
@@ -277,6 +277,7 @@
             .tracker_metered_wall_type=${meteredWallType}
             .tracker_metered_wall_balance=${trackerMeteredWallBalance}
             .tracker_page_domain=${trackerPageDomain}
+            source="kompasid"
           ></kompasid-metered-wall-register>
 
           <!-- <kompasid-grace-period

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.d.ts

@@ -45,7 +45,6 @@ export declare class KompasMeteredWallRegister extends LitElement {
      */
     countdownArticle: number;
     defaultExpandBanner: boolean;
-    isDesktop: boolean;
     tracker_page_title: string;
     tracker_page_type: string;
     tracker_content_type: string;
@@ -62,11 +61,11 @@ export declare class KompasMeteredWallRegister extends LitElement {
     tracker_metered_wall_balance: number;
     tracker_page_domain: string;
     next_param: string;
+    source: string;
     /**
      * menentukan template yang akan di render
      */
     private setTemplate;
-    private checkIsDesktop;
     /**
      * Render Statement
      */

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js

@@ -26,14 +26,23 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
          * state textTemplate untuk menyimpan template yang di berikan.
          */
         this.textTemplate = {
-            default: { title: '', lastArticle: { title: '' } },
             expand: {
-                title: '',
                 description: '',
-                lastArticle: { title: '', description: '' },
+                imageUrl: '',
+                lastArticle: {
+                    title: '',
+                    description: '',
+                },
+                title: '',
+                ctaUrl: '',
+                ctaText: '',
+            },
+            collapse: {
+                lastArticle: {
+                    title: '',
+                },
+                title: '',
             },
-            ctaUrl: '',
-            ctaText: '',
         };
         /**
          * Props
@@ -60,7 +69,6 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
          */
         this.countdownArticle = 0;
         this.defaultExpandBanner = false;
-        this.isDesktop = false;
         this.tracker_page_title = '';
         this.tracker_page_type = '';
         this.tracker_content_type = '';
@@ -77,13 +85,14 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         this.tracker_metered_wall_balance = 0;
         this.tracker_page_domain = '';
         this.next_param = 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini';
+        this.source = 'default';
         /**
          * mengarahkan ke page checkout promo
          */
         this.redirectToCTAUrl = () => {
             const params = new URLSearchParams(window.location.href);
-            const newUrl = new URL(this.textTemplate.ctaUrl);
-            const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get('referrer');
+            const newUrl = new URL(this.textTemplate.expand.ctaUrl);
+            const referrer = new URLSearchParams(this.textTemplate.expand.ctaUrl).get('referrer');
             this.pushToDataLayer('mrw_clicked');
             if (!referrer) {
                 newUrl.searchParams.append('referrer', params.toString());
@@ -110,19 +119,21 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
     /**
      * menentukan template yang akan di render
      */
-    setTemplate(prop, mode = 'default') {
-        const dynamicMode = this.textTemplate[mode];
+    setTemplate(prop, mode = 'collapse') {
+        const templateObj = this.textTemplate[mode];
         let template = '';
-        if (typeof dynamicMode === 'object' && dynamicMode !== null) {
-            // Check if dynamicMode has a lastArticle object and if the prop exists within it
-            if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {
-                const value = dynamicMode.lastArticle[prop];
-                if (typeof value === 'string') {
-                    template = value;
+        if (typeof templateObj === 'object' && templateObj !== null) {
+            // Check if templateObj has a lastArticle object and if the prop exists within it
+            if (this.countdownArticle === 1) {
+                if (templateObj.lastArticle && prop in templateObj.lastArticle) {
+                    const value = templateObj.lastArticle[prop];
+                    if (typeof value === 'string') {
+                        template = value;
+                    }
                 }
             }
-            else if (prop in dynamicMode) {
-                const value = dynamicMode[prop];
+            else if (prop in templateObj) {
+                const value = templateObj[prop];
                 if (typeof value === 'string') {
                     template = value;
                 }
@@ -130,14 +141,6 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         }
         return template;
     }
-    checkIsDesktop() {
-        if (window.innerWidth >= 960) {
-            this.isDesktop = true;
-        }
-        else {
-            this.isDesktop = false;
-        }
-    }
     /**
      * Render Statement
      */
@@ -148,24 +151,15 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
     }
     defaultBannerContent() {
         return html `
-      <div>
-        <div
-          class="${this.isDesktop
-            ? 'cont-banner-content'
-            : 'justify-between'} flex flex-row"
-        >
-          <div .hidden="${!this.isDesktop}" class="w-9 h-9"></div>
-          <div class="banner-content flex flex-row">
+      <div class="flex flex-col space-y-4">
+        <div class="flex justify-between items-center h-full">
+          <div class="w-9 h-9 hidden lg:block"></div>
+          <div class="banner-content flex flex-row items-center">
             <div
-              class="text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0"
+              class="text-base md:text-lg font-lora"
               .innerHTML=${this.setTemplate('title')}
             ></div>
-            <div .hidden="${!this.isDesktop}" class="md:self-center btn-regis">
-              ${this.isDesktop
-            ? html `<div class="ml-4"></div>
-                    ${this.registerButtonTemplate()}`
-            : null}
-            </div>
+            <div class="hidden md:block">${this.registerButtonTemplate()}</div>
           </div>
           <div>
             <button
@@ -182,19 +176,18 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             </button>
           </div>
         </div>
-        <div class="md:self-center mt-4">
-          ${!this.isDesktop ? html `${this.registerButtonTemplate()} ` : null}
-        </div>
+        <div class="block md:hidden">${this.registerButtonTemplate()}</div>
       </div>
     `;
     }
     expandedBannerContent() {
+        var _a;
         return html `
       <div
-        class="flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8"
+        class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8"
       >
         <div
-          class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2"
+          class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto"
         >
           <p
             class="text-lg md:text-2xl font-lora"
@@ -204,23 +197,19 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             class="text-sm md:text-base"
             .innerHTML=${this.setTemplate('description', 'expand')}
           ></p>
-          <div class="${this.isDesktop ? 'expanded-btn' : null} md:self-start">
-            ${this.registerButtonTemplate()}
-          </div>
+          <div class="md:self-start">${this.registerButtonTemplate()}</div>
         </div>
         <div
-          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto mx-auto"
         >
           <img
             alt="metered-wall-register"
-            src="https://cdn-www.kompas.id/paywall-asset/paywall_ilustrasi3-03_1.png"
+            src="${(_a = this.textTemplate.expand.imageUrl) !== null && _a !== void 0 ? _a : ''}"
           />
         </div>
         <button
           @click="${this.triggerExpandBanner}"
-          class="h-9 w-9 ${this.isDesktop
-            ? null
-            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200"
+          class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
         >
           <div
             class="icon icon-blue-600 ${this.isExpandBanner
@@ -239,18 +228,18 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
     registerButtonTemplate() {
         return html `
       <div>
-        ${!this.textTemplate.ctaUrl
+        ${!this.textTemplate.expand.ctaUrl
             ? html `<button
               @click=${this.redirectToRegister}
-              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+              class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
             >
               Daftar Akun
             </button>`
             : html `<button
               @click=${this.redirectToCTAUrl}
-              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]"
+              class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto"
             >
-              ${this.textTemplate.ctaText}
+              ${this.textTemplate.expand.ctaText}
             </button>`}
       </div>
     `;
@@ -292,14 +281,16 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         super.connectedCallback();
         await this.updateComplete;
         this.loadData();
-        this.checkIsDesktop();
     }
     async loadData() {
-        const req = await fetch(`https://cdn-www.kompas.id/assets/register_wall.json`);
+        const { source } = this; // kompas_com || default
+        const req = await fetch(`https://cdn-www.kompas.id/assets/register_wall_new.json`);
         if (req.status !== 200) {
             throw new Error(`${req.status} Ada galat saat memproses permintaan.`);
         }
-        this.textTemplate = await req.json();
+        const res = await req.json();
+        const validSource = source in res ? source : 'default';
+        this.textTemplate = res[validSource];
         const getCountdown = this.countdownArticle;
         if (!getCountdown) {
             this.isShowBanner = false;
@@ -316,8 +307,8 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             ? html `
           <div class="sticky bottom-0 w-full h-full z-20">
             <div class="w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4">
-              <div class="lg:max-w-7xl m-auto relative">
-                <div>${this.bannerTemplate()}</div>
+              <div class="lg:max-w-7xl m-auto px-0 lg:px-24 relative">
+                ${this.bannerTemplate()}
               </div>
             </div>
           </div>
@@ -338,22 +329,9 @@ KompasMeteredWallRegister.styles = [
         width: 100%;
       }
 
-      .btn-regis {
-        margin-left: 16px;
-        width: 127px;
-      }
-
       .banner-content {
         gap: 55px;
       }
-
-      .cont-banner-content {
-        justify-content: space-evenly;
-      }
-
-      .expanded-btn {
-        width: 127px;
-      }
     `,
     TWStyles,
 ];
@@ -375,9 +353,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], KompasMeteredWallRegister.prototype, "defaultExpandBanner", void 0);
-__decorate([
-    property({ type: Boolean })
-], KompasMeteredWallRegister.prototype, "isDesktop", void 0);
 __decorate([
     property({ type: String })
 ], KompasMeteredWallRegister.prototype, "tracker_page_title", void 0);
@@ -426,6 +401,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasMeteredWallRegister.prototype, "next_param", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "source", void 0);
 KompasMeteredWallRegister = __decorate([
     customElement('kompasid-metered-wall-register')
 ], KompasMeteredWallRegister);

package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister 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      .btn-regis {\n        margin-left: 16px;\n        width: 127px;\n      }\n\n      .banner-content {\n        gap: 55px;\n      }\n\n      .cont-banner-content {\n        justify-content: space-evenly;\n      }\n\n      .expanded-btn {\n        width: 127px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * state\n   */\n  /**\n   * state registerUrl untuk memberikan link kemana user akan dialihkan.\n   */\n  @state() registerUrl: string =\n    'https://account.kompas.id/register?loc=metered_register_wall'\n  /**\n   * state isShowBanner untuk memunculkan component.\n   */\n  @state() isShowBanner: boolean = true\n  /**\n   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n   */\n  @state() isExpandBanner: boolean = true\n  /**\n   * state textTemplate untuk menyimpan template yang di berikan.\n   */\n  @state() private textTemplate: meteredRegisterContent = {\n    default: { title: '', lastArticle: { title: '' } },\n    expand: {\n      title: '',\n      description: '',\n      lastArticle: { title: '', description: '' },\n    },\n    ctaUrl: '',\n    ctaText: '',\n  }\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n   * prop tracker_page_title untuk title of the page\n   * prop tracker_page_type untuk type of the page\n   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n   * prop tracker_content_categories untuk The main category the content belongs to\n   * prop tracker_user_type untuk type of user based on their subscription\n   * prop tracker_subscription_status untuk status of their subscription\n   * prop tracker_metered_wall_type untuk the type of Metered Wall\n   * prop tracker_metered_wall_balance untuk the balance of their metered wall\n   * prop tracker_page_domain untuk Page Domain\n   * prop next_param untuk page Domain\n   */\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) defaultExpandBanner = false\n  @property({ type: Boolean }) isDesktop = false\n  @property({ type: String }) tracker_page_title = ''\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_authors = ''\n  @property({ type: String }) tracker_content_editors = ''\n  @property({ type: String }) tracker_content_tags = ''\n  @property({ type: String }) tracker_content_published_date = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\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  @property({ type: String }) next_param =\n    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n  /**\n   * menentukan template yang akan di render\n   */\n  private setTemplate(\n    prop: string,\n    mode: keyof meteredRegisterContent = 'default'\n  ): string {\n    interface LastArticle {\n      [key: string]: string\n    }\n    interface DynamicMode {\n      lastArticle?: LastArticle\n      [key: string]: string | LastArticle | undefined\n    }\n    const dynamicMode = this.textTemplate[mode] as DynamicMode | string\n\n    let template: string = ''\n\n    if (typeof dynamicMode === 'object' && dynamicMode !== null) {\n      // Check if dynamicMode has a lastArticle object and if the prop exists within it\n      if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {\n        const value = dynamicMode.lastArticle[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      } else if (prop in dynamicMode) {\n        const value = dynamicMode[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      }\n    }\n\n    return template\n  }\n\n  private checkIsDesktop() {\n    if (window.innerWidth >= 960) {\n      this.isDesktop = true\n    } else {\n      this.isDesktop = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  private bannerTemplate() {\n    return this.isExpandBanner\n      ? this.expandedBannerContent()\n      : this.defaultBannerContent()\n  }\n\n  private defaultBannerContent() {\n    return html`\n      <div>\n        <div\n          class=\"${this.isDesktop\n            ? 'cont-banner-content'\n            : 'justify-between'} flex flex-row\"\n        >\n          <div .hidden=\"${!this.isDesktop}\" class=\"w-9 h-9\"></div>\n          <div class=\"banner-content flex flex-row\">\n            <div\n              class=\"text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0\"\n              .innerHTML=${this.setTemplate('title')}\n            ></div>\n            <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n              ${this.isDesktop\n                ? html`<div class=\"ml-4\"></div>\n                    ${this.registerButtonTemplate()}`\n                : null}\n            </div>\n          </div>\n          <div>\n            <button\n              @click=\"${this.triggerExpandBanner}\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div\n                class=\"icon icon-blue-600 ${this.isExpandBanner\n                  ? 'chevron-down'\n                  : 'rotate-180'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        <div class=\"md:self-center mt-4\">\n          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n        </div>\n      </div>\n    `\n  }\n\n  private expandedBannerContent() {\n    return html`\n      <div\n        class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n      >\n        <div\n          class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n        >\n          <p\n            class=\"text-lg md:text-2xl font-lora\"\n            .innerHTML=${this.setTemplate('title', 'expand')}\n          ></p>\n          <p\n            class=\"text-sm md:text-base\"\n            .innerHTML=${this.setTemplate('description', 'expand')}\n          ></p>\n          <div class=\"${this.isDesktop ? 'expanded-btn' : null} md:self-start\">\n            ${this.registerButtonTemplate()}\n          </div>\n        </div>\n        <div\n          class=\"flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto\"\n        >\n          <img\n            alt=\"metered-wall-register\"\n            src=\"https://cdn-www.kompas.id/paywall-asset/paywall_ilustrasi3-03_1.png\"\n          />\n        </div>\n        <button\n          @click=\"${this.triggerExpandBanner}\"\n          class=\"h-9 w-9 ${this.isDesktop\n            ? null\n            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n        >\n          <div\n            class=\"icon icon-blue-600 ${this.isExpandBanner\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n          </div>\n        </button>\n      </div>\n    `\n  }\n\n  /**\n   * template button register\n   */\n  private registerButtonTemplate() {\n    return html`\n      <div>\n        ${!this.textTemplate.ctaUrl\n          ? html`<button\n              @click=${this.redirectToRegister}\n              class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n            >\n              Daftar Akun\n            </button>`\n          : html`<button\n              @click=${this.redirectToCTAUrl}\n              class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]\"\n            >\n              ${this.textTemplate.ctaText}\n            </button>`}\n      </div>\n    `\n  }\n\n  /**\n   * mengarahkan ke page checkout promo\n   */\n  private redirectToCTAUrl = (): void => {\n    const params = new URLSearchParams(window.location.href)\n    const newUrl = new URL(this.textTemplate.ctaUrl)\n    const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get(\n      'referrer'\n    )\n    this.pushToDataLayer('mrw_clicked')\n    if (!referrer) {\n      newUrl.searchParams.append('referrer', params.toString())\n      window.location.href = newUrl.toString()\n    } else {\n      const currentReferrerValue = newUrl.searchParams.get('referrer')\n      const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`\n      newUrl.searchParams.set('referrer', updatedReferrerValue)\n      window.location.href = newUrl.toString()\n    }\n  }\n\n  /**\n   * mengarahkan ke page register\n   */\n  private redirectToRegister = (): void => {\n    this.pushToDataLayer('mrw_clicked')\n    const newUrl = new URL(decodeURIComponent(this.registerUrl))\n    if (this.next_param)\n      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n    window.location.href = newUrl.toString()\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private pushToDataLayer(eventName: string) {\n    window.dataLayer.push({\n      event: eventName,\n      page_title: this.tracker_page_title,\n      page_type: this.tracker_page_type,\n      content_type: this.tracker_content_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_authors: this.tracker_content_authors,\n      content_editors: this.tracker_content_editors,\n      content_tags: this.tracker_content_tags,\n      content_published_date: this.tracker_content_published_date,\n      content_categories: this.tracker_content_categories,\n      user_type: this.tracker_user_type || 'G',\n      subscription_status: this.tracker_subscription_status || '',\n      metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  /**\n   * toggle isExpandBanner flag\n   */\n  private triggerExpandBanner() {\n    this.isExpandBanner = !this.isExpandBanner\n    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    this.loadData()\n    this.checkIsDesktop()\n  }\n\n  private async loadData() {\n    const req = await fetch(\n      `https://cdn-www.kompas.id/assets/register_wall.json`\n    )\n\n    if (req.status !== 200) {\n      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n    }\n\n    this.textTemplate = await req.json()\n\n    const getCountdown = this.countdownArticle\n\n    if (!getCountdown) {\n      this.isShowBanner = false\n    } else {\n      this.isExpandBanner = this.defaultExpandBanner\n    }\n\n    if (this.isShowBanner) {\n      this.pushToDataLayer('mrw_viewed')\n    }\n  }\n\n  render() {\n    return this.isShowBanner\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20\">\n            <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n              <div class=\"lg:max-w-7xl m-auto relative\">\n                <div>${this.bannerTemplate()}</div>\n              </div>\n            </div>\n          </div>\n        `\n      : null\n  }\n}\n"]}
+{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAQjD,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;QAqBL;;WAEG;QACH;;WAEG;QACM,gBAAW,GAClB,8DAA8D,CAAA;QAChE;;WAEG;QACM,iBAAY,GAAY,IAAI,CAAA;QACrC;;WAEG;QACM,mBAAc,GAAY,IAAI,CAAA;QACvC;;WAEG;QACc,iBAAY,GAA2B;YACtD,MAAM,EAAE;gBACN,WAAW,EAAE,EAAE;gBACf,QAAQ,EAAE,EAAE;gBACZ,WAAW,EAAE;oBACX,KAAK,EAAE,EAAE;oBACT,WAAW,EAAE,EAAE;iBAChB;gBACD,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;gBACV,OAAO,EAAE,EAAE;aACZ;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE;oBACX,KAAK,EAAE,EAAE;iBACV;gBACD,KAAK,EAAE,EAAE;aACV;SACF,CAAA;QAED;;WAEG;QACH;;;;;;;;;;;;;;;;;;;WAmBG;QACyB,qBAAgB,GAAG,CAAC,CAAA;QACnB,wBAAmB,GAAG,KAAK,CAAA;QAE5B,uBAAkB,GAAG,EAAE,CAAA;QACvB,sBAAiB,GAAG,EAAE,CAAA;QACtB,yBAAoB,GAAG,EAAE,CAAA;QACzB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,4BAAuB,GAAG,EAAE,CAAA;QAC5B,4BAAuB,GAAG,EAAE,CAAA;QAC5B,yBAAoB,GAAG,EAAE,CAAA;QACzB,mCAA8B,GAAG,EAAE,CAAA;QACnC,+BAA0B,GAAG,EAAE,CAAA;QAC/B,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,eAAU,GACpC,8HAA8H,CAAA;QACpG,WAAM,GAAG,SAAS,CAAA;QAmJ9C;;WAEG;QACK,qBAAgB,GAAG,GAAS,EAAE;YACpC,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YACxD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YACvD,MAAM,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CACvE,UAAU,CACX,CAAA;YACD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;YACnC,IAAI,CAAC,QAAQ,EAAE;gBACb,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACzD,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAA;aACzC;iBAAM;gBACL,MAAM,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;gBAChE,MAAM,oBAAoB,GAAG,GAAG,MAAM,CAAC,QAAQ,EAAE,IAAI,oBAAoB,EAAE,CAAA;gBAC3E,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAA;gBACzD,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAA;aACzC;QACH,CAAC,CAAA;QAED;;WAEG;QACK,uBAAkB,GAAG,GAAS,EAAE;YACtC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;YACnC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAA;YAC5D,IAAI,IAAI,CAAC,UAAU;gBACjB,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAA;YACzE,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAA;QAC1C,CAAC,CAAA;IAsFH,CAAC;IArQC;;OAEG;IACK,WAAW,CACjB,IAAY,EACZ,OAAqC,UAAU;QAM/C,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAEhC,CAAA;QAEV,IAAI,QAAQ,GAAW,EAAE,CAAA;QAEzB,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,KAAK,IAAI,EAAE;YAC3D,iFAAiF;YAEjF,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;gBAC/B,IAAI,WAAW,CAAC,WAAW,IAAI,IAAI,IAAI,WAAW,CAAC,WAAW,EAAE;oBAC9D,MAAM,KAAK,GAAI,WAAW,CAAC,WAAmB,CAAC,IAAI,CAAC,CAAA;oBACpD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;wBAC7B,QAAQ,GAAG,KAAK,CAAA;qBACjB;iBACF;aACF;iBAAM,IAAI,IAAI,IAAI,WAAW,EAAE;gBAC9B,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;gBAC/B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;oBAC7B,QAAQ,GAAG,KAAK,CAAA;iBACjB;aACF;SACF;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED;;OAEG;IAEK,cAAc;QACpB,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC9B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAA;IACjC,CAAC;IAEO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;;;;;;;2BAOY,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;;2CAET,IAAI,CAAC,sBAAsB,EAAE;;;;wBAIhD,IAAI,CAAC,mBAAmB;;;;4CAIJ,IAAI,CAAC,cAAc;YAC7C,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,YAAY;;kBAEd,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;;uCAK/B,IAAI,CAAC,sBAAsB,EAAE;;KAE/D,CAAA;IACH,CAAC;IAEO,qBAAqB;;QAC3B,OAAO,IAAI,CAAA;;;;;;;;;yBASU,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC;;;;yBAInC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC;;uCAE3B,IAAI,CAAC,sBAAsB,EAAE;;;;;;;mBAOjD,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,mCAAI,EAAE;;;;oBAItC,IAAI,CAAC,mBAAmB;;;;wCAIJ,IAAI,CAAC,cAAc;YAC7C,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,YAAY;;cAEd,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;KAI7D,CAAA;IACH,CAAC;IAED;;OAEG;IACK,sBAAsB;QAC5B,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM;YAChC,CAAC,CAAC,IAAI,CAAA;uBACO,IAAI,CAAC,kBAAkB;;;;sBAIxB;YACZ,CAAC,CAAC,IAAI,CAAA;uBACO,IAAI,CAAC,gBAAgB;;;gBAG5B,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;sBAC1B;;KAEjB,CAAA;IACH,CAAC;IAkCD;;OAEG;IACK,eAAe,CAAC,SAAiB;QACvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,IAAI,CAAC,kBAAkB;YACnC,SAAS,EAAE,IAAI,CAAC,iBAAiB;YACjC,YAAY,EAAE,IAAI,CAAC,oBAAoB;YACvC,UAAU,EAAE,IAAI,CAAC,kBAAkB;YACnC,aAAa,EAAE,IAAI,CAAC,qBAAqB;YACzC,eAAe,EAAE,IAAI,CAAC,uBAAuB;YAC7C,eAAe,EAAE,IAAI,CAAC,uBAAuB;YAC7C,YAAY,EAAE,IAAI,CAAC,oBAAoB;YACvC,sBAAsB,EAAE,IAAI,CAAC,8BAA8B;YAC3D,kBAAkB,EAAE,IAAI,CAAC,0BAA0B;YACnD,SAAS,EAAE,IAAI,CAAC,iBAAiB,IAAI,GAAG;YACxC,mBAAmB,EAAE,IAAI,CAAC,2BAA2B,IAAI,EAAE;YAC3D,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,IAAI,KAAK;YAC1D,oBAAoB,EAAE,IAAI,CAAC,4BAA4B;YACvD,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,WAAW;SACrD,CAAC,CAAA;IACJ,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAA;QAC1C,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;IACnE,CAAC;IAED;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAEO,KAAK,CAAC,QAAQ;QACpB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA,CAAC,wBAAwB;QAEhD,MAAM,GAAG,GAAG,MAAM,KAAK,CACrB,yDAAyD,CAC1D,CAAA;QAED,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG,EAAE;YACtB,MAAM,IAAI,KAAK,CAAC,GAAG,GAAG,CAAC,MAAM,uCAAuC,CAAC,CAAA;SACtE;QAED,MAAM,GAAG,GAA4B,MAAM,GAAG,CAAC,IAAI,EAAE,CAAA;QACrD,MAAM,WAAW,GAAG,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;QAEtD,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,WAA+B,CAAC,CAAA;QAExD,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAA;QAE1C,IAAI,CAAC,YAAY,EAAE;YACjB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;SAC1B;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAA;SAC/C;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;SACnC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY;YACtB,CAAC,CAAC,IAAI,CAAA;;;;kBAIM,IAAI,CAAC,cAAc,EAAE;;;;SAI9B;YACH,CAAC,CAAC,IAAI,CAAA;IACV,CAAC;;AA5WM,gCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;IACD,QAAQ;CACT,CAAA;AAQQ;IAAR,KAAK,EAAE;8DACwD;AAIvD;IAAR,KAAK,EAAE;+DAA6B;AAI5B;IAAR,KAAK,EAAE;iEAA+B;AAI9B;IAAR,KAAK,EAAE;+DAkBP;AAyB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAqB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sEAA4B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0EAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0EAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iFAAoC;AACnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6EAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8EAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4EAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+EAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACqG;AACpG;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAmB;AAvGnC,yBAAyB;IADrC,aAAa,CAAC,gCAAgC,CAAC;GACnC,yBAAyB,CA8WrC;SA9WY,yBAAyB","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n  lastArticleData,\n  meteredRegisterResponse,\n  meteredRegisterContent,\n} from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister 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      .banner-content {\n        gap: 55px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * state\n   */\n  /**\n   * state registerUrl untuk memberikan link kemana user akan dialihkan.\n   */\n  @state() registerUrl: string =\n    'https://account.kompas.id/register?loc=metered_register_wall'\n  /**\n   * state isShowBanner untuk memunculkan component.\n   */\n  @state() isShowBanner: boolean = true\n  /**\n   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n   */\n  @state() isExpandBanner: boolean = true\n  /**\n   * state textTemplate untuk menyimpan template yang di berikan.\n   */\n  @state() private textTemplate: meteredRegisterContent = {\n    expand: {\n      description: '',\n      imageUrl: '',\n      lastArticle: {\n        title: '',\n        description: '',\n      },\n      title: '',\n      ctaUrl: '',\n      ctaText: '',\n    },\n    collapse: {\n      lastArticle: {\n        title: '',\n      },\n      title: '',\n    },\n  }\n\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n   * prop tracker_page_title untuk title of the page\n   * prop tracker_page_type untuk type of the page\n   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n   * prop tracker_content_categories untuk The main category the content belongs to\n   * prop tracker_user_type untuk type of user based on their subscription\n   * prop tracker_subscription_status untuk status of their subscription\n   * prop tracker_metered_wall_type untuk the type of Metered Wall\n   * prop tracker_metered_wall_balance untuk the balance of their metered wall\n   * prop tracker_page_domain untuk Page Domain\n   * prop next_param untuk page Domain\n   */\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) defaultExpandBanner = false\n\n  @property({ type: String }) tracker_page_title = ''\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_authors = ''\n  @property({ type: String }) tracker_content_editors = ''\n  @property({ type: String }) tracker_content_tags = ''\n  @property({ type: String }) tracker_content_published_date = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\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  @property({ type: String }) next_param =\n    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n  @property({ type: String }) source = 'default'\n\n  /**\n   * menentukan template yang akan di render\n   */\n  private setTemplate(\n    prop: string,\n    mode: keyof meteredRegisterContent = 'collapse'\n  ): string {\n    interface templateType {\n      lastArticle?: lastArticleData\n      [key: string]: string | lastArticleData | undefined\n    }\n    const templateObj = this.textTemplate[mode] as unknown as\n      | templateType\n      | string\n\n    let template: string = ''\n\n    if (typeof templateObj === 'object' && templateObj !== null) {\n      // Check if templateObj has a lastArticle object and if the prop exists within it\n\n      if (this.countdownArticle === 1) {\n        if (templateObj.lastArticle && prop in templateObj.lastArticle) {\n          const value = (templateObj.lastArticle as any)[prop]\n          if (typeof value === 'string') {\n            template = value\n          }\n        }\n      } else if (prop in templateObj) {\n        const value = templateObj[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      }\n    }\n\n    return template\n  }\n\n  /**\n   * Render Statement\n   */\n\n  private bannerTemplate() {\n    return this.isExpandBanner\n      ? this.expandedBannerContent()\n      : this.defaultBannerContent()\n  }\n\n  private defaultBannerContent() {\n    return html`\n      <div class=\"flex flex-col space-y-4\">\n        <div class=\"flex justify-between items-center h-full\">\n          <div class=\"w-9 h-9 hidden lg:block\"></div>\n          <div class=\"banner-content flex flex-row items-center\">\n            <div\n              class=\"text-base md:text-lg font-lora\"\n              .innerHTML=${this.setTemplate('title')}\n            ></div>\n            <div class=\"hidden md:block\">${this.registerButtonTemplate()}</div>\n          </div>\n          <div>\n            <button\n              @click=\"${this.triggerExpandBanner}\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div\n                class=\"icon icon-blue-600 ${this.isExpandBanner\n                  ? 'chevron-down'\n                  : 'rotate-180'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        <div class=\"block md:hidden\">${this.registerButtonTemplate()}</div>\n      </div>\n    `\n  }\n\n  private expandedBannerContent() {\n    return html`\n      <div\n        class=\"flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8\"\n      >\n        <div\n          class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto\"\n        >\n          <p\n            class=\"text-lg md:text-2xl font-lora\"\n            .innerHTML=${this.setTemplate('title', 'expand')}\n          ></p>\n          <p\n            class=\"text-sm md:text-base\"\n            .innerHTML=${this.setTemplate('description', 'expand')}\n          ></p>\n          <div class=\"md:self-start\">${this.registerButtonTemplate()}</div>\n        </div>\n        <div\n          class=\"flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto mx-auto\"\n        >\n          <img\n            alt=\"metered-wall-register\"\n            src=\"${this.textTemplate.expand.imageUrl ?? ''}\"\n          />\n        </div>\n        <button\n          @click=\"${this.triggerExpandBanner}\"\n          class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n        >\n          <div\n            class=\"icon icon-blue-600 ${this.isExpandBanner\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n          </div>\n        </button>\n      </div>\n    `\n  }\n\n  /**\n   * template button register\n   */\n  private registerButtonTemplate() {\n    return html`\n      <div>\n        ${!this.textTemplate.expand.ctaUrl\n          ? html`<button\n              @click=${this.redirectToRegister}\n              class=\"bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base\"\n            >\n              Daftar Akun\n            </button>`\n          : html`<button\n              @click=${this.redirectToCTAUrl}\n              class=\"bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto\"\n            >\n              ${this.textTemplate.expand.ctaText}\n            </button>`}\n      </div>\n    `\n  }\n\n  /**\n   * mengarahkan ke page checkout promo\n   */\n  private redirectToCTAUrl = (): void => {\n    const params = new URLSearchParams(window.location.href)\n    const newUrl = new URL(this.textTemplate.expand.ctaUrl)\n    const referrer = new URLSearchParams(this.textTemplate.expand.ctaUrl).get(\n      'referrer'\n    )\n    this.pushToDataLayer('mrw_clicked')\n    if (!referrer) {\n      newUrl.searchParams.append('referrer', params.toString())\n      window.location.href = newUrl.toString()\n    } else {\n      const currentReferrerValue = newUrl.searchParams.get('referrer')\n      const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`\n      newUrl.searchParams.set('referrer', updatedReferrerValue)\n      window.location.href = newUrl.toString()\n    }\n  }\n\n  /**\n   * mengarahkan ke page register\n   */\n  private redirectToRegister = (): void => {\n    this.pushToDataLayer('mrw_clicked')\n    const newUrl = new URL(decodeURIComponent(this.registerUrl))\n    if (this.next_param)\n      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n    window.location.href = newUrl.toString()\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private pushToDataLayer(eventName: string) {\n    window.dataLayer.push({\n      event: eventName,\n      page_title: this.tracker_page_title,\n      page_type: this.tracker_page_type,\n      content_type: this.tracker_content_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_authors: this.tracker_content_authors,\n      content_editors: this.tracker_content_editors,\n      content_tags: this.tracker_content_tags,\n      content_published_date: this.tracker_content_published_date,\n      content_categories: this.tracker_content_categories,\n      user_type: this.tracker_user_type || 'G',\n      subscription_status: this.tracker_subscription_status || '',\n      metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  /**\n   * toggle isExpandBanner flag\n   */\n  private triggerExpandBanner() {\n    this.isExpandBanner = !this.isExpandBanner\n    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    this.loadData()\n  }\n\n  private async loadData() {\n    const { source } = this // kompas_com || default\n\n    const req = await fetch(\n      `https://cdn-www.kompas.id/assets/register_wall_new.json`\n    )\n\n    if (req.status !== 200) {\n      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n    }\n\n    const res: meteredRegisterResponse = await req.json()\n    const validSource = source in res ? source : 'default'\n\n    this.textTemplate = res[validSource as keyof typeof res]\n\n    const getCountdown = this.countdownArticle\n\n    if (!getCountdown) {\n      this.isShowBanner = false\n    } else {\n      this.isExpandBanner = this.defaultExpandBanner\n    }\n\n    if (this.isShowBanner) {\n      this.pushToDataLayer('mrw_viewed')\n    }\n  }\n\n  render() {\n    return this.isShowBanner\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20\">\n            <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n              <div class=\"lg:max-w-7xl m-auto px-0 lg:px-24 relative\">\n                ${this.bannerTemplate()}\n              </div>\n            </div>\n          </div>\n        `\n      : null\n  }\n}\n"]}

package/dist/src/components/kompasid-metered-wall-register/types.d.ts

@@ -1,18 +1,22 @@
+export interface lastArticleData {
+    title: string;
+    description?: string;
+}
 export interface meteredRegisterContent {
     expand: {
-        lastArticle: {
-            title: string;
-            description: string;
-        };
+        lastArticle: lastArticleData;
         title: string;
         description: string;
+        ctaUrl: string;
+        ctaText: string;
+        imageUrl: string;
     };
-    default: {
-        lastArticle: {
-            title: string;
-        };
+    collapse: {
+        lastArticle: lastArticleData;
         title: string;
     };
-    ctaUrl: string;
-    ctaText: string;
+}
+export interface meteredRegisterResponse {
+    kompascom: meteredRegisterContent;
+    default: meteredRegisterContent;
 }

package/dist/src/components/kompasid-metered-wall-register/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface meteredRegisterContent {\n  expand: {\n    lastArticle: {\n      title: string\n      description: string\n    }\n    title: string\n    description: string\n  }\n  default: {\n    lastArticle: {\n      title: string\n    }\n    title: string\n  }\n  ctaUrl: string\n  ctaText: string\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface lastArticleData {\n  title: string\n  description?: string\n}\n\nexport interface meteredRegisterContent {\n  expand: {\n    lastArticle: lastArticleData\n    title: string\n    description: string\n    ctaUrl: string\n    ctaText: string\n    imageUrl: string\n  }\n  collapse: {\n    lastArticle: lastArticleData\n    title: string\n  }\n}\n\nexport interface meteredRegisterResponse {\n  kompascom: meteredRegisterContent\n  default: meteredRegisterContent\n}\n"]}

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

@@ -23,10 +23,6 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
     relatedArticles(): Promise<void>;
     otherArticles(): Promise<void>;
     handleFetchError(error: unknown): void;
-    /**
-     * Function to format date
-     */
-    formatDate(date: string): string;
     /**
      * Render widget components
      */

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

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { format } from 'date-fns';
-import { id } from 'date-fns/locale/id';
 import { TWStyles } from '../../../tailwind/tailwind.js';
+import { useTimeDifference } from '../../utils/useTimeDIfference.js';
 let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault extends LitElement {
     constructor() {
         super(...arguments);
@@ -119,12 +118,6 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         const errorMessage = error instanceof Error ? error.message : 'Kesalahan tidak diketahui';
         alert(`Terjadi kesalahan: ${errorMessage}`);
     }
-    /**
-     * Function to format date
-     */
-    formatDate(date) {
-        return format(new Date(date), 'dd MMMM yyyy', { locale: id });
-    }
     /**
      * Render widget components
      */
@@ -161,12 +154,20 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
     `;
     }
     renderChips(post) {
-        var _a, _b;
+        var _a, _b, _c;
         const chips = [];
         const isAnalisis = (_a = post.postTag) === null || _a === void 0 ? void 0 : _a.some(tag => tag.slug === 'analisis');
         const isEksklusif = (_b = post.postTag) === null || _b === void 0 ? void 0 : _b.some(tag => tag.slug === 'eksklusif');
+        const isKompasBrief = (_c = post.postTag) === null || _c === void 0 ? void 0 : _c.some(tag => tag.slug === 'kompas-brief');
         const isFreemium = post.isFreemium === true;
-        if (isEksklusif) {
+        if (isKompasBrief) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-red-100 text-red-600">Kompas Brief</div>
+          </div>
+        `);
+        }
+        else if (isEksklusif) {
             chips.push(html `
           <div class="flex">
             <div class="chip bg-grey-600 text-white">
@@ -245,7 +246,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                 ? 'text-white'
                 : 'text-grey-600'}"
                             >
-                              ${this.formatDate(post.publishedDate)}
+                              ${useTimeDifference(post.publishedDate)}
                             </p>
                           </a>
                         </div>
@@ -279,7 +280,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                 ? 'text-white'
                 : 'text-grey-600'}"
                             >
-                              ${this.formatDate(post.publishedDate)}
+                              ${useTimeDifference(post.publishedDate)}
                             </p>
                           </a>
                         </div>