@kompasid/lit-web-components 0.9.11 → 0.9.13
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 -2
- package/dist/src/components/kompasid-freewall/KompasFreewall.d.ts +9 -24
- package/dist/src/components/kompasid-freewall/KompasFreewall.js +44 -100
- package/dist/src/components/kompasid-freewall/KompasFreewall.js.map +1 -1
- package/dist/src/components/kompasid-freewall/old_KompasFreewall.d.ts +96 -0
- package/dist/src/components/kompasid-freewall/old_KompasFreewall.js +305 -0
- package/dist/src/components/kompasid-freewall/old_KompasFreewall.js.map +1 -0
- package/dist/src/components/kompasid-freewall/types.d.ts +26 -0
- package/dist/src/components/kompasid-freewall/types.js.map +1 -1
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.d.ts +9 -14
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js +58 -102
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map +1 -1
- package/dist/src/components/kompasid-freewall-body/old_KompasFreewallBody.d.ts +34 -0
- package/dist/src/components/kompasid-freewall-body/old_KompasFreewallBody.js +228 -0
- package/dist/src/components/kompasid-freewall-body/old_KompasFreewallBody.js.map +1 -0
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.d.ts +8 -19
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js +33 -52
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map +1 -1
- package/dist/src/components/kompasid-freewall-head/old_KompasFreewallHead.d.ts +38 -0
- package/dist/src/components/kompasid-freewall-head/old_KompasFreewallHead.js +125 -0
- package/dist/src/components/kompasid-freewall-head/old_KompasFreewallHead.js.map +1 -0
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js +1 -1
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map +1 -1
- package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js +5 -7
- package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map +1 -1
- package/dist/tailwind/tailwind.js +48 -8
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-freewall/KompasFreewall.ts +52 -85
- package/src/components/kompasid-freewall/old_KompasFreewall.ts +255 -0
- package/src/components/kompasid-freewall/readme.md +40 -84
- package/src/components/kompasid-freewall/types.ts +29 -0
- package/src/components/kompasid-freewall-body/KompasFreewallBody.ts +59 -101
- package/src/components/kompasid-freewall-body/old_KompasFreewallBody.ts +224 -0
- package/src/components/kompasid-freewall-body/readme.md +31 -7
- package/src/components/kompasid-freewall-head/KompasFreewallHead.ts +31 -39
- package/src/components/kompasid-freewall-head/old_KompasFreewallHead.ts +103 -0
- package/src/components/kompasid-freewall-head/readme.md +29 -13
- package/src/components/kompasid-grace-period/KompasGracePeriod.ts +1 -1
- package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts +5 -7
- package/tailwind/tailwind.css +48 -6
- package/tailwind/tailwind.ts +48 -8
- package/tailwind.config.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAInD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QA6EL;;WAEG;QACH;;;WAGG;QAES,kBAAa,GAAG,CAAC,GAAW,EAAE,QAAgB,EAAE,EAAE,CAAC,CAAC;YAC9D,GAAG;YACH,QAAQ;SACT,CAAC,CAAA;QAC0B,aAAQ,GAAkB,EAAE,CAAA;IAoF1D,CAAC;IAlFC;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;IACzD,CAAC;IAED;;OAEG;IAEK,OAAO,CAAC,IAAiB;QAC/B,OAAO,IAAI,CAAA;;;;;;;;gBAQC,IAAI,CAAC,KAAK;;;;;gBAKV,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;4BAEM,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;mBAEtC;YACH,CAAC,CAAC,OAAO;6BACI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;mBACrD,YAAY,CACb,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAC1D;wBACO,IAAI,CAAC,QAAQ;;cAEvB,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;gCACY,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ;uBACvD;YACT,CAAC,CAAC,OAAO;;;qBAGF,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;iIACuD,IAAI,CAAC,MAAM;YAC9H,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,6CAA6C;;cAE/C,IAAI,CAAC,GAAG,CAAC,IAAI;;;UAGjB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;mBAMG;YACT,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;;KAElD,CAAA;IACH,CAAC;;AA3KM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;IACD,QAAQ;CACT,CAAA;AAUW;IAAX,QAAQ,EAAE;yDAGT;AAC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA6B;AAzF7C,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA6K9B;SA7KY,kBAAkB","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { CardPackage } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n static styles = [\n css`\n .hideScroll::-webkit-scrollbar {\n height: 0px;\n }\n .hideScroll {\n scrollbar-width: none;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .font-roboto-condensed {\n font-family: 'Roboto Condensed', sans-serif;\n }\n\n /* ----- Ribbon Container ---------------------------------------*/\n #ribbon-container {\n background: transparent;\n height: 130px;\n width: 200px;\n position: absolute;\n top: -5px;\n right: -5px;\n overflow: hidden;\n }\n\n /* ----- Top Curl ---------------------------------------*/\n #ribbon-container:before {\n content: '';\n display: block;\n -webkit-border-radius: 10px 10px 0px 0px;\n border-radius: 10px 10px 0px 0px;\n width: 35px;\n height: 10px;\n position: absolute;\n right: 60px;\n background: #b78b00;\n z-index: 1;\n }\n\n /* ----- Right Curl ---------------------------------------*/\n #ribbon-container:after {\n content: '';\n display: block;\n -webkit-border-radius: 0px 10px 10px 0px;\n border-radius: 0px 10px 10px 0px;\n width: 10px;\n height: 35px;\n position: absolute;\n right: 0px;\n top: 60px;\n background: #b78b00;\n }\n\n /* ----- Ribbon ---------------------------------------*/\n #ribbon-container > div {\n width: 140px;\n height: 28px;\n position: relative;\n top: 24px;\n right: -100px;\n z-index: 11;\n overflow: hidden;\n transform: rotate(45deg);\n -ms-transform: rotate(45deg); /* IE 9 */\n -moz-transform: rotate(45deg); /* Firefox */\n -webkit-transform: rotate(45deg); /* Safari and Chrome */\n -o-transform: rotate(45deg); /* Opera */\n background: #ffcc00;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property bodyData to handle multiple data card CardPackage\n * property onButtonClick to handle cta when button is clicked and set specific card url and position\n */\n\n @property() onButtonClick = (url: string, position: number) => ({\n url,\n position,\n })\n @property({ type: Object }) bodyData: CardPackage[] = []\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n /**\n * Component\n */\n\n private newCard(item: CardPackage) {\n return html`\n <div class=\"relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto\">\n <div\n id=\"subscription-card\"\n class=\"flex justify-between items-start relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300\"\n >\n <div class=\"flex w-full flex-col items-start mb-4 text-start\">\n <h5 class=\"font-lora leading-[30px] text-grey-600\">\n ${item.title}\n </h5>\n </div>\n <div class=\"text-xl text-grey-600 font-lora mb-8\">\n <div>\n ${item.priceDiscount\n ? html`\n <span class=\"text-sm text-grey-400\"\n ><s>${formatRupiah(item.priceBased)}</s></span\n >\n `\n : nothing}\n <span class=\"${item.priceDiscount ? 'text-orange-400' : ''}\"\n >${formatRupiah(\n item.priceDiscount ? item.priceDiscount : item.priceBased\n )}</span\n >/<span>${item.duration}</span>\n </div>\n ${item.priceDiscount\n ? html` <div class=\"text-sm text-grey-500 font-sans mt-3\">\n Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}\n </div>`\n : nothing}\n </div>\n <button\n @click=${() => this.onButtonClick(item.cta.url, item.position)}\n class=\"whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base font-bold leading-[18px] ${item.ribbon\n ? 'text-white bg-brand-1'\n : 'text-brand-1 bg-white border border-brand-1'}\"\n >\n ${item.cta.text}\n </button>\n </div>\n ${item.ribbon\n ? html`<div id=\"ribbon-container\">\n <div\n class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n >\n <span class=\"-ml-2\">Penawaran Terbaik</span>\n </div>\n </div>`\n : nothing}\n </div>\n `\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"w-full h-full flex flex-row pt-[5px] relative snap-x overflow-x-scroll gap-4 hideScroll px-4 sm:px-0 sm:gap-6 sm:justify-center\"\n >\n ${this.bodyData.map(item => this.newCard(item))}\n </div>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
|
|
3
|
+
export declare class KompasFreewallBody extends LitElement {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
/**
|
|
6
|
+
* Props
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* property isLogin untuk menghandle apakah user sudah login atau belum
|
|
10
|
+
* property type untuk menghandle tipe freewall
|
|
11
|
+
* property onSubscriptionClick to handle cta when subscription button is clicked
|
|
12
|
+
* packageData sebagai data package yang diambil dari kompasid-freewall
|
|
13
|
+
*/
|
|
14
|
+
isLogin: boolean;
|
|
15
|
+
type: 'article' | 'landing_page';
|
|
16
|
+
onSubscriptionClick: () => void;
|
|
17
|
+
packageData: PackageData;
|
|
18
|
+
jsonPackageData: JsonPackageData;
|
|
19
|
+
description: string[];
|
|
20
|
+
/**
|
|
21
|
+
* Lifecycle
|
|
22
|
+
*/
|
|
23
|
+
connectedCallback(): Promise<void>;
|
|
24
|
+
/**
|
|
25
|
+
* Component
|
|
26
|
+
*/
|
|
27
|
+
private subscriptionCardComponent;
|
|
28
|
+
private registerCardComponent;
|
|
29
|
+
private descriptionSection;
|
|
30
|
+
/**
|
|
31
|
+
* Render Statement
|
|
32
|
+
*/
|
|
33
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
34
|
+
}
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, css, LitElement, nothing } from 'lit';
|
|
3
|
+
import { property, customElement } from 'lit/decorators.js';
|
|
4
|
+
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
5
|
+
import { addGoogleFonts } from '../../utils/googleFont.js';
|
|
6
|
+
import { faCheck } from '../../../assets/font-awesome.js';
|
|
7
|
+
import { redirectToRegister } from '../../utils/cta.js';
|
|
8
|
+
let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
/**
|
|
12
|
+
* Props
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* property isLogin untuk menghandle apakah user sudah login atau belum
|
|
16
|
+
* property type untuk menghandle tipe freewall
|
|
17
|
+
* property onSubscriptionClick to handle cta when subscription button is clicked
|
|
18
|
+
* packageData sebagai data package yang diambil dari kompasid-freewall
|
|
19
|
+
*/
|
|
20
|
+
this.isLogin = false;
|
|
21
|
+
this.type = 'article';
|
|
22
|
+
this.onSubscriptionClick = () => { };
|
|
23
|
+
this.packageData = {};
|
|
24
|
+
this.jsonPackageData = {};
|
|
25
|
+
this.description = [
|
|
26
|
+
'Akses seluruh konten Kompas.id di web & aplikasi',
|
|
27
|
+
'ePaper hingga 30 edisi terakhir',
|
|
28
|
+
'Buku digital tiap bulannya di aplikasi ',
|
|
29
|
+
];
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Lifecycle
|
|
33
|
+
*/
|
|
34
|
+
async connectedCallback() {
|
|
35
|
+
super.connectedCallback();
|
|
36
|
+
await this.updateComplete;
|
|
37
|
+
addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed']);
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Component
|
|
41
|
+
*/
|
|
42
|
+
subscriptionCardComponent() {
|
|
43
|
+
return html `
|
|
44
|
+
<div class="relative">
|
|
45
|
+
<div
|
|
46
|
+
id="subscription-card"
|
|
47
|
+
class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
|
|
48
|
+
.isLogin
|
|
49
|
+
? 'md:w-[580px]'
|
|
50
|
+
: 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
|
|
51
|
+
>
|
|
52
|
+
<div
|
|
53
|
+
class="flex w-full flex-col ${this.isLogin
|
|
54
|
+
? 'items-center md:w-[374px] text-center'
|
|
55
|
+
: 'items-start text-start'}"
|
|
56
|
+
>
|
|
57
|
+
<h5
|
|
58
|
+
class="font-lora text-lg md:text-xl font-bold leading-[30px] ${this
|
|
59
|
+
.isLogin && 'w-60 md:w-full'} text-grey-600"
|
|
60
|
+
>
|
|
61
|
+
${this.isLogin
|
|
62
|
+
? this.jsonPackageData.subscriptionTitle
|
|
63
|
+
: this.jsonPackageData.subscriptionTitleGuest}
|
|
64
|
+
</h5>
|
|
65
|
+
${this.descriptionSection()}
|
|
66
|
+
</div>
|
|
67
|
+
<button
|
|
68
|
+
@click=${this.onSubscriptionClick}
|
|
69
|
+
class="bg-green-500 whitespace-nowrap w-full rounded ${this
|
|
70
|
+
.isLogin &&
|
|
71
|
+
'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
|
|
72
|
+
>
|
|
73
|
+
${this.jsonPackageData.subscriptionButtonText}
|
|
74
|
+
</button>
|
|
75
|
+
</div>
|
|
76
|
+
<div id="ribbon-container">
|
|
77
|
+
<div
|
|
78
|
+
class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
|
|
79
|
+
>
|
|
80
|
+
<span class="-ml-2">Penawaran Terbaik</span>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
`;
|
|
85
|
+
}
|
|
86
|
+
registerCardComponent() {
|
|
87
|
+
return html `
|
|
88
|
+
<div
|
|
89
|
+
class="flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
|
|
90
|
+
>
|
|
91
|
+
<div>
|
|
92
|
+
<h5
|
|
93
|
+
class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
|
|
94
|
+
>
|
|
95
|
+
${this.jsonPackageData.registerTitle}
|
|
96
|
+
</h5>
|
|
97
|
+
<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
|
|
98
|
+
${this.jsonPackageData.registerDescription.map(item => html `
|
|
99
|
+
<div class="flex items-start lg:items-center">
|
|
100
|
+
<div class="mt-1 lg:mt-0">${faCheck()}</div>
|
|
101
|
+
<h6 class="text-base text-grey-600 ml-1 text-start">
|
|
102
|
+
${item}
|
|
103
|
+
</h6>
|
|
104
|
+
</div>
|
|
105
|
+
`)}
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<button
|
|
109
|
+
@click=${() => redirectToRegister('freewall')}
|
|
110
|
+
class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
|
|
111
|
+
>
|
|
112
|
+
${this.jsonPackageData.registerButtonText}
|
|
113
|
+
</button>
|
|
114
|
+
</div>
|
|
115
|
+
`;
|
|
116
|
+
}
|
|
117
|
+
descriptionSection() {
|
|
118
|
+
return html `<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
|
|
119
|
+
${this.jsonPackageData.subscriptionDescription.map(item => html `
|
|
120
|
+
<div class="flex items-start lg:items-center">
|
|
121
|
+
<div class="mt-1 lg:mt-0">${faCheck()}</div>
|
|
122
|
+
<h6 class="text-base text-grey-600 ml-1 text-start">${item}</h6>
|
|
123
|
+
</div>
|
|
124
|
+
`)}
|
|
125
|
+
</div>`;
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Render Statement
|
|
129
|
+
*/
|
|
130
|
+
render() {
|
|
131
|
+
return html `
|
|
132
|
+
<div
|
|
133
|
+
class="w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
|
|
134
|
+
>
|
|
135
|
+
${this.subscriptionCardComponent()}
|
|
136
|
+
${!this.isLogin ? this.registerCardComponent() : nothing}
|
|
137
|
+
</div>
|
|
138
|
+
`;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
KompasFreewallBody.styles = [
|
|
142
|
+
css `
|
|
143
|
+
.font-lora {
|
|
144
|
+
font-family: 'Lora', 'Georgia', 'serif';
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.font-roboto-condensed {
|
|
148
|
+
font-family: 'Roboto Condensed', sans-serif;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* ----- Ribbon Container ---------------------------------------*/
|
|
152
|
+
#ribbon-container {
|
|
153
|
+
background: transparent;
|
|
154
|
+
height: 130px;
|
|
155
|
+
width: 200px;
|
|
156
|
+
position: absolute;
|
|
157
|
+
top: -5px;
|
|
158
|
+
right: -5px;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* ----- Top Curl ---------------------------------------*/
|
|
163
|
+
#ribbon-container:before {
|
|
164
|
+
content: '';
|
|
165
|
+
display: block;
|
|
166
|
+
-webkit-border-radius: 10px 10px 0px 0px;
|
|
167
|
+
border-radius: 10px 10px 0px 0px;
|
|
168
|
+
width: 35px;
|
|
169
|
+
height: 10px;
|
|
170
|
+
position: absolute;
|
|
171
|
+
right: 60px;
|
|
172
|
+
background: #b78b00;
|
|
173
|
+
z-index: 1;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* ----- Right Curl ---------------------------------------*/
|
|
177
|
+
#ribbon-container:after {
|
|
178
|
+
content: '';
|
|
179
|
+
display: block;
|
|
180
|
+
-webkit-border-radius: 0px 10px 10px 0px;
|
|
181
|
+
border-radius: 0px 10px 10px 0px;
|
|
182
|
+
width: 10px;
|
|
183
|
+
height: 35px;
|
|
184
|
+
position: absolute;
|
|
185
|
+
right: 0px;
|
|
186
|
+
top: 60px;
|
|
187
|
+
background: #b78b00;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* ----- Ribbon ---------------------------------------*/
|
|
191
|
+
#ribbon-container > div {
|
|
192
|
+
width: 140px;
|
|
193
|
+
height: 28px;
|
|
194
|
+
position: relative;
|
|
195
|
+
top: 24px;
|
|
196
|
+
right: -100px;
|
|
197
|
+
z-index: 11;
|
|
198
|
+
overflow: hidden;
|
|
199
|
+
transform: rotate(45deg);
|
|
200
|
+
-ms-transform: rotate(45deg); /* IE 9 */
|
|
201
|
+
-moz-transform: rotate(45deg); /* Firefox */
|
|
202
|
+
-webkit-transform: rotate(45deg); /* Safari and Chrome */
|
|
203
|
+
-o-transform: rotate(45deg); /* Opera */
|
|
204
|
+
background: #ffcc00;
|
|
205
|
+
}
|
|
206
|
+
`,
|
|
207
|
+
TWStyles,
|
|
208
|
+
];
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: Boolean })
|
|
211
|
+
], KompasFreewallBody.prototype, "isLogin", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property({ type: String })
|
|
214
|
+
], KompasFreewallBody.prototype, "type", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
property()
|
|
217
|
+
], KompasFreewallBody.prototype, "onSubscriptionClick", void 0);
|
|
218
|
+
__decorate([
|
|
219
|
+
property({ type: Object })
|
|
220
|
+
], KompasFreewallBody.prototype, "packageData", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: Object })
|
|
223
|
+
], KompasFreewallBody.prototype, "jsonPackageData", void 0);
|
|
224
|
+
KompasFreewallBody = __decorate([
|
|
225
|
+
customElement('kompasid-freewall-body')
|
|
226
|
+
], KompasFreewallBody);
|
|
227
|
+
export { KompasFreewallBody };
|
|
228
|
+
//# sourceMappingURL=old_KompasFreewallBody.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"old_KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/old_KompasFreewallBody.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\nimport { faCheck } from '../../../assets/font-awesome.js'\nimport { redirectToRegister } from '../../utils/cta.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n static styles = [\n css`\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .font-roboto-condensed {\n font-family: 'Roboto Condensed', sans-serif;\n }\n\n /* ----- Ribbon Container ---------------------------------------*/\n #ribbon-container {\n background: transparent;\n height: 130px;\n width: 200px;\n position: absolute;\n top: -5px;\n right: -5px;\n overflow: hidden;\n }\n\n /* ----- Top Curl ---------------------------------------*/\n #ribbon-container:before {\n content: '';\n display: block;\n -webkit-border-radius: 10px 10px 0px 0px;\n border-radius: 10px 10px 0px 0px;\n width: 35px;\n height: 10px;\n position: absolute;\n right: 60px;\n background: #b78b00;\n z-index: 1;\n }\n\n /* ----- Right Curl ---------------------------------------*/\n #ribbon-container:after {\n content: '';\n display: block;\n -webkit-border-radius: 0px 10px 10px 0px;\n border-radius: 0px 10px 10px 0px;\n width: 10px;\n height: 35px;\n position: absolute;\n right: 0px;\n top: 60px;\n background: #b78b00;\n }\n\n /* ----- Ribbon ---------------------------------------*/\n #ribbon-container > div {\n width: 140px;\n height: 28px;\n position: relative;\n top: 24px;\n right: -100px;\n z-index: 11;\n overflow: hidden;\n transform: rotate(45deg);\n -ms-transform: rotate(45deg); /* IE 9 */\n -moz-transform: rotate(45deg); /* Firefox */\n -webkit-transform: rotate(45deg); /* Safari and Chrome */\n -o-transform: rotate(45deg); /* Opera */\n background: #ffcc00;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property type untuk menghandle tipe freewall\n * property onSubscriptionClick to handle cta when subscription button is clicked\n * packageData sebagai data package yang diambil dari kompasid-freewall\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property() onSubscriptionClick = () => {}\n @property({ type: Object }) packageData: PackageData = {} as PackageData\n @property({ type: Object }) jsonPackageData: JsonPackageData =\n {} as JsonPackageData\n\n description = [\n 'Akses seluruh konten Kompas.id di web & aplikasi',\n 'ePaper hingga 30 edisi terakhir',\n 'Buku digital tiap bulannya di aplikasi ',\n ]\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n /**\n * Component\n */\n\n private subscriptionCardComponent() {\n return html`\n <div class=\"relative\">\n <div\n id=\"subscription-card\"\n class=\"flex justify-between items-center relative z-10 flex-col w-[328px] ${this\n .isLogin\n ? 'md:w-[580px]'\n : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white\"\n >\n <div\n class=\"flex w-full flex-col ${this.isLogin\n ? 'items-center md:w-[374px] text-center'\n : 'items-start text-start'}\"\n >\n <h5\n class=\"font-lora text-lg md:text-xl font-bold leading-[30px] ${this\n .isLogin && 'w-60 md:w-full'} text-grey-600\"\n >\n ${this.isLogin\n ? this.jsonPackageData.subscriptionTitle\n : this.jsonPackageData.subscriptionTitleGuest}\n </h5>\n ${this.descriptionSection()}\n </div>\n <button\n @click=${this.onSubscriptionClick}\n class=\"bg-green-500 whitespace-nowrap w-full rounded ${this\n .isLogin &&\n 'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n >\n ${this.jsonPackageData.subscriptionButtonText}\n </button>\n </div>\n <div id=\"ribbon-container\">\n <div\n class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n >\n <span class=\"-ml-2\">Penawaran Terbaik</span>\n </div>\n </div>\n </div>\n `\n }\n\n private registerCardComponent() {\n return html`\n <div\n class=\"flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white\"\n >\n <div>\n <h5\n class=\"font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600\"\n >\n ${this.jsonPackageData.registerTitle}\n </h5>\n <div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n ${this.jsonPackageData.registerDescription.map(\n item => html`\n <div class=\"flex items-start lg:items-center\">\n <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n <h6 class=\"text-base text-grey-600 ml-1 text-start\">\n ${item}\n </h6>\n </div>\n `\n )}\n </div>\n </div>\n <button\n @click=${() => redirectToRegister('freewall')}\n class=\"bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]\"\n >\n ${this.jsonPackageData.registerButtonText}\n </button>\n </div>\n `\n }\n\n private descriptionSection() {\n return html`<div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n ${this.jsonPackageData.subscriptionDescription.map(\n item =>\n html`\n <div class=\"flex items-start lg:items-center\">\n <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n <h6 class=\"text-base text-grey-600 ml-1 text-start\">${item}</h6>\n </div>\n `\n )}\n </div>`\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center\"\n >\n ${this.subscriptionCardComponent()}\n ${!this.isLogin ? this.registerCardComponent() : nothing}\n </div>\n `\n }\n}\n"]}
|
|
@@ -1,31 +1,20 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import {
|
|
2
|
+
import { HeadDataFreeWall } from '../kompasid-freewall/types.js';
|
|
3
3
|
export declare class KompasFreewallHead extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
/**
|
|
6
6
|
* Props
|
|
7
7
|
*/
|
|
8
8
|
/**
|
|
9
|
-
* property
|
|
10
|
-
* property
|
|
11
|
-
* property
|
|
12
|
-
* property
|
|
13
|
-
* property expand to handle expand/collapse
|
|
14
|
-
* property toggleExpand to handle toggle expand/collapse
|
|
15
|
-
* property onSubscriptionClick to handle cta when subscription button is clicked
|
|
9
|
+
* property headData to handle data copy text and cta button
|
|
10
|
+
* property expand to handle what copy text is used
|
|
11
|
+
* property onButtonClick to handle cta when button is clicked and set specific card url
|
|
12
|
+
* property toggleExpand to handle expand and collpase button
|
|
16
13
|
*/
|
|
17
|
-
isLogin: boolean;
|
|
18
|
-
type: 'article' | 'landing_page';
|
|
19
|
-
head_copy_expand: string;
|
|
20
|
-
head_copy_collapse: string;
|
|
21
|
-
expand: boolean;
|
|
22
14
|
toggleExpand: () => void;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Getter
|
|
28
|
-
*/
|
|
15
|
+
expand: boolean;
|
|
16
|
+
onButtonClick: (url: string) => string;
|
|
17
|
+
headData: HeadDataFreeWall;
|
|
29
18
|
get headCopy(): string;
|
|
30
19
|
/**
|
|
31
20
|
* Lifecycle
|
|
@@ -12,30 +12,28 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
12
12
|
* Props
|
|
13
13
|
*/
|
|
14
14
|
/**
|
|
15
|
-
* property
|
|
16
|
-
* property
|
|
17
|
-
* property
|
|
18
|
-
* property
|
|
19
|
-
* property expand to handle expand/collapse
|
|
20
|
-
* property toggleExpand to handle toggle expand/collapse
|
|
21
|
-
* property onSubscriptionClick to handle cta when subscription button is clicked
|
|
15
|
+
* property headData to handle data copy text and cta button
|
|
16
|
+
* property expand to handle what copy text is used
|
|
17
|
+
* property onButtonClick to handle cta when button is clicked and set specific card url
|
|
18
|
+
* property toggleExpand to handle expand and collpase button
|
|
22
19
|
*/
|
|
23
|
-
this.isLogin = false;
|
|
24
|
-
this.type = 'article';
|
|
25
|
-
this.head_copy_expand = '';
|
|
26
|
-
this.head_copy_collapse = '';
|
|
27
|
-
this.expand = true;
|
|
28
20
|
this.toggleExpand = () => { };
|
|
29
|
-
this.
|
|
30
|
-
this.
|
|
31
|
-
this.
|
|
21
|
+
this.expand = true;
|
|
22
|
+
this.onButtonClick = (url) => url;
|
|
23
|
+
this.headData = {
|
|
24
|
+
headCopyExpand: 'Expand Default.',
|
|
25
|
+
headCopyCollapse: 'Collapse Default.',
|
|
26
|
+
cta: {
|
|
27
|
+
text: 'Langganan',
|
|
28
|
+
url: '#',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
32
31
|
}
|
|
33
|
-
|
|
34
|
-
* Getter
|
|
35
|
-
*/
|
|
32
|
+
// Getter
|
|
36
33
|
get headCopy() {
|
|
37
|
-
return
|
|
38
|
-
|
|
34
|
+
return this.expand
|
|
35
|
+
? this.headData.headCopyExpand
|
|
36
|
+
: this.headData.headCopyCollapse;
|
|
39
37
|
}
|
|
40
38
|
/**
|
|
41
39
|
* Lifecycle
|
|
@@ -52,17 +50,15 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
52
50
|
return html `
|
|
53
51
|
<div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
|
|
54
52
|
<div class="flex justify-between items-center h-full">
|
|
55
|
-
<div
|
|
56
|
-
class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
|
|
57
|
-
></div>
|
|
53
|
+
<div class="hidden sm:block w-9 h-9"></div>
|
|
58
54
|
<div class="flex items-center md:justify-start">
|
|
59
|
-
<p class="w-full text-grey-600">${this.headCopy}</p>
|
|
60
|
-
${!this.expand
|
|
55
|
+
<p class="w-full text-grey-600 font-bold">${this.headCopy}</p>
|
|
56
|
+
${!this.expand && this.headData.cta.url
|
|
61
57
|
? html `<button
|
|
62
|
-
@click=${this.
|
|
63
|
-
class="bg-
|
|
58
|
+
@click=${() => this.onButtonClick(this.headData.cta.url)}
|
|
59
|
+
class="bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
|
|
64
60
|
>
|
|
65
|
-
${this.
|
|
61
|
+
${this.headData.cta.text}
|
|
66
62
|
</button>`
|
|
67
63
|
: nothing}
|
|
68
64
|
</div>
|
|
@@ -72,18 +68,18 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
72
68
|
aria-label="Toggle Expand"
|
|
73
69
|
class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
|
|
74
70
|
>
|
|
75
|
-
<div class="${!this.expand && 'rotate-180'}">
|
|
71
|
+
<div class="transition-all ${!this.expand && 'rotate-180'}">
|
|
76
72
|
${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
|
|
77
73
|
</div>
|
|
78
74
|
</button>
|
|
79
75
|
</div>
|
|
80
76
|
</div>
|
|
81
|
-
${!this.expand
|
|
77
|
+
${!this.expand && this.headData.cta.url && this.headData.cta.text
|
|
82
78
|
? html `<button
|
|
83
|
-
@click=${this.
|
|
84
|
-
class="bg-
|
|
79
|
+
@click=${() => this.onButtonClick(this.headData.cta.url)}
|
|
80
|
+
class="bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
|
|
85
81
|
>
|
|
86
|
-
${this.
|
|
82
|
+
${this.headData.cta.text}
|
|
87
83
|
</button>`
|
|
88
84
|
: nothing}
|
|
89
85
|
</div>
|
|
@@ -92,32 +88,17 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
92
88
|
};
|
|
93
89
|
KompasFreewallHead.styles = [css ``, TWStyles];
|
|
94
90
|
__decorate([
|
|
95
|
-
property(
|
|
96
|
-
], KompasFreewallHead.prototype, "
|
|
97
|
-
__decorate([
|
|
98
|
-
property({ type: String })
|
|
99
|
-
], KompasFreewallHead.prototype, "type", void 0);
|
|
100
|
-
__decorate([
|
|
101
|
-
property({ type: String })
|
|
102
|
-
], KompasFreewallHead.prototype, "head_copy_expand", void 0);
|
|
103
|
-
__decorate([
|
|
104
|
-
property({ type: String })
|
|
105
|
-
], KompasFreewallHead.prototype, "head_copy_collapse", void 0);
|
|
91
|
+
property()
|
|
92
|
+
], KompasFreewallHead.prototype, "toggleExpand", void 0);
|
|
106
93
|
__decorate([
|
|
107
94
|
property({ type: Boolean })
|
|
108
95
|
], KompasFreewallHead.prototype, "expand", void 0);
|
|
109
96
|
__decorate([
|
|
110
97
|
property()
|
|
111
|
-
], KompasFreewallHead.prototype, "
|
|
112
|
-
__decorate([
|
|
113
|
-
property()
|
|
114
|
-
], KompasFreewallHead.prototype, "onSubscriptionClick", void 0);
|
|
115
|
-
__decorate([
|
|
116
|
-
property({ type: Object })
|
|
117
|
-
], KompasFreewallHead.prototype, "packageData", void 0);
|
|
98
|
+
], KompasFreewallHead.prototype, "onButtonClick", void 0);
|
|
118
99
|
__decorate([
|
|
119
100
|
property({ type: Object })
|
|
120
|
-
], KompasFreewallHead.prototype, "
|
|
101
|
+
], KompasFreewallHead.prototype, "headData", void 0);
|
|
121
102
|
KompasFreewallHead = __decorate([
|
|
122
103
|
customElement('kompasid-freewall-head')
|
|
123
104
|
], KompasFreewallHead);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAI9D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGL;;WAEG;
|
|
1
|
+
{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAI9D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGL;;WAEG;QAEH;;;;;WAKG;QACS,iBAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACN,WAAM,GAAG,IAAI,CAAA;QAC9B,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAA;QACpB,aAAQ,GAAqB;YACvD,cAAc,EAAE,iBAAiB;YACjC,gBAAgB,EAAE,mBAAmB;YACrC,GAAG,EAAE;gBACH,IAAI,EAAE,WAAW;gBACjB,GAAG,EAAE,GAAG;aACT;SACF,CAAA;IA8DH,CAAC;IA5DC,SAAS;IACT,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc;YAC9B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAA;IACpC,CAAC;IAED;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAC7B,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;wDAKyC,IAAI,CAAC,QAAQ;cACvD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG;YACrC,CAAC,CAAC,IAAI,CAAA;2BACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;oBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;0BAChB;YACZ,CAAC,CAAC,OAAO;;;;uBAIA,IAAI,CAAC,YAAY;;;;2CAIG,CAAC,IAAI,CAAC,MAAM,IAAI,YAAY;kBACrD,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;;UAK5D,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;YAC/D,CAAC,CAAC,IAAI,CAAA;uBACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;gBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;sBAChB;YACZ,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;;AAnFM,yBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,CAAA;AAYrB;IAAX,QAAQ,EAAE;wDAAwB;AACN;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAc;AAC9B;IAAX,QAAQ,EAAE;yDAAqC;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAO1B;AAvBU,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CAqF9B;SArFY,kBAAkB","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { HeadDataFreeWall } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n static styles = [css``, TWStyles]\n\n /**\n * Props\n */\n\n /**\n * property headData to handle data copy text and cta button\n * property expand to handle what copy text is used\n * property onButtonClick to handle cta when button is clicked and set specific card url\n * property toggleExpand to handle expand and collpase button\n */\n @property() toggleExpand = () => {}\n @property({ type: Boolean }) expand = true\n @property() onButtonClick = (url: string) => url\n @property({ type: Object }) headData: HeadDataFreeWall = {\n headCopyExpand: 'Expand Default.',\n headCopyCollapse: 'Collapse Default.',\n cta: {\n text: 'Langganan',\n url: '#',\n },\n }\n\n // Getter\n get headCopy() {\n return this.expand\n ? this.headData.headCopyExpand\n : this.headData.headCopyCollapse\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans'])\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div class=\"flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2\">\n <div class=\"flex justify-between items-center h-full\">\n <div class=\"hidden sm:block w-9 h-9\"></div>\n <div class=\"flex items-center md:justify-start\">\n <p class=\"w-full text-grey-600 font-bold\">${this.headCopy}</p>\n ${!this.expand && this.headData.cta.url\n ? html`<button\n @click=${() => this.onButtonClick(this.headData.cta.url)}\n class=\"bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n >\n ${this.headData.cta.text}\n </button>`\n : nothing}\n </div>\n <div>\n <button\n @click=${this.toggleExpand}\n aria-label=\"Toggle Expand\"\n class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div class=\"transition-all ${!this.expand && 'rotate-180'}\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n ${!this.expand && this.headData.cta.url && this.headData.cta.text\n ? html`<button\n @click=${() => this.onButtonClick(this.headData.cta.url)}\n class=\"bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n >\n ${this.headData.cta.text}\n </button>`\n : nothing}\n </div>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
|
|
3
|
+
export declare class KompasFreewallHead extends LitElement {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
/**
|
|
6
|
+
* Props
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* property isLogin untuk menghandle apakah user sudah login atau belum
|
|
10
|
+
* property type untuk menghandle tipe freewall
|
|
11
|
+
* property head_copy_expand to update copy header when expand
|
|
12
|
+
* property head_copy_collapse to update copy header when collapse
|
|
13
|
+
* property expand to handle expand/collapse
|
|
14
|
+
* property toggleExpand to handle toggle expand/collapse
|
|
15
|
+
* property onSubscriptionClick to handle cta when subscription button is clicked
|
|
16
|
+
*/
|
|
17
|
+
isLogin: boolean;
|
|
18
|
+
type: 'article' | 'landing_page';
|
|
19
|
+
head_copy_expand: string;
|
|
20
|
+
head_copy_collapse: string;
|
|
21
|
+
expand: boolean;
|
|
22
|
+
toggleExpand: () => void;
|
|
23
|
+
onSubscriptionClick: () => void;
|
|
24
|
+
packageData: PackageData;
|
|
25
|
+
jsonPackageData: JsonPackageData;
|
|
26
|
+
/**
|
|
27
|
+
* Getter
|
|
28
|
+
*/
|
|
29
|
+
get headCopy(): string;
|
|
30
|
+
/**
|
|
31
|
+
* Lifecycle
|
|
32
|
+
*/
|
|
33
|
+
connectedCallback(): Promise<void>;
|
|
34
|
+
/**
|
|
35
|
+
* Render Statement
|
|
36
|
+
*/
|
|
37
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
38
|
+
}
|