@kompasid/lit-web-components 0.5.0 → 0.5.1
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.js +7 -2
- package/dist/src/components/kompasid-freewall/KompasFreewall.js.map +1 -1
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js +10 -8
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map +1 -1
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js +8 -3
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map +1 -1
- package/dist/tailwind/tailwind.js +50 -42
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
- package/src/components/kompasid-freewall/KompasFreewall.ts +8 -2
- package/src/components/kompasid-freewall/readme.md +43 -11
- package/src/components/kompasid-freewall-body/KompasFreewallBody.ts +10 -8
- package/src/components/kompasid-freewall-head/KompasFreewallHead.ts +8 -3
- package/tailwind/tailwind.css +50 -42
- package/tailwind/tailwind.ts +50 -42
package/demo/index.html
CHANGED
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
const swgEnable = true
|
|
80
80
|
const videoPaywallType = 'homepage'
|
|
81
81
|
const freewallType = 'landing_page'
|
|
82
|
-
const headCopyExpand = '
|
|
83
|
-
const headCopyCollapse = '
|
|
82
|
+
const headCopyExpand = ''
|
|
83
|
+
const headCopyCollapse = ''
|
|
84
84
|
const expand = false
|
|
85
85
|
|
|
86
86
|
render(
|
|
@@ -146,9 +146,10 @@ let KompasFreewall = class KompasFreewall extends LitElement {
|
|
|
146
146
|
*/
|
|
147
147
|
render() {
|
|
148
148
|
return html `
|
|
149
|
-
<div class="sticky bottom-0 w-full h-full z-20">
|
|
149
|
+
<div class="sticky bottom-0 w-full h-full z-20 top-shadow">
|
|
150
150
|
<div
|
|
151
|
-
class="flex flex-col w-full bg-blue-100
|
|
151
|
+
class="flex flex-col w-full bg-blue-100 justify-center ${this
|
|
152
|
+
.isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
|
|
152
153
|
>
|
|
153
154
|
<kompasid-freewall-head
|
|
154
155
|
.expand=${this.isExpand}
|
|
@@ -177,6 +178,10 @@ KompasFreewall.styles = [
|
|
|
177
178
|
:host {
|
|
178
179
|
font-family: 'PT Sans', sans-serif;
|
|
179
180
|
}
|
|
181
|
+
|
|
182
|
+
.top-shadow {
|
|
183
|
+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
|
|
184
|
+
}
|
|
180
185
|
`,
|
|
181
186
|
TWStyles,
|
|
182
187
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\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 head_copy_expand to update copy header when expand\n * property head_copy_collapse to update copy header when collapse\n * property expand to handle expand/collapse\n * property paywall_location is the location where user encounter the paywall\n * property paywall_subscription_package is the name of the subscription package viewed by user\n * property paywall_subscription_id is the ID of the subscription package viewed by user\n * property paywall_subscription_price is the price of the subscription package viewed by user\n * property paywall_position is the position of the subscription package viewed by user\n * property tracker_page_type is the type of the page\n * property tracker_page_title is the title of the page\n * property tracker_content_id is the ID of article (slug)\n * property content_title is the title of article\n * property tracker_content_categories is the category of the content\n * property tracker_content_type is to decide whether it's free article or paid article\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property({ type: String }) head_copy_expand = ''\n @property({ type: String }) head_copy_collapse = ''\n @property({ type: Boolean }) expand = true\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 = 1\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_page_title = ''\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 showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n referrer: '',\n }\n\n /**\n * State\n */\n\n @state() private isExpand: boolean = true\n @state() private packageData: PackageData = {} as PackageData\n\n /**\n * Getter\n */\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /**\n * Data Layer\n */\n\n private sendDataLayer(event: string): void {\n const baseData = {\n event,\n paywall_location: this.paywall_location,\n paywall_subscription_package:\n this.paywall_subscription_package || this.packageData.title,\n paywall_subscription_id:\n this.paywall_subscription_id || this.packageData.id,\n paywall_subscription_price:\n this.paywall_subscription_price || this.packageData.price,\n paywall_position: this.paywall_position || this.packageData.position,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n page_type: this.tracker_page_type,\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n const data = this.isArticle\n ? {\n ...baseData,\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 }\n : {\n ...baseData,\n page_title: this.tracker_page_title,\n }\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n if (this.isExpand) this.sendDataLayer('paywall_viewed')\n }\n\n private sendDataLayerSubscribeButtonClicked(): void {\n this.sendDataLayer('subscribe_button_clicked')\n }\n\n /**\n * Logic Function\n */\n\n private toggleExpand() {\n this.isExpand = !this.isExpand\n this.sendDataLayerPaywallViewed()\n }\n\n private onSubscriptionClick() {\n this.sendDataLayerSubscribeButtonClicked()\n redirectToCheckout({\n link: `${this.packageData.link}${this.packageData.referrer}`,\n source: this.type,\n })\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n this.isExpand = this.expand\n\n const originHost: string = encodeURIComponent(window.location.href)\n this.packageData = { ...this.showPackage, referrer: originHost }\n\n this.sendDataLayerPaywallViewed()\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full z-20\">\n <div\n class=\"flex flex-col w-full bg-blue-100 py-4 justify-center md:px-12 lg:px-24\"\n >\n <kompasid-freewall-head\n .expand=${this.isExpand}\n .type=${this.type}\n .head_copy_expand=${this.head_copy_expand}\n .head_copy_collapse=${this.head_copy_collapse}\n .toggleExpand=${() => this.toggleExpand()}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n ></kompasid-freewall-head>\n ${this.isExpand\n ? html`<kompasid-freewall-body\n .type=${this.type}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n ?isLogin=${this.isLogin}\n ></kompasid-freewall-body>`\n : nothing}\n </div>\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .top-shadow {\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\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 head_copy_expand to update copy header when expand\n * property head_copy_collapse to update copy header when collapse\n * property expand to handle expand/collapse\n * property paywall_location is the location where user encounter the paywall\n * property paywall_subscription_package is the name of the subscription package viewed by user\n * property paywall_subscription_id is the ID of the subscription package viewed by user\n * property paywall_subscription_price is the price of the subscription package viewed by user\n * property paywall_position is the position of the subscription package viewed by user\n * property tracker_page_type is the type of the page\n * property tracker_page_title is the title of the page\n * property tracker_content_id is the ID of article (slug)\n * property content_title is the title of article\n * property tracker_content_categories is the category of the content\n * property tracker_content_type is to decide whether it's free article or paid article\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property({ type: String }) head_copy_expand = ''\n @property({ type: String }) head_copy_collapse = ''\n @property({ type: Boolean }) expand = true\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 = 1\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_page_title = ''\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 showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n referrer: '',\n }\n\n /**\n * State\n */\n\n @state() private isExpand: boolean = true\n @state() private packageData: PackageData = {} as PackageData\n\n /**\n * Getter\n */\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /**\n * Data Layer\n */\n\n private sendDataLayer(event: string): void {\n const baseData = {\n event,\n paywall_location: this.paywall_location,\n paywall_subscription_package:\n this.paywall_subscription_package || this.packageData.title,\n paywall_subscription_id:\n this.paywall_subscription_id || this.packageData.id,\n paywall_subscription_price:\n this.paywall_subscription_price || this.packageData.price,\n paywall_position: this.paywall_position || this.packageData.position,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n page_type: this.tracker_page_type,\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n const data = this.isArticle\n ? {\n ...baseData,\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 }\n : {\n ...baseData,\n page_title: this.tracker_page_title,\n }\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n if (this.isExpand) this.sendDataLayer('paywall_viewed')\n }\n\n private sendDataLayerSubscribeButtonClicked(): void {\n this.sendDataLayer('subscribe_button_clicked')\n }\n\n /**\n * Logic Function\n */\n\n private toggleExpand() {\n this.isExpand = !this.isExpand\n this.sendDataLayerPaywallViewed()\n }\n\n private onSubscriptionClick() {\n this.sendDataLayerSubscribeButtonClicked()\n redirectToCheckout({\n link: `${this.packageData.link}${this.packageData.referrer}`,\n source: this.type,\n })\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n\n this.isExpand = this.expand\n\n const originHost: string = encodeURIComponent(window.location.href)\n this.packageData = { ...this.showPackage, referrer: originHost }\n\n this.sendDataLayerPaywallViewed()\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n <div\n class=\"flex flex-col w-full bg-blue-100 justify-center ${this\n .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n >\n <kompasid-freewall-head\n .expand=${this.isExpand}\n .type=${this.type}\n .head_copy_expand=${this.head_copy_expand}\n .head_copy_collapse=${this.head_copy_collapse}\n .toggleExpand=${() => this.toggleExpand()}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n ></kompasid-freewall-head>\n ${this.isExpand\n ? html`<kompasid-freewall-body\n .type=${this.type}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n ?isLogin=${this.isLogin}\n ></kompasid-freewall-body>`\n : nothing}\n </div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -47,8 +47,8 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
47
47
|
id="subscription-card"
|
|
48
48
|
class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
|
|
49
49
|
.isLogin
|
|
50
|
-
? '
|
|
51
|
-
: '
|
|
50
|
+
? 'md:w-[580px]'
|
|
51
|
+
: '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"
|
|
52
52
|
>
|
|
53
53
|
<div
|
|
54
54
|
class="flex w-full flex-col ${this.isLogin
|
|
@@ -77,7 +77,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
77
77
|
</div>
|
|
78
78
|
<div id="ribbon-container">
|
|
79
79
|
<div
|
|
80
|
-
class="text-[11px] font-medium font-roboto-condensed flex justify-center items-center"
|
|
80
|
+
class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
|
|
81
81
|
>
|
|
82
82
|
<span class="-ml-2">Penawaran Terbaik</span>
|
|
83
83
|
</div>
|
|
@@ -88,7 +88,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
88
88
|
registerCardComponent() {
|
|
89
89
|
return html `
|
|
90
90
|
<div
|
|
91
|
-
class="flex flex-col justify-between
|
|
91
|
+
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"
|
|
92
92
|
>
|
|
93
93
|
<div>
|
|
94
94
|
<h5
|
|
@@ -96,7 +96,9 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
96
96
|
>
|
|
97
97
|
Daftar Akun Gratis
|
|
98
98
|
</h5>
|
|
99
|
-
<div
|
|
99
|
+
<div
|
|
100
|
+
class="flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5"
|
|
101
|
+
>
|
|
100
102
|
<div class="mt-1 lg:mt-0">${faCheck()}</div>
|
|
101
103
|
<h6 class="text-base text-grey-600 ml-1">
|
|
102
104
|
Akses ke 3 artikel berbayar gratis tiap bulan
|
|
@@ -105,7 +107,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
105
107
|
</div>
|
|
106
108
|
<button
|
|
107
109
|
@click=${() => redirectToRegister('freewall')}
|
|
108
|
-
class="bg-white border border-
|
|
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]"
|
|
109
111
|
>
|
|
110
112
|
Daftar Gratis
|
|
111
113
|
</button>
|
|
@@ -113,7 +115,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
113
115
|
`;
|
|
114
116
|
}
|
|
115
117
|
descriptionSection() {
|
|
116
|
-
return html `<div class="flex flex-col space-y-1 mt-
|
|
118
|
+
return html `<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
|
|
117
119
|
${this.description.map(item => html `
|
|
118
120
|
<div class="flex items-start lg:items-center">
|
|
119
121
|
<div class="mt-1 lg:mt-0">${faCheck()}</div>
|
|
@@ -128,7 +130,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
128
130
|
render() {
|
|
129
131
|
return html `
|
|
130
132
|
<div
|
|
131
|
-
class="w-full h-full flex flex-col md:flex-row pt-
|
|
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"
|
|
132
134
|
>
|
|
133
135
|
${this.subscriptionCardComponent()}
|
|
134
136
|
${!this.isLogin ? this.registerCardComponent() : nothing}
|
|
@@ -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;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAE1E,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAsEL;;WAEG;QACH;;;;;WAKG;QAE0B,YAAO,GAAG,KAAK,CAAA;QAChB,SAAI,GAA+B,SAAS,CAAA;QAC5D,wBAAmB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACd,gBAAW,GAAgB,EAAiB,CAAA;QAExE,gBAAW,GAAG;YACZ,kDAAkD;YAClD,iCAAiC;YACjC,yCAAyC;SAC1C,CAAA;
|
|
1
|
+
{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/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 { formatRupiah } from '../../utils/formatRupiah.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { 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\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 ? 'Dukung Jurnalisme Mencerahkan dengan Berlangganan'\n : 'Mulai Berlangganan'}\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 Langganan ${formatRupiah(this.packageData.price)}\n /${generateCopyDuration(this.packageData.durationType)}\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 Daftar Akun Gratis\n </h5>\n <div\n class=\"flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5\"\n >\n <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n <h6 class=\"text-base text-grey-600 ml-1\">\n Akses ke 3 artikel berbayar gratis tiap bulan\n </h6>\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 Daftar Gratis\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.description.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"]}
|
|
@@ -51,11 +51,15 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
51
51
|
*/
|
|
52
52
|
render() {
|
|
53
53
|
return html `
|
|
54
|
-
<div class="flex flex-col px-4 md:px-0 space-y-4">
|
|
54
|
+
<div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
|
|
55
55
|
<div class="flex justify-between items-center h-full space-x-3">
|
|
56
|
-
<div
|
|
56
|
+
<div
|
|
57
|
+
class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
|
|
58
|
+
></div>
|
|
57
59
|
<div class="flex items-center md:justify-start space-x-3">
|
|
58
|
-
<p class="w-[280px] md:w-full"
|
|
60
|
+
<p class="max-w-[280px] md:max-w-full text-grey-600">
|
|
61
|
+
${this.headCopy}
|
|
62
|
+
</p>
|
|
59
63
|
${!this.expand
|
|
60
64
|
? html `<button
|
|
61
65
|
@click=${this.onSubscriptionClick}
|
|
@@ -69,6 +73,7 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
69
73
|
<div>
|
|
70
74
|
<button
|
|
71
75
|
@click=${this.toggleExpand}
|
|
76
|
+
aria-label="Toggle Expand"
|
|
72
77
|
class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
|
|
73
78
|
>
|
|
74
79
|
<div class="${!this.expand && 'rotate-180'}">
|
|
@@ -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;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAInE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGL;;WAEG;QACH;;;;;;;;WAQG;QAE0B,YAAO,GAAG,KAAK,CAAA;QAChB,SAAI,GAA+B,SAAS,CAAA;QAC5C,qBAAgB,GAAG,EAAE,CAAA;QACrB,uBAAkB,GAAG,EAAE,CAAA;QACtB,WAAM,GAAG,IAAI,CAAA;QAC9B,iBAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACvB,wBAAmB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACd,gBAAW,GAAgB,EAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":"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","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 { formatRupiah } from '../../utils/formatRupiah.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } 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 * property isLogin untuk menghandle apakah user sudah login atau belum\n * property type untuk menghandle tipe freewall\n * property head_copy_expand to update copy header when expand\n * property head_copy_collapse to update copy header when collapse\n * property expand to handle expand/collapse\n * property toggleExpand to handle toggle expand/collapse\n * property onSubscriptionClick to handle cta when subscription button is clicked\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property({ type: String }) head_copy_expand = ''\n @property({ type: String }) head_copy_collapse = ''\n @property({ type: Boolean }) expand = true\n @property() toggleExpand = () => {}\n @property() onSubscriptionClick = () => {}\n @property({ type: Object }) packageData: PackageData = {} as PackageData\n\n /**\n * Getter\n */\n\n get headCopy() {\n return (\n (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||\n 'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'\n )\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 space-x-3\">\n <div\n class=\"hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9\"\n ></div>\n <div class=\"flex items-center md:justify-start space-x-3\">\n <p class=\"max-w-[280px] md:max-w-full text-grey-600\">\n ${this.headCopy}\n </p>\n ${!this.expand\n ? html`<button\n @click=${this.onSubscriptionClick}\n class=\"bg-green-500 hidden md:block 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 Langganan ${formatRupiah(this.packageData.price)}\n /${generateCopyDuration(this.packageData.durationType)}\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 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div class=\"${!this.expand && 'rotate-180'}\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n ${!this.expand\n ? html`<button\n @click=${this.onSubscriptionClick}\n class=\"bg-green-500 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 Langganan ${formatRupiah(this.packageData.price)}\n /${generateCopyDuration(this.packageData.durationType)}\n </button>`\n : nothing}\n </div>\n `\n }\n}\n"]}
|
|
@@ -665,6 +665,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
665
665
|
margin-bottom: 0.5rem;
|
|
666
666
|
}
|
|
667
667
|
|
|
668
|
+
.mb-4 {
|
|
669
|
+
margin-bottom: 1rem;
|
|
670
|
+
}
|
|
671
|
+
|
|
668
672
|
.ml-0 {
|
|
669
673
|
margin-left: 0px;
|
|
670
674
|
}
|
|
@@ -769,18 +773,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
769
773
|
height: 2.25rem;
|
|
770
774
|
}
|
|
771
775
|
|
|
772
|
-
.h-\\[159px\\] {
|
|
773
|
-
height: 159px;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
.h-\\[223px\\] {
|
|
777
|
-
height: 223px;
|
|
778
|
-
}
|
|
779
|
-
|
|
780
|
-
.h-\\[277px\\] {
|
|
781
|
-
height: 277px;
|
|
782
|
-
}
|
|
783
|
-
|
|
784
776
|
.h-auto {
|
|
785
777
|
height: auto;
|
|
786
778
|
}
|
|
@@ -841,10 +833,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
841
833
|
width: 138px;
|
|
842
834
|
}
|
|
843
835
|
|
|
844
|
-
.w-\\[250px\\] {
|
|
845
|
-
width: 250px;
|
|
846
|
-
}
|
|
847
|
-
|
|
848
836
|
.w-\\[296px\\] {
|
|
849
837
|
width: 296px;
|
|
850
838
|
}
|
|
@@ -861,14 +849,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
861
849
|
width: 100%;
|
|
862
850
|
}
|
|
863
851
|
|
|
864
|
-
.w-\\[280px\\] {
|
|
865
|
-
width: 280px;
|
|
866
|
-
}
|
|
867
|
-
|
|
868
852
|
.max-w-7xl {
|
|
869
853
|
max-width: 80rem;
|
|
870
854
|
}
|
|
871
855
|
|
|
856
|
+
.max-w-\\[280px\\] {
|
|
857
|
+
max-width: 280px;
|
|
858
|
+
}
|
|
859
|
+
|
|
872
860
|
.max-w-screen-md {
|
|
873
861
|
max-width: 768px;
|
|
874
862
|
}
|
|
@@ -1082,9 +1070,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1082
1070
|
border-color: rgb(147 200 253 / var(--tw-border-opacity));
|
|
1083
1071
|
}
|
|
1084
1072
|
|
|
1085
|
-
.border-
|
|
1073
|
+
.border-brand-1 {
|
|
1086
1074
|
--tw-border-opacity: 1;
|
|
1087
|
-
border-color: rgb(
|
|
1075
|
+
border-color: rgb(0 85 154 / var(--tw-border-opacity));
|
|
1088
1076
|
}
|
|
1089
1077
|
|
|
1090
1078
|
.border-dark-6 {
|
|
@@ -1313,6 +1301,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1313
1301
|
padding-bottom: 1rem;
|
|
1314
1302
|
}
|
|
1315
1303
|
|
|
1304
|
+
.pb-5 {
|
|
1305
|
+
padding-bottom: 1.25rem;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1316
1308
|
.pb-6 {
|
|
1317
1309
|
padding-bottom: 1.5rem;
|
|
1318
1310
|
}
|
|
@@ -1353,10 +1345,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1353
1345
|
padding-top: 2.5rem;
|
|
1354
1346
|
}
|
|
1355
1347
|
|
|
1348
|
+
.pt-4 {
|
|
1349
|
+
padding-top: 1rem;
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1356
1352
|
.pt-6 {
|
|
1357
1353
|
padding-top: 1.5rem;
|
|
1358
1354
|
}
|
|
1359
1355
|
|
|
1356
|
+
.pt-\\[5px\\] {
|
|
1357
|
+
padding-top: 5px;
|
|
1358
|
+
}
|
|
1359
|
+
|
|
1360
1360
|
.text-left {
|
|
1361
1361
|
text-align: left;
|
|
1362
1362
|
}
|
|
@@ -1532,11 +1532,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1532
1532
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
1533
1533
|
}
|
|
1534
1534
|
|
|
1535
|
-
.text-green-100 {
|
|
1536
|
-
--tw-text-opacity: 1;
|
|
1537
|
-
color: rgb(238 252 210 / var(--tw-text-opacity));
|
|
1538
|
-
}
|
|
1539
|
-
|
|
1540
1535
|
.underline {
|
|
1541
1536
|
text-decoration-line: underline;
|
|
1542
1537
|
}
|
|
@@ -1569,6 +1564,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1569
1564
|
margin-bottom: 0px;
|
|
1570
1565
|
}
|
|
1571
1566
|
|
|
1567
|
+
.md\\:mb-5 {
|
|
1568
|
+
margin-bottom: 1.25rem;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1572
1571
|
.md\\:ml-1 {
|
|
1573
1572
|
margin-left: 0.25rem;
|
|
1574
1573
|
}
|
|
@@ -1605,12 +1604,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1605
1604
|
height: 3rem;
|
|
1606
1605
|
}
|
|
1607
1606
|
|
|
1608
|
-
.md\\:h-\\[
|
|
1609
|
-
height:
|
|
1610
|
-
}
|
|
1611
|
-
|
|
1612
|
-
.md\\:h-\\[240px\\] {
|
|
1613
|
-
height: 240px;
|
|
1607
|
+
.md\\:min-h-\\[244px\\] {
|
|
1608
|
+
min-height: 244px;
|
|
1614
1609
|
}
|
|
1615
1610
|
|
|
1616
1611
|
.md\\:w-3\\/5 {
|
|
@@ -1649,6 +1644,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1649
1644
|
width: 100%;
|
|
1650
1645
|
}
|
|
1651
1646
|
|
|
1647
|
+
.md\\:max-w-full {
|
|
1648
|
+
max-width: 100%;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1652
1651
|
.md\\:max-w-sm {
|
|
1653
1652
|
max-width: 24rem;
|
|
1654
1653
|
}
|
|
@@ -1704,16 +1703,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1704
1703
|
padding-right: 0px;
|
|
1705
1704
|
}
|
|
1706
1705
|
|
|
1707
|
-
.md\\:px-12 {
|
|
1708
|
-
padding-left: 3rem;
|
|
1709
|
-
padding-right: 3rem;
|
|
1710
|
-
}
|
|
1711
|
-
|
|
1712
1706
|
.md\\:px-20 {
|
|
1713
1707
|
padding-left: 5rem;
|
|
1714
1708
|
padding-right: 5rem;
|
|
1715
1709
|
}
|
|
1716
1710
|
|
|
1711
|
+
.md\\:px-4 {
|
|
1712
|
+
padding-left: 1rem;
|
|
1713
|
+
padding-right: 1rem;
|
|
1714
|
+
}
|
|
1715
|
+
|
|
1717
1716
|
.md\\:px-5 {
|
|
1718
1717
|
padding-left: 1.25rem;
|
|
1719
1718
|
padding-right: 1.25rem;
|
|
@@ -1724,6 +1723,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1724
1723
|
padding-right: 1.5rem;
|
|
1725
1724
|
}
|
|
1726
1725
|
|
|
1726
|
+
.md\\:py-2 {
|
|
1727
|
+
padding-top: 0.5rem;
|
|
1728
|
+
padding-bottom: 0.5rem;
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1727
1731
|
.md\\:py-6 {
|
|
1728
1732
|
padding-top: 1.5rem;
|
|
1729
1733
|
padding-bottom: 1.5rem;
|
|
@@ -1733,6 +1737,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1733
1737
|
padding-bottom: 1rem;
|
|
1734
1738
|
}
|
|
1735
1739
|
|
|
1740
|
+
.md\\:pb-7 {
|
|
1741
|
+
padding-bottom: 1.75rem;
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1736
1744
|
.md\\:pt-3 {
|
|
1737
1745
|
padding-top: 0.75rem;
|
|
1738
1746
|
}
|
|
@@ -1808,10 +1816,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1808
1816
|
margin-top: 0.5rem;
|
|
1809
1817
|
}
|
|
1810
1818
|
|
|
1811
|
-
.lg\\:mt-3 {
|
|
1812
|
-
margin-top: 0.75rem;
|
|
1813
|
-
}
|
|
1814
|
-
|
|
1815
1819
|
.lg\\:block {
|
|
1816
1820
|
display: block;
|
|
1817
1821
|
}
|
|
@@ -1824,6 +1828,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1824
1828
|
display: none;
|
|
1825
1829
|
}
|
|
1826
1830
|
|
|
1831
|
+
.lg\\:min-h-\\[220px\\] {
|
|
1832
|
+
min-height: 220px;
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1827
1835
|
.lg\\:w-\\[410px\\] {
|
|
1828
1836
|
width: 410px;
|
|
1829
1837
|
}
|