feat(*): remove deprecated properties and add toolbar input for button action

Author: mddragnev

CHANGELOG.md

@@ -23,7 +23,14 @@ All notable changes for each version of this project will be documented in this
     };
     this.alert.positionSettings = this.newPositionSettings;
     ```
-
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - **Breaking Change** - The following deprecated inputs have been removed
+        - Inputs  `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `columnPinning`, 
+        `columnPinningTitle`, `pinnedColumnsText`.
+        Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
+- `IgxColumnActionsComponent`
+    - **Breaking Change** - The following input has been removed
+        - Input `columns`. Use `igxGrid` input instead.        
 ## 12.2.1
 
 ### New Features

projects/igniteui-angular/src/lib/grids/README.md

@@ -193,16 +193,9 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. |
 |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. |
 |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels.|
-|`columnHiding`| boolean | Returns whether the column hiding UI for the `IgxGridComponent` is enabled.|
-| `columnHidingTitle`| string | The title to be displayed in the built-in column hiding UI.|
-| `columnPinning` | boolean | Returns if the built-in column pinning UI should be shown in the toolbar. |
-| `columnPinningTitle` | string | The title to be displayed in the UI of the column pinning.|
 | `rowHeight` | number | Sets the row height. |
 | `columnWidth` | string | The default width of the `IgxGridComponent`'s columns. |
 |`primaryKey`| any | Property that sets the primary key of the `IgxGridComponent`. |
-|`hiddenColumnsText`| string | The text to be displayed inside the toggle button for the built-in column hiding UI of the`IgxColumnComponent`. |
-|`pinnedColumnsText`| string | the text to be displayed inside the toggle button for the built-in column pinning UI of the`IgxColumnComponent`. |
-|`showToolbar`| boolean | Specifies whether the `IgxGridComponent`'s toolbar is shown or hidden.|
 |`toolbarTitle`| string | the toolbar's title. |
 |`exportExcel`| boolean | Returns whether the option for exporting to MS Excel is enabled or disabled. |
 |`exportCsv`| boolean | Returns whether the option for exporting to CSV is enabled or disabled.|

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

@@ -172,27 +172,6 @@ export class IgxColumnActionsComponent implements DoCheck {
         this._differ = this.differs.find([]).create(this.trackChanges);
     }
 
-    /**
-     * Gets the grid columns to provide an action for.
-     *
-     * @deprecated
-     * @example
-     * ```typescript
-     * let gridColumns = this.columnActions.columns;
-     * ```
-     */
-    @DeprecateProperty(`Deprecated. Use 'grid' input instead.`)
-    @Input()
-    public get columns() {
-        return this.grid?.columns;
-    }
-
-    public set columns(value) {
-        if (value && value.length > 0) {
-            this.grid = value[0].grid;
-        }
-    }
-
     /**
      * Gets the prompt that is displayed in the filter input.
      *

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

@@ -400,7 +400,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *
      * @example
      * ```html
-     * <igx-grid #grid [data]="localData" [showToolbar]="true" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @WatchChanges()
@@ -813,7 +813,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Args: { column: any, newValue: boolean }
      * @example
      * ```html
-     * <igx-grid [columnHiding]="true" [showToolbar]="true" (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
+     * <igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
      * ```
      */
     @Output()
@@ -826,7 +826,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Args: { column: IgxColumnComponent, newValue: boolean }
      * @example
      * ```html
-     * <igx-grid [columnHiding]="true" [showToolbar]="true" (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
+     * <igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
      * ```
      */
     @Output()
@@ -839,7 +839,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Returns the moved `IgxColumnComponent` object.
      * @example
      * ```html
-     * <igx-grid [columnHiding]="true" [showToolbar]="true" (columnMovingStart)="movingStart($event)"></igx-grid>
+     * <igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>
      * ```
      */
     @Output()
@@ -852,7 +852,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Returns the source and target `IgxColumnComponent` objects. This event is cancelable.
      * @example
      * ```html
-     * <igx-grid [columnHiding]="true" [showToolbar]="true" (columnMoving)="moving($event)"></igx-grid>
+     * <igx-grid (columnMoving)="moving($event)"></igx-grid>
      * ```
      */
     @Output()
@@ -865,7 +865,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * Returns the source and target `IgxColumnComponent` objects.
      * @example
      * ```html
-     * <igx-grid [columnHiding]="true" [showToolbar]="true" (columnMovingEnd)="movingEnds($event)"></igx-grid>
+     * <igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>
      * ```
      */
     @Output()
@@ -1567,28 +1567,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
-    /**
-     * Gets/Sets whether the column hiding UI is enabled.
-     *
-     * @deprecated
-     * @remarks
-     * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
-     * @example
-     * ```html
-     * <igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`columnHiding` is deprecated.')
-    @Input()
-    public get columnHiding() {
-        return this._columnHiding;
-    }
-
-    public set columnHiding(value) {
-        this._columnHiding = value;
-        this.notifyChanges();
-    }
-
     /**
      * Gets/Sets if the row selectors are hidden.
      *
@@ -1646,7 +1624,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * By default it is set to false.
      * @example
      * ```html
-     * <igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>
+     * <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
      * ```
      */
     @WatchChanges()
@@ -1733,7 +1711,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *
      * @example
      * ```html
-     * <igx-grid #grid [data]="localData" [showToolbar]="true" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @WatchChanges()
@@ -1751,7 +1729,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *
      * @example
      * ```html
-     * <igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @WatchChanges()
@@ -1839,30 +1817,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this._emptyFilteredGridMessage || this.resourceStrings.igx_grid_emptyFilteredGrid_message;
     }
 
-    /**
-     * Gets/Sets the title to be displayed in the built-in column hiding UI.
-     *
-     * @deprecated
-     *
-     * @example
-     * ```html
-     * <igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`columnHidingTitle` is deprecated')
-    @Input()
-    public get columnHidingTitle(): string {
-        return this._columnHidingTitle;
-    }
-    public set columnHidingTitle(v: string) {
-        this._columnHidingTitle = v;
-    }
-
-    /** @hidden @internal */
-    public get columnHidingTitleInternal(): string {
-        return this._columnHidingTitle;
-    }
-
     /**
      * Gets/Sets the initial pinning configuration.
      *
@@ -1885,51 +1839,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._pinning = value;
     }
 
-
-    /**
-     * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
-     *
-     * @deprecated
-     *
-     * @example
-     * ```html
-     * <igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`columnPinning` is deprecated')
-    @Input()
-    public get columnPinning() {
-        return this._columnPinning;
-    }
-    public set columnPinning(value) {
-        this._columnPinning = value;
-        this.notifyChanges();
-    }
-
-    /**
-     * Gets/Sets the title to be displayed in the UI of the column pinning.
-     *
-     * @deprecated
-     *
-     * @example
-     * ```html
-     * <igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`columnPinningTitle` is deprecated')
-    @Input()
-    public get columnPinningTitle(): string {
-        return this._columnPinningTitle;
-    }
-    public set columnPinningTitle(v: string) {
-        this._columnPinningTitle = v;
-    }
-
-    /** @hidden @internal */
-    public get columnPinningTitleInternal(): string {
-        return this._columnPinningTitle;
-    }
-
     /**
      * Gets/Sets if the filtering is enabled.
      *
@@ -1964,7 +1873,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *
      * @example
      * ```html
-     * <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [showToolbar]="true" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @Input()
@@ -2429,52 +2338,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.pinnedColumns.filter(col => !col.columnLayout).length;
     }
 
-    /**
-     * Gets/Sets the text to be displayed inside the toggle button.
-     *
-     * @deprecated
-     *
-     * @remarks
-     * Used for the built-in column hiding UI of the`IgxColumnComponent`.
-     * @example
-     * ```html
-     * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
-     * ```
-     */
-    // @DeprecateProperty('`hiddenColumnsText` is deprecated')
-    @Input()
-    public get hiddenColumnsText() {
-        return this._hiddenColumnsText;
-    }
-
-    public set hiddenColumnsText(value) {
-        this._hiddenColumnsText = value;
-        this.notifyChanges();
-
-    }
-
-    /**
-     * Gets/Sets the text to be displayed inside the toggle button.
-     *
-     * @deprecated
-     *
-     * @remarks
-     * Used for the built-in column pinning UI of the`IgxColumnComponent`.
-     * @example
-     * ```html
-     * <igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`pinnedColumnsText` is deprecated')
-    @Input()
-    public get pinnedColumnsText() {
-        return this._pinnedColumnsText;
-    }
-    public set pinnedColumnsText(value) {
-        this._pinnedColumnsText = value;
-        this.notifyChanges();
-    }
-
     /**
      * Gets/Sets whether the grid has batch editing enabled.
      * When batch editing is enabled, changes are not made directly to the underlying data.
@@ -2500,11 +2363,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
-    /** @hidden @internal */
-    public get pinnedColumnsTextInternal() {
-        return this._pinnedColumnsText;
-    }
-
     /**
      * Get transactions service for the grid.
      */
@@ -2535,47 +2393,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this._currencyPositionLeft = i < 1;
     }
 
-
-    /**
-     * Gets/Sets whether the toolbar is shown.
-     *
-     * @deprecated
-     *
-     * @example
-     * ```html
-     * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" ></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`showToolbar` is deprecated')
-    @Input()
-    public get showToolbar(): boolean {
-        return this._showToolbar;
-    }
-    public set showToolbar(newValue: boolean) {
-        this._showToolbar = newValue;
-    }
-
-    /**
-     * Gets/Sets the toolbar's title.
-     *
-     * @deprecated
-     *
-     * @example
-     * ```html
-     * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>
-     * ```
-     */
-    @DeprecateProperty('`toolbarTitle` is deprecated')
-    @Input()
-    public get toolbarTitle(): string {
-        return this._toolbarTitle;
-    }
-
-    public set toolbarTitle(newValue: string) {
-        this._toolbarTitle = newValue;
-        this.notifyChanges();
-    }
-
     /**
      * Gets/Sets whether exporting to MS Excel is enabled or disabled.
      *
@@ -2973,14 +2790,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.verticalScrollContainer.getScrollNativeSize();
     }
 
-    private _columnPinningTitle: string;
-    private _columnHidingTitle: string;
 
     /* Toolbar related definitions */
-    private _showToolbar = false;
     private _exportExcel = false;
     private _exportCsv = false;
-    private _toolbarTitle: string = null;
     private _exportText: string;
     private _exportExcelText: string;
     private _exportCsvText: string;
@@ -3017,8 +2830,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     private columnListDiffer;
     private rowListDiffer;
-    private _hiddenColumnsText = '';
-    private _pinnedColumnsText = '';
     private _height: string | null = '100%';
     private _width: string | null = '100%';
     private _rowHeight;