@open-rlb/ng-bootstrap 3.1.16 → 3.1.18

package/assets/scss/_variables.scss

@@ -81,7 +81,7 @@ $boxed-body-bg:                                     #ebebf4;
 $apex-grid-color:                                   var(--#{$prefix}border-color);
 
 // table
-$table-head-bg:                                     $gray-100;
+//$table-head-bg:                                     $gray-100;
 $table-head-bg:                                     #eff2f7; // Distinct light gray
 //$table-head-color:  $body-color;
 $table-dark-border-color:                           tint-color($gray-800, 7.5%);
@@ -634,11 +634,11 @@ $border-color-translucent:    $gray-400;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .375rem;
-$border-radius-sm:            .2rem;
-$border-radius-lg:            .4rem;
-$border-radius-xl:            1rem;
-$border-radius-xxl:           2rem;
+$border-radius-sm:            .25rem;   // 4px  (Standard small curve)
+$border-radius:               .375rem;  // 6px  (Standard button curve)
+$border-radius-lg:            .625rem;  // 10px (Large button/input curve)
+$border-radius-xl:            1rem;     // 16px (Bubbly card/modal curve)
+$border-radius-xxl:           2rem;     // 32px
 $border-radius-pill:          50rem;
 // scss-docs-end border-radius-variables
 // fusv-disable
@@ -1424,7 +1424,7 @@ $card-title-color:                  var(--#{$prefix}emphasis-color);
 $card-subtitle-color:               null;
 $card-border-width:                 1px;
 $card-border-color:                 rgba($gray-200, 0.5);
-$card-border-radius:                1rem; // Soft bubbly cards
+$card-border-radius:                var(--#{$prefix}border-radius-xl);
 $card-box-shadow:                   0 4px 6px rgba(18, 38, 63, 0.03), 0 1px 3px rgba(18, 38, 63, 0.05);
 $card-inner-border-radius:          calc(#{$card-border-radius} - 1px);
 $card-cap-padding-y:                $card-spacer-y * .5;
@@ -1549,7 +1549,7 @@ $toast-color:                       null;
 $toast-background-color:            var(--#{$prefix}secondary-bg);
 $toast-border-width:                var(--#{$prefix}border-width);
 $toast-border-color:                var(--#{$prefix}border-color);
-$toast-border-radius:               .25rem;
+$toast-border-radius:               var(--#{$prefix}border-radius);
 $toast-box-shadow:                  var(--#{$prefix}box-shadow-lg);
 $toast-spacing:                     $container-padding-x;
 
@@ -1587,7 +1587,7 @@ $modal-content-color:               null;
 $modal-content-bg:                  var(--#{$prefix}secondary-bg);
 $modal-content-border-color:        var(--#{$prefix}border-color);
 $modal-content-border-width:        var(--#{$prefix}border-width);
-$modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
+$modal-content-border-radius:       var(--#{$prefix}border-radius-xl);
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
 $modal-content-box-shadow-xs:       $box-shadow-sm;
 $modal-content-box-shadow-sm-up:    $box-shadow;

package/assets/scss/rlb/app-layout.scss

@@ -47,50 +47,16 @@
   z-index: $zindex-dropdown;
 }
 
-.sidebar-toggle {
-  position: absolute;
-  top: 1rem;
-  left: $sidebar-width - 1.5rem;
-  z-index: 1035;
-  transform: translateX(-50%);
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: left 0.3s ease-in-out, transform 0.2s ease, color 0.2s ease, border 0.2s ease;
-
-  &:hover {
-    transform: translateX(-50%) scale(1.15);
-    border: 1px solid $sidebar-menu-item-active-color;
-    color: $sidebar-menu-item-active-color;
-  }
-
-  i {
-    font-size: 16px;
-  }
-}
-
-.sidebar-toggler-tooltip,
-[data-bs-theme="dark"] .tooltip
+.sidebar-toggler
 {
-  --bs-tooltip-bg: var(--bs-body-bg);
-  --bs-tooltip-color: var(--bs-body-color);
-
-  --bs-tooltip-border-width: 1px;
-  --bs-tooltip-border-color: rgba(0, 0, 0, 0.15);
-
-  background-color: var(--bs-tooltip-bg);
-  color: var(--bs-tooltip-color);
-  border: var(--bs-tooltip-border-width) solid var(--bs-tooltip-border-color);
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-}
-
-.sidebar-toggler-tooltip {
-  pointer-events: none;
+  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
+  font-size: var(--bs-navbar-toggler-font-size);
+  line-height: 1;
+  color: var(--bs-navbar-color);
+  background-color: transparent;
+  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
+  border-radius: var(--bs-navbar-toggler-border-radius);
+  transition: var(--bs-navbar-toggler-transition);
 }
 
 .rlb-sidebar.collapsed .sidebar-toggle {

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 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';
-import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Tooltip, Popover } from 'bootstrap';
+import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Popover, Tooltip } from 'bootstrap';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from '@angular/common';
@@ -4461,10 +4461,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: ['template', { static: true }]
             }] } });
 
+class SidebarService {
+    constructor() {
+        this.itemClickedSource = new Subject();
+        this.itemClicked$ = this.itemClickedSource.asObservable();
+        this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    }
+    notifyItemClicked() {
+        this.itemClickedSource.next();
+    }
+    setCollapsed(collapsed) {
+        this.isCollapsed.set(collapsed);
+        const sidebar = document.getElementById('sidebar');
+        const content = document.querySelector('.rlb-content');
+        content?.classList.toggle('expanded', collapsed);
+        sidebar?.classList.toggle('collapsed', collapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class NavbarComponent {
-    constructor(idService, viewContainerRef) {
+    constructor(idService, viewContainerRef, sidebarService) {
         this.idService = idService;
         this.viewContainerRef = viewContainerRef;
+        this.sidebarService = sidebarService;
         this.destroy$ = new Subject();
         this._navExpand = computed(() => {
             const exp = this.expand();
@@ -4477,11 +4504,12 @@ class NavbarComponent {
         }, ...(ngDevMode ? [{ debugName: "_navExpand" }] : []));
         this.navbarItemsGroups = contentChildren(NavbarItemsComponent, { ...(ngDevMode ? { debugName: "navbarItemsGroups" } : {}), descendants: true });
         this.dark = input(true, { ...(ngDevMode ? { debugName: "dark" } : {}), alias: 'dark', transform: booleanAttribute });
+        this.showSideBarToggler = input(true, { ...(ngDevMode ? { debugName: "showSideBarToggler" } : {}), transform: booleanAttribute });
         this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.placement = input(undefined, ...(ngDevMode ? [{ debugName: "placement" }] : []));
         this.expand = input(undefined, ...(ngDevMode ? [{ debugName: "expand" }] : []));
         this.cssClass = input('', { ...(ngDevMode ? { debugName: "cssClass" } : {}), alias: 'class' });
-        this.enableDropdownToggler = input(true, { ...(ngDevMode ? { debugName: "enableDropdownToggler" } : {}), alias: 'enable-dropdown-toggler',
+        this.enableDropdownToggler = input(false, { ...(ngDevMode ? { debugName: "enableDropdownToggler" } : {}), alias: 'enable-dropdown-toggler',
             transform: booleanAttribute });
         this.navId = `nav${this.idService.id}`;
         effect(() => {
@@ -4506,6 +4534,10 @@ class NavbarComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    toggleSidebar() {
+        const isSideBarCollapsed = this.sidebarService.isCollapsed();
+        this.sidebarService.setCollapsed(!isSideBarCollapsed);
+    }
     closeMobileMenu() {
         const collapseEl = this.element?.querySelector('.navbar-collapse');
         if (collapseEl && collapseEl.classList.contains('show')) {
@@ -4513,26 +4545,40 @@ class NavbarComponent {
             bsCollapse.hide();
         }
     }
-    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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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: `
+    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 }); }
+    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 }, showSideBarToggler: { classPropertyName: "showSideBarToggler", publicName: "showSideBarToggler", 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: `
     <ng-template #template>
       <nav
         class="navbar px-2 bg-{{ color() }} {{ placement() }} {{ _navExpand() }} {{ cssClass() }}"
         [attr.data-bs-theme]="dark() ? 'dark' : 'light'"
       >
         <div class="container-fluid">
+          @if (showSideBarToggler()) {
+            <button
+              class="sidebar-toggler me-3"
+              type="button"
+              rlb-button
+              aria-label="Toggle sidebar"
+              (click)="toggleSidebar()"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          }
+
           <ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
-          <button
-            class="navbar-toggler"
-            [class.d-none]="!enableDropdownToggler()"
-            type="button"
-            rlb-button
-            toggle="collapse"
-            [toggle-target]="navId"
-            aria-label="Toggle navigation"
-          >
-            <span class="navbar-toggler-icon"></span>
-          </button>
+          @if (enableDropdownToggler()) {
+            <button
+              class="navbar-toggler"
+              [class.d-none]="!enableDropdownToggler()"
+              type="button"
+              rlb-button
+              toggle="collapse"
+              [toggle-target]="navId"
+              aria-label="Toggle navigation"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          }
           <div
             class="collapse navbar-collapse"
             [id]="navId"
@@ -4559,18 +4605,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [attr.data-bs-theme]="dark() ? 'dark' : 'light'"
       >
         <div class="container-fluid">
+          @if (showSideBarToggler()) {
+            <button
+              class="sidebar-toggler me-3"
+              type="button"
+              rlb-button
+              aria-label="Toggle sidebar"
+              (click)="toggleSidebar()"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          }
+
           <ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
-          <button
-            class="navbar-toggler"
-            [class.d-none]="!enableDropdownToggler()"
-            type="button"
-            rlb-button
-            toggle="collapse"
-            [toggle-target]="navId"
-            aria-label="Toggle navigation"
-          >
-            <span class="navbar-toggler-icon"></span>
-          </button>
+          @if (enableDropdownToggler()) {
+            <button
+              class="navbar-toggler"
+              [class.d-none]="!enableDropdownToggler()"
+              type="button"
+              rlb-button
+              toggle="collapse"
+              [toggle-target]="navId"
+              aria-label="Toggle navigation"
+            >
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          }
           <div
             class="collapse navbar-collapse"
             [id]="navId"
@@ -4587,12 +4647,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
   `,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
+        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ViewContainerRef }, { type: SidebarService }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { static: true }]
             }], navbarItemsGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NavbarItemsComponent), { ...{
                             descendants: true,
-                        }, isSignal: true }] }], dark: [{ type: i0.Input, args: [{ isSignal: true, alias: "dark", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], enableDropdownToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-dropdown-toggler", required: false }] }] } });
+                        }, isSignal: true }] }], dark: [{ type: i0.Input, args: [{ isSignal: true, alias: "dark", required: false }] }], showSideBarToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSideBarToggler", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], enableDropdownToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-dropdown-toggler", required: false }] }] } });
 
 class OffcanvasBodyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OffcanvasBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -5049,24 +5109,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], 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"] }] } });
 
-class SidebarService {
-    constructor() {
-        this.itemClickedSource = new Subject();
-        this.itemClicked$ = this.itemClickedSource.asObservable();
-    }
-    notifyItemClicked() {
-        this.itemClickedSource.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class SidebarItemComponent {
     constructor(viewContainerRef, uniqueIdService, router, sidebarService) {
         this.viewContainerRef = viewContainerRef;
@@ -5220,51 +5262,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], 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 }] }] } });
 
-class TooltipDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.tooltip = input(undefined, { ...(ngDevMode ? { debugName: "tooltip" } : {}), alias: 'tooltip' });
-        this.placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'tooltip-placement' });
-        this.customClass = input('', { ...(ngDevMode ? { debugName: "customClass" } : {}), alias: 'tooltip-class' });
-        this.html = input(false, { ...(ngDevMode ? { debugName: "html" } : {}), alias: 'tooltip-html', transform: booleanAttribute });
-        // We only need one effect to handle dynamic changes to the title text.
-        effect(() => {
-            const title = this.tooltip();
-            if (this._tooltip) {
-                if (title) {
-                    this._tooltip.enable();
-                    this._tooltip.setContent({ '.tooltip-inner': title });
-                }
-                else {
-                    this._tooltip.disable();
-                }
-            }
-        });
-    }
-    ngOnInit() {
-        this._tooltip = new Tooltip(this.elementRef.nativeElement, {
-            title: this.tooltip() || '',
-            placement: this.placement(),
-            customClass: this.customClass(),
-            html: this.html(),
-        });
-    }
-    ngOnDestroy() {
-        if (this._tooltip) {
-            this._tooltip.dispose();
-        }
-    }
-    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 }); }
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tooltip]',
-                    standalone: false,
-                }]
-        }], 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 }] }] } });
-
 /**
  * Sidebar component
  */
@@ -5272,7 +5269,6 @@ class SidebarComponent {
     constructor(sidebarService, breakpointService) {
         this.sidebarService = sidebarService;
         this.breakpointService = breakpointService;
-        this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
         this.dark = input(true, { ...(ngDevMode ? { debugName: "dark" } : {}), alias: 'dark', transform: booleanAttribute });
         this.subscription = new Subscription();
         this.rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : {}), alias: 'rounded', transform: booleanAttribute });
@@ -5294,15 +5290,8 @@ class SidebarComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    toggleSidebar() {
-        this.setCollapsed(!this.isCollapsed());
-    }
     setCollapsed(collapsed) {
-        this.isCollapsed.set(collapsed);
-        const sidebar = document.getElementById('sidebar');
-        const content = document.querySelector('.rlb-content');
-        content?.classList.toggle('expanded', collapsed);
-        sidebar?.classList.toggle('collapsed', collapsed);
+        this.sidebarService.setCollapsed(collapsed);
     }
     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 }); }
     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 +5312,7 @@ class SidebarComponent {
         </ul>
       </div>
     </div>
-    <div
-      role="button"
-      class="sidebar-toggle"
-      [tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
-      [tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
-      [tooltip-class]="'sidebar-toggler-tooltip'"
-      (click)="toggleSidebar()"
-    >
-      <i
-        [class.bi-chevron-double-left]="!isCollapsed()"
-        [class.bi-chevron-double-right]="isCollapsed()"
-        class="bi "
-      ></i>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }] }); }
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -5361,20 +5336,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </ul>
       </div>
     </div>
-    <div
-      role="button"
-      class="sidebar-toggle"
-      [tooltip]="!isCollapsed() ? 'Hide' : 'Show'"
-      [tooltip-placement]="!isCollapsed() ? 'top' : 'left'"
-      [tooltip-class]="'sidebar-toggler-tooltip'"
-      (click)="toggleSidebar()"
-    >
-      <i
-        [class.bi-chevron-double-left]="!isCollapsed()"
-        [class.bi-chevron-double-right]="isCollapsed()"
-        class="bi "
-      ></i>
-    </div>
   `,
                     host: {
                         '[attr.data-bs-theme]': "dark() ? 'dark' : 'light'",
@@ -5610,6 +5571,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], 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 }] }] } });
 
+class TooltipDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.tooltip = input(undefined, { ...(ngDevMode ? { debugName: "tooltip" } : {}), alias: 'tooltip' });
+        this.placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'tooltip-placement' });
+        this.customClass = input('', { ...(ngDevMode ? { debugName: "customClass" } : {}), alias: 'tooltip-class' });
+        this.html = input(false, { ...(ngDevMode ? { debugName: "html" } : {}), alias: 'tooltip-html', transform: booleanAttribute });
+        // We only need one effect to handle dynamic changes to the title text.
+        effect(() => {
+            const title = this.tooltip();
+            if (this._tooltip) {
+                if (title) {
+                    this._tooltip.enable();
+                    this._tooltip.setContent({ '.tooltip-inner': title });
+                }
+                else {
+                    this._tooltip.disable();
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this._tooltip = new Tooltip(this.elementRef.nativeElement, {
+            title: this.tooltip() || '',
+            placement: this.placement(),
+            customClass: this.customClass(),
+            html: this.html(),
+        });
+    }
+    ngOnDestroy() {
+        if (this._tooltip) {
+            this._tooltip.dispose();
+        }
+    }
+    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 }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]',
+                    standalone: false,
+                }]
+        }], 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 }] }] } });
+
 const COMPONENTS = [
     AlertComponent,
     BreadcrumbComponent,