@kompasid/lit-web-components 0.9.3 → 0.9.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.yarnrc.yml +1 -0
- package/demo/index.html +6 -1
- package/dist/assets/font-awesome.d.ts +2 -2
- package/dist/src/components/kompasid-footer/KompasFooter.d.ts +1 -1
- package/dist/src/components/kompasid-freewall/KompasFreewall.d.ts +1 -1
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.d.ts +1 -1
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.d.ts +1 -1
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts +1 -1
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +1 -1
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.d.ts +1 -1
- package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.d.ts +1 -1
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts +1 -1
- package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.d.ts +1 -1
- package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.d.ts +6 -2
- package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js +67 -31
- package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map +1 -1
- package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.d.ts +1 -1
- package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.d.ts +1 -1
- package/dist/src/components/kompasid-paywall/KompasPaywall.d.ts +1 -1
- package/dist/src/components/kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.d.ts +1 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +1 -1
- package/dist/src/components/kompasid-paywall-information-header/KompasPaywallInformationHeader.d.ts +1 -1
- package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.d.ts +1 -1
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts +3 -3
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts +2 -2
- package/dist/src/utils/IntersectionObserver.d.ts +1 -1
- package/dist/tailwind/tailwind.js +223 -211
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts +102 -36
- package/src/components/kompasid-menu-side-bar/readme.md +27 -0
- package/tailwind/tailwind.css +219 -203
- package/tailwind/tailwind.ts +223 -211
|
@@ -54,6 +54,17 @@ interface DataSideBarLink {
|
|
|
54
54
|
|
|
55
55
|
@customElement('kompasid-menu-side-bar')
|
|
56
56
|
export class KompasMenuSideBar extends LitElement {
|
|
57
|
+
hasSlotContent = false
|
|
58
|
+
shadowRoot: any
|
|
59
|
+
|
|
60
|
+
firstUpdated() {
|
|
61
|
+
const slot = this.shadowRoot?.querySelector('slot')
|
|
62
|
+
const assignedNodes = slot!.assignedNodes({ flatten: true })
|
|
63
|
+
|
|
64
|
+
this.hasSlotContent = assignedNodes.length > 0
|
|
65
|
+
console.log('Slot content exists?', this.hasSlotContent)
|
|
66
|
+
}
|
|
67
|
+
|
|
57
68
|
static styles = [
|
|
58
69
|
css`
|
|
59
70
|
.slide-side-enter-active,
|
|
@@ -93,7 +104,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
93
104
|
TWStyles,
|
|
94
105
|
]
|
|
95
106
|
@property({ type: Array }) dataExternal: DataExternalLink[] = []
|
|
96
|
-
|
|
107
|
+
@property({ type: Boolean }) isDark = false
|
|
97
108
|
|
|
98
109
|
async connectedCallback() {
|
|
99
110
|
super.connectedCallback()
|
|
@@ -233,10 +244,12 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
233
244
|
html`
|
|
234
245
|
<div class="flex">
|
|
235
246
|
<div
|
|
236
|
-
class="py-
|
|
237
|
-
style="position:
|
|
247
|
+
class="py-0.5 px-1.5 rounded-full"
|
|
248
|
+
style="position: relative; display: inline-flex; background-color:#D71920;"
|
|
238
249
|
>
|
|
239
|
-
<span class="font-
|
|
250
|
+
<span class="font-bold font-pt-sans text-xs text-white capitalize"
|
|
251
|
+
>Baru</span
|
|
252
|
+
>
|
|
240
253
|
</div>
|
|
241
254
|
</div>
|
|
242
255
|
`
|
|
@@ -280,13 +293,26 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
280
293
|
class="w-fit flex items-center justify-center cursor-pointer relative"
|
|
281
294
|
@click=${this.toggleNavSidebar}
|
|
282
295
|
>
|
|
283
|
-
<
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
296
|
+
<slot></slot>
|
|
297
|
+
${!this.hasSlotContent
|
|
298
|
+
? html`
|
|
299
|
+
<div
|
|
300
|
+
class="h-4 inline-flex ${this.isDark
|
|
301
|
+
? 'text-[#FFFFFF]'
|
|
302
|
+
: 'text-brand-1'}"
|
|
303
|
+
>
|
|
304
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
|
|
305
|
+
</div>
|
|
306
|
+
<span
|
|
307
|
+
class="font-pt-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
|
|
308
|
+
.isDark
|
|
309
|
+
? 'text-[#FFFFFF]'
|
|
310
|
+
: 'text-brand-1'}"
|
|
311
|
+
>
|
|
312
|
+
Menu
|
|
313
|
+
</span>
|
|
314
|
+
`
|
|
315
|
+
: ''}
|
|
290
316
|
</div>
|
|
291
317
|
<!-- Side Menu -->
|
|
292
318
|
<nav
|
|
@@ -301,7 +327,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
301
327
|
style="width: 312px;"
|
|
302
328
|
>
|
|
303
329
|
<div
|
|
304
|
-
class="bg-[#
|
|
330
|
+
class="bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full"
|
|
305
331
|
>
|
|
306
332
|
<div
|
|
307
333
|
ref="logo-kompas"
|
|
@@ -316,41 +342,51 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
316
342
|
/>
|
|
317
343
|
</a>
|
|
318
344
|
<span
|
|
319
|
-
class="bg-[#
|
|
345
|
+
class="bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 py-4"
|
|
320
346
|
@click=${this.toggleNavSidebar}
|
|
321
347
|
>
|
|
322
|
-
${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}
|
|
348
|
+
${unsafeSVG(getFontAwesomeIcon('fa', 'times', 12, 12))}
|
|
323
349
|
</span>
|
|
324
350
|
</div>
|
|
325
351
|
<div class="flex flex-wrap px-4 w-full">
|
|
326
352
|
${this.dataExternal.map(
|
|
327
353
|
item => html`
|
|
328
|
-
<a href="${item.url}" class="
|
|
329
|
-
<div
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
354
|
+
<a href="${item.url}" class="flex w-1/2 no-underline">
|
|
355
|
+
<div
|
|
356
|
+
class="cursor-pointer flex items-center pb-4 w-[312px]"
|
|
357
|
+
>
|
|
358
|
+
${item.icon &&
|
|
359
|
+
Array.isArray(item.icon) &&
|
|
360
|
+
item.icon.length >= 2
|
|
361
|
+
? html`
|
|
362
|
+
<div class="flex mr-2 text-brand-1">
|
|
363
|
+
${unsafeSVG(
|
|
364
|
+
getFontAwesomeIcon(item.icon[0], item.icon[1])
|
|
365
|
+
)}
|
|
366
|
+
</div>
|
|
367
|
+
`
|
|
368
|
+
: ''}
|
|
369
|
+
<span
|
|
370
|
+
class="font-pt-sans relative text-xs text-[#666666]"
|
|
371
|
+
>
|
|
372
|
+
${item.name}
|
|
341
373
|
</span>
|
|
374
|
+
<div class="ml-1">
|
|
375
|
+
${item.isNew ? this.renderChips() : ''}
|
|
376
|
+
</div>
|
|
342
377
|
</div>
|
|
343
378
|
</a>
|
|
344
379
|
`
|
|
345
380
|
)}
|
|
346
381
|
</div>
|
|
347
382
|
</div>
|
|
383
|
+
<div class="border-b border-[#DDD] m-6 "></div>
|
|
348
384
|
<!-- feature -->
|
|
349
385
|
<div class="flex">
|
|
350
386
|
<div class="flex justify-between flex-col">
|
|
351
387
|
${this.dataSidebar.feature.map(
|
|
352
388
|
item => html`
|
|
353
|
-
<div class="w-full font-sans">
|
|
389
|
+
<div class="w-full font-pt-sans">
|
|
354
390
|
<!-- Parent item -->
|
|
355
391
|
<div
|
|
356
392
|
class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
|
|
@@ -368,7 +404,12 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
368
404
|
Array.isArray(item.icon) &&
|
|
369
405
|
item.icon.length >= 2
|
|
370
406
|
? unsafeSVG(
|
|
371
|
-
getFontAwesomeIcon(
|
|
407
|
+
getFontAwesomeIcon(
|
|
408
|
+
item.icon[0],
|
|
409
|
+
item.icon[1],
|
|
410
|
+
20,
|
|
411
|
+
20
|
|
412
|
+
)
|
|
372
413
|
)
|
|
373
414
|
: ''}
|
|
374
415
|
</span>
|
|
@@ -398,10 +439,20 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
398
439
|
>
|
|
399
440
|
${this.expandedSlug === item.slug
|
|
400
441
|
? unsafeSVG(
|
|
401
|
-
getFontAwesomeIcon(
|
|
442
|
+
getFontAwesomeIcon(
|
|
443
|
+
'fas',
|
|
444
|
+
'chevron-up',
|
|
445
|
+
12,
|
|
446
|
+
12
|
|
447
|
+
)
|
|
402
448
|
)
|
|
403
449
|
: unsafeSVG(
|
|
404
|
-
getFontAwesomeIcon(
|
|
450
|
+
getFontAwesomeIcon(
|
|
451
|
+
'fas',
|
|
452
|
+
'chevron-down',
|
|
453
|
+
12,
|
|
454
|
+
12
|
|
455
|
+
)
|
|
405
456
|
)}
|
|
406
457
|
</span>
|
|
407
458
|
`
|
|
@@ -449,7 +500,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
449
500
|
<div class="w-full flex justify-between flex-col">
|
|
450
501
|
${this.dataSidebar.category.map(
|
|
451
502
|
item => html`
|
|
452
|
-
<div class="w-full font-sans">
|
|
503
|
+
<div class="w-full font-pt-sans">
|
|
453
504
|
<!-- Parent item -->
|
|
454
505
|
<div
|
|
455
506
|
class="flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer"
|
|
@@ -466,7 +517,12 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
466
517
|
Array.isArray(item.icon) &&
|
|
467
518
|
item.icon.length >= 2
|
|
468
519
|
? unsafeSVG(
|
|
469
|
-
getFontAwesomeIcon(
|
|
520
|
+
getFontAwesomeIcon(
|
|
521
|
+
item.icon[0],
|
|
522
|
+
item.icon[1],
|
|
523
|
+
20,
|
|
524
|
+
20
|
|
525
|
+
)
|
|
470
526
|
)
|
|
471
527
|
: ''}
|
|
472
528
|
</span>
|
|
@@ -492,7 +548,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
492
548
|
${this.hasChildren(item)
|
|
493
549
|
? html`
|
|
494
550
|
<span
|
|
495
|
-
class="
|
|
551
|
+
class="bg-[#e1f0ff] flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold text-brand-1"
|
|
496
552
|
@click=${(e: Event) => {
|
|
497
553
|
e.stopPropagation() // Prevents click from bubbling to parent
|
|
498
554
|
this.toggleChildren(item)
|
|
@@ -500,10 +556,20 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
500
556
|
>
|
|
501
557
|
${this.expandedSlug === item.slug
|
|
502
558
|
? unsafeSVG(
|
|
503
|
-
getFontAwesomeIcon(
|
|
559
|
+
getFontAwesomeIcon(
|
|
560
|
+
'fas',
|
|
561
|
+
'chevron-up',
|
|
562
|
+
12,
|
|
563
|
+
12
|
|
564
|
+
)
|
|
504
565
|
)
|
|
505
566
|
: unsafeSVG(
|
|
506
|
-
getFontAwesomeIcon(
|
|
567
|
+
getFontAwesomeIcon(
|
|
568
|
+
'fas',
|
|
569
|
+
'chevron-down',
|
|
570
|
+
12,
|
|
571
|
+
12
|
|
572
|
+
)
|
|
507
573
|
)}
|
|
508
574
|
</span>
|
|
509
575
|
`
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# kompasid-menu-side-bar
|
|
2
|
+
|
|
3
|
+
Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan Menu Side Bar pada Kompas.id
|
|
4
|
+
|
|
5
|
+
### Contoh Implementasi
|
|
6
|
+
|
|
7
|
+
```javascript
|
|
8
|
+
<kompasid-menu-side-bar></kompasid-menu-side-bar> // if theme = primary/default
|
|
9
|
+
<kompasid-menu-side-bar
|
|
10
|
+
.isDark="true" // if theme = dark/transparent
|
|
11
|
+
></kompasid-menu-side-bar>
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Properties
|
|
16
|
+
|
|
17
|
+
| Property | Attribute | Description | Tipe | Default | Content |
|
|
18
|
+
| -------------| -------------| ----------------------------------------------- | -------- | ------- | ---------------- |
|
|
19
|
+
| `isDark`| `isDark`| Pilihan Tema untuk tampilan Burger Menu. | `boolean` | `false` | `''` |
|
|
20
|
+
|
|
21
|
+
### Digunakan oleh
|
|
22
|
+
|
|
23
|
+
- [kompasid-menu-side-bar](../kompasid-menu-side-bar)
|
|
24
|
+
|
|
25
|
+
## Kontributor
|
|
26
|
+
|
|
27
|
+
*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*
|