@kompasid/lit-web-components 0.1.0

package/dist/src/components/kompas-paywall/KompasPaywall.js

@@ -0,0 +1,470 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import '../kompas-paywall-body/KompasPaywallBody.js';
+import '../kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js';
+import '../kompas-paywall-information-header/KompasPaywallInformationHeader.js';
+let KompasPaywall = class KompasPaywall extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        /**
+         * property isLogin untuk menghandle apakah user sudah login atau belum
+         * property countdownArticle untuk menghandle count artikel
+         * property type untuk menghandle tipe epaper
+         * property isWithHeader untuk menghandle paywall information header
+         * property textHeader digunakan sebagai text pada paywall information header
+         * property paywallData untuk menghandle data paywall
+         * property userGuid untuk menghandle user Guid
+         * property subscriptionStatus untuk menghandle status subscription user
+         * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak
+         * property paywall_location = The location where user encounter the paywall
+         * property paywall_subscription_package = The name of the subscription package viewed by user
+         * property paywall_subscription_id = The ID of the subscription package viewed by user
+         * property paywall_subscription_price = The price of the subscriprtion package viewed by user
+         * property paywall_position = The position of the subscription package viewed by user
+         * property page_type = Type of the page
+         * property content_id = ID of article (slug)
+         * property content_type = Whether it's free article or paid article
+         * property content_title = The title of article
+         * property tracker_content_categories = The category of the content
+         * property user_type = Type of user based on their subscription
+         * property subscription_status = Status of their subscription
+         * property page_domain = Page Domain
+         * property metered_wall_type = The type of Metered Wall
+         * property metered_wall_balance = The balance of their metered wall
+         * property epaper_edition = The edition of epaper viewed by user
+         * property theme = The theme of the paywall component
+         */
+        this.paywallData = {};
+        this.isLogin = false;
+        this.countdownArticle = 0;
+        this.type = 'reguler';
+        this.isWithHeader = false;
+        this.textHeader = '';
+        this.userGuid = '';
+        this.subscriptionStatus = '';
+        this.swgEnable = false;
+        this.paywall_location = '';
+        this.paywall_subscription_package = '';
+        this.paywall_subscription_id = 0;
+        this.paywall_subscription_price = 0;
+        this.paywall_position = 0;
+        this.tracker_page_type = '';
+        this.tracker_content_id = '';
+        this.tracker_content_title = '';
+        this.tracker_content_categories = '';
+        this.tracker_content_type = '';
+        this.tracker_user_type = '';
+        this.tracker_subscription_status = '';
+        this.tracker_page_domain = '';
+        this.tracker_metered_wall_type = '';
+        this.tracker_metered_wall_balance = 0;
+        this.tracker_epaper_edition = '';
+        this.theme = '';
+        this.mockResult = {
+            informations: {
+                title: 'Langganan untuk Lanjut Membaca',
+                description: [
+                    'Akses tak terbatas Kompas.id (web & app)',
+                    'Berita digital tanpa iklan pop-up',
+                    '30 arsip terbaru ePaper Kompas',
+                    'Artikel  Opini eksklusif',
+                ],
+                register: {
+                    img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',
+                    title: 'Ingin Membaca Artikel Ini Secara Utuh?',
+                    subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',
+                    label: 'Daftar Sekarang ',
+                },
+                meterred: {
+                    maxQuota: 5,
+                    label: 'Langganan',
+                    maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',
+                    url: 'https://kompas.id/berlangganan',
+                },
+            },
+            packages: {
+                title: 'Sekali bayar, tanpa perpanjang otomatis',
+                memberships: [
+                    {
+                        title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',
+                        percentage: 40,
+                        price: 360000,
+                        discountPrice: 600000,
+                        periode: '1 Tahun',
+                        isHighlight: true,
+                        url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',
+                    },
+                    {
+                        title: 'Kompas Digital Premium 1 Bulan',
+                        percentage: 0,
+                        discountPrice: 0,
+                        price: 50000,
+                        periode: '1 Bulan',
+                        isHighlight: false,
+                        url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',
+                    },
+                ],
+            },
+            payment: {
+                desktop: [
+                    {
+                        name: 'gopay',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'ovo',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'mastercard',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bri',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bcaklikpay',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'indomaret',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'jcb',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'dana',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'visa',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'mandiri',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bca',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bni',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'akulaku',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,
+                    },
+                ],
+                mobile: [
+                    {
+                        name: 'gopay',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'ovo',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'visa',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'mastercard',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,
+                    },
+                ],
+                ekstension: [
+                    {
+                        name: 'dana',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'mandiri',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bri',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bcaklikpay',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'akulaku',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bni',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'indomaret',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'bca',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,
+                    },
+                    {
+                        name: 'jcb',
+                        link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,
+                    },
+                ],
+            },
+        };
+        this.selectorTypePaywall = (type) => {
+            switch (type) {
+                case 'epaper':
+                    return this.renderEpaperPaywallSection();
+                case 'reguler':
+                    return this.renderRegularPaywallSection();
+                default:
+                    return this.renderRegularPaywallSection();
+            }
+        };
+    }
+    get darkUrl() {
+        return this.theme === 'dark' ? '-dark' : '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.paywallData = this.mockResult;
+    }
+    transitionBox() {
+        return html `
+      <div
+        class="h-20 ${this.theme === 'dark'
+            ? 'transparent-linear-dark'
+            : 'transparent-linear'} -mt-24 z-0 w-full"
+      ></div>
+    `;
+    }
+    renderEpaperPaywallSection() {
+        return html `<kompas-paywall-body
+      paywall_location=${this.paywall_location}
+      paywall_subscription_package=${this.paywall_subscription_package}
+      paywall_subscription_id=${this.paywall_subscription_id}
+      paywall_subscription_price=${this.paywall_subscription_price}
+      paywall_position=${this.paywall_position}
+      tracker_page_type=${this.tracker_page_type}
+      tracker_content_id=${this.tracker_content_id}
+      tracker_content_title=${this.tracker_content_title}
+      tracker_content_categories=${this.tracker_content_categories}
+      tracker_user_type=${this.tracker_user_type}
+      tracker_subscription_status=${this.tracker_subscription_status}
+      tracker_page_domain=${this.tracker_page_domain}
+      tracker_metered_wall_type=${this.tracker_metered_wall_type}
+      tracker_epaper_edition=${this.tracker_epaper_edition}
+      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+      ?swgEnable=${this.swgEnable}
+      tracker_content_type=${this.tracker_content_type}
+      ?isLogin=${this.isLogin}
+      type=${this.type}
+      countdownArticle=${this.countdownArticle}
+      .paywallData=${this.paywallData}
+      subscriptionStatus=${this.subscriptionStatus}
+      userGuid=${this.userGuid}
+      theme=${this.theme}
+    ></kompas-paywall-body>`;
+    }
+    renderRegularPaywallSection() {
+        const defaultHeaderText = this.paywallData.informations.meterred.maxQuotaMessage;
+        if (this.isWithHeader) {
+            return html `
+        <div>
+          ${this.transitionBox()}
+          <div
+            class="flex flex-col ${this.theme === 'dark'
+                ? 'bg-dark-5'
+                : 'bg-white'} items-center justify-center mx-4 md:mx-0"
+          >
+            <div class="flex flex-col w-full max-w-screen-md my-5">
+              <kompas-paywall-information-header
+                text=${this.textHeader || defaultHeaderText}
+                theme=${this.theme}
+              ></kompas-paywall-information-header>
+              <kompas-paywall-body
+                paywall_location=${this.paywall_location}
+                paywall_subscription_package=${this
+                .paywall_subscription_package}
+                paywall_subscription_id=${this.paywall_subscription_id}
+                paywall_subscription_price=${this.paywall_subscription_price}
+                paywall_position=${this.paywall_position}
+                tracker_page_type=${this.tracker_page_type}
+                tracker_content_id=${this.tracker_content_id}
+                tracker_content_title=${this.tracker_content_title}
+                tracker_content_categories=${this.tracker_content_categories}
+                tracker_user_type=${this.tracker_user_type}
+                tracker_subscription_status=${this.tracker_subscription_status}
+                tracker_page_domain=${this.tracker_page_domain}
+                tracker_metered_wall_type=${this.tracker_metered_wall_type}
+                tracker_epaper_edition=${this.tracker_epaper_edition}
+                tracker_metered_wall_balance=${this
+                .tracker_metered_wall_balance}
+                tracker_content_type=${this.tracker_content_type}
+                ?swgEnable=${this.swgEnable}
+                ?isLogin=${this.isLogin}
+                type=${this.type}
+                countdownArticle=${this.countdownArticle}
+                .paywallData=${this.paywallData}
+                subscriptionStatus=${this.subscriptionStatus}
+                userGuid=${this.userGuid}
+                theme=${this.theme}
+              ></kompas-paywall-body>
+            </div>
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <div>
+        ${this.transitionBox()}
+        <div
+          class="flex flex-col ${this.theme === 'dark'
+            ? 'bg-dark-5'
+            : 'bg-white'} items-center justify-center mx-4 md:mx-0"
+        >
+          <div class="flex flex-col w-full max-w-screen-md my-5">
+            <kompas-paywall-banner-registration
+              .bannerData=${this.paywallData.informations.register}
+              theme=${this.theme}
+            ></kompas-paywall-banner-registration>
+            <kompas-paywall-body
+              tracker_content_type=${this.tracker_content_type}
+              paywall_location=${this.paywall_location}
+              paywall_subscription_package=${this.paywall_subscription_package}
+              paywall_subscription_id=${this.paywall_subscription_id}
+              paywall_subscription_price=${this.paywall_subscription_price}
+              paywall_position=${this.paywall_position}
+              tracker_page_type=${this.tracker_page_type}
+              tracker_content_id=${this.tracker_content_id}
+              tracker_content_title=${this.tracker_content_title}
+              tracker_content_categories=${this.tracker_content_categories}
+              tracker_user_type=${this.tracker_user_type}
+              tracker_subscription_status=${this.tracker_subscription_status}
+              tracker_epaper_edition=${this.tracker_epaper_edition}
+              tracker_page_domain=${this.tracker_page_domain}
+              tracker_metered_wall_type=${this.tracker_metered_wall_type}
+              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
+              ?swgEnable=${this.swgEnable}
+              ?isLogin=${this.isLogin}
+              type=${this.type}
+              countdownArticle=${this.countdownArticle}
+              .paywallData=${this.paywallData}
+              subscriptionStatus=${this.subscriptionStatus}
+              userGuid=${this.userGuid}
+              theme=${this.theme}
+            ></kompas-paywall-body>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="relative w-full">${this.selectorTypePaywall(this.type)}</div>
+    `;
+    }
+};
+KompasPaywall.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasPaywall.prototype, "paywallData", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasPaywall.prototype, "isLogin", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywall.prototype, "countdownArticle", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasPaywall.prototype, "isWithHeader", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "textHeader", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "userGuid", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "subscriptionStatus", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasPaywall.prototype, "swgEnable", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "paywall_location", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "paywall_subscription_package", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywall.prototype, "paywall_subscription_id", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywall.prototype, "paywall_subscription_price", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywall.prototype, "paywall_position", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywall.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "tracker_epaper_edition", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywall.prototype, "theme", void 0);
+KompasPaywall = __decorate([
+    customElement('kompas-paywall')
+], KompasPaywall);
+export { KompasPaywall };
+//# sourceMappingURL=KompasPaywall.js.map

package/dist/src/components/kompas-paywall/KompasPaywall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct } from './types.js'\nimport '../kompas-paywall-body/KompasPaywallBody.js'\nimport '../kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompas-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompas-paywall')\nexport class KompasPaywall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property countdownArticle untuk menghandle count artikel\n   * property type untuk menghandle tipe epaper\n   * property isWithHeader untuk menghandle paywall information header\n   * property textHeader digunakan sebagai text pada paywall information header\n   * property paywallData untuk menghandle data paywall\n   * property userGuid untuk menghandle user Guid\n   * property subscriptionStatus untuk menghandle status subscription user\n   * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n   * property paywall_location = The location where user encounter the paywall\n   * property paywall_subscription_package = The name of the subscription package viewed by user\n   * property paywall_subscription_id = The ID of the subscription package viewed by user\n   * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n   * property paywall_position = The position of the subscription package viewed by user\n   * property page_type = Type of the page\n   * property content_id = ID of article (slug)\n   * property content_type = Whether it's free article or paid article\n   * property content_title = The title of article\n   * property tracker_content_categories = The category of the content\n   * property user_type = Type of user based on their subscription\n   * property subscription_status = Status of their subscription\n   * property page_domain = Page Domain\n   * property metered_wall_type = The type of Metered Wall\n   * property metered_wall_balance = The balance of their metered wall\n   * property epaper_edition = The edition of epaper viewed by user\n   * property theme = The theme of the paywall component\n   */\n\n  @state() private paywallData: PaywallProduct = {} as PaywallProduct\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'\n  @property({ type: Boolean }) isWithHeader = false\n  @property({ type: String }) textHeader = ''\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Boolean }) swgEnable = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  mockResult: PaywallProduct = {\n    informations: {\n      title: 'Langganan untuk Lanjut Membaca',\n      description: [\n        'Akses tak terbatas Kompas.id (web & app)',\n        'Berita digital tanpa iklan pop-up',\n        '30 arsip terbaru ePaper Kompas',\n        'Artikel  Opini eksklusif',\n      ],\n      register: {\n        img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n        title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n        subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n        label: 'Daftar Sekarang ',\n      },\n      meterred: {\n        maxQuota: 5,\n        label: 'Langganan',\n        maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n        url: 'https://kompas.id/berlangganan',\n      },\n    },\n    packages: {\n      title: 'Sekali bayar, tanpa perpanjang otomatis',\n      memberships: [\n        {\n          title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',\n          percentage: 40,\n          price: 360000,\n          discountPrice: 600000,\n          periode: '1 Tahun',\n          isHighlight: true,\n          url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',\n        },\n        {\n          title: 'Kompas Digital Premium 1 Bulan',\n          percentage: 0,\n          discountPrice: 0,\n          price: 50000,\n          periode: '1 Bulan',\n          isHighlight: false,\n          url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',\n        },\n      ],\n    },\n    payment: {\n      desktop: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n      ],\n      mobile: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n      ],\n      ekstension: [\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n      ],\n    },\n  }\n\n  get darkUrl() {\n    return this.theme === 'dark' ? '-dark' : ''\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.paywallData = this.mockResult\n  }\n\n  private transitionBox() {\n    return html`\n      <div\n        class=\"h-20 ${this.theme === 'dark'\n          ? 'transparent-linear-dark'\n          : 'transparent-linear'} -mt-24 z-0 w-full\"\n      ></div>\n    `\n  }\n\n  private renderEpaperPaywallSection() {\n    return html`<kompas-paywall-body\n      paywall_location=${this.paywall_location}\n      paywall_subscription_package=${this.paywall_subscription_package}\n      paywall_subscription_id=${this.paywall_subscription_id}\n      paywall_subscription_price=${this.paywall_subscription_price}\n      paywall_position=${this.paywall_position}\n      tracker_page_type=${this.tracker_page_type}\n      tracker_content_id=${this.tracker_content_id}\n      tracker_content_title=${this.tracker_content_title}\n      tracker_content_categories=${this.tracker_content_categories}\n      tracker_user_type=${this.tracker_user_type}\n      tracker_subscription_status=${this.tracker_subscription_status}\n      tracker_page_domain=${this.tracker_page_domain}\n      tracker_metered_wall_type=${this.tracker_metered_wall_type}\n      tracker_epaper_edition=${this.tracker_epaper_edition}\n      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n      ?swgEnable=${this.swgEnable}\n      tracker_content_type=${this.tracker_content_type}\n      ?isLogin=${this.isLogin}\n      type=${this.type}\n      countdownArticle=${this.countdownArticle}\n      .paywallData=${this.paywallData}\n      subscriptionStatus=${this.subscriptionStatus}\n      userGuid=${this.userGuid}\n      theme=${this.theme}\n    ></kompas-paywall-body>`\n  }\n\n  private renderRegularPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompas-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompas-paywall-information-header>\n              <kompas-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .paywall_subscription_package}\n                paywall_subscription_id=${this.paywall_subscription_id}\n                paywall_subscription_price=${this.paywall_subscription_price}\n                paywall_position=${this.paywall_position}\n                tracker_page_type=${this.tracker_page_type}\n                tracker_content_id=${this.tracker_content_id}\n                tracker_content_title=${this.tracker_content_title}\n                tracker_content_categories=${this.tracker_content_categories}\n                tracker_user_type=${this.tracker_user_type}\n                tracker_subscription_status=${this.tracker_subscription_status}\n                tracker_page_domain=${this.tracker_page_domain}\n                tracker_metered_wall_type=${this.tracker_metered_wall_type}\n                tracker_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n              ></kompas-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompas-paywall-banner-registration\n              .bannerData=${this.paywallData.informations.register}\n              theme=${this.theme}\n            ></kompas-paywall-banner-registration>\n            <kompas-paywall-body\n              tracker_content_type=${this.tracker_content_type}\n              paywall_location=${this.paywall_location}\n              paywall_subscription_package=${this.paywall_subscription_package}\n              paywall_subscription_id=${this.paywall_subscription_id}\n              paywall_subscription_price=${this.paywall_subscription_price}\n              paywall_position=${this.paywall_position}\n              tracker_page_type=${this.tracker_page_type}\n              tracker_content_id=${this.tracker_content_id}\n              tracker_content_title=${this.tracker_content_title}\n              tracker_content_categories=${this.tracker_content_categories}\n              tracker_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\n              tracker_page_domain=${this.tracker_page_domain}\n              tracker_metered_wall_type=${this.tracker_metered_wall_type}\n              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n            ></kompas-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private selectorTypePaywall = (type: 'epaper' | 'reguler') => {\n    switch (type) {\n      case 'epaper':\n        return this.renderEpaperPaywallSection()\n      case 'reguler':\n        return this.renderRegularPaywallSection()\n      default:\n        return this.renderRegularPaywallSection()\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"relative w-full\">${this.selectorTypePaywall(this.type)}</div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompas-paywall/types.d.ts

@@ -0,0 +1,53 @@
+export interface Product {
+    title: string;
+    percentage: number;
+    price: number;
+    discountPrice: number;
+    periode: string;
+    isHighlight: boolean;
+    url: string;
+}
+export interface Metered {
+    maxQuota: number;
+    label: string;
+    maxQuotaMessage: string;
+    url: string;
+}
+export interface PaymentImage {
+    name: string;
+    link: string;
+}
+export interface Registration {
+    img: string;
+    title: string;
+    subtitle: string;
+    label: string;
+}
+export interface Informations {
+    title: string;
+    description: Array<string>;
+    register: {
+        img: string;
+        title: string;
+        subtitle: string;
+        label: string;
+    };
+}
+export interface Packages {
+    title: string;
+    memberships: Array<Product>;
+}
+export interface PaywallProduct {
+    informations: {
+        title: string;
+        description: Array<string>;
+        register: Registration;
+        meterred: Metered;
+    };
+    packages: Packages;
+    payment: {
+        desktop: Array<PaymentImage>;
+        mobile: Array<PaymentImage>;
+        ekstension: Array<PaymentImage>;
+    };
+}

package/dist/src/components/kompas-paywall/types.js

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

package/dist/src/components/kompas-paywall/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompas-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n  title: string\n  percentage: number\n  price: number\n  discountPrice: number\n  periode: string\n  isHighlight: boolean\n  url: string\n}\nexport interface Metered {\n  maxQuota: number\n  label: string\n  maxQuotaMessage: string\n  url: string\n}\nexport interface PaymentImage {\n  name: string\n  link: string\n}\nexport interface Registration {\n  img: string\n  title: string\n  subtitle: string\n  label: string\n}\nexport interface Informations {\n  title: string\n  description: Array<string>\n  register: {\n    img: string\n    title: string\n    subtitle: string\n    label: string\n  }\n}\nexport interface Packages {\n  title: string\n  memberships: Array<Product>\n}\nexport interface PaywallProduct {\n  informations: {\n    title: string\n    description: Array<string>\n    register: Registration\n    meterred: Metered\n  }\n  packages: Packages\n  payment: {\n    desktop: Array<PaymentImage>\n    mobile: Array<PaymentImage>\n    ekstension: Array<PaymentImage>\n  }\n}\n"]}

package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import { Registration } from '../kompas-paywall/types.js';
+export declare class KompasPaywallBannerRegistration extends LitElement {
+    static styles: import("lit").CSSResult[];
+    theme: string;
+    bannerData: Registration | undefined;
+    get isDark(): boolean;
+    private redirectToRegister;
+    private sendDataLayer;
+    render(): import("lit-html").TemplateResult<1>;
+}