@open-rlb/ng-bootstrap 2.4.6 → 2.4.8

package/assets/scss/_variables.scss

@@ -1,4 +1,20 @@
+@use "sass:color";
+@use "sass:string";
+
 // Variables
+$prefix: bs- !default;
+$white:  #fff !default;
+$black:  #000 !default;
+
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
 
 //
 // custom-variables
@@ -408,7 +424,7 @@ $success-bg-subtle:       rgba($success, 0.25);
 $info-bg-subtle:          rgba($info, 0.25);
 $warning-bg-subtle:       rgba($warning, 0.25);
 $danger-bg-subtle:        rgba($danger, 0.25);
-$light-bg-subtle:         mix($gray-100, $white);
+$light-bg-subtle:         color.mix($gray-100, $white);
 $dark-bg-subtle:          rgba($dark, 0.25);
 // scss-docs-end theme-bg-subtle-variables
 
@@ -1701,7 +1717,7 @@ $breadcrumb-margin-bottom:          1rem;
 $breadcrumb-bg:                     null;
 $breadcrumb-divider-color:          var(--#{$prefix}secondary-color);
 $breadcrumb-active-color:           var(--#{$prefix}secondary-color);
-$breadcrumb-divider:                quote("/");
+$breadcrumb-divider:                string.quote("/");
 $breadcrumb-divider-flipped:        $breadcrumb-divider;
 $breadcrumb-border-radius:          null;
 // scss-docs-end breadcrumb-variables

package/assets/scss/app.scss

@@ -1,10 +1,17 @@
-
+//Core files
 @import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
+
 @import "variables";
 @import "variables-dark";
+
+@import "bootstrap/scss/variables";
+
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/bootstrap";
 
+// Components
 @import "custom/components/root";
 @import "custom/components/reboot";
 @import "custom/components/badge";
@@ -17,17 +24,19 @@
 @import "custom/components/pagination";
 @import "custom/components/progress";
 @import "custom/components/carousel";
+@import "custom/components/waves";
+@import "custom/components/avatar";
+@import "custom/components/accordion";
+@import "custom/components/helper";
+@import "custom/components/preloader";
+@import "custom/components/forms";
+@import "custom/components/widgets";
+@import "custom/components/demos";
+@import "custom/components/print";
 
 //Fonts
 @import "custom/fonts/fonts";
 
-//Core files
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "variables";
-@import "variables-dark";
-@import "bootstrap/scss/mixins";
-
 // Structure
 @import "custom/structure/general";
 @import "custom/structure/topbar";
@@ -43,16 +52,6 @@
 @import "rlb/avatar";
 @import "rlb/chat.scss";
 
-// Components
-@import "custom/components/waves";
-@import "custom/components/avatar";
-@import "custom/components/accordion";
-@import "custom/components/helper";
-@import "custom/components/preloader";
-@import "custom/components/forms";
-@import "custom/components/widgets";
-@import "custom/components/demos";
-@import "custom/components/print";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";

package/assets/scss/custom/components/_badge.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // 
 // _badge.scss
 // 
@@ -33,7 +34,7 @@
     &[href] {
       &:hover,
       &:focus {
-        background-color: darken($value, 4%) !important;
+        background-color: color.adjust($value, $lightness: -4%) !important;
       }
     }
   }

package/assets/scss/custom/plugins/_calendar-full.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 /* ==============
   Calendar
 ===================*/
@@ -132,7 +133,7 @@
   }
 
   td.fc-today {
-    background: lighten($gray-200, 2%);
+    background: color.adjust($gray-200, $lightness: 2%);
   }
 }
 

package/assets/scss/custom/plugins/_icons.scss

@@ -2,4 +2,4 @@
 // icons.scss
 //
 
-@import "icons/materialdesignicons";
+@use "icons/materialdesignicons";

package/assets/scss/custom/plugins/_responsive-table.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 
 //
 // Responsive Table
@@ -43,7 +44,7 @@
     color: $dropdown-color !important;
 
     &:hover{
-      background-color: lighten($gray-200, 2%) !important;
+      background-color: color.adjust($gray-200, $lightness: 2%) !important;
     }
 
     label {

package/assets/scss/custom/rtl/_float-rtl.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/assets/scss/custom/rtl/_spacing-rtl.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 // Margin and Padding
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/assets/scss/custom/rtl/_text-rtl.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 //
@@ -7,7 +8,7 @@
 
 // Responsive alignment
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/assets/scss/custom/structure/_vertical.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // _menu.scss
 //
@@ -290,7 +291,7 @@
               position: relative;
               width: calc(190px + #{$sidebar-collapsed-width});
               color: $primary;
-              background-color: darken($sidebar-bg, 4%);
+              background-color: color.adjust($sidebar-bg, $lightness: -4%);
               transition: none;
 
               i {
@@ -386,7 +387,7 @@ html[data-bs-theme="dark"] {
 
     .side-nav-link-ref.active {
       color: $sidebar-dark-menu-item-active-color !important;
-      background-color: lighten($sidebar-dark-bg, 3%) !important;
+      background-color: color.adjust($sidebar-dark-bg, $lightness: 3%) !important;
       font-weight: 600;
       border-radius: 0.375rem;
 
@@ -444,7 +445,7 @@ html[data-bs-theme="dark"] {
 
             &:hover {
               >a {
-                background: lighten($sidebar-dark-bg, 2%);
+                background: color.adjust($sidebar-dark-bg, $lightness: 2%);
                 color: $sidebar-dark-menu-item-hover-color;
 
                 i {
@@ -557,7 +558,7 @@ body[data-sidebar-size="small"] {
   #sidebar-menu {
     ul li {
       &.menu-title {
-        background-color: lighten($sidebar-dark-bg, 2%);
+        background-color: color.adjust($sidebar-dark-bg, $lightness: 2%);
       }
 
       a {
@@ -697,7 +698,7 @@ body[data-sidebar="colored"] {
         >ul {
           >li {
             &:hover>a {
-              background-color: lighten($primary, 2%);
+              background-color: color.adjust($primary, $lightness: 2%);
               color: $white;
 
               i {

package/assets/scss/icons.scss

@@ -8,4 +8,4 @@ File: Icons Css File
 */
 
 // Plugins
-@import "custom/plugins/icons";
+@use "custom/plugins/icons" as *;

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -665,7 +665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class BadgeDirective {
     set badge(value) {
-        this._badge = value;
+        this._badge = this.castToString(value);
         this.updateBadge();
     }
     get badge() {
@@ -674,6 +674,7 @@ class BadgeDirective {
     constructor(elementRef, renderer) {
         this.elementRef = elementRef;
         this.renderer = renderer;
+        this._badge = '';
         this.color = 'danger';
     }
     ngDoCheck() {
@@ -763,6 +764,14 @@ class BadgeDirective {
         }
         this.renderer.appendChild(this.elementRef.nativeElement, this.badgeElement);
     }
+    castToString(value) {
+        if (value && typeof value === 'number') {
+            return value.toString();
+        }
+        else {
+            return value;
+        }
+    }
     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 }); }
     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 }); }
 }
@@ -2060,11 +2069,13 @@ class ModalDirective {
         this.el = el;
         this.renderer = renderer;
         this.innerModalService = innerModalService;
+        this.triggerElement = null;
         this._openChange_f = (e) => {
             this.innerModalService.eventModal(e.type.replace('.bs.modal', ''), this._modalReason, this.id, this.instance?.result);
         };
     }
     ngOnInit() {
+        this.triggerElement = document.activeElement;
         // Check prop existence
         // This approach permits to handle empty string '' case
         const hasContent = Object.prototype.hasOwnProperty.call(this.instance.data, 'content') &&
@@ -2157,6 +2168,7 @@ class ModalDirective {
             this._modalReason = reason;
         }
         this.bsModal?.hide();
+        this.triggerElement?.focus();
     }
     initButtons() {
         this._reasonButtons = this.contentElement.querySelectorAll('[data-modal-reason]');
@@ -2166,10 +2178,12 @@ class ModalDirective {
                     this._modalReason = btn.getAttribute('data-modal-reason');
                     if (this._modalReason === 'cancel' || this._modalReason === 'close') {
                         this.bsModal?.hide();
+                        this.triggerElement?.focus();
                     }
                     if (this._modalReason === 'ok') {
                         if (this.instance.valid) {
                             this.bsModal?.hide();
+                            this.triggerElement?.focus();
                         }
                     }
                 });
@@ -5281,7 +5295,7 @@ class SidebarItemComponent {
       <li *ngIf="title" (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
       <li *ngIf="!title" (click)="onItemClick($event)">
 				<a
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
+					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
 					*ngIf="children?.length" href="javascript:void(0);"
 					class="is-parent has-arrow"
 					toggle="collapse"
@@ -5298,7 +5312,7 @@ class SidebarItemComponent {
 				<a
 					*ngIf="!children?.length"
 					[routerLink]="link"
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
+					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
 					class="side-nav-link-ref"
 					routerLinkActive="active"
 				>
@@ -5318,7 +5332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <li *ngIf="title" (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
       <li *ngIf="!title" (click)="onItemClick($event)">
 				<a
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
+					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
 					*ngIf="children?.length" href="javascript:void(0);"
 					class="is-parent has-arrow"
 					toggle="collapse"
@@ -5335,7 +5349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 				<a
 					*ngIf="!children?.length"
 					[routerLink]="link"
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter?.toString(): undefined"
+					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
 					class="side-nav-link-ref"
 					routerLinkActive="active"
 				>
@@ -10832,7 +10846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [ModalDirective, RlbBootstrapModule, FormsModule, CommonModule],
+                    imports: [RlbBootstrapModule, FormsModule, CommonModule],
                     template: `
     <div [class]="'modal-header' + headerColor">
       <h5 class="modal-title">{{ data.title }}</h5>