@kompasid/lit-web-components 0.5.5 → 0.5.7

package/demo/index.html

@@ -50,6 +50,7 @@
       import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
       import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
       import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
+      import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
 
       const type = 'reguler'
       const theme = ''
@@ -82,6 +83,11 @@
       const headCopyExpand = ''
       const headCopyCollapse = ''
       const expand = false
+      const countdownArticle = 2
+      const trackerContentAuthors = 'Author 1|Author 2'
+      const trackerContentEditors = 'Editor 1|Editor 2'
+      const trackerContentTags = 'Tag1|Tag2|Tag3'
+      const trackerContentPublishedDate = '2023-10-12'
 
       render(
         html`
@@ -135,7 +141,7 @@
             </kompasid-paywall-video>
           </div>
           <kompasid-footer></kompasid-footer>
-
+          
           <kompasid-freewall
             .isLogin=${isLogin}
             .type=${freewallType}
@@ -160,6 +166,25 @@
             .tracker_metered_wall_balance=${trackerMeteredWallBalance}
           >
           </kompasid-freewall>
+          <kompasid-metered-wall-register
+          .id=${"metered-wall-register"}
+          .countdownArticle=${countdownArticle}
+          .tracker_page_title=${trackerPageTitle}
+          .tracker_page_type=${trackerPageType}
+          .tracker_content_type=${trackerContentType}
+          .tracker_content_id=${trackerContentId}
+          .tracker_content_title=${trackerContentTitle}
+          .tracker_content_authors=${trackerContentAuthors}
+          .tracker_content_editors=${trackerContentEditors}
+          .tracker_content_tags=${trackerContentTags}
+          .tracker_content_published_date=${trackerContentPublishedDate}
+          .tracker_content_categories=${trackerContentCategories}
+          .tracker_user_type=${trackerUserType}
+          .tracker_subscription_status=${trackerSubscriptionStatus}
+          .tracker_metered_wall_type=${meteredWallType}
+          .tracker_metered_wall_balance=${trackerMeteredWallBalance}
+          .tracker_page_domain=${trackerPageDomain}
+          ></kompasid-metered-wall-register>
         `,
         document.querySelector('#demo')
       )

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

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+export declare class KompasMeteredWallRegister extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * state
+     */
+    /**
+     * state registerUrl untuk memberikan link kemana user akan dialihkan.
+     */
+    registerUrl: string;
+    /**
+     * state isShowBanner untuk memunculkan component.
+     */
+    isShowBanner: boolean;
+    /**
+     * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.
+     */
+    isExpandBanner: boolean;
+    /**
+     * state textTemplate untuk menyimpan template yang di berikan.
+     */
+    private textTemplate;
+    /**
+     * Props
+     */
+    /**
+     * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+     * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.
+     * prop tracker_page_title untuk title of the page
+     * prop tracker_page_type untuk type of the page
+     * 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)
+     * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)
+     * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)
+     * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)
+     * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)
+     * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)
+     * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)
+     * prop tracker_content_categories untuk The main category the content belongs to
+     * prop tracker_user_type untuk type of user based on their subscription
+     * prop tracker_subscription_status untuk status of their subscription
+     * prop tracker_metered_wall_type untuk the type of Metered Wall
+     * prop tracker_metered_wall_balance untuk the balance of their metered wall
+     * prop tracker_page_domain untuk Page Domain
+     * prop next_param untuk page Domain
+     */
+    countdownArticle: number;
+    defaultExpandBanner: boolean;
+    isDesktop: boolean;
+    tracker_page_title: string;
+    tracker_page_type: string;
+    tracker_content_type: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_authors: string;
+    tracker_content_editors: string;
+    tracker_content_tags: string;
+    tracker_content_published_date: string;
+    tracker_content_categories: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    tracker_page_domain: string;
+    next_param: string;
+    /**
+     * menentukan template yang akan di render
+     */
+    private setTemplate;
+    private checkIsDesktop;
+    /**
+     * Render Statement
+     */
+    private bannerTemplate;
+    private defaultBannerContent;
+    private expandedBannerContent;
+    /**
+     * template button register
+     */
+    private registerButtonTemplate;
+    /**
+     * mengarahkan ke page register
+     */
+    private redirectToRegister;
+    /**
+     * mengirim event ke datalayer
+     */
+    private pushToDataLayer;
+    /**
+     * toggle isExpandBanner flag
+     */
+    private triggerExpandBanner;
+    /**
+     * Lifecycle
+     */
+    connectedCallback(): Promise<void>;
+    private loadData;
+    render(): import("lit").TemplateResult<1> | null;
+}

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

@@ -0,0 +1,395 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * state
+         */
+        /**
+         * state registerUrl untuk memberikan link kemana user akan dialihkan.
+         */
+        this.registerUrl = 'https://account.kompas.id/register?loc=metered_register_wall';
+        /**
+         * state isShowBanner untuk memunculkan component.
+         */
+        this.isShowBanner = true;
+        /**
+         * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.
+         */
+        this.isExpandBanner = true;
+        /**
+         * state textTemplate untuk menyimpan template yang di berikan.
+         */
+        this.textTemplate = {
+            default: { title: '', lastArticle: { title: '' } },
+            expand: {
+                title: '',
+                description: '',
+                lastArticle: { title: '', description: '' },
+            },
+        };
+        /**
+         * Props
+         */
+        /**
+         * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+         * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.
+         * prop tracker_page_title untuk title of the page
+         * prop tracker_page_type untuk type of the page
+         * 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)
+         * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)
+         * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)
+         * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)
+         * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)
+         * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)
+         * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)
+         * prop tracker_content_categories untuk The main category the content belongs to
+         * prop tracker_user_type untuk type of user based on their subscription
+         * prop tracker_subscription_status untuk status of their subscription
+         * prop tracker_metered_wall_type untuk the type of Metered Wall
+         * prop tracker_metered_wall_balance untuk the balance of their metered wall
+         * prop tracker_page_domain untuk Page Domain
+         * prop next_param untuk page Domain
+         */
+        this.countdownArticle = 0;
+        this.defaultExpandBanner = false;
+        this.isDesktop = false;
+        this.tracker_page_title = '';
+        this.tracker_page_type = '';
+        this.tracker_content_type = '';
+        this.tracker_content_id = '';
+        this.tracker_content_title = '';
+        this.tracker_content_authors = '';
+        this.tracker_content_editors = '';
+        this.tracker_content_tags = '';
+        this.tracker_content_published_date = '';
+        this.tracker_content_categories = '';
+        this.tracker_user_type = '';
+        this.tracker_subscription_status = '';
+        this.tracker_metered_wall_type = '';
+        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 register
+         */
+        this.redirectToRegister = () => {
+            this.pushToDataLayer('mrw_clicked');
+            const newUrl = new URL(decodeURIComponent(this.registerUrl));
+            if (this.next_param)
+                newUrl.searchParams.append('next', decodeURIComponent(this.next_param));
+            window.location.href = newUrl.toString();
+        };
+    }
+    /**
+     * 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] || '';
+        }
+        return template;
+    }
+    checkIsDesktop() {
+        if (window.innerWidth >= 960) {
+            this.isDesktop = true;
+        }
+        else {
+            this.isDesktop = false;
+        }
+    }
+    /**
+     * Render Statement
+     */
+    bannerTemplate() {
+        return this.isExpandBanner
+            ? this.expandedBannerContent()
+            : this.defaultBannerContent();
+    }
+    defaultBannerContent() {
+        return html `
+      <div>
+        <div
+          class="${this.isDesktop
+            ? 'cont-banner-content justify-center'
+            : null} flex flex-row justify-between"
+        >
+          <div class="banner-content flex flex-row">
+            <div
+              class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"
+              .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>
+          <div>
+            <button
+              @click="${this.triggerExpandBanner}"
+              class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
+            >
+              <div
+                class="icon icon-blue-600 ${this.isExpandBanner
+            ? 'chevron-down'
+            : 'rotate-180'}"
+              >
+                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+              </div>
+            </button>
+          </div>
+        </div>
+        <div class="md:self-center mt-4">
+          ${!this.isDesktop ? html `${this.registerButtonTemplate()} ` : null}
+        </div>
+      </div>
+    `;
+    }
+    expandedBannerContent() {
+        return html `
+      <div
+        class="flex flex-col-reverse justify-evenly 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"
+        >
+          <p
+            class="text-lg md:text-2xl font-lora"
+            .innerHTML=${this.setTemplate('title', 'expand')}
+          ></p>
+          <p
+            class="text-sm md:text-base"
+            .innerHTML=${this.setTemplate('description', 'expand')}
+          ></p>
+          <div class="${this.isDesktop ? null : 'expanded-btn'} md:self-start">
+            ${this.registerButtonTemplate()}
+          </div>
+        </div>
+        <div class="flex justify-center">
+          <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
+          @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"
+        >
+          <div
+            class="icon icon-blue-600 ${this.isExpandBanner
+            ? 'chevron-down'
+            : 'rotate-180'}"
+          >
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+          </div>
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * template button register
+     */
+    registerButtonTemplate() {
+        return html `
+      <button
+        onClick=${this.redirectToRegister}
+        class="bg-green-500 px-5 py-3 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+      >
+        Daftar Akun
+      </button>
+    `;
+    }
+    /**
+     * mengirim event ke datalayer
+     */
+    pushToDataLayer(eventName) {
+        window.dataLayer.push({
+            event: eventName,
+            page_title: this.tracker_page_title,
+            page_type: this.tracker_page_type,
+            content_type: this.tracker_content_type,
+            content_id: this.tracker_content_id,
+            content_title: this.tracker_content_title,
+            content_authors: this.tracker_content_authors,
+            content_editors: this.tracker_content_editors,
+            content_tags: this.tracker_content_tags,
+            content_published_date: this.tracker_content_published_date,
+            content_categories: this.tracker_content_categories,
+            user_type: this.tracker_user_type || 'G',
+            subscription_status: this.tracker_subscription_status || '',
+            metered_wall_type: this.tracker_metered_wall_type || 'MRW',
+            metered_wall_balance: this.tracker_metered_wall_balance,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+        });
+    }
+    /**
+     * toggle isExpandBanner flag
+     */
+    triggerExpandBanner() {
+        this.isExpandBanner = !this.isExpandBanner;
+        return !this.isExpandBanner && this.pushToDataLayer('mrw_closed');
+    }
+    /**
+     * Lifecycle
+     */
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        this.loadData();
+        this.checkIsDesktop();
+    }
+    async loadData() {
+        const req = await fetch(`https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`);
+        if (req.status !== 200) {
+            throw new Error(`${req.status} Ada galat saat memproses permintaan.`);
+        }
+        this.textTemplate = await req.json();
+        const getCountdown = this.countdownArticle;
+        if (!getCountdown) {
+            this.isShowBanner = false;
+        }
+        else {
+            this.isExpandBanner = this.defaultExpandBanner;
+        }
+        if (this.isShowBanner) {
+            this.pushToDataLayer('mrw_viewed');
+        }
+    }
+    render() {
+        return this.isShowBanner
+            ? 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>
+            </div>
+          </div>
+        `
+            : null;
+    }
+};
+KompasMeteredWallRegister.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .btn-regis {
+        margin-left: 16px;
+        width: 127px;
+      }
+
+      .banner-content {
+        gap: 55px;
+        justify-content: space-between;
+      }
+
+      .cont-banner-content {
+        gap: 201px;
+      }
+
+      .expanded-btn {
+        width: 127px;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasMeteredWallRegister.prototype, "registerUrl", void 0);
+__decorate([
+    state()
+], KompasMeteredWallRegister.prototype, "isShowBanner", void 0);
+__decorate([
+    state()
+], KompasMeteredWallRegister.prototype, "isExpandBanner", void 0);
+__decorate([
+    state()
+], KompasMeteredWallRegister.prototype, "textTemplate", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredWallRegister.prototype, "countdownArticle", void 0);
+__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);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_authors", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_editors", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_tags", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_published_date", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredWallRegister.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredWallRegister.prototype, "next_param", void 0);
+KompasMeteredWallRegister = __decorate([
+    customElement('kompasid-metered-wall-register')
+], KompasMeteredWallRegister);
+export { KompasMeteredWallRegister };
+//# sourceMappingURL=KompasMeteredWallRegister.js.map

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

@@ -0,0 +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        justify-content: space-between;\n      }\n\n      .cont-banner-content {\n        gap: 201px;\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 justify-center'\n            : null} flex flex-row justify-between\"\n        >\n          <div class=\"banner-content flex flex-row\">\n            <div\n              class=\"text-base md:text-lg font-lora mb-3 mt-1 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 ? null : 'expanded-btn'} 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        onClick=${this.redirectToRegister}\n        class=\"bg-green-500 px-5 py-3 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"]}

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

@@ -0,0 +1,16 @@
+export interface meteredRegisterContent {
+    expand: {
+        lastArticle: {
+            title: string;
+            description: string;
+        };
+        title: string;
+        description: string;
+    };
+    default: {
+        lastArticle: {
+            title: string;
+        };
+        title: string;
+    };
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +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"]}

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ export { KompasFooter } from './components/kompasid-footer/KompasFooter.js';
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js';
 export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js';
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
+export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js';
 declare global {
     interface Window {
         gtag: (...args: any[]) => void;

package/dist/src/index.js

@@ -3,4 +3,5 @@ export { KompasFooter } from './components/kompasid-footer/KompasFooter.js';
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js';
 export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js';
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
+export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA","sourcesContent":["export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\n\ndeclare global {\n  interface Window {\n    gtag: (...args: any[]) => void\n    dataLayer: Record<string, any>\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA","sourcesContent":["export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\nexport { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'\n\ndeclare global {\n  interface Window {\n    gtag: (...args: any[]) => void\n    dataLayer: Record<string, any>\n  }\n}\n"]}