igniteui-angular 15.1.30 → 15.1.31

package/fesm2015/igniteui-angular.mjs

@@ -803,7 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  *
  * Usage:
  * ```
- * <button igxNavToggle="ID"> Toggle </button>
+ * <button type="button" igxNavToggle="ID">Toggle</button>
  * ```
  * Where the `ID` matches the ID of compatible `IToggleView` component.
  */
@@ -832,7 +832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  *
  * Usage:
  * ```
- * <button igxNavClose="ID"> Close </button>
+ * <button type="button" igxNavClose="ID">Close</button>
  * ```
  * Where the `ID` matches the ID of compatible `IToggleView` component.
  */
@@ -12391,10 +12391,10 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
     }
 }
 IgxDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxDropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxDropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: { allowItemsFocus: "allowItemsFocus", labelledBy: "labelledBy" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], queries: [{ propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective }, { propertyName: "children", predicate: i0.forwardRef(function () { return IgxDropDownItemComponent; }), descendants: true }], viewQueries: [{ propertyName: "toggleDirective", first: true, predicate: IgxToggleDirective, descendants: true, static: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] });
+IgxDropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: { allowItemsFocus: "allowItemsFocus", labelledBy: "labelledBy" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], queries: [{ propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective }, { propertyName: "children", predicate: i0.forwardRef(function () { return IgxDropDownItemComponent; }), descendants: true }], viewQueries: [{ propertyName: "toggleDirective", first: true, predicate: IgxToggleDirective, descendants: true, static: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" role=\"listbox\" [attr.aria-labelledby]=\"labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxDropDownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'igx-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" role=\"listbox\" [attr.aria-labelledby]=\"labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: undefined, decorators: [{
                         type: Optional
@@ -12985,7 +12985,7 @@ const IgxButtonType = mkenum({
  *
  * @example
  * ```html
- * <button igxButton="outlined">A Button</button>
+ * <button type="button" igxButton="outlined">A Button</button>
  * ```
  */
 class IgxButtonDirective extends DisplayDensityBase {
@@ -12995,7 +12995,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton="flat" [selected]="button.selected"></button>
+     * <button type="button" igxButton="flat" [selected]="button.selected"></button>
      * ```
      */
     set selected(value) {
@@ -13068,7 +13068,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton="icon"></button>
+     * <button type="button" igxButton="icon"></button>
      * ```
      */
     set type(type) {
@@ -13082,7 +13082,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton igxButtonColor="orange"></button>
+     * <button type="button" igxButton igxButtonColor="orange"></button>
      * ```
      */
     set color(value) {
@@ -13094,7 +13094,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      *  ```html
-     * <button igxButton igxButtonBackground="red"></button>
+     * <button type="button" igxButton igxButtonBackground="red"></button>
      * ```
      */
     set background(value) {
@@ -13106,7 +13106,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      *  ```html
-     * <button igxButton="flat" igxLabel="Label"></button>
+     * <button type="button" igxButton="flat" igxLabel="Label"></button>
      * ```
      */
     set label(value) {
@@ -13129,7 +13129,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton= "fab" [disabled]="true"></button>
+     * <button type="button" igxButton="fab" [disabled]="true"></button>
      * ```
      */
     set disabled(val) {
@@ -18368,7 +18368,7 @@ class IgxRippleDirective {
     /**
      * Enables/disables the ripple to be centered.
      * ```html
-     * <button #rippleContainer igxRipple [igxRippleCentered] = "true"></button>
+     * <button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button>
      * ```
      *
      * @memberof IgxRippleDirective
@@ -18396,8 +18396,8 @@ class IgxRippleDirective {
          * ```
          * Can set the ripple to activate on a child element inside the parent where igxRipple is defined.
          * ```html
-         * <div #rippleContainer [igxRippleTarget] = "'#child"'>
-         *  <button id="child">Click</button>
+         * <div #rippleContainer [igxRippleTarget]="'#child"'>
+         *   <button type="button" igxButton id="child">Click</button>
          * </div>
          * ```
          *
@@ -18408,7 +18408,7 @@ class IgxRippleDirective {
          * Sets/gets the ripple duration(in milliseconds).
          * Default value is `600`.
          * ```html
-         * <button #rippleContainer igxRipple [igxRippleDuration] = "800"></button>
+         * <button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>
          * ```
          * ```typescript
          * @ViewChild('rippleContainer', {read: IgxRippleDirective})
@@ -18423,7 +18423,7 @@ class IgxRippleDirective {
          * Sets/gets whether the ripple is disabled.
          * Default value is `false`.
          * ```html
-         * <button #rippleContainer igxRipple [igxRippleDisabled] = "true"></button>
+         * <button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>
          * ```
          * ```typescript
          * @ViewChild('rippleContainer', {read: IgxRippleDirective})
@@ -20406,7 +20406,7 @@ let NEXT_ID$q = 0;
  *
  * Example:
  * ```html
- * <button [igxTooltipTarget]="tooltipRef">Hover me</button>
+ * <button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */
@@ -20556,7 +20556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  *
  * Example:
  * ```html
- * <button [igxTooltipTarget]="tooltipRef">Hover me</button>
+ * <button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */
@@ -20623,7 +20623,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
          *
          * ```html
          * <!--set-->
-         * <button [igxTooltipTarget]="tooltipRef" showDelay="1500">Hover me</button>
+         * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" [showDelay]="1500">Hover me</button>
          * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
          * ```
          */
@@ -20638,7 +20638,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
          *
          * ```html
          * <!--set-->
-         * <button [igxTooltipTarget]="tooltipRef" hideDelay="1500">Hover me</button>
+         * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" [hideDelay]="1500">Hover me</button>
          * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
          * ```
          */
@@ -20655,7 +20655,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
          *
          * ```html
          * <!--set-->
-         * <button [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button>
+         * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button>
          * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
          * ```
          */
@@ -20671,8 +20671,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
          * ```
          *
          * ```html
-         * <button [igxTooltipTarget]="tooltipRef"
-         *         (tooltipShow)='tooltipShowing($event)'>Hover me</button>
+         * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipShow)='tooltipShowing($event)'>Hover me</button>
          * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
          * ```
          */
@@ -20688,8 +20687,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
          * ```
          *
          * ```html
-         * <button [igxTooltipTarget]="tooltipRef"
-         *         (tooltipHide)='tooltipHiding($event)'>Hover me</button>
+         * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipHide)='tooltipHiding($event)'>Hover me</button>
          * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
          * ```
          */
@@ -24170,10 +24168,10 @@ class IgxGridActionButtonComponent {
     }
 }
 IgxGridActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IgxGridActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxGridActionButtonComponent, selector: "igx-grid-action-button", inputs: { asMenuItem: "asMenuItem", iconName: "iconName", classNames: "classNames", iconSet: "iconSet", labelText: "labelText" }, outputs: { actionClick: "actionClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "templateRef", first: true, predicate: ["menuItemTemplate"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
+IgxGridActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxGridActionButtonComponent, selector: "igx-grid-action-button", inputs: { asMenuItem: "asMenuItem", iconName: "iconName", classNames: "classNames", iconSet: "iconSet", labelText: "labelText" }, outputs: { actionClick: "actionClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "templateRef", first: true, predicate: ["menuItemTemplate"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button type=\"button\" [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]=\"containerClass\">\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-action-button', template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>" }]
+            args: [{ selector: 'igx-grid-action-button', template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button type=\"button\" [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]=\"containerClass\">\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>\n" }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -25336,7 +25334,7 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
      * If `commit === true`, passes them from the pending state to the data (or transaction service)
      * @example
      * ```html
-     * <button igxButton (click)="grid.endEdit(true)">Commit Row</button>
+     * <button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>
      * ```
      * @param commit
      */
@@ -27223,10 +27221,10 @@ class IgxActionStripComponent extends DisplayDensityBase {
     }
 }
 IgxActionStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxActionStripComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: DisplayDensityToken, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxActionStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxActionStripComponent, selector: "igx-action-strip", inputs: { context: "context", hidden: "hidden", resourceStrings: "resourceStrings" }, host: { properties: { "style.display": "this.display", "class": "this.hostClasses" } }, queries: [{ propertyName: "_menuItems", predicate: IgxActionStripMenuItemDirective }, { propertyName: "actionButtons", predicate: IgxGridActionsBaseDirective }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
+IgxActionStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxActionStripComponent, selector: "igx-action-strip", inputs: { context: "context", hidden: "hidden", resourceStrings: "resourceStrings" }, host: { properties: { "style.display": "this.display", "class": "this.hostClasses" } }, queries: [{ propertyName: "_menuItems", predicate: IgxActionStripMenuItemDirective }, { propertyName: "actionButtons", predicate: IgxGridActionsBaseDirective }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            type=\"button\"\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxActionStripComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-action-strip', template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n" }]
+            args: [{ selector: 'igx-action-strip', template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            type=\"button\"\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                         type: Optional
@@ -28418,7 +28416,7 @@ class IgxExpansionPanelComponent extends ToggleAnimationPlayer {
      *  <igx-expansion-panel #myPanel>
      *      ...
      *  </igx-expansion-panel>
-     *  <button (click)="myPanel.collapse($event)">Collpase Panel</button>
+     *  <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
      * ```
      */
     collapse(evt) {
@@ -28447,7 +28445,7 @@ class IgxExpansionPanelComponent extends ToggleAnimationPlayer {
      *  <igx-expansion-panel #myPanel>
      *      ...
      *  </igx-expansion-panel>
-     *  <button (click)="myPanel.expand($event)">Expand Panel</button>
+     *  <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
      * ```
      */
     expand(evt) {
@@ -28475,7 +28473,7 @@ class IgxExpansionPanelComponent extends ToggleAnimationPlayer {
      *  <igx-expansion-panel #myPanel>
      *      ...
      *  </igx-expansion-panel>
-     *  <button (click)="myPanel.toggle($event)">Expand Panel</button>
+     *  <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>
      * ```
      */
     toggle(evt) {
@@ -29239,8 +29237,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * <igx-banner #banner>
  *   Our privacy settings have changed.
  *  <igx-banner-actions>
- *      <button igxButton="raised">Read More</button>
- *      <button igxButton="raised">Accept and Continue</button>
+ *      <button type="button" igxButton="raised">Read More</button>
+ *      <button type="button" igxButton="raised">Accept and Continue</button>
  *  </igx-banner-actions>
  * </igx-banner>
  * ```
@@ -29373,7 +29371,7 @@ class IgxBannerComponent {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.open()">Open Banner</button>
+     * <button type="button" (click)="banner.open()">Open Banner</button>
      * ```
      */
     open(event) {
@@ -29401,7 +29399,7 @@ class IgxBannerComponent {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.close()">Close Banner</button>
+     * <button type="button" (click)="banner.close()">Close Banner</button>
      * ```
      */
     close(event) {
@@ -29429,7 +29427,7 @@ class IgxBannerComponent {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.toggle()">Toggle Banner</button>
+     * <button type="button" (click)="banner.toggle()">Toggle Banner</button>
      * ```
      */
     toggle(event) {
@@ -29450,10 +29448,10 @@ class IgxBannerComponent {
     }
 }
 IgxBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxBannerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxBannerComponent, selector: "igx-banner", inputs: { animationSettings: "animationSettings", resourceStrings: "resourceStrings" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing" }, host: { properties: { "class": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "bannerIcon", first: true, predicate: IgxIconComponent, descendants: true }, { propertyName: "_bannerActionTemplate", first: true, predicate: IgxBannerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, static: true }], ngImport: i0, template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                <div *ngIf=\"bannerIcon\" class=\"igx-banner__illustration\">\n                    <ng-content select=\"igx-icon\"></ng-content>\n                </div>\n                <span class=\"igx-banner__text\">\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                    <ng-container *ngIf=\"useDefaultTemplate\">\n                        <button igxButton=\"flat\" igxRipple (click)=\"close()\">\n                            {{ resourceStrings.igx_banner_button_dismiss }}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"!useDefaultTemplate\">\n                        <ng-content select=\"igx-banner-actions\"></ng-content>\n                    </ng-container>\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
+IgxBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxBannerComponent, selector: "igx-banner", inputs: { animationSettings: "animationSettings", resourceStrings: "resourceStrings" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing" }, host: { properties: { "class": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "bannerIcon", first: true, predicate: IgxIconComponent, descendants: true }, { propertyName: "_bannerActionTemplate", first: true, predicate: IgxBannerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, static: true }], ngImport: i0, template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                <div *ngIf=\"bannerIcon\" class=\"igx-banner__illustration\">\n                    <ng-content select=\"igx-icon\"></ng-content>\n                </div>\n                <span class=\"igx-banner__text\">\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                <ng-container *ngIf=\"useDefaultTemplate\">\n                    <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close()\">\n                        {{ resourceStrings.igx_banner_button_dismiss }}\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"!useDefaultTemplate\">\n                    <ng-content select=\"igx-banner-actions\"></ng-content>\n                </ng-container>\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-banner', template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                <div *ngIf=\"bannerIcon\" class=\"igx-banner__illustration\">\n                    <ng-content select=\"igx-icon\"></ng-content>\n                </div>\n                <span class=\"igx-banner__text\">\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                    <ng-container *ngIf=\"useDefaultTemplate\">\n                        <button igxButton=\"flat\" igxRipple (click)=\"close()\">\n                            {{ resourceStrings.igx_banner_button_dismiss }}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"!useDefaultTemplate\">\n                        <ng-content select=\"igx-banner-actions\"></ng-content>\n                    </ng-container>\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n" }]
+            args: [{ selector: 'igx-banner', template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                <div *ngIf=\"bannerIcon\" class=\"igx-banner__illustration\">\n                    <ng-content select=\"igx-icon\"></ng-content>\n                </div>\n                <span class=\"igx-banner__text\">\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                <ng-container *ngIf=\"useDefaultTemplate\">\n                    <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close()\">\n                        {{ resourceStrings.igx_banner_button_dismiss }}\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"!useDefaultTemplate\">\n                    <ng-content select=\"igx-banner-actions\"></ng-content>\n                </ng-container>\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { bannerIcon: [{
                 type: ContentChild,
                 args: [IgxIconComponent]
@@ -34229,8 +34227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  *     <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
  *   </igx-card-header>
  *   <igx-card-actions>
- *       <button igxButton igxRipple>Share</button>
- *       <button igxButton igxRipple>Play Album</button>
+ *       <button type="button" igxButton igxRipple>Share</button>
+ *       <button type="button" igxButton igxRipple>Play Album</button>
  *   </igx-card-actions>
  * </igx-card>
  * ```
@@ -35118,9 +35116,9 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
          *  <igx-carousel #carousel>
          *      ...
          *      <ng-template igxCarouselNextButton let-disabled>
-         *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-         *                <igx-icon>add</igx-icon>
-         *           </button>
+         *          <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
+         *              <igx-icon>add</igx-icon>
+         *          </button>
          *      </ng-template>
          *  </igx-carousel>
          * ```
@@ -35139,9 +35137,9 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
          *  <igx-carousel #carousel>
          *      ...
          *      <ng-template igxCarouselPrevButton let-disabled>
-         *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-         *                <igx-icon>remove</igx-icon>
-         *           </button>
+         *          <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
+         *              <igx-icon>remove</igx-icon>
+         *          </button>
          *      </ng-template>
          *  </igx-carousel>
          * ```
@@ -37204,7 +37202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * @example
  * <igx-combo #combo>
  *      <ng-template igxComboAddItem>
- *          <button class="combo__add-button">
+ *          <button type="button" class="combo__add-button">
  *              Click to add item
  *          </button>
  *      </ng-template>
@@ -37844,7 +37842,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
          *  <igx-combo #combo>
          *      ...
          *      <ng-template igxComboAddItem>
-         *          <button class="combo__add-button">
+         *          <button type="button" igxButton="raised" class="combo__add-button">
          *              Click to add item
          *          </button>
          *      </ng-template>
@@ -38013,7 +38011,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
      * A method that opens/closes the combo.
      *
      * ```html
-     * <button (click)="combo.toggle()">Toggle Combo</button>
+     * <button type="button" (click)="combo.toggle()">Toggle Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -38032,7 +38030,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
      * A method that opens the combo.
      *
      * ```html
-     * <button (click)="combo.open()">Open Combo</button>
+     * <button type="button" (click)="combo.open()">Open Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -38049,7 +38047,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
      * A method that closes the combo.
      *
      * ```html
-     * <button (click)="combo.close()">Close Combo</button>
+     * <button type="button" (click)="combo.close()">Close Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -38629,10 +38627,10 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
     }
 }
 IgxComboDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxComboDropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IGX_COMBO_COMPONENT }, { token: IgxComboAPIService }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxComboDropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: { singleMode: "singleMode" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] });
+IgxComboDropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: { singleMode: "singleMode" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" role=\"listbox\" [attr.aria-labelledby]=\"labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n    igxToggle\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n    (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" role=\"listbox\" [attr.aria-labelledby]=\"labelledBy\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -39087,14 +39085,14 @@ IgxComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         IgxComboAPIService,
         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
         { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n            [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\">\n        <igx-combo-item [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDropDownItemNavigationDirective; }), selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxForOfDirective; }), selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return IgxComboAddItemComponent; }), selector: "igx-combo-add-item" }, { kind: "component", type: i0.forwardRef(function () { return IgxComboDropDownComponent; }), selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: i0.forwardRef(function () { return IgxComboItemComponent; }), selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "pipe", type: i0.forwardRef(function () { return IgxComboFilteringPipe; }), name: "comboFiltering" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxComboGroupingPipe; }), name: "comboGrouping" }] });
+    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDropDownItemNavigationDirective; }), selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxForOfDirective; }), selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return IgxComboAddItemComponent; }), selector: "igx-combo-add-item" }, { kind: "component", type: i0.forwardRef(function () { return IgxComboDropDownComponent; }), selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: i0.forwardRef(function () { return IgxComboItemComponent; }), selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "pipe", type: i0.forwardRef(function () { return IgxComboFilteringPipe; }), name: "comboFiltering" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxComboGroupingPipe; }), name: "comboGrouping" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo', providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n            [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\">\n        <igx-combo-item [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: undefined, decorators: [{
                         type: Optional
@@ -39678,14 +39676,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         IgxComboAPIService,
         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] });
+    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-simple-combo', providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            {{ clearIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ toggleIcon }}\n        </igx-icon>\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
                         type: Optional
@@ -39784,10 +39782,10 @@ class IgxCalendarContainerComponent {
     }
 }
 IgxCalendarContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxCalendarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IgxCalendarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxCalendarContainerComponent, selector: "igx-calendar-container", outputs: { calendarClose: "calendarClose", todaySelection: "todaySelection" }, host: { listeners: { "keydown.alt.arrowup": "onEscape($event)" }, properties: { "class.igx-date-picker": "this.styleClass", "class.igx-date-picker--dropdown": "this.dropdownCSS", "class.igx-date-picker--vertical": "this.verticalCSS" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: IgxCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<ng-template #defaultPickerActions>\n    <div *ngIf=\"this.closeButtonLabel || this.todayButtonLabel\" class=\"igx-date-picker__buttons\">\n        <button #closeButton *ngIf=\"this.closeButtonLabel\" igxButton=\"flat\" igxRipple\n            (click)=\"this.calendarClose.emit({ owner: this })\">\n            {{ this.closeButtonLabel }}\n        </button>\n        <button #todayButton *ngIf=\"this.todayButtonLabel\" igxButton=\"flat\" igxRipple\n            (click)=\"this.todaySelection.emit({ owner: this })\">\n            {{ this.todayButtonLabel }}\n        </button>\n    </div>\n</ng-template>\n\n<igx-calendar></igx-calendar>\n<ng-container *ngTemplateOutlet=\"this.pickerActions?.template || defaultPickerActions; context: { $implicit: this.calendar }\">\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxCalendarComponent, selector: "igx-calendar", inputs: ["id", "hasHeader", "vertical", "monthsViewNumber", "showWeekNumbers", "animationAction"] }] });
+IgxCalendarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxCalendarContainerComponent, selector: "igx-calendar-container", outputs: { calendarClose: "calendarClose", todaySelection: "todaySelection" }, host: { listeners: { "keydown.alt.arrowup": "onEscape($event)" }, properties: { "class.igx-date-picker": "this.styleClass", "class.igx-date-picker--dropdown": "this.dropdownCSS", "class.igx-date-picker--vertical": "this.verticalCSS" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: IgxCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<ng-template #defaultPickerActions>\n    <div *ngIf=\"closeButtonLabel || todayButtonLabel\" class=\"igx-date-picker__buttons\">\n        <button #closeButton *ngIf=\"closeButtonLabel\" type=\"button\" igxButton=\"flat\" igxRipple\n            (click)=\"calendarClose.emit({ owner: this })\">\n            {{ closeButtonLabel }}\n        </button>\n        <button #todayButton *ngIf=\"todayButtonLabel\" type=\"button\" igxButton=\"flat\" igxRipple\n            (click)=\"todaySelection.emit({ owner: this })\">\n            {{ todayButtonLabel }}\n        </button>\n    </div>\n</ng-template>\n\n<igx-calendar></igx-calendar>\n<ng-container *ngTemplateOutlet=\"pickerActions?.template || defaultPickerActions; context: { $implicit: calendar }\">\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxCalendarComponent, selector: "igx-calendar", inputs: ["id", "hasHeader", "vertical", "monthsViewNumber", "showWeekNumbers", "animationAction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxCalendarContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-calendar-container', template: "<ng-template #defaultPickerActions>\n    <div *ngIf=\"this.closeButtonLabel || this.todayButtonLabel\" class=\"igx-date-picker__buttons\">\n        <button #closeButton *ngIf=\"this.closeButtonLabel\" igxButton=\"flat\" igxRipple\n            (click)=\"this.calendarClose.emit({ owner: this })\">\n            {{ this.closeButtonLabel }}\n        </button>\n        <button #todayButton *ngIf=\"this.todayButtonLabel\" igxButton=\"flat\" igxRipple\n            (click)=\"this.todaySelection.emit({ owner: this })\">\n            {{ this.todayButtonLabel }}\n        </button>\n    </div>\n</ng-template>\n\n<igx-calendar></igx-calendar>\n<ng-container *ngTemplateOutlet=\"this.pickerActions?.template || defaultPickerActions; context: { $implicit: this.calendar }\">\n</ng-container>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'igx-calendar-container', template: "<ng-template #defaultPickerActions>\n    <div *ngIf=\"closeButtonLabel || todayButtonLabel\" class=\"igx-date-picker__buttons\">\n        <button #closeButton *ngIf=\"closeButtonLabel\" type=\"button\" igxButton=\"flat\" igxRipple\n            (click)=\"calendarClose.emit({ owner: this })\">\n            {{ closeButtonLabel }}\n        </button>\n        <button #todayButton *ngIf=\"todayButtonLabel\" type=\"button\" igxButton=\"flat\" igxRipple\n            (click)=\"todaySelection.emit({ owner: this })\">\n            {{ todayButtonLabel }}\n        </button>\n    </div>\n</ng-template>\n\n<igx-calendar></igx-calendar>\n<ng-container *ngTemplateOutlet=\"pickerActions?.template || defaultPickerActions; context: { $implicit: calendar }\">\n</ng-container>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: [IgxCalendarComponent, { static: true }]
@@ -40456,7 +40454,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.open()">Open Dialog</button>
+     * <button type="button" igxButton (click)="picker.open()">Open Dialog</button>
      * ```
      */
     open(settings) {
@@ -40483,7 +40481,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.toggle()">Toggle Dialog</button>
+     * <button type="button" igxButton (click)="picker.toggle()">Toggle Dialog</button>
      * ```
      */
     toggle(settings) {
@@ -40501,7 +40499,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.close()">Close Dialog</button>
+     * <button type="button" igxButton (click)="picker.close()">Close Dialog</button>
      * ```
      */
     close() {
@@ -40530,7 +40528,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.selectToday()">Select Today</button>
+     * <button type="button" igxButton (click)="picker.selectToday()">Select Today</button>
      * ```
      * */
     selectToday() {
@@ -40851,13 +40849,13 @@ IgxDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 IgxDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: { hideOutsideDays: "hideOutsideDays", displayMonthsCount: "displayMonthsCount", showWeekNumbers: "showWeekNumbers", formatter: "formatter", headerOrientation: "headerOrientation", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: "spinLoop", spinDelta: "spinDelta", outlet: "outlet", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: "readOnly" }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
         { provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
-    ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"this.displayDensity\" [type]=\"this.type\" [suppressInputAutofocus]=\"true\">\n    <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n        <igx-icon [title]=\"this.value\n            ? pickerResourceStrings.igx_date_picker_change_date\n            : pickerResourceStrings.igx_date_picker_choose_date\">today</igx-icon>\n    </igx-prefix>\n\n    <input class=\"igx-date-picker__input-date\" [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput\n        [igxDateTimeEditor]=\"this.inputFormat\" [displayFormat]=\"this.displayFormat\"\n        [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\" [spinDelta]=\"this.spinDelta\" [spinLoop]=\"this.spinLoop\" \n        [disabled]=\"this.disabled\" [placeholder]=\"this.placeholder\" [readonly]=\"!this.isDropdown || this.readOnly\"\n        [igxTextSelection]=\"this.isDropdown && !this.readOnly\" [locale]=\"this.locale\" [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-labelledby]=\"this.label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n    <igx-suffix *ngIf=\"!this.clearComponents.length && this.value\" (click)=\"this.clear()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }] });
+    ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"true\">\n    <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n        <igx-icon [title]=\"value\n            ? pickerResourceStrings.igx_date_picker_change_date\n            : pickerResourceStrings.igx_date_picker_choose_date\">today</igx-icon>\n    </igx-prefix>\n\n    <input class=\"igx-date-picker__input-date\" [displayValuePipe]=\"formatter ? displayValue : null\" igxInput\n        [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n        [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n        [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n        [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n    <igx-suffix *ngIf=\"!clearComponents.length && value\" (click)=\"clear()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
                         { provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
-                    ], selector: 'igx-date-picker', template: "<igx-input-group [displayDensity]=\"this.displayDensity\" [type]=\"this.type\" [suppressInputAutofocus]=\"true\">\n    <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n        <igx-icon [title]=\"this.value\n            ? pickerResourceStrings.igx_date_picker_change_date\n            : pickerResourceStrings.igx_date_picker_choose_date\">today</igx-icon>\n    </igx-prefix>\n\n    <input class=\"igx-date-picker__input-date\" [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput\n        [igxDateTimeEditor]=\"this.inputFormat\" [displayFormat]=\"this.displayFormat\"\n        [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\" [spinDelta]=\"this.spinDelta\" [spinLoop]=\"this.spinLoop\" \n        [disabled]=\"this.disabled\" [placeholder]=\"this.placeholder\" [readonly]=\"!this.isDropdown || this.readOnly\"\n        [igxTextSelection]=\"this.isDropdown && !this.readOnly\" [locale]=\"this.locale\" [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-labelledby]=\"this.label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n    <igx-suffix *ngIf=\"!this.clearComponents.length && this.value\" (click)=\"this.clear()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n", styles: [":host{display:block}\n"] }]
+                    ], selector: 'igx-date-picker', template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"true\">\n    <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n        <igx-icon [title]=\"value\n            ? pickerResourceStrings.igx_date_picker_change_date\n            : pickerResourceStrings.igx_date_picker_choose_date\">today</igx-icon>\n    </igx-prefix>\n\n    <input class=\"igx-date-picker__input-date\" [displayValuePipe]=\"formatter ? displayValue : null\" igxInput\n        [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n        [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n        [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n        [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n    <igx-suffix *ngIf=\"!clearComponents.length && value\" (click)=\"clear()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -41058,7 +41056,7 @@ let DIALOG_ID = 0;
  *
  * Example:
  * ```html
- * <button (click)="form.open()">Show Dialog</button>
+ * <button type="button" igxButton (click)="form.open()">Show Dialog</button>
  * <igx-dialog #form title="Sign In" rightButtonLabel="OK">
  *   <div>
  *     <igx-input-group>
@@ -41441,7 +41439,7 @@ class IgxDialogComponent {
      *
      * @memberOf {@link IgxDialogComponent}
      * ```html
-     * <button (click)="dialog.open() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
+     * <button type="button" (click)="dialog.open() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
      * <igx-dialog #dialog></igx-dialog>
      * ```
      */
@@ -41461,7 +41459,7 @@ class IgxDialogComponent {
      *
      *  @memberOf {@link IgxDialogComponent}
      * ```html
-     * <button (click)="dialog.close() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
+     * <button type="button" (click)="dialog.close() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
      * <igx-dialog #dialog></igx-dialog>
      * ```
      */
@@ -41474,7 +41472,7 @@ class IgxDialogComponent {
      *
      * @memberOf {@link IgxDialogComponent}
      * ```html
-     * <button (click)="dialog.toggle() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
+     * <button type="button" (click)="dialog.toggle() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
      * <igx-dialog #dialog></igx-dialog>
      * ```
      */
@@ -42709,10 +42707,10 @@ class IgxExcelStyleDefaultExpressionComponent {
     }
 }
 IgxExcelStyleDefaultExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleDefaultExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid", displayDensity: "displayDensity" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] });
+IgxExcelStyleDefaultExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid", displayDensity: "displayDensity" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-default-expression', template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-default-expression', template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { column: [{
                 type: Input
             }], expressionUI: [{
@@ -44004,7 +44002,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
      * @param settings OverlaySettings - the overlay settings to use for positioning the drop down or dialog container according to
      * ```html
      * <igx-time-picker #picker [value]="date"></igx-time-picker>
-     * <button (click)="picker.open()">Open Dialog</button>
+     * <button type="button" igxButton (click)="picker.open()">Open Dialog</button>
      * ```
      */
     open(settings) {
@@ -44121,7 +44119,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
         var _a, _b;
         let date = new Date(this._selectedDate);
         switch (dateType) {
-            case 'hourList':
+            case 'hourList': {
                 let ampm;
                 const selectedHour = parseInt(item, 10);
                 let hours = selectedHour;
@@ -44140,6 +44138,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
                     this.setSelectedValue(date);
                 }
                 break;
+            }
             case 'minuteList': {
                 const minutes = parseInt(item, 10);
                 date.setMinutes(minutes);
@@ -44483,7 +44482,7 @@ IgxTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: IgxTimePickerComponent,
             multi: true
         }
-    ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "timePickerActionsDirective", first: true, predicate: IgxTimePickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "hourList", first: true, predicate: ["hourList"], descendants: true }, { propertyName: "minuteList", first: true, predicate: ["minuteList"], descendants: true }, { propertyName: "secondsList", first: true, predicate: ["secondsList"], descendants: true }, { propertyName: "ampmList", first: true, predicate: ["ampmList"], descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective }, { propertyName: "_inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }, { propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"this.isDropdown\">\n    <input [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"this.inputFormat\"\n        type=\"text\" [readonly]=\"!this.isDropdown || this.readOnly\" [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\"\n        [locale]=\"this.locale\" [spinDelta]=\"this.itemsDelta\" [spinLoop]=\"this.spinLoop\" [placeholder]=\"this.placeholder\"\n        [disabled]=\"this.disabled\" [displayFormat]=\"this.displayFormat\"\n        [igxTextSelection]=\"this.isDropdown && !this.readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!this.toggleDirective.collapsed\" [attr.aria-labelledby]=\"this.label?.id\"\n        (click)=\"!this.isDropdown && this.toggle()\"/>\n\n    <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n        <igx-icon [title]=\"this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n    </igx-prefix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"this.showClearButton\" (click)=\"this.clear(); $event.stopPropagation()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n    <div *ngIf=\"this.cancelButtonLabel || this.okButtonLabel\" class=\"igx-time-picker__buttons\">\n        <button *ngIf=\"this.cancelButtonLabel\" igxButton=\"flat\" (click)=\"this.cancelButtonClick()\">\n            {{this.cancelButtonLabel}}\n        </button>\n        <button *ngIf=\"this.okButtonLabel\" igxButton=\"flat\" (click)=\"this.okButtonClick()\">\n            {{this.okButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}\">\n    <div *ngIf=\"!this.isDropdown\" class=\"igx-time-picker__header\">\n        <h2 class=\"igx-time-picker__header-hour\">\n            <span>{{ this.selectedDate | timeFormatPipe }}</span>\n        </h2>\n    </div>\n    <div class=\"igx-time-picker__main\">\n        <div class=\"igx-time-picker__body\">\n            <div *ngIf=\"this.showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n                <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let hour of hourItems | timeItemPipe:'hour':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ hour }}</span>\n            </div>\n            <div *ngIf=\"this.showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n                <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ minute }}</span>\n            </div>\n            <div *ngIf=\"this.showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n                <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ seconds }}</span>\n            </div>\n            <div *ngIf=\"this.showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n                <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ ampm }}</span>\n            </div>\n        </div>\n        <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDateTimeEditorDirective; }), selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxPrefixDirective; }), selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxToggleDirective; }), selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxTextSelectionDirective; }), selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxItemListDirective; }), selector: "[igxItemList]", inputs: ["igxItemList"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxTimeItemDirective; }), selector: "[igxTimeItem]", inputs: ["igxTimeItem"], exportAs: ["timeItem"] }, { kind: "pipe", type: i0.forwardRef(function () { return TimeFormatPipe; }), name: "timeFormatPipe" }, { kind: "pipe", type: i0.forwardRef(function () { return TimeItemPipe; }), name: "timeItemPipe" }] });
+    ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "timePickerActionsDirective", first: true, predicate: IgxTimePickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "hourList", first: true, predicate: ["hourList"], descendants: true }, { propertyName: "minuteList", first: true, predicate: ["minuteList"], descendants: true }, { propertyName: "secondsList", first: true, predicate: ["secondsList"], descendants: true }, { propertyName: "ampmList", first: true, predicate: ["ampmList"], descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective }, { propertyName: "_inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }, { propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"isDropdown\">\n    <input [displayValuePipe]=\"formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"inputFormat\"\n        type=\"text\" [readonly]=\"!isDropdown || readOnly\" [minValue]=\"minValue\" [maxValue]=\"maxValue\"\n        [locale]=\"locale\" [spinDelta]=\"itemsDelta\" [spinLoop]=\"spinLoop\" [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" [displayFormat]=\"displayFormat\"\n        [igxTextSelection]=\"isDropdown && !readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!toggleDirective.collapsed\" [attr.aria-labelledby]=\"label?.id\"\n        (click)=\"!isDropdown && toggle()\"/>\n\n    <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n        <igx-icon [title]=\"value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n    </igx-prefix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"showClearButton\" (click)=\"clear(); $event.stopPropagation()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n    <div *ngIf=\"cancelButtonLabel || okButtonLabel\" class=\"igx-time-picker__buttons\">\n        <button *ngIf=\"cancelButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"cancelButtonClick()\">\n            {{cancelButtonLabel}}\n        </button>\n        <button *ngIf=\"okButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"okButtonClick()\">\n            {{okButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}\">\n    <div *ngIf=\"!isDropdown\" class=\"igx-time-picker__header\">\n        <h2 class=\"igx-time-picker__header-hour\">\n            <span>{{ selectedDate | timeFormatPipe }}</span>\n        </h2>\n    </div>\n    <div class=\"igx-time-picker__main\">\n        <div class=\"igx-time-picker__body\">\n            <div *ngIf=\"showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n                <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let hour of hourItems | timeItemPipe:'hour':selectedDate:minDropdownValue:maxDropdownValue\">{{ hour }}</span>\n            </div>\n            <div *ngIf=\"showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n                <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':selectedDate:minDropdownValue:maxDropdownValue\">{{ minute }}</span>\n            </div>\n            <div *ngIf=\"showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n                <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':selectedDate:minDropdownValue:maxDropdownValue\">{{ seconds }}</span>\n            </div>\n            <div *ngIf=\"showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n                <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':selectedDate:minDropdownValue:maxDropdownValue\">{{ ampm }}</span>\n            </div>\n        </div>\n        <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDateTimeEditorDirective; }), selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxPrefixDirective; }), selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxToggleDirective; }), selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxTextSelectionDirective; }), selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxItemListDirective; }), selector: "[igxItemList]", inputs: ["igxItemList"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxTimeItemDirective; }), selector: "[igxTimeItem]", inputs: ["igxTimeItem"], exportAs: ["timeItem"] }, { kind: "pipe", type: i0.forwardRef(function () { return TimeFormatPipe; }), name: "timeFormatPipe" }, { kind: "pipe", type: i0.forwardRef(function () { return TimeItemPipe; }), name: "timeItemPipe" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxTimePickerComponent, decorators: [{
             type: Component,
             args: [{ providers: [
@@ -44501,7 +44500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: IgxTimePickerComponent,
                             multi: true
                         }
-                    ], selector: 'igx-time-picker', template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"this.isDropdown\">\n    <input [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"this.inputFormat\"\n        type=\"text\" [readonly]=\"!this.isDropdown || this.readOnly\" [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\"\n        [locale]=\"this.locale\" [spinDelta]=\"this.itemsDelta\" [spinLoop]=\"this.spinLoop\" [placeholder]=\"this.placeholder\"\n        [disabled]=\"this.disabled\" [displayFormat]=\"this.displayFormat\"\n        [igxTextSelection]=\"this.isDropdown && !this.readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!this.toggleDirective.collapsed\" [attr.aria-labelledby]=\"this.label?.id\"\n        (click)=\"!this.isDropdown && this.toggle()\"/>\n\n    <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n        <igx-icon [title]=\"this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n    </igx-prefix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"this.showClearButton\" (click)=\"this.clear(); $event.stopPropagation()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n    <div *ngIf=\"this.cancelButtonLabel || this.okButtonLabel\" class=\"igx-time-picker__buttons\">\n        <button *ngIf=\"this.cancelButtonLabel\" igxButton=\"flat\" (click)=\"this.cancelButtonClick()\">\n            {{this.cancelButtonLabel}}\n        </button>\n        <button *ngIf=\"this.okButtonLabel\" igxButton=\"flat\" (click)=\"this.okButtonClick()\">\n            {{this.okButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}\">\n    <div *ngIf=\"!this.isDropdown\" class=\"igx-time-picker__header\">\n        <h2 class=\"igx-time-picker__header-hour\">\n            <span>{{ this.selectedDate | timeFormatPipe }}</span>\n        </h2>\n    </div>\n    <div class=\"igx-time-picker__main\">\n        <div class=\"igx-time-picker__body\">\n            <div *ngIf=\"this.showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n                <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let hour of hourItems | timeItemPipe:'hour':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ hour }}</span>\n            </div>\n            <div *ngIf=\"this.showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n                <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ minute }}</span>\n            </div>\n            <div *ngIf=\"this.showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n                <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ seconds }}</span>\n            </div>\n            <div *ngIf=\"this.showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n                <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ ampm }}</span>\n            </div>\n        </div>\n        <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], selector: 'igx-time-picker', template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"isDropdown\">\n    <input [displayValuePipe]=\"formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"inputFormat\"\n        type=\"text\" [readonly]=\"!isDropdown || readOnly\" [minValue]=\"minValue\" [maxValue]=\"maxValue\"\n        [locale]=\"locale\" [spinDelta]=\"itemsDelta\" [spinLoop]=\"spinLoop\" [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" [displayFormat]=\"displayFormat\"\n        [igxTextSelection]=\"isDropdown && !readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!toggleDirective.collapsed\" [attr.aria-labelledby]=\"label?.id\"\n        (click)=\"!isDropdown && toggle()\"/>\n\n    <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n        <igx-icon [title]=\"value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n    </igx-prefix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"showClearButton\" (click)=\"clear(); $event.stopPropagation()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n    <div *ngIf=\"cancelButtonLabel || okButtonLabel\" class=\"igx-time-picker__buttons\">\n        <button *ngIf=\"cancelButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"cancelButtonClick()\">\n            {{cancelButtonLabel}}\n        </button>\n        <button *ngIf=\"okButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"okButtonClick()\">\n            {{okButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}\">\n    <div *ngIf=\"!isDropdown\" class=\"igx-time-picker__header\">\n        <h2 class=\"igx-time-picker__header-hour\">\n            <span>{{ selectedDate | timeFormatPipe }}</span>\n        </h2>\n    </div>\n    <div class=\"igx-time-picker__main\">\n        <div class=\"igx-time-picker__body\">\n            <div *ngIf=\"showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n                <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let hour of hourItems | timeItemPipe:'hour':selectedDate:minDropdownValue:maxDropdownValue\">{{ hour }}</span>\n            </div>\n            <div *ngIf=\"showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n                <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':selectedDate:minDropdownValue:maxDropdownValue\">{{ minute }}</span>\n            </div>\n            <div *ngIf=\"showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n                <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':selectedDate:minDropdownValue:maxDropdownValue\">{{ seconds }}</span>\n            </div>\n            <div *ngIf=\"showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n                <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':selectedDate:minDropdownValue:maxDropdownValue\">{{ ampm }}</span>\n            </div>\n        </div>\n        <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -44676,10 +44675,10 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
     }
 }
 IgxExcelStyleDateExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleDateExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }] });
+IgxExcelStyleDateExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-date-expression', template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-date-expression', template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { read: IgxInputDirective, static: false }]
@@ -44911,10 +44910,10 @@ class IgxExcelStyleCustomDialogComponent {
     }
 }
 IgxExcelStyleCustomDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleCustomDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId", displayDensity: "displayDensity" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid", "displayDensity"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }] });
+IgxExcelStyleCustomDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId", displayDensity: "displayDensity" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid", "displayDensity"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-custom-dialog', template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
+            args: [{ selector: 'igx-excel-style-custom-dialog', template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
         }], ctorParameters: function () { return [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { expressionsList: [{
                 type: Input
             }], column: [{
@@ -45105,10 +45104,10 @@ class IgxExcelStyleHeaderComponent {
     }
 }
 IgxExcelStyleHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [{ token: BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: { showPinning: "showPinning", showSelecting: "showSelecting", showHiding: "showHiding" }, ngImport: i0, template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
+IgxExcelStyleHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: { showPinning: "showPinning", showSelecting: "showSelecting", showHiding: "showHiding" }, ngImport: i0, template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-header', template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n" }]
+            args: [{ selector: 'igx-excel-style-header', template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n" }]
         }], ctorParameters: function () { return [{ type: BaseFilteringComponent }]; }, propDecorators: { showPinning: [{
                 type: Input
             }], showSelecting: [{
@@ -45219,10 +45218,10 @@ class IgxExcelStyleMovingComponent {
     }
 }
 IgxExcelStyleMovingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [{ token: BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleMovingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup [multiSelection]=\"false\">\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
+IgxExcelStyleMovingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-moving', template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup [multiSelection]=\"false\">\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n" }]
+            args: [{ selector: 'igx-excel-style-moving', template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: BaseFilteringComponent }]; }, propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__move']
@@ -48020,7 +48019,7 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
      * <igx-tree>
      *      <igx-tree-node #node>My Node</igx-tree-node>
      * </igx-tree>
-     * <button igxButton (click)="node.toggle()">Toggle Node</button>
+     * <button type="button" igxButton (click)="node.toggle()">Toggle Node</button>
      * ```
      *
      * ```typescript
@@ -48059,7 +48058,7 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
      * <igx-tree>
      *      <igx-tree-node #node>My Node</igx-tree-node>
      * </igx-tree>
-     * <button igxButton (click)="node.expand()">Expand Node</button>
+     * <button type="button" igxButton (click)="node.expand()">Expand Node</button>
      * ```
      *
      * ```typescript
@@ -48090,7 +48089,7 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
      * <igx-tree>
      *      <igx-tree-node #node>My Node</igx-tree-node>
      * </igx-tree>
-     * <button igxButton (click)="node.collapse()">Collapse Node</button>
+     * <button type="button" igxButton (click)="node.collapse()">Collapse Node</button>
      * ```
      *
      * ```typescript
@@ -49271,10 +49270,10 @@ class IgxExcelStyleSearchComponent {
 }
 IgxExcelStyleSearchComponent.filterOptimizationThreshold = 2;
 IgxExcelStyleSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }] });
+IgxExcelStyleSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\"\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-search', template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
+            args: [{ selector: 'igx-excel-style-search', template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\"\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: BaseFilteringComponent }, { type: PlatformUtil }]; }, propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__menu-main']
@@ -49365,10 +49364,10 @@ class IgxExcelStyleSortingComponent {
     }
 }
 IgxExcelStyleSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [{ token: BaseFilteringComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting", host: { properties: { "class.igx-excel-filter__sort": "this.defaultClass" } }, viewQueries: [{ propertyName: "sortButtonGroup", first: true, predicate: ["sortButtonGroup"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup [multiSelection]=\"false\">\n    <button igxButton\n        [displayDensity]=\"esf.grid.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button igxButton\n        [displayDensity]=\"esf.grid.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
+IgxExcelStyleSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting", host: { properties: { "class.igx-excel-filter__sort": "this.defaultClass" } }, viewQueries: [{ propertyName: "sortButtonGroup", first: true, predicate: ["sortButtonGroup"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup>\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-sorting', template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup [multiSelection]=\"false\">\n    <button igxButton\n        [displayDensity]=\"esf.grid.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button igxButton\n        [displayDensity]=\"esf.grid.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n" }]
+            args: [{ selector: 'igx-excel-style-sorting', template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup>\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: BaseFilteringComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__sort']
@@ -57339,10 +57338,10 @@ class IgxQueryBuilderComponent extends DisplayDensityBase {
     }
 }
 IgxQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxQueryBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxIconService }, { token: PlatformUtil }, { token: LOCALE_ID }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [title]=\"this.resourceStrings.igx_query_builder_title\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addAndGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addOrGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button\n            #addConditionButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [displayDensity]=\"\n                    displayDensity === 'compact' ? 'cosy' : displayDensity\n                \"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    edit\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    add\n                </igx-icon>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"imx-icons\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [inputFormat]=\"selectedField.defaultTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #input\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon>check</igx-icon>\n                </button>\n                <button\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button\n                igxButton=\"icon\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [displayDensity]=\"this.displayDensity\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n        [ngClass]=\"{\n            'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n            'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n        }\"\n    >\n        <button\n            igxButton=\"icon\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <igx-icon>close</igx-icon>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [displayDensity]=\"this.displayDensity\"\n                [multiSelection]=\"false\"\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon>delete</igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxButtonGroupComponent; }), selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxDatePickerComponent; }), selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: i0.forwardRef(function () { return IgxPickerToggleComponent; }), selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(function () { return IgxPickerClearComponent; }), selector: "igx-picker-clear" }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxPrefixDirective; }), selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDateTimeEditorDirective; }), selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: i0.forwardRef(function () { return IgxTimePickerComponent; }), selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: i0.forwardRef(function () { return IgxChipComponent; }), selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: i0.forwardRef(function () { return IgxSelectComponent; }), selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: i0.forwardRef(function () { return IgxSelectItemComponent; }), selector: "igx-select-item", inputs: ["text"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxToggleDirective; }), selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxOverlayOutletDirective; }), selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: i0.forwardRef(function () { return IgxQueryBuilderHeaderComponent; }), selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1$1.DatePipe; }), name: "date" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxFieldFormatterPipe; }), name: "fieldFormatter" }] });
+IgxQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [title]=\"this.resourceStrings.igx_query_builder_title\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addAndGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addOrGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [displayDensity]=\"\n                    displayDensity === 'compact' ? 'cosy' : displayDensity\n                \"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    edit\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    add\n                </igx-icon>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"imx-icons\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [inputFormat]=\"selectedField.defaultTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #input\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon>check</igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxButton=\"icon\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [displayDensity]=\"this.displayDensity\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n        [ngClass]=\"{\n            'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n            'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n        }\"\n    >\n        <button type=\"button\"\n            igxButton=\"icon\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <igx-icon>close</igx-icon>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [displayDensity]=\"this.displayDensity\"\n                [multiSelection]=\"false\"\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon>delete</igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxButtonGroupComponent; }), selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxDatePickerComponent; }), selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: i0.forwardRef(function () { return IgxPickerToggleComponent; }), selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(function () { return IgxPickerClearComponent; }), selector: "igx-picker-clear" }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxPrefixDirective; }), selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxDateTimeEditorDirective; }), selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: i0.forwardRef(function () { return IgxTimePickerComponent; }), selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: i0.forwardRef(function () { return IgxChipComponent; }), selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: i0.forwardRef(function () { return IgxSelectComponent; }), selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: i0.forwardRef(function () { return IgxSelectItemComponent; }), selector: "igx-select-item", inputs: ["text"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxToggleDirective; }), selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxOverlayOutletDirective; }), selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: i0.forwardRef(function () { return IgxQueryBuilderHeaderComponent; }), selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1$1.DatePipe; }), name: "date" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxFieldFormatterPipe; }), name: "fieldFormatter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-query-builder', template: "<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [title]=\"this.resourceStrings.igx_query_builder_title\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addAndGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addOrGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button\n            #addConditionButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [displayDensity]=\"\n                    displayDensity === 'compact' ? 'cosy' : displayDensity\n                \"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    edit\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    add\n                </igx-icon>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"imx-icons\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [inputFormat]=\"selectedField.defaultTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #input\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon>check</igx-icon>\n                </button>\n                <button\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button\n                igxButton=\"icon\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [displayDensity]=\"this.displayDensity\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n        [ngClass]=\"{\n            'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n            'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n        }\"\n    >\n        <button\n            igxButton=\"icon\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <igx-icon>close</igx-icon>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [displayDensity]=\"this.displayDensity\"\n                [multiSelection]=\"false\"\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon>delete</igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
+            args: [{ selector: 'igx-query-builder', template: "<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [title]=\"this.resourceStrings.igx_query_builder_title\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addAndGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            (click)=\"addOrGroup()\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [displayDensity]=\"this.displayDensity\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <igx-icon>add</igx-icon>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [displayDensity]=\"\n                    displayDensity === 'compact' ? 'cosy' : displayDensity\n                \"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    edit\n                </igx-icon>\n                <igx-icon\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    add\n                </igx-icon>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"imx-icons\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"imx-icons\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [displayDensity]=\"'compact'\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [inputFormat]=\"selectedField.defaultTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\"\n            >\n                <input\n                    #input\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon>check</igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxButton=\"icon\"\n                    [displayDensity]=\"this.displayDensity\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxButton=\"icon\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [displayDensity]=\"this.displayDensity\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n        [ngClass]=\"{\n            'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n            'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n        }\"\n    >\n        <button type=\"button\"\n            igxButton=\"icon\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <igx-icon>close</igx-icon>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [displayDensity]=\"this.displayDensity\"\n                [multiSelection]=\"false\"\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon>delete</igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [displayDensity]=\"this.displayDensity\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
                         type: Inject,
@@ -58015,7 +58014,7 @@ let NEXT_ID$a = 0;
  *
  * Example:
  * ```html
- * <button (click)="snackbar.show()">Send message</button>
+ * <button type="button" igxButton (click)="snackbar.show()">Send message</button>
  * <div>
  *   <igx-snackbar #snackbar>
  *      Message sent
@@ -58163,10 +58162,10 @@ class IgxSnackbarComponent extends IgxNotificationsDirective {
     }
 }
 IgxSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxSnackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: { id: "id", actionText: "actionText", positionSettings: "positionSettings" }, outputs: { clicked: "clicked", animationStarted: "animationStarted", animationDone: "animationDone" }, host: { properties: { "attr.id": "this.id", "class.igx-snackbar": "this.cssClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"igx-snackbar__message\">\n    {{ textMessage }}\n    <ng-content></ng-content>\n</div>\n<button class=\"igx-snackbar__button\" igxRipple=\"white\" *ngIf=\"actionText\" (click)=\"triggerAction()\">\n    {{ actionText }}\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IgxSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: { id: "id", actionText: "actionText", positionSettings: "positionSettings" }, outputs: { clicked: "clicked", animationStarted: "animationStarted", animationDone: "animationDone" }, host: { properties: { "attr.id": "this.id", "class.igx-snackbar": "this.cssClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"igx-snackbar__message\">\n    {{ textMessage }}\n    <ng-content></ng-content>\n</div>\n<button type=\"button\" class=\"igx-snackbar__button\" igxRipple=\"white\" *ngIf=\"actionText\" (click)=\"triggerAction()\">\n    {{ actionText }}\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxSnackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-snackbar', template: "<div class=\"igx-snackbar__message\">\n    {{ textMessage }}\n    <ng-content></ng-content>\n</div>\n<button class=\"igx-snackbar__button\" igxRipple=\"white\" *ngIf=\"actionText\" (click)=\"triggerAction()\">\n    {{ actionText }}\n</button>\n" }]
+            args: [{ selector: 'igx-snackbar', template: "<div class=\"igx-snackbar__message\">\n    {{ textMessage }}\n    <ng-content></ng-content>\n</div>\n<button type=\"button\" class=\"igx-snackbar__button\" igxRipple=\"white\" *ngIf=\"actionText\" (click)=\"triggerAction()\">\n    {{ actionText }}\n</button>\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -59763,10 +59762,10 @@ class IgxGridFilteringRowComponent {
     }
 }
 IgxGridFilteringRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [{ token: IgxFilteringService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass", "class.igx-grid__filtering-row--compact": "this.compactCSSClass", "class.igx-grid__filtering-row--cosy": "this.cosyCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n        tabindex=\"0\"\n        (click)=\"inputGroupPrefixClick($event)\"\n        (keydown)=\"onPrefixKeyDown($event)\"\n        [igxDropDownItemNavigation]=\"inputGroupConditions\">\n        <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n    </igx-prefix>\n    <igx-suffix *ngIf=\"value\">\n        <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n        <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n    </igx-suffix>\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id='chip'\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id='operand' *ngIf=\"!last\">\n                    <button igxButton type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass", "class.igx-grid__filtering-row--compact": "this.compactCSSClass", "class.igx-grid__filtering-row--cosy": "this.cosyCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n        <igx-suffix *ngIf=\"value || value === 0\" >\n            <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n            <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id=\"chip\"\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id=\"operand\" *ngIf=\"!last\">\n                    <button igxButton type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n        tabindex=\"0\"\n        (click)=\"inputGroupPrefixClick($event)\"\n        (keydown)=\"onPrefixKeyDown($event)\"\n        [igxDropDownItemNavigation]=\"inputGroupConditions\">\n        <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n    </igx-prefix>\n    <igx-suffix *ngIf=\"value\">\n        <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n        <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n    </igx-suffix>\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id='chip'\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id='operand' *ngIf=\"!last\">\n                    <button igxButton type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n        <igx-suffix *ngIf=\"value || value === 0\" >\n            <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n            <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id=\"chip\"\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id=\"operand\" *ngIf=\"!last\">\n                    <button igxButton type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: IgxFilteringService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { column: [{
                 type: Input
             }], value: [{
@@ -62399,8 +62398,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * Sets the row edit actions template.
      *```html
      * <ng-template #template igxRowEditActions let-endRowEdit>
-     * <button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
-     * <button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
+     *     <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
+     *     <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
      * </ng-template>
      * ```
      *```typescript
@@ -67330,7 +67329,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * If `commit === true`, passes them from the pending state to the data (or transaction service)
      * @example
      * ```html
-     * <button igxButton (click)="grid.endEdit(true)">Commit Row</button>
+     * <button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>
      * ```
      * @param commit
      */
@@ -72700,7 +72699,7 @@ IgxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         IgxColumnResizingService,
         IgxForOfSyncService,
         IgxForOfScrollSyncService
-    ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style=\"display: flex\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style=\"display: flex\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
@@ -72715,7 +72714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         IgxColumnResizingService,
                         IgxForOfSyncService,
                         IgxForOfScrollSyncService
-                    ], selector: 'igx-grid', template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style=\"display: flex\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n" }]
+                    ], selector: 'igx-grid', template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style=\"display: flex\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n" }]
         }], propDecorators: { dataPreLoad: [{
                 type: Output
             }], groupingExpressionsChange: [{
@@ -78360,10 +78359,10 @@ class IgxColumnActionsComponent {
     }
 }
 IgxColumnActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxColumnActionsComponent, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-IgxColumnActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: "hideFilter", title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?._columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return IgxCheckboxComponent; }), selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: i0.forwardRef(function () { return IgxColumnActionEnabledPipe; }), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxFilterActionColumnsPipe; }), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxSortActionColumnsPipe; }), name: "sortActionColumns" }] });
+IgxColumnActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: "hideFilter", title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?._columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i5.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return IgxCheckboxComponent; }), selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: i0.forwardRef(function () { return IgxColumnActionEnabledPipe; }), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxFilterActionColumnsPipe; }), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(function () { return IgxSortActionColumnsPipe; }), name: "sortActionColumns" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-column-actions', template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?._columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n" }]
+            args: [{ selector: 'igx-column-actions', template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?._columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }]; }, propDecorators: { grid: [{
                 type: Input
             }], indentation: [{
@@ -81426,7 +81425,7 @@ IgxTreeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         IgxColumnResizingService,
         IgxForOfSyncService,
         IgxForOfScrollSyncService
-    ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid', providers: [
@@ -81441,7 +81440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         IgxColumnResizingService,
                         IgxForOfSyncService,
                         IgxForOfScrollSyncService
-                    ], template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n" }]
+                    ], template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n" }]
         }], ctorParameters: function () {
         return [{ type: IgxGridValidationService }, { type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -83984,7 +83983,7 @@ IgxHierarchicalGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
         IgxForOfSyncService,
         IgxForOfScrollSyncService,
         IgxRowIslandAPIService
-    ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: IgxGridToolbarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorComponent, descendants: true }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: IgxGridToolbarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorComponent, descendants: true }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid', providers: [
@@ -84000,7 +83999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         IgxForOfSyncService,
                         IgxForOfScrollSyncService,
                         IgxRowIslandAPIService
-                    ], template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n" }]
+                    ], template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n" }]
         }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -88384,10 +88383,10 @@ class IgxTabsComponent extends IgxTabsDirective {
     }
 }
 IgxTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxTabsComponent, deps: [{ token: IgxAngularAnimationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component });
-IgxTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxTabsComponent, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon>navigate_before</igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon>navigate_next</igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
+IgxTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxTabsComponent, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon>navigate_before</igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon>navigate_next</igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-tabs', providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon>navigate_before</igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon>navigate_next</igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>" }]
+            args: [{ selector: 'igx-tabs', providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon>navigate_before</igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxButton=\"icon\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon>navigate_next</igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -88643,7 +88642,7 @@ let NEXT_ID$1 = 0;
  *
  * Example:
  * ```html
- * <button (click)="toast.open()">Show notification</button>
+ * <button type="button" igxButton (click)="toast.open()">Show notification</button>
  * <igx-toast #toast displayTime="1000">
  *      Notification displayed
  * </igx-toast>
@@ -91434,7 +91433,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-range-picker #dateRange></igx-date-range-picker>
      *
-     * <button (click)="dateRange.open()">Open Dialog</button
+     * <button type="button" igxButton (click)="dateRange.open()">Open Dialog</button
      * ```
      */
     open(overlaySettings) {
@@ -91456,7 +91455,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-range-picker #dateRange></igx-date-range-picker>
      *
-     * <button (click)="dateRange.close()">Close Dialog</button>
+     * <button type="button" igxButton (click)="dateRange.close()">Close Dialog</button>
      * ```
      */
     close() {
@@ -91471,7 +91470,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
      * ```html
      * <igx-date-range-picker #dateRange></igx-date-range-picker>
      *
-     * <button (click)="dateRange.toggle()">Toggle Dialog</button>
+     * <button type="button" igxButton (click)="dateRange.toggle()">Toggle Dialog</button>
      * ```
      */
     toggle(overlaySettings) {
@@ -91958,13 +91957,13 @@ IgxDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 IgxDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IgxDateRangePickerComponent, selector: "igx-date-range-picker", inputs: { displayMonthsCount: "displayMonthsCount", hideOutsideDays: "hideOutsideDays", formatter: "formatter", doneButtonText: "doneButtonText", overlaySettings: "overlaySettings", displayFormat: "displayFormat", inputFormat: "inputFormat", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", placeholder: "placeholder", outlet: "outlet", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.igx-date-range-picker": "this.cssClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
         { provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true }
-    ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"this.hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"this.open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon>\n        date_range\n    </igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"this.type\" [displayDensity]=\"this.displayDensity\" (click)=\"this.open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"this.disabled\" [placeholder]=\"this.value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!this.collapsed\" [attr.aria-labelledby]=\"this.label?.id\"\n            [value]=\"this.value | dateRange: this.appliedFormat : this.locale : this.formatter\" />\n\n        <igx-prefix *ngIf=\"!this.toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] });
+    ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon>\n        date_range\n    </igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" [displayDensity]=\"displayDensity\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-picker', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
                         { provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true }
-                    ], template: "<ng-container *ngTemplateOutlet=\"this.hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"this.open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon>\n        date_range\n    </igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"this.type\" [displayDensity]=\"this.displayDensity\" (click)=\"this.open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"this.disabled\" [placeholder]=\"this.value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!this.collapsed\" [attr.aria-labelledby]=\"this.label?.id\"\n            [value]=\"this.value | dateRange: this.appliedFormat : this.locale : this.formatter\" />\n\n        <igx-prefix *ngIf=\"!this.toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n" }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon>\n        date_range\n    </igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" [displayDensity]=\"displayDensity\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Inject,