@kompasid/lit-web-components 0.9.4 → 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 +5 -2
- package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js +43 -28
- 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 +219 -248
- 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 +76 -28
- package/tailwind/tailwind.css +215 -240
- package/tailwind/tailwind.ts +219 -248
|
@@ -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,
|
|
@@ -236,7 +247,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
236
247
|
class="py-0.5 px-1.5 rounded-full"
|
|
237
248
|
style="position: relative; display: inline-flex; background-color:#D71920;"
|
|
238
249
|
>
|
|
239
|
-
<span class="font-bold font-sans text-xs text-white capitalize"
|
|
250
|
+
<span class="font-bold font-pt-sans text-xs text-white capitalize"
|
|
240
251
|
>Baru</span
|
|
241
252
|
>
|
|
242
253
|
</div>
|
|
@@ -282,21 +293,26 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
282
293
|
class="w-fit flex items-center justify-center cursor-pointer relative"
|
|
283
294
|
@click=${this.toggleNavSidebar}
|
|
284
295
|
>
|
|
285
|
-
<
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
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
|
+
: ''}
|
|
300
316
|
</div>
|
|
301
317
|
<!-- Side Menu -->
|
|
302
318
|
<nav
|
|
@@ -326,10 +342,10 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
326
342
|
/>
|
|
327
343
|
</a>
|
|
328
344
|
<span
|
|
329
|
-
class="bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10
|
|
345
|
+
class="bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 py-4"
|
|
330
346
|
@click=${this.toggleNavSidebar}
|
|
331
347
|
>
|
|
332
|
-
${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}
|
|
348
|
+
${unsafeSVG(getFontAwesomeIcon('fa', 'times', 12, 12))}
|
|
333
349
|
</span>
|
|
334
350
|
</div>
|
|
335
351
|
<div class="flex flex-wrap px-4 w-full">
|
|
@@ -350,7 +366,9 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
350
366
|
</div>
|
|
351
367
|
`
|
|
352
368
|
: ''}
|
|
353
|
-
<span
|
|
369
|
+
<span
|
|
370
|
+
class="font-pt-sans relative text-xs text-[#666666]"
|
|
371
|
+
>
|
|
354
372
|
${item.name}
|
|
355
373
|
</span>
|
|
356
374
|
<div class="ml-1">
|
|
@@ -368,7 +386,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
368
386
|
<div class="flex justify-between flex-col">
|
|
369
387
|
${this.dataSidebar.feature.map(
|
|
370
388
|
item => html`
|
|
371
|
-
<div class="w-full font-sans">
|
|
389
|
+
<div class="w-full font-pt-sans">
|
|
372
390
|
<!-- Parent item -->
|
|
373
391
|
<div
|
|
374
392
|
class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
|
|
@@ -386,7 +404,12 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
386
404
|
Array.isArray(item.icon) &&
|
|
387
405
|
item.icon.length >= 2
|
|
388
406
|
? unsafeSVG(
|
|
389
|
-
getFontAwesomeIcon(
|
|
407
|
+
getFontAwesomeIcon(
|
|
408
|
+
item.icon[0],
|
|
409
|
+
item.icon[1],
|
|
410
|
+
20,
|
|
411
|
+
20
|
|
412
|
+
)
|
|
390
413
|
)
|
|
391
414
|
: ''}
|
|
392
415
|
</span>
|
|
@@ -416,10 +439,20 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
416
439
|
>
|
|
417
440
|
${this.expandedSlug === item.slug
|
|
418
441
|
? unsafeSVG(
|
|
419
|
-
getFontAwesomeIcon(
|
|
442
|
+
getFontAwesomeIcon(
|
|
443
|
+
'fas',
|
|
444
|
+
'chevron-up',
|
|
445
|
+
12,
|
|
446
|
+
12
|
|
447
|
+
)
|
|
420
448
|
)
|
|
421
449
|
: unsafeSVG(
|
|
422
|
-
getFontAwesomeIcon(
|
|
450
|
+
getFontAwesomeIcon(
|
|
451
|
+
'fas',
|
|
452
|
+
'chevron-down',
|
|
453
|
+
12,
|
|
454
|
+
12
|
|
455
|
+
)
|
|
423
456
|
)}
|
|
424
457
|
</span>
|
|
425
458
|
`
|
|
@@ -467,7 +500,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
467
500
|
<div class="w-full flex justify-between flex-col">
|
|
468
501
|
${this.dataSidebar.category.map(
|
|
469
502
|
item => html`
|
|
470
|
-
<div class="w-full font-sans">
|
|
503
|
+
<div class="w-full font-pt-sans">
|
|
471
504
|
<!-- Parent item -->
|
|
472
505
|
<div
|
|
473
506
|
class="flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer"
|
|
@@ -484,7 +517,12 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
484
517
|
Array.isArray(item.icon) &&
|
|
485
518
|
item.icon.length >= 2
|
|
486
519
|
? unsafeSVG(
|
|
487
|
-
getFontAwesomeIcon(
|
|
520
|
+
getFontAwesomeIcon(
|
|
521
|
+
item.icon[0],
|
|
522
|
+
item.icon[1],
|
|
523
|
+
20,
|
|
524
|
+
20
|
|
525
|
+
)
|
|
488
526
|
)
|
|
489
527
|
: ''}
|
|
490
528
|
</span>
|
|
@@ -510,7 +548,7 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
510
548
|
${this.hasChildren(item)
|
|
511
549
|
? html`
|
|
512
550
|
<span
|
|
513
|
-
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"
|
|
514
552
|
@click=${(e: Event) => {
|
|
515
553
|
e.stopPropagation() // Prevents click from bubbling to parent
|
|
516
554
|
this.toggleChildren(item)
|
|
@@ -518,10 +556,20 @@ export class KompasMenuSideBar extends LitElement {
|
|
|
518
556
|
>
|
|
519
557
|
${this.expandedSlug === item.slug
|
|
520
558
|
? unsafeSVG(
|
|
521
|
-
getFontAwesomeIcon(
|
|
559
|
+
getFontAwesomeIcon(
|
|
560
|
+
'fas',
|
|
561
|
+
'chevron-up',
|
|
562
|
+
12,
|
|
563
|
+
12
|
|
564
|
+
)
|
|
522
565
|
)
|
|
523
566
|
: unsafeSVG(
|
|
524
|
-
getFontAwesomeIcon(
|
|
567
|
+
getFontAwesomeIcon(
|
|
568
|
+
'fas',
|
|
569
|
+
'chevron-down',
|
|
570
|
+
12,
|
|
571
|
+
12
|
|
572
|
+
)
|
|
525
573
|
)}
|
|
526
574
|
</span>
|
|
527
575
|
`
|