chore(*): expose change events for analyzers

Author: dkamburov

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

@@ -405,23 +405,67 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     }
 
     /**
-     * @hidden
+     * Emitted when the column is hidden or shown.
+     *
+     * ```html
+     * <igx-column (hiddenChange)="hiddenChange($event)">
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
      */
     @Output()
     public hiddenChange = new EventEmitter<boolean>();
 
-    /** @hidden */
+    /**
+     * Emitted when the column expanded or collapsed.
+     *
+     * ```html
+     * <igx-column (expandedChange)="expandedChange($event)">
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
     @Output()
     public expandedChange = new EventEmitter<boolean>();
 
-    /** @hidden */
+    /**
+     * Emitted when the column property `collapsible` changes.
+     *
+     * ```html
+     * <igx-column (collapsibleChange)="collapsibleChange($event)">
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
     @Output()
     public collapsibleChange = new EventEmitter<boolean>();
-    /** @hidden */
+
+    /**
+     * Emitted when the column property `visibleWhenCollapsed` changes.
+     *
+     * ```html
+     * <igx-column (visibleWhenCollapsedChange)="visibleWhenCollapsedChange($event)">
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
     @Output()
     public visibleWhenCollapsedChange = new EventEmitter<boolean>();
 
-    /** @hidden */
+    /**
+     * Emitted when the column changed.
+     *
+     * ```html
+     * <igx-column (columnChange)="columnChange($event)">
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
     @Output()
     public columnChange = new EventEmitter<void>();
 
@@ -861,13 +905,27 @@ 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>
+     * ```
+     *
+     * @memberof IgxColumnComponent
      */
     @Output()
     public widthChange = new EventEmitter<string>();
 
     /**
-     * @hidden
+     * Emitted when the column is pinned/unpinned.
+     *
+     * ```html
+     * <igx-column (pinnedChange)="pinnedChange($event)">
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
      */
     @Output()
     public pinnedChange = new EventEmitter<boolean>();

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts

@@ -116,7 +116,14 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     public sortingChanged = new EventEmitter();
 
     /**
-     * @hidden @internal
+     * Emitted when the column changed.
+     *
+     * ```html
+     * <igx-grid-excel-style-filtering (columnChange)="columnChange($event)">
+     * </igx-grid-excel-style-filtering>
+     * ```
+     *
+     * @memberof IgxGridExcelStyleFilteringComponent
      */
     @Output()
     public columnChange = new EventEmitter<ColumnType>();

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

@@ -27,7 +27,6 @@ import {
     Optional,
     Output,
     QueryList,
-    TemplateRef,
     ViewChild,
     ViewChildren,
     ViewContainerRef
@@ -992,13 +991,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" (selectedRowsChange)="selectedRowsChange($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[]>();
 
@@ -1036,7 +1047,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
      * ```
@@ -1089,7 +1100,12 @@ export abstract class IgxGridBaseDirective implements GridType,
     public rendered = new EventEmitter<boolean>();
 
     /**
-     * @hidden @internal
+     * Emitted when the locale of the grid is changed.
+     *
+     * @example
+     * ```html
+     * <igx-grid [data]="employeeData" (localeChange)="localeChange($event)" [autoGenerate]="true"></igx-grid>
+     * ```
      */
     @Output()
     public localeChange = new EventEmitter<boolean>();

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

@@ -168,13 +168,27 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     public dataPreLoad = new EventEmitter<IForOfState>();
 
     /**
-     * @hidden
+     * Emitted when grouping is performed.
+     *
+     * @remarks
+     * Returns the grouping expressions.
+     * @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.
+     *
+     * @remarks
+     * Returns the grouping expansion states.
+     * @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/grouping/group-by-area.directive.ts

@@ -67,6 +67,14 @@ export abstract class IgxGroupByAreaDirective {
         this._dropAreaMessage = value;
     }
 
+    /**
+     * Emitted when grouping is performed.
+     *
+     * @example
+     * ```html
+     * <igx-grid-group-by-area (expressionsChange)="expressionsChange($event)"></igx-grid-group-by-area>
+     * ```
+     */
     @Output()
     public expressionsChange = new EventEmitter<IGroupingExpression[]>();
 

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

@@ -184,7 +184,16 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
     protected override actionStripComponents: QueryList<IgxActionStripToken>;
 
     /**
-     * @hidden
+     * Event emitted when a layout of the row island is changed.
+     * ```html
+     * <igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
+     *      <igx-row-island [key]="'childData'" (layoutChange)="layoutChange($event)" #rowIsland>
+     *          <!-- ... -->
+     *      </igx-row-island>
+     * </igx-hierarchical-grid>
+     * ```
+     *
+     * @memberof IgxRowIslandComponent
      */
     @Output()
     public layoutChange = new EventEmitter<any>();

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

@@ -108,8 +108,15 @@ 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 +140,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 +171,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,9 +202,14 @@ export class IgxPivotDataSelectorComponent {
     public valuesExpanded = true;
 
     /**
-     * @hidden
-     */
-    @Output()
+     * 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>
+     * ```
+    */
     public valuesExpandedChange = new EventEmitter<boolean>();
 
     private _grid: PivotGridType;