@kompasid/lit-web-components 0.6.4 → 0.6.6

package/demo/index.html

@@ -53,7 +53,7 @@
       import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
       import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
 
-      const type = 'epaper'
+      const type = 'reguler'
       const theme = ''
       const paywallLocation = 'paywall_location'
       const paywallSubscriptionId = 'testId'
@@ -78,7 +78,7 @@
       const textHeader = 'this is message for header information'
       const userGuid = '111000'
       const trackerSubscriptionStatus = 'register'
-      const swgEnable = true
+      const swgEnable = false
       const videoPaywallType = 'homepage'
       const freewallType = 'landing_page'
       const headCopyExpand = ''

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js

@@ -37,7 +37,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
          */
         const subscribeButton = () => {
             var _a, _b;
-            if (((_a = this.userData) === null || _a === void 0 ? void 0 : _a.updateMembership) !== null) {
+            if (!((_a = this.userData) === null || _a === void 0 ? void 0 : _a.updateMembership)) {
                 return html ``;
             }
             const handleSubscribe = () => {
@@ -46,7 +46,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
             return html `
         <div class="w-full">
           <button
-            onClick=${handleSubscribe()}
+            onClick=${handleSubscribe}
             class="w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none"
           >
             ${(_b = this.userData) === null || _b === void 0 ? void 0 : _b.updateMembership}

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n  static styles = [\n    css`\n      .header-account--membership-icon {\n        position: absolute;\n        bottom: -2px;\n        right: -2px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  @property({ type: String }) userInitialName = ''\n  @property({ type: Object }) userData = {}\n  @property({ type: String }) subscriptionUrl = ''\n  @property({ type: Number }) totalGracePeriod = 0\n\n  private renderSkeletonLoading() {\n    return html`\n      <div>\n        <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n          <div\n            class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n          ></div>\n          <div class=\"flex flex-col text-left w-40 gap-y-2\">\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderProfileContent() {\n    /**\n     * Expired Button Element\n     */\n    const subscribeButton = () => {\n      if ((this.userData as any)?.updateMembership !== null) {\n        return html``\n      }\n      const handleSubscribe = () => {\n        window.location.href = this.subscriptionUrl\n      }\n\n      return html`\n        <div class=\"w-full\">\n          <button\n            onClick=${handleSubscribe()}\n            class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n          >\n            ${(this.userData as any)?.updateMembership}\n          </button>\n        </div>\n      `\n    }\n    /**\n     * expired Info Element\n     */\n    const expiredInfo = () => {\n      const isNearExpired = (this.userData as any)?.isNearExpired\n      const expiredTextColor = isNearExpired\n        ? `text-orange-400`\n        : `text-grey-600`\n\n      return html`<p class=\"${expiredTextColor} font-bold\">\n        ${(this.userData as any)?.expired}\n      </p>`\n    }\n\n    /**\n     * membership icon element, show if isMebership has truthy value\n     */\n    const membershipIcon = () => {\n      if (!(this.userData as any)?.isMembership) {\n        return html``\n      }\n\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-blue-10.svg\"\n            alt=\"membership-crown-icon\"\n          />\n        </div>\n      `\n    }\n\n    /**\n     * Active Info Element\n     */\n\n    const activeInfo = () => {\n      const isNearExpired = (this.userData as any)?.isNearExpired\n      const expiredTextColor = isNearExpired\n        ? `text-orange-400`\n        : `text-grey-600`\n\n      return html`<p class=\"capitalize text-sm ${expiredTextColor}\">\n        ${(this.userData as any)?.activeInfo}\n      </p>`\n    }\n\n    return html`<div\n      class=\"active-info flex flex-col items-start leading-none text-left\"\n    >\n      <div class=\"flex flex-row items-center gap-4\">\n        <div\n          class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n        >\n          <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n            >${this.userInitialName}</span\n          >\n          ${membershipIcon()}\n        </div>\n\n        <div class=\"flex flex-col text-left\">\n          <p class=\"capitalize font-bold text-base text-blue-600\">\n            ${truncate((this.userData as any)?.userName, 25)}\n          </p>\n          ${activeInfo()} ${expiredInfo()}\n        </div>\n      </div>\n\n      <div class=\"mt-4\">\n        <!-- <kompas-grace-period\n          totalGracePeriod=\"{this.totalGracePeriod}\"\n          isColoumn=\"{true}\"\n          isShowButton=\"{true}\"\n        /> -->\n      </div>\n\n      ${subscribeButton()}\n    </div>`\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n        ${!this.userData\n          ? this.renderSkeletonLoading()\n          : this.renderProfileContent()}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAGvC,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QAYuB,oBAAe,GAAG,EAAE,CAAA;QACpB,aAAQ,GAAG,EAAE,CAAA;QACb,oBAAe,GAAG,EAAE,CAAA;QACpB,qBAAgB,GAAG,CAAC,CAAA;IA2IlD,CAAC;IAzIS,qBAAqB;QAC3B,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBV,CAAA;IACH,CAAC;IAEO,oBAAoB;;QAC1B;;WAEG;QACH,MAAM,eAAe,GAAG,GAAG,EAAE;;YAC3B,IAAI,CAAC,CAAA,MAAC,IAAI,CAAC,QAAgB,0CAAE,gBAAgB,CAAA,EAAE;gBAC7C,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YACD,MAAM,eAAe,GAAG,GAAG,EAAE;gBAC3B,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,CAAA;YAC7C,CAAC,CAAA;YAED,OAAO,IAAI,CAAA;;;sBAGK,eAAe;;;cAGvB,MAAC,IAAI,CAAC,QAAgB,0CAAE,gBAAgB;;;OAG/C,CAAA;QACH,CAAC,CAAA;QACD;;WAEG;QACH,MAAM,WAAW,GAAG,GAAG,EAAE;;YACvB,MAAM,aAAa,GAAG,MAAC,IAAI,CAAC,QAAgB,0CAAE,aAAa,CAAA;YAC3D,MAAM,gBAAgB,GAAG,aAAa;gBACpC,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,eAAe,CAAA;YAEnB,OAAO,IAAI,CAAA,aAAa,gBAAgB;UACpC,MAAC,IAAI,CAAC,QAAgB,0CAAE,OAAO;WAC9B,CAAA;QACP,CAAC,CAAA;QAED;;WAEG;QACH,MAAM,cAAc,GAAG,GAAG,EAAE;;YAC1B,IAAI,CAAC,CAAA,MAAC,IAAI,CAAC,QAAgB,0CAAE,YAAY,CAAA,EAAE;gBACzC,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YAED,OAAO,IAAI,CAAA;;;;;;;;OAQV,CAAA;QACH,CAAC,CAAA;QAED;;WAEG;QAEH,MAAM,UAAU,GAAG,GAAG,EAAE;;YACtB,MAAM,aAAa,GAAG,MAAC,IAAI,CAAC,QAAgB,0CAAE,aAAa,CAAA;YAC3D,MAAM,gBAAgB,GAAG,aAAa;gBACpC,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,eAAe,CAAA;YAEnB,OAAO,IAAI,CAAA,gCAAgC,gBAAgB;UACvD,MAAC,IAAI,CAAC,QAAgB,0CAAE,UAAU;WACjC,CAAA;QACP,CAAC,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI,CAAC,eAAe;;YAEvB,cAAc,EAAE;;;;;cAKd,QAAQ,CAAC,MAAC,IAAI,CAAC,QAAgB,0CAAE,QAAQ,EAAE,EAAE,CAAC;;YAEhD,UAAU,EAAE,IAAI,WAAW,EAAE;;;;;;;;;;;;QAYjC,eAAe,EAAE;WACd,CAAA;IACT,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,QAAQ;YACd,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC9B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;;KAElC,CAAA;IACH,CAAC;;AAxJM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;KAMF;IACD,QAAQ;CACT,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAqB;AAfrC,0BAA0B;IADtC,aAAa,CAAC,iCAAiC,CAAC;GACpC,0BAA0B,CA0JtC;SA1JY,0BAA0B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n  static styles = [\n    css`\n      .header-account--membership-icon {\n        position: absolute;\n        bottom: -2px;\n        right: -2px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  @property({ type: String }) userInitialName = ''\n  @property({ type: Object }) userData = {}\n  @property({ type: String }) subscriptionUrl = ''\n  @property({ type: Number }) totalGracePeriod = 0\n\n  private renderSkeletonLoading() {\n    return html`\n      <div>\n        <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n          <div\n            class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n          ></div>\n          <div class=\"flex flex-col text-left w-40 gap-y-2\">\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderProfileContent() {\n    /**\n     * Expired Button Element\n     */\n    const subscribeButton = () => {\n      if (!(this.userData as any)?.updateMembership) {\n        return html``\n      }\n      const handleSubscribe = () => {\n        window.location.href = this.subscriptionUrl\n      }\n\n      return html`\n        <div class=\"w-full\">\n          <button\n            onClick=${handleSubscribe}\n            class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n          >\n            ${(this.userData as any)?.updateMembership}\n          </button>\n        </div>\n      `\n    }\n    /**\n     * expired Info Element\n     */\n    const expiredInfo = () => {\n      const isNearExpired = (this.userData as any)?.isNearExpired\n      const expiredTextColor = isNearExpired\n        ? `text-orange-400`\n        : `text-grey-600`\n\n      return html`<p class=\"${expiredTextColor} font-bold\">\n        ${(this.userData as any)?.expired}\n      </p>`\n    }\n\n    /**\n     * membership icon element, show if isMebership has truthy value\n     */\n    const membershipIcon = () => {\n      if (!(this.userData as any)?.isMembership) {\n        return html``\n      }\n\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-blue-10.svg\"\n            alt=\"membership-crown-icon\"\n          />\n        </div>\n      `\n    }\n\n    /**\n     * Active Info Element\n     */\n\n    const activeInfo = () => {\n      const isNearExpired = (this.userData as any)?.isNearExpired\n      const expiredTextColor = isNearExpired\n        ? `text-orange-400`\n        : `text-grey-600`\n\n      return html`<p class=\"capitalize text-sm ${expiredTextColor}\">\n        ${(this.userData as any)?.activeInfo}\n      </p>`\n    }\n\n    return html`<div\n      class=\"active-info flex flex-col items-start leading-none text-left\"\n    >\n      <div class=\"flex flex-row items-center gap-4\">\n        <div\n          class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n        >\n          <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n            >${this.userInitialName}</span\n          >\n          ${membershipIcon()}\n        </div>\n\n        <div class=\"flex flex-col text-left\">\n          <p class=\"capitalize font-bold text-base text-blue-600\">\n            ${truncate((this.userData as any)?.userName, 25)}\n          </p>\n          ${activeInfo()} ${expiredInfo()}\n        </div>\n      </div>\n\n      <div class=\"mt-4\">\n        <!-- <kompas-grace-period\n          totalGracePeriod=\"{this.totalGracePeriod}\"\n          isColoumn=\"{true}\"\n          isShowButton=\"{true}\"\n        /> -->\n      </div>\n\n      ${subscribeButton()}\n    </div>`\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n        ${!this.userData\n          ? this.renderSkeletonLoading()\n          : this.renderProfileContent()}\n      </div>\n    `\n  }\n}\n"]}

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

@@ -123,12 +123,13 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
       <div>
         <div
           class="${this.isDesktop
-            ? 'cont-banner-content justify-center'
-            : null} flex flex-row justify-between"
+            ? 'cont-banner-content'
+            : 'justify-between'} flex flex-row"
         >
+          <div .hidden="${!this.isDesktop}" class="w-9 h-9"></div>
           <div class="banner-content flex flex-row">
             <div
-              class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"
+              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"
               .innerHTML=${this.setTemplate('title')}
             ></div>
             <div .hidden="${!this.isDesktop}" class="md:self-center btn-regis">
@@ -175,7 +176,7 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
             class="text-sm md:text-base"
             .innerHTML=${this.setTemplate('description', 'expand')}
           ></p>
-          <div class="${this.isDesktop ? null : 'expanded-btn'} md:self-start">
+          <div class="${this.isDesktop ? 'expanded-btn' : null} md:self-start">
             ${this.registerButtonTemplate()}
           </div>
         </div>
@@ -209,8 +210,8 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
     registerButtonTemplate() {
         return html `
       <button
-        onClick=${this.redirectToRegister}
-        class="bg-green-500 px-5 py-3 w-full rounded-md font-bold text-grey-100 text-sm md:text-base"
+        @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>
@@ -306,11 +307,10 @@ KompasMeteredWallRegister.styles = [
 
       .banner-content {
         gap: 55px;
-        justify-content: space-between;
       }
 
       .cont-banner-content {
-        gap: 201px;
+        justify-content: space-evenly;
       }
 
       .expanded-btn {

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

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

@@ -87,6 +87,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
             packages: {
                 title: 'Sekali bayar, tanpa perpanjang otomatis',
                 memberships: [],
+                freeTrial: 'untuk 3 hari pertama',
             },
             payment: {
                 desktop: [
@@ -235,6 +236,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
                 packages: {
                     ...this.mockResult.packages,
                     memberships: json[this.type].memberships,
+                    freeTrial: json[this.type].freeTrial,
                 },
             };
         }

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

@@ -1 +1 @@
-{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,+CAA+C,CAAA;AACtD,OAAO,4EAA4E,CAAA;AACnF,OAAO,0EAA0E,CAAA;AAG1E,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgCL;;WAEG;QACH;;;;;;;;;;;;;;;;;;;;;;;;;;;WA2BG;QAEc,gBAAW,GAAmB,EAAoB,CAAA;QAClD,WAAM,GAAY,IAAI,CAAA;QACtB,cAAS,GAAY,IAAI,CAAA;QAEb,YAAO,GAAG,KAAK,CAAA;QAChB,qBAAgB,GAAG,CAAC,CAAA;QACpB,SAAI,GAAgB,SAAS,CAAA;QAC5B,iBAAY,GAAG,KAAK,CAAA;QACrB,eAAU,GAAG,EAAE,CAAA;QACf,aAAQ,GAAG,EAAE,CAAA;QACb,uBAAkB,GAAG,EAAE,CAAA;QACtB,cAAS,GAAG,KAAK,CAAA;QAClB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,CAAC,CAAA;QAC3B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,2BAAsB,GAAG,EAAE,CAAA;QAC3B,UAAK,GAAG,EAAE,CAAA;QAEtC,eAAU,GAAmB;YAC3B,YAAY,EAAE;gBACZ,KAAK,EAAE,EAAE;gBACT,WAAW,EAAE,EAAE;gBACf,QAAQ,EAAE;oBACR,GAAG,EAAE,yEAAyE;oBAC9E,KAAK,EAAE,wCAAwC;oBAC/C,QAAQ,EAAE,4DAA4D;oBACtE,KAAK,EAAE,kBAAkB;iBAC1B;gBACD,QAAQ,EAAE;oBACR,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,WAAW;oBAClB,eAAe,EAAE,kDAAkD;oBACnE,GAAG,EAAE,gCAAgC;iBACtC;aACF;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,yCAAyC;gBAChD,WAAW,EAAE,EAAE;aAChB;YACD,OAAO,EAAE;gBACP,OAAO,EAAE;oBACP;wBACE,IAAI,EAAE,OAAO;wBACb,IAAI,EAAE,4DAA4D,IAAI,CAAC,OAAO,MAAM;qBACrF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,iEAAiE,IAAI,CAAC,OAAO,MAAM;qBAC1F;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,mEAAmE,IAAI,CAAC,OAAO,MAAM;qBAC5F;oBACD;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,gEAAgE,IAAI,CAAC,OAAO,MAAM;qBACzF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;iBACF;gBACD,MAAM,EAAE;oBACN;wBACE,IAAI,EAAE,OAAO;wBACb,IAAI,EAAE,4DAA4D,IAAI,CAAC,OAAO,MAAM;qBACrF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,iEAAiE,IAAI,CAAC,OAAO,MAAM;qBAC1F;iBACF;gBACD,UAAU,EAAE;oBACV;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,mEAAmE,IAAI,CAAC,OAAO,MAAM;qBAC5F;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,gEAAgE,IAAI,CAAC,OAAO,MAAM;qBACzF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;iBACF;aACF;SACF,CAAA;QAmQO,wBAAmB,GAAG,CAAC,IAAiB,EAAE,EAAE;YAClD,QAAQ,IAAI,EAAE;gBACZ,KAAK,QAAQ;oBACX,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAA;gBAC1C,KAAK,OAAO;oBACV,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAA;gBACzC,KAAK,SAAS;oBACZ,OAAO,IAAI,CAAC,2BAA2B,EAAE,CAAA;gBAC3C;oBACE,OAAO,IAAI,CAAC,2BAA2B,EAAE,CAAA;aAC5C;QACH,CAAC,CAAA;IAeH,CAAC;IA3RC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7C,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAC1B,4FAA4F,CAC7F,CAAA;YACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;YAClC,IAAI,CAAC,WAAW,GAAG;gBACjB,GAAG,IAAI,CAAC,UAAU;gBAClB,YAAY,EAAE;oBACZ,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY;oBAC/B,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI;oBAC3B,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO;iBACrC;gBACD,QAAQ,EAAE;oBACR,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ;oBAC3B,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW;iBACzC;aACF,CAAA;SACF;QAAC,OAAO,KAAK,EAAE;YACd,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAA;SAC1C;gBAAS;YACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;SACvB;IACH,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,KAAK,KAAK,MAAM;YACjC,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,oBAAoB;;KAE3B,CAAA;IACH,CAAC;IAEO,0BAA0B;QAChC,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,gBAAgB;qCACT,IAAI,CAAC,4BAA4B;gCACtC,IAAI,CAAC,uBAAuB;mCACzB,IAAI,CAAC,0BAA0B;yBACzC,IAAI,CAAC,gBAAgB;0BACpB,IAAI,CAAC,iBAAiB;2BACrB,IAAI,CAAC,kBAAkB;8BACpB,IAAI,CAAC,qBAAqB;mCACrB,IAAI,CAAC,0BAA0B;0BACxC,IAAI,CAAC,iBAAiB;oCACZ,IAAI,CAAC,2BAA2B;4BACxC,IAAI,CAAC,mBAAmB;kCAClB,IAAI,CAAC,yBAAyB;+BACjC,IAAI,CAAC,sBAAsB;qCACrB,IAAI,CAAC,4BAA4B;mBACnD,IAAI,CAAC,SAAS;6BACJ,IAAI,CAAC,oBAAoB;iBACrC,IAAI,CAAC,OAAO;aAChB,IAAI,CAAC,IAAI;yBACG,IAAI,CAAC,gBAAgB;qBACzB,IAAI,CAAC,WAAW;2BACV,IAAI,CAAC,kBAAkB;iBACjC,IAAI,CAAC,QAAQ;cAChB,IAAI,CAAC,KAAK;8BACM,CAAA;IAC5B,CAAC;IAEO,2BAA2B;QACjC,MAAM,iBAAiB,GACrB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAA;QACxD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,IAAI,CAAA;;YAEL,IAAI,CAAC,aAAa,EAAE;;mCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;gBAC1C,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,UAAU;;;;uBAIH,IAAI,CAAC,UAAU,IAAI,iBAAiB;wBACnC,IAAI,CAAC,KAAK;;;mCAGC,IAAI,CAAC,gBAAgB;+CACT,IAAI;iBAChC,4BAA4B;0CACL,IAAI,CAAC,uBAAuB;6CACzB,IAAI,CAAC,0BAA0B;mCACzC,IAAI,CAAC,gBAAgB;oCACpB,IAAI,CAAC,iBAAiB;qCACrB,IAAI,CAAC,kBAAkB;wCACpB,IAAI,CAAC,qBAAqB;6CACrB,IAAI,CAAC,0BAA0B;oCACxC,IAAI,CAAC,iBAAiB;8CACZ,IAAI,CAAC,2BAA2B;sCACxC,IAAI,CAAC,mBAAmB;4CAClB,IAAI,CAAC,yBAAyB;yCACjC,IAAI,CAAC,sBAAsB;+CACrB,IAAI;iBAChC,4BAA4B;uCACR,IAAI,CAAC,oBAAoB;6BACnC,IAAI,CAAC,SAAS;2BAChB,IAAI,CAAC,OAAO;uBAChB,IAAI,CAAC,IAAI;mCACG,IAAI,CAAC,gBAAgB;+BACzB,IAAI,CAAC,WAAW;qCACV,IAAI,CAAC,kBAAkB;2BACjC,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,KAAK;;;;;OAK3B,CAAA;SACF;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,EAAE;;iCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,UAAU;;;;qCAIa,IAAI,CAAC,oBAAoB;iCAC7B,IAAI,CAAC,gBAAgB;6CACT,IAAI,CAAC,4BAA4B;wCACtC,IAAI,CAAC,uBAAuB;2CACzB,IAAI,CAAC,0BAA0B;iCACzC,IAAI,CAAC,gBAAgB;kCACpB,IAAI,CAAC,iBAAiB;mCACrB,IAAI,CAAC,kBAAkB;sCACpB,IAAI,CAAC,qBAAqB;2CACrB,IAAI,CAAC,0BAA0B;kCACxC,IAAI,CAAC,iBAAiB;4CACZ,IAAI,CAAC,2BAA2B;uCACrC,IAAI,CAAC,sBAAsB;oCAC9B,IAAI,CAAC,mBAAmB;0CAClB,IAAI,CAAC,yBAAyB;6CAC3B,IAAI,CAAC,4BAA4B;2BACnD,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,OAAO;qBAChB,IAAI,CAAC,IAAI;iCACG,IAAI,CAAC,gBAAgB;6BACzB,IAAI,CAAC,WAAW;mCACV,IAAI,CAAC,kBAAkB;yBACjC,IAAI,CAAC,QAAQ;sBAChB,IAAI,CAAC,KAAK;;;;;KAK3B,CAAA;IACH,CAAC;IAEO,yBAAyB;QAC/B,MAAM,iBAAiB,GACrB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAA;QACxD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,IAAI,CAAA;;YAEL,IAAI,CAAC,aAAa,EAAE;;mCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;gBAC1C,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,UAAU;;;;uBAIH,IAAI,CAAC,UAAU,IAAI,iBAAiB;wBACnC,IAAI,CAAC,KAAK;;;mCAGC,IAAI,CAAC,gBAAgB;+CACT,IAAI;iBAChC,4BAA4B;0CACL,IAAI,CAAC,uBAAuB;6CACzB,IAAI,CAAC,0BAA0B;mCACzC,IAAI,CAAC,gBAAgB;oCACpB,IAAI,CAAC,iBAAiB;qCACrB,IAAI,CAAC,kBAAkB;wCACpB,IAAI,CAAC,qBAAqB;6CACrB,IAAI,CAAC,0BAA0B;oCACxC,IAAI,CAAC,iBAAiB;8CACZ,IAAI,CAAC,2BAA2B;sCACxC,IAAI,CAAC,mBAAmB;4CAClB,IAAI,CAAC,yBAAyB;yCACjC,IAAI,CAAC,sBAAsB;+CACrB,IAAI;iBAChC,4BAA4B;uCACR,IAAI,CAAC,oBAAoB;6BACnC,IAAI,CAAC,SAAS;2BAChB,IAAI,CAAC,OAAO;uBAChB,IAAI,CAAC,IAAI;mCACG,IAAI,CAAC,gBAAgB;+BACzB,IAAI,CAAC,WAAW;qCACV,IAAI,CAAC,kBAAkB;2BACjC,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,KAAK;iCACD,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;;OAKpD,CAAA;SACF;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,EAAE;;iCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,UAAU;;;;qCAIa,IAAI,CAAC,oBAAoB;iCAC7B,IAAI,CAAC,gBAAgB;6CACT,IAAI,CAAC,4BAA4B;wCACtC,IAAI,CAAC,uBAAuB;2CACzB,IAAI,CAAC,0BAA0B;iCACzC,IAAI,CAAC,gBAAgB;kCACpB,IAAI,CAAC,iBAAiB;mCACrB,IAAI,CAAC,kBAAkB;sCACpB,IAAI,CAAC,qBAAqB;2CACrB,IAAI,CAAC,0BAA0B;kCACxC,IAAI,CAAC,iBAAiB;4CACZ,IAAI,CAAC,2BAA2B;uCACrC,IAAI,CAAC,sBAAsB;oCAC9B,IAAI,CAAC,mBAAmB;0CAClB,IAAI,CAAC,yBAAyB;6CAC3B,IAAI,CAAC,4BAA4B;2BACnD,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,OAAO;qBAChB,IAAI,CAAC,IAAI;iCACG,IAAI,CAAC,gBAAgB;6BACzB,IAAI,CAAC,WAAW;mCACV,IAAI,CAAC,kBAAkB;yBACjC,IAAI,CAAC,QAAQ;sBAChB,IAAI,CAAC,KAAK;+BACD,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;;KAKpD,CAAA;IACH,CAAC;IAeO,aAAa;QACnB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAA;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM;YACnC,CAAC,CAAC,IAAI,CAAA;;cAEE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;SAExC;YACH,CAAC,CAAC,OAAO,CAAA;IACb,CAAC;;AA9fM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;IACD,QAAQ;CACT,CAAA;AAkCQ;IAAR,KAAK,EAAE;kDAA2D;AAC1D;IAAR,KAAK,EAAE;6CAA+B;AAC9B;IAAR,KAAK,EAAE;gDAAkC;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8B;AAC5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAqB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAwB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAkB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAW;AA5F3B,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAggBzB;SAhgBY,aAAa","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct, PaywallType } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .transparent-linear {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 100%, 0)),\n          to(#fff)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n      }\n\n      .transparent-linear-dark {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 18%, 0)),\n          to(#121212)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property countdownArticle untuk menghandle count artikel\n   * property type untuk menghandle tipe epaper\n   * property isWithHeader untuk menghandle paywall information header\n   * property textHeader digunakan sebagai text pada paywall information header\n   * property paywallData untuk menghandle data paywall\n   * property userGuid untuk menghandle user Guid\n   * property subscriptionStatus untuk menghandle status subscription user\n   * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n   * property paywall_location = The location where user encounter the paywall\n   * property paywall_subscription_package = The name of the subscription package viewed by user\n   * property paywall_subscription_id = The ID of the subscription package viewed by user\n   * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n   * property paywall_position = The position of the subscription package viewed by user\n   * property page_type = Type of the page\n   * property content_id = ID of article (slug)\n   * property content_type = Whether it's free article or paid article\n   * property content_title = The title of article\n   * property tracker_content_categories = The category of the content\n   * property user_type = Type of user based on their subscription\n   * property subscription_status = Status of their subscription\n   * property page_domain = Page Domain\n   * property metered_wall_type = The type of Metered Wall\n   * property metered_wall_balance = The balance of their metered wall\n   * property epaper_edition = The edition of epaper viewed by user\n   * property theme = The theme of the paywall component\n   */\n\n  @state() private paywallData: PaywallProduct = {} as PaywallProduct\n  @state() private isOpen: Boolean = true\n  @state() private isLoading: Boolean = true\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: String }) type: PaywallType = 'reguler'\n  @property({ type: Boolean }) isWithHeader = false\n  @property({ type: String }) textHeader = ''\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Boolean }) swgEnable = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  mockResult: PaywallProduct = {\n    informations: {\n      title: '',\n      description: [],\n      register: {\n        img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n        title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n        subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n        label: 'Daftar Sekarang ',\n      },\n      meterred: {\n        maxQuota: 5,\n        label: 'Langganan',\n        maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n        url: 'https://kompas.id/berlangganan',\n      },\n    },\n    packages: {\n      title: 'Sekali bayar, tanpa perpanjang otomatis',\n      memberships: [],\n    },\n    payment: {\n      desktop: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n      ],\n      mobile: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n      ],\n      ekstension: [\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n      ],\n    },\n  }\n\n  get darkUrl() {\n    return this.theme === 'dark' ? '-dark' : ''\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.getPaywallData()\n  }\n\n  async getPaywallData() {\n    try {\n      const response = await fetch(\n        'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/paywall.json'\n      )\n      const json = await response.json()\n      this.paywallData = {\n        ...this.mockResult,\n        informations: {\n          ...this.mockResult.informations,\n          title: json[this.type].head,\n          description: json[this.type].content,\n        },\n        packages: {\n          ...this.mockResult.packages,\n          memberships: json[this.type].memberships,\n        },\n      }\n    } catch (error) {\n      throw Error('failed to get paywall data')\n    } finally {\n      this.isLoading = false\n    }\n  }\n\n  private transitionBox() {\n    return html`\n      <div\n        class=\"h-20 ${this.theme === 'dark'\n          ? 'transparent-linear-dark'\n          : 'transparent-linear'} -mt-24 z-0 w-full\"\n      ></div>\n    `\n  }\n\n  private renderEpaperPaywallSection() {\n    return html`<kompasid-paywall-body\n      paywall_location=${this.paywall_location}\n      paywall_subscription_package=${this.paywall_subscription_package}\n      paywall_subscription_id=${this.paywall_subscription_id}\n      paywall_subscription_price=${this.paywall_subscription_price}\n      paywall_position=${this.paywall_position}\n      tracker_page_type=${this.tracker_page_type}\n      tracker_content_id=${this.tracker_content_id}\n      tracker_content_title=${this.tracker_content_title}\n      tracker_content_categories=${this.tracker_content_categories}\n      tracker_user_type=${this.tracker_user_type}\n      tracker_subscription_status=${this.tracker_subscription_status}\n      tracker_page_domain=${this.tracker_page_domain}\n      tracker_metered_wall_type=${this.tracker_metered_wall_type}\n      tracker_epaper_edition=${this.tracker_epaper_edition}\n      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n      ?swgEnable=${this.swgEnable}\n      tracker_content_type=${this.tracker_content_type}\n      ?isLogin=${this.isLogin}\n      type=${this.type}\n      countdownArticle=${this.countdownArticle}\n      .paywallData=${this.paywallData}\n      subscriptionStatus=${this.subscriptionStatus}\n      userGuid=${this.userGuid}\n      theme=${this.theme}\n    ></kompasid-paywall-body>`\n  }\n\n  private renderRegularPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .paywall_subscription_package}\n                paywall_subscription_id=${this.paywall_subscription_id}\n                paywall_subscription_price=${this.paywall_subscription_price}\n                paywall_position=${this.paywall_position}\n                tracker_page_type=${this.tracker_page_type}\n                tracker_content_id=${this.tracker_content_id}\n                tracker_content_title=${this.tracker_content_title}\n                tracker_content_categories=${this.tracker_content_categories}\n                tracker_user_type=${this.tracker_user_type}\n                tracker_subscription_status=${this.tracker_subscription_status}\n                tracker_page_domain=${this.tracker_page_domain}\n                tracker_metered_wall_type=${this.tracker_metered_wall_type}\n                tracker_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\n              paywall_location=${this.paywall_location}\n              paywall_subscription_package=${this.paywall_subscription_package}\n              paywall_subscription_id=${this.paywall_subscription_id}\n              paywall_subscription_price=${this.paywall_subscription_price}\n              paywall_position=${this.paywall_position}\n              tracker_page_type=${this.tracker_page_type}\n              tracker_content_id=${this.tracker_content_id}\n              tracker_content_title=${this.tracker_content_title}\n              tracker_content_categories=${this.tracker_content_categories}\n              tracker_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\n              tracker_page_domain=${this.tracker_page_domain}\n              tracker_metered_wall_type=${this.tracker_metered_wall_type}\n              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderAudioPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .paywall_subscription_package}\n                paywall_subscription_id=${this.paywall_subscription_id}\n                paywall_subscription_price=${this.paywall_subscription_price}\n                paywall_position=${this.paywall_position}\n                tracker_page_type=${this.tracker_page_type}\n                tracker_content_id=${this.tracker_content_id}\n                tracker_content_title=${this.tracker_content_title}\n                tracker_content_categories=${this.tracker_content_categories}\n                tracker_user_type=${this.tracker_user_type}\n                tracker_subscription_status=${this.tracker_subscription_status}\n                tracker_page_domain=${this.tracker_page_domain}\n                tracker_metered_wall_type=${this.tracker_metered_wall_type}\n                tracker_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n                .togglePaywall=${() => this.togglePaywall()}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\n              paywall_location=${this.paywall_location}\n              paywall_subscription_package=${this.paywall_subscription_package}\n              paywall_subscription_id=${this.paywall_subscription_id}\n              paywall_subscription_price=${this.paywall_subscription_price}\n              paywall_position=${this.paywall_position}\n              tracker_page_type=${this.tracker_page_type}\n              tracker_content_id=${this.tracker_content_id}\n              tracker_content_title=${this.tracker_content_title}\n              tracker_content_categories=${this.tracker_content_categories}\n              tracker_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\n              tracker_page_domain=${this.tracker_page_domain}\n              tracker_metered_wall_type=${this.tracker_metered_wall_type}\n              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n              .togglePaywall=${() => this.togglePaywall()}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private selectorTypePaywall = (type: PaywallType) => {\n    switch (type) {\n      case 'epaper':\n        return this.renderEpaperPaywallSection()\n      case 'audio':\n        return this.renderAudioPaywallSection()\n      case 'reguler':\n        return this.renderRegularPaywallSection()\n      default:\n        return this.renderRegularPaywallSection()\n    }\n  }\n\n  private togglePaywall() {\n    this.isOpen = !this.isOpen\n  }\n\n  render() {\n    return !this.isLoading && this.isOpen\n      ? html`\n          <div class=\"relative w-full\">\n            ${this.selectorTypePaywall(this.type)}\n          </div>\n        `\n      : nothing\n  }\n}\n"]}
+{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,+CAA+C,CAAA;AACtD,OAAO,4EAA4E,CAAA;AACnF,OAAO,0EAA0E,CAAA;AAG1E,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgCL;;WAEG;QACH;;;;;;;;;;;;;;;;;;;;;;;;;;;WA2BG;QAEc,gBAAW,GAAmB,EAAoB,CAAA;QAClD,WAAM,GAAY,IAAI,CAAA;QACtB,cAAS,GAAY,IAAI,CAAA;QAEb,YAAO,GAAG,KAAK,CAAA;QAChB,qBAAgB,GAAG,CAAC,CAAA;QACpB,SAAI,GAAgB,SAAS,CAAA;QAC5B,iBAAY,GAAG,KAAK,CAAA;QACrB,eAAU,GAAG,EAAE,CAAA;QACf,aAAQ,GAAG,EAAE,CAAA;QACb,uBAAkB,GAAG,EAAE,CAAA;QACtB,cAAS,GAAG,KAAK,CAAA;QAClB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,CAAC,CAAA;QAC3B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,2BAAsB,GAAG,EAAE,CAAA;QAC3B,UAAK,GAAG,EAAE,CAAA;QAEtC,eAAU,GAAmB;YAC3B,YAAY,EAAE;gBACZ,KAAK,EAAE,EAAE;gBACT,WAAW,EAAE,EAAE;gBACf,QAAQ,EAAE;oBACR,GAAG,EAAE,yEAAyE;oBAC9E,KAAK,EAAE,wCAAwC;oBAC/C,QAAQ,EAAE,4DAA4D;oBACtE,KAAK,EAAE,kBAAkB;iBAC1B;gBACD,QAAQ,EAAE;oBACR,QAAQ,EAAE,CAAC;oBACX,KAAK,EAAE,WAAW;oBAClB,eAAe,EAAE,kDAAkD;oBACnE,GAAG,EAAE,gCAAgC;iBACtC;aACF;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,yCAAyC;gBAChD,WAAW,EAAE,EAAE;gBACf,SAAS,EAAE,sBAAsB;aAClC;YACD,OAAO,EAAE;gBACP,OAAO,EAAE;oBACP;wBACE,IAAI,EAAE,OAAO;wBACb,IAAI,EAAE,4DAA4D,IAAI,CAAC,OAAO,MAAM;qBACrF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,iEAAiE,IAAI,CAAC,OAAO,MAAM;qBAC1F;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,mEAAmE,IAAI,CAAC,OAAO,MAAM;qBAC5F;oBACD;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,gEAAgE,IAAI,CAAC,OAAO,MAAM;qBACzF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;iBACF;gBACD,MAAM,EAAE;oBACN;wBACE,IAAI,EAAE,OAAO;wBACb,IAAI,EAAE,4DAA4D,IAAI,CAAC,OAAO,MAAM;qBACrF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,iEAAiE,IAAI,CAAC,OAAO,MAAM;qBAC1F;iBACF;gBACD,UAAU,EAAE;oBACV;wBACE,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,2DAA2D,IAAI,CAAC,OAAO,MAAM;qBACpF;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,IAAI,EAAE,mEAAmE,IAAI,CAAC,OAAO,MAAM;qBAC5F;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,IAAI,EAAE,8DAA8D,IAAI,CAAC,OAAO,MAAM;qBACvF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,gEAAgE,IAAI,CAAC,OAAO,MAAM;qBACzF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;oBACD;wBACE,IAAI,EAAE,KAAK;wBACX,IAAI,EAAE,0DAA0D,IAAI,CAAC,OAAO,MAAM;qBACnF;iBACF;aACF;SACF,CAAA;QAoQO,wBAAmB,GAAG,CAAC,IAAiB,EAAE,EAAE;YAClD,QAAQ,IAAI,EAAE;gBACZ,KAAK,QAAQ;oBACX,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAA;gBAC1C,KAAK,OAAO;oBACV,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAA;gBACzC,KAAK,SAAS;oBACZ,OAAO,IAAI,CAAC,2BAA2B,EAAE,CAAA;gBAC3C;oBACE,OAAO,IAAI,CAAC,2BAA2B,EAAE,CAAA;aAC5C;QACH,CAAC,CAAA;IAeH,CAAC;IA5RC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7C,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAC1B,4FAA4F,CAC7F,CAAA;YACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;YAClC,IAAI,CAAC,WAAW,GAAG;gBACjB,GAAG,IAAI,CAAC,UAAU;gBAClB,YAAY,EAAE;oBACZ,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY;oBAC/B,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI;oBAC3B,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO;iBACrC;gBACD,QAAQ,EAAE;oBACR,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ;oBAC3B,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW;oBACxC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS;iBACrC;aACF,CAAA;SACF;QAAC,OAAO,KAAK,EAAE;YACd,MAAM,KAAK,CAAC,4BAA4B,CAAC,CAAA;SAC1C;gBAAS;YACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;SACvB;IACH,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,KAAK,KAAK,MAAM;YACjC,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,oBAAoB;;KAE3B,CAAA;IACH,CAAC;IAEO,0BAA0B;QAChC,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,gBAAgB;qCACT,IAAI,CAAC,4BAA4B;gCACtC,IAAI,CAAC,uBAAuB;mCACzB,IAAI,CAAC,0BAA0B;yBACzC,IAAI,CAAC,gBAAgB;0BACpB,IAAI,CAAC,iBAAiB;2BACrB,IAAI,CAAC,kBAAkB;8BACpB,IAAI,CAAC,qBAAqB;mCACrB,IAAI,CAAC,0BAA0B;0BACxC,IAAI,CAAC,iBAAiB;oCACZ,IAAI,CAAC,2BAA2B;4BACxC,IAAI,CAAC,mBAAmB;kCAClB,IAAI,CAAC,yBAAyB;+BACjC,IAAI,CAAC,sBAAsB;qCACrB,IAAI,CAAC,4BAA4B;mBACnD,IAAI,CAAC,SAAS;6BACJ,IAAI,CAAC,oBAAoB;iBACrC,IAAI,CAAC,OAAO;aAChB,IAAI,CAAC,IAAI;yBACG,IAAI,CAAC,gBAAgB;qBACzB,IAAI,CAAC,WAAW;2BACV,IAAI,CAAC,kBAAkB;iBACjC,IAAI,CAAC,QAAQ;cAChB,IAAI,CAAC,KAAK;8BACM,CAAA;IAC5B,CAAC;IAEO,2BAA2B;QACjC,MAAM,iBAAiB,GACrB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAA;QACxD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,IAAI,CAAA;;YAEL,IAAI,CAAC,aAAa,EAAE;;mCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;gBAC1C,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,UAAU;;;;uBAIH,IAAI,CAAC,UAAU,IAAI,iBAAiB;wBACnC,IAAI,CAAC,KAAK;;;mCAGC,IAAI,CAAC,gBAAgB;+CACT,IAAI;iBAChC,4BAA4B;0CACL,IAAI,CAAC,uBAAuB;6CACzB,IAAI,CAAC,0BAA0B;mCACzC,IAAI,CAAC,gBAAgB;oCACpB,IAAI,CAAC,iBAAiB;qCACrB,IAAI,CAAC,kBAAkB;wCACpB,IAAI,CAAC,qBAAqB;6CACrB,IAAI,CAAC,0BAA0B;oCACxC,IAAI,CAAC,iBAAiB;8CACZ,IAAI,CAAC,2BAA2B;sCACxC,IAAI,CAAC,mBAAmB;4CAClB,IAAI,CAAC,yBAAyB;yCACjC,IAAI,CAAC,sBAAsB;+CACrB,IAAI;iBAChC,4BAA4B;uCACR,IAAI,CAAC,oBAAoB;6BACnC,IAAI,CAAC,SAAS;2BAChB,IAAI,CAAC,OAAO;uBAChB,IAAI,CAAC,IAAI;mCACG,IAAI,CAAC,gBAAgB;+BACzB,IAAI,CAAC,WAAW;qCACV,IAAI,CAAC,kBAAkB;2BACjC,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,KAAK;;;;;OAK3B,CAAA;SACF;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,EAAE;;iCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,UAAU;;;;qCAIa,IAAI,CAAC,oBAAoB;iCAC7B,IAAI,CAAC,gBAAgB;6CACT,IAAI,CAAC,4BAA4B;wCACtC,IAAI,CAAC,uBAAuB;2CACzB,IAAI,CAAC,0BAA0B;iCACzC,IAAI,CAAC,gBAAgB;kCACpB,IAAI,CAAC,iBAAiB;mCACrB,IAAI,CAAC,kBAAkB;sCACpB,IAAI,CAAC,qBAAqB;2CACrB,IAAI,CAAC,0BAA0B;kCACxC,IAAI,CAAC,iBAAiB;4CACZ,IAAI,CAAC,2BAA2B;uCACrC,IAAI,CAAC,sBAAsB;oCAC9B,IAAI,CAAC,mBAAmB;0CAClB,IAAI,CAAC,yBAAyB;6CAC3B,IAAI,CAAC,4BAA4B;2BACnD,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,OAAO;qBAChB,IAAI,CAAC,IAAI;iCACG,IAAI,CAAC,gBAAgB;6BACzB,IAAI,CAAC,WAAW;mCACV,IAAI,CAAC,kBAAkB;yBACjC,IAAI,CAAC,QAAQ;sBAChB,IAAI,CAAC,KAAK;;;;;KAK3B,CAAA;IACH,CAAC;IAEO,yBAAyB;QAC/B,MAAM,iBAAiB,GACrB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAA;QACxD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,IAAI,CAAA;;YAEL,IAAI,CAAC,aAAa,EAAE;;mCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;gBAC1C,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,UAAU;;;;uBAIH,IAAI,CAAC,UAAU,IAAI,iBAAiB;wBACnC,IAAI,CAAC,KAAK;;;mCAGC,IAAI,CAAC,gBAAgB;+CACT,IAAI;iBAChC,4BAA4B;0CACL,IAAI,CAAC,uBAAuB;6CACzB,IAAI,CAAC,0BAA0B;mCACzC,IAAI,CAAC,gBAAgB;oCACpB,IAAI,CAAC,iBAAiB;qCACrB,IAAI,CAAC,kBAAkB;wCACpB,IAAI,CAAC,qBAAqB;6CACrB,IAAI,CAAC,0BAA0B;oCACxC,IAAI,CAAC,iBAAiB;8CACZ,IAAI,CAAC,2BAA2B;sCACxC,IAAI,CAAC,mBAAmB;4CAClB,IAAI,CAAC,yBAAyB;yCACjC,IAAI,CAAC,sBAAsB;+CACrB,IAAI;iBAChC,4BAA4B;uCACR,IAAI,CAAC,oBAAoB;6BACnC,IAAI,CAAC,SAAS;2BAChB,IAAI,CAAC,OAAO;uBAChB,IAAI,CAAC,IAAI;mCACG,IAAI,CAAC,gBAAgB;+BACzB,IAAI,CAAC,WAAW;qCACV,IAAI,CAAC,kBAAkB;2BACjC,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,KAAK;iCACD,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;;OAKpD,CAAA;SACF;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,EAAE;;iCAEG,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,UAAU;;;;qCAIa,IAAI,CAAC,oBAAoB;iCAC7B,IAAI,CAAC,gBAAgB;6CACT,IAAI,CAAC,4BAA4B;wCACtC,IAAI,CAAC,uBAAuB;2CACzB,IAAI,CAAC,0BAA0B;iCACzC,IAAI,CAAC,gBAAgB;kCACpB,IAAI,CAAC,iBAAiB;mCACrB,IAAI,CAAC,kBAAkB;sCACpB,IAAI,CAAC,qBAAqB;2CACrB,IAAI,CAAC,0BAA0B;kCACxC,IAAI,CAAC,iBAAiB;4CACZ,IAAI,CAAC,2BAA2B;uCACrC,IAAI,CAAC,sBAAsB;oCAC9B,IAAI,CAAC,mBAAmB;0CAClB,IAAI,CAAC,yBAAyB;6CAC3B,IAAI,CAAC,4BAA4B;2BACnD,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,OAAO;qBAChB,IAAI,CAAC,IAAI;iCACG,IAAI,CAAC,gBAAgB;6BACzB,IAAI,CAAC,WAAW;mCACV,IAAI,CAAC,kBAAkB;yBACjC,IAAI,CAAC,QAAQ;sBAChB,IAAI,CAAC,KAAK;+BACD,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;;KAKpD,CAAA;IACH,CAAC;IAeO,aAAa;QACnB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAA;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM;YACnC,CAAC,CAAC,IAAI,CAAA;;cAEE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;SAExC;YACH,CAAC,CAAC,OAAO,CAAA;IACb,CAAC;;AAhgBM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;IACD,QAAQ;CACT,CAAA;AAkCQ;IAAR,KAAK,EAAE;kDAA2D;AAC1D;IAAR,KAAK,EAAE;6CAA+B;AAC9B;IAAR,KAAK,EAAE;gDAAkC;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA8B;AAC5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAqB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAwB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAkB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAW;AA5F3B,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAkgBzB;SAlgBY,aAAa","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct, PaywallType } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .transparent-linear {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 100%, 0)),\n          to(#fff)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n      }\n\n      .transparent-linear-dark {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          left bottom,\n          from(hsla(0, 0%, 18%, 0)),\n          to(#121212)\n        );\n        background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property countdownArticle untuk menghandle count artikel\n   * property type untuk menghandle tipe epaper\n   * property isWithHeader untuk menghandle paywall information header\n   * property textHeader digunakan sebagai text pada paywall information header\n   * property paywallData untuk menghandle data paywall\n   * property userGuid untuk menghandle user Guid\n   * property subscriptionStatus untuk menghandle status subscription user\n   * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n   * property paywall_location = The location where user encounter the paywall\n   * property paywall_subscription_package = The name of the subscription package viewed by user\n   * property paywall_subscription_id = The ID of the subscription package viewed by user\n   * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n   * property paywall_position = The position of the subscription package viewed by user\n   * property page_type = Type of the page\n   * property content_id = ID of article (slug)\n   * property content_type = Whether it's free article or paid article\n   * property content_title = The title of article\n   * property tracker_content_categories = The category of the content\n   * property user_type = Type of user based on their subscription\n   * property subscription_status = Status of their subscription\n   * property page_domain = Page Domain\n   * property metered_wall_type = The type of Metered Wall\n   * property metered_wall_balance = The balance of their metered wall\n   * property epaper_edition = The edition of epaper viewed by user\n   * property theme = The theme of the paywall component\n   */\n\n  @state() private paywallData: PaywallProduct = {} as PaywallProduct\n  @state() private isOpen: Boolean = true\n  @state() private isLoading: Boolean = true\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: Number }) countdownArticle = 0\n  @property({ type: String }) type: PaywallType = 'reguler'\n  @property({ type: Boolean }) isWithHeader = false\n  @property({ type: String }) textHeader = ''\n  @property({ type: String }) userGuid = ''\n  @property({ type: String }) subscriptionStatus = ''\n  @property({ type: Boolean }) swgEnable = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n  @property({ type: String }) theme = ''\n\n  mockResult: PaywallProduct = {\n    informations: {\n      title: '',\n      description: [],\n      register: {\n        img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n        title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n        subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n        label: 'Daftar Sekarang ',\n      },\n      meterred: {\n        maxQuota: 5,\n        label: 'Langganan',\n        maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n        url: 'https://kompas.id/berlangganan',\n      },\n    },\n    packages: {\n      title: 'Sekali bayar, tanpa perpanjang otomatis',\n      memberships: [],\n      freeTrial: 'untuk 3 hari pertama',\n    },\n    payment: {\n      desktop: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n      ],\n      mobile: [\n        {\n          name: 'gopay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'ovo',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n        },\n        {\n          name: 'visa',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mastercard',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n        },\n      ],\n      ekstension: [\n        {\n          name: 'dana',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n        },\n        {\n          name: 'mandiri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bri',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bcaklikpay',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n        },\n        {\n          name: 'akulaku',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bni',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n        },\n        {\n          name: 'indomaret',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n        },\n        {\n          name: 'bca',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n        },\n        {\n          name: 'jcb',\n          link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n        },\n      ],\n    },\n  }\n\n  get darkUrl() {\n    return this.theme === 'dark' ? '-dark' : ''\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.getPaywallData()\n  }\n\n  async getPaywallData() {\n    try {\n      const response = await fetch(\n        'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/paywall.json'\n      )\n      const json = await response.json()\n      this.paywallData = {\n        ...this.mockResult,\n        informations: {\n          ...this.mockResult.informations,\n          title: json[this.type].head,\n          description: json[this.type].content,\n        },\n        packages: {\n          ...this.mockResult.packages,\n          memberships: json[this.type].memberships,\n          freeTrial: json[this.type].freeTrial,\n        },\n      }\n    } catch (error) {\n      throw Error('failed to get paywall data')\n    } finally {\n      this.isLoading = false\n    }\n  }\n\n  private transitionBox() {\n    return html`\n      <div\n        class=\"h-20 ${this.theme === 'dark'\n          ? 'transparent-linear-dark'\n          : 'transparent-linear'} -mt-24 z-0 w-full\"\n      ></div>\n    `\n  }\n\n  private renderEpaperPaywallSection() {\n    return html`<kompasid-paywall-body\n      paywall_location=${this.paywall_location}\n      paywall_subscription_package=${this.paywall_subscription_package}\n      paywall_subscription_id=${this.paywall_subscription_id}\n      paywall_subscription_price=${this.paywall_subscription_price}\n      paywall_position=${this.paywall_position}\n      tracker_page_type=${this.tracker_page_type}\n      tracker_content_id=${this.tracker_content_id}\n      tracker_content_title=${this.tracker_content_title}\n      tracker_content_categories=${this.tracker_content_categories}\n      tracker_user_type=${this.tracker_user_type}\n      tracker_subscription_status=${this.tracker_subscription_status}\n      tracker_page_domain=${this.tracker_page_domain}\n      tracker_metered_wall_type=${this.tracker_metered_wall_type}\n      tracker_epaper_edition=${this.tracker_epaper_edition}\n      tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n      ?swgEnable=${this.swgEnable}\n      tracker_content_type=${this.tracker_content_type}\n      ?isLogin=${this.isLogin}\n      type=${this.type}\n      countdownArticle=${this.countdownArticle}\n      .paywallData=${this.paywallData}\n      subscriptionStatus=${this.subscriptionStatus}\n      userGuid=${this.userGuid}\n      theme=${this.theme}\n    ></kompasid-paywall-body>`\n  }\n\n  private renderRegularPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .paywall_subscription_package}\n                paywall_subscription_id=${this.paywall_subscription_id}\n                paywall_subscription_price=${this.paywall_subscription_price}\n                paywall_position=${this.paywall_position}\n                tracker_page_type=${this.tracker_page_type}\n                tracker_content_id=${this.tracker_content_id}\n                tracker_content_title=${this.tracker_content_title}\n                tracker_content_categories=${this.tracker_content_categories}\n                tracker_user_type=${this.tracker_user_type}\n                tracker_subscription_status=${this.tracker_subscription_status}\n                tracker_page_domain=${this.tracker_page_domain}\n                tracker_metered_wall_type=${this.tracker_metered_wall_type}\n                tracker_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\n              paywall_location=${this.paywall_location}\n              paywall_subscription_package=${this.paywall_subscription_package}\n              paywall_subscription_id=${this.paywall_subscription_id}\n              paywall_subscription_price=${this.paywall_subscription_price}\n              paywall_position=${this.paywall_position}\n              tracker_page_type=${this.tracker_page_type}\n              tracker_content_id=${this.tracker_content_id}\n              tracker_content_title=${this.tracker_content_title}\n              tracker_content_categories=${this.tracker_content_categories}\n              tracker_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\n              tracker_page_domain=${this.tracker_page_domain}\n              tracker_metered_wall_type=${this.tracker_metered_wall_type}\n              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderAudioPaywallSection() {\n    const defaultHeaderText: string =\n      this.paywallData.informations.meterred.maxQuotaMessage\n    if (this.isWithHeader) {\n      return html`\n        <div>\n          ${this.transitionBox()}\n          <div\n            class=\"flex flex-col ${this.theme === 'dark'\n              ? 'bg-dark-5'\n              : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n          >\n            <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n              <kompasid-paywall-information-header\n                text=${this.textHeader || defaultHeaderText}\n                theme=${this.theme}\n              ></kompasid-paywall-information-header>\n              <kompasid-paywall-body\n                paywall_location=${this.paywall_location}\n                paywall_subscription_package=${this\n                  .paywall_subscription_package}\n                paywall_subscription_id=${this.paywall_subscription_id}\n                paywall_subscription_price=${this.paywall_subscription_price}\n                paywall_position=${this.paywall_position}\n                tracker_page_type=${this.tracker_page_type}\n                tracker_content_id=${this.tracker_content_id}\n                tracker_content_title=${this.tracker_content_title}\n                tracker_content_categories=${this.tracker_content_categories}\n                tracker_user_type=${this.tracker_user_type}\n                tracker_subscription_status=${this.tracker_subscription_status}\n                tracker_page_domain=${this.tracker_page_domain}\n                tracker_metered_wall_type=${this.tracker_metered_wall_type}\n                tracker_epaper_edition=${this.tracker_epaper_edition}\n                tracker_metered_wall_balance=${this\n                  .tracker_metered_wall_balance}\n                tracker_content_type=${this.tracker_content_type}\n                ?swgEnable=${this.swgEnable}\n                ?isLogin=${this.isLogin}\n                type=${this.type}\n                countdownArticle=${this.countdownArticle}\n                .paywallData=${this.paywallData}\n                subscriptionStatus=${this.subscriptionStatus}\n                userGuid=${this.userGuid}\n                theme=${this.theme}\n                .togglePaywall=${() => this.togglePaywall()}\n              ></kompasid-paywall-body>\n            </div>\n          </div>\n        </div>\n      `\n    }\n    return html`\n      <div>\n        ${this.transitionBox()}\n        <div\n          class=\"flex flex-col ${this.theme === 'dark'\n            ? 'bg-dark-5'\n            : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n        >\n          <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n            <kompasid-paywall-body\n              tracker_content_type=${this.tracker_content_type}\n              paywall_location=${this.paywall_location}\n              paywall_subscription_package=${this.paywall_subscription_package}\n              paywall_subscription_id=${this.paywall_subscription_id}\n              paywall_subscription_price=${this.paywall_subscription_price}\n              paywall_position=${this.paywall_position}\n              tracker_page_type=${this.tracker_page_type}\n              tracker_content_id=${this.tracker_content_id}\n              tracker_content_title=${this.tracker_content_title}\n              tracker_content_categories=${this.tracker_content_categories}\n              tracker_user_type=${this.tracker_user_type}\n              tracker_subscription_status=${this.tracker_subscription_status}\n              tracker_epaper_edition=${this.tracker_epaper_edition}\n              tracker_page_domain=${this.tracker_page_domain}\n              tracker_metered_wall_type=${this.tracker_metered_wall_type}\n              tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n              ?swgEnable=${this.swgEnable}\n              ?isLogin=${this.isLogin}\n              type=${this.type}\n              countdownArticle=${this.countdownArticle}\n              .paywallData=${this.paywallData}\n              subscriptionStatus=${this.subscriptionStatus}\n              userGuid=${this.userGuid}\n              theme=${this.theme}\n              .togglePaywall=${() => this.togglePaywall()}\n            ></kompasid-paywall-body>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private selectorTypePaywall = (type: PaywallType) => {\n    switch (type) {\n      case 'epaper':\n        return this.renderEpaperPaywallSection()\n      case 'audio':\n        return this.renderAudioPaywallSection()\n      case 'reguler':\n        return this.renderRegularPaywallSection()\n      default:\n        return this.renderRegularPaywallSection()\n    }\n  }\n\n  private togglePaywall() {\n    this.isOpen = !this.isOpen\n  }\n\n  render() {\n    return !this.isLoading && this.isOpen\n      ? html`\n          <div class=\"relative w-full\">\n            ${this.selectorTypePaywall(this.type)}\n          </div>\n        `\n      : nothing\n  }\n}\n"]}

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

@@ -40,6 +40,7 @@ export interface Informations {
 export interface Packages {
     title: string;
     memberships: Array<Product>;
+    freeTrial: string;
 }
 export interface PaywallProduct {
     informations: {

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

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

package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts

@@ -132,6 +132,10 @@ export declare class KompasIdPaywallBody extends LitElement {
     private introductoryPrice;
     private swgRegonText;
     private swgPackageSection;
+    private openFreeTrialPopup;
+    private closeFreeTrialPopup;
+    private freeTrialPopUp;
+    private freeTrialPackageSection;
     /**
      * Render Statement
      */

package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js

@@ -57,6 +57,9 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         if (this.targetElement.classList.contains('wrapper-body')) {
             this.togglePaywall();
         }
+        if (this.targetElement.id === 'freeTrialPopup') {
+            this.closeFreeTrialPopup();
+        }
     }
     parsePrice(price) {
         const lowerCasePrice = price.toLowerCase();
@@ -768,6 +771,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             ? this.primaryPackages(item)
             : this.secondaryPackages(item))}
         ${this.swgEnable ? this.swgPackageSection() : nothing}
+        ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
       </div>
     `;
     }
@@ -883,6 +887,126 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
       </div>
     `;
     }
+    openFreeTrialPopup() {
+        var _a;
+        const popup = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('freeTrialPopup');
+        popup === null || popup === void 0 ? void 0 : popup.classList.remove('hidden');
+    }
+    closeFreeTrialPopup() {
+        var _a;
+        const popup = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('freeTrialPopup');
+        popup === null || popup === void 0 ? void 0 : popup.classList.add('hidden');
+    }
+    freeTrialPopUp() {
+        return html `
+      <div
+        id="freeTrialPopup"
+        class="fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75 hidden"
+      >
+        <div
+          class="bg-white rounded w-11/12 sm:w-3/4 md:w-1/2 lg:w-1/3 2xl:w-1/4 p-6 text-center"
+        >
+          <div class="w-full flex justify-end px-2">
+            <button
+              @click=${this.closeFreeTrialPopup}
+              class="w-8 h-8 pl-4 text-grey-400"
+            >
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
+            </button>
+          </div>
+          <div class="w-full flex justify-center">
+            <div class="w-3/4 lg:w-1/2">
+              <img src="/assets/kompas-free-trial.png" alt="Free Trial" />
+            </div>
+          </div>
+          <p class="font-bold text-lg text-grey-600 mt-4">
+            Coba Gratis Kompas.id di Aplikasi
+          </p>
+          <div
+            class="hidden lg:block lg:flex flex border border-grey-300 rounded mt-4 px-8 py-4 items-center"
+          >
+            <div class="w-1/3 flex mr-6">
+              <img src="/assets/qr-code.png" alt="QR Code Deep Link" />
+            </div>
+            <div class="w-2/3 text-base text-grey-600 text-left">
+              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
+              dengan ponsel atau tablet untuk mengunduh aplikasi.
+            </div>
+          </div>
+          <div
+            class="text-base text-grey-600 text-center lg:hidden px-2 md:px-8"
+          >
+            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
+            Kompas.id di aplikasi.
+          </div>
+          <div class="lg:flex flex justify-center mt-4 hidden lg:block gap-4">
+            <a
+              href="https://play.google.com/store/apps/details?id=id.kompas.app"
+              target="_blank"
+              ><img
+                src="https://cdn-www.kompas.id/halaman-unduh/image/google-play-badge.png"
+                alt="Google Play Badge"
+            /></a>
+            <a
+              href="https://apps.apple.com/id/app/kompas-id/id1242195037?l=id"
+              target="_blank"
+              ><img
+                src="https://cdn-www.kompas.id/halaman-unduh/image/ios-badge.png"
+                alt="iOS App Store Badge"
+            /></a>
+          </div>
+          <button
+            onclick="window.open('https://app.komp.as/langganan', '_blank')"
+            class="h-12 bg-green-500 rounded-md mt-4 flex w-full items-center justify-center lg:hidden"
+          >
+            <h6 class="text-white font-bold p-4">Unduh Sekarang</h6>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    freeTrialPackageSection() {
+        var _a, _b;
+        const packages = (_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.packages) !== null && _b !== void 0 ? _b : {};
+        if (packages.freeTrial) {
+            return html `
+        <div
+          class="flex flex-wrap items-center justify-between ${this.isDark
+                ? 'bg-grey-600'
+                : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+        >
+          <div class="flex flex-col">
+            <div class="flex items-center">
+              <h5 class="text-base md:text-lg font-bold text-orange-400">
+                ${formatRupiah(0)}
+              </h5>
+            </div>
+            <div class="flex items-center">
+              <p
+                class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}"
+              >
+                ${packages.freeTrial}
+              </p>
+            </div>
+          </div>
+          <button
+            @click=${this.openFreeTrialPopup}
+            class="h-8 ${!this.isDark &&
+                'bg-white'} border border-green-500 rounded"
+          >
+            <h6
+              class="text-xs md:text-sm ${this.isDark
+                ? 'text-green-300'
+                : 'text-green-500'} font-bold px-4"
+            >
+              Coba Gratis
+            </h6>
+          </button>
+        </div>
+      `;
+        }
+        return nothing;
+    }
     /**
      * Render Statement
      */