docs(grids,elements): expose more -Change events for analyzer (#15749)

Author: dkamburov

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -405,23 +405,38 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     }
 
     /**
-     * @hidden
+     * Emitted when the column is hidden or shown.
+     *
+     * ```html
+     * <igx-column (hiddenChange)="hiddenChange($event)">
+     * </igx-column>
+     * ```
+     *
      */
     @Output()
     public hiddenChange = new EventEmitter<boolean>();
 
-    /** @hidden */
+    /**
+     * Emitted when the column expanded or collapsed.
+     *
+     * ```html
+     * <igx-column (expandedChange)="expandedChange($event)">
+     * </igx-column>
+     * ```
+     *
+     */
     @Output()
     public expandedChange = new EventEmitter<boolean>();
 
     /** @hidden */
     @Output()
     public collapsibleChange = new EventEmitter<boolean>();
+
     /** @hidden */
     @Output()
     public visibleWhenCollapsedChange = new EventEmitter<boolean>();
 
-    /** @hidden */
+    /** @hidden @internal */
     @Output()
     public columnChange = new EventEmitter<void>();
 
@@ -861,13 +876,25 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     public additionalTemplateContext: any;
 
     /**
-     * @hidden
+     * Emitted when the column width changes.
+     *
+     * ```html
+     * <igx-column (widthChange)="widthChange($event)">
+     * </igx-column>
+     * ```
+     *
      */
     @Output()
     public widthChange = new EventEmitter<string>();
 
     /**
-     * @hidden
+     * Emitted when the column is pinned/unpinned.
+     *
+     * ```html
+     * <igx-column (pinnedChange)="pinnedChange($event)">
+     * </igx-column>
+     * ```
+     *
      */
     @Output()
     public pinnedChange = new EventEmitter<boolean>();

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -26,8 +26,8 @@ import {
     OnInit,
     Optional,
     Output,
-    QueryList,
     TemplateRef,
+    QueryList,
     ViewChild,
     ViewChildren,
     ViewContainerRef
@@ -994,13 +994,25 @@ export abstract class IgxGridBaseDirective implements GridType,
     public gridCopy = new EventEmitter<IGridClipboardEvent>();
 
     /**
-     * @hidden @internal
+     * Emitted when the rows are expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid>
+     * ```
      */
     @Output()
     public expansionStatesChange = new EventEmitter<Map<any, boolean>>();
 
     /* blazorInclude */
-    /** @hidden @internal */
+    /**
+     * Emitted when the rows are selected or deselected.
+     *
+     * @example
+     * ```html
+     * <igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
     @Output()
     public selectedRowsChange = new EventEmitter<any[]>();
 
@@ -1038,7 +1050,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     public rowPinned = new EventEmitter<IPinRowEventArgs>();
 
     /**
-     * Emmited when the active node is changed.
+     * Emitted when the active node is changed.
      *
      * @example
      * ```

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -168,13 +168,23 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     public dataPreLoad = new EventEmitter<IForOfState>();
 
     /**
-     * @hidden
+     * Emitted when grouping is performed.
+     *
+     * @example
+     * ```html
+     * <igx-grid #grid [data]="localData" [autoGenerate]="true" (groupingExpressionsChange)="groupingExpressionsChange($event)"></igx-grid>
+     * ```
      */
     @Output()
     public groupingExpressionsChange = new EventEmitter<IGroupingExpression[]>();
 
     /**
-     * @hidden @internal
+     * Emitted when groups are expanded/collapsed.
+     *
+     * @example
+     * ```html
+     * <igx-grid #grid [data]="localData" [autoGenerate]="true" (groupingExpansionStateChange)="groupingExpansionStateChange($event)"></igx-grid>
+     * ```
      */
     @Output()
     public groupingExpansionStateChange = new EventEmitter<IGroupByExpandState[]>();

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts

@@ -108,8 +108,14 @@ export class IgxPivotDataSelectorComponent {
     public columnsExpanded = true;
 
     /**
-     * @hidden
-     */
+     * Emitted when the columns panel is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
+     *              (columnsExpandedChange)="columnsExpandedChange($event)"></igx-pivot-data-selector>
+     * ```
+    */
     @Output()
     public columnsExpandedChange = new EventEmitter<boolean>();
 
@@ -133,8 +139,14 @@ export class IgxPivotDataSelectorComponent {
     public rowsExpanded = true;
 
     /**
-     * @hidden
-     */
+     * Emitted when the rows panel is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
+     *              (rowsExpandedChange)="rowsExpandedChange($event)"></igx-pivot-data-selector>
+     * ```
+    */
     @Output()
     public rowsExpandedChange = new EventEmitter<boolean>();
 
@@ -158,8 +170,14 @@ export class IgxPivotDataSelectorComponent {
     public filtersExpanded = true;
 
     /**
-     * @hidden
-     */
+     * Emitted when the filters panel is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
+     *              (filtersExpandedChange)="filtersExpandedChange($event)"></igx-pivot-data-selector>
+     * ```
+    */
     @Output()
     public filtersExpandedChange = new EventEmitter<boolean>();
 
@@ -183,8 +201,14 @@ export class IgxPivotDataSelectorComponent {
     public valuesExpanded = true;
 
     /**
-     * @hidden
-     */
+     * Emitted when the values panel is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-data-selector #grid [data]="localData" [height]="'305px'"
+     *              (valuesExpandedChange)="valuesExpandedChange($event)"></igx-pivot-data-selector>
+     * ```
+    */
     @Output()
     public valuesExpandedChange = new EventEmitter<boolean>();