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
|
@@ -1436,7 +1436,7 @@ class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
|
|
|
1436
1436
|
});
|
|
1437
1437
|
}
|
|
1438
1438
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxHierarchicalGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n @if (displayPinnedChip) {\n <igx-chip\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [style.--ig-size]=\"1\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight\n class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n \"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n }}</div>\n }\n @if (column.dataType === 'boolean' && !this.formatter) {\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n @if (column.dataType === 'string' || column.dataType === 'image') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-input-group>\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultError>\n @let errors = formControl.errors;\n @if (errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n </div>\n }\n @if (errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n", dependencies: [{ kind: "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: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: 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 }); }
|
|
1439
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n @if (displayPinnedChip) {\n <igx-chip\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [style.--ig-size]=\"1\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight\n class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n \"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n }}</div>\n }\n @if (column.dataType === 'boolean' && !this.formatter) {\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n !isEmptyAddRowCell\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>\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultError>\n @let errors = formControl.errors;\n @if (errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n </div>\n }\n @if (errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n", dependencies: [{ kind: "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: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: 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 }); }
|
|
1440
1440
|
}
|
|
1441
1441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
|
|
1442
1442
|
type: Component,
|
|
@@ -1445,7 +1445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1445
1445
|
IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective,
|
|
1446
1446
|
IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe,
|
|
1447
1447
|
IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe,
|
|
1448
|
-
IgxCurrencyFormatterPipe, IgxDateFormatterPipe], template: "<ng-template #defaultPinnedIndicator>\n @if (displayPinnedChip) {\n <igx-chip\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [style.--ig-size]=\"1\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight\n class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n \"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n }}</div>\n }\n @if (column.dataType === 'boolean' && !this.formatter) {\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n !isEmptyAddRowCell ? value : (column.header || column.field)\n }}</div>\n }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n @if (column.dataType === 'string' || column.dataType === 'image') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-input-group>\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultError>\n @let errors = formControl.errors;\n @if (errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n </div>\n }\n @if (errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n" }]
|
|
1448
|
+
IgxCurrencyFormatterPipe, IgxDateFormatterPipe], template: "<ng-template #defaultPinnedIndicator>\n @if (displayPinnedChip) {\n <igx-chip\n class=\"igx-grid__td--pinned-chip\"\n [disabled]=\"true\"\n [style.--ig-size]=\"1\"\n >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n }\n</ng-template>\n<ng-template #defaultCell>\n @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight\n class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === 'number'\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n \"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n formatter\n ? (value | columnFormatter:formatter:rowData:columnData)\n : column.dataType === \"number\"\n ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n : column.dataType === 'currency'\n ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n : column.dataType === 'percent'\n ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n : value\n }}</div>\n }\n @if (column.dataType === 'boolean' && !this.formatter) {\n <igx-icon\n family=\"default\"\n [name]=\"value ? 'confirm' : 'close'\"\n [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n </igx-icon>\n }\n @if (column.dataType === 'image') {\n <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n <div\n igxTextHighlight class=\"igx-grid__td-text\"\n [cssClass]=\"highlightClass\"\n [activeCssClass]=\"activeHighlightClass\"\n [groupName]=\"gridID\"\n [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n [row]=\"rowData\"\n [column]=\"this.column.field\"\n [containerClass]=\"'igx-grid__td-text'\"\n [metadata]=\"searchMetadata\"\n >{{\n !isEmptyAddRowCell\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>\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [formControl]=\"formControl\"\n (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n />\n </igx-input-group>\n </ng-container>\n }\n @if (column.dataType === 'number') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'boolean') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-checkbox\n [checked]=\"editValue\"\n [igxFocus]=\"true\"\n [disableRipple]=\"true\"\n [formControl]=\"formControl\"\n ></igx-checkbox>\n </ng-container>\n }\n @if (column.dataType === 'date') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-date-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [weekStart]=\"column.pipeArgs.weekStart\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n >\n </igx-date-picker>\n </ng-container>\n }\n @if (column.dataType === 'time') {\n <ng-container [formGroup]=\"formGroup\">\n <igx-time-picker\n [style.width.%]=\"100\"\n mode=\"dropdown\"\n [locale]=\"grid.locale\"\n [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n [displayFormat]=\"column.pipeArgs.format\"\n [(value)]=\"editValue\"\n [igxFocus]=\"true\"\n [formControl]=\"formControl\"\n ></igx-time-picker>\n </ng-container>\n }\n @if (column.dataType === 'dateTime') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n type=\"text\"\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [formControl]=\"formControl\"\n igxInput\n [locale]=\"grid.locale\"\n [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n [defaultFormatType]=\"column.dataType\"\n [displayFormat]=\"column.pipeArgs.format\"\n [igxFocus]=\"true\"\n />\n </igx-input-group>\n }\n @if (column.dataType === 'currency') {\n <igx-input-group [formGroup]=\"formGroup\">\n @if (grid.currencyPositionLeft) {\n <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n }\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n @if (!grid.currencyPositionLeft) {\n <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n }\n </igx-input-group>\n }\n @if (column.dataType === 'percent') {\n <igx-input-group [formGroup]=\"formGroup\">\n <input\n igxInput\n [attr.aria-describedby]=\"ariaDescribeBy\"\n [attr.aria-invalid]=\"isInvalid\"\n [igxFocus]=\"true\"\n [igxTextSelection]=\"true\"\n [step]=\"step\"\n type=\"number\"\n [formControl]=\"formControl\"\n />\n <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n </igx-input-group>\n }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n <igx-icon\n family=\"default\"\n name=\"error\"\n #errorIcon\n [igxTooltipTarget]=\"tooltipRef\"\n (mouseover)='errorShowing = true'\n (mouseout)='errorShowing = false'>\n </igx-icon>\n <div [id]=\"ariaErrorMessage\"\n igxTooltip #error #tooltipRef=\"tooltip\">\n <div [style.width]=\"'max-content'\">\n <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n </div>\n </div>\n}\n\n<ng-template #defaultError>\n @let errors = formControl.errors;\n @if (errors?.['required']) {\n <div>\n {{grid.resourceStrings.igx_grid_required_validation_error}}\n </div>\n }\n @if (errors?.['minlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n </div>\n }\n @if (errors?.['maxlength']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n </div>\n }\n @if (errors?.['min']) {\n <div>\n {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n </div>\n }\n @if (errors?.['max']) {\n <div>\n {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n </div>\n }\n @if (errors?.['email']) {\n <div>\n {{grid.resourceStrings.igx_grid_email_validation_error }}\n </div>\n }\n @if (errors?.['pattern']) {\n <div>\n {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n </div>\n }\n</ng-template>\n" }]
|
|
1449
1449
|
}] });
|
|
1450
1450
|
|
|
1451
1451
|
class IgxHierarchicalRowComponent extends IgxRowDirective {
|