igniteui-angular 14.0.10 → 14.0.11
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/esm2020/lib/grids/cell.component.mjs +3 -3
- package/esm2020/lib/grids/grid/expandable-cell.component.mjs +3 -3
- package/esm2020/lib/grids/hierarchical-grid/hierarchical-cell.component.mjs +3 -3
- package/esm2020/lib/grids/tree-grid/tree-cell.component.mjs +3 -3
- package/fesm2015/igniteui-angular.mjs +8 -8
- package/fesm2015/igniteui-angular.mjs.map +1 -1
- package/fesm2020/igniteui-angular.mjs +8 -8
- package/fesm2020/igniteui-angular.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -67537,10 +67537,10 @@ class IgxGridCellComponent {
|
|
|
67537
67537
|
}
|
|
67538
67538
|
}
|
|
67539
67539
|
IgxGridCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxGridCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
|
|
67540
|
-
IgxGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: { column: "column", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: "editMode", width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)", "contextmenu": "onContextMenu($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", "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" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], 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 }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
67540
|
+
IgxGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: { column: "column", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: "editMode", width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)", "contextmenu": "onContextMenu($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", "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" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], 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 }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
67541
67541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxGridCellComponent, decorators: [{
|
|
67542
67542
|
type: Component,
|
|
67543
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
|
|
67543
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
|
|
67544
67544
|
}], ctorParameters: function () {
|
|
67545
67545
|
return [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
|
|
67546
67546
|
type: Inject,
|
|
@@ -67713,10 +67713,10 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
|
|
|
67713
67713
|
}
|
|
67714
67714
|
}
|
|
67715
67715
|
IgxGridExpandableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxGridExpandableCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
|
|
67716
|
-
IgxGridExpandableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\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 [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">{{ 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}}</div>\n\n <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 value ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" [step]=\"step\" type=\"number\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox (change)=\"editValue = $event.checked\" [value]=\"editValue\" [checked]=\"editValue\" [disableRipple]=\"true\"></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\n <igx-date-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\" mode=\"dropdown\"\n [locale]=\"grid.locale\" [weekStart]=\"column.pipeArgs.weekStart\" [(value)]=\"editValue\" [igxFocus]=\"true\">\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\"\n mode=\"dropdown\" [inputFormat]=\"column.defaultTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\">\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input igxInput [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\" [step]=\"step\" type=\"number\"/>\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [step]=\"step\"\n [igxFocus]=\"true\" type=\"number\"/>\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
67716
|
+
IgxGridExpandableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\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 [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">{{ 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}}</div>\n\n <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 value ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n >\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" [step]=\"step\" type=\"number\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox (change)=\"editValue = $event.checked\" [value]=\"editValue\" [checked]=\"editValue\" [disableRipple]=\"true\"></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\n <igx-date-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\" mode=\"dropdown\"\n [locale]=\"grid.locale\" [weekStart]=\"column.pipeArgs.weekStart\" [(value)]=\"editValue\" [igxFocus]=\"true\">\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\"\n mode=\"dropdown\" [inputFormat]=\"column.defaultTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\">\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input igxInput [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\" [step]=\"step\" type=\"number\"/>\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [step]=\"step\"\n [igxFocus]=\"true\" type=\"number\"/>\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
67717
67717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
|
|
67718
67718
|
type: Component,
|
|
67719
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\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 [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">{{ 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}}</div>\n\n <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 value ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" [step]=\"step\" type=\"number\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox (change)=\"editValue = $event.checked\" [value]=\"editValue\" [checked]=\"editValue\" [disableRipple]=\"true\"></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\n <igx-date-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\" mode=\"dropdown\"\n [locale]=\"grid.locale\" [weekStart]=\"column.pipeArgs.weekStart\" [(value)]=\"editValue\" [igxFocus]=\"true\">\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\"\n mode=\"dropdown\" [inputFormat]=\"column.defaultTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\">\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input igxInput [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\" [step]=\"step\" type=\"number\"/>\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [step]=\"step\"\n [igxFocus]=\"true\" type=\"number\"/>\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n" }]
|
|
67719
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\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 [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">{{ 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}}</div>\n\n <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 value ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n >\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" [step]=\"step\" type=\"number\">\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox (change)=\"editValue = $event.checked\" [value]=\"editValue\" [checked]=\"editValue\" [disableRipple]=\"true\"></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\n <igx-date-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\" mode=\"dropdown\"\n [locale]=\"grid.locale\" [weekStart]=\"column.pipeArgs.weekStart\" [(value)]=\"editValue\" [igxFocus]=\"true\">\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\"\n mode=\"dropdown\" [inputFormat]=\"column.defaultTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\">\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input igxInput [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\" [step]=\"step\" type=\"number\"/>\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [step]=\"step\"\n [igxFocus]=\"true\" type=\"number\"/>\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n" }]
|
|
67720
67720
|
}], ctorParameters: function () {
|
|
67721
67721
|
return [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
|
|
67722
67722
|
type: Inject,
|
|
@@ -72662,10 +72662,10 @@ class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
|
|
|
72662
72662
|
}
|
|
72663
72663
|
}
|
|
72664
72664
|
IgxTreeGridCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxTreeGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
72665
|
-
IgxTreeGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || 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)\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\"\n style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [(ngModel)]=\"editValue\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"!editMode\">\n <ng-container *ngIf=\"level > 0\">\n <div\n #indentationDiv\n class=\"igx-grid__tree-cell--padding-level-{{level}}\"\n [ngStyle]=\"{'padding-inline-start': 'calc(var(--igx-tree-indent-size) *' + level + ')'}\"\n ></div>\n </ng-container>\n <div\n #indicator\n *ngIf=\"!isLoading\"\n class=\"igx-grid__tree-grouping-indicator\"\n [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n (click)=\"toggle($event)\"\n (focus)=\"onIndicatorFocus()\"\n >\n <ng-container\n *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n >\n </ng-container>\n <ng-container\n *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n >\n </ng-container>\n </div>\n <div\n *ngIf=\"isLoading\"\n (dblclick)=\"onLoadingDblClick($event)\"\n class=\"igx-grid__tree-loading-indicator\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n grid.rowLoadingIndicatorTemplate\n ? grid.rowLoadingIndicatorTemplate\n : defaultLoadingIndicatorTemplate\n \"\n >\n </ng-container>\n </div>\n <ng-template #defaultLoadingIndicatorTemplate>\n <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72665
|
+
IgxTreeGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || 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)\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\"\n style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [(ngModel)]=\"editValue\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"!editMode\">\n <ng-container *ngIf=\"level > 0\">\n <div\n #indentationDiv\n class=\"igx-grid__tree-cell--padding-level-{{level}}\"\n [ngStyle]=\"{'padding-inline-start': 'calc(var(--igx-tree-indent-size) *' + level + ')'}\"\n ></div>\n </ng-container>\n <div\n #indicator\n *ngIf=\"!isLoading\"\n class=\"igx-grid__tree-grouping-indicator\"\n [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n (click)=\"toggle($event)\"\n (focus)=\"onIndicatorFocus()\"\n >\n <ng-container\n *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n >\n </ng-container>\n <ng-container\n *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n >\n </ng-container>\n </div>\n <div\n *ngIf=\"isLoading\"\n (dblclick)=\"onLoadingDblClick($event)\"\n class=\"igx-grid__tree-loading-indicator\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n grid.rowLoadingIndicatorTemplate\n ? grid.rowLoadingIndicatorTemplate\n : defaultLoadingIndicatorTemplate\n \"\n >\n </ng-container>\n </div>\n <ng-template #defaultLoadingIndicatorTemplate>\n <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72666
72666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
|
|
72667
72667
|
type: Component,
|
|
72668
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || 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)\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\"\n style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [(ngModel)]=\"editValue\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"!editMode\">\n <ng-container *ngIf=\"level > 0\">\n <div\n #indentationDiv\n class=\"igx-grid__tree-cell--padding-level-{{level}}\"\n [ngStyle]=\"{'padding-inline-start': 'calc(var(--igx-tree-indent-size) *' + level + ')'}\"\n ></div>\n </ng-container>\n <div\n #indicator\n *ngIf=\"!isLoading\"\n class=\"igx-grid__tree-grouping-indicator\"\n [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n (click)=\"toggle($event)\"\n (focus)=\"onIndicatorFocus()\"\n >\n <ng-container\n *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n >\n </ng-container>\n <ng-container\n *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n >\n </ng-container>\n </div>\n <div\n *ngIf=\"isLoading\"\n (dblclick)=\"onLoadingDblClick($event)\"\n class=\"igx-grid__tree-loading-indicator\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n grid.rowLoadingIndicatorTemplate\n ? grid.rowLoadingIndicatorTemplate\n : defaultLoadingIndicatorTemplate\n \"\n >\n </ng-container>\n </div>\n <ng-template #defaultLoadingIndicatorTemplate>\n <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n" }]
|
|
72668
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || 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)\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\"\n style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [(ngModel)]=\"editValue\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngIf=\"!editMode\">\n <ng-container *ngIf=\"level > 0\">\n <div\n #indentationDiv\n class=\"igx-grid__tree-cell--padding-level-{{level}}\"\n [ngStyle]=\"{'padding-inline-start': 'calc(var(--igx-tree-indent-size) *' + level + ')'}\"\n ></div>\n </ng-container>\n <div\n #indicator\n *ngIf=\"!isLoading\"\n class=\"igx-grid__tree-grouping-indicator\"\n [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n (click)=\"toggle($event)\"\n (focus)=\"onIndicatorFocus()\"\n >\n <ng-container\n *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n >\n </ng-container>\n <ng-container\n *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n >\n </ng-container>\n </div>\n <div\n *ngIf=\"isLoading\"\n (dblclick)=\"onLoadingDblClick($event)\"\n class=\"igx-grid__tree-loading-indicator\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n grid.rowLoadingIndicatorTemplate\n ? grid.rowLoadingIndicatorTemplate\n : defaultLoadingIndicatorTemplate\n \"\n >\n </ng-container>\n </div>\n <ng-template #defaultLoadingIndicatorTemplate>\n <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-template #defaultExpandedTemplate>\n <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon>chevron_right</igx-icon>\n</ng-template>\n" }]
|
|
72669
72669
|
}], propDecorators: { level: [{
|
|
72670
72670
|
type: Input
|
|
72671
72671
|
}], showIndicator: [{
|
|
@@ -75537,10 +75537,10 @@ class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
|
|
|
75537
75537
|
}
|
|
75538
75538
|
}
|
|
75539
75539
|
IgxHierarchicalGridCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxHierarchicalGridCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
|
|
75540
|
-
IgxHierarchicalGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75540
|
+
IgxHierarchicalGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["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: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75541
75541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
|
|
75542
75542
|
type: Component,
|
|
75543
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
|
|
75543
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n <igx-chip\n *ngIf=\"displayPinnedChip\"\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [displayDensity]=\"'compact'\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n >\n</ng-template>\n<ng-template #defaultCell>\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight\n class=\"igx-grid__td-text\"\n style=\"pointer-events: none;\"\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 <igx-icon\n *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n >{{ value ? \"check\" : \"close\" }}</igx-icon\n >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\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 !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n <ng-container *ngIf=\"column.dataType === 'string'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'number'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'boolean'\">\n <igx-checkbox\n [checked]=\"editValue\"\n (change)=\"editValue = $event.checked\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n ></igx-checkbox>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'date'\">\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 >\n </igx-date-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'time'\">\n <igx-time-picker\n [style.width.%]=\"100\"\n [outlet]=\"grid.outlet\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.defaultTimeFormat\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n >\n </igx-time-picker>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n <igx-input-group>\n <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'currency'\">\n <igx-input-group displayDensity=\"compact\">\n <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n </igx-input-group>\n </ng-container>\n <ng-container *ngIf=\"column.dataType === 'percent'\">\n <igx-input-group displayDensity=\"compact\">\n <input\n igxInput\n [(ngModel)]=\"editValue\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
|
|
75544
75544
|
}], ctorParameters: function () {
|
|
75545
75545
|
return [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
|
|
75546
75546
|
type: Inject,
|