[APM-7] Feature enhancement for the create and edit folder directive (#3179)

* Add observable menu open state to the sidenav-layout component

* add documentation, fix inversed value

* Add success events to folder create/edit directives

* Overridable dialog titles for the directives

* Update the documentation

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.spec.ts

@@ -277,4 +277,52 @@ describe('SidenavLayoutComponent', () => {
             expect(component.isMenuMinimized).toBe(false);
         });
     });
+
+    describe('menuOpenState', () => {
+
+        let component;
+
+        beforeEach(async(() => {
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+
+            fixture = TestBed.createComponent(SidenavLayoutComponent);
+            component = fixture.componentInstance;
+        });
+
+        it('should be true by default', (done) => {
+            fixture.detectChanges();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(true);
+                done();
+            });
+        });
+
+        it('should be the same as the expandedSidenav\'s value by default', (done) => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(false);
+                done();
+            });
+        });
+
+        it('should emit value on toggleMenu action', (done) => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            component.toggleMenu();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(true);
+                done();
+            });
+        });
+    });
 });

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts

@@ -20,6 +20,8 @@ import { MediaMatcher } from '@angular/cdk/layout';
 import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
 import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'adf-sidenav-layout',
@@ -40,11 +42,15 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
     @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective;
     @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective;
 
+    private menuOpenStateSubject: BehaviorSubject<boolean>;
+    public menuOpenState$: Observable<boolean>;
+
     @ViewChild('container') container: any;
     @ViewChild('emptyTemplate') emptyTemplate: any;
 
     mediaQueryList: MediaQueryList;
-    isMenuMinimized;
+    _isMenuMinimized;
+
     templateContext = {
         toggleMenu: () => {},
         isMenuMinimized: () => this.isMenuMinimized
@@ -55,8 +61,14 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
     }
 
     ngOnInit() {
+        const initialMenuState = !this.expandedSidenav;
+
+        this.menuOpenStateSubject = new BehaviorSubject<boolean>(initialMenuState);
+        this.menuOpenState$ = this.menuOpenStateSubject.asObservable();
+
         const stepOver = this.stepOver || SidenavLayoutComponent.STEP_OVER;
-        this.isMenuMinimized = !this.expandedSidenav;
+        this.isMenuMinimized = initialMenuState;
+
         this.mediaQueryList = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`);
         this.mediaQueryList.addListener(this.onMediaQueryChange);
     }
@@ -79,6 +91,15 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
         this.container.toggleMenu();
     }
 
+    get isMenuMinimized() {
+        return this._isMenuMinimized;
+    }
+
+    set isMenuMinimized(menuState: boolean) {
+        this._isMenuMinimized = menuState;
+        this.menuOpenStateSubject.next(!menuState);
+    }
+
     get isHeaderInside() {
         return this.mediaQueryList.matches;
     }