@kompasid/lit-web-components 0.7.0 → 0.7.2

package/demo/index.html

@@ -54,6 +54,7 @@
       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'
+      import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
 
       const type = 'reguler'
       const theme = ''
@@ -250,6 +251,8 @@
           .tracker_metered_wall_balance=${trackerMeteredWallBalance}
           .tracker_page_domain=${trackerPageDomain}
           ></kompasid-metered-wall-register>
+
+          <!-- <kompasid-grace-period totalGracePeriod="5" subscriptionId="9802032"></kompasid-grace-period> -->
         `,
         document.querySelector('#demo')
       )

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export declare class KompasGracePeriod extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * property totalGracePeriod = how many days are left in grace period
+     * property isColumn = changes how the component looks on different screen sizes
+     * property isShowButton = shows or hides a subscription button
+     * property subscriptionId = used for renewal subs
+     */
+    totalGracePeriod: number;
+    isColumn: boolean;
+    isShowButton: boolean;
+    subscriptionId: string;
+    /**
+     * State
+     */
+    private maxGracePeriod;
+    private updateSubscription;
+    private getCountdownGracePeriod;
+    private redirectToBerlangganan;
+    private dataLayeronPerbaruiLanggananButton;
+    private dataLayeronGracePeriod;
+    private gracePeriodTemplate;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js

@@ -0,0 +1,146 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { deviceType } from '../../utils/deviceType.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+let KompasGracePeriod = class KompasGracePeriod extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        /**
+         * property totalGracePeriod = how many days are left in grace period
+         * property isColumn = changes how the component looks on different screen sizes
+         * property isShowButton = shows or hides a subscription button
+         * property subscriptionId = used for renewal subs
+         */
+        this.totalGracePeriod = 0;
+        this.isColumn = false;
+        this.isShowButton = false;
+        this.subscriptionId = '';
+        /**
+         * State
+         */
+        this.maxGracePeriod = 7;
+        this.updateSubscription = 'https://checkoutv2.kompas.id';
+    }
+    getCountdownGracePeriod() {
+        const { totalGracePeriod } = this;
+        const { maxGracePeriod } = this;
+        if (totalGracePeriod === 7) {
+            return html `
+        <p>
+          Anda dalam <b class="text-orange-500"> hari terakhir</b> masa tenggang
+          langganan. Segera perbarui paket langganan untuk tetap mengakses
+          konten premium tanpa batas.
+        </p>
+      `;
+        }
+        return html `
+      <p>
+        Masa tenggang langganan Anda tersisa
+        <b class="text-orange-500"
+          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b
+        >. Segera perbarui paket langganan untuk tetap mengakses konten premium
+        tanpa batas.
+      </p>
+    `;
+    }
+    redirectToBerlangganan() {
+        this.dataLayeronPerbaruiLanggananButton();
+        window.open(`${this.updateSubscription}/kdp?productId=${this.subscriptionId}`);
+    }
+    dataLayeronPerbaruiLanggananButton() {
+        window.dataLayer.push({
+            event: 'gracePeriodClick',
+            interface: deviceType(),
+            dayLeft: this.maxGracePeriod - this.totalGracePeriod,
+            urlName: window.location.href,
+        });
+    }
+    dataLayeronGracePeriod() {
+        window.dataLayer.push({
+            event: 'gracePeriodImpression',
+            interface: deviceType(),
+            dayLeft: this.maxGracePeriod - this.totalGracePeriod,
+            urlName: window.location.href,
+        });
+    }
+    gracePeriodTemplate() {
+        return html `
+      <div
+        class="${this.isColumn
+            ? 'rounded-lg'
+            : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto"
+      >
+        <div class="text-grey-600 text-sm md:text-base self-center text-left">
+          ${this.getCountdownGracePeriod()}
+        </div>
+        ${!this.isShowButton
+            ? html `
+              <div
+                class="flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0"
+              >
+                <button
+                  @click=${this.redirectToBerlangganan}
+                  class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto"
+                >
+                  Perbarui Langganan
+                </button>
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.dataLayeronGracePeriod();
+    }
+    render() {
+        return html `
+      <div class="sticky bottom-0 w-full h-full bg-orange-100">
+        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}
+      </div>
+    `;
+    }
+};
+KompasGracePeriod.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .body {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "totalGracePeriod", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasGracePeriod.prototype, "isColumn", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasGracePeriod.prototype, "isShowButton", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "subscriptionId", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "maxGracePeriod", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "updateSubscription", void 0);
+KompasGracePeriod = __decorate([
+    customElement('kompasid-grace-period')
+], KompasGracePeriod);
+export { KompasGracePeriod };
+//# sourceMappingURL=KompasGracePeriod.js.map

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property subscriptionId = used for renewal subs\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = false\n  @property({ type: String }) subscriptionId = ''\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n          langganan. Segera perbarui paket langganan untuk tetap mengakses\n          konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <b class=\"text-orange-500\"\n          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    window.open(\n      `${this.updateSubscription}/kdp?productId=${this.subscriptionId}`\n    )\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    return html`\n      <div\n        class=\"${this.isColumn\n          ? 'rounded-lg'\n          : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n      >\n        <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${!this.isShowButton\n          ? html`\n              <div\n                class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n              >\n                <button\n                  @click=${this.redirectToBerlangganan}\n                  class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n                >\n                  Perbarui Langganan\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}

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

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

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

@@ -32,6 +32,8 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
                 description: '',
                 lastArticle: { title: '', description: '' },
             },
+            ctaUrl: '',
+            ctaText: '',
         };
         /**
          * Props
@@ -75,6 +77,25 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         this.tracker_metered_wall_balance = 0;
         this.tracker_page_domain = '';
         this.next_param = 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini';
+        /**
+         * mengarahkan ke page checkout promo
+         */
+        this.redirectToCTAUrl = () => {
+            const params = new URLSearchParams(window.location.href);
+            const newUrl = new URL(this.textTemplate.ctaUrl);
+            const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get('referrer');
+            this.pushToDataLayer('mrw_clicked');
+            if (!referrer) {
+                newUrl.searchParams.append('referrer', params.toString());
+                window.location.href = newUrl.toString();
+            }
+            else {
+                const currentReferrerValue = newUrl.searchParams.get('referrer');
+                const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`;
+                newUrl.searchParams.set('referrer', updatedReferrerValue);
+                window.location.href = newUrl.toString();
+            }
+        };
         /**
          * mengarahkan ke page register
          */
@@ -90,15 +111,22 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
      * menentukan template yang akan di render
      */
     setTemplate(prop, mode = 'default') {
-        let template = '';
-        // dynamicMode dibuat agar typescript bisa akses data lastArticle
         const dynamicMode = this.textTemplate[mode];
-        if ('lastArticle' in dynamicMode) {
-            const lastArticleMode = dynamicMode;
-            template = lastArticleMode.lastArticle[prop] || '';
-        }
-        else {
-            template = dynamicMode[prop] || '';
+        let template = '';
+        if (typeof dynamicMode === 'object' && dynamicMode !== null) {
+            // Check if dynamicMode has a lastArticle object and if the prop exists within it
+            if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {
+                const value = dynamicMode.lastArticle[prop];
+                if (typeof value === 'string') {
+                    template = value;
+                }
+            }
+            else if (prop in dynamicMode) {
+                const value = dynamicMode[prop];
+                if (typeof value === 'string') {
+                    template = value;
+                }
+            }
         }
         return template;
     }
@@ -180,11 +208,12 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             ${this.registerButtonTemplate()}
           </div>
         </div>
-        <div class="flex justify-center">
+        <div
+          class="flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto"
+        >
           <img
             alt="metered-wall-register"
             src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
-            class="h-40 w-40 md:w-full md:h-full"
           />
         </div>
         <button
@@ -209,12 +238,21 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
      */
     registerButtonTemplate() {
         return html `
-      <button
-        @click=${this.redirectToRegister}
-        class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
-      >
-        Daftar Akun
-      </button>
+      <div>
+        ${!this.textTemplate.ctaUrl
+            ? html `<button
+              @click=${this.redirectToRegister}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+            >
+              Daftar Akun
+            </button>`
+            : html `<button
+              @click=${this.redirectToCTAUrl}
+              class="bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]"
+            >
+              ${this.textTemplate.ctaText}
+            </button>`}
+      </div>
     `;
     }
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n\n      .btn-regis {\n        margin-left: 16px;\n        width: 127px;\n      }\n\n      .banner-content {\n        gap: 55px;\n      }\n\n      .cont-banner-content {\n        justify-content: space-evenly;\n      }\n\n      .expanded-btn {\n        width: 127px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * state\n   */\n  /**\n   * state registerUrl untuk memberikan link kemana user akan dialihkan.\n   */\n  @state() registerUrl: string =\n    'https://account.kompas.id/register?loc=metered_register_wall'\n  /**\n   * state isShowBanner untuk memunculkan component.\n   */\n  @state() isShowBanner: boolean = true\n  /**\n   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n   */\n  @state() isExpandBanner: boolean = true\n  /**\n   * state textTemplate untuk menyimpan template yang di berikan.\n   */\n  @state() private textTemplate: meteredRegisterContent = {\n    default: { title: '', lastArticle: { title: '' } },\n    expand: {\n      title: '',\n      description: '',\n      lastArticle: { title: '', description: '' },\n    },\n  }\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n   * prop tracker_page_title untuk title of the page\n   * prop tracker_page_type untuk type of the page\n   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n   * prop tracker_content_categories untuk The main category the content belongs to\n   * prop tracker_user_type untuk type of user based on their subscription\n   * prop tracker_subscription_status untuk status of their subscription\n   * prop tracker_metered_wall_type untuk the type of Metered Wall\n   * prop tracker_metered_wall_balance untuk the balance of their metered wall\n   * prop tracker_page_domain untuk Page Domain\n   * prop next_param untuk page Domain\n   */\n\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) defaultExpandBanner = false\n  @property({ type: Boolean }) isDesktop = false\n  @property({ type: String }) tracker_page_title = ''\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_authors = ''\n  @property({ type: String }) tracker_content_editors = ''\n  @property({ type: String }) tracker_content_tags = ''\n  @property({ type: String }) tracker_content_published_date = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) next_param =\n    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n  /**\n   * menentukan template yang akan di render\n   */\n  private setTemplate(\n    prop: string,\n    mode: keyof meteredRegisterContent = 'default'\n  ): string {\n    let template = ''\n\n    // dynamicMode dibuat agar typescript bisa akses data lastArticle\n    const dynamicMode = this.textTemplate[mode]\n\n    if ('lastArticle' in dynamicMode) {\n      const lastArticleMode = dynamicMode as {\n        lastArticle: { [key: string]: string }\n      }\n      template = lastArticleMode.lastArticle[prop] || ''\n    } else {\n      template = dynamicMode[prop] || ''\n    }\n    return template\n  }\n\n  private checkIsDesktop() {\n    if (window.innerWidth >= 960) {\n      this.isDesktop = true\n    } else {\n      this.isDesktop = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  private bannerTemplate() {\n    return this.isExpandBanner\n      ? this.expandedBannerContent()\n      : this.defaultBannerContent()\n  }\n\n  private defaultBannerContent() {\n    return html`\n      <div>\n        <div\n          class=\"${this.isDesktop\n            ? 'cont-banner-content'\n            : 'justify-between'} flex flex-row\"\n        >\n          <div .hidden=\"${!this.isDesktop}\" class=\"w-9 h-9\"></div>\n          <div class=\"banner-content flex flex-row\">\n            <div\n              class=\"text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0\"\n              .innerHTML=${this.setTemplate('title')}\n            ></div>\n            <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n              ${this.isDesktop\n                ? html`<div class=\"ml-4\"></div>\n                    ${this.registerButtonTemplate()}`\n                : null}\n            </div>\n          </div>\n          <div>\n            <button\n              @click=\"${this.triggerExpandBanner}\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div\n                class=\"icon icon-blue-600 ${this.isExpandBanner\n                  ? 'chevron-down'\n                  : 'rotate-180'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        <div class=\"md:self-center mt-4\">\n          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n        </div>\n      </div>\n    `\n  }\n\n  private expandedBannerContent() {\n    return html`\n      <div\n        class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n      >\n        <div\n          class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n        >\n          <p\n            class=\"text-lg md:text-2xl font-lora\"\n            .innerHTML=${this.setTemplate('title', 'expand')}\n          ></p>\n          <p\n            class=\"text-sm md:text-base\"\n            .innerHTML=${this.setTemplate('description', 'expand')}\n          ></p>\n          <div class=\"${this.isDesktop ? 'expanded-btn' : null} md:self-start\">\n            ${this.registerButtonTemplate()}\n          </div>\n        </div>\n        <div class=\"flex justify-center\">\n          <img\n            alt=\"metered-wall-register\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n            class=\"h-40 w-40 md:w-full md:h-full\"\n          />\n        </div>\n        <button\n          @click=\"${this.triggerExpandBanner}\"\n          class=\"h-9 w-9 ${this.isDesktop\n            ? null\n            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n        >\n          <div\n            class=\"icon icon-blue-600 ${this.isExpandBanner\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n          </div>\n        </button>\n      </div>\n    `\n  }\n\n  /**\n   * template button register\n   */\n  private registerButtonTemplate() {\n    return html`\n      <button\n        @click=${this.redirectToRegister}\n        class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n      >\n        Daftar Akun\n      </button>\n    `\n  }\n\n  /**\n   * mengarahkan ke page register\n   */\n  private redirectToRegister = (): void => {\n    this.pushToDataLayer('mrw_clicked')\n    const newUrl = new URL(decodeURIComponent(this.registerUrl))\n    if (this.next_param)\n      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n    window.location.href = newUrl.toString()\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private pushToDataLayer(eventName: string) {\n    window.dataLayer.push({\n      event: eventName,\n      page_title: this.tracker_page_title,\n      page_type: this.tracker_page_type,\n      content_type: this.tracker_content_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_authors: this.tracker_content_authors,\n      content_editors: this.tracker_content_editors,\n      content_tags: this.tracker_content_tags,\n      content_published_date: this.tracker_content_published_date,\n      content_categories: this.tracker_content_categories,\n      user_type: this.tracker_user_type || 'G',\n      subscription_status: this.tracker_subscription_status || '',\n      metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  /**\n   * toggle isExpandBanner flag\n   */\n  private triggerExpandBanner() {\n    this.isExpandBanner = !this.isExpandBanner\n    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    this.loadData()\n    this.checkIsDesktop()\n  }\n\n  private async loadData() {\n    const req = await fetch(\n      `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n    )\n\n    if (req.status !== 200) {\n      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n    }\n\n    this.textTemplate = await req.json()\n\n    const getCountdown = this.countdownArticle\n\n    if (!getCountdown) {\n      this.isShowBanner = false\n    } else {\n      this.isExpandBanner = this.defaultExpandBanner\n    }\n\n    if (this.isShowBanner) {\n      this.pushToDataLayer('mrw_viewed')\n    }\n  }\n\n  render() {\n    return this.isShowBanner\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20\">\n            <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n              <div class=\"lg:max-w-7xl m-auto relative\">\n                <div>${this.bannerTemplate()}</div>\n              </div>\n            </div>\n          </div>\n        `\n      : null\n  }\n}\n"]}
+{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n\n      .btn-regis {\n        margin-left: 16px;\n        width: 127px;\n      }\n\n      .banner-content {\n        gap: 55px;\n      }\n\n      .cont-banner-content {\n        justify-content: space-evenly;\n      }\n\n      .expanded-btn {\n        width: 127px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * state\n   */\n  /**\n   * state registerUrl untuk memberikan link kemana user akan dialihkan.\n   */\n  @state() registerUrl: string =\n    'https://account.kompas.id/register?loc=metered_register_wall'\n  /**\n   * state isShowBanner untuk memunculkan component.\n   */\n  @state() isShowBanner: boolean = true\n  /**\n   * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n   */\n  @state() isExpandBanner: boolean = true\n  /**\n   * state textTemplate untuk menyimpan template yang di berikan.\n   */\n  @state() private textTemplate: meteredRegisterContent = {\n    default: { title: '', lastArticle: { title: '' } },\n    expand: {\n      title: '',\n      description: '',\n      lastArticle: { title: '', description: '' },\n    },\n    ctaUrl: '',\n    ctaText: '',\n  }\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n   * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n   * prop tracker_page_title untuk title of the page\n   * prop tracker_page_type untuk type of the page\n   * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n   * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n   * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n   * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n   * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n   * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n   * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n   * prop tracker_content_categories untuk The main category the content belongs to\n   * prop tracker_user_type untuk type of user based on their subscription\n   * prop tracker_subscription_status untuk status of their subscription\n   * prop tracker_metered_wall_type untuk the type of Metered Wall\n   * prop tracker_metered_wall_balance untuk the balance of their metered wall\n   * prop tracker_page_domain untuk Page Domain\n   * prop next_param untuk page Domain\n   */\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: Boolean }) defaultExpandBanner = false\n  @property({ type: Boolean }) isDesktop = false\n  @property({ type: String }) tracker_page_title = ''\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_authors = ''\n  @property({ type: String }) tracker_content_editors = ''\n  @property({ type: String }) tracker_content_tags = ''\n  @property({ type: String }) tracker_content_published_date = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) next_param =\n    'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n  /**\n   * menentukan template yang akan di render\n   */\n  private setTemplate(\n    prop: string,\n    mode: keyof meteredRegisterContent = 'default'\n  ): string {\n    interface LastArticle {\n      [key: string]: string\n    }\n    interface DynamicMode {\n      lastArticle?: LastArticle\n      [key: string]: string | LastArticle | undefined\n    }\n    const dynamicMode = this.textTemplate[mode] as DynamicMode | string\n\n    let template: string = ''\n\n    if (typeof dynamicMode === 'object' && dynamicMode !== null) {\n      // Check if dynamicMode has a lastArticle object and if the prop exists within it\n      if (dynamicMode.lastArticle && prop in dynamicMode.lastArticle) {\n        const value = dynamicMode.lastArticle[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      } else if (prop in dynamicMode) {\n        const value = dynamicMode[prop]\n        if (typeof value === 'string') {\n          template = value\n        }\n      }\n    }\n\n    return template\n  }\n\n  private checkIsDesktop() {\n    if (window.innerWidth >= 960) {\n      this.isDesktop = true\n    } else {\n      this.isDesktop = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  private bannerTemplate() {\n    return this.isExpandBanner\n      ? this.expandedBannerContent()\n      : this.defaultBannerContent()\n  }\n\n  private defaultBannerContent() {\n    return html`\n      <div>\n        <div\n          class=\"${this.isDesktop\n            ? 'cont-banner-content'\n            : 'justify-between'} flex flex-row\"\n        >\n          <div .hidden=\"${!this.isDesktop}\" class=\"w-9 h-9\"></div>\n          <div class=\"banner-content flex flex-row\">\n            <div\n              class=\"text-base md:text-lg font-lora mb-3 mt-1 pt-[5px] md:mb-0 md:mt-0 pr-14 md:px-0\"\n              .innerHTML=${this.setTemplate('title')}\n            ></div>\n            <div .hidden=\"${!this.isDesktop}\" class=\"md:self-center btn-regis\">\n              ${this.isDesktop\n                ? html`<div class=\"ml-4\"></div>\n                    ${this.registerButtonTemplate()}`\n                : null}\n            </div>\n          </div>\n          <div>\n            <button\n              @click=\"${this.triggerExpandBanner}\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div\n                class=\"icon icon-blue-600 ${this.isExpandBanner\n                  ? 'chevron-down'\n                  : 'rotate-180'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        <div class=\"md:self-center mt-4\">\n          ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : null}\n        </div>\n      </div>\n    `\n  }\n\n  private expandedBannerContent() {\n    return html`\n      <div\n        class=\"flex flex-col-reverse justify-evenly md:flex-row gap-4 md:gap-8\"\n      >\n        <div\n          class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n        >\n          <p\n            class=\"text-lg md:text-2xl font-lora\"\n            .innerHTML=${this.setTemplate('title', 'expand')}\n          ></p>\n          <p\n            class=\"text-sm md:text-base\"\n            .innerHTML=${this.setTemplate('description', 'expand')}\n          ></p>\n          <div class=\"${this.isDesktop ? 'expanded-btn' : null} md:self-start\">\n            ${this.registerButtonTemplate()}\n          </div>\n        </div>\n        <div\n          class=\"flex justify-center md:max-w-[200px] md:max-h-[220px] md:my-auto\"\n        >\n          <img\n            alt=\"metered-wall-register\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n          />\n        </div>\n        <button\n          @click=\"${this.triggerExpandBanner}\"\n          class=\"h-9 w-9 ${this.isDesktop\n            ? null\n            : 'ml-auto'} flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n        >\n          <div\n            class=\"icon icon-blue-600 ${this.isExpandBanner\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n          </div>\n        </button>\n      </div>\n    `\n  }\n\n  /**\n   * template button register\n   */\n  private registerButtonTemplate() {\n    return html`\n      <div>\n        ${!this.textTemplate.ctaUrl\n          ? html`<button\n              @click=${this.redirectToRegister}\n              class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 text-sm md:text-base\"\n            >\n              Daftar Akun\n            </button>`\n          : html`<button\n              @click=${this.redirectToCTAUrl}\n              class=\"bg-green-500 p-1.5 w-full rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-[165px]\"\n            >\n              ${this.textTemplate.ctaText}\n            </button>`}\n      </div>\n    `\n  }\n\n  /**\n   * mengarahkan ke page checkout promo\n   */\n  private redirectToCTAUrl = (): void => {\n    const params = new URLSearchParams(window.location.href)\n    const newUrl = new URL(this.textTemplate.ctaUrl)\n    const referrer = new URLSearchParams(this.textTemplate.ctaUrl).get(\n      'referrer'\n    )\n    this.pushToDataLayer('mrw_clicked')\n    if (!referrer) {\n      newUrl.searchParams.append('referrer', params.toString())\n      window.location.href = newUrl.toString()\n    } else {\n      const currentReferrerValue = newUrl.searchParams.get('referrer')\n      const updatedReferrerValue = `${params.toString()},${currentReferrerValue}`\n      newUrl.searchParams.set('referrer', updatedReferrerValue)\n      window.location.href = newUrl.toString()\n    }\n  }\n\n  /**\n   * mengarahkan ke page register\n   */\n  private redirectToRegister = (): void => {\n    this.pushToDataLayer('mrw_clicked')\n    const newUrl = new URL(decodeURIComponent(this.registerUrl))\n    if (this.next_param)\n      newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n    window.location.href = newUrl.toString()\n  }\n\n  /**\n   * mengirim event ke datalayer\n   */\n  private pushToDataLayer(eventName: string) {\n    window.dataLayer.push({\n      event: eventName,\n      page_title: this.tracker_page_title,\n      page_type: this.tracker_page_type,\n      content_type: this.tracker_content_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_authors: this.tracker_content_authors,\n      content_editors: this.tracker_content_editors,\n      content_tags: this.tracker_content_tags,\n      content_published_date: this.tracker_content_published_date,\n      content_categories: this.tracker_content_categories,\n      user_type: this.tracker_user_type || 'G',\n      subscription_status: this.tracker_subscription_status || '',\n      metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n    })\n  }\n\n  /**\n   * toggle isExpandBanner flag\n   */\n  private triggerExpandBanner() {\n    this.isExpandBanner = !this.isExpandBanner\n    return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    this.loadData()\n    this.checkIsDesktop()\n  }\n\n  private async loadData() {\n    const req = await fetch(\n      `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n    )\n\n    if (req.status !== 200) {\n      throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n    }\n\n    this.textTemplate = await req.json()\n\n    const getCountdown = this.countdownArticle\n\n    if (!getCountdown) {\n      this.isShowBanner = false\n    } else {\n      this.isExpandBanner = this.defaultExpandBanner\n    }\n\n    if (this.isShowBanner) {\n      this.pushToDataLayer('mrw_viewed')\n    }\n  }\n\n  render() {\n    return this.isShowBanner\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20\">\n            <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n              <div class=\"lg:max-w-7xl m-auto relative\">\n                <div>${this.bannerTemplate()}</div>\n              </div>\n            </div>\n          </div>\n        `\n      : null\n  }\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface meteredRegisterContent {\n  expand: {\n    lastArticle: {\n      title: string\n      description: string\n    }\n    title: string\n    description: string\n  }\n  default: {\n    lastArticle: {\n      title: string\n    }\n    title: string\n  }\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface meteredRegisterContent {\n  expand: {\n    lastArticle: {\n      title: string\n      description: string\n    }\n    title: string\n    description: string\n  }\n  default: {\n    lastArticle: {\n      title: string\n    }\n    title: string\n  }\n  ctaUrl: string\n  ctaText: string\n}\n"]}

package/dist/src/index.d.ts

@@ -7,6 +7,7 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js';
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js';
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js';
 declare global {
     interface Window {
         gtag: (...args: any[]) => void;

package/dist/src/index.js

@@ -7,4 +7,5 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js';
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js';
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js';
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,0FAA0F,CAAA;AAC5I,OAAO,EAAE,8BAA8B,EAAE,MAAM,oFAAoF,CAAA;AACnI,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAA","sourcesContent":["export { KompasWidgetRecirculationsDefault } from './components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'\nexport { KompasWidgetRecirculationsList } from './components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'\nexport { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\nexport { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'\nexport { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'\n\ndeclare global {\n  interface Window {\n    gtag: (...args: any[]) => void\n    dataLayer: Record<string, any>\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,0FAA0F,CAAA;AAC5I,OAAO,EAAE,8BAA8B,EAAE,MAAM,oFAAoF,CAAA;AACnI,OAAO,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+DAA+D,CAAA;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAA;AACjG,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAA","sourcesContent":["export { KompasWidgetRecirculationsDefault } from './components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'\nexport { KompasWidgetRecirculationsList } from './components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'\nexport { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'\nexport { KompasFooter } from './components/kompasid-footer/KompasFooter.js'\nexport { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'\nexport { KompasMeteredPaywall } from './components/kompasid-metered-paywall/KompasMeteredPaywall.js'\nexport { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'\nexport { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'\nexport { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'\nexport { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'\n\ndeclare global {\n  interface Window {\n    gtag: (...args: any[]) => void\n    dataLayer: Record<string, any>\n  }\n}\n"]}

package/dist/tailwind/tailwind.js

@@ -834,10 +834,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 1rem;
   }
 
-  .h-40 {
-    height: 10rem;
-  }
-
   .h-5 {
     height: 1.25rem;
   }
@@ -1475,6 +1471,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1rem;
   }
 
+  .px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -1919,6 +1920,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: 2rem;
     }
 
+    .md\\:my-auto {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
     .md\\:mb-0 {
       margin-bottom: 0px;
     }
@@ -1979,15 +1985,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       height: 68px;
     }
 
-    .md\\:h-full {
-      height: 100%;
-    }
-
     .md\\:h-max {
       height: -moz-max-content;
       height: max-content;
     }
 
+    .md\\:max-h-\\[220px\\] {
+      max-height: 220px;
+    }
+
     .md\\:min-h-\\[244px\\] {
       min-height: 244px;
     }
@@ -2012,6 +2018,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 13rem;
     }
 
+    .md\\:w-\\[165px\\] {
+      width: 165px;
+    }
+
     .md\\:w-\\[350px\\] {
       width: 350px;
     }
@@ -2036,10 +2046,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 100%;
     }
 
+    .md\\:w-auto {
+      width: auto;
+    }
+
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
 
+    .md\\:max-w-\\[200px\\] {
+      max-width: 200px;
+    }
+
     .md\\:max-w-full {
       max-width: 100%;
     }
@@ -2096,6 +2114,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .md\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-x-reverse: 0;
+      margin-right: calc(1rem * var(--tw-space-x-reverse));
+      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2196,6 +2220,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1.75rem;
     }
 
+    .md\\:pt-0 {
+      padding-top: 0px;
+    }
+
     .md\\:pt-3 {
       padding-top: 0.75rem;
     }
@@ -2359,6 +2387,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 0px;
     }
 
+    .lg\\:px-20 {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
+
     .lg\\:px-24 {
       padding-left: 6rem;
       padding-right: 6rem;
@@ -2369,6 +2402,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 2.5rem;
     }
 
+    .lg\\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .lg\\:pb-0 {
       padding-bottom: 0px;
     }