npm - @kompasid/lit-web-components - Versions diffs - 0.7.5 → 0.7.7 - Mend

@kompasid/lit-web-components 0.7.5 → 0.7.7

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 (28) hide show

package/dist/src/components/kompasid-footer/KompasFooter.js CHANGED Viewed

@@ -23,7 +23,7 @@ let KompasFooter = class KompasFooter extends LitElement {
         }
     }
     async fetchFooter() {
-        const response = await fetch('https://d3w4qaq4xm1ncv.cloudfront.net/assets/json/footer/ApiFooterDefault.json');
+        const response = await fetch('https://cdn-www.kompas.id/assets/json/footer/ApiFooterDefault.json');
         const jsonResponse = await response.json();
         this.footer = jsonResponse;
     }
@@ -53,7 +53,7 @@ let KompasFooter = class KompasFooter extends LitElement {
                       href="${brand.permalink}"
                     >
                       <img
-                        src="https://d3w4qaq4xm1ncv.cloudfront.net/assets/img/logos/kompas-logo-footer.svg"
+                        src="https://cdn-www.kompas.id/assets/img/logos/kompas-logo-footer.svg"
                         height="${brand.image.height}"
                         width="${brand.image.width}"
                         alt="${brand.image.alt}"
@@ -70,7 +70,7 @@ let KompasFooter = class KompasFooter extends LitElement {
                     target="_blank"
                   >
                     <img
-                      src="https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/ios-badge.png"
+                      src="https://cdn-www.kompas.id/halaman-unduh/image/ios-badge.png"
                       class="h-10 w-[120px]"
                       alt="Logo iOS"
                   /></a>
@@ -80,7 +80,7 @@ let KompasFooter = class KompasFooter extends LitElement {
                     target="_blank"
                   >
                     <img
-                      src="https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/google-play-badge.png"
+                      src="https://cdn-www.kompas.id/halaman-unduh/image/google-play-badge.png"
                       class="h-10 w-[138px]"
                       alt="Logo Android"
                   /></a>

package/dist/src/components/kompasid-footer/KompasFooter.js.map CHANGED Viewed

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

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

@@ -79,7 +79,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
         this.dataLayeronPerbaruiLanggananButton();
         const originHost = encodeURIComponent(window.location.href);
         this.sendGtmEvent('subscribe_button_clicked');
-        window.open(`${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=grace_period_paywall`);
+        window.open(`${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
     }
     getGtmParams() {
         return {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property 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 tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n /\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = 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\n /\n State\n */\n @state() private maxGracePeriod = 7\n @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n langganan. Segera perbarui paket langganan untuk tetap mengakses\n konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <b class=\"text-orange-500\"\n >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=grace_period_paywall`\n )\n }\n\n private getGtmParams(): Record<string, any> {\n return {\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 page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'GP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n }\n\n private sendGtmEvent(event: string) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(),\n },\n ]\n } else {\n gtmParams = { ...gtmParams, ...this.getGtmParams() }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n return html`\n <div\n class=\"${this.isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n >\n <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n ${this.getCountdownGracePeriod()}\n </div>\n ${!this.isShowButton\n ? html`\n <div\n class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n >\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n >\n Perbarui Langganan\n </button>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property 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 tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n /\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = 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\n /\n State\n */\n @state() private maxGracePeriod = 7\n @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n langganan. Segera perbarui paket langganan untuk tetap mengakses\n konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <b class=\"text-orange-500\"\n >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n )\n }\n\n private getGtmParams(): Record<string, any> {\n return {\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 page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'GP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n }\n\n private sendGtmEvent(event: string) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(),\n },\n ]\n } else {\n gtmParams = { ...gtmParams, ...this.getGtmParams() }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n return html`\n <div\n class=\"${this.isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n >\n <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n ${this.getCountdownGracePeriod()}\n </div>\n ${!this.isShowButton\n ? html`\n <div\n class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n >\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n >\n Perbarui Langganan\n </button>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js CHANGED Viewed

@@ -47,7 +47,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
         <div>
           <img
             class="header-account--membership-icon h-2.5 w-2.5"
-            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-royal-blue-60.svg"
+            src="https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg"
             alt="membership-crown-icon"
           />
         </div>

package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header /\n / width /\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n / Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: Number }) notificationTotal = 0\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private account() {\n const notificationIndicator = () => {\n if (!this.notificationTotal) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-2.5 w-2.5\"\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative\"\n >\n <span class=\"capitalize text-xxs text-blue-600 font-bold\"\n >${this.getInitialUserName()}</span\n >\n ${notificationIndicator()} ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .notification-total=${this.notificationTotal}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header /\n / width /\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n / Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: Number }) notificationTotal = 0\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private account() {\n const notificationIndicator = () => {\n if (!this.notificationTotal) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-2.5 w-2.5\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative\"\n >\n <span class=\"capitalize text-xxs text-blue-600 font-bold\"\n >${this.getInitialUserName()}</span\n >\n ${notificationIndicator()} ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .notification-total=${this.notificationTotal}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}

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

@@ -79,7 +79,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
         <div>
           <img
             class="header-account--membership-icon"
-            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-blue-10.svg"
+            src="https://cdn-www.kompas.id/global-header/crown-blue-10.svg"
             alt="membership-crown-icon"
           />
         </div>

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

	@@ -1 +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) {\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"]}
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) {\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://cdn-www.kompas.id/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 CHANGED Viewed

@@ -213,7 +213,7 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         >
           <img
             alt="metered-wall-register"
-            src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
+            src="https://cdn-www.kompas.id/paywall-asset/paywall_ilustrasi3-03_1.png"
           />
         </div>
         <button
@@ -295,7 +295,7 @@ let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitEleme
         this.checkIsDesktop();
     }
     async loadData() {
-        const req = await fetch(`https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`);
+        const req = await fetch(`https://cdn-www.kompas.id/assets/register_wall.json`);
         if (req.status !== 200) {
             throw new Error(`${req.status} Ada galat saat memproses permintaan.`);
         }

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

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

@@ -224,7 +224,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
     }
     async getPaywallData() {
         try {
-            const response = await fetch('https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/web-component/paywall.json');
+            const response = await fetch('https://cdn-www.kompas.id/web-component/paywall.json');
             const json = await response.json();
             this.paywallData = {
                 ...this.mockResult,