@kompasid/lit-web-components 0.7.8 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/demo/index.html +7 -7
  2. package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts +3 -1
  3. package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js +34 -9
  4. package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map +1 -1
  5. package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts +1 -0
  6. package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js +34 -7
  7. package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map +1 -1
  8. package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts +1 -0
  9. package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js +19 -4
  10. package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js.map +1 -1
  11. package/dist/tailwind/tailwind.js +151 -171
  12. package/dist/tailwind/tailwind.js.map +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +1 -1
  15. package/src/components/kompasid-grace-period/KompasGracePeriod.ts +32 -8
  16. package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts +32 -7
  17. package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts +17 -4
  18. package/tailwind/tailwind.css +38 -99
  19. package/tailwind/tailwind.ts +151 -171
package/demo/index.html CHANGED
@@ -154,6 +154,12 @@
154
154
  .slugs=${widgetRelatedPost.slugs}
155
155
  ></kompasid-widget-recirculations-default>
156
156
 
157
+ <kompasid-widget-recirculations-list
158
+ widgetTitle="Terpopuler"
159
+ apiSlug="popular-article"
160
+ >
161
+ </kompasid-widget-recirculations-list>
162
+
157
163
  <kompasid-widget-recirculations-default
158
164
  .titleName=${widgetOtherPost.titleName}
159
165
  .titleLink=${widgetOtherPost.titleLink}
@@ -161,12 +167,6 @@
161
167
  mainCategory="opini"
162
168
  ></kompasid-widget-recirculations-default>
163
169
 
164
- <kompasid-widget-recirculations-list
165
- widgetTitle="Terpopuler"
166
- apiSlug="popular-article"
167
- >
168
- </kompasid-widget-recirculations-list>
169
-
170
170
  <kompasid-paywall
171
171
  .type=${type}
172
172
  .theme=${theme}
@@ -269,4 +269,4 @@
269
269
  window.dataLayer = window.dataLayer || []
270
270
  </script>
271
271
  </body>
272
- </html>
272
+ </html>
package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts CHANGED
@@ -46,9 +46,11 @@ export declare class KompasGracePeriod extends LitElement {
46
46
  * State
47
47
  */
48
48
  private maxGracePeriod;
49
- private updateSubscription;
49
+ private subscriptionPage;
50
+ private checkoutPage;
50
51
  private getCountdownGracePeriod;
51
52
  private redirectToBerlangganan;
53
+ private redirectToCheckout;
52
54
  private getGtmParams;
53
55
  private sendGtmEvent;
54
56
  private dataLayeronPerbaruiLanggananButton;
package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js CHANGED
@@ -51,7 +51,8 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
51
51
  * State
52
52
  */
53
53
  this.maxGracePeriod = 7;
54
- this.updateSubscription = 'https://checkoutv2.kompas.id';
54
+ this.subscriptionPage = 'https://www.kompas.id/berlangganan';
55
+ this.checkoutPage = 'https://checkoutv2.kompas.id';
55
56
  }
56
57
  getCountdownGracePeriod() {
57
58
  const { totalGracePeriod } = this;
@@ -76,10 +77,15 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
76
77
  `;
77
78
  }
78
79
  redirectToBerlangganan() {
80
+ this.dataLayeronPerbaruiLanggananButton();
81
+ this.sendGtmEvent('subscribe_button_clicked');
82
+ window.open(this.subscriptionPage);
83
+ }
84
+ redirectToCheckout() {
79
85
  this.dataLayeronPerbaruiLanggananButton();
80
86
  const originHost = encodeURIComponent(window.location.href);
81
87
  this.sendGtmEvent('subscribe_button_clicked');
82
- window.open(`${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
88
+ window.open(`${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
83
89
  }
84
90
  getGtmParams() {
85
91
  return {
@@ -135,22 +141,38 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
135
141
  <div
136
142
  class="${this.isColumn
137
143
  ? 'rounded-lg'
138
- : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto"
144
+ : 'md:flex-row lg:px-8'} bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end px-4 py-4 md:space-x-4"
139
145
  >
140
- <div class="text-grey-600 text-sm md:text-base self-center text-left">
146
+ <div class="self-center text-left text-sm text-grey-600 md:text-base">
141
147
  ${this.getCountdownGracePeriod()}
142
148
  </div>
143
149
  ${!this.isShowButton
144
150
  ? html `
145
151
  <div
146
- class="flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0"
152
+ class="flex w-full flex-col justify-end gap-4 self-center pt-4 md:w-1/2 md:flex-row md:pt-0"
147
153
  >
148
154
  <button
149
- @click=${this.redirectToBerlangganan}
150
- class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto"
155
+ @click=${this.redirectToCheckout}
156
+ class="w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
151
157
  >
152
158
  Perbarui Langganan
153
159
  </button>
160
+ <div class="md:block hidden">
161
+ <button
162
+ @click=${this.redirectToBerlangganan}
163
+ class="bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base"
164
+ >
165
+ Paket Lainnya
166
+ </button>
167
+ </div>
168
+ <div class="md:hidden block">
169
+ <button
170
+ @click=${this.redirectToBerlangganan}
171
+ class="bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base"
172
+ >
173
+ Lihat Paket Lainnya
174
+ </button>
175
+ </div>
154
176
  </div>
155
177
  `
156
178
  : nothing}
@@ -164,7 +186,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
164
186
  }
165
187
  render() {
166
188
  return html `
167
- <div class="sticky bottom-0 w-full h-full bg-orange-100">
189
+ <div class="sticky bottom-0 h-full w-full bg-orange-100">
168
190
  ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}
169
191
  </div>
170
192
  `;
@@ -244,7 +266,10 @@ __decorate([
244
266
  ], KompasGracePeriod.prototype, "maxGracePeriod", void 0);
245
267
  __decorate([
246
268
  state()
247
- ], KompasGracePeriod.prototype, "updateSubscription", void 0);
269
+ ], KompasGracePeriod.prototype, "subscriptionPage", void 0);
270
+ __decorate([
271
+ state()
272
+ ], KompasGracePeriod.prototype, "checkoutPage", void 0);
248
273
  KompasGracePeriod = __decorate([
249
274
  customElement('kompasid-grace-period')
250
275
  ], KompasGracePeriod);
package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n langganan. Segera perbarui paket langganan untuk tetap mengakses\n konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <b class=\"text-orange-500\"\n >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n )\n }\n\n private getGtmParams(): Record<string, any> {\n return {\n paywall_location: this.paywall_location,\n paywall_subscription_package: this.paywall_subscription_package,\n paywall_subscription_id: this.paywall_subscription_id,\n paywall_subscription_price: this.paywall_subscription_price,\n paywall_position: this.paywall_position,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'GP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n }\n\n private sendGtmEvent(event: string) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(),\n },\n ]\n } else {\n gtmParams = { ...gtmParams, ...this.getGtmParams() }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n return html`\n <div\n class=\"${this.isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n >\n <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n ${this.getCountdownGracePeriod()}\n </div>\n ${!this.isShowButton\n ? html`\n <div\n class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n >\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n >\n Perbarui Langganan\n </button>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n langganan. Segera perbarui paket langganan untuk tetap mengakses\n konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <b class=\"text-orange-500\"\n >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(this.subscriptionPage)\n }\n\n private redirectToCheckout(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`,\n )\n }\n\n private getGtmParams(): Record<string, any> {\n return {\n paywall_location: this.paywall_location,\n paywall_subscription_package: this.paywall_subscription_package,\n paywall_subscription_id: this.paywall_subscription_id,\n paywall_subscription_price: this.paywall_subscription_price,\n paywall_position: this.paywall_position,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'GP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n }\n\n private sendGtmEvent(event: string) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(),\n },\n ]\n } else {\n gtmParams = { ...gtmParams, ...this.getGtmParams() }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n return html`\n <div\n class=\"${this.isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8'} bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end px-4 py-4 md:space-x-4\"\n >\n <div class=\"self-center text-left text-sm text-grey-600 md:text-base\">\n ${this.getCountdownGracePeriod()}\n </div>\n ${!this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col justify-end gap-4 self-center pt-4 md:w-1/2 md:flex-row md:pt-0\"\n >\n <button\n @click=${this.redirectToCheckout}\n class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n >\n Perbarui Langganan\n </button>\n <div class=\"md:block hidden\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base\"\n >\n Paket Lainnya\n </button>\n </div>\n <div class=\"md:hidden block\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base\"\n >\n Lihat Paket Lainnya\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 h-full w-full bg-orange-100\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
14
14
  mainCategory: string;
15
15
  titleName: string;
16
16
  titleLink: string;
17
+ isDark: boolean;
17
18
  /**
18
19
  * Fetch Data
19
20
  */
package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js CHANGED
@@ -19,6 +19,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
19
19
  this.mainCategory = '';
20
20
  this.titleName = ''; // contoh: Artikel Terkait / Lainnya dalam 'kategori'
21
21
  this.titleLink = ''; // contoh: /kategori/opini
22
+ this.isDark = false;
22
23
  }
23
24
  /**
24
25
  * Fetch Data
@@ -131,7 +132,12 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
131
132
  return html `
132
133
  <div class="flex font-sans uppercase items-start mb-6 mt-8">
133
134
  <div>
134
- <h5 class="capitalize font-bold font-sans text-grey-600">
135
+ <h5
136
+ class="capitalize font-bold font-sans text-lg md:text-xl ${this
137
+ .isDark
138
+ ? 'text-white'
139
+ : 'text-grey-600'}"
140
+ >
135
141
  Artikel Terkait
136
142
  </h5>
137
143
  </div>
@@ -144,7 +150,11 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
144
150
  href="${this.titleLink}"
145
151
  class="flex font-sans uppercase items-start mb-6 mt-8"
146
152
  >
147
- <h5 class="capitalize font-bold font-sans text-brand-1">
153
+ <h5
154
+ class="capitalize font-bold font-sans text-lg md:text-xl ${this.isDark
155
+ ? 'text-blue-200'
156
+ : 'text-brand-1'}"
157
+ >
148
158
  ${this.titleName}
149
159
  </h5>
150
160
  </a>
@@ -204,7 +214,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
204
214
  }
205
215
  render() {
206
216
  return html `
207
- <div class="w-full">
217
+ <div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
208
218
  <!-- start: widget title -->
209
219
  ${this.type === 'relatedArticle'
210
220
  ? this.titleRelatedArticle()
@@ -223,11 +233,18 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
223
233
  <a href="${post.permalink}">
224
234
  ${this.renderChips(post)}
225
235
  <h5
226
- class="hover:underline font-bold font-sans leading-tight text-grey-600"
236
+ class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
237
+ .isDark
238
+ ? 'text-white'
239
+ : 'text-grey-600'}"
227
240
  >
228
241
  ${post.title}
229
242
  </h5>
230
- <p class="text-grey-600 pt-2">
243
+ <p
244
+ class="font-sans pt-2 text-sm ${this.isDark
245
+ ? 'text-white'
246
+ : 'text-grey-600'}"
247
+ >
231
248
  ${this.formatDate(post.publishedDate)}
232
249
  </p>
233
250
  </a>
@@ -250,11 +267,18 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
250
267
  <a href="${post.permalink}">
251
268
  ${this.renderChips(post)}
252
269
  <h5
253
- class="hover:underline font-bold font-sans leading-tight text-grey-600"
270
+ class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
271
+ .isDark
272
+ ? 'text-white'
273
+ : 'text-grey-600'}"
254
274
  >
255
275
  ${post.title}
256
276
  </h5>
257
- <p class="text-grey-600 pt-2">
277
+ <p
278
+ class="font-sans pt-2 text-sm ${this.isDark
279
+ ? 'text-white'
280
+ : 'text-grey-600'}"
281
+ >
258
282
  ${this.formatDate(post.publishedDate)}
259
283
  </p>
260
284
  </a>
@@ -321,6 +345,9 @@ __decorate([
321
345
  __decorate([
322
346
  property({ type: String })
323
347
  ], KompasWidgetRecirculationsDefault.prototype, "titleLink", void 0);
348
+ __decorate([
349
+ property({ type: Boolean })
350
+ ], KompasWidgetRecirculationsDefault.prototype, "isDark", void 0);
324
351
  KompasWidgetRecirculationsDefault = __decorate([
325
352
  customElement('kompasid-widget-recirculations-default')
326
353
  ], KompasWidgetRecirculationsDefault);
package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n /**\n * Fetch Data\n */\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async relatedArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('related article:', this.posts)\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('other article:', this.posts)\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /**\n * Function to format date\n */\n formatDate(date: string) {\n return format(new Date(date), 'dd MMMM yyyy', { locale: id })\n }\n\n /**\n * Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5 class=\"capitalize font-bold font-sans text-grey-600\">\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5 class=\"capitalize font-bold font-sans text-brand-1\">\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isFreemium = post.isFreemium === true\n\n if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes || {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n render() {\n return html`\n <div class=\"w-full\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n post => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-grey-600\"\n >\n ${post.title}\n </h5>\n <p class=\"text-grey-600 pt-2\">\n ${this.formatDate(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n post => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-grey-600\"\n >\n ${post.title}\n </h5>\n <p class=\"text-grey-600 pt-2\">\n ${this.formatDate(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n /**\n * Fetch Data\n */\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async relatedArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('related article:', this.posts)\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('other article:', this.posts)\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /**\n * Function to format date\n */\n formatDate(date: string) {\n return format(new Date(date), 'dd MMMM yyyy', { locale: id })\n }\n\n /**\n * Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isFreemium = post.isFreemium === true\n\n if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes || {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n post => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.formatDate(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n post => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.formatDate(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare class KompasWidgetRecirculationsList extends LitElement {
16
16
  articleList: ListItem[];
17
17
  accessToken: string;
18
18
  apiSlug: string;
19
+ isDark: boolean;
19
20
  static styles: import("lit").CSSResult[];
20
21
  connectedCallback(): Promise<void>;
21
22
  fetchAccessToken(): Promise<void>;
package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js CHANGED
@@ -11,6 +11,7 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
11
11
  this.articleList = [];
12
12
  this.accessToken = '';
13
13
  this.apiSlug = '';
14
+ this.isDark = false;
14
15
  }
15
16
  async connectedCallback() {
16
17
  super.connectedCallback();
@@ -113,9 +114,14 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
113
114
  }
114
115
  render() {
115
116
  return html `
116
- <div>
117
+ <div class="${this.isDark ? 'bg-dark-5 ' : ''}">
117
118
  <div class="mb-6">
118
- <h5 class="capitalize font-bold text-grey-600 font-sans">
119
+ <h5
120
+ class="capitalize font-bold font-sans text-lg md:text-xl ${this
121
+ .isDark
122
+ ? 'text-white'
123
+ : 'text-grey-600'}"
124
+ >
119
125
  ${this.widgetTitle}
120
126
  </h5>
121
127
  </div>
@@ -128,12 +134,18 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
128
134
  ${this.renderChips(item)}
129
135
  <a
130
136
  href="${item.permalink}"
131
- class="font-bold font-sans hover:underline leading-tight text-base text-grey-600"
137
+ class="font-bold font-lora hover:underline leading-normal text-xl ${this
138
+ .isDark
139
+ ? 'text-white'
140
+ : 'text-grey-600'}"
132
141
  >
133
142
  ${item.title}
134
143
  </a>
135
144
  <div
136
- class="flex w-full flex-row items-center leading-normal justify-between text-sm text-grey-500 font-sans pt-2"
145
+ class="flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this
146
+ .isDark
147
+ ? 'text-white'
148
+ : 'text-grey-500'}"
137
149
  >
138
150
  ${item.publishedDate
139
151
  ? this.formatDate(item.publishedDate)
@@ -181,6 +193,9 @@ __decorate([
181
193
  __decorate([
182
194
  property({ type: String })
183
195
  ], KompasWidgetRecirculationsList.prototype, "apiSlug", void 0);
196
+ __decorate([
197
+ property({ type: Boolean })
198
+ ], KompasWidgetRecirculationsList.prototype, "isDark", void 0);
184
199
  KompasWidgetRecirculationsList = __decorate([
185
200
  customElement('kompasid-widget-recirculations-list')
186
201
  ], KompasWidgetRecirculationsList);
package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\ninterface PostTag {\n slug: string\n}\n\ninterface ListItem {\n title: string\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n permalink: string\n publishedDate?: string\n postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n @property({ type: String }) widgetTitle = ''\n @property({ type: Array }) articleList: ListItem[] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) apiSlug = ''\n\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n await this.fetchArticles()\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async fetchArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n this.articleList = result.result.map(\n (article: {\n postTag?: never[] | undefined\n isFreemium?: false | undefined\n title: any\n permalink: any\n publishedDate: any\n }) => {\n const {\n postTag = [],\n isFreemium = false,\n title,\n permalink,\n publishedDate,\n } = article\n\n const isAnalisis = postTag.some(\n (tag: { slug: string }) => tag.slug === 'analisis'\n )\n const isEksklusif = postTag.some(\n (tag: { slug: string }) => tag.slug === 'eksklusif'\n )\n\n return {\n isAnalisis,\n isEksklusif,\n isFreemium,\n title,\n permalink,\n publishedDate,\n }\n }\n )\n } else {\n throw new Error('Data artikel populer tidak ditemukan')\n }\n }\n\n formatDate(date: string) {\n return format(new Date(date), \"dd MMMM yyyy' · 'HH:mm' WIB\", { locale: id })\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n renderChips(item: ListItem) {\n const chips = []\n\n if (item.isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n if (item.isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n }\n\n if (item.isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n render() {\n return html`\n <div>\n <div class=\"mb-6\">\n <h5 class=\"capitalize font-bold text-grey-600 font-sans\">\n ${this.widgetTitle}\n </h5>\n </div>\n\n <ul class=\"flex flex-col\">\n ${this.articleList.slice(0, 5).map(\n item =>\n html`\n <li class=\"flex flex-col items-start mb-3\">\n <div class=\"flex w-full\">\n <div class=\"flex flex-col w-full\">\n ${this.renderChips(item)}\n <a\n href=\"${item.permalink}\"\n class=\"font-bold font-sans hover:underline leading-tight text-base text-grey-600\"\n >\n ${item.title}\n </a>\n <div\n class=\"flex w-full flex-row items-center leading-normal justify-between text-sm text-grey-500 font-sans pt-2\"\n >\n ${item.publishedDate\n ? this.formatDate(item.publishedDate)\n : 'Tanggal tidak tersedia'}\n </div>\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\ninterface PostTag {\n slug: string\n}\n\ninterface ListItem {\n title: string\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n permalink: string\n publishedDate?: string\n postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n @property({ type: String }) widgetTitle = ''\n @property({ type: Array }) articleList: ListItem[] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) apiSlug = ''\n\n @property({ type: Boolean }) isDark = false\n\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n await this.fetchArticles()\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async fetchArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n this.articleList = result.result.map(\n (article: {\n postTag?: never[] | undefined\n isFreemium?: false | undefined\n title: any\n permalink: any\n publishedDate: any\n }) => {\n const {\n postTag = [],\n isFreemium = false,\n title,\n permalink,\n publishedDate,\n } = article\n\n const isAnalisis = postTag.some(\n (tag: { slug: string }) => tag.slug === 'analisis'\n )\n const isEksklusif = postTag.some(\n (tag: { slug: string }) => tag.slug === 'eksklusif'\n )\n\n return {\n isAnalisis,\n isEksklusif,\n isFreemium,\n title,\n permalink,\n publishedDate,\n }\n }\n )\n } else {\n throw new Error('Data artikel populer tidak ditemukan')\n }\n }\n\n formatDate(date: string) {\n return format(new Date(date), \"dd MMMM yyyy' · 'HH:mm' WIB\", { locale: id })\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n renderChips(item: ListItem) {\n const chips = []\n\n if (item.isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n if (item.isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n }\n\n if (item.isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n render() {\n return html`\n <div class=\"${this.isDark ? 'bg-dark-5 ' : ''}\">\n <div class=\"mb-6\">\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.widgetTitle}\n </h5>\n </div>\n\n <ul class=\"flex flex-col\">\n ${this.articleList.slice(0, 5).map(\n item =>\n html`\n <li class=\"flex flex-col items-start mb-3\">\n <div class=\"flex w-full\">\n <div class=\"flex flex-col w-full\">\n ${this.renderChips(item)}\n <a\n href=\"${item.permalink}\"\n class=\"font-bold font-lora hover:underline leading-normal text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${item.title}\n </a>\n <div\n class=\"flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this\n .isDark\n ? 'text-white'\n : 'text-grey-500'}\"\n >\n ${item.publishedDate\n ? this.formatDate(item.publishedDate)\n : 'Tanggal tidak tersedia'}\n </div>\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n}\n"]}