igniteui-angular 22.1.0-rc.0 → 22.1.1

package/fesm2022/igniteui-angular-grids-core.mjs

@@ -9906,6 +9906,7 @@ class IgxGridActionsBaseDirective {
     constructor() {
         this.iconService = inject(IgxIconService);
         this.differs = inject(IterableDiffers);
+        this._cdr = inject(ChangeDetectorRef);
         /**
          * Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label.
          *
@@ -9917,6 +9918,23 @@ class IgxGridActionsBaseDirective {
          */
         this.asMenuItems = false;
     }
+    /**
+     * The Action Strip this component renders its actions in.
+     *
+     * Assigned by the strip itself once it picks the component up in its content query, which
+     * happens outside of change detection. The template reads the strip's `context` through
+     * `isRowContext`, so this view has to be marked, both to render the actions for the current
+     * context and so that the first refresh subscribes it to the strip's `context` signal.
+     *
+     * @hidden @internal
+     **/
+    set strip(value) {
+        this._strip = value;
+        this._cdr.markForCheck();
+    }
+    get strip() {
+        return this._strip;
+    }
     /**
      * @hidden
      * @internal
@@ -12094,7 +12112,7 @@ class IgxGridFilteringCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition!.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition!.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
@@ -13391,7 +13409,7 @@ class IgxGridFilteringRowComponent {
         return this.nativeElement.offsetWidth < this.NARROW_WIDTH_THRESHOLD;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringRowComponent, isStandalone: true, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass" } }, 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\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [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    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\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    (keydown)=\"onInputKeyDown($event)\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (closed)=\"focusEditElement()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\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\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter!\"\n    type=\"box\"\n    [style.--ig-size]=\"filteringElementsSize\"\n    [placeholder]=\"placeholder\"\n    (closed)=\"focusEditElement()\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (click)=\"expression.condition!.isUnary ? null : picker.open()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\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\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      [locale]=\"filteringService.grid.locale\"\n      [displayFormat]=\"column.pipeArgs.format!\"\n      [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n      defaultFormatType=\"dateTime\"\n      [value]=\"value\"\n      (valueChange)=\"onInput($event)\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n  </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n  <div>\n    <igx-chips-area #chipsArea>\n      <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n      @for (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            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            [style.--ig-size]=\"filteringElementsSize\"\n            [removable]=\"true\"\n          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition!.iconName\"\n            >\n            </igx-icon>\n            <span>{{ filteringService.getChipLabel(item.expression) }}</span>\n          </igx-chip>\n          @if (!last) {\n            <span id=\"operand\">\n              <button\n                igxButton\n                type=\"button\"\n                (click)=\"toggleOperatorsDropDown($event, i)\"\n                [igxDropDownItemNavigation]=\"operators\"\n                [style.--ig-size]=\"filteringElementsSize\"\n              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\n              </igx-drop-down>\n            </span>\n          }\n        </ng-container>\n      }\n    </igx-chips-area>\n  </div>\n</div>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringRowComponent, isStandalone: true, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass" } }, 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\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [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    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\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    (keydown)=\"onInputKeyDown($event)\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (closed)=\"focusEditElement()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\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\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter!\"\n    type=\"box\"\n    [style.--ig-size]=\"filteringElementsSize\"\n    [placeholder]=\"placeholder\"\n    (closed)=\"focusEditElement()\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (click)=\"expression.condition!.isUnary ? null : picker.open()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\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\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      [locale]=\"filteringService.grid.locale\"\n      [displayFormat]=\"column.pipeArgs.format!\"\n      [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n      defaultFormatType=\"dateTime\"\n      [value]=\"value\"\n      (valueChange)=\"onInput($event)\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n  </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n  <div>\n    <igx-chips-area #chipsArea>\n      <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n      @for (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            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            [style.--ig-size]=\"filteringElementsSize\"\n            [removable]=\"true\"\n          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition!.iconName\"\n            >\n            </igx-icon>\n            <span>{{ filteringService.getChipLabel(item.expression) }}</span>\n          </igx-chip>\n          @if (!last) {\n            <span id=\"operand\">\n              <button\n                igxButton\n                type=\"button\"\n                (click)=\"toggleOperatorsDropDown($event, i)\"\n                [igxDropDownItemNavigation]=\"operators\"\n                [style.--ig-size]=\"filteringElementsSize\"\n              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\n              </igx-drop-down>\n            </span>\n          }\n        </ng-container>\n      }\n    </igx-chips-area>\n  </div>\n</div>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
@@ -23790,7 +23808,7 @@ class IgxGridCellComponent {
         return new IgxGridCell(this.grid, rowID, this.column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group>\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"true\"\n          [formControl]=\"formControl\"\n          (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n          (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n        />\n      </igx-input-group>\n    </ng-container>\n  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'dateTime') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        type=\"text\"\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [formControl]=\"formControl\"\n        igxInput\n        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultError>\n  @let errors = formControl.errors;\n  @if (errors?.['required']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (errors?.['minlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\n    </div>\n  }\n  @if (errors?.['email']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (errors?.['pattern']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { 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: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group>\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"true\"\n          [formControl]=\"formControl\"\n          (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n          (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n        />\n      </igx-input-group>\n    </ng-container>\n  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'dateTime') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        type=\"text\"\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [formControl]=\"formControl\"\n        igxInput\n        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultError>\n  @let errors = formControl.errors;\n  @if (errors?.['required']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (errors?.['minlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\n    </div>\n  }\n  @if (errors?.['email']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (errors?.['pattern']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { 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: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,