@kompasid/lit-web-components 0.9.26 → 0.9.28

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 (15) hide show
  1. package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.d.ts +1 -1
  2. package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js +36 -24
  3. package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map +1 -1
  4. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +24 -15
  5. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  6. package/dist/tailwind/tailwind.js +44 -0
  7. package/dist/tailwind/tailwind.js.map +1 -1
  8. package/dist/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +1 -1
  10. package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts +37 -26
  11. package/src/components/kompasid-menu-side-bar/readme.md +1 -1
  12. package/src/components/kompasid-paywall/readme.md +155 -48
  13. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +25 -15
  14. package/tailwind/tailwind.css +25 -0
  15. package/tailwind/tailwind.ts +44 -0
package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.d.ts CHANGED
@@ -12,7 +12,7 @@ export declare class KompasMenuSideBar extends LitElement {
12
12
  dataExternal: DataExternalLink[];
13
13
  dataSidebar: DataSideBarLink;
14
14
  showNavBar: boolean;
15
- expandedSlug: string | null;
15
+ expandedSlugs: string[];
16
16
  hasSlotContent: boolean;
17
17
  connectedCallback(): Promise<void>;
18
18
  firstUpdated(): void;
package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js CHANGED
@@ -27,7 +27,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
27
27
  lainnya: [],
28
28
  };
29
29
  this.showNavBar = false;
30
- this.expandedSlug = null;
30
+ this.expandedSlugs = [];
31
31
  this.hasSlotContent = false;
32
32
  }
33
33
  // Fetch data when the component is connected to the DOM
@@ -107,7 +107,15 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
107
107
  return Array.isArray(item.children) && item.children.length > 0;
108
108
  }
109
109
  toggleChildren(item) {
110
- this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug;
110
+ const { slug } = item;
111
+ if (this.expandedSlugs.includes(slug)) {
112
+ // close it
113
+ this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug);
114
+ }
115
+ else {
116
+ // open it
117
+ this.expandedSlugs = [...this.expandedSlugs, slug];
118
+ }
111
119
  }
112
120
  hasBundleAccess(item) {
113
121
  if (item.name === 'Kompas One')
@@ -148,10 +156,10 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
148
156
  >
149
157
  <!-- Label / Link area -->
150
158
  <div
151
- class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
159
+ class="flex gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer"
152
160
  >
153
161
  <div
154
- class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
162
+ class="w-[216px] px-2 hover:bg-[#f4f4f4] rounded h-12 flex items-center space-x-3"
155
163
  role="button"
156
164
  tabindex="0"
157
165
  @click=${(e) => this.rubricClicked(item, e)}
@@ -171,7 +179,9 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
171
179
  />
172
180
  </div>`
173
181
  : ''}
174
- <span class="font-bold">${decodeSpecialChars(item.name)}</span>
182
+ <span class="font-bold text-grey-600 text-base"
183
+ >${decodeSpecialChars(item.name)}</span
184
+ >
175
185
  ${timedContent((_a = item.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = item.redDot.end) !== null && _b !== void 0 ? _b : '')
176
186
  ? html `<span
177
187
  class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
@@ -182,17 +192,17 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
182
192
  ${hasChild
183
193
  ? html `
184
194
  <span
185
- class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400"
195
+ class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 hover:bg-[#f4f4f4] text-grey-400"
186
196
  @click=${(e) => {
187
197
  e.stopPropagation();
188
- this.toggleChildren(item); // 🚨 chevron khusus toggle
198
+ this.toggleChildren(item); // chevron khusus toggle
189
199
  }}
190
200
  @keydown=${(e) => {
191
201
  if (e.key === 'Enter')
192
202
  this.toggleChildren(item);
193
203
  }}
194
204
  >
195
- ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlug === item.slug
205
+ ${unsafeSVG(getFontAwesomeIcon('fas', this.expandedSlugs.includes(item.slug)
196
206
  ? 'chevron-up'
197
207
  : 'chevron-down', 12, 12))}
198
208
  </span>
@@ -202,7 +212,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
202
212
  </div>
203
213
 
204
214
  <!-- Children list -->
205
- ${hasChild && this.expandedSlug === item.slug
215
+ ${hasChild && this.expandedSlugs.includes(item.slug)
206
216
  ? html `<div
207
217
  class="${padClass.includes('px-6')
208
218
  ? 'pt-1 pb-2 space-y-1 text-black'
@@ -214,7 +224,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
214
224
  <div
215
225
  role="button"
216
226
  tabindex="0"
217
- class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
227
+ class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
218
228
  @click=${() => this.rubricClicked(child)}
219
229
  @keydown=${(e) => {
220
230
  if (e.key === 'Enter')
@@ -222,7 +232,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
222
232
  }}
223
233
  >
224
234
  <div
225
- class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8"
235
+ class="w-[216px] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2"
226
236
  >
227
237
  ${decodeSpecialChars(child.name)}
228
238
  ${timedContent((_a = child.redDot.start) !== null && _a !== void 0 ? _a : '', (_b = child.redDot.end) !== null && _b !== void 0 ? _b : '')
@@ -230,12 +240,13 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
230
240
  class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
231
241
  ></span>`
232
242
  : ''}
233
- </div>
234
- <span class="ml-auto text-grey-400">
235
- ${child.external
243
+
244
+ <span class="absolute right-0 text-grey-400">
245
+ ${child.external
236
246
  ? unsafeSVG(getFontAwesomeIcon('fas', 'external-link', 16, 16))
237
247
  : ''}
238
- </span>
248
+ </span>
249
+ </div>
239
250
  </div>
240
251
  `;
241
252
  })}
@@ -249,7 +260,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
249
260
  return null; // skip if empty data
250
261
  return html `
251
262
  ${title
252
- ? html `<span class="text-sm text-grey-400 ${padClass} font-normal"
263
+ ? html `<span class="text-sm text-grey-400 ${padClass} font-normal mx-2"
253
264
  >${title}</span
254
265
  >`
255
266
  : null}
@@ -346,7 +357,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
346
357
  <span
347
358
  role="button"
348
359
  tabindex="0"
349
- class="font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
360
+ class="hover:bg-[#f4f4f4] font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
350
361
  @click=${this.closeNavSidebar}
351
362
  @keydown=${(e) => {
352
363
  if (e.key === 'Enter')
@@ -365,11 +376,12 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
365
376
  ${item.icon &&
366
377
  Array.isArray(item.icon) &&
367
378
  item.icon.length >= 2
368
- ? html `<div class="flex mr-2 text-brand-1">
379
+ ? html `<div class="flex mr-2 text-[#666666]">
369
380
  ${unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))}
370
381
  </div>`
371
382
  : ''}
372
- <span class="font-sans text-xs text-[#666666]"
383
+ <span
384
+ class="font-sans font-normal text-xs hover:text-[#222222] text-[#666666]"
373
385
  >${item.name}</span
374
386
  >
375
387
  ${item.isNew
@@ -384,25 +396,25 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
384
396
  : null}
385
397
 
386
398
  <!-- Bundle Section -->
387
- ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}
399
+ ${this.renderSection(null, this.dataSidebar.bundles, 'px-4')}
388
400
  ${this.dataSidebar.bundles.length > 0
389
401
  ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
390
402
  : null}
391
403
 
392
404
  <!-- Feature Section -->
393
- ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}
405
+ ${this.renderSection(null, this.dataSidebar.feature, 'px-4')}
394
406
  ${this.dataSidebar.feature.length > 0
395
407
  ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
396
408
  : null}
397
409
 
398
410
  <!-- Category (Redaksional) -->
399
- ${this.renderSection('Redaksional', this.dataSidebar.category, 'px-6')}
411
+ ${this.renderSection('Redaksional', this.dataSidebar.category, 'px-4')}
400
412
  ${this.dataSidebar.category.length > 0
401
413
  ? html `<div class="border-b border-[#DDD] mx-6 my-4"></div>`
402
414
  : null}
403
415
 
404
416
  <!-- Others (Lainnya) -->
405
- ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}
417
+ ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-4')}
406
418
  </div>
407
419
  </nav>
408
420
  `;
@@ -464,7 +476,7 @@ __decorate([
464
476
  ], KompasMenuSideBar.prototype, "showNavBar", void 0);
465
477
  __decorate([
466
478
  state()
467
- ], KompasMenuSideBar.prototype, "expandedSlug", void 0);
479
+ ], KompasMenuSideBar.prototype, "expandedSlugs", void 0);
468
480
  KompasMenuSideBar = __decorate([
469
481
  customElement('kompasid-menu-side-bar')
470
482
  ], KompasMenuSideBar);
package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map CHANGED
@@ -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":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.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\n// Importing the data fetch functions\nimport {\n fetchExternalLinks,\n fetchSidebarData,\n DataExternalLink,\n DataSideBarLink,\n DataSideBarItem,\n} from './SidebarDataController.js'\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\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 .menu-menu-sidebar::-webkit-scrollbar-track {\n background: white;\n }\n .menu-menu-sidebar::-webkit-scrollbar-thumb {\n background-color: #00557d; /* Replace with your brand color */\n border-radius: 8px;\n }\n .menu-menu-sidebar::-webkit-scrollbar-button,\n .menu-menu-sidebar::-webkit-scrollbar-corner {\n background-color: white;\n }\n /* existing styles */\n `,\n TWStyles,\n ]\n\n /**\n * Props\n * property kompasProSubscription untuk menghandle apakah user sudah login atau belum\n */\n\n @property({ type: Boolean }) isDark = false\n @property({ type: Boolean }) isProductionMode = false\n @property({ type: String }) subscriptionPackage = ''\n\n @state() dataExternal: DataExternalLink[] = []\n @state() dataSidebar: DataSideBarLink = {\n bundles: [],\n feature: [],\n category: [],\n lainnya: [],\n }\n @state() showNavBar = false\n @state() expandedSlug: string | null = null\n hasSlotContent = false\n\n // Fetch data when the component is connected to the DOM\n async connectedCallback() {\n super.connectedCallback()\n await this.loadData()\n }\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 private hasKompasOnePackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-one'))\n }\n\n private hasKompasProPackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-pro'))\n }\n\n private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {\n return bundles\n .filter(b => b.isShow)\n .map(b => {\n if (b.name === 'Kompas One') {\n return {\n ...b,\n children: this.hasKompasOnePackage() ? b.children : [],\n }\n }\n if (b.name === 'Kompas Pro') {\n return {\n ...b,\n children: this.hasKompasProPackage() ? b.children : [],\n }\n }\n return b\n })\n }\n\n // Function to load the data using async API calls\n private async loadData() {\n try {\n const [extData, sbData] = await Promise.all([\n fetchExternalLinks(this.isProductionMode),\n fetchSidebarData(this.isProductionMode),\n ])\n\n this.dataExternal = extData\n this.dataSidebar = {\n ...sbData,\n bundles: this.filterBundles(sbData.bundles),\n }\n } catch (error) {\n console.error('Error loading data:', error)\n }\n }\n\n private toggleNavSidebar(e: Event) {\n e.stopPropagation()\n this.showNavBar = !this.showNavBar\n }\n\n private rubricClicked(item: DataSideBarItem, event?: Event): void {\n if (event) event.stopPropagation()\n\n const isDropdown = this.shouldOpenDropdown(item)\n\n // Kalau bukan dropdown tapi ada href, langsung redirect\n if (!isDropdown && item.href) {\n window.location.href = item.href\n return\n }\n\n // Kalau dropdown, toggle anak\n if (isDropdown) {\n this.toggleChildren(item)\n }\n }\n\n private hasChildren(item: DataSideBarItem): boolean {\n return Array.isArray(item.children) && item.children.length > 0\n }\n\n private toggleChildren(item: DataSideBarItem) {\n this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n }\n\n private hasBundleAccess(item: DataSideBarItem): boolean {\n if (item.name === 'Kompas One') return this.hasKompasOnePackage()\n if (item.name === 'Kompas Pro') return this.hasKompasProPackage()\n return true // default non-subscription bundles\n }\n\n private shouldOpenDropdown(item: DataSideBarItem): boolean {\n const hasChild = item.children?.length > 0\n\n // 🔹 1. Parent dengan children + toExpand true\n if (hasChild && item.toExpand) {\n // kalau user nggak punya akses → redirect ke href\n if (!this.hasBundleAccess(item) && item.href) {\n return false\n }\n return true // punya akses → expand\n }\n\n // 🔹 2. Parent dengan children + tidak ada href → dropdown\n if (hasChild && !item.href) {\n return true\n }\n\n // 🔹 3. Parent dengan children + toExpand false + ada href → redirect\n if (hasChild && !item.toExpand && item.href) {\n return false\n }\n\n // 🔹 4. Item biasa tanpa child → redirect\n return false\n }\n\n private renderItem(item: any, padClass: string) {\n const hasChild = this.hasChildren(item)\n\n return html`\n <div class=\"w-full font-sans text-black\">\n <div\n class=\"flex items-center justify-between text-sm font-medium ${padClass}\"\n >\n <!-- Label / Link area -->\n <div\n class=\"flex items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3\"\n role=\"button\"\n tabindex=\"0\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(item, e)\n }}\n >\n ${item.iconSrc\n ? html`<div class=\"flex\">\n <img\n src=\"${item.iconSrc}\"\n alt=\"${item.name}\"\n width=\"20\"\n height=\"20\"\n class=\"block\"\n />\n </div>`\n : ''}\n <span class=\"font-bold\">${decodeSpecialChars(item.name)}</span>\n ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n </div>\n\n ${hasChild\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleChildren(item) // 🚨 chevron khusus toggle\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleChildren(item)\n }}\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n this.expandedSlug === item.slug\n ? 'chevron-up'\n : 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n </div>\n\n <!-- Children list -->\n ${hasChild && this.expandedSlug === item.slug\n ? html`<div\n class=\"${padClass.includes('px-6')\n ? 'pt-1 pb-2 space-y-1 text-black'\n : 'pl-14 pt-1 pb-2 space-y-1 text-black'}\"\n >\n ${repeat(\n item.children ?? [],\n (c: DataSideBarItem) => c.slug,\n (child: DataSideBarItem) => html`\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer\"\n @click=${() => this.rubricClicked(child)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(child, e)\n }}\n >\n <div\n class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot.start ?? '',\n child.redDot.end ?? ''\n )\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n </div>\n <span class=\"ml-auto text-grey-400\">\n ${child.external\n ? unsafeSVG(\n getFontAwesomeIcon('fas', 'external-link', 16, 16)\n )\n : ''}\n </span>\n </div>\n `\n )}\n </div>`\n : ''}\n </div>\n `\n }\n\n private renderSection(title: string | null, items: any[], padClass: string) {\n if (!items || items.length === 0) return null // skip if empty data\n return html`\n ${title\n ? html`<span class=\"text-sm text-grey-400 ${padClass} font-normal\"\n >${title}</span\n >`\n : null}\n ${repeat(\n items,\n item => item.slug,\n item => this.renderItem(item, padClass)\n )}\n `\n }\n\n private renderChips() {\n return html`\n <div\n class=\"py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex\"\n style=\"background-color:#D71920;\"\n >\n <span class=\"font-bold font-sans text-xs text-white capitalize\"\n >Baru</span\n >\n </div>\n `\n }\n\n private closeNavSidebar() {\n console.log('closing sidebar')\n this.showNavBar = false\n }\n\n render() {\n return html`\n <!-- Toggle Button -->\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n @click=${this.toggleNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\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 <!-- Sidebar Menu -->\n <nav\n class=${this.showNavBar\n ? 'fixed inset-0 z-[100] flex h-screen'\n : 'hidden'}\n >\n <!-- Overlay -->\n <div\n class=\"absolute inset-0 bg-[#00000066]\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n ></div>\n\n <!-- Sidebar Content -->\n <div\n class=\"relative bg-white h-full menu-menu-sidebar overflow-y-auto pb-20 shadow-lg\"\n style=\"width:312px;\"\n >\n <!-- Logo and Close Button -->\n <div\n class=\"bg-[#FFFFFF] flex flex-col items-center justify-center 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 role=\"button\"\n tabindex=\"0\"\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.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </span>\n </div>\n </div>\n <!-- External Links -->\n <div class=\"flex flex-wrap px-6\">\n ${repeat(\n this.dataExternal,\n item => item.name,\n item => html`\n <a href=\"${item.url}\" class=\"flex w-1/2 no-underline px-2\">\n <div class=\"cursor-pointer flex items-center pb-4\">\n ${item.icon &&\n Array.isArray(item.icon) &&\n item.icon.length >= 2\n ? html`<div class=\"flex mr-2 text-brand-1\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>`\n : ''}\n <span class=\"font-sans text-xs text-[#666666]\"\n >${item.name}</span\n >\n ${item.isNew\n ? html`<span class=\"ml-1\">${this.renderChips()}</span>`\n : ''}\n </div>\n </a>\n `\n )}\n </div>\n ${this.dataExternal.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Bundle Section -->\n ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}\n ${this.dataSidebar.bundles.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Feature Section -->\n ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}\n ${this.dataSidebar.feature.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Category (Redaksional) -->\n ${this.renderSection(\n 'Redaksional',\n this.dataSidebar.category,\n 'px-6'\n )}\n ${this.dataSidebar.category.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Others (Lainnya) -->\n ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}\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":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.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\n// Importing the data fetch functions\nimport {\n fetchExternalLinks,\n fetchSidebarData,\n DataExternalLink,\n DataSideBarLink,\n DataSideBarItem,\n} from './SidebarDataController.js'\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\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 .menu-menu-sidebar::-webkit-scrollbar-track {\n background: white;\n }\n .menu-menu-sidebar::-webkit-scrollbar-thumb {\n background-color: #00557d; /* Replace with your brand color */\n border-radius: 8px;\n }\n .menu-menu-sidebar::-webkit-scrollbar-button,\n .menu-menu-sidebar::-webkit-scrollbar-corner {\n background-color: white;\n }\n /* existing styles */\n `,\n TWStyles,\n ]\n\n /**\n * Props\n * property kompasProSubscription untuk menghandle apakah user sudah login atau belum\n */\n\n @property({ type: Boolean }) isDark = false\n @property({ type: Boolean }) isProductionMode = false\n @property({ type: String }) subscriptionPackage = ''\n\n @state() dataExternal: DataExternalLink[] = []\n @state() dataSidebar: DataSideBarLink = {\n bundles: [],\n feature: [],\n category: [],\n lainnya: [],\n }\n @state() showNavBar = false\n @state() expandedSlugs: string[] = []\n hasSlotContent = false\n\n // Fetch data when the component is connected to the DOM\n async connectedCallback() {\n super.connectedCallback()\n await this.loadData()\n }\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 private hasKompasOnePackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-one'))\n }\n\n private hasKompasProPackage(): boolean {\n return this.subscriptionPackage\n ?.split(' ')\n .some(pkg => pkg.includes('kompas-pro'))\n }\n\n private filterBundles(bundles: DataSideBarItem[]): DataSideBarItem[] {\n return bundles\n .filter(b => b.isShow)\n .map(b => {\n if (b.name === 'Kompas One') {\n return {\n ...b,\n children: this.hasKompasOnePackage() ? b.children : [],\n }\n }\n if (b.name === 'Kompas Pro') {\n return {\n ...b,\n children: this.hasKompasProPackage() ? b.children : [],\n }\n }\n return b\n })\n }\n\n // Function to load the data using async API calls\n private async loadData() {\n try {\n const [extData, sbData] = await Promise.all([\n fetchExternalLinks(this.isProductionMode),\n fetchSidebarData(this.isProductionMode),\n ])\n\n this.dataExternal = extData\n this.dataSidebar = {\n ...sbData,\n bundles: this.filterBundles(sbData.bundles),\n }\n } catch (error) {\n console.error('Error loading data:', error)\n }\n }\n\n private toggleNavSidebar(e: Event) {\n e.stopPropagation()\n this.showNavBar = !this.showNavBar\n }\n\n private rubricClicked(item: DataSideBarItem, event?: Event): void {\n if (event) event.stopPropagation()\n\n const isDropdown = this.shouldOpenDropdown(item)\n\n // Kalau bukan dropdown tapi ada href, langsung redirect\n if (!isDropdown && item.href) {\n window.location.href = item.href\n return\n }\n\n // Kalau dropdown, toggle anak\n if (isDropdown) {\n this.toggleChildren(item)\n }\n }\n\n private hasChildren(item: DataSideBarItem): boolean {\n return Array.isArray(item.children) && item.children.length > 0\n }\n\n private toggleChildren(item: DataSideBarItem) {\n const { slug } = item\n if (this.expandedSlugs.includes(slug)) {\n // close it\n this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug)\n } else {\n // open it\n this.expandedSlugs = [...this.expandedSlugs, slug]\n }\n }\n\n private hasBundleAccess(item: DataSideBarItem): boolean {\n if (item.name === 'Kompas One') return this.hasKompasOnePackage()\n if (item.name === 'Kompas Pro') return this.hasKompasProPackage()\n return true // default non-subscription bundles\n }\n\n private shouldOpenDropdown(item: DataSideBarItem): boolean {\n const hasChild = item.children?.length > 0\n\n // 🔹 1. Parent dengan children + toExpand true\n if (hasChild && item.toExpand) {\n // kalau user nggak punya akses → redirect ke href\n if (!this.hasBundleAccess(item) && item.href) {\n return false\n }\n return true // punya akses → expand\n }\n\n // 🔹 2. Parent dengan children + tidak ada href → dropdown\n if (hasChild && !item.href) {\n return true\n }\n\n // 🔹 3. Parent dengan children + toExpand false + ada href → redirect\n if (hasChild && !item.toExpand && item.href) {\n return false\n }\n\n // 🔹 4. Item biasa tanpa child → redirect\n return false\n }\n\n private renderItem(item: any, padClass: string) {\n const hasChild = this.hasChildren(item)\n\n return html`\n <div class=\"w-full font-sans text-black\">\n <div\n class=\"flex items-center justify-between text-sm font-medium ${padClass}\"\n >\n <!-- Label / Link area -->\n <div\n class=\"flex gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n >\n <div\n class=\"w-[216px] px-2 hover:bg-[#f4f4f4] rounded h-12 flex items-center space-x-3\"\n role=\"button\"\n tabindex=\"0\"\n @click=${(e: Event) => this.rubricClicked(item, e)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(item, e)\n }}\n >\n ${item.iconSrc\n ? html`<div class=\"flex\">\n <img\n src=\"${item.iconSrc}\"\n alt=\"${item.name}\"\n width=\"20\"\n height=\"20\"\n class=\"block\"\n />\n </div>`\n : ''}\n <span class=\"font-bold text-grey-600 text-base\"\n >${decodeSpecialChars(item.name)}</span\n >\n ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n </div>\n\n ${hasChild\n ? html`\n <span\n class=\"flex justify-center items-center rounded my-1 py-4 w-10 h-10 hover:bg-[#f4f4f4] text-grey-400\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleChildren(item) // chevron khusus toggle\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleChildren(item)\n }}\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n this.expandedSlugs.includes(item.slug)\n ? 'chevron-up'\n : 'chevron-down',\n 12,\n 12\n )\n )}\n </span>\n `\n : null}\n </div>\n </div>\n\n <!-- Children list -->\n ${hasChild && this.expandedSlugs.includes(item.slug)\n ? html`<div\n class=\"${padClass.includes('px-6')\n ? 'pt-1 pb-2 space-y-1 text-black'\n : 'pl-14 pt-1 pb-2 space-y-1 text-black'}\"\n >\n ${repeat(\n item.children ?? [],\n (c: DataSideBarItem) => c.slug,\n (child: DataSideBarItem) => html`\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"flex items-center justify-between text-sm font-medium transition-all cursor-pointer\"\n @click=${() => this.rubricClicked(child)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.rubricClicked(child, e)\n }}\n >\n <div\n class=\"w-[216px] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2\"\n >\n ${decodeSpecialChars(child.name)}\n ${timedContent(\n child.redDot.start ?? '',\n child.redDot.end ?? ''\n )\n ? html`<span\n class=\"bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0\"\n ></span>`\n : ''}\n\n <span class=\"absolute right-0 text-grey-400\">\n ${child.external\n ? unsafeSVG(\n getFontAwesomeIcon('fas', 'external-link', 16, 16)\n )\n : ''}\n </span>\n </div>\n </div>\n `\n )}\n </div>`\n : ''}\n </div>\n `\n }\n\n private renderSection(title: string | null, items: any[], padClass: string) {\n if (!items || items.length === 0) return null // skip if empty data\n return html`\n ${title\n ? html`<span class=\"text-sm text-grey-400 ${padClass} font-normal mx-2\"\n >${title}</span\n >`\n : null}\n ${repeat(\n items,\n item => item.slug,\n item => this.renderItem(item, padClass)\n )}\n `\n }\n\n private renderChips() {\n return html`\n <div\n class=\"py-0.5 px-1.5 rounded-full bg-[#D71920] inline-flex\"\n style=\"background-color:#D71920;\"\n >\n <span class=\"font-bold font-sans text-xs text-white capitalize\"\n >Baru</span\n >\n </div>\n `\n }\n\n private closeNavSidebar() {\n console.log('closing sidebar')\n this.showNavBar = false\n }\n\n render() {\n return html`\n <!-- Toggle Button -->\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n @click=${this.toggleNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\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 <!-- Sidebar Menu -->\n <nav\n class=${this.showNavBar\n ? 'fixed inset-0 z-[100] flex h-screen'\n : 'hidden'}\n >\n <!-- Overlay -->\n <div\n class=\"absolute inset-0 bg-[#00000066]\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n ></div>\n\n <!-- Sidebar Content -->\n <div\n class=\"relative bg-white h-full menu-menu-sidebar overflow-y-auto pb-20 shadow-lg\"\n style=\"width:312px;\"\n >\n <!-- Logo and Close Button -->\n <div\n class=\"bg-[#FFFFFF] flex flex-col items-center justify-center 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 role=\"button\"\n tabindex=\"0\"\n class=\"hover:bg-[#f4f4f4] font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n @click=${this.closeNavSidebar}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.toggleNavSidebar(e)\n }}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </span>\n </div>\n </div>\n <!-- External Links -->\n <div class=\"flex flex-wrap px-6\">\n ${repeat(\n this.dataExternal,\n item => item.name,\n item => html`\n <a href=\"${item.url}\" class=\"flex w-1/2 no-underline px-2\">\n <div class=\"cursor-pointer flex items-center pb-4\">\n ${item.icon &&\n Array.isArray(item.icon) &&\n item.icon.length >= 2\n ? html`<div class=\"flex mr-2 text-[#666666]\">\n ${unsafeSVG(\n getFontAwesomeIcon(item.icon[0], item.icon[1])\n )}\n </div>`\n : ''}\n <span\n class=\"font-sans font-normal text-xs hover:text-[#222222] text-[#666666]\"\n >${item.name}</span\n >\n ${item.isNew\n ? html`<span class=\"ml-1\">${this.renderChips()}</span>`\n : ''}\n </div>\n </a>\n `\n )}\n </div>\n ${this.dataExternal.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Bundle Section -->\n ${this.renderSection(null, this.dataSidebar.bundles, 'px-4')}\n ${this.dataSidebar.bundles.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Feature Section -->\n ${this.renderSection(null, this.dataSidebar.feature, 'px-4')}\n ${this.dataSidebar.feature.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Category (Redaksional) -->\n ${this.renderSection(\n 'Redaksional',\n this.dataSidebar.category,\n 'px-4'\n )}\n ${this.dataSidebar.category.length > 0\n ? html`<div class=\"border-b border-[#DDD] mx-6 my-4\"></div>`\n : null}\n\n <!-- Others (Lainnya) -->\n ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-4')}\n </div>\n </nav>\n `\n }\n}\n"]}
package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js CHANGED
@@ -534,7 +534,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
534
534
  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
535
535
  </div>
536
536
  <h6
537
- class="text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
537
+ class="text-sm md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
538
538
  >
539
539
  ${item}
540
540
  </h6>
@@ -585,24 +585,33 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
585
585
  regulerRegistrationSection() {
586
586
  const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
587
587
  const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600';
588
+ const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
588
589
  return html `
589
- <div class="flex flex-col items-center justify-center">
590
- <div>
591
- <button
592
- @click=${() => redirectToRegister('hard_paywall')}
593
- class="text-sm md:text-base font-bold underline ${textColorClass}"
594
- >
595
- Daftar
596
- </button>
597
- <span class="${buttonTextColorClass}"
598
- >untuk kuota artikel gratis</span
599
- >
600
- </div>
590
+ <div
591
+ class="flex flex-col items-center justify-center text-sm md:text-base"
592
+ >
593
+ ${!isPro
594
+ ? html `
595
+ <div>
596
+ <button
597
+ @click=${() => redirectToRegister('hard_paywall')}
598
+ class="font-bold underline ${textColorClass}"
599
+ >
600
+ Daftar
601
+ </button>
602
+ <span class="${buttonTextColorClass}"
603
+ >untuk kuota artikel gratis</span
604
+ >
605
+ </div>
606
+ `
607
+ : nothing}
601
608
  <div>
602
- <span class="${buttonTextColorClass}">atau</span>
609
+ ${!isPro
610
+ ? html ` <span class="${buttonTextColorClass}">atau</span>`
611
+ : nothing}
603
612
  <button
604
613
  @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
605
- class="text-sm md:text-base font-bold underline ${textColorClass}"
614
+ class="font-bold underline ${textColorClass}"
606
615
  >
607
616
  Masuk
608
617
  </button>