npm - @kompasid/lit-web-components - Versions diffs - 0.6.8 → 0.7.1 - Mend

@kompasid/lit-web-components 0.6.8 → 0.7.1

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

Files changed (32) hide show

package/demo/index.html CHANGED Viewed

@@ -45,6 +45,8 @@
     <script type="module">
       import { html, render } from 'lit'
+      import '../dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'
+      import '../dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'
       import '../dist/src/components/kompasid-footer/KompasFooter.js'
       import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
       import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
@@ -108,6 +110,22 @@
           updateMembership: 'Perbarui Langganan',
       }
+      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'
+        }
+      }
       render(
         html`
           <kompasid-header-account
@@ -122,6 +140,22 @@
             .read_later_url=${readLaterUrl}
             .total_grace_period=${totalGracePeriod}
           ></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}
+            type='otherArticle'
+            mainCategory='opini'
+          ></kompasid-widget-recirculations-default>
+          <kompasid-widget-recirculations-list widgetTitle="Terpopuler" apiSlug="popular-article">
+          </kompasid-widget-recirculations-list>
           <kompasid-paywall
             .type=${type}
             .theme=${theme}

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

@@ -77,6 +77,10 @@ export declare class KompasMeteredWallRegister extends LitElement {
      * template button register
      */
     private registerButtonTemplate;
+    /**
+     * mengarahkan ke page checkout promo
+     */
+    private redirectToCTAUrl;
     /**
      * mengarahkan ke page register
      */

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

@@ -32,6 +32,8 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
                 description: '',
                 lastArticle: { title: '', description: '' },
             },
+            ctaUrl: '',
+            ctaText: '',
         };
         /**
          * Props
@@ -75,6 +77,25 @@ 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';
+        /**
+         * 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');
+            this.pushToDataLayer('mrw_clicked');
+            if (!referrer) {
+                newUrl.searchParams.append('referrer', params.toString());
+                window.location.href = newUrl.toString();
+            }
+            else {
+                const currentReferrerValue = newUrl.searchParams.get('referrer');
+                const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`;
+                newUrl.searchParams.set('referrer', updatedReferrerValue);
+                window.location.href = newUrl.toString();
+            }
+        };
         /**
          * mengarahkan ke page register
          */
@@ -90,15 +111,22 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
      * menentukan template yang akan di render
      */
     setTemplate(prop, mode = 'default') {
-        let template = '';
-        // dynamicMode dibuat agar typescript bisa akses data lastArticle
         const dynamicMode = this.textTemplate[mode];
-        if ('lastArticle' in dynamicMode) {
-            const lastArticleMode = dynamicMode;
-            template = lastArticleMode.lastArticle[prop] || '';
-        }
-        else {
-            template = dynamicMode[prop] || '';
+        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;
+                }
+            }
+            else if (prop in dynamicMode) {
+                const value = dynamicMode[prop];
+                if (typeof value === 'string') {
+                    template = value;
+                }
+            }
         }
         return template;
     }
@@ -180,11 +208,12 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             ${this.registerButtonTemplate()}
           </div>
         </div>
-        <div class="flex justify-center">
+        <div
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+        >
           <img
             alt="metered-wall-register"
             src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
-            class="h-40 w-40 md:w-full md:h-full"
           />
         </div>
         <button
@@ -209,12 +238,21 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
      */
     registerButtonTemplate() {
         return 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"
-      >
-        Daftar Akun
-      </button>
+      <div>
+        ${!this.textTemplate.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"
+            >
+              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]"
+            >
+              ${this.textTemplate.ctaText}
+            </button>`}
+      </div>
     `;
     }
     /**

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

	@@ -1 +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 }\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\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 let template = ''\n\n // dynamicMode dibuat agar typescript bisa akses data lastArticle\n const dynamicMode = this.textTemplate[mode]\n\n if ('lastArticle' in dynamicMode) {\n const lastArticleMode = dynamicMode as {\n lastArticle: { [key: string]: string }\n }\n template = lastArticleMode.lastArticle[prop] \|\| ''\n } else {\n template = dynamicMode[prop] \|\| ''\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 class=\"flex justify-center\">\n <img\n alt=\"metered-wall-register\"\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n class=\"h-40 w-40 md:w-full md:h-full\"\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 <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 `\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://d3w4qaq4xm1ncv.cloudfront.net/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"]}
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://d3w4qaq4xm1ncv.cloudfront.net/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://d3w4qaq4xm1ncv.cloudfront.net/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"]}

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

@@ -13,4 +13,6 @@ export interface meteredRegisterContent {
         };
         title: string;
     };
+    ctaUrl: string;
+    ctaText: string;
 }

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

	@@ -1 +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}\n"]}
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"]}

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import { Post, Navigation } 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;
+    /**
+     * Fetch Data
+     */
+    connectedCallback(): Promise<void>;
+    fetchAccessToken(): Promise<void>;
+    relatedArticles(): Promise<void>;
+    otherArticles(): Promise<void>;
+    handleFetchError(error: unknown): void;
+    /**
+     * Function to format date
+     */
+    formatDate(date: string): string;
+    /**
+     * Render widget components
+     */
+    private WidgetTitle;
+    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 ADDED Viewed

@@ -0,0 +1,340 @@
+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';
+let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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;
+    }
+    /**
+     * Fetch Data
+     */
+    async connectedCallback() {
+        super.connectedCallback();
+        try {
+            await this.fetchAccessToken();
+            if (this.type === 'relatedArticle') {
+                await this.relatedArticles();
+            }
+            else if (this.type === 'otherArticle') {
+                await this.otherArticles();
+            }
+        }
+        catch (error) {
+            this.handleFetchError(error);
+        }
+    }
+    async fetchAccessToken() {
+        var _a;
+        const response = await fetch('https://api.kompas.id/account/api/v1/login/guest', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email: 'anonynous.user@kompas.id',
+            }),
+        });
+        const result = await response.json();
+        if ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.accessToken) {
+            this.accessToken = result.data.accessToken;
+        }
+        else {
+            throw new Error('Token akses tidak tersedia dalam respons');
+        }
+    }
+    async relatedArticles() {
+        if (!this.accessToken) {
+            throw new Error('Token akses tidak tersedia');
+        }
+        const kompasApiAi = 'https://ai.kompas.id/api/v1';
+        // Constructing parameters
+        const params = new URLSearchParams();
+        params.append('page_url', this.permalinkArticle);
+        params.append('page_type', 'read');
+        params.append('item_type', 'articles');
+        params.append('guid', this.userGuid);
+        params.append('slugs', this.slugs);
+        // Constructing the URL with parameters
+        const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`;
+        const response = await fetch(endpoint, {
+            headers: {
+                Authorization: `Bearer ${this.accessToken}`,
+                'Content-Type': 'application/json',
+            },
+        });
+        const result = await response.json();
+        if (result === null || result === void 0 ? void 0 : result.result) {
+            const items = result.result;
+            const firstChunk = items.slice(0, 5);
+            const secondChunk = items.slice(5, 7);
+            this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)];
+            console.log('related article:', this.posts);
+        }
+        else {
+            throw new Error('Data artikel terkait tidak ditemukan');
+        }
+    }
+    async otherArticles() {
+        if (!this.accessToken) {
+            throw new Error('Token akses tidak tersedia');
+        }
+        const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1';
+        // Constructing the URL with parameters
+        const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`;
+        const response = await fetch(endpoint, {
+            headers: {
+                Authorization: `Bearer ${this.accessToken}`,
+                'Content-Type': 'application/json',
+            },
+        });
+        const result = await response.json();
+        if (result === null || result === void 0 ? void 0 : result.result) {
+            const items = result.result;
+            const firstChunk = items.slice(0, 5);
+            const secondChunk = items.slice(5, 7);
+            this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)];
+            console.log('other article:', this.posts);
+        }
+        else {
+            throw new Error('Data artikel lainnya tidak ditemukan');
+        }
+    }
+    handleFetchError(error) {
+        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
+     */
+    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>
+      `;
+        }
+        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>
+        </div>
+      </div>
+    `;
+    }
+    renderChips(post) {
+        var _a, _b;
+        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 isFreemium = post.isFreemium === true;
+        if (isEksklusif) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `);
+        }
+        else if (isFreemium) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `);
+        }
+        else if (isAnalisis) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `);
+        }
+        return chips;
+    }
+    renderImage(post) {
+        var _a;
+        const { thumbnailMedium } = ((_a = post.thumbnails) === null || _a === void 0 ? void 0 : _a.sizes) || {};
+        if (!thumbnailMedium)
+            return '';
+        const { permalink, width, height } = thumbnailMedium;
+        return html `
+      <img
+        src="${permalink}"
+        width="${width}"
+        height="${height}"
+        alt="${post.title}"
+        class="aspect-video object-cover w-full"
+      />
+    `;
+    }
+    render() {
+        return html `
+      <div class="w-full">
+        <!-- start: widget title -->
+        ${this.WidgetTitle()}
+        <!-- end: widget title -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+          <!-- start: left-post-loop -->
+          <div class="grid grid-cols-1 gap-6">
+            ${this.posts[0]
+            ? this.posts[0].map(post => html `
+                    <div class="w-full">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `)
+            : 'Belum ada artikel'}
+          </div>
+          <!-- end: left-post-loop -->
+          <!-- start: right-post-loop -->
+          <div class="flex flex-col w-full">
+            ${this.posts[1]
+            ? this.posts[1].map(post => html `
+                    <div class="mb-6">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `)
+            : ''}
+            <!-- start: ads -->
+            <slot></slot>
+            <!-- end: ads -->
+          </div>
+          <!-- end: right-post-loop -->
+        </div>
+      </div>
+    `;
+    }
+};
+KompasWidgetRecirculationsDefault.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+];
+__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);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "permalinkArticle", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "userGuid", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "slugs", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "mainCategory", void 0);
+KompasWidgetRecirculationsDefault = __decorate([
+    customElement('kompasid-widget-recirculations-default')
+], KompasWidgetRecirculationsDefault);
+export { KompasWidgetRecirculationsDefault };
+//# sourceMappingURL=KompasWidgetRecirculationsDefault.js.map