npm - @kompasid/lit-web-components - Versions diffs - 0.1.0 - Mend

@kompasid/lit-web-components 0.1.0

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

Files changed (76) hide show

package/dist/src/components/kompas-footer/KompasFooter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KompasFooter.js","sourceRoot":"","sources":["../../../../src/components/kompas-footer/KompasFooter.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Footer } from './types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\n\n@customElement('kompas-footer')\nexport class KompasFooter extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .bg-instagram {\n background-image: linear-gradient(90deg, #ffc107, #f44336, #9c27b0);\n }\n\n .bg-sosmed-facebook {\n background-color: #3d5b9b;\n }\n\n .bg-sosmed-twitter {\n background-color: #2daae4;\n }\n\n .bg-sosmed-youtube {\n background-color: #f44336;\n }\n\n .text-brand-1 {\n color: #00559a;\n }\n\n .text-grey-50 {\n color: #666;\n color: rgb(102 102 102/1);\n }\n\n .text-grey-60 {\n color: #333;\n color: rgb(51 51 51/1);\n }\n\n .border-grey-30 {\n --tw-border-opacity: 1;\n border-color: rgb(221 221 221 / var(--tw-border-opacity));\n }\n\n .hover-bg-blue-10:hover {\n background-color: #e1f0ff;\n }\n\n .hover-border-blue-20:hover {\n border-color: #93c8fd;\n }\n `,\n TWStyles,\n ]\n\n @property({ type: Object }) footer: Footer | null = null\n\n @property({ type: Boolean }) isDark = false\n\n connectedCallback() {\n super.connectedCallback()\n\n this.addStylesheetToHead()\n this.initializeFooter()\n }\n\n private addStylesheetToHead() {\n const link = document.createElement('link')\n link.rel = 'stylesheet'\n link.href =\n 'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'\n document.head.appendChild(link)\n }\n\n private initializeFooter() {\n if (this.footer === undefined || this.footer === null) {\n this.fetchFooter()\n }\n }\n\n async fetchFooter() {\n const response = await fetch(\n 'https://d3w4qaq4xm1ncv.cloudfront.net/assets/json/footer/ApiFooterDefault.json'\n )\n const jsonResponse = await response.json()\n this.footer = jsonResponse\n }\n\n getYear() {\n return new Date().getFullYear()\n }\n\n render() {\n if (this.footer) {\n const { isDark } = this\n const bgClass = isDark ? 'bg-[#2C2C2C]' : 'bg-transparent'\n const primaryTextColor = isDark ? 'text-[#FFFFFF]' : ''\n const secondaryTextColor = isDark ? 'text-[#FFFFFF]' : 'text-grey-60'\n const itemTextColor = isDark ? 'text-[#FFFFFF]' : 'text-[#00559a]'\n\n return html`\n <div\n class=\"border-t border-grey-30 mx-auto w-full md:px-20 px-4 ${bgClass} ${primaryTextColor}\"\n >\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"md:px-0 pb-6 lg:pb-0 mx-auto w-full\">\n <div\n class=\"grid grid-cols-4 lg:grid-cols-12 gap-6 lg:gap-8 lg:justify-between pt-10 pb-8 lg:py-10\"\n >\n ${Object.values(this.footer.brands.itemsLeft).map(\n brand => html`\n <a\n class=\"col-span-4 lg:col-span-2 flex gap-4 cursor-pointer\"\n title=\"Kompas.id\"\n href=\"${brand.permalink}\"\n >\n <img\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/assets/img/logos/kompas-logo-footer.svg\"\n height=\"${brand.image.height}\"\n width=\"${brand.image.width}\"\n alt=\"${brand.image.alt}\"\n class=\"w-auto h-10 lg:mx-auto\"\n />\n </a>\n `\n )}\n <div\n class=\"col-span-4 lg:col-start-10 lg:col-span-3 gap-4 flex lg:justify-end mx-auto w-full\"\n >\n <a\n class=\"cursor-pointer\"\n href=\"${this.footer.brands.itemsRight[0].permalink}\"\n target=\"_blank\"\n >\n <img\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/ios-badge.png\"\n class=\"h-10 w-[120px]\"\n alt=\"Logo iOS\"\n /></a>\n <a\n class=\"cursor-pointer\"\n href=\"${this.footer.brands.itemsRight[1].permalink}\"\n target=\"_blank\"\n >\n <img\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/google-play-badge.png\"\n class=\"h-10 w-[138px]\"\n alt=\"Logo Android\"\n /></a>\n </div>\n </div>\n </div>\n <div class=\"grid grid-cols-4 lg:grid-cols-12 gap-8 pb-2\">\n <div\n class=\"col-span-4 lg:col-span-3 flex flex-row lg:flex-col gap-8 lg:gap-0\"\n >\n ${Object.values(this.footer.address.items).map(\n address => html` <div class=\"lg:pb-6\">\n <div\n class=\"font-bold leading-none pb-3 text-sm ${itemTextColor}\"\n >\n ${address.title}\n </div>\n <div class=\"leading-normal pb-3 text-sm ${secondaryTextColor}\">\n ${address.text}\n </div>\n <div class=\"flex flex-row\">\n <div\n class=\"font-bold leading-none pb-3 pr-2 text-sm ${itemTextColor} hidden lg:block\"\n >\n Tlp.\n </div>\n <div\n class=\"grid lg:gap-x-6 lg:grid-cols-2 md:grid-cols-1 grid-cols-1\"\n >\n ${Object.values(address.phones).map(\n num => html`\n <div\n class=\"leading-normal pb-2 text-sm ${secondaryTextColor}\"\n >\n ${num.number}\n </div>\n `\n )}\n </div>\n </div>\n </div>`\n )}\n </div>\n <div class=\"col-span-4 lg:col-span-5 gap-4\">\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-6 shrink-0\">\n ${Object.values(this.footer.products.items).map(\n product => html`\n <div>\n <div\n class=\"font-bold leading-none pb-4 text-sm ${itemTextColor}\"\n >\n ${product.title}\n </div>\n ${Object.values(product.sites).map(\n prod => html`\n <a\n class=\"leading-normal text-sm ${secondaryTextColor}\"\n href=\"${prod.permalink}\"\n >\n <div class=\"flex flex-col pb-4 cursor-pointer\">\n ${prod.text}\n </div>\n </a>\n `\n )}\n </div>\n `\n )}\n </div>\n </div>\n <div class=\"col-span-2 flex flex-col\">\n <div\n class=\"font-bold leading-none pb-4 text-sm ${itemTextColor}\"\n >\n ${this.footer.contacts.title}\n </div>\n ${Object.values(this.footer.contacts.items).map(\n contact => html` <div class=\"flex flex-row pb-4\">\n <div\n class=\"flex items-center mr-3 text-base ${itemTextColor}\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(contact.icon[0], contact.icon[1])\n )}\n </div>\n <div class=\"flex flex-col\">\n <div class=\"pb-1 text-sm w-full ${secondaryTextColor}\">\n ${contact.label}\n </div>\n <a\n class=\"font-bold text-sm w-full cursor-pointer\"\n href=\"${contact.action}\"\n >\n <span class=\"text-gray-500\"> ${contact.text} </span>\n </a>\n </div>\n </div>`\n )}\n </div>\n <div class=\"col-span-2 flex flex-col\">\n <div\n class=\"font-bold leading-none pb-4 text-sm ${itemTextColor}\"\n >\n ${this.footer.sosmed.title}\n </div>\n ${Object.values(this.footer.sosmed.items).map(\n sosmed => html`\n <a\n class=\"border border-grey-30 hover-border-blue-20 hover-bg-blue-10 p-2 mb-2 flex flex-row md:self-end rounded w-full cursor-pointer\"\n href=\"${sosmed.url}\"\n >\n <div\n class=\"h-5 flex justify-center items-center rounded text-white w-5 ${sosmed.color}\"\n >\n <div class=\"h-3 text-xs\">\n ${unsafeSVG(\n getFontAwesomeIcon(\n sosmed.icon[0],\n sosmed.icon[1],\n 12,\n 12\n )\n )}\n </div>\n </div>\n <div class=\"leading-normal pl-2 text-sm ${secondaryTextColor}\">\n ${sosmed.name}\n </div>\n </a>\n `\n )}\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col pb-32 pt-6 px-4 text-xs bg-black\">\n <div class=\"flex flex-col lg:flex-row max-w-7xl mx-auto w-full\">\n <div class=\"flex flex-wrap mb-2 lg:mb-0 w-full\">\n <div\n class=\"flex flex-col lg:flex-row flex-grow lg:justify-between\"\n >\n <div class=\"flex flex-wrap\">\n <div class=\"flex text-white\">\n © ${this.getYear()} PT Kompas Media Nusantara\n <span class=\"mx-2 text-grey-50\">·</span>\n </div>\n ${Object.values(this.footer.universal.itemsLeft).map(\n universal => html` <a\n class=\"flex justify-center items-center\"\n href=\"${universal.url}\"\n >\n <div class=\"pb-2 lg:pb-0 text-white cursor-pointer\">\n ${universal.name}\n <span class=\"mx-2 text-grey-50\">·</span>\n </div>\n </a>`\n )}\n </div>\n <div class=\"flex flex-wrap shrink-0\">\n ${Object.values(this.footer.universal.itemsRight).map(\n universal => html`\n <a class=\"flex cursor-pointer\" href=\"${universal.url}\">\n <div class=\"text-white flex items-center\">\n ${universal.name}\n <span class=\"mx-2 text-grey-50\">·</span>\n </div>\n </a>\n `\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n }\n return html``\n }\n}\n"]}

package/dist/src/components/kompas-footer/types.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+export interface Image {
+    alt: string;
+    height: number;
+    url: string;
+    width: number;
+}
+export interface Item {
+    image: Image;
+    permalink: string;
+    name: string;
+    url: string;
+}
+export interface Section<T> {
+    items: T[];
+    title?: string;
+}
+export interface Phones {
+    number: number;
+}
+export interface Sites {
+    text: string;
+    permalink: string;
+}
+export interface Items {
+    phones: Phones;
+    title: string;
+    text: string;
+    sites: Sites;
+    action: string;
+    icon: string[];
+    label: string;
+    color: string;
+    name: string;
+    url: string;
+}
+export interface Universal {
+    itemsLeft: Item[];
+    itemsRight: Item[];
+}
+export interface Footer {
+    brands: Universal;
+    address: Section<Items>;
+    products: Section<Items>;
+    contacts: Section<Items>;
+    sosmed: Section<Items>;
+    universal: Universal;
+}

package/dist/src/components/kompas-footer/types.js ADDED Viewed

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

package/dist/src/components/kompas-footer/types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompas-footer/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Image {\n alt: string\n height: number\n url: string\n width: number\n}\n\nexport interface Item {\n image: Image\n permalink: string\n name: string\n url: string\n}\n\nexport interface Section<T> {\n items: T[]\n title?: string\n}\n\nexport interface Phones {\n number: number\n}\n\nexport interface Sites {\n text: string\n permalink: string\n}\n\nexport interface Items {\n phones: Phones\n title: string\n text: string\n sites: Sites\n action: string\n icon: string[]\n label: string\n color: string\n name: string\n url: string\n}\n\nexport interface Universal {\n itemsLeft: Item[]\n itemsRight: Item[]\n}\n\nexport interface Footer {\n brands: Universal\n address: Section<Items>\n products: Section<Items>\n contacts: Section<Items>\n sosmed: Section<Items>\n universal: Universal\n}\n"]}

package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.d.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+export declare class KompasMeteredPaywall extends LitElement {
+    static styles: import("lit").CSSResult[];
+    maxQuota: number;
+    subscriptionUrl: string;
+    /**
+     * Props
+     */
+    /**
+     * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+     * 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;
+    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;
+    private getCountdownArticle;
+    connectedCallback(): void;
+    private redirectToBerlangganan;
+    private dataLayeronLanggananButton;
+    private dataLayeronMeteredPaywall;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js ADDED Viewed

@@ -0,0 +1,225 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+let KompasMeteredPaywall = class KompasMeteredPaywall extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.maxQuota = 5;
+        this.subscriptionUrl = 'https://www.kompas.id/berlangganan';
+        /**
+         * Props
+         */
+        /**
+         * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+         * 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.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;
+    }
+    getCountdownArticle() {
+        const getCountdown = this.countdownArticle;
+        const { maxQuota } = this;
+        if (getCountdown > 0 && getCountdown < maxQuota) {
+            return html `
+        <p>
+          Anda memiliki sisa
+          <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium
+          gratis bulan ini. Langganan untuk akses tanpa batas
+        </p>
+      `;
+        }
+        return html `
+      <p>
+        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> Langganan
+        untuk akses tanpa batas
+      </p>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dataLayeronMeteredPaywall();
+    }
+    redirectToBerlangganan() {
+        this.dataLayeronLanggananButton();
+        window.location.href = this.subscriptionUrl;
+    }
+    dataLayeronLanggananButton() {
+        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
+        });
+    }
+    dataLayeronMeteredPaywall() {
+        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
+        });
+    }
+    render() {
+        return html `
+      <div class="sticky bottom-0 w-full h-full">
+        <div
+          class="flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0"
+        >
+          <div class="text-grey-600 text-sm md:text-lg self-center text-left">
+            ${this.getCountdownArticle()}
+          </div>
+          <div class="self-center">
+            <button
+              @click="${this.redirectToBerlangganan}"
+              class="bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl"
+            >
+              Langganan
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+KompasMeteredPaywall.styles = [
+    css `
+      .text-transition {
+        width: 100%;
+        height: 5rem;
+      }
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+      .icon {
+        height: 1rem;
+        color: #48bb78;
+      }
+      .icon.lg {
+        height: 1.5rem;
+      }
+      .icon.lg svg {
+        height: 1.5rem;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasMeteredPaywall.prototype, "maxQuota", void 0);
+__decorate([
+    state()
+], KompasMeteredPaywall.prototype, "subscriptionUrl", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywall.prototype, "countdownArticle", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "paywall_location", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "paywall_subscription_package", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "paywall_subscription_id", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywall.prototype, "paywall_subscription_price", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywall.prototype, "paywall_position", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywall.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasMeteredPaywall.prototype, "tracker_metered_wall_balance", void 0);
+KompasMeteredPaywall = __decorate([
+    customElement('kompas-metered-paywall')
+], KompasMeteredPaywall);
+export { KompasMeteredPaywall };
+//# sourceMappingURL=KompasMeteredPaywall.js.map

package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KompasMeteredPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompas-metered-paywall/KompasMeteredPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompas-metered-paywall')\nexport class KompasMeteredPaywall extends LitElement {\n static styles = [\n css`\n .text-transition {\n width: 100%;\n height: 5rem;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .icon {\n height: 1rem;\n color: #48bb78;\n }\n\n .icon.lg {\n height: 1.5rem;\n }\n\n .icon.lg svg {\n height: 1.5rem;\n }\n `,\n TWStyles,\n ]\n\n @state() maxQuota: number = 5\n\n @state() subscriptionUrl: string = 'https://www.kompas.id/berlangganan'\n /**\n * Props\n */\n /**\n * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of ther subscription package viewed by user\n * prop tracker_page_type = Type of the page\n * prop tracker_content_id = ID of article (slug)\n * prop tracker_content_type = Whether it's free article or paid article\n * prop tracker_content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop tracker_user_type = Type of user based on their subscription\n * prop tracker_subscription_status = Status of their subscription\n * prop tracker_page_domain = Page Domain\n * prop tracker_metered_wall_type = The type of Metered Wall\n * prop tracker_epaper_edition = The edition of epaper viewed by user\n * prop tracker_metered_wall_balance = The balance of their metered wall\n */\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\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\n private getCountdownArticle() {\n const getCountdown = this.countdownArticle\n const { maxQuota } = this\n\n if (getCountdown > 0 && getCountdown < maxQuota) {\n return html`\n <p>\n Anda memiliki sisa\n <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium\n gratis bulan ini. Langganan untuk akses tanpa batas\n </p>\n `\n }\n return html`\n <p>\n Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> Langganan\n untuk akses tanpa batas\n </p>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.dataLayeronMeteredPaywall()\n }\n\n private redirectToBerlangganan() {\n this.dataLayeronLanggananButton()\n window.location.href = this.subscriptionUrl\n }\n\n private dataLayeronLanggananButton() {\n window.dataLayer.push({\n event: 'subscribe_button_clicked',\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 || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: (this.maxQuota - this.countdownArticle) + 1\n })\n }\n\n private dataLayeronMeteredPaywall() {\n window.dataLayer.push({\n event: 'paywall_viewed',\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 || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: (this.maxQuota - this.countdownArticle) + 1\n })\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0\"\n >\n <div class=\"text-grey-600 text-sm md:text-lg self-center text-left\">\n ${this.getCountdownArticle()}\n </div>\n <div class=\"self-center\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl\"\n >\n Langganan\n </button>\n </div>\n </div>\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompas-paywall/KompasPaywall.d.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+import { PaywallProduct } from './types.js';
+import '../kompas-paywall-body/KompasPaywallBody.js';
+import '../kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js';
+import '../kompas-paywall-information-header/KompasPaywallInformationHeader.js';
+export declare class KompasPaywall extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * 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
+     */
+    private paywallData;
+    isLogin: boolean;
+    countdownArticle: number;
+    type: 'epaper' | 'reguler';
+    isWithHeader: boolean;
+    textHeader: string;
+    userGuid: string;
+    subscriptionStatus: string;
+    swgEnable: boolean;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: number;
+    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;
+    tracker_epaper_edition: string;
+    theme: string;
+    mockResult: PaywallProduct;
+    get darkUrl(): "" | "-dark";
+    connectedCallback(): void;
+    private transitionBox;
+    private renderEpaperPaywallSection;
+    private renderRegularPaywallSection;
+    private selectorTypePaywall;
+    render(): import("lit-html").TemplateResult<1>;
+}