@kompasid/lit-web-components 0.9.17 → 0.9.19

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.
@@ -54,6 +54,9 @@ export declare class KompasGracePeriod extends LitElement {
54
54
  private maxGracePeriod;
55
55
  private subscriptionPage;
56
56
  private checkoutPage;
57
+ private tempTextEachDay;
58
+ private tempButtonA;
59
+ private tempButtonB;
57
60
  private getCountdownGracePeriod;
58
61
  private redirectToKnowledgeBase;
59
62
  private redirectToBerlangganan;
@@ -59,54 +59,74 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
59
59
  this.maxGracePeriod = 7;
60
60
  this.subscriptionPage = 'https://www.kompas.id/berlangganan';
61
61
  this.checkoutPage = 'https://checkoutv2.kompas.id';
62
+ this.tempTextEachDay = [];
63
+ this.tempButtonA = {
64
+ url: '',
65
+ text: '',
66
+ };
67
+ this.tempButtonB = {
68
+ url: '',
69
+ text: '',
70
+ };
62
71
  }
63
72
  getCountdownGracePeriod() {
64
73
  const { totalGracePeriod } = this;
65
74
  const { maxGracePeriod } = this;
66
- if (totalGracePeriod === 7) {
67
- return html `
68
- <p>
69
- Anda dalam
70
- <a
71
- href="#"
72
- class="text-orange-500 underline font-bold cursor-pointer"
73
- @click=${this.redirectToKnowledgeBase}
74
- >
75
- hari terakhir
76
- </a>
77
- masa tenggang langganan. Segera perbarui paket langganan untuk tetap
78
- mengakses konten premium tanpa batas.
79
- </p>
80
- `;
81
- }
82
75
  return html `
83
- <p>
84
- Masa tenggang langganan Anda tersisa
85
- <a
86
- href="#"
87
- class="text-orange-500 underline font-bold cursor-pointer"
88
- @click=${this.redirectToKnowledgeBase}
89
- >
90
- ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a
91
- >. Segera perbarui paket langganan untuk tetap mengakses konten premium
92
- tanpa batas.
93
- </p>
76
+ <p
77
+ class="message-gp"
78
+ .innerHTML=${this.tempTextEachDay[maxGracePeriod - totalGracePeriod + 1 - 1]}
79
+ ></p>
94
80
  `;
81
+ // comment old html
82
+ // if (totalGracePeriod === 7) {
83
+ // return html`
84
+ // <p>
85
+ // Anda dalam
86
+ // <a
87
+ // href="#"
88
+ // class="text-orange-500 underline font-bold cursor-pointer"
89
+ // @click=${this.redirectToKnowledgeBase}
90
+ // >
91
+ // hari terakhir
92
+ // </a>
93
+ // masa tenggang langganan. Segera perbarui paket langganan untuk tetap
94
+ // mengakses konten premium tanpa batas.
95
+ // </p>
96
+ // `
97
+ // }
98
+ // return html`
99
+ // <p>
100
+ // Masa tenggang langganan Anda tersisa
101
+ // <a
102
+ // href="#"
103
+ // class="text-orange-500 underline font-bold cursor-pointer"
104
+ // @click=${this.redirectToKnowledgeBase}
105
+ // >
106
+ // ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a
107
+ // >. Segera perbarui paket langganan untuk tetap mengakses konten premium
108
+ // tanpa batas.
109
+ // </p>
110
+ // `
95
111
  }
96
112
  redirectToKnowledgeBase() {
97
113
  window.open('https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/', '_blank');
98
114
  }
99
115
  redirectToBerlangganan() {
116
+ const { url = '' } = this.tempButtonB;
100
117
  this.dataLayeronPerbaruiLanggananButton();
101
118
  this.sendGtmEvent('subscribe_button_clicked', true);
102
- const url = `${this.subscriptionPage}?open_from=Grace_Period`;
103
- window.open(url);
119
+ const urlComputed = url || `${this.subscriptionPage}?open_from=Grace_Period`;
120
+ window.open(urlComputed);
104
121
  }
105
122
  redirectToCheckout() {
123
+ const { url = '' } = this.tempButtonA;
106
124
  this.dataLayeronPerbaruiLanggananButton();
107
125
  const originHost = encodeURIComponent(window.location.href);
108
126
  this.sendGtmEvent('subscribe_button_clicked');
109
- window.open(`${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`);
127
+ const defaultPath = url ||
128
+ `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`;
129
+ window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`);
110
130
  }
111
131
  getGtmParams(excludeSubscriptionParams = false) {
112
132
  const gtmParams = {};
@@ -169,6 +189,8 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
169
189
  }
170
190
  gracePeriodTemplate() {
171
191
  const { isColumn, isBackgroundOnContentOnly } = this;
192
+ const { text: textA = '' } = this.tempButtonA;
193
+ const { text: textB = '' } = this.tempButtonB;
172
194
  const wrapperColumnClass = isColumn
173
195
  ? 'rounded-lg'
174
196
  : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4';
@@ -198,14 +220,14 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
198
220
  @click=${this.redirectToCheckout}
199
221
  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"
200
222
  >
201
- Perbarui Langganan
223
+ ${textA || 'Perbarui Langganan'}
202
224
  </button>
203
225
  <div class="md:block hidden">
204
226
  <button
205
227
  @click=${this.redirectToBerlangganan}
206
228
  class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
207
229
  >
208
- Paket Lainnya
230
+ ${textB || 'Paket Lainnya'}
209
231
  </button>
210
232
  </div>
211
233
  <div class="md:hidden block">
@@ -213,7 +235,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
213
235
  @click=${this.redirectToBerlangganan}
214
236
  class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
215
237
  >
216
- Lihat Paket Lainnya
238
+ ${textB || 'Lihat Paket Lainnya'}
217
239
  </button>
218
240
  </div>
219
241
  </div>
@@ -223,6 +245,13 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
223
245
  `;
224
246
  }
225
247
  async connectedCallback() {
248
+ // Constructing the URL with parameters
249
+ const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`;
250
+ const response = await fetch(endpoint);
251
+ const result = await response.json();
252
+ this.tempTextEachDay = result.message;
253
+ this.tempButtonA = result.buttonA;
254
+ this.tempButtonB = result.buttonB;
226
255
  super.connectedCallback();
227
256
  this.sendGtmEvent('paywall_viewed');
228
257
  this.dataLayeronGracePeriod();
@@ -250,6 +279,13 @@ KompasGracePeriod.styles = [
250
279
  height: 100%;
251
280
  width: 100%;
252
281
  }
282
+
283
+ .message-gp > a {
284
+ color: #db5d00;
285
+ text-decoration-line: underline;
286
+ font-weight: 700;
287
+ cursor: pointer;
288
+ }
253
289
  `,
254
290
  TWStyles,
255
291
  ];
@@ -328,6 +364,15 @@ __decorate([
328
364
  __decorate([
329
365
  state()
330
366
  ], KompasGracePeriod.prototype, "checkoutPage", void 0);
367
+ __decorate([
368
+ state()
369
+ ], KompasGracePeriod.prototype, "tempTextEachDay", void 0);
370
+ __decorate([
371
+ state()
372
+ ], KompasGracePeriod.prototype, "tempButtonA", void 0);
373
+ __decorate([
374
+ state()
375
+ ], KompasGracePeriod.prototype, "tempButtonB", void 0);
331
376
  KompasGracePeriod = __decorate([
332
377
  customElement('kompasid-grace-period')
333
378
  ], KompasGracePeriod);
@@ -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 isEpaper = is paywall opened in epaper page\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 * property tracker_epaper_edition = the edition of epaper viewed by user\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = true\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) source = 'article'\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\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\n <a\n href=\"#\"\n class=\"text-orange-500 underline font-bold cursor-pointer\"\n @click=${this.redirectToKnowledgeBase}\n >\n hari terakhir\n </a>\n masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n mengakses konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <a\n href=\"#\"\n class=\"text-orange-500 underline font-bold cursor-pointer\"\n @click=${this.redirectToKnowledgeBase}\n >\n ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToKnowledgeBase(): void {\n window.open(\n 'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n '_blank'\n )\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n const url = `${this.subscriptionPage}?open_from=Grace_Period`\n window.open(url)\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}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`\n )\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\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 const { isColumn, isBackgroundOnContentOnly } = this\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\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-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\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-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\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 const bgClass = !this.isBackgroundOnContentOnly\n ? 'bg-orange-100 sticky bottom-0 z-20'\n : ''\n return html`\n <div class=\"h-full w-full ${bgClass}\">\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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAwBL;;WAEG;QACH;;;;;;;;;;;;;;;;;;;;;WAqBG;QAEyB,qBAAgB,GAAG,CAAC,CAAA;QACnB,aAAQ,GAAG,KAAK,CAAA;QAChB,iBAAY,GAAG,IAAI,CAAA;QACnB,aAAQ,GAAG,KAAK,CAAA;QAChB,8BAAyB,GAAG,KAAK,CAAA;QAClC,WAAM,GAAG,SAAS,CAAA;QAClB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,CAAC,CAAA;QAC3B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,2BAAsB,GAAG,EAAE,CAAA;QAEvD;;WAEG;QACc,mBAAc,GAAG,CAAC,CAAA;QAClB,qBAAgB,GAAG,oCAAoC,CAAA;QACvD,iBAAY,GAAG,8BAA8B,CAAA;QAC7C,oBAAe,GAAG,EAAE,CAAA;QACpB,gBAAW,GAGxB;YACF,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,EAAE;SACT,CAAA;QACgB,gBAAW,GAGxB;YACF,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,EAAE;SACT,CAAA;IA2OH,CAAC;IAzOS,uBAAuB;QAC7B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAA;QACjC,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAA;QAC/B,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,eAAe,CAC/B,cAAc,GAAG,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAC1C;;KAEJ,CAAA;QACD,mBAAmB;QACnB,gCAAgC;QAChC,iBAAiB;QACjB,UAAU;QACV,mBAAmB;QACnB,WAAW;QACX,mBAAmB;QACnB,qEAAqE;QACrE,iDAAiD;QACjD,UAAU;QACV,wBAAwB;QACxB,aAAa;QACb,6EAA6E;QAC7E,8CAA8C;QAC9C,WAAW;QACX,MAAM;QACN,IAAI;QACJ,eAAe;QACf,QAAQ;QACR,2CAA2C;QAC3C,SAAS;QACT,iBAAiB;QACjB,mEAAmE;QACnE,+CAA+C;QAC/C,QAAQ;QACR,+DAA+D;QAC/D,8EAA8E;QAC9E,mBAAmB;QACnB,SAAS;QACT,IAAI;IACN,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,IAAI,CACT,6FAA6F,EAC7F,QAAQ,CACT,CAAA;IACH,CAAC;IAEO,sBAAsB;QAC5B,MAAM,EAAE,GAAG,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QACrC,IAAI,CAAC,kCAAkC,EAAE,CAAA;QACzC,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAA;QAEnD,MAAM,WAAW,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,gBAAgB,yBAAyB,CAAA;QAC5E,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC;IAEO,kBAAkB;QACxB,MAAM,EAAE,GAAG,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QACrC,IAAI,CAAC,kCAAkC,EAAE,CAAA;QACzC,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnE,IAAI,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAA;QAE7C,MAAM,WAAW,GACf,GAAG;YACH,GAAG,IAAI,CAAC,YAAY,qBAAqB,IAAI,CAAC,uBAAuB,gBAAgB,CAAA;QAEvF,MAAM,CAAC,IAAI,CAAC,GAAG,WAAW,aAAa,UAAU,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAC5E,CAAC;IAEO,YAAY,CAClB,4BAAqC,KAAK;QAE1C,MAAM,SAAS,GAAwB,EAAE,CAAA;QAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAA;YACpD,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAA;YAC9C,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,0BAA0B,CAAA;YAC9D,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAA;YAClD,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAA;SAC7C;aAAM;YACL,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAA;SACvD;QAED,IAAI,CAAC,yBAAyB,EAAE;YAC9B,SAAS,CAAC,4BAA4B,GAAG,IAAI,CAAC,4BAA4B,CAAA;YAC1E,SAAS,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAA;YAChE,SAAS,CAAC,0BAA0B,GAAG,IAAI,CAAC,0BAA0B,CAAA;SACvE;QAED,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAA;QAClD,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAA;QAClD,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAA;QAC5C,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,2BAA2B,CAAA;QAChE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,mBAAmB,IAAI,WAAW,CAAA;QAC/D,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAA;QACpE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,4BAA4B,CAAA;QAElE,OAAO,SAAS,CAAA;IAClB,CAAC;IAEO,YAAY,CAClB,KAAa,EACb,4BAAqC,KAAK;QAE1C,IAAI,SAAS,GAAwB,EAAE,KAAK,EAAE,CAAA;QAE9C,IAAI,KAAK,KAAK,gBAAgB,EAAE;YAC9B,SAAS,CAAC,WAAW,GAAG;gBACtB;oBACE,GAAG,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC;iBAChD;aACF,CAAA;SACF;aAAM;YACL,SAAS,GAAG;gBACV,GAAG,SAAS;gBACZ,GAAG,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC;aAChD,CAAA;SACF;QAED,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAClC,CAAC;IAEO,kCAAkC;QACxC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE,UAAU,EAAE;YACvB,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB;YACpD,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;SAC9B,CAAC,CAAA;IACJ,CAAC;IAEO,sBAAsB;QAC5B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,uBAAuB;YAC9B,SAAS,EAAE,UAAU,EAAE;YACvB,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB;YACpD,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;SAC9B,CAAC,CAAA;IACJ,CAAC;IAEO,mBAAmB;QACzB,MAAM,EAAE,QAAQ,EAAE,yBAAyB,EAAE,GAAG,IAAI,CAAA;QAEpD,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QAE7C,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QAE7C,MAAM,kBAAkB,GAAG,QAAQ;YACjC,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,4CAA4C,CAAA;QAChD,MAAM,iBAAiB,GAAG,QAAQ;YAChC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,+CAA+C,CAAA;QACnD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAA;QACvD,MAAM,cAAc,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAC9D,MAAM,cAAc,GAAG,yBAAyB;YAC9C,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,EAAE,CAAA;QAEN,OAAO,IAAI,CAAA;;6EAE8D,kBAAkB,IAAI,cAAc;;;4EAGrC,cAAc;;YAE9E,IAAI,CAAC,uBAAuB,EAAE;;UAEhC,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;;gEAEgD,iBAAiB;;;2BAGtD,IAAI,CAAC,kBAAkB;;;oBAG9B,KAAK,IAAI,oBAAoB;;;;6BAIpB,IAAI,CAAC,sBAAsB;+IACuF,mBAAmB;;sBAE5I,KAAK,IAAI,eAAe;;;;;6BAKjB,IAAI,CAAC,sBAAsB;+IACuF,mBAAmB;;sBAE5I,KAAK,IAAI,qBAAqB;;;;aAIvC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,uCAAuC;QACvC,MAAM,QAAQ,GAAG,mEAAmE,CAAA;QACpF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAA;QACtC,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QACpC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,OAAO,CAAA;QACrC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAA;QACjC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAA;QAEjC,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAA;QAEnC,IAAI,CAAC,sBAAsB,EAAE,CAAA;IAC/B,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,yBAAyB;YAC7C,CAAC,CAAC,oCAAoC;YACtC,CAAC,CAAC,EAAE,CAAA;QACN,OAAO,IAAI,CAAA;kCACmB,OAAO;UAC/B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,OAAO;;KAErE,CAAA;IACH,CAAC;;AAtUM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;IACD,QAAQ;CACT,CAAA;AA4B2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAqB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAiB;AAChB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAoB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAiB;AAChB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oEAAkC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA4B;AAK9C;IAAR,KAAK,EAAE;yDAA2B;AAC1B;IAAR,KAAK,EAAE;2DAAgE;AAC/D;IAAR,KAAK,EAAE;uDAAsD;AACrD;IAAR,KAAK,EAAE;0DAA6B;AAC5B;IAAR,KAAK,EAAE;sDAMP;AACQ;IAAR,KAAK,EAAE;sDAMP;AA7FU,iBAAiB;IAD7B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,iBAAiB,CAwU7B;SAxUY,iBAAiB","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 .message-gp > a {\n color: #db5d00;\n text-decoration-line: underline;\n font-weight: 700;\n cursor: pointer;\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 isEpaper = is paywall opened in epaper page\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 * property tracker_epaper_edition = the edition of epaper viewed by user\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = true\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) source = 'article'\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\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 @state() private tempTextEachDay = []\n @state() private tempButtonA: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n @state() private tempButtonB: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n return html`\n <p\n class=\"message-gp\"\n .innerHTML=${this.tempTextEachDay[\n maxGracePeriod - totalGracePeriod + 1 - 1\n ]}\n ></p>\n `\n // comment old html\n // if (totalGracePeriod === 7) {\n // return html`\n // <p>\n // Anda dalam\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // hari terakhir\n // </a>\n // masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n // mengakses konten premium tanpa batas.\n // </p>\n // `\n // }\n // return html`\n // <p>\n // Masa tenggang langganan Anda tersisa\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n // >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n // tanpa batas.\n // </p>\n // `\n }\n\n private redirectToKnowledgeBase(): void {\n window.open(\n 'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n '_blank'\n )\n }\n\n private redirectToBerlangganan(): void {\n const { url = '' } = this.tempButtonB\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n const urlComputed = url || `${this.subscriptionPage}?open_from=Grace_Period`\n window.open(urlComputed)\n }\n\n private redirectToCheckout(): void {\n const { url = '' } = this.tempButtonA\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n const defaultPath =\n url ||\n `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`\n\n window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`)\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\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 const { isColumn, isBackgroundOnContentOnly } = this\n\n const { text: textA = '' } = this.tempButtonA\n\n const { text: textB = '' } = this.tempButtonB\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\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 ${textA || '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-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB || '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-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB || 'Lihat Paket Lainnya'}\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n // Constructing the URL with parameters\n const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`\n const response = await fetch(endpoint)\n const result = await response.json()\n this.tempTextEachDay = result.message\n this.tempButtonA = result.buttonA\n this.tempButtonB = result.buttonB\n\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n const bgClass = !this.isBackgroundOnContentOnly\n ? 'bg-orange-100 sticky bottom-0 z-20'\n : ''\n return html`\n <div class=\"h-full w-full ${bgClass}\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
@@ -282,7 +282,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
282
282
  >
283
283
  <div
284
284
  ref="logo-kompas"
285
- class="flex items-center justify-between px-4 py-6 w-full"
285
+ class="flex items-center justify-between p-6 w-full"
286
286
  >
287
287
  <a href="/" class="flex h-9 w-9">
288
288
  <img
@@ -299,7 +299,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
299
299
  ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
300
300
  </span>
301
301
  </div>
302
- <div class="flex flex-wrap px-4 w-full">
302
+ <div class="flex flex-wrap px-6 w-full">
303
303
  ${this.dataExternal.map(item => html `
304
304
  <a href="${item.url}" class="flex w-1/2 no-underline">
305
305
  <div
@@ -333,7 +333,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
333
333
  <div class="w-full font-sans">
334
334
  <!-- Parent item -->
335
335
  <div
336
- class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
336
+ class="flex items-center justify-between px-6 text-sm font-medium text-gray-700 transition-all cursor-pointer"
337
337
  @click=${(e) => this.rubricClicked(item, e)}
338
338
  >
339
339
  <div
@@ -436,7 +436,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
436
436
  ${this.hasChildren(item)
437
437
  ? html `
438
438
  <span
439
- class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold"
439
+ class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold text-grey-400"
440
440
  @click=${(e) => {
441
441
  e.stopPropagation(); // Prevents click from bubbling to parent
442
442
  this.toggleChildren(item);
@@ -1 +1 @@
1
- {"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\ninterface DataExternalLink {\n external?: boolean\n gtmClass?: string\n icon: object | null\n iconify: string | null\n isNew: boolean\n name: string\n url: string\n}\n\ninterface dataType {\n href: string\n external?: boolean\n icon: object | null\n iconify: string | null\n name: string\n slug: string\n redDot: [\n {\n start: string\n end: string\n }\n ]\n children: [\n {\n href: string\n external: boolean\n icon: string\n iconify: string | null\n name: string\n slug: string\n redDot: [\n {\n start: string\n end: string\n }\n ]\n }\n ]\n}\ninterface DataSideBarLink {\n feature: dataType[]\n category: dataType[]\n lainnya: dataType[]\n}\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n hasSlotContent = false\n shadowRoot: any\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector('slot')\n const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n this.hasSlotContent = assignedNodes.length > 0\n }\n\n static styles = [\n css`\n .slide-side-enter-active,\n .slide-side-leave-active {\n transition: all 0.3s ease-out;\n }\n .slide-side-enter,\n .slide-side-leave-to {\n transform: translateX(-100%);\n }\n /* end: transisi buat sidebar */\n .nuxt-link-exact-active {\n @apply text-brand-1;\n }\n .menu-menu-sidebar {\n z-index: 99999;\n }\n /* Force scrollbar to always show (for debugging) */\n .menu-menu-sidebar::-webkit-scrollbar {\n width: 4px;\n }\n\n .menu-menu-sidebar::-webkit-scrollbar-track {\n background: white;\n }\n\n .menu-menu-sidebar::-webkit-scrollbar-thumb {\n background-color: #00557d; /* Replace with your brand color */\n border-radius: 8px;\n }\n\n .menu-menu-sidebar::-webkit-scrollbar-button,\n .menu-menu-sidebar::-webkit-scrollbar-corner {\n background-color: white;\n }\n `,\n TWStyles,\n ]\n @property({ type: Array }) dataExternal: DataExternalLink[] = []\n @property({ type: Boolean }) isDark = false\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchExternal()\n } catch (error) {\n this.handleFetchError(error)\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 dataSidebar: DataSideBarLink = {\n feature: [],\n category: [],\n lainnya: [],\n }\n\n async fetchExternal() {\n // External\n const endpointExternal = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuExternalLinkV2.json`\n const response = await fetch(endpointExternal, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n const resultExternal = await response.json()\n // eslint-disable-next-line no-undef\n if (!resultExternal || !Array.isArray(resultExternal)) {\n console.error(\n 'Error: resultExternal.result is undefined or not an array',\n resultExternal\n )\n this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined\n } else {\n this.dataExternal = resultExternal.map(\n (externalLink: Partial<DataExternalLink>) => ({\n external: externalLink.external ?? false,\n gtmClass: externalLink.gtmClass ?? '',\n icon: externalLink.icon ?? null,\n iconify: externalLink.iconify ?? null,\n isNew: externalLink.isNew ?? false,\n name: externalLink.name ?? '',\n url: externalLink.url ?? '',\n })\n )\n }\n\n // Sidebar\n const endpointSidebar = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuSideV3.json`\n const responseSidebar = await fetch(endpointSidebar, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n const resultSidebar = await responseSidebar.json()\n // Validate the structure of the response\n if (!resultSidebar || typeof resultSidebar !== 'object') {\n console.error('Invalid response format:', resultSidebar)\n return\n }\n\n // Convert object to an array\n const sidebarArray = Object.values(resultSidebar)\n const [featureArray, categoryArray, othersArray] = sidebarArray as [\n any[],\n any[],\n any[]\n ]\n const features: dataType[] =\n featureArray?.map((item: any) => ({\n href: item?.href ?? '',\n external: item?.external ?? false,\n icon: item?.icon ?? null,\n iconify: item?.iconify ?? null,\n name: item?.name ?? '',\n slug: item?.slug ?? '',\n redDot: [\n {\n start: item?.redDot?.start ?? '',\n end: item?.redDot?.end ?? '',\n },\n ],\n children: Array.isArray(item?.children)\n ? item.children.map((child: any) => ({\n href: child?.href ?? '',\n external: child?.external ?? false,\n icon: child?.icon ?? '',\n iconify: child?.iconify ?? '',\n name: child?.name ?? '',\n slug: child?.slug ?? '',\n redDot: [\n {\n start: child?.redDot?.start ?? '',\n end: child?.redDot?.end ?? '',\n },\n ],\n }))\n : [],\n })) ?? []\n\n // Map category data\n const categories: dataType[] =\n categoryArray?.map((item: any) => ({\n href: item?.href ?? '',\n external: item?.external ?? false,\n icon: item?.icon ?? null,\n iconify: item?.iconify ?? null,\n name: item?.name ?? '',\n slug: item?.slug ?? '',\n redDot: [\n {\n start: item?.redDot?.start ?? '',\n end: item?.redDot?.end ?? '',\n },\n ],\n children: Array.isArray(item?.children)\n ? item.children.map((child: any) => ({\n href: child?.href ?? '',\n external: child?.external ?? false,\n icon: child?.icon ?? '',\n iconify: child?.iconify ?? '',\n name: child?.name ?? '',\n slug: child?.slug ?? '',\n redDot: [\n {\n start: child?.redDot?.start ?? '',\n end: child?.redDot?.end ?? '',\n },\n ],\n }))\n : [],\n })) ?? []\n\n // Map others data\n const others: dataType[] =\n othersArray?.map((item: any) => ({\n href: item?.href ?? '',\n external: item?.external ?? false,\n icon: item?.icon ?? null,\n iconify: item?.iconify ?? null,\n name: item?.name ?? '',\n slug: item?.slug ?? '',\n redDot: [\n {\n start: item?.redDot?.start ?? '',\n end: item?.redDot?.end ?? '',\n },\n ],\n children: Array.isArray(item?.children)\n ? item.children.map((child: any) => ({\n href: child?.href ?? '',\n external: child?.external ?? false,\n icon: child?.icon ?? '',\n iconify: child?.iconify ?? '',\n name: child?.name ?? '',\n slug: child?.slug ?? '',\n redDot: [\n {\n start: child?.redDot?.start ?? '',\n end: child?.redDot?.end ?? '',\n },\n ],\n }))\n : [],\n })) ?? []\n\n this.dataSidebar = {\n feature: features,\n category: categories,\n lainnya: others,\n }\n this.requestUpdate()\n }\n\n renderChips() {\n const chips = []\n chips.push(\n html`\n <div class=\"flex\">\n <div\n class=\"py-0.5 px-1.5 rounded-full\"\n style=\"position: relative; display: inline-flex; background-color:#D71920;\"\n >\n <span class=\"font-bold font-sans text-xs text-white capitalize\"\n >Baru</span\n >\n </div>\n </div>\n `\n )\n return chips\n }\n\n hasChildren(item: any): boolean {\n return Array.isArray(item?.children) && item.children.length > 0\n }\n\n rubricClicked(item: { name: string; href?: string }, event?: Event): void {\n if (event) {\n event.stopPropagation() // Prevent parent click event\n }\n if (item.href) {\n window.location.href = item.href\n }\n\n // add data layer here\n }\n\n @state()\n private expandedSlug: string | null = null\n private toggleChildren(item: any) {\n this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n }\n\n @state()\n private showNavBar: boolean = false\n\n toggleNavSidebar = (e: Event) => {\n e.stopPropagation() // prevent bubbling\n this.showNavBar = !this.showNavBar\n }\n\n render() {\n return html`\n <!-- Button Menu -->\n <div\n class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n @click=${this.toggleNavSidebar}\n >\n <slot></slot>\n ${!this.hasSlotContent\n ? html`\n <div\n class=\"h-4 inline-flex ${this.isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n </div>\n <span\n class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n .isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n Menu\n </span>\n `\n : ''}\n </div>\n <!-- Side Menu -->\n <nav\n @click=${this.toggleNavSidebar}\n class=${this.showNavBar\n ? 'fixed left-0 top-0 w-screen z-[100]'\n : 'hidden'}\n >\n <div\n ref=\"toggle-nav-sidebar\"\n class=\"bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg\"\n style=\"width: 312px;\"\n >\n <div\n class=\"bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full\"\n >\n <div\n ref=\"logo-kompas\"\n class=\"flex items-center justify-between px-4 py-6 w-full\"\n >\n <a href=\"/\" class=\"flex h-9 w-9\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-gold.svg\"\n alt=\"Kompas.id\"\n scale=\"0\"\n class=\"block w-full\"\n />\n </a>\n <span\n class=\"font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n @click=${this.toggleNavSidebar}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </span>\n </div>\n <div class=\"flex flex-wrap px-4 w-full\">\n ${this.dataExternal.map(\n item => html`\n <a href=\"${item.url}\" class=\"flex w-1/2 no-underline\">\n <div\n class=\"cursor-pointer flex items-center pb-4 w-[312px]\"\n >\n ${item.icon &&\n Array.isArray(item.icon) &&\n item.icon.length >= 2\n ? html`\n <div class=\"flex mr-2 text-brand-1\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>\n `\n : ''}\n <span class=\"font-sans relative text-xs text-[#666666]\">\n ${item.name}\n </span>\n <div class=\"ml-1\">\n ${item.isNew ? this.renderChips() : ''}\n </div>\n </div>\n </a>\n `\n )}\n </div>\n </div>\n <div class=\"border-b border-[#DDD] m-6 \"></div>\n <!-- feature -->\n <div class=\"flex\">\n <div class=\"flex justify-between flex-col\">\n ${this.dataSidebar.feature.map(\n item => html`\n <div class=\"w-full font-sans\">\n <!-- Parent item -->\n <div\n class=\"flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n >\n <div class=\"flex items-center space-x-3\">\n <span\n class=\"text-sm font-bold relative text-[#333] w-full\"\n >${decodeSpecialChars(item.name)}</span\n >\n ${timedContent(\n item.redDot[0].start,\n item.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n\n <!-- Toggle chevron -->\n ${this.hasChildren(item)\n ? html`\n <span\n class=\"text-xs text-brand-1 bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer\"\n @click=${(e: Event) => {\n e.stopPropagation() // Prevents click from bubbling to parent\n this.toggleChildren(item)\n }}\n >\n ${this.expandedSlug === item.slug\n ? unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-up',\n 12,\n 12\n )\n )\n : unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n\n <!-- Children items -->\n ${this.hasChildren(item) && this.expandedSlug === item.slug\n ? html`\n <div class=\"pl-14 pt-1 pb-2 space-y-1\">\n ${item.children.map(\n child => html`\n <div\n class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n @click=${() => this.rubricClicked(child)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot[0].start,\n child.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n <div></div>\n </div>\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n `\n )}\n </div>\n </div>\n <div class=\"border-b border-[#DDD] m-6 \"></div>\n <!-- category -->\n <div class=\"flex\">\n <div class=\"w-full flex justify-between flex-col\">\n <span class=\"text-sm text-grey-400 px-6 font-normal\"\n >Redaksional</span\n >\n ${this.dataSidebar.category.map(\n item => html`\n <div class=\"w-full font-sans\">\n <!-- Parent item -->\n <div\n class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n >\n <div class=\"flex items-center space-x-3\">\n <span\n class=\"font-bold ${item.name === 'Beranda'\n ? 'text-[#00559a]'\n : 'text-[#333] w-full'}\"\n >${decodeSpecialChars(item.name)}</span\n >\n\n ${timedContent(\n item.redDot[0].start,\n item.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n\n <!-- Toggle chevron -->\n ${this.hasChildren(item)\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold\"\n @click=${(e: Event) => {\n e.stopPropagation() // Prevents click from bubbling to parent\n this.toggleChildren(item)\n }}\n >\n ${this.expandedSlug === item.slug\n ? unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-up',\n 12,\n 12\n )\n )\n : unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n\n <!-- Children items -->\n ${this.hasChildren(item) && this.expandedSlug === item.slug\n ? html`\n <div class=\"pt-1 pb-2 space-y-1\">\n ${item.children.map(\n child => html`\n <div\n class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n @click=${() => this.rubricClicked(child)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot[0].start,\n child.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n `\n )}\n </div>\n </div>\n\n <div class=\"border-b border-[#DDD] m-6 \"></div>\n <!-- Lainnya -->\n <div class=\"flex\">\n <div class=\"w-full flex justify-between flex-col\">\n <span class=\"text-sm text-grey-400 px-6 font-normal\"\n >Lainnya</span\n >\n ${this.dataSidebar.lainnya.map(\n item => html`\n <div class=\"w-full font-sans\">\n <!-- Parent item -->\n <div\n class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n >\n <div class=\"flex items-center space-x-3\">\n <span class=\"font-bold text-[#333]\"\n >${decodeSpecialChars(item.name)}</span\n >\n ${timedContent(\n item.redDot[0].start,\n item.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n\n <!-- Toggle chevron -->\n ${this.hasChildren(item)\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold\"\n @click=${(e: Event) => {\n e.stopPropagation() // Prevents click from bubbling to parent\n this.toggleChildren(item)\n }}\n >\n ${this.expandedSlug === item.slug\n ? unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-up',\n 12,\n 12\n )\n )\n : unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n\n <!-- Children items -->\n ${this.hasChildren(item) && this.expandedSlug === item.slug\n ? html`\n <div class=\"pt-1 pb-2 space-y-1\">\n ${item.children.map(\n child => html`\n <div\n class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n @click=${() => this.rubricClicked(child)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot[0].start,\n child.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n `\n )}\n </div>\n </div>\n </div>\n </nav>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\ninterface DataExternalLink {\n external?: boolean\n gtmClass?: string\n icon: object | null\n iconify: string | null\n isNew: boolean\n name: string\n url: string\n}\n\ninterface dataType {\n href: string\n external?: boolean\n icon: object | null\n iconify: string | null\n name: string\n slug: string\n redDot: [\n {\n start: string\n end: string\n }\n ]\n children: [\n {\n href: string\n external: boolean\n icon: string\n iconify: string | null\n name: string\n slug: string\n redDot: [\n {\n start: string\n end: string\n }\n ]\n }\n ]\n}\ninterface DataSideBarLink {\n feature: dataType[]\n category: dataType[]\n lainnya: dataType[]\n}\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n hasSlotContent = false\n shadowRoot: any\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector('slot')\n const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n this.hasSlotContent = assignedNodes.length > 0\n }\n\n static styles = [\n css`\n .slide-side-enter-active,\n .slide-side-leave-active {\n transition: all 0.3s ease-out;\n }\n .slide-side-enter,\n .slide-side-leave-to {\n transform: translateX(-100%);\n }\n /* end: transisi buat sidebar */\n .nuxt-link-exact-active {\n @apply text-brand-1;\n }\n .menu-menu-sidebar {\n z-index: 99999;\n }\n /* Force scrollbar to always show (for debugging) */\n .menu-menu-sidebar::-webkit-scrollbar {\n width: 4px;\n }\n\n .menu-menu-sidebar::-webkit-scrollbar-track {\n background: white;\n }\n\n .menu-menu-sidebar::-webkit-scrollbar-thumb {\n background-color: #00557d; /* Replace with your brand color */\n border-radius: 8px;\n }\n\n .menu-menu-sidebar::-webkit-scrollbar-button,\n .menu-menu-sidebar::-webkit-scrollbar-corner {\n background-color: white;\n }\n `,\n TWStyles,\n ]\n @property({ type: Array }) dataExternal: DataExternalLink[] = []\n @property({ type: Boolean }) isDark = false\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchExternal()\n } catch (error) {\n this.handleFetchError(error)\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 dataSidebar: DataSideBarLink = {\n feature: [],\n category: [],\n lainnya: [],\n }\n\n async fetchExternal() {\n // External\n const endpointExternal = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuExternalLinkV2.json`\n const response = await fetch(endpointExternal, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n const resultExternal = await response.json()\n // eslint-disable-next-line no-undef\n if (!resultExternal || !Array.isArray(resultExternal)) {\n console.error(\n 'Error: resultExternal.result is undefined or not an array',\n resultExternal\n )\n this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined\n } else {\n this.dataExternal = resultExternal.map(\n (externalLink: Partial<DataExternalLink>) => ({\n external: externalLink.external ?? false,\n gtmClass: externalLink.gtmClass ?? '',\n icon: externalLink.icon ?? null,\n iconify: externalLink.iconify ?? null,\n isNew: externalLink.isNew ?? false,\n name: externalLink.name ?? '',\n url: externalLink.url ?? '',\n })\n )\n }\n\n // Sidebar\n const endpointSidebar = `https://cdn-dev-www.kompas.id/assets/json/ApiMenuSideV3.json`\n const responseSidebar = await fetch(endpointSidebar, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n const resultSidebar = await responseSidebar.json()\n // Validate the structure of the response\n if (!resultSidebar || typeof resultSidebar !== 'object') {\n console.error('Invalid response format:', resultSidebar)\n return\n }\n\n // Convert object to an array\n const sidebarArray = Object.values(resultSidebar)\n const [featureArray, categoryArray, othersArray] = sidebarArray as [\n any[],\n any[],\n any[]\n ]\n const features: dataType[] =\n featureArray?.map((item: any) => ({\n href: item?.href ?? '',\n external: item?.external ?? false,\n icon: item?.icon ?? null,\n iconify: item?.iconify ?? null,\n name: item?.name ?? '',\n slug: item?.slug ?? '',\n redDot: [\n {\n start: item?.redDot?.start ?? '',\n end: item?.redDot?.end ?? '',\n },\n ],\n children: Array.isArray(item?.children)\n ? item.children.map((child: any) => ({\n href: child?.href ?? '',\n external: child?.external ?? false,\n icon: child?.icon ?? '',\n iconify: child?.iconify ?? '',\n name: child?.name ?? '',\n slug: child?.slug ?? '',\n redDot: [\n {\n start: child?.redDot?.start ?? '',\n end: child?.redDot?.end ?? '',\n },\n ],\n }))\n : [],\n })) ?? []\n\n // Map category data\n const categories: dataType[] =\n categoryArray?.map((item: any) => ({\n href: item?.href ?? '',\n external: item?.external ?? false,\n icon: item?.icon ?? null,\n iconify: item?.iconify ?? null,\n name: item?.name ?? '',\n slug: item?.slug ?? '',\n redDot: [\n {\n start: item?.redDot?.start ?? '',\n end: item?.redDot?.end ?? '',\n },\n ],\n children: Array.isArray(item?.children)\n ? item.children.map((child: any) => ({\n href: child?.href ?? '',\n external: child?.external ?? false,\n icon: child?.icon ?? '',\n iconify: child?.iconify ?? '',\n name: child?.name ?? '',\n slug: child?.slug ?? '',\n redDot: [\n {\n start: child?.redDot?.start ?? '',\n end: child?.redDot?.end ?? '',\n },\n ],\n }))\n : [],\n })) ?? []\n\n // Map others data\n const others: dataType[] =\n othersArray?.map((item: any) => ({\n href: item?.href ?? '',\n external: item?.external ?? false,\n icon: item?.icon ?? null,\n iconify: item?.iconify ?? null,\n name: item?.name ?? '',\n slug: item?.slug ?? '',\n redDot: [\n {\n start: item?.redDot?.start ?? '',\n end: item?.redDot?.end ?? '',\n },\n ],\n children: Array.isArray(item?.children)\n ? item.children.map((child: any) => ({\n href: child?.href ?? '',\n external: child?.external ?? false,\n icon: child?.icon ?? '',\n iconify: child?.iconify ?? '',\n name: child?.name ?? '',\n slug: child?.slug ?? '',\n redDot: [\n {\n start: child?.redDot?.start ?? '',\n end: child?.redDot?.end ?? '',\n },\n ],\n }))\n : [],\n })) ?? []\n\n this.dataSidebar = {\n feature: features,\n category: categories,\n lainnya: others,\n }\n this.requestUpdate()\n }\n\n renderChips() {\n const chips = []\n chips.push(\n html`\n <div class=\"flex\">\n <div\n class=\"py-0.5 px-1.5 rounded-full\"\n style=\"position: relative; display: inline-flex; background-color:#D71920;\"\n >\n <span class=\"font-bold font-sans text-xs text-white capitalize\"\n >Baru</span\n >\n </div>\n </div>\n `\n )\n return chips\n }\n\n hasChildren(item: any): boolean {\n return Array.isArray(item?.children) && item.children.length > 0\n }\n\n rubricClicked(item: { name: string; href?: string }, event?: Event): void {\n if (event) {\n event.stopPropagation() // Prevent parent click event\n }\n if (item.href) {\n window.location.href = item.href\n }\n\n // add data layer here\n }\n\n @state()\n private expandedSlug: string | null = null\n private toggleChildren(item: any) {\n this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n }\n\n @state()\n private showNavBar: boolean = false\n\n toggleNavSidebar = (e: Event) => {\n e.stopPropagation() // prevent bubbling\n this.showNavBar = !this.showNavBar\n }\n\n render() {\n return html`\n <!-- Button Menu -->\n <div\n class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n @click=${this.toggleNavSidebar}\n >\n <slot></slot>\n ${!this.hasSlotContent\n ? html`\n <div\n class=\"h-4 inline-flex ${this.isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n </div>\n <span\n class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n .isDark\n ? 'text-[#FFFFFF]'\n : 'text-brand-1'}\"\n >\n Menu\n </span>\n `\n : ''}\n </div>\n <!-- Side Menu -->\n <nav\n @click=${this.toggleNavSidebar}\n class=${this.showNavBar\n ? 'fixed left-0 top-0 w-screen z-[100]'\n : 'hidden'}\n >\n <div\n ref=\"toggle-nav-sidebar\"\n class=\"bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg\"\n style=\"width: 312px;\"\n >\n <div\n class=\"bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full\"\n >\n <div\n ref=\"logo-kompas\"\n class=\"flex items-center justify-between p-6 w-full\"\n >\n <a href=\"/\" class=\"flex h-9 w-9\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-gold.svg\"\n alt=\"Kompas.id\"\n scale=\"0\"\n class=\"block w-full\"\n />\n </a>\n <span\n class=\"font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n @click=${this.toggleNavSidebar}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </span>\n </div>\n <div class=\"flex flex-wrap px-6 w-full\">\n ${this.dataExternal.map(\n item => html`\n <a href=\"${item.url}\" class=\"flex w-1/2 no-underline\">\n <div\n class=\"cursor-pointer flex items-center pb-4 w-[312px]\"\n >\n ${item.icon &&\n Array.isArray(item.icon) &&\n item.icon.length >= 2\n ? html`\n <div class=\"flex mr-2 text-brand-1\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>\n `\n : ''}\n <span class=\"font-sans relative text-xs text-[#666666]\">\n ${item.name}\n </span>\n <div class=\"ml-1\">\n ${item.isNew ? this.renderChips() : ''}\n </div>\n </div>\n </a>\n `\n )}\n </div>\n </div>\n <div class=\"border-b border-[#DDD] m-6 \"></div>\n <!-- feature -->\n <div class=\"flex\">\n <div class=\"flex justify-between flex-col\">\n ${this.dataSidebar.feature.map(\n item => html`\n <div class=\"w-full font-sans\">\n <!-- Parent item -->\n <div\n class=\"flex items-center justify-between px-6 text-sm font-medium text-gray-700 transition-all cursor-pointer\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n >\n <div class=\"flex items-center space-x-3\">\n <span\n class=\"text-sm font-bold relative text-[#333] w-full\"\n >${decodeSpecialChars(item.name)}</span\n >\n ${timedContent(\n item.redDot[0].start,\n item.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n\n <!-- Toggle chevron -->\n ${this.hasChildren(item)\n ? html`\n <span\n class=\"text-xs text-brand-1 bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer\"\n @click=${(e: Event) => {\n e.stopPropagation() // Prevents click from bubbling to parent\n this.toggleChildren(item)\n }}\n >\n ${this.expandedSlug === item.slug\n ? unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-up',\n 12,\n 12\n )\n )\n : unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n\n <!-- Children items -->\n ${this.hasChildren(item) && this.expandedSlug === item.slug\n ? html`\n <div class=\"pl-14 pt-1 pb-2 space-y-1\">\n ${item.children.map(\n child => html`\n <div\n class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n @click=${() => this.rubricClicked(child)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot[0].start,\n child.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n <div></div>\n </div>\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n `\n )}\n </div>\n </div>\n <div class=\"border-b border-[#DDD] m-6 \"></div>\n <!-- category -->\n <div class=\"flex\">\n <div class=\"w-full flex justify-between flex-col\">\n <span class=\"text-sm text-grey-400 px-6 font-normal\"\n >Redaksional</span\n >\n ${this.dataSidebar.category.map(\n item => html`\n <div class=\"w-full font-sans\">\n <!-- Parent item -->\n <div\n class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n >\n <div class=\"flex items-center space-x-3\">\n <span\n class=\"font-bold ${item.name === 'Beranda'\n ? 'text-[#00559a]'\n : 'text-[#333] w-full'}\"\n >${decodeSpecialChars(item.name)}</span\n >\n\n ${timedContent(\n item.redDot[0].start,\n item.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n\n <!-- Toggle chevron -->\n ${this.hasChildren(item)\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold text-grey-400\"\n @click=${(e: Event) => {\n e.stopPropagation() // Prevents click from bubbling to parent\n this.toggleChildren(item)\n }}\n >\n ${this.expandedSlug === item.slug\n ? unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-up',\n 12,\n 12\n )\n )\n : unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n\n <!-- Children items -->\n ${this.hasChildren(item) && this.expandedSlug === item.slug\n ? html`\n <div class=\"pt-1 pb-2 space-y-1\">\n ${item.children.map(\n child => html`\n <div\n class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n @click=${() => this.rubricClicked(child)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot[0].start,\n child.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n `\n )}\n </div>\n </div>\n\n <div class=\"border-b border-[#DDD] m-6 \"></div>\n <!-- Lainnya -->\n <div class=\"flex\">\n <div class=\"w-full flex justify-between flex-col\">\n <span class=\"text-sm text-grey-400 px-6 font-normal\"\n >Lainnya</span\n >\n ${this.dataSidebar.lainnya.map(\n item => html`\n <div class=\"w-full font-sans\">\n <!-- Parent item -->\n <div\n class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n >\n <div class=\"flex items-center space-x-3\">\n <span class=\"font-bold text-[#333]\"\n >${decodeSpecialChars(item.name)}</span\n >\n ${timedContent(\n item.redDot[0].start,\n item.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n\n <!-- Toggle chevron -->\n ${this.hasChildren(item)\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold\"\n @click=${(e: Event) => {\n e.stopPropagation() // Prevents click from bubbling to parent\n this.toggleChildren(item)\n }}\n >\n ${this.expandedSlug === item.slug\n ? unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-up',\n 12,\n 12\n )\n )\n : unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n\n <!-- Children items -->\n ${this.hasChildren(item) && this.expandedSlug === item.slug\n ? html`\n <div class=\"pt-1 pb-2 space-y-1\">\n ${item.children.map(\n child => html`\n <div\n class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n @click=${() => this.rubricClicked(child)}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot[0].start,\n child.redDot[0].end\n )\n ? html`<span\n class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n ></span>`\n : ''}\n </div>\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n `\n )}\n </div>\n </div>\n </div>\n </nav>\n `\n }\n}\n"]}
@@ -1062,11 +1062,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1062
1062
  max-width: 80rem;
1063
1063
  }
1064
1064
 
1065
- .max-w-max {
1066
- max-width: -moz-max-content;
1067
- max-width: max-content;
1068
- }
1069
-
1070
1065
  .max-w-screen-md {
1071
1066
  max-width: 768px;
1072
1067
  }
@@ -1453,11 +1448,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1453
1448
  background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
1454
1449
  }
1455
1450
 
1456
- .bg-\\[\\#E1F0FF\\] {
1457
- --tw-bg-opacity: 1;
1458
- background-color: rgb(225 240 255 / var(--tw-bg-opacity, 1));
1459
- }
1460
-
1461
1451
  .bg-\\[\\#FFFFFF\\] {
1462
1452
  --tw-bg-opacity: 1;
1463
1453
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -1695,11 +1685,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1695
1685
  padding-bottom: 1.25rem;
1696
1686
  }
1697
1687
 
1698
- .py-6 {
1699
- padding-top: 1.5rem;
1700
- padding-bottom: 1.5rem;
1701
- }
1702
-
1703
1688
  .py-\\[5\\.6px\\] {
1704
1689
  padding-top: 5.6px;
1705
1690
  padding-bottom: 5.6px;