igniteui-angular 22.2.0-rc.1 → 22.2.0-rc.2

package/fesm2022/igniteui-angular-date-picker.mjs

@@ -272,10 +272,10 @@ class PickerBaseDirective {
         this.updateResources();
     }
     updateResources() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PickerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: PickerBaseDirective, isStandalone: true, inputs: { inputFormat: "inputFormat", displayFormat: "displayFormat", placeholder: "placeholder", mode: "mode", headerOrientation: "headerOrientation", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], overlaySettings: "overlaySettings", disabled: ["disabled", "disabled", booleanAttribute], locale: "locale", weekStart: "weekStart", outlet: "outlet", type: "type", tabIndex: "tabIndex" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, queries: [{ propertyName: "toggleComponents", predicate: IgxPickerToggleComponent, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent, descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }, { propertyName: "contentHints", predicate: IgxHintDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: PickerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", type: PickerBaseDirective, isStandalone: true, inputs: { inputFormat: "inputFormat", displayFormat: "displayFormat", placeholder: "placeholder", mode: "mode", headerOrientation: "headerOrientation", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], overlaySettings: "overlaySettings", disabled: ["disabled", "disabled", booleanAttribute], locale: "locale", weekStart: "weekStart", outlet: "outlet", type: "type", tabIndex: "tabIndex" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, queries: [{ propertyName: "toggleComponents", predicate: IgxPickerToggleComponent, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent, descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }, { propertyName: "contentHints", predicate: IgxHintDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PickerBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: PickerBaseDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { inputFormat: [{
                 type: Input
@@ -374,10 +374,10 @@ class IgxPredefinedRangesAreaComponent {
             dateRange: range.get()
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPredefinedRangesAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxPredefinedRangesAreaComponent, isStandalone: true, selector: "igx-predefined-ranges-area", inputs: { usePredefinedRanges: "usePredefinedRanges", customRanges: "customRanges", resourceStrings: "resourceStrings" }, outputs: { rangeSelect: "rangeSelect" }, ngImport: i0, template: "<div class=\"igx-predefined-ranges\" role=\"group\" aria-label=\"Predefined ranges\">\n  @for (r of ranges; track r.label) {\n    <igx-chip (click)=\"onSelect(r.dateRange)\">\n      {{ r.label }}\n    </igx-chip>\n  }\n</div>\n", styles: [":host{display:block}.igx-predefined-ranges{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPredefinedRangesAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxPredefinedRangesAreaComponent, isStandalone: true, selector: "igx-predefined-ranges-area", inputs: { usePredefinedRanges: "usePredefinedRanges", customRanges: "customRanges", resourceStrings: "resourceStrings" }, outputs: { rangeSelect: "rangeSelect" }, ngImport: i0, template: "<div class=\"igx-predefined-ranges\" role=\"group\" aria-label=\"Predefined ranges\">\n  @for (r of ranges; track r.label) {\n    <igx-chip (click)=\"onSelect(r.dateRange)\">\n      {{ r.label }}\n    </igx-chip>\n  }\n</div>\n", styles: [":host{display:block}.igx-predefined-ranges{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxPredefinedRangesAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxPredefinedRangesAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-predefined-ranges-area', standalone: true, imports: [IgxChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igx-predefined-ranges\" role=\"group\" aria-label=\"Predefined ranges\">\n  @for (r of ranges; track r.label) {\n    <igx-chip (click)=\"onSelect(r.dateRange)\">\n      {{ r.label }}\n    </igx-chip>\n  }\n</div>\n", styles: [":host{display:block}.igx-predefined-ranges{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .75rem}\n"] }]
         }], propDecorators: { usePredefinedRanges: [{
@@ -421,10 +421,10 @@ class IgxCalendarContainerComponent {
     get isReadonly() {
         return this.mode === PickerInteractionMode.Dialog;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxCalendarContainerComponent, isStandalone: true, selector: "igx-calendar-container", outputs: { calendarClose: "calendarClose", calendarCancel: "calendarCancel", todaySelection: "todaySelection", rangeSelected: "rangeSelected" }, host: { listeners: { "keydown.alt.arrowup": "onEscape($event)" }, properties: { "class.igx-date-picker": "this.styleClass", "class.igx-date-picker--dropdown": "this.dropdownCSS", "class.igx-date-picker--dialog": "this.dialogCSS" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: IgxCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<ng-template #defaultPickerActions>\n    @if (closeButtonLabel || cancelButtonLabel || todayButtonLabel) {\n        <div class=\"igx-date-picker__buttons\">\n            @if (cancelButtonLabel) {\n            <button\n            #cancelButton type=\"button\"\n            [igxButton]=\"cancelButtonType\" igxRipple\n            (click)=\"calendarCancel.emit({ owner: this})\"\n            >\n                {{ cancelButtonLabel }}\n            </button>\n            }\n            @if (closeButtonLabel) {\n                <button\n                    #closeButton\n                    type=\"button\"\n                    [igxButton]=\"closeButtonType\"\n                    igxRipple\n                    (click)=\"calendarClose.emit({ owner: this})\"\n                >\n                    {{ closeButtonLabel }}\n                </button>\n            }\n            @if (todayButtonLabel) {\n                <button\n                    #todayButton\n                    type=\"button\"\n                    igxButton=\"flat\"\n                    igxRipple\n                    (click)=\"todaySelection.emit({ owner: this })\"\n                >\n                    {{ todayButtonLabel }}\n                </button>\n            }\n        </div>\n    }\n</ng-template>\n\n<igx-calendar></igx-calendar>\n @if( usePredefinedRanges || (customRanges?.length || 0) > 0 ){\n        <igx-predefined-ranges-area\n            [usePredefinedRanges]=\"usePredefinedRanges\"\n            [customRanges]=\"customRanges\"\n            [resourceStrings]=\"resourceStrings\"\n            (rangeSelect)=\"rangeSelected.emit($event)\">\n        </igx-predefined-ranges-area>\n    }\n@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) {\n    <igx-divider></igx-divider>\n}\n@if (pickerActions?.template || (closeButtonLabel || cancelButtonLabel || todayButtonLabel)) {\n    <div class=\"igx-date-picker__actions\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                pickerActions?.template || defaultPickerActions;\n                context: { $implicit: calendar }\n            \"\n        >\n        </ng-container>\n    </div>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxCalendarComponent, selector: "igx-calendar", inputs: ["id", "hasHeader", "vertical", "orientation", "headerOrientation", "monthsViewNumber", "showWeekNumbers"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxDividerComponent, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "component", type: IgxPredefinedRangesAreaComponent, selector: "igx-predefined-ranges-area", inputs: ["usePredefinedRanges", "customRanges", "resourceStrings"], outputs: ["rangeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxCalendarContainerComponent, isStandalone: true, selector: "igx-calendar-container", outputs: { calendarClose: "calendarClose", calendarCancel: "calendarCancel", todaySelection: "todaySelection", rangeSelected: "rangeSelected" }, host: { listeners: { "keydown.alt.arrowup": "onEscape($event)" }, properties: { "class.igx-date-picker": "this.styleClass", "class.igx-date-picker--dropdown": "this.dropdownCSS", "class.igx-date-picker--dialog": "this.dialogCSS" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: IgxCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<ng-template #defaultPickerActions>\n    @if (closeButtonLabel || cancelButtonLabel || todayButtonLabel) {\n        <div class=\"igx-date-picker__buttons\">\n            @if (cancelButtonLabel) {\n            <button\n            #cancelButton type=\"button\"\n            [igxButton]=\"cancelButtonType\" igxRipple\n            (click)=\"calendarCancel.emit({ owner: this})\"\n            >\n                {{ cancelButtonLabel }}\n            </button>\n            }\n            @if (closeButtonLabel) {\n                <button\n                    #closeButton\n                    type=\"button\"\n                    [igxButton]=\"closeButtonType\"\n                    igxRipple\n                    (click)=\"calendarClose.emit({ owner: this})\"\n                >\n                    {{ closeButtonLabel }}\n                </button>\n            }\n            @if (todayButtonLabel) {\n                <button\n                    #todayButton\n                    type=\"button\"\n                    igxButton=\"flat\"\n                    igxRipple\n                    (click)=\"todaySelection.emit({ owner: this })\"\n                >\n                    {{ todayButtonLabel }}\n                </button>\n            }\n        </div>\n    }\n</ng-template>\n\n<igx-calendar></igx-calendar>\n @if( usePredefinedRanges || (customRanges?.length || 0) > 0 ){\n        <igx-predefined-ranges-area\n            [usePredefinedRanges]=\"usePredefinedRanges\"\n            [customRanges]=\"customRanges\"\n            [resourceStrings]=\"resourceStrings\"\n            (rangeSelect)=\"rangeSelected.emit($event)\">\n        </igx-predefined-ranges-area>\n    }\n@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) {\n    <igx-divider></igx-divider>\n}\n@if (pickerActions?.template || (closeButtonLabel || cancelButtonLabel || todayButtonLabel)) {\n    <div class=\"igx-date-picker__actions\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                pickerActions?.template || defaultPickerActions;\n                context: { $implicit: calendar }\n            \"\n        >\n        </ng-container>\n    </div>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxCalendarComponent, selector: "igx-calendar", inputs: ["id", "hasHeader", "vertical", "orientation", "headerOrientation", "monthsViewNumber", "showWeekNumbers"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxDividerComponent, selector: "igx-divider", inputs: ["id", "role", "type", "middle", "vertical", "inset"] }, { kind: "component", type: IgxPredefinedRangesAreaComponent, selector: "igx-predefined-ranges-area", inputs: ["usePredefinedRanges", "customRanges", "resourceStrings"], outputs: ["rangeSelect"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-calendar-container', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         IgxButtonDirective,
@@ -1113,13 +1113,13 @@ class IgxDatePickerComponent extends PickerBaseDirective {
     updateResources() {
         this._resourceStrings = getCurrentResourceStrings(DatePickerResourceStringsEN, false, this._locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxDatePickerComponent, isStandalone: true, selector: "igx-date-picker", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], displayMonthsCount: "displayMonthsCount", orientation: "orientation", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", formatter: "formatter", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], spinDelta: "spinDelta", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: ["readOnly", "readOnly", booleanAttribute] }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" }, classAttribute: "igx-date-picker" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxDatePickerComponent, isStandalone: true, selector: "igx-date-picker", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], displayMonthsCount: "displayMonthsCount", orientation: "orientation", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", formatter: "formatter", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], spinDelta: "spinDelta", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: ["readOnly", "readOnly", booleanAttribute] }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" }, classAttribute: "igx-date-picker" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
             { provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
         ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { 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: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [type]=\"type\">\n    @if (!toggleComponents.length) {\n        <igx-prefix (click)=\"toggle()\">\n            <igx-icon\n                [title]=\"\n                    value\n                        ? pickerResourceStrings.igx_date_picker_change_date\n                        : pickerResourceStrings.igx_date_picker_choose_date\n                \"\n                family=\"default\"\n                name=\"today\"\n            >\n            </igx-icon>\n        </igx-prefix>\n    }\n\n    <input class=\"igx-date-picker__input-date\"\n        [igxReadOnlyInput]=\"readOnly\"\n        [displayValuePipe]=\"$any($any(formatter) ? displayValue : null)\" igxInput\n        [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n        [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n        [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n        [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n        [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n    @if (!clearComponents.length && value) {\n        <igx-suffix (click)=\"clear()\">\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\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", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
@@ -1262,10 +1262,10 @@ class DateRangePickerFormatPipe {
         }
         return formatted ? formatted : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateRangePickerFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: DateRangePickerFormatPipe, isStandalone: true, name: "dateRange" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: DateRangePickerFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: DateRangePickerFormatPipe, isStandalone: true, name: "dateRange" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DateRangePickerFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: DateRangePickerFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dateRange',
@@ -1298,10 +1298,10 @@ class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
     updateInputValidity(state) {
         this.inputDirective.valid = state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeInputsBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxDateRangeInputsBaseComponent, isStandalone: true, selector: "igx-date-range-base", providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeInputsBaseComponent }], queries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeInputsBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxDateRangeInputsBaseComponent, isStandalone: true, selector: "igx-date-range-base", providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeInputsBaseComponent }], queries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeInputsBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeInputsBaseComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -1345,13 +1345,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * ```
  */
 class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeStartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxDateRangeStartComponent, isStandalone: true, selector: "igx-date-range-start", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeStartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxDateRangeStartComponent, isStandalone: true, selector: "igx-date-range-start", providers: [
             { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
             { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
         ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload\">\n            <button\n                    igxButton\n                    type=\"button\"\n                    class=\"igx-input-group__upload-button\"\n                    [disabled]=\"disabled\"\n                    tabindex=\"-1\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #bundle>\n    @if (!isTypeBorder) {\n        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n    }\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n        </div>\n\n        @if (isFileType) {\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        }\n\n        @if (isTypeBorder) {\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        }\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-content select=\"[igxInput]\"></ng-content>\n\n            @if (isFileType) {\n                <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n            }\n        </div>\n\n        @if (isTypeBorder) {\n            <div class=\"igx-input-group__filler\"></div>\n        }\n\n        <div class=\"igx-input-group__bundle-end\">\n            @if (isFileType && isFilled) {\n                <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n\n            }\n            <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n        </div>\n    </div>\n\n\n    @if (hasHints) {\n        <div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n            <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeStartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeStartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-start', providers: [
                         { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
@@ -1383,13 +1383,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * ```
  */
 class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeEndComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxDateRangeEndComponent, isStandalone: true, selector: "igx-date-range-end", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeEndComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxDateRangeEndComponent, isStandalone: true, selector: "igx-date-range-end", providers: [
             { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
             { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
         ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload\">\n            <button\n                    igxButton\n                    type=\"button\"\n                    class=\"igx-input-group__upload-button\"\n                    [disabled]=\"disabled\"\n                    tabindex=\"-1\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #bundle>\n    @if (!isTypeBorder) {\n        <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n    }\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n        </div>\n\n        @if (isFileType) {\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        }\n\n        @if (isTypeBorder) {\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        }\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-content select=\"[igxInput]\"></ng-content>\n\n            @if (isFileType) {\n                <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n            }\n        </div>\n\n        @if (isTypeBorder) {\n            <div class=\"igx-input-group__filler\"></div>\n        }\n\n        <div class=\"igx-input-group__bundle-end\">\n            @if (isFileType && isFilled) {\n                <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n\n            }\n            <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n        </div>\n    </div>\n\n\n    @if (hasHints) {\n        <div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n            <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeEndComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeEndComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-end', providers: [
                         { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
@@ -1424,10 +1424,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * ```
  */
 class IgxDateRangeSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDateRangeSeparatorDirective, isStandalone: true, selector: "[igxDateRangeSeparator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxDateRangeSeparatorDirective, isStandalone: true, selector: "[igxDateRangeSeparator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangeSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangeSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDateRangeSeparator]',
@@ -2521,13 +2521,13 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
             this._calendar.viewDate = value ?? this.activeDate;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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", 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: "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: ["container"], 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\n<ng-container #container></ng-container>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n", "@layer ig.base{.igx-date-range-picker{--_range-column-gap: .25rem;--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);display:grid;position:relative;align-items:start;row-gap:.25rem;-moz-column-gap:var(--_range-column-gap);column-gap:var(--_range-column-gap)}.igx-date-range-picker>igx-icon{cursor:pointer}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)){grid-template-columns:auto 1fr auto auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-end .igx-input-group__bundle{grid-column:4/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label){grid-template-columns:auto 1fr auto 2ch auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__label{grid-column:2/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__hint{grid-column:1/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__bundle{grid-column:5/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__label,.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:6/7!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:5/span 2!important}.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:2}.igx-date-range-picker .igx-input-group__label:only-child,.igx-date-range-picker .igx-input-group__hint:only-child{grid-column:1/-1}.igx-date-range-picker igx-date-range-start,.igx-date-range-picker igx-date-range-end{display:contents}.igx-date-range-picker__label{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:flex;align-items:center;justify-content:center;height:100%;color:var(--label-color);pointer-events:none;grid-column:4/5;grid-row:1}.igx-date-range-picker-buttons{display:flex;justify-content:flex-end;padding:0 1rem 1rem}.igx-date-range-picker-buttons>*{margin-inline-end:.5rem}.igx-date-range-picker-buttons>*:last-of-type{margin-inline-end:0}.igx-date-range-picker-buttons:empty{display:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-range-picker__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.material{@container style(--ig-theme: material){.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:1}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 1;--_hint-row: 2}}}\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: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-picker', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
@@ -2652,11 +2652,11 @@ const IGX_DATE_RANGE_PICKER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDatePickerModule, imports: [IgxDatePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i2.IgxPickerActionsDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective], exports: [IgxDatePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i2.IgxPickerActionsDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDatePickerModule, imports: [IgxDatePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerModule, imports: [IgxDatePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i2.IgxPickerActionsDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective], exports: [IgxDatePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i2.IgxPickerActionsDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerModule, imports: [IgxDatePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2674,11 +2674,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDateRangePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangePickerModule, imports: [IgxDateRangePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxDateRangeSeparatorDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective], exports: [IgxDateRangePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxDateRangeSeparatorDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangePickerModule, imports: [IgxDateRangePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangePickerModule, imports: [IgxDateRangePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxDateRangeSeparatorDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective], exports: [IgxDateRangePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent, IgxDateRangeSeparatorDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective, i4.IgxCalendarHeaderTemplateDirective, i4.IgxCalendarSubheaderTemplateDirective, i4.IgxCalendarHeaderTitleTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangePickerModule, imports: [IgxDateRangePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateRangePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDateRangePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-dialog.mjs

@@ -476,10 +476,10 @@ class IgxDialogComponent {
     emitOpenedFromDialog(eventArgs) {
         this.opened.emit({ dialog: this, event: eventArgs.event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxDialogComponent, isStandalone: true, selector: "igx-dialog", inputs: { id: "id", isModal: ["isModal", "isModal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], title: "title", message: "message", leftButtonLabel: "leftButtonLabel", leftButtonType: "leftButtonType", leftButtonRipple: "leftButtonRipple", rightButtonLabel: "rightButtonLabel", rightButtonType: "rightButtonType", rightButtonRipple: "rightButtonRipple", closeOnOutsideSelect: ["closeOnOutsideSelect", "closeOnOutsideSelect", booleanAttribute], positionSettings: "positionSettings", isOpen: ["isOpen", "isOpen", booleanAttribute], role: "role", titleId: "titleId" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", leftButtonSelect: "leftButtonSelect", rightButtonSelect: "rightButtonSelect", isOpenChange: "isOpenChange" }, host: { properties: { "attr.id": "this.id", "attr.tabindex": "this.tabindex", "class.igx-dialog--hidden": "this.isCollapsed" } }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n    tabindex=\"0\"\n    #dialog\n    class=\"igx-dialog\"\n    igxToggle\n    [igxFocusTrap]=\"focusTrap\"\n    (click)=\"onDialogSelected($event)\"\n>\n    <div\n        #dialogWindow\n        class=\"igx-dialog__window\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"titleId\"\n    >\n        @if (title) {\n            <div [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n                {{ title }}\n            </div>\n        }\n        @if (!title) {\n            <ng-content select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n        }\n\n        <div class=\"igx-dialog__window-content\">\n            @if (message) {\n                <span class=\"igx-dialog__window-message\">\n                    {{ message }}\n                </span>\n            }\n            @if (!message) {\n                <ng-content></ng-content>\n            }\n        </div>\n\n        @if (leftButtonLabel || rightButtonLabel) {\n            <div class=\"igx-dialog__window-actions\">\n                @if (leftButtonLabel) {\n                    <button\n                        type=\"button\"\n                        [igxFocus]=\"isOpen\"\n                        [igxButton]=\"leftButtonType\"\n                        igxRipple=\"{{ leftButtonRipple }}\"\n                        (click)=\"onInternalLeftButtonSelect($event)\"\n                    >\n                        {{ leftButtonLabel }}\n                    </button>\n                }\n                @if (rightButtonLabel) {\n                    <button\n                        type=\"button\"\n                        [igxFocus]=\"isOpen\"\n                        [igxButton]=\"rightButtonType\"\n                        igxRipple=\"{{ rightButtonRipple }}\"\n                        (click)=\"onInternalRightButtonSelect($event)\"\n                        >\n                        {{ rightButtonLabel }}\n                    </button>\n                }\n            </div>\n        }\n        @if (!leftButtonLabel && !rightButtonLabel) {\n            <ng-content select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n        }\n    </div>\n</div>\n", styles: ["@layer ig.base{.igx-dialog{outline-style:none}.igx-dialog__window{position:relative;min-width:var(--min-width);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);background:var(--background);box-shadow:var(--elevation);overflow:hidden}.igx-dialog__window .igx-calendar{min-width:20rem}.igx-dialog__window .igx-calendar--vertical{min-width:31rem}.igx-dialog__window-title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0;display:flex;color:var(--title-color);padding:var(--title-padding)}.igx-dialog__window-content{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0;color:var(--message-color);padding:var(--message-padding);position:relative;z-index:0}.igx-dialog__window-message{display:inline-block;max-width:40ch}.igx-dialog__window-actions{display:flex;flex-flow:row nowrap;justify-content:flex-end;padding:var(--actions-padding);gap:.5rem}.igx-dialog--hidden{display:none}}@layer ig.material{@container style(--ig-theme: material){.igx-dialog{--min-width: 17.5rem;--title-padding: 1rem 1.5rem 0rem 1.5rem;--message-padding: .875rem 1.5rem;--actions-padding: 0 .5rem .5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-dialog{--min-width: 18rem;--title-padding: 1rem;--message-padding: 1rem;--actions-padding: 1rem}.igx-dialog__window-title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0;border-bottom:.0625rem solid var(--border-color)}.igx-dialog__window-actions{border-top:.0625rem solid var(--border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-dialog{--min-width: 18rem;--title-padding: 1rem 1.5rem 1.5rem 1.5rem;--message-padding: 0 1.5rem 1.25rem 1.5rem;--actions-padding: 0 1.5rem 1.5rem 1.5rem}.igx-dialog__window-content{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-dialog{--title-padding: 1.5rem 1.5rem 0 1.5rem;--message-padding: 1rem 1.5rem;--actions-padding: 1rem 1.5rem 1.5rem 1.5rem}.igx-dialog__window-title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-dialog__window-actions{gap:1rem}}}\n"], dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxFocusTrapDirective, selector: "[igxFocusTrap]", inputs: ["igxFocusTrap"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxDialogComponent, isStandalone: true, selector: "igx-dialog", inputs: { id: "id", isModal: ["isModal", "isModal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], title: "title", message: "message", leftButtonLabel: "leftButtonLabel", leftButtonType: "leftButtonType", leftButtonRipple: "leftButtonRipple", rightButtonLabel: "rightButtonLabel", rightButtonType: "rightButtonType", rightButtonRipple: "rightButtonRipple", closeOnOutsideSelect: ["closeOnOutsideSelect", "closeOnOutsideSelect", booleanAttribute], positionSettings: "positionSettings", isOpen: ["isOpen", "isOpen", booleanAttribute], role: "role", titleId: "titleId" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", leftButtonSelect: "leftButtonSelect", rightButtonSelect: "rightButtonSelect", isOpenChange: "isOpenChange" }, host: { properties: { "attr.id": "this.id", "attr.tabindex": "this.tabindex", "class.igx-dialog--hidden": "this.isCollapsed" } }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n    tabindex=\"0\"\n    #dialog\n    class=\"igx-dialog\"\n    igxToggle\n    [igxFocusTrap]=\"focusTrap\"\n    (click)=\"onDialogSelected($event)\"\n>\n    <div\n        #dialogWindow\n        class=\"igx-dialog__window\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"titleId\"\n    >\n        @if (title) {\n            <div [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n                {{ title }}\n            </div>\n        }\n        @if (!title) {\n            <ng-content select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n        }\n\n        <div class=\"igx-dialog__window-content\">\n            @if (message) {\n                <span class=\"igx-dialog__window-message\">\n                    {{ message }}\n                </span>\n            }\n            @if (!message) {\n                <ng-content></ng-content>\n            }\n        </div>\n\n        @if (leftButtonLabel || rightButtonLabel) {\n            <div class=\"igx-dialog__window-actions\">\n                @if (leftButtonLabel) {\n                    <button\n                        type=\"button\"\n                        [igxFocus]=\"isOpen\"\n                        [igxButton]=\"leftButtonType\"\n                        igxRipple=\"{{ leftButtonRipple }}\"\n                        (click)=\"onInternalLeftButtonSelect($event)\"\n                    >\n                        {{ leftButtonLabel }}\n                    </button>\n                }\n                @if (rightButtonLabel) {\n                    <button\n                        type=\"button\"\n                        [igxFocus]=\"isOpen\"\n                        [igxButton]=\"rightButtonType\"\n                        igxRipple=\"{{ rightButtonRipple }}\"\n                        (click)=\"onInternalRightButtonSelect($event)\"\n                        >\n                        {{ rightButtonLabel }}\n                    </button>\n                }\n            </div>\n        }\n        @if (!leftButtonLabel && !rightButtonLabel) {\n            <ng-content select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n        }\n    </div>\n</div>\n", styles: ["@layer ig.base{.igx-dialog{outline-style:none}.igx-dialog__window{position:relative;min-width:var(--min-width);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);background:var(--background);box-shadow:var(--elevation);overflow:hidden}.igx-dialog__window .igx-calendar{min-width:20rem}.igx-dialog__window .igx-calendar--vertical{min-width:31rem}.igx-dialog__window-title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0;display:flex;color:var(--title-color);padding:var(--title-padding)}.igx-dialog__window-content{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0;color:var(--message-color);padding:var(--message-padding);position:relative;z-index:0}.igx-dialog__window-message{display:inline-block;max-width:40ch}.igx-dialog__window-actions{display:flex;flex-flow:row nowrap;justify-content:flex-end;padding:var(--actions-padding);gap:.5rem}.igx-dialog--hidden{display:none}}@layer ig.material{@container style(--ig-theme: material){.igx-dialog{--min-width: 17.5rem;--title-padding: 1rem 1.5rem 0rem 1.5rem;--message-padding: .875rem 1.5rem;--actions-padding: 0 .5rem .5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-dialog{--min-width: 18rem;--title-padding: 1rem;--message-padding: 1rem;--actions-padding: 1rem}.igx-dialog__window-title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0;border-bottom:.0625rem solid var(--border-color)}.igx-dialog__window-actions{border-top:.0625rem solid var(--border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-dialog{--min-width: 18rem;--title-padding: 1rem 1.5rem 1.5rem 1.5rem;--message-padding: 0 1.5rem 1.25rem 1.5rem;--actions-padding: 0 1.5rem 1.5rem 1.5rem}.igx-dialog__window-content{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-dialog{--title-padding: 1.5rem 1.5rem 0 1.5rem;--message-padding: 1rem 1.5rem;--actions-padding: 1rem 1.5rem 1.5rem 1.5rem}.igx-dialog__window-title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-dialog__window-actions{gap:1rem}}}\n"], dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxFocusTrapDirective, selector: "[igxFocusTrap]", inputs: ["igxFocusTrap"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective], template: "<div\n    tabindex=\"0\"\n    #dialog\n    class=\"igx-dialog\"\n    igxToggle\n    [igxFocusTrap]=\"focusTrap\"\n    (click)=\"onDialogSelected($event)\"\n>\n    <div\n        #dialogWindow\n        class=\"igx-dialog__window\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"titleId\"\n    >\n        @if (title) {\n            <div [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n                {{ title }}\n            </div>\n        }\n        @if (!title) {\n            <ng-content select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n        }\n\n        <div class=\"igx-dialog__window-content\">\n            @if (message) {\n                <span class=\"igx-dialog__window-message\">\n                    {{ message }}\n                </span>\n            }\n            @if (!message) {\n                <ng-content></ng-content>\n            }\n        </div>\n\n        @if (leftButtonLabel || rightButtonLabel) {\n            <div class=\"igx-dialog__window-actions\">\n                @if (leftButtonLabel) {\n                    <button\n                        type=\"button\"\n                        [igxFocus]=\"isOpen\"\n                        [igxButton]=\"leftButtonType\"\n                        igxRipple=\"{{ leftButtonRipple }}\"\n                        (click)=\"onInternalLeftButtonSelect($event)\"\n                    >\n                        {{ leftButtonLabel }}\n                    </button>\n                }\n                @if (rightButtonLabel) {\n                    <button\n                        type=\"button\"\n                        [igxFocus]=\"isOpen\"\n                        [igxButton]=\"rightButtonType\"\n                        igxRipple=\"{{ rightButtonRipple }}\"\n                        (click)=\"onInternalRightButtonSelect($event)\"\n                        >\n                        {{ rightButtonLabel }}\n                    </button>\n                }\n            </div>\n        }\n        @if (!leftButtonLabel && !rightButtonLabel) {\n            <ng-content select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n        }\n    </div>\n</div>\n", styles: ["@layer ig.base{.igx-dialog{outline-style:none}.igx-dialog__window{position:relative;min-width:var(--min-width);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);background:var(--background);box-shadow:var(--elevation);overflow:hidden}.igx-dialog__window .igx-calendar{min-width:20rem}.igx-dialog__window .igx-calendar--vertical{min-width:31rem}.igx-dialog__window-title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0;display:flex;color:var(--title-color);padding:var(--title-padding)}.igx-dialog__window-content{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0;color:var(--message-color);padding:var(--message-padding);position:relative;z-index:0}.igx-dialog__window-message{display:inline-block;max-width:40ch}.igx-dialog__window-actions{display:flex;flex-flow:row nowrap;justify-content:flex-end;padding:var(--actions-padding);gap:.5rem}.igx-dialog--hidden{display:none}}@layer ig.material{@container style(--ig-theme: material){.igx-dialog{--min-width: 17.5rem;--title-padding: 1rem 1.5rem 0rem 1.5rem;--message-padding: .875rem 1.5rem;--actions-padding: 0 .5rem .5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-dialog{--min-width: 18rem;--title-padding: 1rem;--message-padding: 1rem;--actions-padding: 1rem}.igx-dialog__window-title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0;border-bottom:.0625rem solid var(--border-color)}.igx-dialog__window-actions{border-top:.0625rem solid var(--border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-dialog{--min-width: 18rem;--title-padding: 1rem 1.5rem 1.5rem 1.5rem;--message-padding: 0 1.5rem 1.25rem 1.5rem;--actions-padding: 0 1.5rem 1.5rem 1.5rem}.igx-dialog__window-content{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-dialog{--title-padding: 1.5rem 1.5rem 0 1.5rem;--message-padding: 1rem 1.5rem;--actions-padding: 1rem 1.5rem 1.5rem 1.5rem}.igx-dialog__window-title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-dialog__window-actions{gap:1rem}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toggleRef: [{
@@ -556,10 +556,10 @@ class IgxDialogTitleDirective {
     constructor() {
         this.defaultStyle = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDialogTitleDirective, isStandalone: true, selector: "[igxDialogTitle],igx-dialog-title", host: { properties: { "class.igx-dialog__window-title": "this.defaultStyle" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxDialogTitleDirective, isStandalone: true, selector: "[igxDialogTitle],igx-dialog-title", host: { properties: { "class.igx-dialog__window-title": "this.defaultStyle" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDialogTitle],igx-dialog-title',
@@ -577,10 +577,10 @@ class IgxDialogActionsDirective {
     constructor() {
         this.defaultClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDialogActionsDirective, isStandalone: true, selector: "[igxDialogActions],igx-dialog-actions", host: { properties: { "class.igx-dialog__window-actions": "this.defaultClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxDialogActionsDirective, isStandalone: true, selector: "[igxDialogActions],igx-dialog-actions", host: { properties: { "class.igx-dialog__window-actions": "this.defaultClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDialogActions],igx-dialog-actions',
@@ -603,11 +603,11 @@ const IGX_DIALOG_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogModule, imports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogModule, imports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [