feat(sidebar): minimized state @Input/@output

- When `minimized` input property is set from outside,
  sidebar will properly switch it's state, eg:
  `[minimized]="sidebar.minimized$ | async"`
- It's possible to listen to `minimized` value changes,
  eg. to persist in localStorage
  `[(minimized)]="minimized"` or
  `[minimized]="minimized$ | async" (minimizedChange)="minimized$.next($event)"`

Author: Hagith

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

@@ -1,33 +1,24 @@
-import {Component, ElementRef, HostBinding, HostListener, Inject, OnInit, Renderer2} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
+import { Component, HostBinding, HostListener, Optional } from '@angular/core';
+import { AppSidebarComponent } from './app-sidebar.component';
 
 @Component({
   selector: 'app-sidebar-minimizer, cui-sidebar-minimizer',
-  template: ``,
+  template: ``
 })
-export class AppSidebarMinimizerComponent implements OnInit {
+export class AppSidebarMinimizerComponent {
 
   @HostBinding('attr.role') role = 'button';
+  @HostBinding('class.sidebar-minimizer') _minimizer = true;
 
   @HostListener('click', ['$event'])
   toggleOpen($event: any) {
     $event.preventDefault();
-    const body = this.document.body;
-    body.classList.contains('sidebar-minimized') ?
-      this.renderer.removeClass(body, 'sidebar-minimized') :
-      this.renderer.addClass(body, 'sidebar-minimized');
-    body.classList.contains('brand-minimized') ?
-      this.renderer.removeClass(body, 'brand-minimized') :
-      this.renderer.addClass(body, 'brand-minimized');
+    this.sidebar.toggleMinimized();
   }
 
-  constructor(
-    @Inject(DOCUMENT) private document: any,
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'sidebar-minimizer');
+  constructor(@Optional() private sidebar: AppSidebarComponent) {
+    if (!sidebar) {
+      throw Error(`AppSidebarMinimizer must be placed within a AppSidebar component.`);
+    }
   }
-
-  ngOnInit() {}
 }

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

@@ -1,6 +1,5 @@
-import {Component, Input, Inject, OnInit, OnDestroy, Renderer2, ElementRef} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-
+import { Component, EventEmitter, HostBinding, Inject, Input, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';
 import { sidebarCssClasses } from '../shared';
 
 @Component({
@@ -11,32 +10,51 @@ export class AppSidebarComponent implements OnInit, OnDestroy {
   @Input() compact: boolean;
   @Input() display: any;
   @Input() fixed: boolean;
-  @Input() minimized: boolean;
   @Input() offCanvas: boolean;
 
+  @Input()
+  get minimized() {
+    return this._minimized;
+  }
+  set minimized(value: boolean) {
+    // only update / emit events when the value changes
+    if (this._minimized !== value) {
+      this._minimized = value;
+      this._updateMinimized(value);
+      this.minimizedChange.emit(value);
+    }
+  }
+  private _minimized = false;
+
+  /**
+   * Emits whenever the minimized state of the sidebar changes.
+   * Primarily used to facilitate two-way binding.
+   */
+  @Output() minimizedChange = new EventEmitter<boolean>();
+
+  @HostBinding('class.sidebar') _sidebar = true;
+
   constructor(
     @Inject(DOCUMENT) private document: any,
-    private renderer: Renderer2,
-    private hostElement: ElementRef
+    private renderer: Renderer2
   ) {
-    renderer.addClass(hostElement.nativeElement, 'sidebar');
   }
 
   ngOnInit(): void {
     this.displayBreakpoint(this.display);
     this.isCompact(this.compact);
     this.isFixed(this.fixed);
-    this.isMinimized(this.minimized);
     this.isOffCanvas(this.offCanvas);
   }
 
   ngOnDestroy(): void {
-    this.renderer.removeClass(this.document.body, 'sidebar-fixed' );
+    this.minimizedChange.complete();
+    this.renderer.removeClass(this.document.body, 'sidebar-fixed');
   }
 
   isCompact(compact: boolean = this.compact): void {
     if (compact) {
-      this.renderer.addClass(this.document.body, 'sidebar-compact' );
+      this.renderer.addClass(this.document.body, 'sidebar-compact');
     }
   }
 
@@ -46,10 +64,8 @@ export class AppSidebarComponent implements OnInit, OnDestroy {
     }
   }
 
-  isMinimized(minimized: boolean = this.minimized): void {
-    if (minimized) {
-      this.renderer.addClass(this.document.body, 'sidebar-minimized');
-    }
+  toggleMinimized(): void {
+    this.minimized = !this._minimized;
   }
 
   isOffCanvas(offCanvas: boolean = this.offCanvas): void {
@@ -64,4 +80,16 @@ export class AppSidebarComponent implements OnInit, OnDestroy {
       this.renderer.addClass(this.document.body, cssClass);
     }
   }
+
+  private _updateMinimized(minimized: boolean): void {
+    const body = this.document.body;
+
+    if (minimized) {
+      this.renderer.addClass(body, 'sidebar-minimized');
+      this.renderer.addClass(body, 'brand-minimized');
+    } else {
+      this.renderer.removeClass(body, 'sidebar-minimized');
+      this.renderer.removeClass(body, 'brand-minimized');
+    }
+  }
 }