@kompasid/lit-web-components 0.3.0 → 0.4.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.
- package/.github/workflows/npm-publish.yml +2 -2
- package/demo/index.html +12 -12
- package/dist/src/components/{kompas-footer → kompasid-footer}/KompasFooter.js +16 -4
- package/dist/src/components/kompasid-footer/KompasFooter.js.map +1 -0
- package/dist/src/components/kompasid-footer/types.js.map +1 -0
- package/dist/src/components/{kompas-metered-paywall → kompasid-metered-paywall}/KompasMeteredPaywall.js +3 -3
- package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js.map +1 -0
- package/dist/src/components/{kompas-paywall → kompasid-paywall}/KompasPaywall.d.ts +3 -3
- package/dist/src/components/{kompas-paywall → kompasid-paywall}/KompasPaywall.js +35 -14
- package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -0
- package/dist/src/components/kompasid-paywall/types.js.map +1 -0
- package/dist/src/components/{kompas-paywall-banner-registration → kompasid-paywall-banner-registration}/KompasPaywallBannerRegistration.d.ts +1 -1
- package/dist/src/components/{kompas-paywall-banner-registration → kompasid-paywall-banner-registration}/KompasPaywallBannerRegistration.js +1 -1
- package/dist/src/components/kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js.map +1 -0
- package/dist/src/components/{kompas-paywall-body → kompasid-paywall-body}/KompasPaywallBody.d.ts +2 -2
- package/dist/src/components/{kompas-paywall-body → kompasid-paywall-body}/KompasPaywallBody.js +52 -42
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -0
- package/dist/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/KompasPaywallInformationHeader.js +1 -1
- package/dist/src/components/kompasid-paywall-information-header/KompasPaywallInformationHeader.js.map +1 -0
- package/dist/src/components/{kompas-paywall-video → kompasid-paywall-video}/KompasPaywallVideo.js +1 -1
- package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js.map +1 -0
- package/dist/src/index.d.ts +4 -4
- package/dist/src/index.js +4 -4
- package/dist/src/index.js.map +1 -1
- package/dist/tailwind/tailwind.js +1369 -1343
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/{kompas-footer → kompasid-footer}/KompasFooter.ts +16 -4
- package/src/components/{kompas-metered-paywall → kompasid-metered-paywall}/KompasMeteredPaywall.ts +3 -3
- package/src/components/{kompas-metered-paywall → kompasid-metered-paywall}/readme.md +1 -1
- package/src/components/{kompas-paywall → kompasid-paywall}/KompasPaywall.ts +35 -14
- package/src/components/{kompas-paywall → kompasid-paywall}/readme.md +8 -8
- package/src/components/{kompas-paywall-banner-registration → kompasid-paywall-banner-registration}/KompasPaywallBannerRegistration.ts +2 -2
- package/src/components/{kompas-paywall-banner-registration → kompasid-paywall-banner-registration}/readme.md +4 -4
- package/src/components/{kompas-paywall-body → kompasid-paywall-body}/KompasPaywallBody.ts +14 -4
- package/src/components/{kompas-paywall-body → kompasid-paywall-body}/readme.md +4 -4
- package/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/KompasPaywallInformationHeader.ts +1 -1
- package/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/readme.md +4 -4
- package/src/components/{kompas-paywall-video → kompasid-paywall-video}/KompasPaywallVideo.ts +1 -1
- package/src/components/{kompas-paywall-video → kompasid-paywall-video}/readme.md +3 -3
- package/src/index.ts +4 -4
- package/tailwind/tailwind.css +10 -0
- package/tailwind/tailwind.ts +1369 -1344
- package/dist/src/components/kompas-footer/KompasFooter.js.map +0 -1
- package/dist/src/components/kompas-footer/types.js.map +0 -1
- package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js.map +0 -1
- package/dist/src/components/kompas-paywall/KompasPaywall.js.map +0 -1
- package/dist/src/components/kompas-paywall/types.js.map +0 -1
- package/dist/src/components/kompas-paywall-banner-registration/KompasPaywallBannerRegistration.js.map +0 -1
- package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js.map +0 -1
- package/dist/src/components/kompas-paywall-information-header/KompasPaywallInformationHeader.js.map +0 -1
- package/dist/src/components/kompas-paywall-video/KompasPaywallVideo.js.map +0 -1
- /package/dist/src/components/{kompas-footer → kompasid-footer}/KompasFooter.d.ts +0 -0
- /package/dist/src/components/{kompas-footer → kompasid-footer}/types.d.ts +0 -0
- /package/dist/src/components/{kompas-footer → kompasid-footer}/types.js +0 -0
- /package/dist/src/components/{kompas-metered-paywall → kompasid-metered-paywall}/KompasMeteredPaywall.d.ts +0 -0
- /package/dist/src/components/{kompas-paywall → kompasid-paywall}/types.d.ts +0 -0
- /package/dist/src/components/{kompas-paywall → kompasid-paywall}/types.js +0 -0
- /package/dist/src/components/{kompas-paywall-information-header → kompasid-paywall-information-header}/KompasPaywallInformationHeader.d.ts +0 -0
- /package/dist/src/components/{kompas-paywall-video → kompasid-paywall-video}/KompasPaywallVideo.d.ts +0 -0
- /package/src/components/{kompas-footer → kompasid-footer}/types.ts +0 -0
- /package/src/components/{kompas-paywall → kompasid-paywall}/types.ts +0 -0
package/demo/index.html
CHANGED
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
|
|
48
48
|
<script type="module">
|
|
49
49
|
import { html, render } from 'lit';
|
|
50
|
-
import '../dist/src/components/
|
|
51
|
-
import '../dist/src/components/
|
|
52
|
-
import '../dist/src/components/
|
|
53
|
-
import '../dist/src/components/
|
|
50
|
+
import '../dist/src/components/kompasid-footer/KompasFooter.js'
|
|
51
|
+
import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
|
|
52
|
+
import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
|
|
53
|
+
import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
|
|
54
54
|
|
|
55
|
-
const type = '
|
|
55
|
+
const type = 'regular'
|
|
56
56
|
const theme=""
|
|
57
57
|
const paywallLocation = "Article Detail Page";
|
|
58
58
|
const paywallSubscriptionId = "testId";
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
const trackerEpaperEdition = "edition";
|
|
73
73
|
const meteredWallBalance = 0;
|
|
74
74
|
const isLogin = true;
|
|
75
|
-
const isWithHeader =
|
|
75
|
+
const isWithHeader = false;
|
|
76
76
|
const textHeader = "this is message for header information";
|
|
77
77
|
const userGuid = "111000";
|
|
78
78
|
const trackerSubscriptionStatus = "register";
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
|
|
82
82
|
render(
|
|
83
83
|
html`
|
|
84
|
-
<
|
|
84
|
+
<kompasid-paywall
|
|
85
85
|
.type=${type}
|
|
86
86
|
.theme=${theme}
|
|
87
87
|
.paywall_location=${paywallLocation}
|
|
@@ -107,9 +107,9 @@
|
|
|
107
107
|
.userGuid=${userGuid}
|
|
108
108
|
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
109
109
|
>
|
|
110
|
-
</
|
|
110
|
+
</kompasid-paywall>
|
|
111
111
|
<div class="video">
|
|
112
|
-
<
|
|
112
|
+
<kompasid-paywall-video
|
|
113
113
|
.paywall_location=${paywallLocation}
|
|
114
114
|
.paywall_subscription_package=${paywallSubscriptionPackage}
|
|
115
115
|
.paywall_subscription_id=${paywallSubscriptionId}
|
|
@@ -126,10 +126,10 @@
|
|
|
126
126
|
.metered_wall_type=${meteredWallType}
|
|
127
127
|
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
128
128
|
>
|
|
129
|
-
</
|
|
129
|
+
</kompasid-paywall-video>
|
|
130
130
|
</div>
|
|
131
|
-
<
|
|
132
|
-
<
|
|
131
|
+
<kompasid-footer></kompasid-footer>
|
|
132
|
+
<kompasid-metered-paywall></kompasid-metered-paywall>
|
|
133
133
|
`,
|
|
134
134
|
document.querySelector('#demo')
|
|
135
135
|
);
|
|
@@ -102,7 +102,9 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
102
102
|
>
|
|
103
103
|
${address.title}
|
|
104
104
|
</div>
|
|
105
|
-
<div
|
|
105
|
+
<div
|
|
106
|
+
class="leading-normal pb-3 text-sm ${secondaryTextColor}"
|
|
107
|
+
>
|
|
106
108
|
${address.text}
|
|
107
109
|
</div>
|
|
108
110
|
<div class="flex flex-row">
|
|
@@ -138,6 +140,7 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
138
140
|
<a
|
|
139
141
|
class="leading-normal text-sm ${secondaryTextColor}"
|
|
140
142
|
href="${prod.permalink}"
|
|
143
|
+
target="_blank"
|
|
141
144
|
>
|
|
142
145
|
<div class="flex flex-col pb-4 cursor-pointer">
|
|
143
146
|
${prod.text}
|
|
@@ -167,6 +170,7 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
167
170
|
<a
|
|
168
171
|
class="font-bold text-sm w-full cursor-pointer"
|
|
169
172
|
href="${contact.action}"
|
|
173
|
+
target="_blank"
|
|
170
174
|
>
|
|
171
175
|
<span class="text-grey-50"> ${contact.text} </span>
|
|
172
176
|
</a>
|
|
@@ -183,6 +187,7 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
183
187
|
<a
|
|
184
188
|
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"
|
|
185
189
|
href="${sosmed.url}"
|
|
190
|
+
target="_blank"
|
|
186
191
|
>
|
|
187
192
|
<div
|
|
188
193
|
class="h-5 flex justify-center items-center rounded text-white w-5 ${sosmed.color}"
|
|
@@ -191,7 +196,9 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
191
196
|
${unsafeSVG(getFontAwesomeIcon(sosmed.icon[0], sosmed.icon[1], 12, 12))}
|
|
192
197
|
</div>
|
|
193
198
|
</div>
|
|
194
|
-
<div
|
|
199
|
+
<div
|
|
200
|
+
class="leading-normal pl-2 text-sm ${secondaryTextColor}"
|
|
201
|
+
>
|
|
195
202
|
${sosmed.name}
|
|
196
203
|
</div>
|
|
197
204
|
</a>
|
|
@@ -214,6 +221,7 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
214
221
|
${Object.values(this.footer.universal.itemsLeft).map(universal => html ` <a
|
|
215
222
|
class="flex justify-center items-center"
|
|
216
223
|
href="${universal.url}"
|
|
224
|
+
target="_blank"
|
|
217
225
|
>
|
|
218
226
|
<div class="pb-2 lg:pb-0 text-white cursor-pointer">
|
|
219
227
|
${universal.name}
|
|
@@ -223,7 +231,11 @@ let KompasFooter = class KompasFooter extends LitElement {
|
|
|
223
231
|
</div>
|
|
224
232
|
<div class="flex flex-wrap shrink-0">
|
|
225
233
|
${Object.values(this.footer.universal.itemsRight).map(universal => html `
|
|
226
|
-
<a
|
|
234
|
+
<a
|
|
235
|
+
class="flex cursor-pointer"
|
|
236
|
+
href="${universal.url}"
|
|
237
|
+
target="_blank"
|
|
238
|
+
>
|
|
227
239
|
<div class="text-white flex items-center">
|
|
228
240
|
${universal.name}
|
|
229
241
|
<span class="mx-2 text-grey-50">·</span>
|
|
@@ -298,7 +310,7 @@ __decorate([
|
|
|
298
310
|
property({ type: Boolean })
|
|
299
311
|
], KompasFooter.prototype, "isDark", void 0);
|
|
300
312
|
KompasFooter = __decorate([
|
|
301
|
-
customElement('
|
|
313
|
+
customElement('kompasid-footer')
|
|
302
314
|
], KompasFooter);
|
|
303
315
|
export { KompasFooter };
|
|
304
316
|
//# sourceMappingURL=KompasFooter.js.map
|
|
@@ -0,0 +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'\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 connectedCallback() {\n super.connectedCallback()\n\n this.addStylesheetToHead()\n this.initializeFooter()\n }\n\n private addStylesheetToHead() {\n const link = document.createElement('link')\n link.rel = 'stylesheet'\n link.href =\n 'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'\n document.head.appendChild(link)\n }\n\n private initializeFooter() {\n if (this.footer === undefined || this.footer === null) {\n this.fetchFooter()\n }\n }\n\n async fetchFooter() {\n const response = await fetch(\n 'https://d3w4qaq4xm1ncv.cloudfront.net/assets/json/footer/ApiFooterDefault.json'\n )\n const jsonResponse = await response.json()\n this.footer = jsonResponse\n }\n\n getYear() {\n return new Date().getFullYear()\n }\n\n render() {\n if (this.footer) {\n const { isDark } = this\n const bgClass = isDark ? 'bg-[#2C2C2C]' : 'bg-transparent'\n const primaryTextColor = isDark ? 'text-[#FFFFFF]' : ''\n const secondaryTextColor = isDark ? 'text-[#FFFFFF]' : 'text-grey-60'\n const itemTextColor = isDark ? 'text-[#FFFFFF]' : 'text-[#00559a]'\n\n return html`\n <div\n class=\"border-t border-grey-30 mx-auto w-full md:px-20 px-4 ${bgClass} ${primaryTextColor}\"\n >\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"md:px-0 pb-6 lg:pb-0 mx-auto w-full\">\n <div\n class=\"grid grid-cols-4 lg:grid-cols-12 gap-6 lg:gap-8 lg:justify-between pt-10 pb-8 lg:py-10\"\n >\n ${Object.values(this.footer.brands.itemsLeft).map(\n brand => html`\n <a\n class=\"col-span-4 lg:col-span-2 flex gap-4 cursor-pointer\"\n title=\"Kompas.id\"\n href=\"${brand.permalink}\"\n >\n <img\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/assets/img/logos/kompas-logo-footer.svg\"\n height=\"${brand.image.height}\"\n width=\"${brand.image.width}\"\n alt=\"${brand.image.alt}\"\n class=\"w-auto h-10 lg:mx-auto\"\n />\n </a>\n `\n )}\n <div\n class=\"col-span-4 lg:col-start-10 lg:col-span-3 gap-4 flex lg:justify-end mx-auto w-full\"\n >\n <a\n class=\"cursor-pointer\"\n href=\"${this.footer.brands.itemsRight[0].permalink}\"\n target=\"_blank\"\n >\n <img\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/ios-badge.png\"\n class=\"h-10 w-[120px]\"\n alt=\"Logo iOS\"\n /></a>\n <a\n class=\"cursor-pointer\"\n href=\"${this.footer.brands.itemsRight[1].permalink}\"\n target=\"_blank\"\n >\n <img\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/google-play-badge.png\"\n class=\"h-10 w-[138px]\"\n alt=\"Logo Android\"\n /></a>\n </div>\n </div>\n </div>\n <div class=\"grid grid-cols-4 lg:grid-cols-12 gap-8 pb-2\">\n <div\n class=\"col-span-4 lg:col-span-3 flex flex-row lg:flex-col gap-8 lg:gap-0\"\n >\n ${Object.values(this.footer.address.items).map(\n address => html` <div class=\"lg:pb-6\">\n <div\n class=\"font-bold leading-none pb-3 text-sm ${itemTextColor}\"\n >\n ${address.title}\n </div>\n <div\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-footer/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Image {\n alt: string\n height: number\n url: string\n width: number\n}\n\nexport interface Item {\n image: Image\n permalink: string\n name: string\n url: string\n}\n\nexport interface Section<T> {\n items: T[]\n title?: string\n}\n\nexport interface Phones {\n number: number\n}\n\nexport interface Sites {\n text: string\n permalink: string\n}\n\nexport interface Items {\n phones: Phones\n title: string\n text: string\n sites: Sites\n action: string\n icon: string[]\n label: string\n color: string\n name: string\n url: string\n}\n\nexport interface Universal {\n itemsLeft: Item[]\n itemsRight: Item[]\n}\n\nexport interface Footer {\n brands: Universal\n address: Section<Items>\n products: Section<Items>\n contacts: Section<Items>\n sosmed: Section<Items>\n universal: Universal\n}\n"]}
|
|
@@ -90,7 +90,7 @@ let KompasMeteredPaywall = class KompasMeteredPaywall extends LitElement {
|
|
|
90
90
|
subscription_status: this.tracker_subscription_status,
|
|
91
91
|
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
92
92
|
metered_wall_type: this.tracker_metered_wall_type || 'MP',
|
|
93
|
-
metered_wall_balance:
|
|
93
|
+
metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
|
|
94
94
|
});
|
|
95
95
|
}
|
|
96
96
|
dataLayeronMeteredPaywall() {
|
|
@@ -110,7 +110,7 @@ let KompasMeteredPaywall = class KompasMeteredPaywall extends LitElement {
|
|
|
110
110
|
subscription_status: this.tracker_subscription_status,
|
|
111
111
|
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
112
112
|
metered_wall_type: this.tracker_metered_wall_type || 'MP',
|
|
113
|
-
metered_wall_balance:
|
|
113
|
+
metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
|
|
114
114
|
});
|
|
115
115
|
}
|
|
116
116
|
render() {
|
|
@@ -219,7 +219,7 @@ __decorate([
|
|
|
219
219
|
property({ type: Number })
|
|
220
220
|
], KompasMeteredPaywall.prototype, "tracker_metered_wall_balance", void 0);
|
|
221
221
|
KompasMeteredPaywall = __decorate([
|
|
222
|
-
customElement('
|
|
222
|
+
customElement('kompasid-metered-paywall')
|
|
223
223
|
], KompasMeteredPaywall);
|
|
224
224
|
export { KompasMeteredPaywall };
|
|
225
225
|
//# sourceMappingURL=KompasMeteredPaywall.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KompasMeteredPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall/KompasMeteredPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-metered-paywall')\nexport class KompasMeteredPaywall extends LitElement {\n static styles = [\n css`\n .text-transition {\n width: 100%;\n height: 5rem;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .icon {\n height: 1rem;\n color: #48bb78;\n }\n\n .icon.lg {\n height: 1.5rem;\n }\n\n .icon.lg svg {\n height: 1.5rem;\n }\n `,\n TWStyles,\n ]\n\n @state() maxQuota: number = 3\n\n @state() subscriptionUrl: string = 'https://www.kompas.id/berlangganan'\n /**\n * Props\n */\n /**\n * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of ther subscription package viewed by user\n * prop tracker_page_type = Type of the page\n * prop tracker_content_id = ID of article (slug)\n * prop tracker_content_type = Whether it's free article or paid article\n * prop tracker_content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop tracker_user_type = Type of user based on their subscription\n * prop tracker_subscription_status = Status of their subscription\n * prop tracker_page_domain = Page Domain\n * prop tracker_metered_wall_type = The type of Metered Wall\n * prop tracker_epaper_edition = The edition of epaper viewed by user\n * prop tracker_metered_wall_balance = The balance of their metered wall\n */\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n private getCountdownArticle() {\n const getCountdown = this.countdownArticle\n const { maxQuota } = this\n\n if (getCountdown > 0 && getCountdown < maxQuota) {\n return html`\n <p>\n Anda memiliki sisa\n <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium\n gratis bulan ini. Langganan untuk akses tanpa batas\n </p>\n `\n }\n return html`\n <p>\n Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> Langganan\n untuk akses tanpa batas\n </p>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.dataLayeronMeteredPaywall()\n }\n\n private redirectToBerlangganan() {\n this.dataLayeronLanggananButton()\n window.location.href = this.subscriptionUrl\n }\n\n private dataLayeronLanggananButton() {\n window.dataLayer.push({\n event: 'subscribe_button_clicked',\n paywall_location: this.paywall_location || '',\n paywall_subscription_package: this.paywall_subscription_package || '',\n paywall_subscription_id: this.paywall_subscription_id || '',\n paywall_subscription_price: this.paywall_subscription_price || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: this.maxQuota - this.countdownArticle + 1,\n })\n }\n\n private dataLayeronMeteredPaywall() {\n window.dataLayer.push({\n event: 'paywall_viewed',\n paywall_location: this.paywall_location || '',\n paywall_subscription_package: this.paywall_subscription_package || '',\n paywall_subscription_id: this.paywall_subscription_id || '',\n paywall_subscription_price: this.paywall_subscription_price || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: this.maxQuota - this.countdownArticle + 1,\n })\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0\"\n >\n <div class=\"text-grey-600 text-sm md:text-lg self-center text-left\">\n ${this.getCountdownArticle()}\n </div>\n <div class=\"self-center\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl\"\n >\n Langganan\n </button>\n </div>\n </div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { PaywallProduct } from './types.js';
|
|
3
|
-
import '../
|
|
4
|
-
import '../
|
|
5
|
-
import '../
|
|
3
|
+
import '../kompasid-paywall-body/KompasPaywallBody.js';
|
|
4
|
+
import '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js';
|
|
5
|
+
import '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js';
|
|
6
6
|
export declare class KompasPaywall extends LitElement {
|
|
7
7
|
static styles: import("lit").CSSResult[];
|
|
8
8
|
/**
|
|
@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { html, css, LitElement } from 'lit';
|
|
3
3
|
import { property, state, customElement } from 'lit/decorators.js';
|
|
4
4
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
5
|
-
import '../
|
|
6
|
-
import '../
|
|
7
|
-
import '../
|
|
5
|
+
import '../kompasid-paywall-body/KompasPaywallBody.js';
|
|
6
|
+
import '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js';
|
|
7
|
+
import '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js';
|
|
8
8
|
let KompasPaywall = class KompasPaywall extends LitElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
@@ -251,7 +251,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
251
251
|
`;
|
|
252
252
|
}
|
|
253
253
|
renderEpaperPaywallSection() {
|
|
254
|
-
return html `<
|
|
254
|
+
return html `<kompasid-paywall-body
|
|
255
255
|
paywall_location=${this.paywall_location}
|
|
256
256
|
paywall_subscription_package=${this.paywall_subscription_package}
|
|
257
257
|
paywall_subscription_id=${this.paywall_subscription_id}
|
|
@@ -276,7 +276,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
276
276
|
subscriptionStatus=${this.subscriptionStatus}
|
|
277
277
|
userGuid=${this.userGuid}
|
|
278
278
|
theme=${this.theme}
|
|
279
|
-
></
|
|
279
|
+
></kompasid-paywall-body>`;
|
|
280
280
|
}
|
|
281
281
|
renderRegularPaywallSection() {
|
|
282
282
|
const defaultHeaderText = this.paywallData.informations.meterred.maxQuotaMessage;
|
|
@@ -290,11 +290,11 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
290
290
|
: 'bg-white'} items-center justify-center mx-4 md:mx-0"
|
|
291
291
|
>
|
|
292
292
|
<div class="flex flex-col w-full max-w-screen-md my-5">
|
|
293
|
-
<
|
|
293
|
+
<kompasid-paywall-information-header
|
|
294
294
|
text=${this.textHeader || defaultHeaderText}
|
|
295
295
|
theme=${this.theme}
|
|
296
|
-
></
|
|
297
|
-
<
|
|
296
|
+
></kompasid-paywall-information-header>
|
|
297
|
+
<kompasid-paywall-body
|
|
298
298
|
paywall_location=${this.paywall_location}
|
|
299
299
|
paywall_subscription_package=${this
|
|
300
300
|
.paywall_subscription_package}
|
|
@@ -321,7 +321,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
321
321
|
subscriptionStatus=${this.subscriptionStatus}
|
|
322
322
|
userGuid=${this.userGuid}
|
|
323
323
|
theme=${this.theme}
|
|
324
|
-
></
|
|
324
|
+
></kompasid-paywall-body>
|
|
325
325
|
</div>
|
|
326
326
|
</div>
|
|
327
327
|
</div>
|
|
@@ -336,11 +336,11 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
336
336
|
: 'bg-white'} items-center justify-center mx-4 md:mx-0"
|
|
337
337
|
>
|
|
338
338
|
<div class="flex flex-col w-full max-w-screen-md my-5">
|
|
339
|
-
<
|
|
339
|
+
<kompasid-paywall-banner-registration
|
|
340
340
|
.bannerData=${this.paywallData.informations.register}
|
|
341
341
|
theme=${this.theme}
|
|
342
|
-
></
|
|
343
|
-
<
|
|
342
|
+
></kompasid-paywall-banner-registration>
|
|
343
|
+
<kompasid-paywall-body
|
|
344
344
|
tracker_content_type=${this.tracker_content_type}
|
|
345
345
|
paywall_location=${this.paywall_location}
|
|
346
346
|
paywall_subscription_package=${this.paywall_subscription_package}
|
|
@@ -365,7 +365,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
365
365
|
subscriptionStatus=${this.subscriptionStatus}
|
|
366
366
|
userGuid=${this.userGuid}
|
|
367
367
|
theme=${this.theme}
|
|
368
|
-
></
|
|
368
|
+
></kompasid-paywall-body>
|
|
369
369
|
</div>
|
|
370
370
|
</div>
|
|
371
371
|
</div>
|
|
@@ -382,6 +382,27 @@ KompasPaywall.styles = [
|
|
|
382
382
|
:host {
|
|
383
383
|
font-family: 'PT Sans', sans-serif;
|
|
384
384
|
}
|
|
385
|
+
.transparent-linear {
|
|
386
|
+
background-image: -webkit-gradient(
|
|
387
|
+
linear,
|
|
388
|
+
left top,
|
|
389
|
+
left bottom,
|
|
390
|
+
from(hsla(0, 0%, 100%, 0)),
|
|
391
|
+
to(#fff)
|
|
392
|
+
);
|
|
393
|
+
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.transparent-linear-dark {
|
|
397
|
+
background-image: -webkit-gradient(
|
|
398
|
+
linear,
|
|
399
|
+
left top,
|
|
400
|
+
left bottom,
|
|
401
|
+
from(hsla(0, 0%, 18%, 0)),
|
|
402
|
+
to(#121212)
|
|
403
|
+
);
|
|
404
|
+
background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);
|
|
405
|
+
}
|
|
385
406
|
`,
|
|
386
407
|
TWStyles,
|
|
387
408
|
];
|
|
@@ -464,7 +485,7 @@ __decorate([
|
|
|
464
485
|
property({ type: String })
|
|
465
486
|
], KompasPaywall.prototype, "theme", void 0);
|
|
466
487
|
KompasPaywall = __decorate([
|
|
467
|
-
customElement('
|
|
488
|
+
customElement('kompasid-paywall')
|
|
468
489
|
], KompasPaywall);
|
|
469
490
|
export { KompasPaywall };
|
|
470
491
|
//# sourceMappingURL=KompasPaywall.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .transparent-linear {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 100%, 0)),\n to(#fff)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#121212)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property countdownArticle untuk menghandle count artikel\n * property type untuk menghandle tipe epaper\n * property isWithHeader untuk menghandle paywall information header\n * property textHeader digunakan sebagai text pada paywall information header\n * property paywallData untuk menghandle data paywall\n * property userGuid untuk menghandle user Guid\n * property subscriptionStatus untuk menghandle status subscription user\n * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n * property paywall_location = The location where user encounter the paywall\n * property paywall_subscription_package = The name of the subscription package viewed by user\n * property paywall_subscription_id = The ID of the subscription package viewed by user\n * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n * property paywall_position = The position of the subscription package viewed by user\n * property page_type = Type of the page\n * property content_id = ID of article (slug)\n * property content_type = Whether it's free article or paid article\n * property content_title = The title of article\n * property tracker_content_categories = The category of the content\n * property user_type = Type of user based on their subscription\n * property subscription_status = Status of their subscription\n * property page_domain = Page Domain\n * property metered_wall_type = The type of Metered Wall\n * property metered_wall_balance = The balance of their metered wall\n * property epaper_edition = The edition of epaper viewed by user\n * property theme = The theme of the paywall component\n */\n\n @state() private paywallData: PaywallProduct = {} as PaywallProduct\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'\n @property({ type: Boolean }) isWithHeader = false\n @property({ type: String }) textHeader = ''\n @property({ type: String }) userGuid = ''\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: Boolean }) swgEnable = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n @property({ type: String }) theme = ''\n\n mockResult: PaywallProduct = {\n informations: {\n title: 'Langganan untuk Lanjut Membaca',\n description: [\n 'Akses tak terbatas Kompas.id (web & app)',\n 'Berita digital tanpa iklan pop-up',\n '30 arsip terbaru ePaper Kompas',\n 'Artikel Opini eksklusif',\n ],\n register: {\n img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n label: 'Daftar Sekarang ',\n },\n meterred: {\n maxQuota: 5,\n label: 'Langganan',\n maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n url: 'https://kompas.id/berlangganan',\n },\n },\n packages: {\n title: 'Sekali bayar, tanpa perpanjang otomatis',\n memberships: [\n {\n title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',\n percentage: 40,\n price: 360000,\n discountPrice: 600000,\n periode: '1 Tahun',\n isHighlight: true,\n url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',\n },\n {\n title: 'Kompas Digital Premium 1 Bulan',\n percentage: 0,\n discountPrice: 0,\n price: 50000,\n periode: '1 Bulan',\n isHighlight: false,\n url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',\n },\n ],\n },\n payment: {\n desktop: [\n {\n name: 'gopay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n {\n name: 'dana',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n ],\n mobile: [\n {\n name: 'gopay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n ],\n ekstension: [\n {\n name: 'dana',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n ],\n },\n }\n\n get darkUrl() {\n return this.theme === 'dark' ? '-dark' : ''\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.paywallData = this.mockResult\n }\n\n private transitionBox() {\n return html`\n <div\n class=\"h-20 ${this.theme === 'dark'\n ? 'transparent-linear-dark'\n : 'transparent-linear'} -mt-24 z-0 w-full\"\n ></div>\n `\n }\n\n private renderEpaperPaywallSection() {\n return html`<kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n tracker_content_type=${this.tracker_content_type}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>`\n }\n\n private renderRegularPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-banner-registration\n .bannerData=${this.paywallData.informations.register}\n theme=${this.theme}\n ></kompasid-paywall-banner-registration>\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private selectorTypePaywall = (type: 'epaper' | 'reguler') => {\n switch (type) {\n case 'epaper':\n return this.renderEpaperPaywallSection()\n case 'reguler':\n return this.renderRegularPaywallSection()\n default:\n return this.renderRegularPaywallSection()\n }\n }\n\n render() {\n return html`\n <div class=\"relative w-full\">${this.selectorTypePaywall(this.type)}</div>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n title: string\n percentage: number\n price: number\n discountPrice: number\n periode: string\n isHighlight: boolean\n url: string\n}\nexport interface Metered {\n maxQuota: number\n label: string\n maxQuotaMessage: string\n url: string\n}\nexport interface PaymentImage {\n name: string\n link: string\n}\nexport interface Registration {\n img: string\n title: string\n subtitle: string\n label: string\n}\nexport interface Informations {\n title: string\n description: Array<string>\n register: {\n img: string\n title: string\n subtitle: string\n label: string\n }\n}\nexport interface Packages {\n title: string\n memberships: Array<Product>\n}\nexport interface PaywallProduct {\n informations: {\n title: string\n description: Array<string>\n register: Registration\n meterred: Metered\n }\n packages: Packages\n payment: {\n desktop: Array<PaymentImage>\n mobile: Array<PaymentImage>\n ekstension: Array<PaymentImage>\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { Registration } from '../
|
|
2
|
+
import { Registration } from '../kompasid-paywall/types.js';
|
|
3
3
|
export declare class KompasPaywallBannerRegistration extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
theme: string;
|
|
@@ -101,7 +101,7 @@ __decorate([
|
|
|
101
101
|
property({ type: Object })
|
|
102
102
|
], KompasPaywallBannerRegistration.prototype, "bannerData", void 0);
|
|
103
103
|
KompasPaywallBannerRegistration = __decorate([
|
|
104
|
-
customElement('
|
|
104
|
+
customElement('kompasid-paywall-banner-registration')
|
|
105
105
|
], KompasPaywallBannerRegistration);
|
|
106
106
|
export { KompasPaywallBannerRegistration };
|
|
107
107
|
//# sourceMappingURL=KompasPaywallBannerRegistration.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KompasPaywallBannerRegistration.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAG/C,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,UAAU;IAAxD;;QAGuB,UAAK,GAAG,EAAE,CAAA;QACV,eAAU,GAA6B,SAAS,CAAA;IAwF9E,CAAC;IAtFC,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,CAAA;IAC9B,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;QAC5C,MAAM,SAAS,GAAW,iCAAiC,CAAA;QAC3D,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QACnE,MAAM,iBAAiB,GAAW,GAAG,SAAS,SAAS,UAAU,EAAE,CAAA;QACnE,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iBAAiB,CAAA;IAC1C,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;QAC5C,MAAM,YAAY,GAAW,oCAAoC,CAAA;QACjE,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QACnE,MAAM,iBAAiB,GAAW,GAAG,YAAY,SAAS,UAAU,0DAA0D,CAAA;QAC9H,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,iBAAiB,CAAA;IAC1C,CAAC;IAEO,aAAa,CAAC,KAAa;QACjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,UAAU,EAAE;SACxB,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;QAClD,OAAO,IAAI,CAAA;;;;;;;;oBAQK,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,mCAAI,EAAE;;;;mDAIK,IAAI,CAAC,MAAM;YAChD,YAAY;;;;;kBAKR,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK;;;kBAGtB,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ;;;;;qBAKtB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;yCACX,IAAI,CAAC,MAAM;YACtC,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,YAAY;;;iCAGK,IAAI,CAAC,MAAM;YAC5B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,YAAY;;gBAEd,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK;;;;;;uBAMf,IAAI,CAAC,MAAM,IAAI,YAAY;;;uBAG3B,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;iCAClB,IAAI,CAAC,MAAM;YAC5B,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,eAAe;;;;;;;KAO5B,CAAA;IACH,CAAC;;AA1FM,sCAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,CAAA;AAEL;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAiD;AAJjE,+BAA+B;IAD3C,aAAa,CAAC,sCAAsC,CAAC;GACzC,+BAA+B,CA4F3C;SA5FY,+BAA+B","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Registration } from '../kompasid-paywall/types.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompasid-paywall-banner-registration')\nexport class KompasPaywallBannerRegistration extends LitElement {\n static styles = [css``, TWStyles]\n\n @property({ type: String }) theme = ''\n @property({ type: Object }) bannerData: Registration | undefined = undefined\n\n get isDark() {\n return this.theme === 'dark'\n }\n\n private redirectToLogin(): void {\n this.sendDataLayer('registrationOfferClick')\n const loginHost: string = 'https://account.kompas.id/login'\n const nextParams: string = encodeURIComponent(window.location.href)\n const directUrlRegister: string = `${loginHost}?next=${nextParams}`\n window.location.href = directUrlRegister\n }\n\n private redirectToRegister(): void {\n this.sendDataLayer('registrationOfferClick')\n const registerHost: string = 'https://account.kompas.id/register'\n const nextParams: string = encodeURIComponent(window.location.href)\n const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=hard_paywall`\n window.location.href = directUrlRegister\n }\n\n private sendDataLayer(value: string): void {\n window.dataLayer.push({\n event: value,\n interface: deviceType(),\n })\n }\n\n render() {\n this.sendDataLayer('registrationOfferimppression')\n return html`\n <div class=\"flex flex-col items-center my-5\">\n <div\n class=\"flex flex-col md:flex-row justify-between items-center w-full\"\n >\n <div class=\"flex flex-col md:flex-row items-center w-full\">\n <img\n class=\"object-cover w-20 h-20\"\n src=${this.bannerData?.img ?? ''}\n alt=\"information-register-img\"\n />\n <div\n class=\"flex flex-col justify-start ${this.isDark &&\n 'text-white'} md:ml-6 my-4\"\n >\n <h5\n class=\"text-center md:text-left text-base md:text-xl font-serif font-bold\"\n >\n ${this.bannerData?.title}\n </h5>\n <h6 class=\"text-center md:text-left\">\n ${this.bannerData?.subtitle}\n </h6>\n </div>\n </div>\n <button\n @click=${() => this.redirectToRegister()}\n class=\"w-40 md:w-52 h-auto ${this.isDark\n ? 'bg-green-300'\n : 'bg-brand-1'} rounded\"\n >\n <h6\n class=\"text-base ${this.isDark\n ? 'text-black'\n : 'text-white'} font-bold py-2 px-4\"\n >\n ${this.bannerData?.label}\n </h6>\n </button>\n </div>\n <div class=\"border-b-2 border-grey-200 w-32 md:w-40 my-6\"></div>\n <div>\n <h6 class=\"${this.isDark && 'text-white'}\">\n Sudah punya akun?\n <button\n @click=${() => this.redirectToLogin()}\n class=\"font-bold ${this.isDark\n ? 'text-blue-300'\n : 'text-blue-600'} underline\"\n >\n Silakan Masuk\n </button>\n </h6>\n </div>\n </div>\n `\n }\n}\n"]}
|
package/dist/src/components/{kompas-paywall-body → kompasid-paywall-body}/KompasPaywallBody.d.ts
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { PaywallProduct } from '../
|
|
3
|
-
export declare class
|
|
2
|
+
import { PaywallProduct } from '../kompasid-paywall/types.js';
|
|
3
|
+
export declare class KompasIdPaywallBody extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
/**
|
|
6
6
|
* Props
|