feat(IgxSplitter): Adding expand/collapse functionality #6639

Author: Martin Dragnev

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html

@@ -1,15 +1,15 @@
 <div class="igx-splitter__bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
 (dragStart)='onDragStart($event)'
 (dragMove)="onDragMove($event)">
-    <div class="igx-splitter-bar-expander">
-        <igx-icon fontSet="material">{{collapsePrevIcon}}</igx-icon>
-    </div>    
+    <div class="igx-splitter-bar-expander" (click)='onCollapsing($event)'>
+        <igx-icon fontSet="material" [hidden]='prevButtonHidden'>{{collapsePrevIcon}}</igx-icon>
+    </div>
     <div class="igx-splitter__bar-handle" [style.cursor]='cursor'
     [class.igx-splitter__handle-vertical]='type === 0'
     [class.igx-splitter__handle-horizontal]='type === 1'
     igxDragHandle
     ></div>
-    <div class="igx-splitter-bar-expander">
-        <igx-icon fontSet="material">{{collapseNextIcon}}</igx-icon>
+    <div class="igx-splitter-bar-expander" (click)='onCollapsing($event)' >
+        <igx-icon fontSet="material" [hidden]='nextButtonHidden' >{{collapseNextIcon}}</igx-icon>
     </div>
-</div>
+</div>

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts

@@ -49,6 +49,12 @@ export class IgxSplitBarComponent {
     @Output()
     public moving = new EventEmitter<number>();
 
+    /**
+     * An event that is emitted when collapsing the pane
+     */
+    @Output()
+    public collapse = new EventEmitter<IgxSplitterPaneComponent>();
+
     /**
      * Gets the cursor associated with the current `SplitBarComponent`.
      * @readonly
@@ -92,6 +98,15 @@ export class IgxSplitBarComponent {
      */
     private startPoint!: number;
 
+    get prevButtonHidden() {
+        const isPaneHidden = this.pane.hidden;
+        return isPaneHidden ? true : false;
+    }
+
+    get nextButtonHidden() {
+        const isSiblingHidden = this.siblings[0].hidden;
+        return isSiblingHidden ? true : false;
+    }
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
             event.cancel = true;
@@ -122,4 +137,24 @@ export class IgxSplitBarComponent {
         return !!relatedTabs.find(x => x.resizable === false);
     }
 
+    public onCollapsing(event: any) {
+        const arrowElement = event.srcElement;
+        const direction = arrowElement.innerText === 'arrow_left' || arrowElement.innerText === 'arrow_drop_up' ? 0 : 1;
+        let _pane = null;
+        const sibling = this.siblings[0];
+        if (!direction) {
+            if (!this.pane.hidden || !sibling.hidden) {
+                if (sibling.hidden) {
+                    _pane = sibling;
+                } else {
+                    if (!this.pane.hidden) {
+                       _pane = this.pane;
+                    }
+                }
+            }
+        } else {
+            _pane = !this.pane.hidden ? sibling : this.pane;
+        }
+        this.collapse.emit(_pane);
+    }
 }

projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts

@@ -75,7 +75,7 @@ export class IgxSplitterPaneComponent {
     public minHeight = 0;
 
     /**
-     * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `SplitPaneComponent`.
+     * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `IgxSplitterPaneComponent`.
      */
     @HostBinding('style.max-height')
     @HostBinding('style.max-width')
@@ -93,5 +93,26 @@ export class IgxSplitterPaneComponent {
         return `${grow} ${shrink} ${this.size}`;
     }
 
+    /**
+     * Sets/gets the 'display' property of the current `IgxSplitterPaneComponent`
+     */
+    @HostBinding('style.display')
+    public display = 'flex';
+
+    private _hidden = false;
+
+    /**
+     * Sets/gets whether current `IgxSplitterPanecomponent` is hidden
+     */
+    @Input()
+    public set hidden(value) {
+        this._hidden = value;
+        this.display = this._hidden ? 'none' : 'flex' ;
+    }
+
+    public get hidden() {
+        return this._hidden;
+    }
+
     constructor(private el: ElementRef) { }
 }

projects/igniteui-angular/src/lib/splitter/splitter.component.html

@@ -5,6 +5,7 @@
                     [pane]="pane"
                     [siblings]='getSiblings(pane)'
                     (moveStart)="onMoveStart($event)"
-                    (moving)="onMoving($event)">
+                    (moving)="onMoving($event)"
+                    (collapse)="onCollapsing($event)">
     </igx-splitter-bar>
-</ng-container>
+</ng-container>

projects/igniteui-angular/src/lib/splitter/splitter.component.ts

@@ -151,6 +151,18 @@ export class IgxSplitterComponent implements AfterContentInit {
         this.sibling.size = siblingSize + 'px';
     }
 
+    /**
+     * This method performs the collapsing of the pane
+     * @param pane
+     */
+    public onCollapsing(pane: IgxSplitterPaneComponent) {
+        if (!pane) {
+            return;
+        }
+        this.pane = pane;
+        this.pane.hidden = !this.pane.hidden;
+    }
+
     /**
      * This method takes care for assigning an `order` property on each `IgxSplitterPaneComponent`.
      * @private