@kompasid/lit-web-components 0.9.28 → 0.9.29

package/demo/index.html

@@ -52,6 +52,7 @@
       import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
       import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
       import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+      import '../dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js'
       import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
       import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
       import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
@@ -260,7 +261,7 @@
             .tracker_subscription_status=${trackerSubscriptionStatus}
           >
           </kompasid-paywall>
-          <div class="metered font-sans">
+          <div class="metered font-sans" style="position: sticky; bottom: 0; width: 100%; z-index: 999;">
             <kompasid-metered-paywall
             .paywall_location=${paywallLocation}
               .paywall_subscription_id=${paywallSubscriptionId}
@@ -280,6 +281,28 @@
               .metered_wall_balance=${meteredWallBalance}
             >
             </kompasid-metered-paywall>
+            <kompasid-metered-paywall-personalize
+              segment="Passive Faders"
+              offering="Q3"
+              user_name="Dummy User"
+              .paywall_location=${paywallLocation}
+              .paywall_subscription_id=${paywallSubscriptionId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              .paywall_position=${paywallPosition}
+              .tracker_page_type=${trackerPageType}
+              .tracker_content_id=${trackerContentId}
+              .tracker_content_type=${trackerContentType}
+              .tracker_content_title=${trackerContentTitle}
+              .tracker_content_categories=${trackerContentCategories}
+              .tracker_user_type=${trackerUserType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_page_domain=${trackerPageDomain}
+              .metered_wall_type=${meteredWallType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_epaper_edition=${trackerEpaperEdition}
+              .metered_wall_balance=${meteredWallBalance}
+            >
+            </kompasid-metered-paywall-personalize>
           </div>
 
           <!-- <div style="margin: 20px 0">

package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts

@@ -0,0 +1,67 @@
+import { LitElement, nothing } from 'lit';
+export declare class KompasMeteredPaywallPersonalize extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private isLoading;
+    private maxQuota;
+    private packageData;
+    /**
+     * Props
+     */
+    /**
+     * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+     * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
+     * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
+     * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
+     * prop paywall_location = The location where user encounter the paywall
+     * prop paywall_subscription_package = The name of the subscription package viewed by user
+     * prop paywall_subscription_id = The ID of the subscription package viewed by user
+     * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+     * prop paywall_position = The position of ther subscription package viewed by user
+     * prop tracker_page_type = Type of the page
+     * prop tracker_content_id = ID of article (slug)
+     * prop tracker_content_type = Whether it's free article or paid article
+     * prop tracker_content_title = The title of article
+     * prop tracker_content_categories = The category of the content
+     * prop tracker_user_type = Type of user based on their subscription
+     * prop tracker_subscription_status = Status of their subscription
+     * prop tracker_page_domain = Page Domain
+     * prop tracker_metered_wall_type = The type of Metered Wall
+     * prop tracker_epaper_edition = The edition of epaper viewed by user
+     * prop tracker_metered_wall_balance = The balance of their metered wall
+     */
+    countdownArticle: number;
+    segment: string;
+    offering: string;
+    user_name: string;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: string;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    connectedCallback(): Promise<void>;
+    getMeteredPaywallData(): Promise<void>;
+    private redirectToBerlangganan;
+    private dataLayeronLanggananButton;
+    private dataLayeronMeteredPaywall;
+    private stateDefaultPaywall;
+    private computedstateDefaultPaywall;
+    /**
+     * Ganti placeholder _key_ di template dengan nilai dari data offering
+     * Hanya replace jika placeholder cocok dan datanya valid
+     */
+    private replacePlaceholdersFromOffering;
+    private engageReturners;
+    private passiveFaders;
+    private pickTemplate;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js

@@ -0,0 +1,507 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { formatRupiah } from '../../utils/formatRupiah.js';
+let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isLoading = true;
+        this.maxQuota = 3;
+        /**
+         * Props
+         */
+        /**
+         * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+         * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
+         * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
+         * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
+         * prop paywall_location = The location where user encounter the paywall
+         * prop paywall_subscription_package = The name of the subscription package viewed by user
+         * prop paywall_subscription_id = The ID of the subscription package viewed by user
+         * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+         * prop paywall_position = The position of ther subscription package viewed by user
+         * prop tracker_page_type = Type of the page
+         * prop tracker_content_id = ID of article (slug)
+         * prop tracker_content_type = Whether it's free article or paid article
+         * prop tracker_content_title = The title of article
+         * prop tracker_content_categories = The category of the content
+         * prop tracker_user_type = Type of user based on their subscription
+         * prop tracker_subscription_status = Status of their subscription
+         * prop tracker_page_domain = Page Domain
+         * prop tracker_metered_wall_type = The type of Metered Wall
+         * prop tracker_epaper_edition = The edition of epaper viewed by user
+         * prop tracker_metered_wall_balance = The balance of their metered wall
+         */
+        this.countdownArticle = 0;
+        this.segment = '';
+        this.offering = '';
+        this.user_name = '';
+        this.paywall_location = '';
+        this.paywall_subscription_package = '';
+        this.paywall_subscription_id = '';
+        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.stateDefaultPaywall = false;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.getMeteredPaywallData();
+        this.dataLayeronMeteredPaywall();
+    }
+    async getMeteredPaywallData() {
+        try {
+            const getSegment = this.segment.toLocaleLowerCase().replace(' ', '_');
+            const response = await fetch(`https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`);
+            const json = await response.json();
+            this.packageData = json;
+        }
+        catch (error) {
+            throw Error('Failed to get metered paywall data');
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    redirectToBerlangganan() {
+        var _a, _b;
+        this.dataLayeronLanggananButton();
+        // Pastikan data tersedia
+        const offeringKey = this.offering || 'Q1';
+        const offeringData = (_b = (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering) === null || _b === void 0 ? void 0 : _b[offeringKey];
+        const checkoutUrl = (offeringData === null || offeringData === void 0 ? void 0 : offeringData.checkout_url) || '';
+        // Encode referrer dengan aman
+        const { origin, pathname, search } = window.location;
+        const referrer = encodeURIComponent(`${origin}${pathname}${search}`);
+        // Bangun URL dengan parameter tambahan aman
+        const url = new URL(checkoutUrl);
+        url.searchParams.set('referrer', referrer);
+        // Redirect ke URL akhir
+        window.location.href = url.toString();
+    }
+    dataLayeronLanggananButton() {
+        var _a;
+        window.dataLayer.push({
+            event: 'subscribe_button_clicked',
+            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 || 0,
+            paywall_position: this.paywall_position || 0,
+            page_type: this.tracker_page_type,
+            content_id: this.tracker_content_id,
+            content_title: this.tracker_content_title,
+            content_categories: this.tracker_content_categories,
+            content_type: this.tracker_content_type,
+            user_type: this.tracker_user_type || 'R',
+            subscription_status: this.tracker_subscription_status,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+            metered_wall_type: this.tracker_metered_wall_type || 'MP',
+            metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
+            paywall_segment: this.segment || '',
+            checkout_url: (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering[this.offering ? this.offering : 'Q1'].checkout_url,
+        });
+    }
+    dataLayeronMeteredPaywall() {
+        var _a;
+        window.dataLayer.push({
+            event: 'paywall_viewed',
+            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 || 0,
+            paywall_position: this.paywall_position || 0,
+            page_type: this.tracker_page_type,
+            content_id: this.tracker_content_id,
+            content_title: this.tracker_content_title,
+            content_categories: this.tracker_content_categories,
+            content_type: this.tracker_content_type,
+            user_type: this.tracker_user_type || 'R',
+            subscription_status: this.tracker_subscription_status,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+            metered_wall_type: this.tracker_metered_wall_type || 'MP',
+            metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
+            paywall_segment: this.segment || '',
+            checkout_url: (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering[this.offering ? this.offering : 'Q1'].checkout_url,
+        });
+    }
+    computedstateDefaultPaywall() {
+        this.stateDefaultPaywall = !this.stateDefaultPaywall;
+        this.requestUpdate();
+    }
+    /**
+     * Ganti placeholder _key_ di template dengan nilai dari data offering
+     * Hanya replace jika placeholder cocok dan datanya valid
+     */
+    replacePlaceholdersFromOffering(template, offeringData) {
+        if (!offeringData)
+            return template;
+        // regex cari placeholder seperti _harga_coret_, _offering_price_, dst.
+        return template.replace(/_([a-zA-Z0-9_]+)_/g, (match, key) => {
+            // cek apakah key ada di dalam data
+            if (key in offeringData) {
+                const value = offeringData[key];
+                // jika value number, auto format ke rupiah
+                if (typeof value === 'number') {
+                    return formatRupiah(value);
+                }
+                // jika string, langsung return
+                return String(value);
+            }
+            // kalau placeholder tidak dikenal, biarkan apa adanya
+            return match;
+        });
+    }
+    engageReturners() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const textTemplateFormater = this.replacePlaceholdersFromOffering(((_a = this.packageData) === null || _a === void 0 ? void 0 : _a.paywall.messageTitleCollapse) || '', ((_b = this.packageData) === null || _b === void 0 ? void 0 : _b.offering[this.offering ? this.offering : 'Q1']) ||
+            {});
+        return !this.stateDefaultPaywall
+            ? html `
+          <div
+            class="fixed w-full inset-0 px-4 lg:px-0 h-full flex justify-center items-center bg-black bg-opacity-75 z-[999]"
+          >
+            <div
+              class="bg-white max-w-[460px] w-full justify-center items-center flex flex-col p-6 lg:pb-6 lg:px-6 lg:pt-9 relative rounded"
+            >
+              <button
+                class="font-bold cursor-pointer text-grey-400 flex rounded text-base absolute right-0 top-0 w-6 h-6 lg:w-8 lg:h-8 justify-center items-center mt-4 mr-4"
+                @click=${this.computedstateDefaultPaywall}
+              >
+                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
+              </button>
+              <image
+                src="${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.image}"
+                alt="content"
+                class="w-[248px] lg:w-[364px]"
+              />
+              <div
+                class="font-lora font-bold text-grey-600 lg:text-2xl text-center"
+              >
+                <div>Halo ${this.user_name},</div>
+                <div>${(_d = this.packageData) === null || _d === void 0 ? void 0 : _d.paywall.messageTitleExpand}</div>
+              </div>
+              <div
+                class="pt-3 text-center font-sans text-grey-600 text-sm lg:text-base leading-none"
+              >
+                <div>${(_e = this.packageData) === null || _e === void 0 ? void 0 : _e.paywall.descriptionExpand}</div>
+                <div class="text-base lg:text-lg text-grey-400 py-3">
+                  <s
+                    >${formatRupiah(((_f = this.packageData) === null || _f === void 0 ? void 0 : _f.offering[this.offering ? this.offering : 'Q1'].harga_coret) || 0)}</s
+                  >
+                  <span class="text-lg lg:text-2xl text-orange-400 font-bold">
+                    ${formatRupiah(((_g = this.packageData) === null || _g === void 0 ? void 0 : _g.offering[this.offering ? this.offering : 'Q1'].offering_price) || 0)}
+                  </span>
+                  ${((_h = this.packageData) === null || _h === void 0 ? void 0 : _h.offering[this.offering ? this.offering : 'Q1'].duration)
+                ? html `
+                        <span class="text-base lg:text-lg text-grey-600"
+                          >${(_j = this.packageData) === null || _j === void 0 ? void 0 : _j.offering[this.offering ? this.offering : 'Q1'].duration}</span
+                        >
+                      `
+                : nothing}
+                </div>
+                <div>untuk tahun pertama.</div>
+              </div>
+              <div class="w-full pt-6">
+                <button
+                  @click="${this.redirectToBerlangganan}"
+                  class="bg-brand-1 whitespace-nowrap rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-none w-full"
+                >
+                  ${(_k = this.packageData) === null || _k === void 0 ? void 0 : _k.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                </button>
+              </div>
+            </div>
+          </div>
+        `
+            : html `
+          <div class="sticky bottom-0 w-full h-full">
+            <div
+              class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 justify-center gap-4 px-4 lg:px-0 bottom-0"
+            >
+              <div
+                class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
+              >
+                ${unsafeHTML(textTemplateFormater)}
+              </div>
+              <div>
+                <button
+                  @click="${this.redirectToBerlangganan}"
+                  class="bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                >
+                  ${(_l = this.packageData) === null || _l === void 0 ? void 0 : _l.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                </button>
+              </div>
+            </div>
+          </div>
+        `;
+    }
+    passiveFaders() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const messageTitleCollapse = this.replacePlaceholdersFromOffering(((_a = this.packageData) === null || _a === void 0 ? void 0 : _a.paywall.messageTitleCollapse) || '', ((_b = this.packageData) === null || _b === void 0 ? void 0 : _b.offering[this.offering ? this.offering : 'Q1']) ||
+            {});
+        const descriptionExpand = this.replacePlaceholdersFromOffering(((_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.descriptionExpand) || '', ((_d = this.packageData) === null || _d === void 0 ? void 0 : _d.offering[this.offering ? this.offering : 'Q1']) ||
+            {});
+        return html `
+      <div class="sticky bottom-0 w-full h-full">
+        <div
+          class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 gap-4 px-4 bottom-0"
+        >
+          <div
+            class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
+          >
+            ${!this.stateDefaultPaywall
+            ? html `
+                  <div class="h-9 w-9 hidden lg:flex"></div>
+                  <div
+                    class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
+                  >
+                    <div
+                      class="text-grey-600 font-lora message-collapse-engage-returners order-2"
+                    >
+                      <div
+                        class="text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start"
+                      >
+                        ${(_e = this.packageData) === null || _e === void 0 ? void 0 : _e.paywall.messageTitleExpand}
+                      </div>
+                      <div class="flex flex-col font-sans gap-3 mb-3">
+                        ${((_f = this.packageData) === null || _f === void 0 ? void 0 : _f.paywall.listBenefits)
+                ? (_g = this.packageData) === null || _g === void 0 ? void 0 : _g.paywall.listBenefits.map(item => html `
+                                  <div
+                                    class="flex items-baseline align-baseline"
+                                  >
+                                    <div
+                                      class="bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center"
+                                    >
+                                      ${unsafeSVG(getFontAwesomeIcon('fas', 'circle-check', 12, 12))}
+                                    </div>
+                                    <h6 class="text-base ml-1">${item}</h6>
+                                  </div>
+                                `)
+                : nothing}
+                      </div>
+                      <div
+                        class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-collapse-engage-returners mb-4"
+                      >
+                        ${unsafeHTML(descriptionExpand)}
+                      </div>
+                      <div>
+                        <button
+                          @click="${this.redirectToBerlangganan}"
+                          class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                        >
+                          ${(_h = this.packageData) === null || _h === void 0 ? void 0 : _h.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
+                    >
+                      <image
+                        src="${(_j = this.packageData) === null || _j === void 0 ? void 0 : _j.paywall.image}"
+                        alt="content"
+                        class="w-[112px] lg:w-[202px]"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      @click="${this.computedstateDefaultPaywall}"
+                      class="h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4"
+                    >
+                      <div>
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+                      </div>
+                    </button>
+                  </div>
+                `
+            : html `
+                  <div class="h-9 w-9 flex"></div>
+                  <div class="flex justify-between">
+                    <div
+                      class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
+                    >
+                      ${unsafeHTML(messageTitleCollapse)}
+                    </div>
+                    <div class="hidden lg:flex ml-6">
+                      <button
+                        @click="${this.redirectToBerlangganan}"
+                        class="bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                      >
+                        ${(_k = this.packageData) === null || _k === void 0 ? void 0 : _k.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                      </button>
+                    </div>
+                    <div class="flex lg:hidden ml-4">
+                      <button
+                        @click="${this.computedstateDefaultPaywall}"
+                        class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
+                      >
+                        <div>
+                          ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      @click="${this.computedstateDefaultPaywall}"
+                      class="h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200"
+                    >
+                      <div>
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+                      </div>
+                    </button>
+                    <button
+                      @click="${this.redirectToBerlangganan}"
+                      class="bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full"
+                    >
+                      ${(_l = this.packageData) === null || _l === void 0 ? void 0 : _l.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                    </button>
+                  </div>
+                `}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    pickTemplate() {
+        switch (this.segment) {
+            case 'Engaged Returners':
+                return this.engageReturners();
+            case 'Passive Faders':
+                return this.passiveFaders();
+            default:
+                return nothing;
+        }
+    }
+    render() {
+        return !this.isLoading ? this.pickTemplate() : nothing;
+    }
+};
+KompasMeteredPaywallPersonalize.styles = [
+    css `
+      .text-transition {
+        width: 100%;
+        height: 5rem;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .message-collapse-engage-returners span {
+        color: #ff7a00;
+        font-weight: 700;
+        text-wrap: nowrap;
+      }
+
+      .message-collapse-engage-returners s {
+        color: #999999;
+        text-wrap: nowrap;
+      }
+
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+
+      .icon {
+        height: 1rem;
+        color: #48bb78;
+      }
+
+      .icon.lg {
+        height: 1.5rem;
+      }
+
+      .icon.lg svg {
+        height: 1.5rem;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasMeteredPaywallPersonalize.prototype, "isLoading", void 0);
+__decorate([
+    state()
+], KompasMeteredPaywallPersonalize.prototype, "maxQuota", void 0);
+__decorate([
+    state()
+], KompasMeteredPaywallPersonalize.prototype, "packageData", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywallPersonalize.prototype, "countdownArticle", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "segment", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "offering", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "user_name", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "paywall_location", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "paywall_subscription_package", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "paywall_subscription_id", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywallPersonalize.prototype, "paywall_subscription_price", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywallPersonalize.prototype, "paywall_position", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywallPersonalize.prototype, "tracker_metered_wall_balance", void 0);
+KompasMeteredPaywallPersonalize = __decorate([
+    customElement('kompasid-metered-paywall-personalize')
+], KompasMeteredPaywallPersonalize);
+export { KompasMeteredPaywallPersonalize };
+//# sourceMappingURL=KompasMeteredPaywallPersonalize.js.map