Merge pull request #7126 from IgniteUI/mkirova/splitter-spec-changes

Apply changes as per the spec changes.

Author: ChronosSF

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

@@ -7,10 +7,8 @@ import {DragDirection, IDragMoveEventArgs, IDragStartEventArgs} from '../../dire
 export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' '));
 
 /**
- * Provides reference to `SplitBarComponent` component.
- * Represents the draggable gripper that visually separates panes and allows for changing their sizes.
- * @export
- * @class SplitBarComponent
+ * @hidden @internal
+ * Represents the draggable bar that visually separates panes and allows for changing their sizes.
  */
 @Component({
     selector: 'igx-splitter-bar',
@@ -24,15 +22,13 @@ export class IgxSplitBarComponent {
     public cssClass = 'igx-splitter-bar-host';
 
     /**
-     * Sets/gets `IgxSplitBarComponent` orientation.
-     * @type SplitterType
+     * Gets/Sets the orientation.
      */
     @Input()
-    public type: SplitterType = SplitterType.Vertical;
+    public type: SplitterType = SplitterType.Horizontal;
 
     /**
-     * Sets/gets `IgxSplitBarComponent` element order.
-     * @type SplitterType
+     * Sets/gets the element order.
      */
     @HostBinding('style.order')
     @Input()
@@ -43,7 +39,18 @@ export class IgxSplitBarComponent {
      * @internal
      */
     @HostBinding('attr.tabindex')
-    public tabindex = 0;
+    public get tabindex() {
+        return this.resizeDisallowed ? null : 0;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.aria-orientation')
+    public get orientation() {
+        return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical';
+    }
 
     /**
      * @hidden
@@ -71,35 +78,26 @@ export class IgxSplitBarComponent {
 
     /**
      * An event that is emitted whenever we start dragging the current `SplitBarComponent`.
-     * @memberof SplitBarComponent
      */
     @Output()
     public moveStart = new EventEmitter<IgxSplitterPaneComponent>();
 
     /**
      * An event that is emitted while we are dragging the current `SplitBarComponent`.
-     * @memberof SplitBarComponent
      */
     @Output()
     public moving = new EventEmitter<number>();
 
-    /**
-     * An event that is emitted when collapsing the pane
-     */
-    @Output()
-    public togglePane = new EventEmitter<IgxSplitterPaneComponent>();
     /**
      * A temporary holder for the pointer coordinates.
-     * @private
-     * @memberof SplitBarComponent
      */
     private startPoint!: number;
 
     /**
      * @hidden @internal
      */
     public get prevButtonHidden() {
-        return this.siblings[0].hidden && !this.siblings[1].hidden;
+        return this.siblings[0].collapsed && !this.siblings[1].collapsed;
     }
 
     /**
@@ -186,9 +184,12 @@ export class IgxSplitBarComponent {
      * @hidden @internal
      */
     public get nextButtonHidden() {
-        return this.siblings[1].hidden && !this.siblings[0].hidden;
+        return this.siblings[1].collapsed && !this.siblings[0].collapsed;
     }
 
+    /**
+     * @hidden @internal
+     */
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
             event.cancel = true;
@@ -198,6 +199,9 @@ export class IgxSplitBarComponent {
         this.moveStart.emit(this.pane);
     }
 
+    /**
+     * @hidden @internal
+     */
     public onDragMove(event: IDragMoveEventArgs) {
         const isHorizontal = this.type === SplitterType.Horizontal;
         const curr =  isHorizontal ? event.pageX : event.pageY;
@@ -211,20 +215,23 @@ export class IgxSplitBarComponent {
 
     protected get resizeDisallowed() {
         const relatedTabs = this.siblings;
-        return !!relatedTabs.find(x => x.resizable === false || x.hidden === true);
+        return !!relatedTabs.find(x => x.resizable === false || x.collapsed === true);
     }
 
+    /**
+     * @hidden @internal
+     */
     public onCollapsing(next: boolean) {
         const prevSibling = this.siblings[0];
         const nextSibling = this.siblings[1];
         let target;
         if (next) {
             // if next is clicked when prev pane is hidden, show prev pane, else hide next pane.
-            target = prevSibling.hidden ? prevSibling : nextSibling;
+            target = prevSibling.collapsed ? prevSibling : nextSibling;
         } else {
             // if prev is clicked when next pane is hidden, show next pane, else hide prev pane.
-            target = nextSibling.hidden ? nextSibling : prevSibling;
+            target = nextSibling.collapsed ? nextSibling : prevSibling;
         }
-        this.togglePane.emit(target);
+        target.toggle();
     }
 }

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

@@ -1,20 +1,38 @@
 import { Component, HostBinding, Input, ElementRef, Output, EventEmitter } from '@angular/core';
 
 /**
- * Provides reference to `SplitPaneComponent` component.
- * Represents individual resizable panes. Users can control the resize behavior via the min and max size properties.
- * @export
- * @class SplitPaneComponent
+ * Represents individual resizable/collapsible panes.
+ * @igxModule IgxSplitterModule
+ *
+ * @igxParent IgxSplitterComponent
+ *
+ * @igxKeywords pane
+ *
+ * @igxGroup presentation
+ *
+ * @remarks
+ *  Users can control the resize behavior via the min and max size properties.
  */
 @Component({
     selector: 'igx-splitter-pane',
     templateUrl: './splitter-pane.component.html'
 })
 export class IgxSplitterPaneComponent {
 
-    public _size = 'auto';
+    private _size = 'auto';
+    private _collapsed = false;
+
+    /** @hidden @internal */
+    public owner;
+
     /**
-     * Sets/gets the size of the current `IgxSplitterPaneComponent`.
+     * Gets/Sets the size of the current pane.
+     *  * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane [size]='size'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
      */
     @Input()
     get size() {
@@ -24,73 +42,98 @@ export class IgxSplitterPaneComponent {
     set size(value) {
         this._size = value;
         this.el.nativeElement.style.flex = this.flex;
-        this.sizeChange.emit(value);
     }
 
     /**
-     * @hidden @internal
-     */
-    @Output()
-    public sizeChange = new EventEmitter<string>();
-
-    /**
-     * Sets/gets the minimum allowable size of the current `IgxSplitterPaneComponent`.
+     * Gets/Sets the minimum allowed size of the current pane.
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
      */
     @Input()
     public minSize!: string;
 
     /**
-     * Sets/gets the maximum allowable size of the current `IgxSplitterPaneComponent`.
+     * Gets/Set the maximum allowed size of the current pane.
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
      */
     @Input()
     public maxSize!: string;
 
     /**
-     * Sets/Gets whether pane is resizable.
+     * Gets/Sets whether pane is resizable.
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
+     * @remarks
+     * If pane is not resizable its related splitter bar cannot be dragged.
      */
     @Input()
     public resizable = true;
 
-
     /**
-     * Sets/gets the `order` property of the current `IgxSplitterPaneComponent`.
+     * Event fired when collapsed state of pane is changed.
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane (onToggle)='onPaneToggle($event)'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
      */
-    @Input()
+    @Output()
+    public onToggle = new EventEmitter<IgxSplitterPaneComponent>();
+
+
+    /** @hidden @internal */
     @HostBinding('style.order')
     public order!: number;
 
     /**
+     *
+     * @hidden @internal
      * Gets the host native element.
-     * @readonly
-     * @type *
      */
     public get element(): any {
         return this.el.nativeElement;
     }
 
     /**
-     * Sets/gets the `overflow` property of the current `IgxSplitterPaneComponent`.
+     * @hidden @internal
+     * Gets/Sets the `overflow`.
      */
     @HostBinding('style.overflow')
     public overflow = 'auto';
 
     /**
-     * Sets/gets the `minHeight` and `minWidth` propertis of the current `IgxSplitterPaneComponent`.
+     * @hidden @internal
+     * Gets/Sets the `minHeight` and `minWidth` properties of the current pane.
      */
     @HostBinding('style.min-height')
     @HostBinding('style.min-width')
     public minHeight = 0;
 
     /**
-     * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `IgxSplitterPaneComponent`.
+     * @hidden @internal
+     * Gets/Sets the `maxHeight` and `maxWidth` properties of the current `IgxSplitterPaneComponent`.
      */
     @HostBinding('style.max-height')
     @HostBinding('style.max-width')
     public maxHeight = '100%';
 
     /**
+     * @hidden @internal
      * Gets the `flex` property of the current `IgxSplitterPaneComponent`.
-     * @readonly
      */
     @HostBinding('style.flex')
     public get flex() {
@@ -101,31 +144,56 @@ export class IgxSplitterPaneComponent {
     }
 
     /**
-     * Sets/gets the 'display' property of the current `IgxSplitterPaneComponent`
+     * @hidden @internal
+     * Gets/Sets the 'display' property of the current pane.
      */
     @HostBinding('style.display')
     public display = 'flex';
 
-    private _hidden = false;
-
     /**
-     * Sets/gets whether current `IgxSplitterPanecomponent` is hidden
+     * Gets/Sets whether current pane is collapsed.
+     * @example
+     * ```typescript
+     * const isCollapsed = pane.collapsed;
+     * ```
      */
     @Input()
-    public set hidden(value) {
-        this._hidden = value;
-        this.display = this._hidden ? 'none' : 'flex' ;
+    public set collapsed(value) {
+        this._collapsed = value;
+        this.display = this._collapsed ? 'none' : 'flex' ;
+    }
+
+    public get collapsed() {
+        return this._collapsed;
     }
 
-    public get hidden() {
-        return this._hidden;
+    /** @hidden @internal */
+    private _getSiblings() {
+        const panes = this.owner.panes.toArray();
+        const index = panes.indexOf(this);
+        const siblings = [];
+        if (index !== 0) {
+            siblings.push(panes[index - 1]);
+        }
+        if (index !== panes.length - 1) {
+            siblings.push(panes[index + 1]);
+        }
+        return siblings;
     }
 
     /**
-     * Event fired when collapsing and changing the hidden state of the current pane
+     * Toggles the collapsed state of the pane.
+     * @example
+     * ```typescript
+     * pane.toggle();
+     * ```
      */
-    @Output()
-    public onPaneToggle = new EventEmitter<IgxSplitterPaneComponent>();
+    public toggle() {
+        // reset sibling sizes when pane collapse state changes.
+        this._getSiblings().forEach(sibling => sibling.size = 'auto');
+        this.collapsed = !this.collapsed;
+        this.onToggle.emit(this);
+    }
 
     constructor(private el: ElementRef) { }
 }

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

@@ -1,11 +1,10 @@
 <ng-content select="igx-splitter-pane"></ng-content>
 <ng-container *ngFor="let pane of panes; let last = last; let index= index;">
-    <igx-splitter-bar *ngIf="!last" [order]='pane.order + 1'
+    <igx-splitter-bar *ngIf="!last" [order]='pane.order + 1' role='separator'
                     [type]="type"
                     [pane]="pane"
                     [siblings]='getPaneSiblingsByOrder(pane.order + 1, index)'
                     (moveStart)="onMoveStart($event)"
-                    (moving)="onMoving($event)"
-                    (togglePane)="togglePane($event)">
+                    (moving)="onMoving($event)">
     </igx-splitter-bar>
 </ng-container>