feat: OutClick service and directive for sidebar component

Author: xidedix

projects/coreui-angular/src/lib/shared/layout/layout.directive.ts

@@ -1,9 +1,10 @@
-import {Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2} from '@angular/core';
+import {Directive, ElementRef, EventEmitter, HostListener, Inject, Input, OnInit, Output, Renderer2} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 import { asideMenuCssClasses } from '../classes';
 import { ClassToggler } from '../toggle-classes';
 import { SidebarService } from '../../sidebar/sidebar.service';
+import { OutClickService } from '../../sidebar/out-click.service';
 
 /**
 * Allows the sidebar to be toggled via click.
@@ -164,3 +165,25 @@ export class HtmlAttributesDirective implements OnInit {
     this.renderer.setAttribute(this.el.nativeElement, key, value );
   }
 }
+
+/**
+ * Detects click outside the element
+ */
+@Directive({ selector: '[cuiOutClick]' })
+export class OutClickDirective {
+
+  constructor(
+    private elementRef: ElementRef,
+    private outClickService: OutClickService
+  ) {}
+
+  @HostListener('document:click', ['$event'])
+  public onDocumentClick($event: MouseEvent): void {
+    const targetElement = $event.target as HTMLElement;
+
+    // Check if the click was outside the element
+    if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
+      this.outClickService.onClick({event: $event});
+    }
+  }
+}

projects/coreui-angular/src/lib/shared/layout/layout.module.ts

@@ -7,7 +7,8 @@ import {
   SidebarToggleDirective,
   SidebarMinimizeDirective,
   SidebarOffCanvasCloseDirective,
-  HtmlAttributesDirective
+  HtmlAttributesDirective,
+  OutClickDirective
 } from './layout.directive';
 import { ClassToggler } from '../toggle-classes';
 
@@ -22,7 +23,8 @@ import { ClassToggler } from '../toggle-classes';
     SidebarToggleDirective,
     SidebarMinimizeDirective,
     SidebarOffCanvasCloseDirective,
-    HtmlAttributesDirective
+    HtmlAttributesDirective,
+    OutClickDirective
   ],
   declarations: [
     AsideToggleDirective,
@@ -31,7 +33,8 @@ import { ClassToggler } from '../toggle-classes';
     SidebarToggleDirective,
     SidebarMinimizeDirective,
     SidebarOffCanvasCloseDirective,
-    HtmlAttributesDirective
+    HtmlAttributesDirective,
+    OutClickDirective
   ],
   providers: [
     ClassToggler

projects/coreui-angular/src/lib/sidebar/out-click.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OutClickService {
+
+  private outClick = new BehaviorSubject<any>({event: undefined});
+  outClick$ = this.outClick.asObservable();
+
+  constructor() {}
+
+  onClick(message: any) {
+    this.outClick.next(message);
+  }
+}

projects/coreui-angular/src/lib/sidebar/sidebar.component.ts

@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../shared';
 import { ClassToggler } from '../shared/toggle-classes';
 import { SidebarService } from './sidebar.service';
+import { OutClickService } from './out-click.service';
 
 interface SidebarState {
   minimized: boolean;
@@ -14,7 +15,7 @@ interface SidebarState {
 
 @Component({
   selector: 'cui-sidebar',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content></ng-content>`
 })
 export class SidebarComponent implements OnInit, OnDestroy {
   @Input() compact: boolean;
@@ -24,7 +25,8 @@ export class SidebarComponent implements OnInit, OnDestroy {
   @Input() opened: boolean;
   @Input() offCanvas: boolean;
 
-  private subscription: Subscription;
+  private stateToggleSubscription: Subscription;
+  private outClickSubscription: Subscription;
   private body: HTMLBodyElement;
 
   state: SidebarState = {
@@ -38,7 +40,8 @@ export class SidebarComponent implements OnInit, OnDestroy {
     private renderer: Renderer2,
     private hostElement: ElementRef,
     private classToggler: ClassToggler,
-    private sidebarService: SidebarService
+    private sidebarService: SidebarService,
+    private outClickService: OutClickService
   ) {
     renderer.addClass(hostElement.nativeElement, 'sidebar');
   }
@@ -54,20 +57,15 @@ export class SidebarComponent implements OnInit, OnDestroy {
     this.isOpened(this.opened);
     this.setState();
 
-    this.subscription = this.sidebarService.sidebarState$.subscribe((state) => {
-      if ('minimize' in state) {
-        this.minimize(state.minimize);
-      }
-      if ('open' in state) {
-        this.open(state);
-      }
-    });
+    this.stateToggleSubscribe();
+    this.outClickSubscribe();
   }
 
   ngOnDestroy(): void {
     this.renderer.removeClass(this.body, 'sidebar-fixed' );
 
-    this.subscription.unsubscribe();
+    this.stateToggleSubscribe(false);
+    this.outClickSubscribe(false);
   }
 
   isCompact(compact: boolean = this.compact): void {
@@ -98,8 +96,7 @@ export class SidebarComponent implements OnInit, OnDestroy {
 
   displayBreakpoint(display: any = this.display): void {
     if (display !== false) {
-      const cssClass = Boolean(display) && checkBreakpoint(display, validBreakpoints) ? `sidebar-${display}-show` : sidebarCssClasses[0];
-      this.renderer.addClass(this.body, cssClass);
+      this.sidebarService.toggle({open: true, breakpoint: display});
     }
   }
 
@@ -120,14 +117,58 @@ export class SidebarComponent implements OnInit, OnDestroy {
     const cssClass = Boolean(state.breakpoint) && checkBreakpoint(state.breakpoint, validBreakpoints) ?
         `sidebar-${state.breakpoint}-show` :
         sidebarCssClasses[0];
+    const mobile = cssClass === sidebarCssClasses[0];
     const opened = this.body.classList.contains( cssClass );
     const open = toggle ? !opened : state.open;
     if (open) {
       this.renderer.addClass(this.body, cssClass );
     } else {
       this.renderer.removeClass(this.body, cssClass );
     }
+    if (mobile) {
+      if (open && (!this.outClickSubscription || this.outClickSubscription.closed)) {
+        this.outClickSubscribe();
+      }
+      if (!open && this.outClickSubscription && !this.outClickSubscription.closed) {
+        this.outClickSubscribe(false);
+      }
+    }
     this.state.opened = <boolean>open;
     return <boolean>open;
   }
+
+  private stateToggleSubscribe(subscribe: Boolean = true) {
+    if (subscribe) {
+      this.stateToggleSubscription = this.sidebarService.sidebarState$.subscribe((state) => {
+        if ('minimize' in state) {
+          this.minimize(state.minimize);
+        }
+        if ('open' in state) {
+          this.open(state);
+        }
+      });
+    } else {
+      this.stateToggleSubscription.unsubscribe();
+    }
+  }
+
+  private outClickSubscribe(subscribe: Boolean = true) {
+    if (subscribe) {
+      this.outClickSubscription = this.outClickService.outClick$.subscribe(message => {
+        if (message.event) {
+          this.hideMobile(message.event);
+        }
+      });
+    } else {
+      this.outClickSubscription.unsubscribe();
+    }
+  }
+
+  public hideMobile(e) {
+    if (this.state.opened) {
+      if (!e.target.closest('[cuisidebartoggle]')) {
+        this.sidebarService.toggle({open: false, breakpoint: ''});
+      }
+    }
+  }
 }

projects/coreui-angular/src/lib/sidebar/sidebar.module.ts

@@ -3,13 +3,15 @@ import { NgModule} from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { LayoutModule } from '../shared/layout/layout.module';
+
 // CoreUI Sidebar Component
 import { SidebarComponent } from './sidebar.component';
 import { SidebarFooterComponent } from './sidebar-footer.component';
 import { SidebarFormComponent } from './sidebar-form.component';
 import { SidebarHeaderComponent } from './sidebar-header.component';
 import { SidebarMinimizerComponent } from './sidebar-minimizer.component';
 import { SidebarService } from './sidebar.service';
+import { OutClickService } from './out-click.service';
 
 // CoreUI SidebarNav Component
 import { NavDropdownDirective, NavDropdownToggleDirective } from './sidebar-nav.directive';
@@ -26,7 +28,7 @@ import { SidebarNavLabelComponent } from './sidebar-nav/sidebar-nav-label.compon
   imports: [
     CommonModule,
     RouterModule,
-    LayoutModule
+    LayoutModule,
   ],
   exports: [
     SidebarFooterComponent,
@@ -61,6 +63,7 @@ import { SidebarNavLabelComponent } from './sidebar-nav/sidebar-nav-label.compon
     SidebarNavLabelComponent
   ],
   providers: [
+    OutClickService,
     SidebarService,
     SidebarNavHelper
   ]