igniteui-angular 22.2.0-rc.1 → 22.2.0

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

@@ -180,10 +180,10 @@ class IgxItemListDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxItemListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxItemListDirective, isStandalone: true, selector: "[igxItemList]", inputs: { type: ["igxItemList", "type"] }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "keydown.enter": "onKeydownEnter($event)", "keydown.escape": "onKeydownEscape($event)", "mouseover": "onHover()", "wheel": "onScroll($event)" }, properties: { "attr.tabindex": "this.tabindex", "class.igx-time-picker__column": "this.defaultCSS", "class.igx-time-picker__hourList": "this.hourCSS", "class.igx-time-picker__minuteList": "this.minuteCSS", "class.igx-time-picker__secondsList": "this.secondsCSS", "class.igx-time-picker__ampmList": "this.ampmCSS" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxItemListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxItemListDirective, isStandalone: true, selector: "[igxItemList]", inputs: { type: ["igxItemList", "type"] }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "keydown.enter": "onKeydownEnter($event)", "keydown.escape": "onKeydownEscape($event)", "mouseover": "onHover()", "wheel": "onScroll($event)" }, properties: { "attr.tabindex": "this.tabindex", "class.igx-time-picker__column": "this.defaultCSS", "class.igx-time-picker__hourList": "this.hourCSS", "class.igx-time-picker__minuteList": "this.minuteCSS", "class.igx-time-picker__secondsList": "this.secondsCSS", "class.igx-time-picker__ampmList": "this.ampmCSS" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxItemListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxItemListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxItemList]',
@@ -370,10 +370,10 @@ class IgxTimeItemDirective {
         }
         return hour;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimeItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTimeItemDirective, isStandalone: true, selector: "[igxTimeItem]", inputs: { value: ["igxTimeItem", "value"] }, host: { listeners: { "click": "onClick(value)" }, properties: { "class.igx-time-picker__item": "this.defaultCSS", "class.igx-time-picker__item--selected": "this.selectedCSS", "class.igx-time-picker__item--active": "this.activeCSS" } }, exportAs: ["timeItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimeItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxTimeItemDirective, isStandalone: true, selector: "[igxTimeItem]", inputs: { value: ["igxTimeItem", "value"] }, host: { listeners: { "click": "onClick(value)" }, properties: { "class.igx-time-picker__item": "this.defaultCSS", "class.igx-time-picker__item--selected": "this.selectedCSS", "class.igx-time-picker__item--active": "this.activeCSS" } }, exportAs: ["timeItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimeItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimeItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTimeItem]',
@@ -407,10 +407,10 @@ class TimeFormatPipe {
         const datePipe = new DatePipe(this.timePicker.locale);
         return datePipe.transform(value, format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TimeFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: TimeFormatPipe, isStandalone: true, name: "timeFormatPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TimeFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: TimeFormatPipe, isStandalone: true, name: "timeFormatPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TimeFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TimeFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeFormatPipe',
@@ -584,10 +584,10 @@ class TimeItemPipe {
         }
         return hour;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TimeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: TimeItemPipe, isStandalone: true, name: "timeItemPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TimeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: TimeItemPipe, isStandalone: true, name: "timeItemPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TimeItemPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: TimeItemPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeItemPipe',
@@ -1567,8 +1567,8 @@ class IgxTimePickerComponent extends PickerBaseDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxTimePickerComponent, isStandalone: true, selector: "igx-time-picker", inputs: { id: "id", displayFormat: "displayFormat", inputFormat: "inputFormat", mode: "mode", minValue: "minValue", maxValue: "maxValue", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], formatter: "formatter", readOnly: ["readOnly", "readOnly", booleanAttribute], value: "value", resourceStrings: "resourceStrings", okButtonLabel: "okButtonLabel", cancelButtonLabel: "cancelButtonLabel", itemsDelta: "itemsDelta" }, outputs: { selected: "selected", valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" }, classAttribute: "igx-time-picker" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxTimePickerComponent, isStandalone: true, selector: "igx-time-picker", inputs: { id: "id", displayFormat: "displayFormat", inputFormat: "inputFormat", mode: "mode", minValue: "minValue", maxValue: "maxValue", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], formatter: "formatter", readOnly: ["readOnly", "readOnly", booleanAttribute], value: "value", resourceStrings: "resourceStrings", okButtonLabel: "okButtonLabel", cancelButtonLabel: "cancelButtonLabel", itemsDelta: "itemsDelta" }, outputs: { selected: "selected", valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" }, classAttribute: "igx-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: IgxTimePickerComponent,
@@ -1585,7 +1585,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
             }
         ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "timePickerActionsDirective", first: true, predicate: IgxPickerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "hourList", first: true, predicate: ["hourList"], descendants: true }, { propertyName: "minuteList", first: true, predicate: ["minuteList"], descendants: true }, { propertyName: "secondsList", first: true, predicate: ["secondsList"], descendants: true }, { propertyName: "ampmList", first: true, predicate: ["ampmList"], descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\">\n    <input [igxReadOnlyInput]=\"readOnly\" [displayValuePipe]=\"formatter ? displayValue : undefined\" igxInput [igxDateTimeEditor]=\"inputFormat\"\n        type=\"text\" [readonly]=\"!isDropdown || readOnly\" [minValue]=\"minValue\" [maxValue]=\"maxValue\"\n        [locale]=\"locale\" [spinDelta]=\"itemsDelta\" [spinLoop]=\"spinLoop\" [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" [displayFormat]=\"displayFormat\" defaultFormatType=\"time\"\n        [igxTextSelection]=\"isDropdown && !readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!toggleDirective.collapsed\" [attr.aria-labelledby]=\"label?.id\"\n        (click)=\"!isDropdown && toggle()\"/>\n\n    @if (!toggleComponents.length) {\n        <igx-prefix (click)=\"toggle()\">\n            <igx-icon\n                [title]=\"\n                    value\n                        ? resourceStrings.igx_time_picker_change_time\n                        : resourceStrings.igx_time_picker_choose_time\n                \"\n                family=\"default\"\n                name=\"clock\"\n            ></igx-icon>\n        </igx-prefix>\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\n    @if (showClearButton) {\n        <igx-suffix (click)=\"clear(); $event.stopPropagation()\">\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n\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\n<ng-template #defaultTimePickerActions>\n    @if (cancelButtonLabel || okButtonLabel) {\n        <div class=\"igx-time-picker__buttons\">\n            @if (cancelButtonLabel) {\n                <button type=\"button\" igxButton=\"flat\" (click)=\"cancelButtonClick()\">\n                    {{cancelButtonLabel}}\n                </button>\n            }\n            @if (okButtonLabel) {\n                <button type=\"button\" igxButton=\"flat\" (click)=\"okButtonClick()\">\n                    {{okButtonLabel}}\n                </button>\n            }\n        </div>\n    }\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{\n        'igx-time-picker--dropdown': isDropdown,\n        'igx-time-picker--dialog': !isDropdown,\n        'igx-time-picker--vertical': isVertical && !isDropdown\n    }\">\n    <div class=\"igx-time-picker__main\">\n        @if (!this.isDropdown && !this.hideHeader) {\n            <div class=\"igx-time-picker__header\">\n                <h2 class=\"igx-time-picker__header-hour\" data-no-typography>\n                    <span>{{ selectedDate | timeFormatPipe }}</span>\n                </h2>\n            </div>\n        }\n        <div class=\"igx-time-picker__body\">\n            @if (showHoursList) {\n                <div #hourList [igxItemList]=\"'hourList'\">\n                    @for (hour of hourItems | timeItemPipe:'hour':selectedDate:minDropdownValue:maxDropdownValue; track hour+$index) {\n                        <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                            [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                            [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                            [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                            [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                        >{{ hour }}</span>\n                    }\n                </div>\n            }\n            @if (showMinutesList) {\n                <div #minuteList [igxItemList]=\"'minuteList'\">\n                    @for (minute of minuteItems | timeItemPipe:'minutes':selectedDate:minDropdownValue:maxDropdownValue; track minute+$index) {\n                        <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                            [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                            [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                            [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                            [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                        >{{ minute }}</span>\n                    }\n                </div>\n            }\n            @if (showSecondsList) {\n                <div #secondsList [igxItemList]=\"'secondsList'\">\n                    @for (seconds of secondsItems | timeItemPipe:'seconds':selectedDate:minDropdownValue:maxDropdownValue; track seconds+$index) {\n                        <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                            [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                            [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                            [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                            [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                        >{{ seconds }}</span>\n                    }\n                </div>\n            }\n            @if (showAmPmList) {\n                <div #ampmList [igxItemList]=\"'ampmList'\">\n                    @for (ampm of ampmItems | timeItemPipe:'ampm':selectedDate:minDropdownValue:maxDropdownValue; track ampm+$index) {\n                        <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                            [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                            [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                            [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                            [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                        >{{ ampm }}</span>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n    <igx-divider></igx-divider>\n    <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n    </ng-container>\n</div>\n", styles: ["@layer ig.base{.igx-time-picker{--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;flex-flow:column nowrap;min-width:-moz-fit-content;min-width:fit-content}.igx-time-picker igx-divider{--ig-divider-color: var(--divider-color)}.igx-time-picker__header{display:flex;flex-direction:column;background:var(--header-background);padding:1rem}.igx-time-picker__header-hour{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);display:flex;color:var(--header-hour-text-color);margin:0}[dir=rtl] .igx-time-picker__header-hour{flex-direction:row-reverse;justify-content:flex-end}.igx-time-picker__main{flex:1 1 auto}.igx-time-picker__column{width:4rem;padding:0;cursor:pointer;display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:center;color:var(--text-color);overflow:hidden;gap:.25rem}.igx-time-picker__column:focus,.igx-time-picker__column:active{outline:none}.igx-time-picker__item{width:2.875rem;padding:max(var(--is-large, 1)*max(.3125rem,-1 * .3125rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.3125rem,-1 * .3125rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.3125rem,-1 * .3125rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))) max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:var(--active-item-border-radius);height:var(--time-item-size);display:flex;justify-content:center;align-items:center;font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size),-1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight),-1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style),-1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height),-1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing),-1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform),-1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)))}.igx-time-picker__item:focus,.igx-time-picker__item:active{outline:none}.igx-time-picker__item:hover{color:var(--hover-text-color)}.igx-time-picker__item--selected{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;color:var(--selected-text-color)}.igx-time-picker__item--active{color:var(--active-item-foreground);background:var(--active-item-background)}.igx-time-picker__item--active:hover,.igx-time-picker__item--active:focus{color:var(--active-item-foreground)}.igx-time-picker__item--disabled{color:var(--disabled-text-color);background:var(--disabled-item-background);pointer-events:none}.igx-time-picker__hourList{text-align:end}[dir=rtl] .igx-time-picker__hourList{order:2}.igx-time-picker__minuteList{text-align:center}[dir=rtl] .igx-time-picker__minuteList{order:1}.igx-time-picker__secondsList{text-align:center}[dir=rtl] .igx-time-picker__ampmList{order:3}.igx-time-picker__body{display:flex;min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));padding-block:1rem;justify-content:center}.igx-time-picker__buttons{display:flex;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));justify-content:flex-end;align-items:center;padding:.5rem;gap:.5rem}.igx-time-picker--dropdown{min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));box-shadow:inset 0 0 0 .0625rem var(--border-color),var(--dropdown-elevation);background:var(--background-color);border-radius:var(--border-radius);overflow:hidden}.igx-time-picker--dropdown .igx-time-picker__body{min-width:auto}.igx-time-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--modal-elevation);background:var(--background-color);border-radius:var(--border-radius);overflow:hidden}.igx-time-picker--vertical .igx-time-picker__main{display:flex;flex-grow:1}.igx-time-picker--vertical .igx-time-picker__header{min-width:10.5rem}.igx-time-picker--vertical .igx-time-picker__body{flex-grow:1}.igx-time-picker--vertical .igx-time-picker__buttons{align-items:flex-end}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-time-picker__item--selected{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-time-picker__header{border-block-end:.0625rem solid var(--divider-color);gap:.125rem}.igx-time-picker__header-hour{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-time-picker__column{width:3.375rem}.igx-time-picker__item--selected{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)}.igx-time-picker__buttons{padding:.5rem 1rem}.igx-time-picker__buttons [igxbutton]{min-width:5.5rem}.igx-time-picker--vertical .igx-time-picker__header{min-width:8.5rem;border-inline-end:.0625rem solid var(--divider-color);border-block-end:none}}}@layer ig.material{@container style(--ig-theme: material){.igx-time-picker__header{padding:1rem 1.5rem}}}\n"], dependencies: [{ 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: 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: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxItemListDirective, selector: "[igxItemList]", inputs: ["igxItemList"] }, { kind: "directive", type: IgxTimeItemDirective, selector: "[igxTimeItem]", inputs: ["igxTimeItem"], exportAs: ["timeItem"] }, { 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: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: TimeFormatPipe, name: "timeFormatPipe" }, { kind: "pipe", type: TimeItemPipe, name: "timeItemPipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimePickerComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -1712,11 +1712,11 @@ const IGX_TIME_PICKER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTimePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxTimePickerModule, imports: [IgxTimePickerComponent, i2.IgxPickerActionsDirective, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxTimePickerComponent, i2.IgxPickerActionsDirective, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimePickerModule, imports: [IgxTimePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxTimePickerModule, imports: [IgxTimePickerComponent, i2.IgxPickerActionsDirective, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxTimePickerComponent, i2.IgxPickerActionsDirective, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimePickerModule, imports: [IgxTimePickerComponent, i2.IgxPickerToggleComponent, i2.IgxPickerClearComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-toast.mjs

@@ -156,10 +156,10 @@ class IgxToastComponent extends IgxNotificationsDirective {
             this.isVisibleChange.emit(closedEventArgs);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxToastComponent, isStandalone: true, selector: "igx-toast", inputs: { id: "id", role: "role", positionSettings: "positionSettings" }, outputs: { isVisibleChange: "isVisibleChange" }, host: { properties: { "class.igx-toast": "this.cssClass", "attr.id": "this.id", "attr.role": "this.role" } }, usesInheritance: true, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;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);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{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);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;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);margin:revert-layer}.igx-toast>*{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);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxToastComponent, isStandalone: true, selector: "igx-toast", inputs: { id: "id", role: "role", positionSettings: "positionSettings" }, outputs: { isVisibleChange: "isVisibleChange" }, host: { properties: { "class.igx-toast": "this.cssClass", "attr.id": "this.id", "attr.role": "this.role" } }, usesInheritance: true, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;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);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{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);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;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);margin:revert-layer}.igx-toast>*{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);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-toast', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: true, hostDirectives: [IgxNoTypographyDirective], template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;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);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{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);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;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);margin:revert-layer}.igx-toast>*{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);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"] }]
         }], propDecorators: { cssClass: [{
@@ -186,11 +186,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 IgxToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxToastModule, imports: [IgxToastComponent], exports: [IgxToastComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToastModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxToastModule, imports: [IgxToastComponent], exports: [IgxToastComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxToastModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-tree.mjs

@@ -81,10 +81,10 @@ class IgxTreeService {
     register(tree) {
         this.tree = tree;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeService, decorators: [{
             type: Injectable
         }] });
 
@@ -396,10 +396,10 @@ class IgxTreeSelectionService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeSelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeSelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -627,10 +627,10 @@ class IgxTreeNavigationService {
         const nodeIndex = this.visibleChildren.indexOf(node);
         return this.visibleChildren[nodeIndex + dir] || node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -704,10 +704,10 @@ class IgxTreeNodeLinkDirective {
     ngOnDestroy() {
         this.target.removeLinkChild(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNodeLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTreeNodeLinkDirective, isStandalone: true, selector: "[igxTreeNodeLink]", inputs: { parentNode: ["igxTreeNodeLink", "parentNode"] }, host: { listeners: { "blur": "handleBlur()", "focus": "handleFocus()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNodeLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxTreeNodeLinkDirective, isStandalone: true, selector: "[igxTreeNodeLink]", inputs: { parentNode: ["igxTreeNodeLink", "parentNode"] }, host: { listeners: { "blur": "handleBlur()", "focus": "handleFocus()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNodeLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNodeLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxTreeNodeLink]`,
@@ -1204,12 +1204,12 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
             this.registeredChildren.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxTreeNodeComponent, isStandalone: true, selector: "igx-tree-node", inputs: { data: "data", loading: ["loading", "loading", booleanAttribute], resourceStrings: "resourceStrings", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { properties: { "class.igx-tree-node--disabled": "this.disabled", "class.igx-tree-node": "this.cssClass", "attr.role": "this.role" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxTreeNodeComponent, isStandalone: true, selector: "igx-tree-node", inputs: { data: "data", loading: ["loading", "loading", booleanAttribute], resourceStrings: "resourceStrings", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { properties: { "class.igx-tree-node--disabled": "this.disabled", "class.igx-tree-node": "this.cssClass", "attr.role": "this.role" } }, providers: [
             { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
         ], queries: [{ propertyName: "linkChildren", predicate: IgxTreeNodeLinkDirective, read: ElementRef }, { propertyName: "_children", predicate: IGX_TREE_NODE_COMPONENT, read: IGX_TREE_NODE_COMPONENT }, { propertyName: "allChildren", predicate: IGX_TREE_NODE_COMPONENT, descendants: true, read: IGX_TREE_NODE_COMPONENT }], viewQueries: [{ propertyName: "header", first: true, predicate: ["ghostTemplate"], descendants: true, read: ElementRef }, { propertyName: "_defaultExpandIndicatorTemplate", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childrenContainer", first: true, predicate: ["childrenContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #noDragTemplate>\n    <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n</ng-template>\n\n<!-- Will switch templates depending on dragDrop -->\n<ng-template *ngTemplateOutlet=\"noDragTemplate\">\n</ng-template>\n\n@if (expanded && !loading) {\n    <div #childrenContainer\n        class=\"igx-tree-node__group\"\n        role=\"group\"\n    >\n        <ng-content select=\"igx-tree-node\"></ng-content>\n    </div>\n}\n\n\n<ng-template #defaultIndicator>\n    <igx-icon\n        [attr.aria-label]=\"expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand\"\n        [name]=\"!expanded ? 'tree_expand' : 'tree_collapse'\"\n        family=\"default\"\n    >\n    </igx-icon>\n</ng-template>\n\n<!-- separated in a template in case this ever needs to be templatable -->\n<ng-template #selectMarkerTemplate>\n    <igx-checkbox [checked]=\"selected\" [disabled]=\"disabled\" [readonly]=\"true\" [indeterminate]=\"indeterminate\" [tabindex]=\"-1\">\n    </igx-checkbox>\n</ng-template>\n\n<ng-template #headerTemplate>\n    <div #ghostTemplate class=\"igx-tree-node__wrapper\"\n        [attr.role]=\"role\"\n        [tabIndex]=\"tabIndex\"\n        [ngClass]=\"{\n            'igx-tree-node__wrapper--selected': selected,\n            'igx-tree-node__wrapper--active' : this.active,\n            'igx-tree-node__wrapper--focused' : this.focused,\n            'igx-tree-node__wrapper--disabled' : this.disabled\n        }\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"clearFocus()\"\n    >\n        <div aria-hidden=\"true\">\n            @for (item of [].constructor(level); track $index) {\n                <span\n                    aria-hidden=\"true\"\n                    class=\"igx-tree-node__spacer\"\n                ></span>\n            }\n        </div>\n\n        <!-- Expand/Collapse indicator -->\n        @if (!loading) {\n            <span\n                class=\"igx-tree-node__toggle-button\"\n                [ngClass]=\"{ 'igx-tree-node__toggle-button--hidden': !_children?.length }\"\n                (click)=\"indicatorClick()\"\n            >\n                <ng-container *ngTemplateOutlet=\"expandIndicatorTemplate, context: { $implicit: expanded }\">\n                </ng-container>\n            </span>\n        }\n        @if (loading) {\n            <span class=\"igx-tree-node__toggle-button\">\n                <igx-circular-bar\n                    [animate]=\"false\"\n                    [indeterminate]=\"true\"\n                    [textVisibility]=\"false\"\n                >\n                </igx-circular-bar>\n            </span>\n        }\n\n        <!-- Item selection -->\n        @if (showSelectors) {\n            <div\n                class=\"igx-tree-node__select\"\n                (pointerdown)=\"onSelectorPointerDown($event)\"\n                (click)=\"onSelectorClick($event)\">\n                <ng-container *ngTemplateOutlet=\"selectMarkerTemplate\">\n                </ng-container>\n            </div>\n        }\n\n        <div class=\"igx-tree-node__content\" data-no-typography>\n            <!-- Ghost content -->\n            <ng-content></ng-content>\n        </div>\n    </div>\n\n    <!--  Buffer element for 'move after' when D&D is implemented-->\n    <div class=\"igx-tree-node__drop-indicator\">\n        @for (item of [].constructor(level); track $index) {\n            <span aria-hidden=\"true\" class=\"igx-tree-node__spacer\"></span>\n        }\n        <!-- style rules target this div, do not delete it -->\n        <div></div>\n    </div>\n</ng-template>\n\n<ng-template #dragTemplate>\n    <!-- Drag drop goes here\n        igxDrop\n        #dropRef=\"drop\"\n        [igxNodeDrag]=\"this\"\n        (dragStart)=\"logDrop(dropRef)\"\n        (leave)=\"emitLeave()\"\n        (enter)=\"emitEnter()\" -->\n    <div class=\"igx-tree-node__drag-wrapper\">\n        <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n    </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tree-node{--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));--tree-size: var(--component-size);display:flex;flex-direction:column}.igx-tree-node__wrapper{display:flex;align-items:center;min-height:var(--size);padding-block:0;position:relative;background:var(--background);color:var(--foreground)}.igx-tree-node__wrapper:dir(rtl) igx-icon,[dir=rtl] .igx-tree-node__wrapper igx-icon{transform:scaleX(-1)}.igx-tree-node__wrapper:after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:#0000;z-index:0}.igx-tree-node__wrapper:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper:focus{outline-width:0}.igx-tree-node__wrapper igx-circular-bar{--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max( calc(1.5rem - 4px) , -1 * calc(1.5rem - 4px) ), var(--is-small, 1) * max( calc(1.5rem - 6px) , -1 * calc(1.5rem - 6px) )) !important}.igx-tree-node__wrapper--selected{background:var(--background-selected);color:var(--foreground-selected)}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active{background:var(--background-active);color:var(--foreground-active)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected{background:var(--background-active-selected);color:var(--foreground-active-selected)}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tree-node__wrapper--disabled{background:var(--background-disabled)!important;color:var(--foreground-disabled)!important;box-shadow:none!important;pointer-events:none}.igx-tree-node__wrapper--disabled:after{display:none}.igx-tree-node--disabled .igx-tree-node__toggle-button{color:var(--foreground-disabled)!important}.igx-tree-node__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;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);display:block;align-items:center;flex:1;z-index:1}.igx-tree-node__spacer{--component-size: var(--tree-size);--spacer: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));width:var(--spacer);display:inline-block}.igx-tree-node__toggle-button{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.5rem;z-index:1}.igx-tree-node__toggle-button--hidden{visibility:hidden}.igx-tree-node__drop-indicator{display:flex;visibility:hidden;position:absolute;inset-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));bottom:0}.igx-tree-node__drop-indicator>div{flex:1;height:.0625rem;background:var(--drop-area-color)}.igx-tree-node__select{display:flex;align-items:center;z-index:1}.igx-tree-node__group{overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__wrapper igx-checkbox{--composite-padding: 0}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 4.75rem),-1 * calc(100% - 4.75rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 3.75rem),-1 * calc(100% - 3.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline:.625rem .875rem}.igx-tree-node__toggle-button{margin-inline-end:.25rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tree-node{border-radius:.25rem}.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:.25rem;margin-block-end:.25rem}.igx-tree-node__wrapper:after{border-radius:.25rem}.igx-tree-node__wrapper igx-icon{--component-size: 2;color:var(--icon-color)}.igx-tree-node__wrapper:hover{color:var(--foreground-active)}.igx-tree-node__wrapper igx-circular-bar{--circular-bar: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max( calc(1rem - 4px) , -1 * calc(1rem - 4px) ), var(--is-small, 1) * max( calc(1rem - 6px) , -1 * calc(1rem - 6px) )) !important}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper--active:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active:hover:after{background:#0000}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:after{background:#0000}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .125rem var(--border-color)}.igx-tree-node__wrapper--disabled igx-icon{color:var(--foreground-disabled)!important}.igx-tree-node__spacer{--spacer: 1rem}.igx-tree-node__drop-indicator{inset-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));width:max(var(--is-large, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 2.75rem),-1 * calc(100% - 2.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 2.25rem),-1 * calc(100% - 2.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline-end:.5rem}.igx-tree-node__toggle-button igx-icon{--component-size: 1}.igx-tree-node__toggle-button{min-width:.875rem;margin-inline-end:.25rem}}}\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: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree-node', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
@@ -1271,10 +1271,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Used for templating the select marker of the tree
  */
 class IgxTreeSelectMarkerDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeSelectMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTreeSelectMarkerDirective, isStandalone: true, selector: "[igxTreeSelectMarker]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeSelectMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxTreeSelectMarkerDirective, isStandalone: true, selector: "[igxTreeSelectMarker]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeSelectMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeSelectMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTreeSelectMarker]',
@@ -1286,10 +1286,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Used for templating the expand indicator of the tree
  */
 class IgxTreeExpandIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTreeExpandIndicatorDirective, isStandalone: true, selector: "[igxTreeExpandIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxTreeExpandIndicatorDirective, isStandalone: true, selector: "[igxTreeExpandIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeExpandIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeExpandIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTreeExpandIndicator]',
@@ -1709,15 +1709,15 @@ class IgxTreeComponent {
                 this.nativeElement.scrollTop + bottomOffset + topOffset + (topOffset ? -1 : +1) * nodeRect.height;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxTreeComponent, isStandalone: true, selector: "igx-tree", inputs: { selection: "selection", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute], toggleNodeOnClick: ["toggleNodeOnClick", "toggleNodeOnClick", booleanAttribute], animationSettings: "animationSettings" }, outputs: { nodeSelection: "nodeSelection", nodeExpanding: "nodeExpanding", nodeExpanded: "nodeExpanded", nodeCollapsing: "nodeCollapsing", nodeCollapsed: "nodeCollapsed", activeNodeChanged: "activeNodeChanged" }, host: { properties: { "class.igx-tree": "this.cssClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.2.0", type: IgxTreeComponent, isStandalone: true, selector: "igx-tree", inputs: { selection: "selection", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute], toggleNodeOnClick: ["toggleNodeOnClick", "toggleNodeOnClick", booleanAttribute], animationSettings: "animationSettings" }, outputs: { nodeSelection: "nodeSelection", nodeExpanding: "nodeExpanding", nodeExpanded: "nodeExpanded", nodeCollapsing: "nodeCollapsing", nodeCollapsed: "nodeCollapsed", activeNodeChanged: "activeNodeChanged" }, host: { properties: { "class.igx-tree": "this.cssClass" } }, providers: [
             IgxTreeService,
             IgxTreeSelectionService,
             IgxTreeNavigationService,
             { provide: IGX_TREE_COMPONENT, useExisting: IgxTreeComponent },
         ], queries: [{ propertyName: "expandIndicator", first: true, predicate: IgxTreeExpandIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nodes", predicate: IgxTreeNodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-tree__root\" role=\"tree\" (keydown)=\"handleKeydown($event)\">\n    <ng-content select=\"igx-tree-node\"></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-tree{display:block;z-index:0;overflow-y:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree', encapsulation: ViewEncapsulation.None, providers: [
                         IgxTreeService,
@@ -1771,11 +1771,11 @@ const IGX_TREE_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeNodeComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [