igniteui-angular 21.2.0-beta.1 → 21.2.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/igniteui-angular-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-date-picker.mjs +2 -6
- package/fesm2022/igniteui-angular-date-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-core.mjs +13 -23
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +16 -46
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +4 -15
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +6 -2
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +4 -4
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-query-builder.mjs +3 -47
- package/fesm2022/igniteui-angular-query-builder.mjs.map +1 -1
- package/lib/core/styles/components/grid/_grid-component.scss +0 -8
- package/lib/core/styles/components/grid/_grid-theme.scss +27 -63
- package/lib/core/styles/components/splitter/_splitter-component.scss +27 -1
- package/lib/core/styles/components/splitter/_splitter-theme.scss +88 -41
- package/package.json +1 -1
- package/styles/igniteui-angular-dark.css +1 -1
- package/styles/igniteui-angular.css +1 -1
- package/styles/igniteui-bootstrap-dark.css +1 -1
- package/styles/igniteui-bootstrap-light.css +1 -1
- package/styles/igniteui-dark-green.css +1 -1
- package/styles/igniteui-fluent-dark-excel.css +1 -1
- package/styles/igniteui-fluent-dark-word.css +1 -1
- package/styles/igniteui-fluent-dark.css +1 -1
- package/styles/igniteui-fluent-light-excel.css +1 -1
- package/styles/igniteui-fluent-light-word.css +1 -1
- package/styles/igniteui-fluent-light.css +1 -1
- package/styles/igniteui-indigo-dark.css +1 -1
- package/styles/igniteui-indigo-light.css +1 -1
- package/styles/maps/igniteui-angular-dark.css.map +1 -1
- package/styles/maps/igniteui-angular.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
- package/styles/maps/igniteui-dark-green.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-light.css.map +1 -1
- package/styles/maps/igniteui-indigo-dark.css.map +1 -1
- package/styles/maps/igniteui-indigo-light.css.map +1 -1
- package/types/igniteui-angular-core.d.ts +10 -10
- package/types/igniteui-angular-date-picker.d.ts +2 -37
- package/types/igniteui-angular-grids-core.d.ts +1 -5
- package/types/igniteui-angular-grids-grid.d.ts +1 -16
- package/types/igniteui-angular-grids-hierarchical-grid.d.ts +0 -4
- package/types/igniteui-angular-grids-pivot-grid.d.ts +1 -0
- package/types/igniteui-angular-query-builder.d.ts +1 -24
|
@@ -10,7 +10,7 @@ import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
|
|
|
10
10
|
import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
|
|
11
11
|
import { IgxSorting, DataUtil, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, PlatformUtil, isDate, isEqual, DateTimeUtil, copyDescriptors, trackByIdentity, TransactionType, resolveNestedPath, columnFieldPath, DefaultSortingStrategy, isConstructor, ɵSize as _Size, ColumnPinningPosition, ExpressionsTreeUtil, IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxBooleanFilteringOperand, flatten, onResourceChangeHandle, GridResourceStringsEN, getCurrentResourceStrings, QueryBuilderResourceStringsEN, isTree, AbsoluteScrollStrategy, ConnectedPositioningStrategy, IgxOverlayOutletDirective, IgxPercentFormatterPipe, I18N_FORMATTER, IgxPickerToggleComponent, IgxPickerClearComponent, IgxOverlayService, VerticalAlignment, AutoPositionStrategy, HorizontalAlignment, cloneHierarchicalArray, SortingDirection, showMessage, IgxActionStripActionsToken, GridSummaryCalculationMode, cloneArray, cloneValue, recreateTreeFromFields, FilterUtil, TreeGridFilteringStrategy, getHierarchy, isHierarchyMatch, FilteringStrategy, NAVIGATION_KEYS, Util, HammerGesturesManager, IgxNumberFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, reverseMapper, mergeObjects } from 'igniteui-angular/core';
|
|
12
12
|
import { first as first$1, takeUntil, map, debounceTime, filter, switchMap, throttle, throttleTime, takeWhile } from 'rxjs/operators';
|
|
13
|
-
import { NgClass, NgTemplateOutlet, NgStyle,
|
|
13
|
+
import { NgClass, NgTemplateOutlet, NgStyle, AsyncPipe } from '@angular/common';
|
|
14
14
|
import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder';
|
|
15
15
|
import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
|
|
16
16
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -7504,12 +7504,6 @@ class IgxAdvancedFilteringDialogComponent {
|
|
|
7504
7504
|
this.assignResourceStrings(false);
|
|
7505
7505
|
}, this);
|
|
7506
7506
|
}
|
|
7507
|
-
/**
|
|
7508
|
-
* @hidden @internal
|
|
7509
|
-
*/
|
|
7510
|
-
ngAfterViewInit() {
|
|
7511
|
-
this.queryBuilder.setPickerOutlet(this.grid.outlet);
|
|
7512
|
-
}
|
|
7513
7507
|
/**
|
|
7514
7508
|
* @hidden @internal
|
|
7515
7509
|
*/
|
|
@@ -7995,11 +7989,11 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
|
|
|
7995
7989
|
return this.i18nFormatter.getLocaleFirstDayOfWeek(this.grid.locale);
|
|
7996
7990
|
}
|
|
7997
7991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7998
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, 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 [placeholder]=\"conditionsPlaceholder\"\n (selectionChanging)=\"onConditionsChanged($event)\"\n [overlaySettings]=\"dropDownOverlaySettings\">\n <igx-prefix>\n @if (expressionUI.expression.condition) {\n <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n }\n @if (!expressionUI.expression.condition) {\n <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n }\n </igx-prefix>\n @for (condition of conditions; track condition) {\n <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span>{{translateCondition(condition)}}</span>\n </igx-select-item>\n }\n</igx-select>\n\n@if (column.dataType === 'date') {\n <igx-date-picker #picker\n [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n [(ngModel)]=\"searchVal\"\n [locale]=\"grid.locale\"\n
|
|
7992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, 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 [placeholder]=\"conditionsPlaceholder\"\n (selectionChanging)=\"onConditionsChanged($event)\"\n [overlaySettings]=\"dropDownOverlaySettings\">\n <igx-prefix>\n @if (expressionUI.expression.condition) {\n <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n }\n @if (!expressionUI.expression.condition) {\n <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n }\n </igx-prefix>\n @for (condition of conditions; track condition) {\n <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span>{{translateCondition(condition)}}</span>\n </igx-select-item>\n }\n</igx-select>\n\n@if (column.dataType === 'date') {\n <igx-date-picker #picker\n [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n [(ngModel)]=\"searchVal\"\n [locale]=\"grid.locale\"\n (click)=\"picker.open()\"\n [placeholder]=\"inputDatePlaceholder\"\n [formatter]=\"column.formatter\"\n [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n type=\"box\"\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\n@if (column.dataType === 'time') {\n <igx-time-picker #picker\n [(ngModel)]=\"searchVal\"\n [locale]=\"grid.locale\"\n (click)=\"picker.open()\"\n [placeholder]=\"inputTimePlaceholder\"\n [displayFormat]=\"column.pipeArgs.format\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [formatter]=\"column.formatter\"\n [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n type=\"box\"\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\n@if (column.dataType === 'dateTime') {\n <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n <input #input igxInput tabindex=\"0\"\n [placeholder]=\"inputDatePlaceholder\"\n [locale]=\"column.grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [(ngModel)]=\"searchVal\"\n [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n </igx-input-group>\n}\n\n@if (!isSingle) {\n <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n </button>\n}\n\n@if (!isLast) {\n <igx-buttongroup #logicOperatorButtonGroup>\n <span igxButton\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 <span igxButton\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\n<div #overlayOutlet\n igxOverlayOutlet\n (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { 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: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
|
|
7999
7993
|
}
|
|
8000
7994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
|
|
8001
7995
|
type: Component,
|
|
8002
|
-
args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n type=\"box\"\n [placeholder]=\"conditionsPlaceholder\"\n (selectionChanging)=\"onConditionsChanged($event)\"\n [overlaySettings]=\"dropDownOverlaySettings\">\n <igx-prefix>\n @if (expressionUI.expression.condition) {\n <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n }\n @if (!expressionUI.expression.condition) {\n <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n }\n </igx-prefix>\n @for (condition of conditions; track condition) {\n <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span>{{translateCondition(condition)}}</span>\n </igx-select-item>\n }\n</igx-select>\n\n@if (column.dataType === 'date') {\n <igx-date-picker #picker\n [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n [(ngModel)]=\"searchVal\"\n [locale]=\"grid.locale\"\n
|
|
7996
|
+
args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n type=\"box\"\n [placeholder]=\"conditionsPlaceholder\"\n (selectionChanging)=\"onConditionsChanged($event)\"\n [overlaySettings]=\"dropDownOverlaySettings\">\n <igx-prefix>\n @if (expressionUI.expression.condition) {\n <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n }\n @if (!expressionUI.expression.condition) {\n <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n }\n </igx-prefix>\n @for (condition of conditions; track condition) {\n <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n <span>{{translateCondition(condition)}}</span>\n </igx-select-item>\n }\n</igx-select>\n\n@if (column.dataType === 'date') {\n <igx-date-picker #picker\n [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n [(ngModel)]=\"searchVal\"\n [locale]=\"grid.locale\"\n (click)=\"picker.open()\"\n [placeholder]=\"inputDatePlaceholder\"\n [formatter]=\"column.formatter\"\n [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n type=\"box\"\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\n@if (column.dataType === 'time') {\n <igx-time-picker #picker\n [(ngModel)]=\"searchVal\"\n [locale]=\"grid.locale\"\n (click)=\"picker.open()\"\n [placeholder]=\"inputTimePlaceholder\"\n [displayFormat]=\"column.pipeArgs.format\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [formatter]=\"column.formatter\"\n [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n type=\"box\"\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\n@if (column.dataType === 'dateTime') {\n <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n <input #input igxInput tabindex=\"0\"\n [placeholder]=\"inputDatePlaceholder\"\n [locale]=\"column.grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [(ngModel)]=\"searchVal\"\n [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n </igx-input-group>\n}\n\n@if (!isSingle) {\n <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n </button>\n}\n\n@if (!isLast) {\n <igx-buttongroup #logicOperatorButtonGroup>\n <span igxButton\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 <span igxButton\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\n<div #overlayOutlet\n igxOverlayOutlet\n (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
|
|
8003
7997
|
}], propDecorators: { input: [{
|
|
8004
7998
|
type: ViewChild,
|
|
8005
7999
|
args: ['input', { read: IgxInputDirective, static: false }]
|
|
@@ -13050,8 +13044,6 @@ class IgxGridFilteringRowComponent {
|
|
|
13050
13044
|
}
|
|
13051
13045
|
}
|
|
13052
13046
|
ngAfterViewInit() {
|
|
13053
|
-
this._conditionsOverlaySettings.outlet = this.column.grid.outlet;
|
|
13054
|
-
this._operatorsOverlaySettings.outlet = this.column.grid.outlet;
|
|
13055
13047
|
const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
|
|
13056
13048
|
if (selectedItem) {
|
|
13057
13049
|
this.expression = selectedItem.expression;
|
|
@@ -13638,7 +13630,7 @@ class IgxGridFilteringRowComponent {
|
|
|
13638
13630
|
return this.nativeElement.offsetWidth < this.NARROW_WIDTH_THRESHOLD;
|
|
13639
13631
|
}
|
|
13640
13632
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 #inputGroupConditions [style.--ig-size]=\"filteringElementsSize\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n @for (condition of conditions; track condition) {\n <igx-drop-down-item\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"default\" [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 }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @if (value || value === 0) {\n <igx-suffix>\n @if (column.dataType === 'percent') {\n <span class=\"igx-grid__filtering-row-percent-hint\">{{ value | percent:column.pipeArgs.digitsInfo:filteringService.grid.locale }}</span>\n }\n <igx-icon\n (keydown)=\"onCommitKeyDown($event)\"\n (click)=\"onCommitClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"confirm\">\n </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #picker\n [(value)]=\"value\"\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 (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=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #picker\n [(value)]=\"value\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n [locale]=\"filteringService.grid.locale\"\n [formatter]=\"column.formatter\"\n [outlet]=\"filteringService.grid.outlet\"\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 <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @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 </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\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 (item of expressionsList; track item.expression; let i = $index; let last = $last) {\n <ng-container 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 [style.--ig-size]=\"filteringElementsSize\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"default\"\n [name]=\"item.expression.condition.iconName\">\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 <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down #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 }\n </ng-container>\n }\n </igx-chips-area>\n </div>\n</div>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n </button>\n}\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n @if (!isNarrowWidth) {\n <button igxButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_reset }}</span>\n </button>\n <button #closeButton igxButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_close }}</span>\n </button>\n }\n @if (isNarrowWidth) {\n <button igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n </button>\n <button #closeButton igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\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", "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: 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 }); }
|
|
13633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 #inputGroupConditions [style.--ig-size]=\"filteringElementsSize\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n @for (condition of conditions; track condition) {\n <igx-drop-down-item\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"default\" [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 }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @if (value || value === 0) {\n <igx-suffix>\n @if (column.dataType === 'percent') {\n <span class=\"igx-grid__filtering-row-percent-hint\">{{ value | percent:column.pipeArgs.digitsInfo:filteringService.grid.locale }}</span>\n }\n <igx-icon\n (keydown)=\"onCommitKeyDown($event)\"\n (click)=\"onCommitClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"confirm\">\n </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #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 <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #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 <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @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 </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\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 (item of expressionsList; track item.expression; let i = $index; let last = $last) {\n <ng-container 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 [style.--ig-size]=\"filteringElementsSize\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"default\"\n [name]=\"item.expression.condition.iconName\">\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 <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down #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 }\n </ng-container>\n }\n </igx-chips-area>\n </div>\n</div>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n </button>\n}\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n @if (!isNarrowWidth) {\n <button igxButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_reset }}</span>\n </button>\n <button #closeButton igxButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_close }}</span>\n </button>\n }\n @if (isNarrowWidth) {\n <button igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n </button>\n <button #closeButton igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\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 }); }
|
|
13642
13634
|
}
|
|
13643
13635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
|
|
13644
13636
|
type: Component,
|
|
@@ -13664,7 +13656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
13664
13656
|
IgxRippleDirective,
|
|
13665
13657
|
IgxIconButtonDirective,
|
|
13666
13658
|
IgxPercentFormatterPipe
|
|
13667
|
-
], template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [style.--ig-size]=\"filteringElementsSize\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n @for (condition of conditions; track condition) {\n <igx-drop-down-item\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"default\" [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 }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @if (value || value === 0) {\n <igx-suffix>\n @if (column.dataType === 'percent') {\n <span class=\"igx-grid__filtering-row-percent-hint\">{{ value | percent:column.pipeArgs.digitsInfo:filteringService.grid.locale }}</span>\n }\n <igx-icon\n (keydown)=\"onCommitKeyDown($event)\"\n (click)=\"onCommitClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"confirm\">\n </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #picker\n [(value)]=\"value\"\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 (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=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #picker\n [(value)]=\"value\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n [locale]=\"filteringService.grid.locale\"\n [formatter]=\"column.formatter\"\n [outlet]=\"filteringService.grid.outlet\"\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 <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @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 </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\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 (item of expressionsList; track item.expression; let i = $index; let last = $last) {\n <ng-container 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 [style.--ig-size]=\"filteringElementsSize\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"default\"\n [name]=\"item.expression.condition.iconName\">\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 <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down #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 }\n </ng-container>\n }\n </igx-chips-area>\n </div>\n</div>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n </button>\n}\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n @if (!isNarrowWidth) {\n <button igxButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_reset }}</span>\n </button>\n <button #closeButton igxButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_close }}</span>\n </button>\n }\n @if (isNarrowWidth) {\n <button igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n </button>\n <button #closeButton igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n </button>\n }\n</div>\n" }]
|
|
13659
|
+
], template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [style.--ig-size]=\"filteringElementsSize\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n @for (condition of conditions; track condition) {\n <igx-drop-down-item\n [value]=\"condition\"\n [selected]=\"isConditionSelected(condition)\">\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon family=\"default\" [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 }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n <igx-input-group #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @if (value || value === 0) {\n <igx-suffix>\n @if (column.dataType === 'percent') {\n <span class=\"igx-grid__filtering-row-percent-hint\">{{ value | percent:column.pipeArgs.digitsInfo:filteringService.grid.locale }}</span>\n }\n <igx-icon\n (keydown)=\"onCommitKeyDown($event)\"\n (click)=\"onCommitClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"confirm\">\n </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n <igx-date-picker #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 <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #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 <igx-prefix #inputGroupPrefix\n tabindex=\"0\"\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\n <igx-icon family=\"default\" [name]=\"expression.condition.iconName\"></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 </igx-icon>\n <igx-icon\n tabindex=\"0\"\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"clearInput($event)\"\n family=\"default\"\n name=\"input_clear\">\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 #inputGroup type=\"box\" (focusout)=\"onInputGroupFocusout()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-prefix #inputGroupPrefix\n (click)=\"inputGroupPrefixClick($event)\"\n (keydown)=\"onPrefixKeyDown($event)\"\n tabindex=\"0\"\n [igxDropDownItemNavigation]=\"inputGroupConditions\">\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 @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 </igx-icon>\n <igx-icon\n (keydown)=\"onClearKeyDown($event)\"\n (click)=\"onClearClick()\"\n tabindex=\"0\"\n family=\"default\"\n name=\"input_clear\">\n </igx-icon>\n </igx-suffix>\n }\n </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-start\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\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 (item of expressionsList; track item.expression; let i = $index; let last = $last) {\n <ng-container 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 [style.--ig-size]=\"filteringElementsSize\"\n [removable]=\"true\">\n <igx-icon\n igxPrefix\n family=\"default\"\n [name]=\"item.expression.condition.iconName\">\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 <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n </button>\n <igx-drop-down #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 }\n </ng-container>\n }\n </igx-chips-area>\n </div>\n</div>\n\n@if (showArrows) {\n <button igxIconButton=\"flat\" type=\"button\" class=\"igx-grid__filtering-row-scroll-end\" (click)=\"scrollChipsOnArrowPress('right')\">\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n </button>\n}\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n @if (!isNarrowWidth) {\n <button igxButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_reset }}</span>\n </button>\n <button #closeButton igxButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n <span>{{ filteringService.grid.resourceStrings.igx_grid_filter_row_close }}</span>\n </button>\n }\n @if (isNarrowWidth) {\n <button igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n </button>\n <button #closeButton igxIconButton=\"flat\" type=\"button\" igxRipple (click)=\"close()\" [style.--ig-size]=\"filteringElementsSize\">\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n </button>\n }\n</div>\n" }]
|
|
13668
13660
|
}], propDecorators: { column: [{
|
|
13669
13661
|
type: Input
|
|
13670
13662
|
}], value: [{
|
|
@@ -16605,7 +16597,7 @@ class BaseToolbarDirective {
|
|
|
16605
16597
|
}
|
|
16606
16598
|
toggleRef.toggle({
|
|
16607
16599
|
...this.overlaySettings, ...{
|
|
16608
|
-
target: anchorElement,
|
|
16600
|
+
target: anchorElement,
|
|
16609
16601
|
excludeFromOutsideClick: [anchorElement]
|
|
16610
16602
|
}
|
|
16611
16603
|
});
|
|
@@ -18239,12 +18231,6 @@ class IgxBaseExporter {
|
|
|
18239
18231
|
? column.pipeArgs.digitsInfo
|
|
18240
18232
|
: '1.0-2';
|
|
18241
18233
|
}
|
|
18242
|
-
if (column.dataType === 'date') {
|
|
18243
|
-
columnInfo.dateFormat = getLocaleDateFormat(this.locale, FormatWidth.Medium);
|
|
18244
|
-
}
|
|
18245
|
-
if (column.dataType === 'dateTime') {
|
|
18246
|
-
columnInfo.dateFormat = getLocaleDateTimeFormat(this.locale, FormatWidth.Medium);
|
|
18247
|
-
}
|
|
18248
18234
|
if (this.options.ignoreColumnsOrder) {
|
|
18249
18235
|
if (columnInfo.startIndex !== columnInfo.pinnedIndex) {
|
|
18250
18236
|
columnInfo.pinnedIndex = Number.MAX_VALUE;
|
|
@@ -22071,10 +22057,15 @@ class IgxGridNavigationService {
|
|
|
22071
22057
|
this.grid.selectionService.keyboardStateOnKeydown(this.activeNode, shift, shift && key === 'tab');
|
|
22072
22058
|
}
|
|
22073
22059
|
const position = this.getNextPosition(this.activeNode.row, this.activeNode.column, key, shift, ctrl, event);
|
|
22060
|
+
const shouldNotifyVirtualizedKeyboardSelection = ctrl && (key === 'arrowup' || key === 'up' || key === 'arrowdown' || key === 'down') &&
|
|
22061
|
+
this.shouldPerformVerticalScroll(position.rowIndex, position.colIndex);
|
|
22074
22062
|
if (NAVIGATION_KEYS.has(key)) {
|
|
22075
22063
|
event.preventDefault();
|
|
22076
22064
|
this.navigateInBody(position.rowIndex, position.colIndex, (obj) => {
|
|
22077
22065
|
obj.target.activate(event);
|
|
22066
|
+
if (shouldNotifyVirtualizedKeyboardSelection) {
|
|
22067
|
+
this.grid.notifyChanges();
|
|
22068
|
+
}
|
|
22078
22069
|
});
|
|
22079
22070
|
}
|
|
22080
22071
|
}
|
|
@@ -23674,7 +23665,6 @@ class IgxGridCellComponent {
|
|
|
23674
23665
|
closeOnOutsideClick: true,
|
|
23675
23666
|
excludeFromOutsideClick: [this.nativeElement],
|
|
23676
23667
|
closeOnEscape: false,
|
|
23677
|
-
outlet: this.grid.outlet,
|
|
23678
23668
|
modal: false,
|
|
23679
23669
|
positionStrategy: new AutoPositionStrategy({
|
|
23680
23670
|
horizontalStartPoint: HorizontalAlignment.Center,
|
|
@@ -23948,7 +23938,7 @@ class IgxGridCellComponent {
|
|
|
23948
23938
|
return new IgxGridCell(this.grid, rowID, this.column);
|
|
23949
23939
|
}
|
|
23950
23940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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" } }, providers: [HammerGesturesManager], 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</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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 formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\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 </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 (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\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 [outlet]=\"grid.outlet\"\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 [outlet]=\"grid.outlet\"\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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </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 [igxToggleOutlet]=\"grid.outlet\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></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 {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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", "outlet", "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 }); }
|
|
23941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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" } }, providers: [HammerGesturesManager], 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</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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 formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\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 </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 (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </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 </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></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 {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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 }); }
|
|
23952
23942
|
}
|
|
23953
23943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxGridCellComponent, decorators: [{
|
|
23954
23944
|
type: Component,
|
|
@@ -23978,7 +23968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
23978
23968
|
IgxGridCellImageAltPipe,
|
|
23979
23969
|
IgxStringReplacePipe,
|
|
23980
23970
|
IgxColumnFormatterPipe
|
|
23981
|
-
], 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</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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 formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\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 </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 (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\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 [outlet]=\"grid.outlet\"\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 [outlet]=\"grid.outlet\"\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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </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 [igxToggleOutlet]=\"grid.outlet\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></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 {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\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" }]
|
|
23971
|
+
], 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</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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 formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\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 </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 (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </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 </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></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 {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\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" }]
|
|
23982
23972
|
}], propDecorators: { isEmptyAddRowCell: [{
|
|
23983
23973
|
type: HostBinding,
|
|
23984
23974
|
args: ['class.igx-grid__td--new']
|