npm - @kompasid/lit-web-components - Versions diffs - 0.4.5 → 0.5.0 - Mend

@kompasid/lit-web-components 0.4.5 → 0.5.0

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

Files changed (53) hide show

package/assets/font-awesome.ts CHANGED Viewed

@@ -10,12 +10,15 @@ export const faArrowLeft = html`<svg
   />
 </svg>`
-export const faCheck = html`<svg
+export const faCheck = () => html`<svg
+  width="17"
+  height="16"
+  viewBox="0 0 17 16"
+  fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
 >
-  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
   <path
-    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+    d="M13.3438 5.93749C13.3438 6.10415 13.2854 6.24582 13.1687 6.36249L8.64375 10.8875L7.79375 11.7375C7.67708 11.8542 7.53542 11.9125 7.36875 11.9125C7.20208 11.9125 7.06042 11.8542 6.94375 11.7375L6.09375 10.8875L3.83125 8.62499C3.71458 8.50832 3.65625 8.36665 3.65625 8.19999C3.65625 8.03332 3.71458 7.89165 3.83125 7.77499L4.68125 6.92499C4.79792 6.80832 4.93958 6.74999 5.10625 6.74999C5.27292 6.74999 5.41458 6.80832 5.53125 6.92499L7.36875 8.76874L11.4688 4.66249C11.5854 4.54582 11.7271 4.48749 11.8938 4.48749C12.0604 4.48749 12.2021 4.54582 12.3188 4.66249L13.1687 5.51249C13.2854 5.62915 13.3438 5.77082 13.3438 5.93749Z"
+    fill="#50A718"
   />
 </svg>`

package/demo/index.html CHANGED Viewed

@@ -1,140 +1,169 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Kompas.id Web Components</title>
-  <link rel="icon" type="image/x-icon" href="/assets/kompas-icon.svg">
-  <style>
-    body {
-      background: #fafafa;
-    }
-    .video {
-      background-color: #cccccc;
-      background-image: url('/assets/video.jpg');
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      position: relative;
-      max-height: 500px;
-      margin: 20px 0;
-      aspect-ratio: 9 / 5;
-    }
-  </style>
-  <script>
-    (function initGTM(w, d, s, l, i) {
-      const _w = w;
-      _w[l] = _w[l] || [];
-      _w[l].push({
-        'gtm.start': new Date().getTime(),
-        'event': 'gtm.js'
-      });
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Kompas.id Web Components</title>
+    <link rel="icon" type="image/x-icon" href="/assets/kompas-icon.svg" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+      .video {
+        background-color: #cccccc;
+        background-image: url('/assets/video.jpg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        position: relative;
+        max-height: 500px;
+        margin: 20px 0;
+        aspect-ratio: 9 / 5;
+      }
+    </style>
+    <script>
+      ;(function initGTM(w, d, s, l, i) {
+        const _w = w
+        _w[l] = _w[l] || []
+        _w[l].push({
+          'gtm.start': new Date().getTime(),
+          event: 'gtm.js',
+        })
-      const f = d.getElementsByTagName(s)[0];
-      const j = d.createElement(s);
-      const dl = l !== 'dataLayer' ? `&l=${l}` : '';
+        const f = d.getElementsByTagName(s)[0]
+        const j = d.createElement(s)
+        const dl = l !== 'dataLayer' ? `&l=${l}` : ''
-      j.async = true;
-      j.src = `https://www.googletagmanager.com/gtm.js?id=${i}${dl}`;
-      f.parentNode.insertBefore(j, f);
+        j.async = true
+        j.src = `https://www.googletagmanager.com/gtm.js?id=${i}${dl}`
+        f.parentNode.insertBefore(j, f)
+      })(window, document, 'script', 'dataLayer')
+    </script>
+  </head>
+  <body>
+    <div id="demo"></div>
-    })(window, document, 'script', 'dataLayer');
-  </script>
-</head>
-<body>
-  <div id="demo"></div>
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/components/kompasid-footer/KompasFooter.js'
+      import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
+      import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
+      import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+      import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../dist/src/components/kompasid-footer/KompasFooter.js'
-    import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
-    import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
-    import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+      const type = 'reguler'
+      const theme = ''
+      const paywallLocation = 'paywall_location'
+      const paywallSubscriptionId = 'testId'
+      const paywallSubscriptionPrice = 0
+      const paywallPosition = 1
+      const paywallSubscriptionPackage = 'test subscription'
+      const trackerPageType = 'page_type'
+      const trackerPageTitle= 'page_title'
+      const trackerContentId = 'content_id'
+      const trackerContentType = 'content_type'
+      const trackerContentTitle = 'content_title'
+      const trackerContentCategories = 'content_categories'
+      const trackerUserType = 'user_type'
+      const trackerMeteredWallBalance = 0
+      const subscriptionStatus = 'subscription_status'
+      const trackerPageDomain = 'page_domain'
+      const meteredWallType = 'metered_wall_type'
+      const trackerEpaperEdition = 'edition'
+      const meteredWallBalance = 0
+      const isLogin = false
+      const isWithHeader = false
+      const textHeader = 'this is message for header information'
+      const userGuid = '111000'
+      const trackerSubscriptionStatus = 'register'
+      const swgEnable = true
+      const videoPaywallType = 'homepage'
+      const freewallType = 'landing_page'
+      const headCopyExpand = 'copy expand'
+      const headCopyCollapse = 'copy collapse'
+      const expand = false
-    const type = 'reguler'
-    const theme=""
-    const paywallLocation = "Article Detail Page";
-    const paywallSubscriptionId = "testId";
-    const paywallSubscriptionPrice = 0;
-    const paywallPosition = 1;
-    const paywallSubscriptionPackage = "test subscription";
-    const trackerPageType = "page_type";
-    const trackerContentId = "content_id";
-    const trackerContentType = "content_type";
-    const trackerContentTitle = "content_title";
-    const trackerContentCategories = "content_categories";
-    const trackerUserType = "user_type";
-    const trackerMeteredWallBalance = "metered_wall_balance";
-    const subscriptionStatus = "subscription_status";
-    const trackerPageDomain = "page_domain";
-    const meteredWallType = "metered_wall_type";
-    const trackerEpaperEdition = "edition";
-    const meteredWallBalance = 0;
-    const isLogin = false;
-    const isWithHeader = false;
-    const textHeader = "this is message for header information";
-    const userGuid = "111000";
-    const trackerSubscriptionStatus = "register";
-    const swgEnable = true;
-    const videoPaywallType = 'homepage';
+      render(
+        html`
+          <kompasid-paywall
+            .type=${type}
+            .theme=${theme}
+            .paywall_location=${paywallLocation}
+            .paywall_subscription_id=${paywallSubscriptionId}
+            .paywall_subscription_price=${paywallSubscriptionPrice}
+            .paywall_position=${paywallPosition}
+            .tracker_page_type=${trackerPageType}
+            .tracker_content_id=${trackerContentId}
+            .tracker_content_type=${trackerContentType}
+            .tracker_content_title=${trackerContentTitle}
+            .tracker_content_categories=${trackerContentCategories}
+            .tracker_user_type=${trackerUserType}
+            .subscriptionStatus=${subscriptionStatus}
+            .tracker_page_domain=${trackerPageDomain}
+            .metered_wall_type=${meteredWallType}
+            .subscriptionStatus=${subscriptionStatus}
+            .tracker_epaper_edition=${trackerEpaperEdition}
+            .metered_wall_balance=${meteredWallBalance}
+            .isLogin=${isLogin}
+            .isWithHeader=${isWithHeader}
+            .swgEnable=${swgEnable}
+            .textHeader=${textHeader}
+            .userGuid=${userGuid}
+            .tracker_subscription_status=${trackerSubscriptionStatus}
+          >
+          </kompasid-paywall>
+          <div class="video">
+            <kompasid-paywall-video
+              .isLogin=${isLogin}
+              .type=${videoPaywallType}
+              .paywall_location=${paywallLocation}
+              .paywall_subscription_package=${paywallSubscriptionPackage}
+              .paywall_subscription_id=${paywallSubscriptionId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              .paywall_position=${paywallPosition}
+              .tracker_page_type=${trackerPageType}
+              .tracker_content_id=${trackerContentId}
+              .tracker_content_type=${trackerContentType}
+              .tracker_content_title=${trackerContentTitle}
+              .tracker_content_categories=${trackerContentCategories}
+              .tracker_user_type=${trackerUserType}
+              .tracker_subscription_status=${trackerSubscriptionStatus}
+              .tracker_page_domain=${trackerPageDomain}
+              .metered_wall_type=${meteredWallType}
+              .tracker_metered_wall_balance=${trackerMeteredWallBalance}
+            >
+            </kompasid-paywall-video>
+          </div>
+          <kompasid-footer></kompasid-footer>
-    render(
-      html`
-        <kompasid-paywall
-          .type=${type}
-          .theme=${theme}
-          .paywall_location=${paywallLocation}
-          .paywall_subscription_id=${paywallSubscriptionId}
-          .paywall_subscription_price=${paywallSubscriptionPrice}
-          .paywall_position=${paywallPosition}
-          .tracker_page_type=${trackerPageType}
-          .tracker_content_id=${trackerContentId}
-          .tracker_content_type=${trackerContentType}
-          .tracker_content_title=${trackerContentTitle}
-          .tracker_content_categories=${trackerContentCategories}
-          .tracker_user_type=${trackerUserType}
-          .subscriptionStatus=${subscriptionStatus}
-          .tracker_page_domain=${trackerPageDomain}
-          .metered_wall_type=${meteredWallType}
-          .subscriptionStatus=${subscriptionStatus}
-          .tracker_epaper_edition=${trackerEpaperEdition}
-          .metered_wall_balance=${meteredWallBalance}
-          .isLogin=${isLogin}
-          .isWithHeader=${isWithHeader}
-          .swgEnable=${swgEnable}
-          .textHeader=${textHeader}
-          .userGuid=${userGuid}
-          .tracker_subscription_status=${trackerSubscriptionStatus}
-        >
-        </kompasid-paywall>
-        <div class="video">
-          <kompasid-paywall-video
+          <kompasid-freewall
             .isLogin=${isLogin}
-            .type=${videoPaywallType}
+            .type=${freewallType}
+            .head_copy_expand=${headCopyExpand}
+            .head_copy_collapse=${headCopyCollapse}
+            .expand=${expand}
+            .id=${"freewall"}
             .paywall_location=${paywallLocation}
-            .paywall_subscription_package=${paywallSubscriptionPackage}
             .paywall_subscription_id=${paywallSubscriptionId}
             .paywall_subscription_price=${paywallSubscriptionPrice}
             .paywall_position=${paywallPosition}
             .tracker_page_type=${trackerPageType}
+            .tracker_page_title=${trackerPageTitle}
             .tracker_content_id=${trackerContentId}
             .tracker_content_type=${trackerContentType}
             .tracker_content_title=${trackerContentTitle}
             .tracker_content_categories=${trackerContentCategories}
             .tracker_user_type=${trackerUserType}
-            .tracker_subscription_status=${trackerSubscriptionStatus}
             .tracker_page_domain=${trackerPageDomain}
-            .metered_wall_type=${meteredWallType}
+            .tracker_metered_wall_type=${meteredWallType}
+            .tracker_subscription_status=${trackerSubscriptionStatus}
             .tracker_metered_wall_balance=${trackerMeteredWallBalance}
           >
-        </kompasid-paywall-video>
-        </div>
-        <kompasid-footer></kompasid-footer>
-        <kompasid-metered-paywall></kompasid-metered-paywall>
-      `,
-      document.querySelector('#demo')
-    );
-    window.dataLayer = window.dataLayer || [];
-  </script>
-</body>
+          </kompasid-freewall>
+        `,
+        document.querySelector('#demo')
+      )
+      window.dataLayer = window.dataLayer || []
+    </script>
+  </body>
 </html>

package/dist/assets/font-awesome.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 export declare const faArrowLeft: import("lit").TemplateResult<1>;
-export declare const faCheck: import("lit").TemplateResult<1>;
+export declare const faCheck: () => import("lit").TemplateResult<1>;

package/dist/assets/font-awesome.js CHANGED Viewed

@@ -8,13 +8,16 @@ export const faArrowLeft = html `<svg
     d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
   />
 </svg>`;
-export const faCheck = html `<svg
+export const faCheck = () => html `<svg
+  width="17"
+  height="16"
+  viewBox="0 0 17 16"
+  fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
 >
-  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
   <path
-    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+    d="M13.3438 5.93749C13.3438 6.10415 13.2854 6.24582 13.1687 6.36249L8.64375 10.8875L7.79375 11.7375C7.67708 11.8542 7.53542 11.9125 7.36875 11.9125C7.20208 11.9125 7.06042 11.8542 6.94375 11.7375L6.09375 10.8875L3.83125 8.62499C3.71458 8.50832 3.65625 8.36665 3.65625 8.19999C3.65625 8.03332 3.71458 7.89165 3.83125 7.77499L4.68125 6.92499C4.79792 6.80832 4.93958 6.74999 5.10625 6.74999C5.27292 6.74999 5.41458 6.80832 5.53125 6.92499L7.36875 8.76874L11.4688 4.66249C11.5854 4.54582 11.7271 4.48749 11.8938 4.48749C12.0604 4.48749 12.2021 4.54582 12.3188 4.66249L13.1687 5.51249C13.2854 5.62915 13.3438 5.77082 13.3438 5.93749Z"
+    fill="#50A718"
   />
 </svg>`;
 //# sourceMappingURL=font-awesome.js.map

package/dist/assets/font-awesome.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"font-awesome.js","sourceRoot":"","sources":["../../assets/font-awesome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;;;OAQxB,CAAA;AAEP,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAA~~;;;;;;;;OAQpB~~,CAAA","sourcesContent":["import { html } from 'lit'\n\nexport const faArrowLeft = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 448 512\"\n>\n <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->\n <path\n d=\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\"\n />\n</svg>`\n\nexport const faCheck = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n ~~viewBox~~=\"0 0 ~~512~~ ~~512\"\n>\n <!--~~ ~~Font~~ ~~Awesome~~ ~~Free~~ 5.15.3 by ~~@fontawesome~~ - ~~https://fontawesome~~.~~com~~ ~~License~~ - ~~https://fontawesome~~.~~com/license/free~~ ~~(Icons:~~ CC BY 4.0, ~~Fonts:~~ ~~SIL~~ ~~OFL~~ 1.1, ~~Code:~~ ~~MIT~~ ~~License)~~ ~~-->\n <path\n d=\"M173~~.~~898~~ ~~439~~.~~404l-166~~.~~4-166~~.~~4c-9~~.~~997-9~~.~~997-9~~.~~997-26~~.~~206~~ ~~0-36~~.~~204l36~~.~~203-36~~.~~204c9~~.~~997-9.998~~ 26.~~207-9~~.~~998~~ 36.~~204~~ ~~0L192~~ ~~312~~.69 ~~432~~.~~095~~ 72.~~596c9~~.~~997-9~~.~~997~~ 26.~~207-9~~.~~997~~ 36.~~204~~ ~~0l36~~.~~203~~ 36.~~204c9~~.~~997~~ 9.~~997~~ 9.~~997~~ 26.~~206~~ 0 36.~~204l-294~~.4 ~~294~~.~~401c-9~~.~~998~~ 9.~~997-26~~.~~207~~ 9.~~997-36~~.~~204-.001z~~\"\n />\n</svg>`\n"]}
1	+ {"version":3,"file":"font-awesome.js","sourceRoot":"","sources":["../../assets/font-awesome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;;;OAQxB,CAAA;AAEP,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;OAW1B,CAAA","sourcesContent":["import { html } from 'lit'\n\nexport const faArrowLeft = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 448 512\"\n>\n <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->\n <path\n d=\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\"\n />\n</svg>`\n\nexport const faCheck = () => html`<svg\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M13.3438 5.93749C13.3438 6.10415 13.2854 6.24582 13.1687 6.36249L8.64375 10.8875L7.79375 11.7375C7.67708 11.8542 7.53542 11.9125 7.36875 11.9125C7.20208 11.9125 7.06042 11.8542 6.94375 11.7375L6.09375 10.8875L3.83125 8.62499C3.71458 8.50832 3.65625 8.36665 3.65625 8.19999C3.65625 8.03332 3.71458 7.89165 3.83125 7.77499L4.68125 6.92499C4.79792 6.80832 4.93958 6.74999 5.10625 6.74999C5.27292 6.74999 5.41458 6.80832 5.53125 6.92499L7.36875 8.76874L11.4688 4.66249C11.5854 4.54582 11.7271 4.48749 11.8938 4.48749C12.0604 4.48749 12.2021 4.54582 12.3188 4.66249L13.1687 5.51249C13.2854 5.62915 13.3438 5.77082 13.3438 5.93749Z\"\n fill=\"#50A718\"\n />\n</svg>`\n"]}

package/dist/src/components/kompasid-freewall/KompasFreewall.d.ts ADDED Viewed

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import '../kompasid-freewall-head/KompasFreewallHead.js';
+import '../kompasid-freewall-body/KompasFreewallBody.js';
+export declare class KompasFreewall extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * property isLogin untuk menghandle apakah user sudah login atau belum
+     * property type untuk menghandle tipe freewall
+     * property head_copy_expand to update copy header when expand
+     * property head_copy_collapse to update copy header when collapse
+     * property expand to handle expand/collapse
+     * property paywall_location is the location where user encounter the paywall
+     * property paywall_subscription_package is the name of the subscription package viewed by user
+     * property paywall_subscription_id is the ID of the subscription package viewed by user
+     * property paywall_subscription_price is the price of the subscription package viewed by user
+     * property paywall_position is the position of the subscription package viewed by user
+     * property tracker_page_type is the type of the page
+     * property tracker_page_title is the title of the page
+     * property tracker_content_id is the ID of article (slug)
+     * property content_title is the title of article
+     * property tracker_content_categories is the category of the content
+     * property tracker_content_type is to decide whether it's free article or paid article
+     * property tracker_user_type is the type of user based on their subscription
+     * property tracker_subscription_status is the status of their subscription
+     * property tracker_page_domain is the page domain
+     * property tracker_metered_wall_type is the type of metered wall
+     * property tracker_metered_wall_balance is the balance of their metered wall
+     */
+    isLogin: boolean;
+    type: 'article' | 'landing_page';
+    head_copy_expand: string;
+    head_copy_collapse: string;
+    expand: boolean;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: number;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_page_title: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    showPackage: {
+        duration: number;
+        durationType: number;
+        id: string;
+        link: string;
+        price: number;
+        position: number;
+        title: string;
+        referrer: string;
+    };
+    /**
+     * State
+     */
+    private isExpand;
+    private packageData;
+    /**
+     * Getter
+     */
+    get isArticle(): boolean;
+    /**
+     * Data Layer
+     */
+    private sendDataLayer;
+    private sendDataLayerPaywallViewed;
+    private sendDataLayerSubscribeButtonClicked;
+    /**
+     * Logic Function
+     */
+    private toggleExpand;
+    private onSubscriptionClick;
+    /**
+     * Lifecycle
+     */
+    connectedCallback(): Promise<void>;
+    /**
+     * Render Statement
+     */
+    render(): import("lit").TemplateResult<1>;
+}