@open-rlb/ng-bootstrap 3.1.15 → 3.1.17
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/assets/scss/_variables-dark.scss +16 -1
- package/assets/scss/_variables.scss +21 -19
- package/assets/scss/custom/components/_card.scss +4 -4
- package/assets/scss/custom/components/_dropdown.scss +4 -14
- package/assets/scss/rlb/app-layout.scss +9 -43
- package/fesm2022/open-rlb-ng-bootstrap.mjs +118 -119
- package/fesm2022/open-rlb-ng-bootstrap.mjs.map +1 -1
- package/package.json +1 -1
- package/types/open-rlb-ng-bootstrap.d.ts +13 -11
|
@@ -48,7 +48,7 @@ $body-tertiary-color-dark: #f6f6f6;
|
|
|
48
48
|
$body-tertiary-bg-dark: #32394e;
|
|
49
49
|
$body-emphasis-color-dark: $white;
|
|
50
50
|
$border-color-dark: #32394e;
|
|
51
|
-
$border-color-translucent-dark:
|
|
51
|
+
$border-color-translucent-dark: rgba(255, 255, 255, 0.1);
|
|
52
52
|
$headings-color-dark: #f6f6f6;
|
|
53
53
|
$link-color-dark: $primary;
|
|
54
54
|
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage);
|
|
@@ -64,6 +64,7 @@ $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://w
|
|
|
64
64
|
|
|
65
65
|
$form-switch-color-dark: rgba($white, .25);
|
|
66
66
|
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
|
|
67
|
+
$input-border-color: var(--#{$prefix}border-color-translucent);
|
|
67
68
|
|
|
68
69
|
// scss-docs-start form-validation-colors-dark
|
|
69
70
|
$form-valid-color-dark: $green-300;
|
|
@@ -105,6 +106,8 @@ $menu-item-active-color-dark: #556ee6;
|
|
|
105
106
|
|
|
106
107
|
$boxed-body-bg-dark: #32394f;
|
|
107
108
|
|
|
109
|
+
// Table
|
|
110
|
+
$table-dark-border-color: tint-color($gray-800, 7.5%);
|
|
108
111
|
|
|
109
112
|
// Display
|
|
110
113
|
$display-none-dark: block;
|
|
@@ -112,3 +115,15 @@ $display-block-dark: none;
|
|
|
112
115
|
|
|
113
116
|
$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
|
|
114
117
|
$input-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
|
|
118
|
+
|
|
119
|
+
// OVERRIDES
|
|
120
|
+
$card-bg: var(--#{$prefix}secondary-bg);
|
|
121
|
+
$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); // Stronger shadow for dark mode
|
|
122
|
+
$card-border-width: 0;
|
|
123
|
+
$table-head-bg: $body-tertiary-bg-dark; // Darker header for tables
|
|
124
|
+
$input-bg: rgba(255, 255, 255, 0.05); // Glass effect
|
|
125
|
+
$input-border-color: rgba(255, 255, 255, 0.1);
|
|
126
|
+
|
|
127
|
+
$sidebar-dark-bg: $body-secondary-bg-dark;
|
|
128
|
+
$sidebar-dark-menu-item-color: #a6b0cf;
|
|
129
|
+
$sidebar-dark-menu-item-active-color: #ffffff;
|
|
@@ -81,7 +81,9 @@ $boxed-body-bg: #ebebf4;
|
|
|
81
81
|
$apex-grid-color: var(--#{$prefix}border-color);
|
|
82
82
|
|
|
83
83
|
// table
|
|
84
|
-
|
|
84
|
+
//$table-head-bg: $gray-100;
|
|
85
|
+
$table-head-bg: #eff2f7; // Distinct light gray
|
|
86
|
+
//$table-head-color: $body-color;
|
|
85
87
|
$table-dark-border-color: tint-color($gray-800, 7.5%);
|
|
86
88
|
|
|
87
89
|
|
|
@@ -522,7 +524,7 @@ $position-values: (
|
|
|
522
524
|
//
|
|
523
525
|
// Settings for the `<body>` element.
|
|
524
526
|
|
|
525
|
-
$body-bg: #
|
|
527
|
+
$body-bg: #f3f4f6;
|
|
526
528
|
$body-color: $gray-700;
|
|
527
529
|
$body-text-align: null;
|
|
528
530
|
|
|
@@ -632,11 +634,11 @@ $border-color-translucent: $gray-400;
|
|
|
632
634
|
// scss-docs-end border-variables
|
|
633
635
|
|
|
634
636
|
// scss-docs-start border-radius-variables
|
|
635
|
-
$border-radius:
|
|
636
|
-
$border-radius
|
|
637
|
-
$border-radius-lg: .
|
|
638
|
-
$border-radius-xl: 1rem;
|
|
639
|
-
$border-radius-xxl: 2rem;
|
|
637
|
+
$border-radius-sm: .25rem; // 4px (Standard small curve)
|
|
638
|
+
$border-radius: .375rem; // 6px (Standard button curve)
|
|
639
|
+
$border-radius-lg: .625rem; // 10px (Large button/input curve)
|
|
640
|
+
$border-radius-xl: 1rem; // 16px (Bubbly card/modal curve)
|
|
641
|
+
$border-radius-xxl: 2rem; // 32px
|
|
640
642
|
$border-radius-pill: 50rem;
|
|
641
643
|
// scss-docs-end border-radius-variables
|
|
642
644
|
// fusv-disable
|
|
@@ -913,7 +915,7 @@ $btn-font-size-lg: $input-btn-font-size-lg;
|
|
|
913
915
|
|
|
914
916
|
$btn-border-width: $input-btn-border-width;
|
|
915
917
|
|
|
916
|
-
$btn-font-weight: $font-weight-
|
|
918
|
+
$btn-font-weight: $font-weight-medium;
|
|
917
919
|
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
|
|
918
920
|
$btn-focus-width: $input-btn-focus-width;
|
|
919
921
|
$btn-focus-box-shadow: 0 0 0 0.15rem rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
|
|
@@ -956,7 +958,7 @@ $form-text-color: var(--#{$prefix}secondary-color);
|
|
|
956
958
|
$form-label-margin-bottom: .5rem;
|
|
957
959
|
$form-label-font-size: null;
|
|
958
960
|
$form-label-font-style: null;
|
|
959
|
-
$form-label-font-weight:
|
|
961
|
+
$form-label-font-weight: $font-weight-medium;
|
|
960
962
|
$form-label-color: null;
|
|
961
963
|
// scss-docs-end form-label-variables
|
|
962
964
|
|
|
@@ -991,10 +993,10 @@ $input-border-radius-sm: var(--#{$prefix}border-radius-sm);
|
|
|
991
993
|
$input-border-radius-lg: var(--#{$prefix}border-radius-lg);
|
|
992
994
|
|
|
993
995
|
$input-focus-bg: $input-bg;
|
|
994
|
-
$input-focus-border-color:
|
|
996
|
+
$input-focus-border-color: $primary;
|
|
995
997
|
$input-focus-color: $input-color;
|
|
996
998
|
$input-focus-width: $input-btn-focus-width;
|
|
997
|
-
$input-focus-box-shadow:
|
|
999
|
+
$input-focus-box-shadow: 0 0 0 0.15rem rgba($primary, 0.25);
|
|
998
1000
|
|
|
999
1001
|
$input-placeholder-color: var(--#{$prefix}secondary-color);
|
|
1000
1002
|
$input-plaintext-color: var(--#{$prefix}body-color);
|
|
@@ -1320,11 +1322,11 @@ $dropdown-color: var(--#{$prefix}body-color);
|
|
|
1320
1322
|
$dropdown-bg: var(--#{$prefix}secondary-bg);
|
|
1321
1323
|
$dropdown-border-color: var(--#{$prefix}border-color);
|
|
1322
1324
|
$dropdown-border-radius: var(--#{$prefix}border-radius);
|
|
1323
|
-
$dropdown-border-width:
|
|
1325
|
+
$dropdown-border-width: 1px;
|
|
1324
1326
|
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width});
|
|
1325
1327
|
$dropdown-divider-bg: $dropdown-border-color;
|
|
1326
1328
|
$dropdown-divider-margin-y: $spacer * .5;
|
|
1327
|
-
$dropdown-box-shadow:
|
|
1329
|
+
$dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
|
|
1328
1330
|
|
|
1329
1331
|
$dropdown-link-color: var(--#{$prefix}body-color);
|
|
1330
1332
|
$dropdown-link-hover-color: var(--#{$prefix}emphasis-color);
|
|
@@ -1420,10 +1422,10 @@ $card-spacer-x: 1.5rem;
|
|
|
1420
1422
|
$card-title-spacer-y: $spacer * .5;
|
|
1421
1423
|
$card-title-color: var(--#{$prefix}emphasis-color);
|
|
1422
1424
|
$card-subtitle-color: null;
|
|
1423
|
-
$card-border-width:
|
|
1424
|
-
$card-border-color:
|
|
1425
|
-
$card-border-radius:
|
|
1426
|
-
$card-box-shadow: 0
|
|
1425
|
+
$card-border-width: 1px;
|
|
1426
|
+
$card-border-color: rgba($gray-200, 0.5);
|
|
1427
|
+
$card-border-radius: var(--#{$prefix}border-radius-xl);
|
|
1428
|
+
$card-box-shadow: 0 4px 6px rgba(18, 38, 63, 0.03), 0 1px 3px rgba(18, 38, 63, 0.05);
|
|
1427
1429
|
$card-inner-border-radius: calc(#{$card-border-radius} - 1px);
|
|
1428
1430
|
$card-cap-padding-y: $card-spacer-y * .5;
|
|
1429
1431
|
$card-cap-padding-x: $card-spacer-x;
|
|
@@ -1547,7 +1549,7 @@ $toast-color: null;
|
|
|
1547
1549
|
$toast-background-color: var(--#{$prefix}secondary-bg);
|
|
1548
1550
|
$toast-border-width: var(--#{$prefix}border-width);
|
|
1549
1551
|
$toast-border-color: var(--#{$prefix}border-color);
|
|
1550
|
-
$toast-border-radius:
|
|
1552
|
+
$toast-border-radius: var(--#{$prefix}border-radius);
|
|
1551
1553
|
$toast-box-shadow: var(--#{$prefix}box-shadow-lg);
|
|
1552
1554
|
$toast-spacing: $container-padding-x;
|
|
1553
1555
|
|
|
@@ -1585,7 +1587,7 @@ $modal-content-color: null;
|
|
|
1585
1587
|
$modal-content-bg: var(--#{$prefix}secondary-bg);
|
|
1586
1588
|
$modal-content-border-color: var(--#{$prefix}border-color);
|
|
1587
1589
|
$modal-content-border-width: var(--#{$prefix}border-width);
|
|
1588
|
-
$modal-content-border-radius: var(--#{$prefix}border-radius-
|
|
1590
|
+
$modal-content-border-radius: var(--#{$prefix}border-radius-xl);
|
|
1589
1591
|
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
|
|
1590
1592
|
$modal-content-box-shadow-xs: $box-shadow-sm;
|
|
1591
1593
|
$modal-content-box-shadow-sm-up: $box-shadow;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
//
|
|
1
|
+
//
|
|
2
2
|
// _card.scss
|
|
3
|
-
//
|
|
3
|
+
//
|
|
4
4
|
|
|
5
5
|
.card {
|
|
6
6
|
margin-bottom: $grid-gutter-width;
|
|
7
|
-
box-shadow: $box-shadow;
|
|
7
|
+
box-shadow: $card-box-shadow;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.card-drop {
|
|
@@ -21,4 +21,4 @@
|
|
|
21
21
|
.card-title-desc {
|
|
22
22
|
color: var(--#{$prefix}secondary-color);
|
|
23
23
|
margin-bottom: 24px;
|
|
24
|
-
}
|
|
24
|
+
}
|
|
@@ -2,19 +2,9 @@
|
|
|
2
2
|
// _dropdown.scss
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// animation-duration: 0.3s;
|
|
9
|
-
// animation-fill-mode: both;
|
|
10
|
-
// margin: 0;
|
|
11
|
-
// position: absolute;
|
|
12
|
-
// z-index: 1000;
|
|
13
|
-
//
|
|
14
|
-
// &.show {
|
|
15
|
-
// top: 100% !important;
|
|
16
|
-
// }
|
|
17
|
-
//}
|
|
5
|
+
.dropdown-menu {
|
|
6
|
+
box-shadow: $dropdown-box-shadow;
|
|
7
|
+
}
|
|
18
8
|
|
|
19
9
|
|
|
20
10
|
//.dropdown-menu-end[style] {
|
|
@@ -99,4 +89,4 @@
|
|
|
99
89
|
// force inline styles to have bootstrap-like behavior
|
|
100
90
|
rlb-dropdown {
|
|
101
91
|
display: inline-block;
|
|
102
|
-
}
|
|
92
|
+
}
|
|
@@ -47,50 +47,16 @@
|
|
|
47
47
|
z-index: $zindex-dropdown;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.sidebar-
|
|
51
|
-
position: absolute;
|
|
52
|
-
top: 1rem;
|
|
53
|
-
left: $sidebar-width - 1.5rem;
|
|
54
|
-
z-index: 1035;
|
|
55
|
-
transform: translateX(-50%);
|
|
56
|
-
width: 2rem;
|
|
57
|
-
height: 2rem;
|
|
58
|
-
border-radius: 50%;
|
|
59
|
-
display: flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
justify-content: center;
|
|
62
|
-
cursor: pointer;
|
|
63
|
-
transition: left 0.3s ease-in-out, transform 0.2s ease, color 0.2s ease, border 0.2s ease;
|
|
64
|
-
|
|
65
|
-
&:hover {
|
|
66
|
-
transform: translateX(-50%) scale(1.15);
|
|
67
|
-
border: 1px solid $sidebar-menu-item-active-color;
|
|
68
|
-
color: $sidebar-menu-item-active-color;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
i {
|
|
72
|
-
font-size: 16px;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.sidebar-toggler-tooltip,
|
|
77
|
-
[data-bs-theme="dark"] .tooltip
|
|
50
|
+
.sidebar-toggler
|
|
78
51
|
{
|
|
79
|
-
--bs-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
--bs-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
border: var(--bs-tooltip-border-width) solid var(--bs-tooltip-border-color);
|
|
88
|
-
border-radius: 0.25rem;
|
|
89
|
-
padding: 0.25rem 0.5rem;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.sidebar-toggler-tooltip {
|
|
93
|
-
pointer-events: none;
|
|
52
|
+
padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
|
|
53
|
+
font-size: var(--bs-navbar-toggler-font-size);
|
|
54
|
+
line-height: 1;
|
|
55
|
+
color: var(--bs-navbar-color);
|
|
56
|
+
background-color: transparent;
|
|
57
|
+
border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
|
|
58
|
+
border-radius: var(--bs-navbar-toggler-border-radius);
|
|
59
|
+
transition: var(--bs-navbar-toggler-transition);
|
|
94
60
|
}
|
|
95
61
|
|
|
96
62
|
.rlb-sidebar.collapsed .sidebar-toggle {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { signal, Component, input, booleanAttribute, effect, Host, Self, Optional, Directive, Injectable, output, contentChild, computed, contentChildren, viewChild, numberAttribute, model, ViewChild, isSignal, Pipe, ChangeDetectionStrategy, inject, DOCUMENT, Inject, InjectionToken, ViewContainerRef, untracked, HostListener, viewChildren, NgModule } from '@angular/core';
|
|
3
|
-
import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy,
|
|
3
|
+
import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Popover, Tooltip } from 'bootstrap';
|
|
4
4
|
import * as i2 from '@angular/router';
|
|
5
5
|
import { RouterModule } from '@angular/router';
|
|
6
6
|
import * as i3 from '@angular/common';
|
|
@@ -4461,10 +4461,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4461
4461
|
args: ['template', { static: true }]
|
|
4462
4462
|
}] } });
|
|
4463
4463
|
|
|
4464
|
+
class SidebarService {
|
|
4465
|
+
constructor() {
|
|
4466
|
+
this.itemClickedSource = new Subject();
|
|
4467
|
+
this.itemClicked$ = this.itemClickedSource.asObservable();
|
|
4468
|
+
this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
4469
|
+
}
|
|
4470
|
+
notifyItemClicked() {
|
|
4471
|
+
this.itemClickedSource.next();
|
|
4472
|
+
}
|
|
4473
|
+
setCollapsed(collapsed) {
|
|
4474
|
+
this.isCollapsed.set(collapsed);
|
|
4475
|
+
const sidebar = document.getElementById('sidebar');
|
|
4476
|
+
const content = document.querySelector('.rlb-content');
|
|
4477
|
+
content?.classList.toggle('expanded', collapsed);
|
|
4478
|
+
sidebar?.classList.toggle('collapsed', collapsed);
|
|
4479
|
+
}
|
|
4480
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4481
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
4482
|
+
}
|
|
4483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, decorators: [{
|
|
4484
|
+
type: Injectable,
|
|
4485
|
+
args: [{
|
|
4486
|
+
providedIn: 'root',
|
|
4487
|
+
}]
|
|
4488
|
+
}] });
|
|
4489
|
+
|
|
4464
4490
|
class NavbarComponent {
|
|
4465
|
-
constructor(idService, viewContainerRef) {
|
|
4491
|
+
constructor(idService, viewContainerRef, sidebarService) {
|
|
4466
4492
|
this.idService = idService;
|
|
4467
4493
|
this.viewContainerRef = viewContainerRef;
|
|
4494
|
+
this.sidebarService = sidebarService;
|
|
4468
4495
|
this.destroy$ = new Subject();
|
|
4469
4496
|
this._navExpand = computed(() => {
|
|
4470
4497
|
const exp = this.expand();
|
|
@@ -4481,7 +4508,7 @@ class NavbarComponent {
|
|
|
4481
4508
|
this.placement = input(undefined, ...(ngDevMode ? [{ debugName: "placement" }] : []));
|
|
4482
4509
|
this.expand = input(undefined, ...(ngDevMode ? [{ debugName: "expand" }] : []));
|
|
4483
4510
|
this.cssClass = input('', { ...(ngDevMode ? { debugName: "cssClass" } : {}), alias: 'class' });
|
|
4484
|
-
this.enableDropdownToggler = input(
|
|
4511
|
+
this.enableDropdownToggler = input(false, { ...(ngDevMode ? { debugName: "enableDropdownToggler" } : {}), alias: 'enable-dropdown-toggler',
|
|
4485
4512
|
transform: booleanAttribute });
|
|
4486
4513
|
this.navId = `nav${this.idService.id}`;
|
|
4487
4514
|
effect(() => {
|
|
@@ -4506,6 +4533,10 @@ class NavbarComponent {
|
|
|
4506
4533
|
this.destroy$.next();
|
|
4507
4534
|
this.destroy$.complete();
|
|
4508
4535
|
}
|
|
4536
|
+
toggleSidebar() {
|
|
4537
|
+
const isSideBarCollapsed = this.sidebarService.isCollapsed();
|
|
4538
|
+
this.sidebarService.setCollapsed(!isSideBarCollapsed);
|
|
4539
|
+
}
|
|
4509
4540
|
closeMobileMenu() {
|
|
4510
4541
|
const collapseEl = this.element?.querySelector('.navbar-collapse');
|
|
4511
4542
|
if (collapseEl && collapseEl.classList.contains('show')) {
|
|
@@ -4513,26 +4544,37 @@ class NavbarComponent {
|
|
|
4513
4544
|
bsCollapse.hide();
|
|
4514
4545
|
}
|
|
4515
4546
|
}
|
|
4516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, deps: [{ token: UniqueIdService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
4547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, deps: [{ token: UniqueIdService }, { token: i0.ViewContainerRef }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NavbarComponent, isStandalone: false, selector: "rlb-navbar", inputs: { dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, enableDropdownToggler: { classPropertyName: "enableDropdownToggler", publicName: "enable-dropdown-toggler", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "navbarItemsGroups", predicate: NavbarItemsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
|
|
4518
4549
|
<ng-template #template>
|
|
4519
4550
|
<nav
|
|
4520
4551
|
class="navbar px-2 bg-{{ color() }} {{ placement() }} {{ _navExpand() }} {{ cssClass() }}"
|
|
4521
4552
|
[attr.data-bs-theme]="dark() ? 'dark' : 'light'"
|
|
4522
4553
|
>
|
|
4523
4554
|
<div class="container-fluid">
|
|
4524
|
-
<ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
|
|
4525
4555
|
<button
|
|
4526
|
-
class="
|
|
4527
|
-
[class.d-none]="!enableDropdownToggler()"
|
|
4556
|
+
class="sidebar-toggler me-3"
|
|
4528
4557
|
type="button"
|
|
4529
4558
|
rlb-button
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
aria-label="Toggle navigation"
|
|
4559
|
+
aria-label="Toggle sidebar"
|
|
4560
|
+
(click)="toggleSidebar()"
|
|
4533
4561
|
>
|
|
4534
4562
|
<span class="navbar-toggler-icon"></span>
|
|
4535
4563
|
</button>
|
|
4564
|
+
<ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
|
|
4565
|
+
@if (enableDropdownToggler()) {
|
|
4566
|
+
<button
|
|
4567
|
+
class="navbar-toggler"
|
|
4568
|
+
[class.d-none]="!enableDropdownToggler()"
|
|
4569
|
+
type="button"
|
|
4570
|
+
rlb-button
|
|
4571
|
+
toggle="collapse"
|
|
4572
|
+
[toggle-target]="navId"
|
|
4573
|
+
aria-label="Toggle navigation"
|
|
4574
|
+
>
|
|
4575
|
+
<span class="navbar-toggler-icon"></span>
|
|
4576
|
+
</button>
|
|
4577
|
+
}
|
|
4536
4578
|
<div
|
|
4537
4579
|
class="collapse navbar-collapse"
|
|
4538
4580
|
[id]="navId"
|
|
@@ -4559,18 +4601,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4559
4601
|
[attr.data-bs-theme]="dark() ? 'dark' : 'light'"
|
|
4560
4602
|
>
|
|
4561
4603
|
<div class="container-fluid">
|
|
4562
|
-
<ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
|
|
4563
4604
|
<button
|
|
4564
|
-
class="
|
|
4565
|
-
[class.d-none]="!enableDropdownToggler()"
|
|
4605
|
+
class="sidebar-toggler me-3"
|
|
4566
4606
|
type="button"
|
|
4567
4607
|
rlb-button
|
|
4568
|
-
|
|
4569
|
-
|
|
4570
|
-
aria-label="Toggle navigation"
|
|
4608
|
+
aria-label="Toggle sidebar"
|
|
4609
|
+
(click)="toggleSidebar()"
|
|
4571
4610
|
>
|
|
4572
4611
|
<span class="navbar-toggler-icon"></span>
|
|
4573
4612
|
</button>
|
|
4613
|
+
<ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
|
|
4614
|
+
@if (enableDropdownToggler()) {
|
|
4615
|
+
<button
|
|
4616
|
+
class="navbar-toggler"
|
|
4617
|
+
[class.d-none]="!enableDropdownToggler()"
|
|
4618
|
+
type="button"
|
|
4619
|
+
rlb-button
|
|
4620
|
+
toggle="collapse"
|
|
4621
|
+
[toggle-target]="navId"
|
|
4622
|
+
aria-label="Toggle navigation"
|
|
4623
|
+
>
|
|
4624
|
+
<span class="navbar-toggler-icon"></span>
|
|
4625
|
+
</button>
|
|
4626
|
+
}
|
|
4574
4627
|
<div
|
|
4575
4628
|
class="collapse navbar-collapse"
|
|
4576
4629
|
[id]="navId"
|
|
@@ -4587,7 +4640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4587
4640
|
`,
|
|
4588
4641
|
standalone: false,
|
|
4589
4642
|
}]
|
|
4590
|
-
}], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
|
|
4643
|
+
}], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ViewContainerRef }, { type: SidebarService }], propDecorators: { template: [{
|
|
4591
4644
|
type: ViewChild,
|
|
4592
4645
|
args: ['template', { static: true }]
|
|
4593
4646
|
}], navbarItemsGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NavbarItemsComponent), { ...{
|
|
@@ -5049,24 +5102,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5049
5102
|
}]
|
|
5050
5103
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "rlb-scrollspy-target", required: true }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-smooth", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-root-margin", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-threshold", required: false }] }], scroll: [{ type: i0.Output, args: ["scroll-change"] }] } });
|
|
5051
5104
|
|
|
5052
|
-
class SidebarService {
|
|
5053
|
-
constructor() {
|
|
5054
|
-
this.itemClickedSource = new Subject();
|
|
5055
|
-
this.itemClicked$ = this.itemClickedSource.asObservable();
|
|
5056
|
-
}
|
|
5057
|
-
notifyItemClicked() {
|
|
5058
|
-
this.itemClickedSource.next();
|
|
5059
|
-
}
|
|
5060
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5061
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
5062
|
-
}
|
|
5063
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, decorators: [{
|
|
5064
|
-
type: Injectable,
|
|
5065
|
-
args: [{
|
|
5066
|
-
providedIn: 'root'
|
|
5067
|
-
}]
|
|
5068
|
-
}] });
|
|
5069
|
-
|
|
5070
5105
|
class SidebarItemComponent {
|
|
5071
5106
|
constructor(viewContainerRef, uniqueIdService, router, sidebarService) {
|
|
5072
5107
|
this.viewContainerRef = viewContainerRef;
|
|
@@ -5220,51 +5255,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5220
5255
|
}]
|
|
5221
5256
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: UniqueIdService }, { type: i2.Router }, { type: SidebarService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], badgeCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCounter", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], children: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SidebarItemComponent), { isSignal: true }] }], template: [{ type: i0.ViewChild, args: ['template', { isSignal: true }] }] } });
|
|
5222
5257
|
|
|
5223
|
-
class TooltipDirective {
|
|
5224
|
-
constructor(elementRef) {
|
|
5225
|
-
this.elementRef = elementRef;
|
|
5226
|
-
this.tooltip = input(undefined, { ...(ngDevMode ? { debugName: "tooltip" } : {}), alias: 'tooltip' });
|
|
5227
|
-
this.placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'tooltip-placement' });
|
|
5228
|
-
this.customClass = input('', { ...(ngDevMode ? { debugName: "customClass" } : {}), alias: 'tooltip-class' });
|
|
5229
|
-
this.html = input(false, { ...(ngDevMode ? { debugName: "html" } : {}), alias: 'tooltip-html', transform: booleanAttribute });
|
|
5230
|
-
// We only need one effect to handle dynamic changes to the title text.
|
|
5231
|
-
effect(() => {
|
|
5232
|
-
const title = this.tooltip();
|
|
5233
|
-
if (this._tooltip) {
|
|
5234
|
-
if (title) {
|
|
5235
|
-
this._tooltip.enable();
|
|
5236
|
-
this._tooltip.setContent({ '.tooltip-inner': title });
|
|
5237
|
-
}
|
|
5238
|
-
else {
|
|
5239
|
-
this._tooltip.disable();
|
|
5240
|
-
}
|
|
5241
|
-
}
|
|
5242
|
-
});
|
|
5243
|
-
}
|
|
5244
|
-
ngOnInit() {
|
|
5245
|
-
this._tooltip = new Tooltip(this.elementRef.nativeElement, {
|
|
5246
|
-
title: this.tooltip() || '',
|
|
5247
|
-
placement: this.placement(),
|
|
5248
|
-
customClass: this.customClass(),
|
|
5249
|
-
html: this.html(),
|
|
5250
|
-
});
|
|
5251
|
-
}
|
|
5252
|
-
ngOnDestroy() {
|
|
5253
|
-
if (this._tooltip) {
|
|
5254
|
-
this._tooltip.dispose();
|
|
5255
|
-
}
|
|
5256
|
-
}
|
|
5257
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5258
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TooltipDirective, isStandalone: false, selector: "[tooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "tooltip-placement", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "tooltip-class", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "tooltip-html", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
5259
|
-
}
|
|
5260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
5261
|
-
type: Directive,
|
|
5262
|
-
args: [{
|
|
5263
|
-
selector: '[tooltip]',
|
|
5264
|
-
standalone: false,
|
|
5265
|
-
}]
|
|
5266
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-placement", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-class", required: false }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-html", required: false }] }] } });
|
|
5267
|
-
|
|
5268
5258
|
/**
|
|
5269
5259
|
* Sidebar component
|
|
5270
5260
|
*/
|
|
@@ -5272,7 +5262,6 @@ class SidebarComponent {
|
|
|
5272
5262
|
constructor(sidebarService, breakpointService) {
|
|
5273
5263
|
this.sidebarService = sidebarService;
|
|
5274
5264
|
this.breakpointService = breakpointService;
|
|
5275
|
-
this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
5276
5265
|
this.dark = input(true, { ...(ngDevMode ? { debugName: "dark" } : {}), alias: 'dark', transform: booleanAttribute });
|
|
5277
5266
|
this.subscription = new Subscription();
|
|
5278
5267
|
this.rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : {}), alias: 'rounded', transform: booleanAttribute });
|
|
@@ -5294,15 +5283,8 @@ class SidebarComponent {
|
|
|
5294
5283
|
ngOnDestroy() {
|
|
5295
5284
|
this.subscription.unsubscribe();
|
|
5296
5285
|
}
|
|
5297
|
-
toggleSidebar() {
|
|
5298
|
-
this.setCollapsed(!this.isCollapsed());
|
|
5299
|
-
}
|
|
5300
5286
|
setCollapsed(collapsed) {
|
|
5301
|
-
this.
|
|
5302
|
-
const sidebar = document.getElementById('sidebar');
|
|
5303
|
-
const content = document.querySelector('.rlb-content');
|
|
5304
|
-
content?.classList.toggle('expanded', collapsed);
|
|
5305
|
-
sidebar?.classList.toggle('collapsed', collapsed);
|
|
5287
|
+
this.sidebarService.setCollapsed(collapsed);
|
|
5306
5288
|
}
|
|
5307
5289
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, deps: [{ token: SidebarService }, { token: BreakpointService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5308
5290
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-bs-theme": "dark() ? 'dark' : 'light'" } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
|
|
@@ -5323,21 +5305,7 @@ class SidebarComponent {
|
|
|
5323
5305
|
</ul>
|
|
5324
5306
|
</div>
|
|
5325
5307
|
</div>
|
|
5326
|
-
|
|
5327
|
-
role="button"
|
|
5328
|
-
class="sidebar-toggle"
|
|
5329
|
-
[tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
|
|
5330
|
-
[tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
|
|
5331
|
-
[tooltip-class]="'sidebar-toggler-tooltip'"
|
|
5332
|
-
(click)="toggleSidebar()"
|
|
5333
|
-
>
|
|
5334
|
-
<i
|
|
5335
|
-
[class.bi-chevron-double-left]="!isCollapsed()"
|
|
5336
|
-
[class.bi-chevron-double-right]="isCollapsed()"
|
|
5337
|
-
class="bi "
|
|
5338
|
-
></i>
|
|
5339
|
-
</div>
|
|
5340
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }] }); }
|
|
5308
|
+
`, isInline: true }); }
|
|
5341
5309
|
}
|
|
5342
5310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
5343
5311
|
type: Component,
|
|
@@ -5361,20 +5329,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5361
5329
|
</ul>
|
|
5362
5330
|
</div>
|
|
5363
5331
|
</div>
|
|
5364
|
-
<div
|
|
5365
|
-
role="button"
|
|
5366
|
-
class="sidebar-toggle"
|
|
5367
|
-
[tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
|
|
5368
|
-
[tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
|
|
5369
|
-
[tooltip-class]="'sidebar-toggler-tooltip'"
|
|
5370
|
-
(click)="toggleSidebar()"
|
|
5371
|
-
>
|
|
5372
|
-
<i
|
|
5373
|
-
[class.bi-chevron-double-left]="!isCollapsed()"
|
|
5374
|
-
[class.bi-chevron-double-right]="isCollapsed()"
|
|
5375
|
-
class="bi "
|
|
5376
|
-
></i>
|
|
5377
|
-
</div>
|
|
5378
5332
|
`,
|
|
5379
5333
|
host: {
|
|
5380
5334
|
'[attr.data-bs-theme]': "dark() ? 'dark' : 'light'",
|
|
@@ -5610,6 +5564,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5610
5564
|
}]
|
|
5611
5565
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover-placement", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover-class", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover-title", required: false }] }] } });
|
|
5612
5566
|
|
|
5567
|
+
class TooltipDirective {
|
|
5568
|
+
constructor(elementRef) {
|
|
5569
|
+
this.elementRef = elementRef;
|
|
5570
|
+
this.tooltip = input(undefined, { ...(ngDevMode ? { debugName: "tooltip" } : {}), alias: 'tooltip' });
|
|
5571
|
+
this.placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'tooltip-placement' });
|
|
5572
|
+
this.customClass = input('', { ...(ngDevMode ? { debugName: "customClass" } : {}), alias: 'tooltip-class' });
|
|
5573
|
+
this.html = input(false, { ...(ngDevMode ? { debugName: "html" } : {}), alias: 'tooltip-html', transform: booleanAttribute });
|
|
5574
|
+
// We only need one effect to handle dynamic changes to the title text.
|
|
5575
|
+
effect(() => {
|
|
5576
|
+
const title = this.tooltip();
|
|
5577
|
+
if (this._tooltip) {
|
|
5578
|
+
if (title) {
|
|
5579
|
+
this._tooltip.enable();
|
|
5580
|
+
this._tooltip.setContent({ '.tooltip-inner': title });
|
|
5581
|
+
}
|
|
5582
|
+
else {
|
|
5583
|
+
this._tooltip.disable();
|
|
5584
|
+
}
|
|
5585
|
+
}
|
|
5586
|
+
});
|
|
5587
|
+
}
|
|
5588
|
+
ngOnInit() {
|
|
5589
|
+
this._tooltip = new Tooltip(this.elementRef.nativeElement, {
|
|
5590
|
+
title: this.tooltip() || '',
|
|
5591
|
+
placement: this.placement(),
|
|
5592
|
+
customClass: this.customClass(),
|
|
5593
|
+
html: this.html(),
|
|
5594
|
+
});
|
|
5595
|
+
}
|
|
5596
|
+
ngOnDestroy() {
|
|
5597
|
+
if (this._tooltip) {
|
|
5598
|
+
this._tooltip.dispose();
|
|
5599
|
+
}
|
|
5600
|
+
}
|
|
5601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5602
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TooltipDirective, isStandalone: false, selector: "[tooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "tooltip-placement", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "tooltip-class", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "tooltip-html", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
5603
|
+
}
|
|
5604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
5605
|
+
type: Directive,
|
|
5606
|
+
args: [{
|
|
5607
|
+
selector: '[tooltip]',
|
|
5608
|
+
standalone: false,
|
|
5609
|
+
}]
|
|
5610
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-placement", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-class", required: false }] }], html: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip-html", required: false }] }] } });
|
|
5611
|
+
|
|
5613
5612
|
const COMPONENTS = [
|
|
5614
5613
|
AlertComponent,
|
|
5615
5614
|
BreadcrumbComponent,
|