@kompasid/lit-web-components 0.9.29 → 0.9.31
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/demo/index.html +2 -1
- package/demo/paywall.html +85 -0
- package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts +4 -0
- package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js +232 -14
- package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js.map +1 -1
- package/dist/src/components/kompasid-paywall/KompasPaywall.js +1 -1
- package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +8 -0
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/tailwind/tailwind.js +32 -0
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts +266 -14
- package/src/components/kompasid-metered-paywall-personalize/readme.md +1 -0
- package/src/components/kompasid-paywall/KompasPaywall.ts +1 -1
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +7 -0
- package/tailwind/tailwind.css +32 -0
- package/tailwind/tailwind.ts +32 -0
package/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts
CHANGED
|
@@ -23,15 +23,16 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
23
23
|
width: 100%;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.message-
|
|
26
|
+
.message-formatter span {
|
|
27
27
|
color: #ff7a00;
|
|
28
28
|
font-weight: 700;
|
|
29
29
|
text-wrap: nowrap;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.message-
|
|
32
|
+
.message-formatter s {
|
|
33
33
|
color: #999999;
|
|
34
34
|
text-wrap: nowrap;
|
|
35
|
+
font-weight: 400;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
.font-lora {
|
|
@@ -66,6 +67,7 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
66
67
|
* prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
|
|
67
68
|
* prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
|
|
68
69
|
* prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
|
|
70
|
+
* prop rubrik untuk menerika rubrikasi dari implementor
|
|
69
71
|
* prop paywall_location = The location where user encounter the paywall
|
|
70
72
|
* prop paywall_subscription_package = The name of the subscription package viewed by user
|
|
71
73
|
* prop paywall_subscription_id = The ID of the subscription package viewed by user
|
|
@@ -87,6 +89,7 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
87
89
|
@property({ type: String }) segment = ''
|
|
88
90
|
@property({ type: String }) offering = ''
|
|
89
91
|
@property({ type: String }) user_name = ''
|
|
92
|
+
@property({ type: String }) rubrik = ''
|
|
90
93
|
@property({ type: String }) paywall_location = ''
|
|
91
94
|
@property({ type: String }) paywall_subscription_package = ''
|
|
92
95
|
@property({ type: String }) paywall_subscription_id = ''
|
|
@@ -111,7 +114,7 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
111
114
|
|
|
112
115
|
async getMeteredPaywallData() {
|
|
113
116
|
try {
|
|
114
|
-
const getSegment = this.segment.toLocaleLowerCase().replace(
|
|
117
|
+
const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_')
|
|
115
118
|
const response = await fetch(
|
|
116
119
|
`https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`
|
|
117
120
|
)
|
|
@@ -196,10 +199,9 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
196
199
|
})
|
|
197
200
|
}
|
|
198
201
|
|
|
199
|
-
private stateDefaultPaywall = false
|
|
202
|
+
@state() private stateDefaultPaywall = false
|
|
200
203
|
private computedstateDefaultPaywall() {
|
|
201
204
|
this.stateDefaultPaywall = !this.stateDefaultPaywall
|
|
202
|
-
this.requestUpdate()
|
|
203
205
|
}
|
|
204
206
|
|
|
205
207
|
/**
|
|
@@ -314,7 +316,7 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
314
316
|
class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 justify-center gap-4 px-4 lg:px-0 bottom-0"
|
|
315
317
|
>
|
|
316
318
|
<div
|
|
317
|
-
class="text-grey-600 text-base self-center text-left message-
|
|
319
|
+
class="text-grey-600 text-base self-center text-left message-formatter font-bold"
|
|
318
320
|
>
|
|
319
321
|
${unsafeHTML(textTemplateFormater)}
|
|
320
322
|
</div>
|
|
@@ -347,7 +349,10 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
347
349
|
return html`
|
|
348
350
|
<div class="sticky bottom-0 w-full h-full">
|
|
349
351
|
<div
|
|
350
|
-
class="flex flex-col lg:flex-row w-full bg-blue-100
|
|
352
|
+
class="flex flex-col lg:flex-row w-full bg-blue-100 ${this
|
|
353
|
+
.stateDefaultPaywall
|
|
354
|
+
? 'py-4 lg:py-3'
|
|
355
|
+
: 'py-4 lg:py-8'} gap-4 px-4 bottom-0"
|
|
351
356
|
>
|
|
352
357
|
<div
|
|
353
358
|
class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
|
|
@@ -359,7 +364,7 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
359
364
|
class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
|
|
360
365
|
>
|
|
361
366
|
<div
|
|
362
|
-
class="text-grey-600 font-lora message-
|
|
367
|
+
class="text-grey-600 font-lora message-formatter order-2"
|
|
363
368
|
>
|
|
364
369
|
<div
|
|
365
370
|
class="text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start"
|
|
@@ -393,11 +398,173 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
393
398
|
: nothing}
|
|
394
399
|
</div>
|
|
395
400
|
<div
|
|
396
|
-
class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-
|
|
401
|
+
class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-4"
|
|
397
402
|
>
|
|
398
403
|
${unsafeHTML(descriptionExpand)}
|
|
399
404
|
</div>
|
|
405
|
+
<div class="font-sans">
|
|
406
|
+
<button
|
|
407
|
+
@click="${this.redirectToBerlangganan}"
|
|
408
|
+
class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
|
|
409
|
+
>
|
|
410
|
+
${this.packageData?.offering[
|
|
411
|
+
this.offering ? this.offering : 'Q1'
|
|
412
|
+
].checkout_text}
|
|
413
|
+
</button>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
<div
|
|
417
|
+
class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
|
|
418
|
+
>
|
|
419
|
+
<image
|
|
420
|
+
src="${this.packageData?.paywall.image}"
|
|
421
|
+
alt="content"
|
|
422
|
+
class="w-[112px] lg:w-[202px]"
|
|
423
|
+
/>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
<div>
|
|
427
|
+
<button
|
|
428
|
+
@click="${this.computedstateDefaultPaywall}"
|
|
429
|
+
class="h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4"
|
|
430
|
+
>
|
|
400
431
|
<div>
|
|
432
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
|
|
433
|
+
</div>
|
|
434
|
+
</button>
|
|
435
|
+
</div>
|
|
436
|
+
`
|
|
437
|
+
: html`
|
|
438
|
+
<div class="hidden h-9 w-9 lg:flex"></div>
|
|
439
|
+
<div class="flex justify-between">
|
|
440
|
+
<div
|
|
441
|
+
class="text-grey-600 text-base self-center text-left message-formatter font-bold"
|
|
442
|
+
>
|
|
443
|
+
${unsafeHTML(messageTitleCollapse)}
|
|
444
|
+
</div>
|
|
445
|
+
<div class="hidden lg:flex ml-6">
|
|
446
|
+
<button
|
|
447
|
+
@click="${this.redirectToBerlangganan}"
|
|
448
|
+
class="bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
|
|
449
|
+
>
|
|
450
|
+
${this.packageData?.offering[
|
|
451
|
+
this.offering ? this.offering : 'Q1'
|
|
452
|
+
].checkout_text}
|
|
453
|
+
</button>
|
|
454
|
+
</div>
|
|
455
|
+
<div class="flex lg:hidden ml-4">
|
|
456
|
+
<button
|
|
457
|
+
@click="${this.computedstateDefaultPaywall}"
|
|
458
|
+
class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
|
|
459
|
+
>
|
|
460
|
+
<div>
|
|
461
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
|
|
462
|
+
</div>
|
|
463
|
+
</button>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
<div>
|
|
467
|
+
<button
|
|
468
|
+
@click="${this.computedstateDefaultPaywall}"
|
|
469
|
+
class="h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200"
|
|
470
|
+
>
|
|
471
|
+
<div>
|
|
472
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
|
|
473
|
+
</div>
|
|
474
|
+
</button>
|
|
475
|
+
<button
|
|
476
|
+
@click="${this.redirectToBerlangganan}"
|
|
477
|
+
class="bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full"
|
|
478
|
+
>
|
|
479
|
+
${this.packageData?.offering[
|
|
480
|
+
this.offering ? this.offering : 'Q1'
|
|
481
|
+
].checkout_text}
|
|
482
|
+
</button>
|
|
483
|
+
</div>
|
|
484
|
+
`}
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
`
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
private lostButCurious() {
|
|
492
|
+
const messageTitleCollapse = this.replacePlaceholdersFromOffering(
|
|
493
|
+
this.packageData?.paywall.messageTitleCollapse || '',
|
|
494
|
+
this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||
|
|
495
|
+
({} as OfferingItem)
|
|
496
|
+
)
|
|
497
|
+
const descriptionExpand = this.replacePlaceholdersFromOffering(
|
|
498
|
+
this.packageData?.paywall.descriptionExpand || '',
|
|
499
|
+
this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||
|
|
500
|
+
({} as OfferingItem)
|
|
501
|
+
)
|
|
502
|
+
return html`
|
|
503
|
+
<div class="sticky bottom-0 w-full h-full leading-none">
|
|
504
|
+
<div
|
|
505
|
+
class="flex flex-col lg:flex-row w-full bg-blue-100 ${this
|
|
506
|
+
.stateDefaultPaywall
|
|
507
|
+
? 'py-4 lg:py-3'
|
|
508
|
+
: 'py-4 lg:py-8'} gap-4 px-4 bottom-0"
|
|
509
|
+
>
|
|
510
|
+
<div
|
|
511
|
+
class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
|
|
512
|
+
>
|
|
513
|
+
${!this.stateDefaultPaywall
|
|
514
|
+
? html`
|
|
515
|
+
<div class="h-9 w-9 hidden lg:flex"></div>
|
|
516
|
+
<div
|
|
517
|
+
class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
|
|
518
|
+
>
|
|
519
|
+
<div class="text-grey-600 font-sans order-2">
|
|
520
|
+
<div
|
|
521
|
+
class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-center lg:text-start"
|
|
522
|
+
>
|
|
523
|
+
<span
|
|
524
|
+
>Halo
|
|
525
|
+
${this.user_name
|
|
526
|
+
? this.user_name
|
|
527
|
+
: 'Pembaca Setia Kompas'},</span
|
|
528
|
+
>
|
|
529
|
+
${this.packageData?.paywall.messageTitleExpand}
|
|
530
|
+
<span>${this.rubrik}</span>
|
|
531
|
+
</div>
|
|
532
|
+
<div
|
|
533
|
+
class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2"
|
|
534
|
+
>
|
|
535
|
+
${unsafeHTML(descriptionExpand)}
|
|
536
|
+
</div>
|
|
537
|
+
<div class="text-base lg:text-lg text-grey-400 mb-1">
|
|
538
|
+
<s
|
|
539
|
+
>${formatRupiah(
|
|
540
|
+
this.packageData?.offering[
|
|
541
|
+
this.offering ? this.offering : 'Q1'
|
|
542
|
+
].harga_coret || 0
|
|
543
|
+
)}</s
|
|
544
|
+
>
|
|
545
|
+
<span
|
|
546
|
+
class="text-lg lg:text-2xl text-orange-400 font-bold"
|
|
547
|
+
>
|
|
548
|
+
${formatRupiah(
|
|
549
|
+
this.packageData?.offering[
|
|
550
|
+
this.offering ? this.offering : 'Q1'
|
|
551
|
+
].offering_price || 0
|
|
552
|
+
)}
|
|
553
|
+
</span>
|
|
554
|
+
${this.packageData?.offering[
|
|
555
|
+
this.offering ? this.offering : 'Q1'
|
|
556
|
+
].duration
|
|
557
|
+
? html`
|
|
558
|
+
<span class="text-base lg:text-lg text-grey-600"
|
|
559
|
+
>${this.packageData?.offering[
|
|
560
|
+
this.offering ? this.offering : 'Q1'
|
|
561
|
+
].duration}</span
|
|
562
|
+
>
|
|
563
|
+
`
|
|
564
|
+
: nothing}
|
|
565
|
+
</div>
|
|
566
|
+
<div class="mb-3 lg:mb-4">untuk tahun pertama.</div>
|
|
567
|
+
<div class="font-sans">
|
|
401
568
|
<button
|
|
402
569
|
@click="${this.redirectToBerlangganan}"
|
|
403
570
|
class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
|
|
@@ -430,10 +597,10 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
430
597
|
</div>
|
|
431
598
|
`
|
|
432
599
|
: html`
|
|
433
|
-
<div class="h-9 w-9 flex"></div>
|
|
600
|
+
<div class="hidden h-9 w-9 lg:flex"></div>
|
|
434
601
|
<div class="flex justify-between">
|
|
435
602
|
<div
|
|
436
|
-
class="text-grey-600 text-base self-center text-left message-
|
|
603
|
+
class="text-grey-600 text-base self-center text-left message-formatter font-bold"
|
|
437
604
|
>
|
|
438
605
|
${unsafeHTML(messageTitleCollapse)}
|
|
439
606
|
</div>
|
|
@@ -483,12 +650,97 @@ export class KompasMeteredPaywallPersonalize extends LitElement {
|
|
|
483
650
|
`
|
|
484
651
|
}
|
|
485
652
|
|
|
653
|
+
private unaware() {
|
|
654
|
+
const descriptionExpand = this.replacePlaceholdersFromOffering(
|
|
655
|
+
this.packageData?.paywall.descriptionExpand || '',
|
|
656
|
+
this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||
|
|
657
|
+
({} as OfferingItem)
|
|
658
|
+
)
|
|
659
|
+
|
|
660
|
+
return html`
|
|
661
|
+
<div class="w-full h-full max-w-4xl mx-auto">
|
|
662
|
+
<div
|
|
663
|
+
class="flex flex-col lg:flex-row w-full bg-blue-100 py-6 px-4 lg:py-9 lg:px-6 gap-4 rounded-lg"
|
|
664
|
+
>
|
|
665
|
+
<div
|
|
666
|
+
class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto"
|
|
667
|
+
>
|
|
668
|
+
<div
|
|
669
|
+
class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
|
|
670
|
+
>
|
|
671
|
+
<div class="text-grey-600 font-lora message-formatter order-2">
|
|
672
|
+
<div
|
|
673
|
+
class="text-xl lg:text-2xl font-bold mb-2 text-center lg:text-start"
|
|
674
|
+
>
|
|
675
|
+
${this.packageData?.paywall.messageTitleExpand}${this
|
|
676
|
+
.user_name
|
|
677
|
+
? `, ${this.user_name}!`
|
|
678
|
+
: ''}
|
|
679
|
+
</div>
|
|
680
|
+
<div class="mb-2 font-sans">
|
|
681
|
+
${unsafeHTML(descriptionExpand)}
|
|
682
|
+
</div>
|
|
683
|
+
<div class="flex flex-col font-sans gap-3 mb-4">
|
|
684
|
+
${this.packageData?.paywall.listBenefits
|
|
685
|
+
? this.packageData?.paywall.listBenefits.map(
|
|
686
|
+
item =>
|
|
687
|
+
html`
|
|
688
|
+
<div class="flex items-baseline align-baseline">
|
|
689
|
+
<div
|
|
690
|
+
class="bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center"
|
|
691
|
+
>
|
|
692
|
+
${unsafeSVG(
|
|
693
|
+
getFontAwesomeIcon(
|
|
694
|
+
'fas',
|
|
695
|
+
'circle-check',
|
|
696
|
+
12,
|
|
697
|
+
12
|
|
698
|
+
)
|
|
699
|
+
)}
|
|
700
|
+
</div>
|
|
701
|
+
<h6 class="text-base ml-1">${item}</h6>
|
|
702
|
+
</div>
|
|
703
|
+
`
|
|
704
|
+
)
|
|
705
|
+
: nothing}
|
|
706
|
+
</div>
|
|
707
|
+
<div class="font-sans">
|
|
708
|
+
<button
|
|
709
|
+
@click="${this.redirectToBerlangganan}"
|
|
710
|
+
class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-[18px] w-full lg:w-auto"
|
|
711
|
+
>
|
|
712
|
+
${this.packageData?.offering[
|
|
713
|
+
this.offering ? this.offering : 'Q1'
|
|
714
|
+
].checkout_text}
|
|
715
|
+
</button>
|
|
716
|
+
</div>
|
|
717
|
+
</div>
|
|
718
|
+
<div
|
|
719
|
+
class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
|
|
720
|
+
>
|
|
721
|
+
<image
|
|
722
|
+
src="${this.packageData?.paywall.image}"
|
|
723
|
+
alt="content"
|
|
724
|
+
class="w-[112px] lg:w-[202px]"
|
|
725
|
+
/>
|
|
726
|
+
</div>
|
|
727
|
+
</div>
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
`
|
|
732
|
+
}
|
|
733
|
+
|
|
486
734
|
private pickTemplate() {
|
|
487
|
-
switch (this.segment) {
|
|
488
|
-
case '
|
|
735
|
+
switch (this.segment.toLocaleLowerCase()) {
|
|
736
|
+
case 'engaged returners':
|
|
489
737
|
return this.engageReturners()
|
|
490
|
-
case '
|
|
738
|
+
case 'passive faders':
|
|
491
739
|
return this.passiveFaders()
|
|
740
|
+
case 'lost but curious':
|
|
741
|
+
return this.lostButCurious()
|
|
742
|
+
case 'unaware':
|
|
743
|
+
return this.unaware()
|
|
492
744
|
default:
|
|
493
745
|
return nothing
|
|
494
746
|
}
|
|
@@ -31,6 +31,7 @@ Komponen ini akan:
|
|
|
31
31
|
| `segment` | `segment` | Menentukan template paywall berdasarkan segmentasi user (`Engaged Returners`, `Passive Faders`, dll). | `string` | `''` |
|
|
32
32
|
| `offering` | `offering` | Menentukan paket penawaran langganan (default: `Q1`). | `string` | `''` |
|
|
33
33
|
| `user_name` | `user_name` | Nama pengguna untuk menampilkan sapaan personal (“Halo, [nama]”). | `string` | `''` |
|
|
34
|
+
| `rubrik` | `rubrik` | Nama rubrikasi yang akan di berikan oleh implementor | `string` | `''` |
|
|
34
35
|
| `paywall_location` | `paywall_location` | Lokasi di mana user menemukan paywall. | `string` | `''` |
|
|
35
36
|
| `paywall_subscription_package` | `paywall_subscription_package` | Nama paket langganan yang ditampilkan ke user. | `string` | `''` |
|
|
36
37
|
| `paywall_subscription_id` | `paywall_subscription_id` | ID paket langganan yang ditampilkan ke user. | `string` | `''` |
|
|
@@ -541,11 +541,11 @@ export class KompasPaywall extends LitElement {
|
|
|
541
541
|
private selectorTypePaywall = (type: PaywallType) => {
|
|
542
542
|
switch (type) {
|
|
543
543
|
case 'epaper':
|
|
544
|
-
case 'proMiningArticle':
|
|
545
544
|
case 'proMiningOutlook':
|
|
546
545
|
return this.renderEpaperPaywallSection()
|
|
547
546
|
case 'audio':
|
|
548
547
|
return this.renderAudioPaywallSection()
|
|
548
|
+
case 'proMiningArticle':
|
|
549
549
|
case 'reguler':
|
|
550
550
|
return this.renderRegularPaywallSection()
|
|
551
551
|
default:
|
|
@@ -637,6 +637,13 @@ export class KompasIdPaywallBody extends LitElement {
|
|
|
637
637
|
>
|
|
638
638
|
${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
|
|
639
639
|
</button>`
|
|
640
|
+
} else if (type === 'proMiningArticle' && isPrevHistoryExist) {
|
|
641
|
+
buttonContent = html` <button
|
|
642
|
+
@click=${this.redirectToPrevUrl}
|
|
643
|
+
class="hidden md:block w-8 h-8 pl-4 ${textColorClass}"
|
|
644
|
+
>
|
|
645
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
|
|
646
|
+
</button>`
|
|
640
647
|
} else if (type === 'audio') {
|
|
641
648
|
buttonContent = html` <button
|
|
642
649
|
@click=${this.togglePaywall}
|
package/tailwind/tailwind.css
CHANGED
|
@@ -1093,6 +1093,10 @@ video {
|
|
|
1093
1093
|
width: 100vw;
|
|
1094
1094
|
}
|
|
1095
1095
|
|
|
1096
|
+
.max-w-4xl {
|
|
1097
|
+
max-width: 56rem;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1096
1100
|
.max-w-5xl {
|
|
1097
1101
|
max-width: 64rem;
|
|
1098
1102
|
}
|
|
@@ -1748,6 +1752,11 @@ video {
|
|
|
1748
1752
|
padding-bottom: 1.25rem;
|
|
1749
1753
|
}
|
|
1750
1754
|
|
|
1755
|
+
.py-6 {
|
|
1756
|
+
padding-top: 1.5rem;
|
|
1757
|
+
padding-bottom: 1.5rem;
|
|
1758
|
+
}
|
|
1759
|
+
|
|
1751
1760
|
.py-\[5\.6px\] {
|
|
1752
1761
|
padding-top: 5.6px;
|
|
1753
1762
|
padding-bottom: 5.6px;
|
|
@@ -2624,6 +2633,14 @@ video {
|
|
|
2624
2633
|
margin-bottom: 0px;
|
|
2625
2634
|
}
|
|
2626
2635
|
|
|
2636
|
+
.lg\:mb-2 {
|
|
2637
|
+
margin-bottom: 0.5rem;
|
|
2638
|
+
}
|
|
2639
|
+
|
|
2640
|
+
.lg\:mb-4 {
|
|
2641
|
+
margin-bottom: 1rem;
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2627
2644
|
.lg\:ml-6 {
|
|
2628
2645
|
margin-left: 1.5rem;
|
|
2629
2646
|
}
|
|
@@ -2758,6 +2775,21 @@ video {
|
|
|
2758
2775
|
padding-bottom: 2.5rem;
|
|
2759
2776
|
}
|
|
2760
2777
|
|
|
2778
|
+
.lg\:py-3 {
|
|
2779
|
+
padding-top: 0.75rem;
|
|
2780
|
+
padding-bottom: 0.75rem;
|
|
2781
|
+
}
|
|
2782
|
+
|
|
2783
|
+
.lg\:py-8 {
|
|
2784
|
+
padding-top: 2rem;
|
|
2785
|
+
padding-bottom: 2rem;
|
|
2786
|
+
}
|
|
2787
|
+
|
|
2788
|
+
.lg\:py-9 {
|
|
2789
|
+
padding-top: 2.25rem;
|
|
2790
|
+
padding-bottom: 2.25rem;
|
|
2791
|
+
}
|
|
2792
|
+
|
|
2761
2793
|
.lg\:pb-0 {
|
|
2762
2794
|
padding-bottom: 0px;
|
|
2763
2795
|
}
|
package/tailwind/tailwind.ts
CHANGED
|
@@ -1100,6 +1100,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1100
1100
|
width: 100vw;
|
|
1101
1101
|
}
|
|
1102
1102
|
|
|
1103
|
+
.max-w-4xl {
|
|
1104
|
+
max-width: 56rem;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1103
1107
|
.max-w-5xl {
|
|
1104
1108
|
max-width: 64rem;
|
|
1105
1109
|
}
|
|
@@ -1759,6 +1763,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1759
1763
|
padding-bottom: 1.25rem;
|
|
1760
1764
|
}
|
|
1761
1765
|
|
|
1766
|
+
.py-6 {
|
|
1767
|
+
padding-top: 1.5rem;
|
|
1768
|
+
padding-bottom: 1.5rem;
|
|
1769
|
+
}
|
|
1770
|
+
|
|
1762
1771
|
.py-\\[5\\.6px\\] {
|
|
1763
1772
|
padding-top: 5.6px;
|
|
1764
1773
|
padding-bottom: 5.6px;
|
|
@@ -2647,6 +2656,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2647
2656
|
margin-bottom: 0px;
|
|
2648
2657
|
}
|
|
2649
2658
|
|
|
2659
|
+
.lg\\:mb-2 {
|
|
2660
|
+
margin-bottom: 0.5rem;
|
|
2661
|
+
}
|
|
2662
|
+
|
|
2663
|
+
.lg\\:mb-4 {
|
|
2664
|
+
margin-bottom: 1rem;
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2650
2667
|
.lg\\:ml-6 {
|
|
2651
2668
|
margin-left: 1.5rem;
|
|
2652
2669
|
}
|
|
@@ -2781,6 +2798,21 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2781
2798
|
padding-bottom: 2.5rem;
|
|
2782
2799
|
}
|
|
2783
2800
|
|
|
2801
|
+
.lg\\:py-3 {
|
|
2802
|
+
padding-top: 0.75rem;
|
|
2803
|
+
padding-bottom: 0.75rem;
|
|
2804
|
+
}
|
|
2805
|
+
|
|
2806
|
+
.lg\\:py-8 {
|
|
2807
|
+
padding-top: 2rem;
|
|
2808
|
+
padding-bottom: 2rem;
|
|
2809
|
+
}
|
|
2810
|
+
|
|
2811
|
+
.lg\\:py-9 {
|
|
2812
|
+
padding-top: 2.25rem;
|
|
2813
|
+
padding-bottom: 2.25rem;
|
|
2814
|
+
}
|
|
2815
|
+
|
|
2784
2816
|
.lg\\:pb-0 {
|
|
2785
2817
|
padding-bottom: 0px;
|
|
2786
2818
|
}
|