igniteui-angular 20.1.9 → 20.1.10

package/fesm2022/igniteui-angular.mjs

@@ -26424,8 +26424,11 @@ class IgxCellCrudState {
         return args;
     }
     /** Clears cell editing state */
-    endCellEdit() {
+    endCellEdit(restoreFocus = false) {
         this.cell = null;
+        if (restoreFocus) {
+            this.grid.tbody.nativeElement.focus();
+        }
     }
     /** Returns whether the targeted cell is in edit mode */
     targetInEdit(rowIndex, columnIndex) {
@@ -44559,7 +44562,7 @@ class IgxGridCell {
             this.grid.crudService.enterEditMode(this);
         }
         else {
-            this.grid.crudService.endCellEdit();
+            this.grid.crudService.endCellEdit(true);
         }
         this.grid.notifyChanges();
     }
@@ -79743,11 +79746,11 @@ class IgxPivotRowComponent extends IgxRowDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxPivotRowComponent, isStandalone: true, selector: "igx-pivot-row", inputs: { selected: "selected", data: "data" }, host: { properties: { "attr.aria-selected": "this.selected" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n", dependencies: [{ kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }, { kind: "pipe", type: IgxPivotGridCellStyleClassesPipe, name: "igxPivotCellStyleClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxPivotRowComponent, isStandalone: true, selector: "igx-pivot-row", inputs: { selected: "selected", data: "data" }, host: { properties: { "attr.aria-selected": "this.selected" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field]\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n", dependencies: [{ kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }, { kind: "pipe", type: IgxPivotGridCellStyleClassesPipe, name: "igxPivotCellStyleClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe], template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe], template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field]\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -88437,7 +88440,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
             IgxRowIslandAPIService,
             IgxFilteringService,
             IgxGridSelectionService
-        ], queries: [{ propertyName: "toolbarDirectiveTemplate", first: true, predicate: IgxGridToolbarDirective, descendants: true, read: TemplateRef }, { propertyName: "paginatorDirectiveTemplate", first: true, predicate: IgxPaginatorDirective, descendants: true, read: TemplateRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxRowIslandComponent), read: IgxRowIslandComponent }, { propertyName: "childLayoutList", predicate: i0.forwardRef(() => IgxRowIslandComponent), read: IgxRowIslandComponent }, { propertyName: "childColumns", predicate: IgxColumnComponent, read: IgxColumnComponent }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `@if (platform.isElements) {
+        ], queries: [{ propertyName: "toolbarDirectiveTemplate", first: true, predicate: IgxGridToolbarDirective, read: TemplateRef }, { propertyName: "paginatorDirectiveTemplate", first: true, predicate: IgxPaginatorDirective, read: TemplateRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxRowIslandComponent), read: IgxRowIslandComponent }, { propertyName: "childLayoutList", predicate: i0.forwardRef(() => IgxRowIslandComponent), read: IgxRowIslandComponent }, { propertyName: "childColumns", predicate: IgxColumnComponent, read: IgxColumnComponent }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `@if (platform.isElements) {
         <ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
         <ng-content select="igx-row-island,igc-row-island"></ng-content>
     }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -88485,10 +88488,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 args: [IgxColumnComponent, { read: IgxColumnComponent, descendants: false }]
             }], toolbarDirectiveTemplate: [{
                 type: ContentChild,
-                args: [IgxGridToolbarDirective, { read: TemplateRef }]
+                args: [IgxGridToolbarDirective, { read: TemplateRef, descendants: false }]
             }], paginatorDirectiveTemplate: [{
                 type: ContentChild,
-                args: [IgxPaginatorDirective, { read: TemplateRef }]
+                args: [IgxPaginatorDirective, { read: TemplateRef, descendants: false }]
             }], toolbarTemplate: [{
                 type: Input
             }], paginatorTemplate: [{
@@ -97039,7 +97042,12 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     }
     /** @hidden @internal */
     get separatorClass() {
-        return 'igx-date-range-picker__label';
+        const classes = ['igx-date-range-picker__label'];
+        if (this.label)
+            classes.push('input-has-label');
+        if (this.hint)
+            classes.push('input-has-hint');
+        return classes.join(' ');
     }
     get toggleContainer() {
         return this._calendarContainer;
@@ -97395,7 +97403,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     }
     /** @hidden @internal */
     getEditElement() {
-        return this.inputDirective?.nativeElement;
+        return this.inputDirective.nativeElement;
     }
     setValidityState(inputDirective, isFocused) {
         if (this._ngControl && !this._ngControl.disabled && this.isTouchedOrDirty) {
@@ -97834,7 +97842,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxDateRangePickerComponent, isStandalone: true, selector: "igx-date-range-picker", inputs: { displayMonthsCount: "displayMonthsCount", orientation: "orientation", hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], formatter: "formatter", doneButtonText: "doneButtonText", cancelButtonText: "cancelButtonText", overlaySettings: "overlaySettings", displayFormat: "displayFormat", inputFormat: "inputFormat", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", specialDates: "specialDates", resourceStrings: "resourceStrings", placeholder: "placeholder", outlet: "outlet", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], usePredefinedRanges: "usePredefinedRanges", customRanges: "customRanges", activeDate: "activeDate", locale: "locale", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.igx-date-range-picker": "this.cssClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
             { provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true }
-        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #clearIcon>\n    <igx-icon family=\"default\" name=\"input_clear\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" [igxReadOnlyInput]=\"readOnly\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        @if (!toggleComponents.length) {\n            <igx-prefix (click)=\"toggle()\">\n                <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n            </igx-prefix>\n        }\n\n        @if (!clearComponents.length && value) {\n            <igx-suffix (click)=\"clear()\">\n                <ng-container *ngTemplateOutlet=\"clearIcon\"></ng-container>\n            </igx-suffix>\n        }\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] }); }
+        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "hint", first: true, predicate: IgxHintDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #clearIcon>\n    <igx-icon family=\"default\" name=\"input_clear\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" [igxReadOnlyInput]=\"readOnly\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        @if (!toggleComponents.length) {\n            <igx-prefix (click)=\"toggle()\">\n                <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n            </igx-prefix>\n        }\n\n        @if (!clearComponents.length && value) {\n            <igx-suffix (click)=\"clear()\">\n                <ng-container *ngTemplateOutlet=\"clearIcon\"></ng-container>\n            </igx-suffix>\n        }\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
             type: Component,
@@ -97922,6 +97930,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             }], label: [{
                 type: ContentChild,
                 args: [IgxLabelDirective]
+            }], hint: [{
+                type: ContentChild,
+                args: [IgxHintDirective]
             }], pickerActions: [{
                 type: ContentChild,
                 args: [IgxPickerActionsDirective]