chore(*): Update splitter pane comments.

Author: MKirova

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

@@ -1,10 +1,17 @@
 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',
@@ -14,10 +21,18 @@ export class IgxSplitterPaneComponent {
 
     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() {
@@ -30,25 +45,51 @@ export class IgxSplitterPaneComponent {
     }
 
     /**
-     * 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;
 
     /**
      * Event fired when collapsed state of pane is changed.
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane (onToggle)='onPaneToggle($event)'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
      */
     @Output()
     public onToggle = new EventEmitter<IgxSplitterPaneComponent>();
@@ -59,35 +100,39 @@ export class IgxSplitterPaneComponent {
     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`.
      */
     @HostBinding('style.flex')
@@ -99,13 +144,18 @@ 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';
 
     /**
-     * Sets/gets whether current pane is collapsed.
+     * Gets/Sets whether current pane is collapsed.
+     * @example
+     * ```typescript
+     * const isCollapsed = pane.collapsed;
+     * ```
      */
     @Input()
     public set collapsed(value) {
@@ -133,6 +183,10 @@ export class IgxSplitterPaneComponent {
 
     /**
      * Toggles the collapsed state of the pane.
+     * @example
+     * ```typescript
+     * pane.toggle();
+     * ```
      */
     public toggle() {
         // reset sibling sizes when pane collapse state changes.