igniteui-angular 21.2.21 → 21.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/igniteui-angular-core.mjs +14 -5
- package/fesm2022/igniteui-angular-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-date-picker.mjs +12 -3
- package/fesm2022/igniteui-angular-date-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-dialog.mjs +3 -1
- package/fesm2022/igniteui-angular-dialog.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-core.mjs +31 -11
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +2 -2
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +2 -2
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +4 -4
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/package.json +1 -1
- package/types/igniteui-angular-core.d.ts +7 -4
- package/types/igniteui-angular-date-picker.d.ts +2 -0
- package/types/igniteui-angular-dialog.d.ts +1 -0
- package/types/igniteui-angular-grids-core.d.ts +11 -1
|
@@ -907,7 +907,7 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
|
|
|
907
907
|
return !this.editMode && (!this.intRow.pinned || isGhost);
|
|
908
908
|
}
|
|
909
909
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridExpandableCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxGridExpandableCellComponent, isStandalone: true, 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 @if (displayPinnedChip) {\n <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [class.igx-grid__td--number]=\"column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'\"\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\">\n {{ 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\n @if (column.dataType === 'boolean' && !this.formatter) {\n <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n </div>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">\n {{ value ? value : (column.header || column.field) }}\n </div>\n }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n @if (column.dataType === 'string' || column.dataType === 'image') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-input-group [style.--ig-size]=\"1\" >\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n@if (showExpanderIndicator) {\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n </ng-container>\n </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n @if (formGroup?.get(column?.field).errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
910
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxGridExpandableCellComponent, isStandalone: true, 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 @if (displayPinnedChip) {\n <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [class.igx-grid__td--number]=\"column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'\"\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\">\n {{ 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\n @if (column.dataType === 'boolean' && !this.formatter) {\n <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n </div>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">\n {{ !isEmptyAddRowCell\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 : (column.header || column.field) }}\n </div>\n }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n @if (column.dataType === 'string' || column.dataType === 'image') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-input-group [style.--ig-size]=\"1\" >\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n@if (showExpanderIndicator) {\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n </ng-container>\n </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n @if (formGroup?.get(column?.field).errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
911
911
|
}
|
|
912
912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
|
|
913
913
|
type: Component,
|
|
@@ -915,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
915
915
|
IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent,
|
|
916
916
|
IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet,
|
|
917
917
|
IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe,
|
|
918
|
-
IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe], template: "<ng-template #defaultPinnedIndicator>\n @if (displayPinnedChip) {\n <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [class.igx-grid__td--number]=\"column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'\"\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\">\n {{ 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\n @if (column.dataType === 'boolean' && !this.formatter) {\n <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n </div>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">\n {{ value ? value : (column.header || column.field) }}\n </div>\n }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n @if (column.dataType === 'string' || column.dataType === 'image') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-input-group [style.--ig-size]=\"1\" >\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n@if (showExpanderIndicator) {\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n </ng-container>\n </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n @if (formGroup?.get(column?.field).errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n" }]
|
|
918
|
+
IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe], template: "<ng-template #defaultPinnedIndicator>\n @if (displayPinnedChip) {\n <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [class.igx-grid__td--number]=\"column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'\"\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\">\n {{ 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\n @if (column.dataType === 'boolean' && !this.formatter) {\n <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n </div>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\">\n {{ !isEmptyAddRowCell\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 : (column.header || column.field) }}\n </div>\n }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n @if (column.dataType === 'string' || column.dataType === 'image') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-input-group [style.--ig-size]=\"1\" >\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n@if (showExpanderIndicator) {\n <div #indicator\n class=\"igx-grid__tree-grouping-indicator\"\n (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n </ng-container>\n </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n @if (formGroup?.get(column?.field).errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (formGroup?.get(column?.field).errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n" }]
|
|
919
919
|
}], propDecorators: { expanded: [{
|
|
920
920
|
type: Input
|
|
921
921
|
}], indicator: [{
|