@open-rlb/ng-bootstrap 2.4.5 → 2.4.7

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 (16) hide show
  1. package/assets/scss/_variables.scss +18 -2
  2. package/assets/scss/app.scss +18 -19
  3. package/assets/scss/custom/components/_badge.scss +2 -1
  4. package/assets/scss/custom/plugins/_calendar-full.scss +2 -1
  5. package/assets/scss/custom/plugins/_icons.scss +1 -1
  6. package/assets/scss/custom/plugins/_responsive-table.scss +2 -1
  7. package/assets/scss/custom/rtl/_float-rtl.scss +2 -1
  8. package/assets/scss/custom/rtl/_spacing-rtl.scss +2 -1
  9. package/assets/scss/custom/rtl/_text-rtl.scss +2 -1
  10. package/assets/scss/custom/structure/_vertical.scss +6 -5
  11. package/assets/scss/icons.scss +1 -1
  12. package/assets/scss/rlb/app-layout.scss +3 -1
  13. package/fesm2022/open-rlb-ng-bootstrap.mjs +17 -8
  14. package/fesm2022/open-rlb-ng-bootstrap.mjs.map +1 -1
  15. package/index.d.ts +4 -3
  16. package/package.json +1 -1
package/assets/scss/_variables.scss CHANGED
@@ -1,4 +1,20 @@
1
+ @use "sass:color";
2
+ @use "sass:string";
3
+
1
4
  // Variables
5
+ $prefix: bs- !default;
6
+ $white: #fff !default;
7
+ $black: #000 !default;
8
+
9
+ $gray-100: #f8f9fa !default;
10
+ $gray-200: #e9ecef !default;
11
+ $gray-300: #dee2e6 !default;
12
+ $gray-400: #ced4da !default;
13
+ $gray-500: #adb5bd !default;
14
+ $gray-600: #6c757d !default;
15
+ $gray-700: #495057 !default;
16
+ $gray-800: #343a40 !default;
17
+ $gray-900: #212529 !default;
2
18
 
3
19
  //
4
20
  // custom-variables
@@ -408,7 +424,7 @@ $success-bg-subtle: rgba($success, 0.25);
408
424
  $info-bg-subtle: rgba($info, 0.25);
409
425
  $warning-bg-subtle: rgba($warning, 0.25);
410
426
  $danger-bg-subtle: rgba($danger, 0.25);
411
- $light-bg-subtle: mix($gray-100, $white);
427
+ $light-bg-subtle: color.mix($gray-100, $white);
412
428
  $dark-bg-subtle: rgba($dark, 0.25);
413
429
  // scss-docs-end theme-bg-subtle-variables
414
430
 
@@ -1701,7 +1717,7 @@ $breadcrumb-margin-bottom: 1rem;
1701
1717
  $breadcrumb-bg: null;
1702
1718
  $breadcrumb-divider-color: var(--#{$prefix}secondary-color);
1703
1719
  $breadcrumb-active-color: var(--#{$prefix}secondary-color);
1704
- $breadcrumb-divider: quote("/");
1720
+ $breadcrumb-divider: string.quote("/");
1705
1721
  $breadcrumb-divider-flipped: $breadcrumb-divider;
1706
1722
  $breadcrumb-border-radius: null;
1707
1723
  // scss-docs-end breadcrumb-variables
package/assets/scss/app.scss CHANGED
@@ -1,10 +1,17 @@
1
-
1
+ //Core files
2
2
  @import "bootstrap/scss/functions";
3
- @import "bootstrap/scss/variables";
3
+
4
4
  @import "variables";
5
5
  @import "variables-dark";
6
+
7
+ @import "bootstrap/scss/variables";
8
+
9
+ @import "bootstrap/scss/maps";
10
+ @import "bootstrap/scss/mixins";
11
+ @import "bootstrap/scss/utilities";
6
12
  @import "bootstrap/scss/bootstrap";
7
13
 
14
+ // Components
8
15
  @import "custom/components/root";
9
16
  @import "custom/components/reboot";
10
17
  @import "custom/components/badge";
@@ -17,17 +24,19 @@
17
24
  @import "custom/components/pagination";
18
25
  @import "custom/components/progress";
19
26
  @import "custom/components/carousel";
27
+ @import "custom/components/waves";
28
+ @import "custom/components/avatar";
29
+ @import "custom/components/accordion";
30
+ @import "custom/components/helper";
31
+ @import "custom/components/preloader";
32
+ @import "custom/components/forms";
33
+ @import "custom/components/widgets";
34
+ @import "custom/components/demos";
35
+ @import "custom/components/print";
20
36
 
21
37
  //Fonts
22
38
  @import "custom/fonts/fonts";
23
39
 
24
- //Core files
25
- @import "bootstrap/scss/functions";
26
- @import "bootstrap/scss/variables";
27
- @import "variables";
28
- @import "variables-dark";
29
- @import "bootstrap/scss/mixins";
30
-
31
40
  // Structure
32
41
  @import "custom/structure/general";
33
42
  @import "custom/structure/topbar";
@@ -43,16 +52,6 @@
43
52
  @import "rlb/avatar";
44
53
  @import "rlb/chat.scss";
45
54
 
46
- // Components
47
- @import "custom/components/waves";
48
- @import "custom/components/avatar";
49
- @import "custom/components/accordion";
50
- @import "custom/components/helper";
51
- @import "custom/components/preloader";
52
- @import "custom/components/forms";
53
- @import "custom/components/widgets";
54
- @import "custom/components/demos";
55
- @import "custom/components/print";
56
55
 
57
56
  // Plugins
58
57
  @import "custom/plugins/custom-scrollbar";
package/assets/scss/custom/components/_badge.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:color";
1
2
  //
2
3
  // _badge.scss
3
4
  //
@@ -33,7 +34,7 @@
33
34
  &[href] {
34
35
  &:hover,
35
36
  &:focus {
36
- background-color: darken($value, 4%) !important;
37
+ background-color: color.adjust($value, $lightness: -4%) !important;
37
38
  }
38
39
  }
39
40
  }
package/assets/scss/custom/plugins/_calendar-full.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:color";
1
2
  /* ==============
2
3
  Calendar
3
4
  ===================*/
@@ -132,7 +133,7 @@
132
133
  }
133
134
 
134
135
  td.fc-today {
135
- background: lighten($gray-200, 2%);
136
+ background: color.adjust($gray-200, $lightness: 2%);
136
137
  }
137
138
  }
138
139
 
package/assets/scss/custom/plugins/_icons.scss CHANGED
@@ -2,4 +2,4 @@
2
2
  // icons.scss
3
3
  //
4
4
 
5
- @import "icons/materialdesignicons";
5
+ @use "icons/materialdesignicons";
package/assets/scss/custom/plugins/_responsive-table.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:color";
1
2
 
2
3
  //
3
4
  // Responsive Table
@@ -43,7 +44,7 @@
43
44
  color: $dropdown-color !important;
44
45
 
45
46
  &:hover{
46
- background-color: lighten($gray-200, 2%) !important;
47
+ background-color: color.adjust($gray-200, $lightness: 2%) !important;
47
48
  }
48
49
 
49
50
  label {
package/assets/scss/custom/rtl/_float-rtl.scss CHANGED
@@ -1,6 +1,7 @@
1
+ @use "sass:map";
1
2
  // stylelint-disable declaration-no-important
2
3
 
3
- @each $breakpoint in map-keys($grid-breakpoints) {
4
+ @each $breakpoint in map.keys($grid-breakpoints) {
4
5
  @include media-breakpoint-up($breakpoint) {
5
6
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
6
7
 
package/assets/scss/custom/rtl/_spacing-rtl.scss CHANGED
@@ -1,8 +1,9 @@
1
+ @use "sass:map";
1
2
  // stylelint-disable declaration-no-important
2
3
 
3
4
  // Margin and Padding
4
5
 
5
- @each $breakpoint in map-keys($grid-breakpoints) {
6
+ @each $breakpoint in map.keys($grid-breakpoints) {
6
7
  @include media-breakpoint-up($breakpoint) {
7
8
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
8
9
 
package/assets/scss/custom/rtl/_text-rtl.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:map";
1
2
  // stylelint-disable declaration-no-important
2
3
 
3
4
  //
@@ -7,7 +8,7 @@
7
8
 
8
9
  // Responsive alignment
9
10
 
10
- @each $breakpoint in map-keys($grid-breakpoints) {
11
+ @each $breakpoint in map.keys($grid-breakpoints) {
11
12
  @include media-breakpoint-up($breakpoint) {
12
13
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
13
14
 
package/assets/scss/custom/structure/_vertical.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:color";
1
2
  //
2
3
  // _menu.scss
3
4
  //
@@ -290,7 +291,7 @@
290
291
  position: relative;
291
292
  width: calc(190px + #{$sidebar-collapsed-width});
292
293
  color: $primary;
293
- background-color: darken($sidebar-bg, 4%);
294
+ background-color: color.adjust($sidebar-bg, $lightness: -4%);
294
295
  transition: none;
295
296
 
296
297
  i {
@@ -386,7 +387,7 @@ html[data-bs-theme="dark"] {
386
387
 
387
388
  .side-nav-link-ref.active {
388
389
  color: $sidebar-dark-menu-item-active-color !important;
389
- background-color: lighten($sidebar-dark-bg, 3%) !important;
390
+ background-color: color.adjust($sidebar-dark-bg, $lightness: 3%) !important;
390
391
  font-weight: 600;
391
392
  border-radius: 0.375rem;
392
393
 
@@ -444,7 +445,7 @@ html[data-bs-theme="dark"] {
444
445
 
445
446
  &:hover {
446
447
  >a {
447
- background: lighten($sidebar-dark-bg, 2%);
448
+ background: color.adjust($sidebar-dark-bg, $lightness: 2%);
448
449
  color: $sidebar-dark-menu-item-hover-color;
449
450
 
450
451
  i {
@@ -557,7 +558,7 @@ body[data-sidebar-size="small"] {
557
558
  #sidebar-menu {
558
559
  ul li {
559
560
  &.menu-title {
560
- background-color: lighten($sidebar-dark-bg, 2%);
561
+ background-color: color.adjust($sidebar-dark-bg, $lightness: 2%);
561
562
  }
562
563
 
563
564
  a {
@@ -697,7 +698,7 @@ body[data-sidebar="colored"] {
697
698
  >ul {
698
699
  >li {
699
700
  &:hover>a {
700
- background-color: lighten($primary, 2%);
701
+ background-color: color.adjust($primary, $lightness: 2%);
701
702
  color: $white;
702
703
 
703
704
  i {
package/assets/scss/icons.scss CHANGED
@@ -8,4 +8,4 @@ File: Icons Css File
8
8
  */
9
9
 
10
10
  // Plugins
11
- @import "custom/plugins/icons";
11
+ @use "custom/plugins/icons" as *;
package/assets/scss/rlb/app-layout.scss CHANGED
@@ -70,7 +70,9 @@
70
70
  }
71
71
  }
72
72
 
73
- .sidebar-toggler-tooltip {
73
+ .sidebar-toggler-tooltip,
74
+ [data-bs-theme="dark"] .tooltip
75
+ {
74
76
  --bs-tooltip-bg: var(--bs-body-bg);
75
77
  --bs-tooltip-color: var(--bs-body-color);
76
78
 
package/fesm2022/open-rlb-ng-bootstrap.mjs CHANGED
@@ -665,7 +665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
665
665
 
666
666
  class BadgeDirective {
667
667
  set badge(value) {
668
- this._badge = value;
668
+ this._badge = this.castToString(value);
669
669
  this.updateBadge();
670
670
  }
671
671
  get badge() {
@@ -674,6 +674,7 @@ class BadgeDirective {
674
674
  constructor(elementRef, renderer) {
675
675
  this.elementRef = elementRef;
676
676
  this.renderer = renderer;
677
+ this._badge = '';
677
678
  this.color = 'danger';
678
679
  }
679
680
  ngDoCheck() {
@@ -763,6 +764,14 @@ class BadgeDirective {
763
764
  }
764
765
  this.renderer.appendChild(this.elementRef.nativeElement, this.badgeElement);
765
766
  }
767
+ castToString(value) {
768
+ if (value && typeof value === 'number') {
769
+ return value.toString();
770
+ }
771
+ else {
772
+ return value;
773
+ }
774
+ }
766
775
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
767
776
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.16", type: BadgeDirective, isStandalone: false, selector: "[badge]", inputs: { badge: "badge", pill: ["badge-pill", "pill", booleanAttribute], border: ["badge-border", "border", booleanAttribute], top: ["badge-top", "top", numberAttribute], start: ["badge-start", "start", numberAttribute], color: ["badge-color", "color"], hiddenText: ["hidden-text", "hiddenText"] }, ngImport: i0 }); }
768
777
  }
@@ -2545,11 +2554,11 @@ class RlbFabComponent {
2545
2554
  }
2546
2555
  }
2547
2556
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2548
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: RlbFabComponent, isStandalone: false, selector: "rlb-fab", inputs: { color: "color", size: "size", disabled: ["disabled", "disabled", booleanAttribute], outline: ["outline", "outline", booleanAttribute], position: "position" }, ngImport: i0, template: "<button\n rlb-button\n [color]=\"color\"\n [disabled]=\"disabled\"\n [outline]=\"outline\"\n class=\"fab-button d-flex align-items-center justify-content-center\"\n [ngClass]=\"[sizeClass, positionClass]\"\n>\n <ng-content></ng-content>\n</button>\n", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }] }); }
2557
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: RlbFabComponent, isStandalone: false, selector: "rlb-fab", inputs: { color: "color", size: "size", disabled: ["disabled", "disabled", booleanAttribute], outline: ["outline", "outline", booleanAttribute], position: "position" }, ngImport: i0, template: "<button\n rlb-button\n [color]=\"color\"\n [disabled]=\"disabled\"\n [outline]=\"outline\"\n class=\"fab-button d-flex align-items-center justify-content-center\"\n [ngClass]=\"[sizeClass, positionClass]\"\n>\n <ng-content></ng-content>\n</button>\n", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}:host{width:fit-content;display:block}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }] }); }
2549
2558
  }
2550
2559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbFabComponent, decorators: [{
2551
2560
  type: Component,
2552
- args: [{ selector: 'rlb-fab', standalone: false, template: "<button\n rlb-button\n [color]=\"color\"\n [disabled]=\"disabled\"\n [outline]=\"outline\"\n class=\"fab-button d-flex align-items-center justify-content-center\"\n [ngClass]=\"[sizeClass, positionClass]\"\n>\n <ng-content></ng-content>\n</button>\n", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"] }]
2561
+ args: [{ selector: 'rlb-fab', standalone: false, template: "<button\n rlb-button\n [color]=\"color\"\n [disabled]=\"disabled\"\n [outline]=\"outline\"\n class=\"fab-button d-flex align-items-center justify-content-center\"\n [ngClass]=\"[sizeClass, positionClass]\"\n>\n <ng-content></ng-content>\n</button>\n", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}:host{width:fit-content;display:block}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"] }]
2553
2562
  }], propDecorators: { color: [{
2554
2563
  type: Input
2555
2564
  }], size: [{
@@ -5281,7 +5290,7 @@ class SidebarItemComponent {
5281
5290
  <li *ngIf="title" (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
5282
5291
  <li *ngIf="!title" (click)="onItemClick($event)">
5283
5292
  <a
5284
- [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
5293
+ [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
5285
5294
  *ngIf="children?.length" href="javascript:void(0);"
5286
5295
  class="is-parent has-arrow"
5287
5296
  toggle="collapse"
@@ -5298,7 +5307,7 @@ class SidebarItemComponent {
5298
5307
  <a
5299
5308
  *ngIf="!children?.length"
5300
5309
  [routerLink]="link"
5301
- [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
5310
+ [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
5302
5311
  class="side-nav-link-ref"
5303
5312
  routerLinkActive="active"
5304
5313
  >
@@ -5318,7 +5327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5318
5327
  <li *ngIf="title" (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
5319
5328
  <li *ngIf="!title" (click)="onItemClick($event)">
5320
5329
  <a
5321
- [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
5330
+ [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
5322
5331
  *ngIf="children?.length" href="javascript:void(0);"
5323
5332
  class="is-parent has-arrow"
5324
5333
  toggle="collapse"
@@ -5335,7 +5344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5335
5344
  <a
5336
5345
  *ngIf="!children?.length"
5337
5346
  [routerLink]="link"
5338
- [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
5347
+ [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
5339
5348
  class="side-nav-link-ref"
5340
5349
  routerLinkActive="active"
5341
5350
  >
@@ -10832,7 +10841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
10832
10841
  type: Component,
10833
10842
  args: [{
10834
10843
  standalone: true,
10835
- imports: [ModalDirective, RlbBootstrapModule, FormsModule, CommonModule],
10844
+ imports: [RlbBootstrapModule, FormsModule, CommonModule],
10836
10845
  template: `
10837
10846
  <div [class]="'modal-header' + headerColor">
10838
10847
  <h5 class="modal-title">{{ data.title }}</h5>