igniteui-angular 22.1.4 → 22.2.0-rc.1

package/fesm2022/igniteui-angular-directives.mjs

@@ -1,139 +1,107 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, EventEmitter, afterNextRender, booleanAttribute, HostListener, HostBinding, Input, Output, Directive, Renderer2, ChangeDetectorRef, ViewChild, ViewEncapsulation, Component, DOCUMENT, ViewContainerRef, NgZone, RendererStyleFlags2, ContentChildren, Pipe, ChangeDetectionStrategy, PLATFORM_ID, Injectable, TemplateRef, IterableDiffers, EnvironmentInjector, createComponent, LOCALE_ID, forwardRef, NgModule } from '@angular/core';
-import { NgControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { signal, Directive, inject, ElementRef, EventEmitter, Injector, booleanAttribute, Output, Input, ChangeDetectorRef, HostListener, HostBinding, ViewChild, ViewEncapsulation, Component, DOCUMENT, ViewContainerRef, NgZone, Renderer2, RendererStyleFlags2, ContentChildren, Pipe, ChangeDetectionStrategy, PLATFORM_ID, Injectable, TemplateRef, IterableDiffers, EnvironmentInjector, createComponent, LOCALE_ID, forwardRef, NgModule } from '@angular/core';
+import { runAfterRenderOnce, NgControlAdapter, PlatformUtil, EDITOR_PROVIDER, resizeObservable, getResizeObserver, compareMaps, IgxOverlayService, IgxNavigationService, AbsoluteScrollStrategy, ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment, AutoPositionStrategy, first as first$1, DateTimeUtil, DatePart, I18N_FORMATTER, isDate } from 'igniteui-angular/core';
+import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { Subject, noop, fromEvent, interval, animationFrameScheduler } from 'rxjs';
 import { takeUntil, throttle, throttleTime, filter, first } from 'rxjs/operators';
-import { PlatformUtil, EDITOR_PROVIDER, resizeObservable, getResizeObserver, runAfterRenderOnce, compareMaps, IgxOverlayService, IgxNavigationService, AbsoluteScrollStrategy, ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment, AutoPositionStrategy, first as first$1, DateTimeUtil, DatePart, I18N_FORMATTER, isDate } from 'igniteui-angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT as DOCUMENT$1, isPlatformBrowser, CommonModule } from '@angular/common';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { useAnimation } from '@angular/animations';
 import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 
+/**
+ * The Focus Ring directive provides a way to style an element when it has keyboard focus.
+ * It listens for keyboard and pointer events to determine when to apply the focus ring styles.
+ * @hidden @internal
+ */
+class IgxFocusRingDirective {
+    constructor() {
+        this._hasKeyboardFocus = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_hasKeyboardFocus" }] : /* istanbul ignore next */ []));
+        /** Indicates whether the element has keyboard focus. */
+        this.hasKeyboardFocus = this._hasKeyboardFocus.asReadonly();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusRingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxFocusRingDirective, isStandalone: true, selector: "[igxFocusRing]", host: { listeners: { "keyup": "_hasKeyboardFocus.set(true)", "focusout": "_hasKeyboardFocus.set(false)", "pointerdown": "_hasKeyboardFocus.set(false)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusRingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igxFocusRing]',
+                    standalone: true,
+                    host: {
+                        '(keyup)': '_hasKeyboardFocus.set(true)',
+                        '(focusout)': '_hasKeyboardFocus.set(false)',
+                        '(pointerdown)': '_hasKeyboardFocus.set(false)',
+                    }
+                }]
+        }] });
+
 const IgxBaseButtonType = {
     Flat: 'flat',
     Contained: 'contained',
     Outlined: 'outlined'
 };
 class IgxButtonBaseDirective {
-    constructor() {
-        this.element = inject(ElementRef);
-        /** `--ready` modifier that enables transitions; overridden by icon-button. */
-        this.readyClass = 'igx-button--ready';
-        /**
-         * Emitted when the button is clicked.
-         */
-        this.buttonClick = new EventEmitter();
-        /**
-         * Sets/gets the `role` attribute.
-         *
-         * @example
-         * ```typescript
-         * this.button.role = 'navbutton';
-         * let buttonRole = this.button.role;
-         * ```
-         */
-        this.role = 'button';
-        /**
-         * Sets/gets whether the button component is on focus.
-         * Default value is `false`.
-         * ```typescript
-         * this.button.focus = true;
-         * ```
-         * ```typescript
-         * let isFocused =  this.button.focused;
-         * ```
-         */
-        this.focused = false;
-        /**
-          * Enables/disables the button.
-          *
-          * @example
-          * ```html
-          * <button igxButton="fab" disabled></button>
-          * ```
-          */
-        this.disabled = false;
-        // Enable transitions only after first render so buttons don't animate their
-        // resting styles on mount (#14759 / #16817). afterNextRender is browser-only.
-        afterNextRender(() => {
-            this.element.nativeElement.classList.add(this.readyClass);
-        });
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    onClick(ev) {
-        this.buttonClick.emit(ev);
-        this.focused = false;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    onBlur() {
-        this.focused = false;
-    }
     /**
-     * @hidden
-     * @internal
+     * Gets or sets whether the button is disabled.
+     *
+     * @example
+     * ```html
+     * <button type="button" igxButton="flat" [disabled]="isDisabled"></button>
+     * ```
      */
-    get disabledAttribute() {
-        return this.disabled || null;
+    set disabled(value) {
+        this._disabled.set(value);
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    updateOnKeyUp(event) {
-        if (event.key === "Tab") {
-            this.focused = true;
-        }
+    get disabled() {
+        return this._disabled();
     }
-    /**
-     * Returns the underlying DOM element.
-     */
+    /** Returns the underlying DOM element. */
     get nativeElement() {
-        return this.element.nativeElement;
+        return this._element.nativeElement;
+    }
+    constructor() {
+        this._element = inject(ElementRef);
+        this._hasKeyboardFocus = inject(IgxFocusRingDirective).hasKeyboardFocus;
+        /**
+         * Set after the first paint. Subclasses bind it to their `--ready` modifier,
+         * which gates the CSS transitions so a button doesn't animate its resting
+         * styles on mount (#14759 / #16817).
+         */
+        this._hasRendered = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_hasRendered" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        /** Emitted when the button is clicked. */
+        this.buttonClick = new EventEmitter();
+        // Browser-only, so SSR output never carries the transitions.
+        runAfterRenderOnce(inject(Injector), () => this._hasRendered.set(true));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxButtonBaseDirective, isStandalone: true, inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "click": "onClick($event)", "blur": "onBlur()", "keyup": "updateOnKeyUp($event)" }, properties: { "attr.role": "this.role", "class.igx-button--focused": "this.focused", "class.igx-button--disabled": "this.disabled", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxButtonBaseDirective, isStandalone: true, inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { attributes: { "role": "button" }, listeners: { "click": "buttonClick.emit($event)" }, properties: { "attr.disabled": "_disabled() || null", "class.igx-button--focused": "_hasKeyboardFocus()", "class.igx-button--disabled": "_disabled()" } }, hostDirectives: [{ directive: IgxFocusRingDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonBaseDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { buttonClick: [{
-                type: Output
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], focused: [{
-                type: HostBinding,
-                args: ['class.igx-button--focused']
-            }], disabled: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        'role': 'button',
+                        '[attr.disabled]': '_disabled() || null',
+                        '[class.igx-button--focused]': '_hasKeyboardFocus()',
+                        '[class.igx-button--disabled]': '_disabled()',
+                        '(click)': 'buttonClick.emit($event)',
+                    },
+                    hostDirectives: [IgxFocusRingDirective]
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.igx-button--disabled']
-            }], disabledAttribute: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], updateOnKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
+            }], buttonClick: [{
+                type: Output
             }] } });
 
-const IgxButtonType = {
-    ...IgxBaseButtonType,
-    FAB: 'fab'
-};
+const IgxButtonType = { ...IgxBaseButtonType, FAB: 'fab' };
 /**
  * The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button.
  *
@@ -154,10 +122,16 @@ const IgxButtonType = {
  * ```
  */
 class IgxButtonDirective extends IgxButtonBaseDirective {
-    emitSelected() {
-        this.buttonSelected.emit({
-            button: this
-        });
+    constructor() {
+        super(...arguments);
+        this._type = signal(IgxButtonType.Flat, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_type" }] : /* istanbul ignore next */ []));
+        this._label = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
+        this._selected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+        /** Emitted when the button is selected. */
+        this.buttonSelected = new EventEmitter();
     }
     /**
      * Gets or sets whether the button is selected.
@@ -169,31 +143,10 @@ class IgxButtonDirective extends IgxButtonBaseDirective {
      * ```
      */
     set selected(value) {
-        if (this._selected !== value) {
-            this._selected = value;
-            this._renderer.setAttribute(this.nativeElement, 'data-selected', value.toString());
-        }
+        this._selected.set(value);
     }
     get selected() {
-        return this._selected;
-    }
-    constructor() {
-        super();
-        this._renderer = inject(Renderer2);
-        /**
-         * Called when the button is selected.
-         */
-        this.buttonSelected = new EventEmitter();
-        /**
-         * @hidden
-         * @internal
-         */
-        this._cssClass = 'igx-button';
-        /**
-         * @hidden
-         * @internal
-         */
-        this._selected = false;
+        return this._selected();
     }
     /**
      * Sets the type of the button.
@@ -204,10 +157,7 @@ class IgxButtonDirective extends IgxButtonBaseDirective {
      * ```
      */
     set type(type) {
-        const t = type ? type : IgxButtonType.Flat;
-        if (this._type !== t) {
-            this._type = t;
-        }
+        this._type.set(type);
     }
     /**
      * Sets the `aria-label` attribute.
@@ -218,90 +168,39 @@ class IgxButtonDirective extends IgxButtonBaseDirective {
      * ```
      */
     set label(value) {
-        this._label = value || this._label;
-        this._renderer.setAttribute(this.nativeElement, 'aria-label', this._label);
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    get flat() {
-        return this._type === IgxButtonType.Flat;
+        this._label.set(value || null);
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    get contained() {
-        return this._type === IgxButtonType.Contained;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    get outlined() {
-        return this._type === IgxButtonType.Outlined;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    get fab() {
-        return this._type === IgxButtonType.FAB;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    select() {
-        this.selected = true;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    deselect() {
-        this.selected = false;
-        this.focused = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxButtonDirective, isStandalone: true, selector: "[igxButton]", inputs: { selected: ["selected", "selected", booleanAttribute], type: ["igxButton", "type"], label: ["igxLabel", "label"] }, outputs: { buttonSelected: "buttonSelected" }, host: { listeners: { "click": "emitSelected()" }, properties: { "class.igx-button": "this._cssClass", "class.igx-button--flat": "this.flat", "class.igx-button--contained": "this.contained", "class.igx-button--outlined": "this.outlined", "class.igx-button--fab": "this.fab" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxButtonDirective, isStandalone: true, selector: "[igxButton]", inputs: { selected: ["selected", "selected", booleanAttribute], type: ["igxButton", "type", (value) => value || IgxButtonType.Flat], label: ["igxLabel", "label"] }, outputs: { buttonSelected: "buttonSelected" }, host: { listeners: { "click": "buttonSelected.emit({ button: this })" }, properties: { "class.igx-button--flat": "_type() === \"flat\"", "class.igx-button--contained": "_type() === \"contained\"", "class.igx-button--outlined": "_type() === \"outlined\"", "class.igx-button--fab": "_type() === \"fab\"", "class.igx-button--ready": "_hasRendered()", "attr.aria-label": "_label()", "attr.data-selected": "_selected() ? \"true\" : \"false\"" }, classAttribute: "igx-button" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxButton]',
-                    standalone: true
+                    standalone: true,
+                    host: {
+                        'class': 'igx-button',
+                        '[class.igx-button--flat]': '_type() === "flat"',
+                        '[class.igx-button--contained]': '_type() === "contained"',
+                        '[class.igx-button--outlined]': '_type() === "outlined"',
+                        '[class.igx-button--fab]': '_type() === "fab"',
+                        '[class.igx-button--ready]': '_hasRendered()',
+                        '[attr.aria-label]': '_label()',
+                        '[attr.data-selected]': '_selected() ? "true" : "false"',
+                        '(click)': 'buttonSelected.emit({ button: this })',
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { buttonSelected: [{
+        }], propDecorators: { buttonSelected: [{
                 type: Output
-            }], _cssClass: [{
-                type: HostBinding,
-                args: ['class.igx-button']
-            }], emitSelected: [{
-                type: HostListener,
-                args: ['click']
             }], selected: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], type: [{
                 type: Input,
-                args: ['igxButton']
+                args: [{ alias: 'igxButton', transform: (value) => value || IgxButtonType.Flat }]
             }], label: [{
                 type: Input,
-                args: ['igxLabel']
-            }], flat: [{
-                type: HostBinding,
-                args: ['class.igx-button--flat']
-            }], contained: [{
-                type: HostBinding,
-                args: ['class.igx-button--contained']
-            }], outlined: [{
-                type: HostBinding,
-                args: ['class.igx-button--outlined']
-            }], fab: [{
-                type: HostBinding,
-                args: ['class.igx-button--fab']
+                args: [{ alias: 'igxLabel' }]
             }] } });
 
 const LabelPosition = {
@@ -333,6 +232,7 @@ class CheckboxBaseDirective {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.control = NgControlAdapter.from(this.ngControl, inject(Injector));
         /**
          * An event that is emitted after the checkbox state is changed.
          * Provides references to the checkbox and the `checked` property as event arguments.
@@ -486,13 +386,12 @@ class CheckboxBaseDirective {
      * @internal
      */
     ngAfterViewInit() {
-        if (this.ngControl) {
-            this.ngControl.statusChanges
+        if (this.control) {
+            this.control.statusChanges
                 .pipe(takeUntil(this.destroy$))
                 .subscribe(this.updateValidityState.bind(this));
-            if (this.ngControl.control.validator ||
-                this.ngControl.control.asyncValidator) {
-                this._required = this.ngControl.control.hasValidator(Validators.required);
+            if (this.control.hasValidators) {
+                this._required = this.control.required;
                 this.cdr.detectChanges();
             }
         }
@@ -589,12 +488,10 @@ class CheckboxBaseDirective {
      * @internal
      */
     updateValidityState() {
-        if (this.ngControl) {
-            if (!this.disabled &&
-                !this.readonly &&
-                (this.ngControl.control.touched || this.ngControl.control.dirty)) {
+        if (this.control) {
+            if (!this.disabled && !this.readonly && this.control.touchedOrDirty) {
                 // the control is not disabled and is touched or dirty
-                this.invalid = this.ngControl.invalid;
+                this.invalid = this.control.invalid;
             }
             else {
                 //  if the control is untouched, pristine, or disabled, its state is initial. This is when the user did not interact
@@ -624,10 +521,10 @@ class CheckboxBaseDirective {
             this.invalid = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CheckboxBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: CheckboxBaseDirective, isStandalone: true, inputs: { checked: ["checked", "checked", booleanAttribute], id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], required: ["required", "required", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["checkbox"], descendants: true, static: true }, { propertyName: "nativeLabel", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "placeholderLabel", first: true, predicate: ["placeholderLabel"], descendants: true, static: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CheckboxBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: CheckboxBaseDirective, isStandalone: true, inputs: { checked: ["checked", "checked", booleanAttribute], id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], required: ["required", "required", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["checkbox"], descendants: true, static: true }, { propertyName: "nativeLabel", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "placeholderLabel", first: true, predicate: ["placeholderLabel"], descendants: true, static: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CheckboxBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CheckboxBaseDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { change: [{
                 type: Output
@@ -770,10 +667,10 @@ class IgxDividerComponent {
     get isSolid() {
         return this.type === IgxDividerType.SOLID;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.1", type: IgxDividerComponent, isStandalone: true, selector: "igx-divider", inputs: { id: "id", role: "role", type: "type", middle: ["middle", "middle", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], inset: "inset" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-divider": "this.type", "class.igx-divider--dashed": "this.isDashed", "class.igx-divider--inset": "this.middle", "class.igx-divider--vertical": "this.vertical", "style.--inset": "this.inset" } }, ngImport: i0, template: '', isInline: true, styles: ["@layer ig.base{.igx-divider{--dash-interval: .625rem;--dash-angle: 90deg;--inset-center: calc(100% - (var(--inset) * 2));--line: .25rem;--thickness: .0625rem;position:relative;display:flex;justify-content:center;min-width:var(--thickness);min-height:var(--thickness);overflow:hidden}.igx-divider:after{content:\"\";position:absolute;height:100%;width:100%;background:var(--color);inset-inline-start:var(--inset)}.igx-divider--inset:after{min-width:var(--line);width:var(--inset-center)}.igx-divider--dashed:after{background:repeating-linear-gradient(var(--dash-angle),var(--color),var(--color) var(--dash-interval),transparent var(--dash-interval),transparent calc(var(--dash-interval) * 2))}.igx-divider--vertical{display:inline-flex;width:var(--thickness);max-inline-size:var(--thickness)}.igx-divider--vertical:after{inset-inline-start:unset;inset-block-start:var(--inset)}.igx-divider--dashed.igx-divider--vertical{--dash-angle: 0deg}.igx-divider--vertical.igx-divider--inset:after{min-height:var(--line);height:var(--inset-center)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-divider{--dash-interval: .1875rem}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxDividerComponent, isStandalone: true, selector: "igx-divider", inputs: { id: "id", role: "role", type: "type", middle: ["middle", "middle", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], inset: "inset" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-divider": "this.type", "class.igx-divider--dashed": "this.isDashed", "class.igx-divider--inset": "this.middle", "class.igx-divider--vertical": "this.vertical", "style.--inset": "this.inset" } }, ngImport: i0, template: '', isInline: true, styles: ["@layer ig.base{.igx-divider{--dash-interval: .625rem;--dash-angle: 90deg;--inset-center: calc(100% - (var(--inset) * 2));--line: .25rem;--thickness: .0625rem;position:relative;display:flex;justify-content:center;min-width:var(--thickness);min-height:var(--thickness);overflow:hidden}.igx-divider:after{content:\"\";position:absolute;height:100%;width:100%;background:var(--color);inset-inline-start:var(--inset)}.igx-divider--inset:after{min-width:var(--line);width:var(--inset-center)}.igx-divider--dashed:after{background:repeating-linear-gradient(var(--dash-angle),var(--color),var(--color) var(--dash-interval),transparent var(--dash-interval),transparent calc(var(--dash-interval) * 2))}.igx-divider--vertical{display:inline-flex;width:var(--thickness);max-inline-size:var(--thickness)}.igx-divider--vertical:after{inset-inline-start:unset;inset-block-start:var(--inset)}.igx-divider--dashed.igx-divider--vertical{--dash-angle: 0deg}.igx-divider--vertical.igx-divider--inset:after{min-height:var(--line);height:var(--inset-center)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-divider{--dash-interval: .1875rem}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-divider', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer ig.base{.igx-divider{--dash-interval: .625rem;--dash-angle: 90deg;--inset-center: calc(100% - (var(--inset) * 2));--line: .25rem;--thickness: .0625rem;position:relative;display:flex;justify-content:center;min-width:var(--thickness);min-height:var(--thickness);overflow:hidden}.igx-divider:after{content:\"\";position:absolute;height:100%;width:100%;background:var(--color);inset-inline-start:var(--inset)}.igx-divider--inset:after{min-width:var(--line);width:var(--inset-center)}.igx-divider--dashed:after{background:repeating-linear-gradient(var(--dash-angle),var(--color),var(--color) var(--dash-interval),transparent var(--dash-interval),transparent calc(var(--dash-interval) * 2))}.igx-divider--vertical{display:inline-flex;width:var(--thickness);max-inline-size:var(--thickness)}.igx-divider--vertical:after{inset-inline-start:unset;inset-block-start:var(--inset)}.igx-divider--dashed.igx-divider--vertical{--dash-angle: 0deg}.igx-divider--vertical.igx-divider--inset:after{min-height:var(--line);height:var(--inset-center)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-divider{--dash-interval: .1875rem}}}\n"] }]
         }], propDecorators: { id: [{
@@ -897,10 +794,10 @@ class IgxDragHandleDirective {
          */
         this.parentDragElement = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxDragHandleDirective, isStandalone: true, selector: "[igxDragHandle]", host: { properties: { "class.igx-drag__handle": "this.baseClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDragHandleDirective, isStandalone: true, selector: "[igxDragHandle]", host: { properties: { "class.igx-drag__handle": "this.baseClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDragHandle]',
@@ -915,10 +812,10 @@ class IgxDragIgnoreDirective {
         this.element = inject((ElementRef));
         this.baseClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragIgnoreDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxDragIgnoreDirective, isStandalone: true, selector: "[igxDragIgnore]", host: { properties: { "class.igx-drag__ignore": "this.baseClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragIgnoreDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDragIgnoreDirective, isStandalone: true, selector: "[igxDragIgnore]", host: { properties: { "class.igx-drag__ignore": "this.baseClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragIgnoreDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragIgnoreDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDragIgnore]',
@@ -2160,10 +2057,10 @@ class IgxDragDirective {
             this._containerScrollIntervalId = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxDragDirective, isStandalone: true, selector: "[igxDrag]", inputs: { data: ["igxDrag", "data"], dragTolerance: "dragTolerance", dragDirection: "dragDirection", dragChannel: "dragChannel", ghost: ["ghost", "ghost", booleanAttribute], ghostClass: "ghostClass", ghostClasses: "ghostClasses", ghostStyle: "ghostStyle", ghostTemplate: "ghostTemplate", ghostHost: "ghostHost", scrollContainer: "scrollContainer", ghostOffsetX: "ghostOffsetX", ghostOffsetY: "ghostOffsetY" }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", dragClick: "dragClick", ghostCreate: "ghostCreate", ghostDestroy: "ghostDestroy", transitioned: "transitioned" }, host: { properties: { "class.igx-drag": "this.baseClass", "class.igx-drag--select-disabled": "this.selectDisabled" } }, queries: [{ propertyName: "dragHandles", predicate: IgxDragHandleDirective, descendants: true }, { propertyName: "dragIgnoredElems", predicate: IgxDragIgnoreDirective, descendants: true }], exportAs: ["drag"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxDragDirective, isStandalone: true, selector: "[igxDrag]", inputs: { data: ["igxDrag", "data"], dragTolerance: "dragTolerance", dragDirection: "dragDirection", dragChannel: "dragChannel", ghost: ["ghost", "ghost", booleanAttribute], ghostClass: "ghostClass", ghostClasses: "ghostClasses", ghostStyle: "ghostStyle", ghostTemplate: "ghostTemplate", ghostHost: "ghostHost", scrollContainer: "scrollContainer", ghostOffsetX: "ghostOffsetX", ghostOffsetY: "ghostOffsetY" }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", dragClick: "dragClick", ghostCreate: "ghostCreate", ghostDestroy: "ghostDestroy", transitioned: "transitioned" }, host: { properties: { "class.igx-drag": "this.baseClass", "class.igx-drag--select-disabled": "this.selectDisabled" } }, queries: [{ propertyName: "dragHandles", predicate: IgxDragHandleDirective, descendants: true }, { propertyName: "dragIgnoredElems", predicate: IgxDragIgnoreDirective, descendants: true }], exportAs: ["drag"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'drag',
@@ -2543,10 +2440,10 @@ class IgxDropDirective {
         }
         return insertIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxDropDirective, isStandalone: true, selector: "[igxDrop]", inputs: { data: ["igxDrop", "data"], dropChannel: "dropChannel", dropStrategy: "dropStrategy" }, outputs: { enter: "enter", over: "over", leave: "leave", dropped: "dropped" }, host: { listeners: { "igxDrop": "onDragDrop($any($event))" }, properties: { "attr.droppable": "this.droppable", "class.dragOver": "this.dragover" } }, exportAs: ["drop"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDropDirective, isStandalone: true, selector: "[igxDrop]", inputs: { data: ["igxDrop", "data"], dropChannel: "dropChannel", dropStrategy: "dropStrategy" }, outputs: { enter: "enter", over: "over", leave: "leave", dropped: "dropped" }, host: { listeners: { "igxDrop": "onDragDrop($any($event))" }, properties: { "attr.droppable": "this.droppable", "class.dragOver": "this.dragover" } }, exportAs: ["drop"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDropDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'drop',
@@ -2668,10 +2565,10 @@ class IgxFilterDirective {
         const filtered = pipe.transform(this.filterOptions.items, this.filterOptions);
         this.filtered.emit({ filteredItems: filtered });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxFilterDirective, isStandalone: true, selector: "[igxFilter]", inputs: { filterOptions: ["igxFilter", "filterOptions"] }, outputs: { filtering: "filtering", filtered: "filtered" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxFilterDirective, isStandalone: true, selector: "[igxFilter]", inputs: { filterOptions: ["igxFilter", "filterOptions"] }, outputs: { filtering: "filtering", filtered: "filtered" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFilter]',
@@ -2726,10 +2623,10 @@ class IgxFilterPipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterPipe, isStandalone: true, name: "igxFilter", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterPipe, isStandalone: true, name: "igxFilter", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'igxFilter',
@@ -2807,10 +2704,10 @@ class IgxFocusDirective {
             requestAnimationFrame(() => this.nativeElement.focus({ preventScroll: true }));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxFocusDirective, isStandalone: true, selector: "[igxFocus]", inputs: { focused: ["igxFocus", "focused", booleanAttribute] }, exportAs: ["igxFocus"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxFocusDirective, isStandalone: true, selector: "[igxFocus]", inputs: { focused: ["igxFocus", "focused", booleanAttribute] }, exportAs: ["igxFocus"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'igxFocus',
@@ -2900,10 +2797,10 @@ class IgxFocusTrapDirective {
         }
         return activeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxFocusTrapDirective, isStandalone: true, selector: "[igxFocusTrap]", inputs: { focusTrap: ["igxFocusTrap", "focusTrap", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxFocusTrapDirective, isStandalone: true, selector: "[igxFocusTrap]", inputs: { focusTrap: ["igxFocusTrap", "focusTrap", booleanAttribute] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusTrapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusTrapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFocusTrap]',
@@ -3361,10 +3258,10 @@ class IgxScrollInertiaDirective {
     _scrollToY(dest) {
         this.IgxScrollInertiaScrollContainer.scrollTop = dest;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxScrollInertiaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxScrollInertiaDirective, isStandalone: true, selector: "[igxScrollInertia]", inputs: { IgxScrollInertiaDirection: "IgxScrollInertiaDirection", IgxScrollInertiaScrollContainer: "IgxScrollInertiaScrollContainer", wheelStep: "wheelStep", inertiaStep: "inertiaStep", smoothingStep: "smoothingStep", smoothingDuration: "smoothingDuration", swipeToleranceX: "swipeToleranceX", inertiaDeltaY: "inertiaDeltaY", inertiaDeltaX: "inertiaDeltaX", inertiaDuration: "inertiaDuration" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxScrollInertiaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxScrollInertiaDirective, isStandalone: true, selector: "[igxScrollInertia]", inputs: { IgxScrollInertiaDirection: "IgxScrollInertiaDirection", IgxScrollInertiaScrollContainer: "IgxScrollInertiaScrollContainer", wheelStep: "wheelStep", inertiaStep: "inertiaStep", smoothingStep: "smoothingStep", smoothingDuration: "smoothingDuration", swipeToleranceX: "swipeToleranceX", inertiaDeltaY: "inertiaDeltaY", inertiaDeltaX: "inertiaDeltaX", inertiaDuration: "inertiaDuration" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxScrollInertiaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxScrollInertiaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxScrollInertia]',
@@ -3399,8 +3296,8 @@ class DisplayContainerComponent {
         this.cssClass = 'igx-display-container';
         this.notVirtual = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DisplayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: DisplayContainerComponent, isStandalone: true, selector: "igx-display-container", host: { properties: { "class": "this.cssClass", "class.igx-display-container--inactive": "this.notVirtual" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["display_container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_scrollInertia", first: true, predicate: ["display_container"], descendants: true, read: IgxScrollInertiaDirective, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DisplayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: DisplayContainerComponent, isStandalone: true, selector: "igx-display-container", host: { properties: { "class": "this.cssClass", "class.igx-display-container--inactive": "this.notVirtual" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["display_container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_scrollInertia", first: true, predicate: ["display_container"], descendants: true, read: IgxScrollInertiaDirective, static: true }], ngImport: i0, template: `
         <ng-template
             #display_container
             igxScrollInertia
@@ -3409,7 +3306,7 @@ class DisplayContainerComponent {
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DisplayContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DisplayContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-display-container',
@@ -3542,10 +3439,10 @@ class VirtualHelperBaseDirective {
         this.updateScrollbarClass();
     }
     restoreScroll() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VirtualHelperBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: VirtualHelperBaseDirective, isStandalone: true, selector: "[igxVirtualHelperBase]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: VirtualHelperBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: VirtualHelperBaseDirective, isStandalone: true, selector: "[igxVirtualHelperBase]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VirtualHelperBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: VirtualHelperBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxVirtualHelperBase]',
@@ -3564,10 +3461,10 @@ class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     restoreScroll() {
         this.nativeElement.scrollLeft = this.scrollAmount;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: HVirtualHelperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: HVirtualHelperComponent, isStandalone: true, selector: "igx-horizontal-virtual-helper", inputs: { width: "width" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["horizontal_container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #horizontal_container class="igx-vhelper__placeholder-content" [style.width.px]="size"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: HVirtualHelperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: HVirtualHelperComponent, isStandalone: true, selector: "igx-horizontal-virtual-helper", inputs: { width: "width" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["horizontal_container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #horizontal_container class="igx-vhelper__placeholder-content" [style.width.px]="size"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: HVirtualHelperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: HVirtualHelperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-horizontal-virtual-helper',
@@ -3597,10 +3494,10 @@ class VirtualHelperComponent extends VirtualHelperBaseDirective {
     restoreScroll() {
         this.nativeElement.scrollTop = this.scrollAmount;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VirtualHelperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: VirtualHelperComponent, isStandalone: true, selector: "igx-virtual-helper", inputs: { itemsLength: "itemsLength" }, host: { properties: { "scrollTop": "this.scrollTop", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #container class="igx-vhelper__placeholder-content" [style.height.px]="size"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: VirtualHelperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: VirtualHelperComponent, isStandalone: true, selector: "igx-virtual-helper", inputs: { itemsLength: "itemsLength" }, host: { properties: { "scrollTop": "this.scrollTop", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #container class="igx-vhelper__placeholder-content" [style.height.px]="size"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VirtualHelperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: VirtualHelperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-virtual-helper',
@@ -3663,10 +3560,10 @@ class IgxForOfSyncService {
     chunkSize(dir) {
         return this._master.get(dir).state.chunkSize;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfSyncService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfSyncService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfSyncService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfSyncService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3682,10 +3579,10 @@ class IgxForOfScrollSyncService {
     getScrollMaster(dir) {
         return this._masterScroll.get(dir);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfScrollSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfScrollSyncService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfScrollSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfScrollSyncService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfScrollSyncService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfScrollSyncService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5060,13 +4957,13 @@ class IgxForOfDirective extends IgxForOfToken {
         return (parseFloat(styles['borderLeftWidth']) || 0) +
             (parseFloat(styles['borderRightWidth']) || 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxForOfDirective, isStandalone: true, selector: "[igxFor][igxForOf]", inputs: { igxForOf: "igxForOf", igxForSizePropName: "igxForSizePropName", igxForScrollOrientation: "igxForScrollOrientation", igxForScrollContainer: "igxForScrollContainer", igxForContainerSize: "igxForContainerSize", igxForInitialChunkSize: "igxForInitialChunkSize", igxForItemSize: "igxForItemSize", igxForTotalItemCount: "igxForTotalItemCount", igxForTrackBy: "igxForTrackBy" }, outputs: { chunkLoad: "chunkLoad", scrollbarVisibilityChanged: "scrollbarVisibilityChanged", chunkSizeChange: "chunkSizeChange", contentSizeChange: "contentSizeChange", dataChanged: "dataChanged", beforeViewDestroyed: "beforeViewDestroyed", chunkPreload: "chunkPreload" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxForOfDirective, isStandalone: true, selector: "[igxFor][igxForOf]", inputs: { igxForOf: "igxForOf", igxForSizePropName: "igxForSizePropName", igxForScrollOrientation: "igxForScrollOrientation", igxForScrollContainer: "igxForScrollContainer", igxForContainerSize: "igxForContainerSize", igxForInitialChunkSize: "igxForInitialChunkSize", igxForItemSize: "igxForItemSize", igxForTotalItemCount: "igxForTotalItemCount", igxForTrackBy: "igxForTrackBy" }, outputs: { chunkLoad: "chunkLoad", scrollbarVisibilityChanged: "scrollbarVisibilityChanged", chunkSizeChange: "chunkSizeChange", contentSizeChange: "contentSizeChange", dataChanged: "dataChanged", beforeViewDestroyed: "beforeViewDestroyed", chunkPreload: "chunkPreload" }, providers: [
             IgxForOfScrollSyncService,
             { provide: IgxForOfToken, useExisting: IgxForOfDirective }
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFor][igxForOf]',
@@ -5457,10 +5354,10 @@ class IgxGridForOfDirective extends IgxForOfDirective {
             return super._calcMaxChunkSize();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridForOfDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxGridForOfDirective, isStandalone: true, selector: "[igxGridFor][igxGridForOf]", inputs: { igxGridForOf: "igxGridForOf", igxGridForOfUniqueSizeCache: ["igxGridForOfUniqueSizeCache", "igxGridForOfUniqueSizeCache", booleanAttribute], igxGridForOfVariableSizes: ["igxGridForOfVariableSizes", "igxGridForOfVariableSizes", booleanAttribute] }, outputs: { dataChanging: "dataChanging" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridForOfDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxGridForOfDirective, isStandalone: true, selector: "[igxGridFor][igxGridForOf]", inputs: { igxGridForOf: "igxGridForOf", igxGridForOfUniqueSizeCache: ["igxGridForOfUniqueSizeCache", "igxGridForOfUniqueSizeCache", booleanAttribute], igxGridForOfVariableSizes: ["igxGridForOfVariableSizes", "igxGridForOfVariableSizes", booleanAttribute] }, outputs: { dataChanging: "dataChanging" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridForOfDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGridForOfDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridFor][igxGridForOf]',
@@ -5490,13 +5387,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  */
 class IgxIconButtonDirective extends IgxButtonBaseDirective {
     constructor() {
-        super();
-        this.readyClass = 'igx-icon-button--ready';
-        /**
-         * @hidden
-         * @internal
-         */
-        this._cssClass = 'igx-icon-button';
+        super(...arguments);
+        this._type = signal(IgxBaseButtonType.Contained, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_type" }] : /* istanbul ignore next */ []));
     }
     /**
      * Sets the type of the icon button.
@@ -5507,56 +5400,27 @@ class IgxIconButtonDirective extends IgxButtonBaseDirective {
      * ```
      */
     set type(type) {
-        const t = type ? type : IgxBaseButtonType.Contained;
-        if (this._type !== t) {
-            this._type = t;
-        }
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    get flat() {
-        return this._type === IgxBaseButtonType.Flat;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    get contained() {
-        return this._type === IgxBaseButtonType.Contained;
+        this._type.set(type);
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    get outlined() {
-        return this._type === IgxBaseButtonType.Outlined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxIconButtonDirective, isStandalone: true, selector: "[igxIconButton]", inputs: { type: ["igxIconButton", "type"] }, host: { properties: { "class.igx-icon-button": "this._cssClass", "class.igx-icon-button--flat": "this.flat", "class.igx-icon-button--contained": "this.contained", "class.igx-icon-button--outlined": "this.outlined" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxIconButtonDirective, isStandalone: true, selector: "[igxIconButton]", inputs: { type: ["igxIconButton", "type", (value) => value || IgxBaseButtonType.Contained] }, host: { properties: { "class.igx-icon-button--flat": "_type() === \"flat\"", "class.igx-icon-button--contained": "_type() === \"contained\"", "class.igx-icon-button--outlined": "_type() === \"outlined\"", "class.igx-icon-button--ready": "_hasRendered()" }, classAttribute: "igx-icon-button" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxIconButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxIconButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxIconButton]',
-                    standalone: true
+                    standalone: true,
+                    host: {
+                        'class': 'igx-icon-button',
+                        '[class.igx-icon-button--flat]': '_type() === "flat"',
+                        '[class.igx-icon-button--contained]': '_type() === "contained"',
+                        '[class.igx-icon-button--outlined]': '_type() === "outlined"',
+                        '[class.igx-icon-button--ready]': '_hasRendered()',
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { _cssClass: [{
-                type: HostBinding,
-                args: ['class.igx-icon-button']
-            }], type: [{
+        }], propDecorators: { type: [{
                 type: Input,
-                args: ['igxIconButton']
-            }], flat: [{
-                type: HostBinding,
-                args: ['class.igx-icon-button--flat']
-            }], contained: [{
-                type: HostBinding,
-                args: ['class.igx-icon-button--contained']
-            }], outlined: [{
-                type: HostBinding,
-                args: ['class.igx-icon-button--outlined']
+                args: [{ alias: 'igxIconButton', transform: (value) => value || IgxBaseButtonType.Contained }]
             }] } });
 
 class IgxLayoutDirective {
@@ -5682,10 +5546,10 @@ class IgxLayoutDirective {
         }
         return (this.dir === 'row') ? 'row' : 'column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxLayoutDirective, isStandalone: true, selector: "[igxLayout]", inputs: { dir: ["igxLayoutDir", "dir"], reverse: ["igxLayoutReverse", "reverse", booleanAttribute], wrap: ["igxLayoutWrap", "wrap"], justify: ["igxLayoutJustify", "justify"], itemAlign: ["igxLayoutItemAlign", "itemAlign"] }, host: { properties: { "style.display": "this.display", "style.flex-wrap": "this.flexwrap", "style.justify-content": "this.justifycontent", "style.align-items": "this.align", "style.flex-direction": "this.direction" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxLayoutDirective, isStandalone: true, selector: "[igxLayout]", inputs: { dir: ["igxLayoutDir", "dir"], reverse: ["igxLayoutReverse", "reverse", booleanAttribute], wrap: ["igxLayoutWrap", "wrap"], justify: ["igxLayoutJustify", "justify"], itemAlign: ["igxLayoutItemAlign", "itemAlign"] }, host: { properties: { "style.display": "this.display", "style.flex-wrap": "this.flexwrap", "style.justify-content": "this.justifycontent", "style.align-items": "this.align", "style.flex-direction": "this.direction" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxLayoutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxLayoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxLayout]',
@@ -5804,10 +5668,10 @@ class IgxFlexDirective {
     get itemorder() {
         return this.order || 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxFlexDirective, isStandalone: true, selector: "[igxFlex]", inputs: { grow: ["igxFlexGrow", "grow"], shrink: ["igxFlexShrink", "shrink"], flex: ["igxFlex", "flex"], order: ["igxFlexOrder", "order"], basis: ["igxFlexBasis", "basis"] }, host: { properties: { "style.flex": "this.style", "style.order": "this.itemorder" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxFlexDirective, isStandalone: true, selector: "[igxFlex]", inputs: { grow: ["igxFlexGrow", "grow"], shrink: ["igxFlexShrink", "shrink"], flex: ["igxFlex", "flex"], order: ["igxFlexOrder", "order"], basis: ["igxFlexBasis", "basis"] }, host: { properties: { "style.flex": "this.style", "style.order": "this.itemorder" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFlexDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFlexDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxFlex]',
@@ -5979,10 +5843,10 @@ class MaskParsingService {
             '６': '6', '７': '7', '８': '8', '９': '9', '０': '0'
         }[num]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MaskParsingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MaskParsingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MaskParsingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MaskParsingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MaskParsingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MaskParsingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6294,10 +6158,10 @@ class IgxMaskDirective {
             this.inputValue = '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxMaskDirective, isStandalone: true, selector: "[igxMask]", inputs: { mask: ["igxMask", "mask"], promptChar: "promptChar", includeLiterals: ["includeLiterals", "includeLiterals", booleanAttribute], displayValuePipe: "displayValuePipe", focusedValuePipe: "focusedValuePipe" }, outputs: { valueChanged: "valueChanged" }, host: { listeners: { "keydown": "onKeyDown($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "input": "onInputChanged($event)", "paste": "onPaste()", "focus": "onFocus()", "blur": "onBlur($event)", "dragenter": "onDragEnter()", "dragleave": "onDragLeave()", "drop": "onDrop($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMaskDirective, multi: true }], exportAs: ["igxMask"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxMaskDirective, isStandalone: true, selector: "[igxMask]", inputs: { mask: ["igxMask", "mask"], promptChar: "promptChar", includeLiterals: ["includeLiterals", "includeLiterals", booleanAttribute], displayValuePipe: "displayValuePipe", focusedValuePipe: "focusedValuePipe" }, outputs: { valueChanged: "valueChanged" }, host: { listeners: { "keydown": "onKeyDown($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "input": "onInputChanged($event)", "paste": "onPaste()", "focus": "onFocus()", "blur": "onBlur($event)", "dragenter": "onDragEnter()", "dragleave": "onDragLeave()", "drop": "onDrop($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMaskDirective, multi: true }], exportAs: ["igxMask"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxMaskDirective, multi: true }],
@@ -6480,10 +6344,10 @@ class IgxRippleDirective {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxRippleDirective, isStandalone: true, selector: "[igxRipple]", inputs: { rippleTarget: ["igxRippleTarget", "rippleTarget"], rippleColor: ["igxRipple", "rippleColor"], rippleDuration: ["igxRippleDuration", "rippleDuration"], centered: ["igxRippleCentered", "centered", booleanAttribute], rippleDisabled: ["igxRippleDisabled", "rippleDisabled", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxRippleDirective, isStandalone: true, selector: "[igxRipple]", inputs: { rippleTarget: ["igxRippleTarget", "rippleTarget"], rippleColor: ["igxRipple", "rippleColor"], rippleDuration: ["igxRippleDuration", "rippleDuration"], centered: ["igxRippleCentered", "centered", booleanAttribute], rippleDisabled: ["igxRippleDisabled", "rippleDisabled", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRippleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRipple]',
@@ -6537,10 +6401,10 @@ class IgxTextHighlightService {
     destroyGroup(groupName) {
         this.highlightGroupsMap.delete(groupName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6844,10 +6708,10 @@ class IgxTextHighlightDirective {
                 this._lastSearchInfo.exactMatch !== exactMatch ||
                 this._forceEvaluation);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTextHighlightDirective, isStandalone: true, selector: "[igxTextHighlight]", inputs: { cssClass: "cssClass", activeCssClass: "activeCssClass", containerClass: "containerClass", groupName: "groupName", value: "value", row: "row", column: "column", metadata: "metadata" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTextHighlightDirective, isStandalone: true, selector: "[igxTextHighlight]", inputs: { cssClass: "cssClass", activeCssClass: "activeCssClass", containerClass: "containerClass", groupName: "groupName", value: "value", row: "row", column: "column", metadata: "metadata" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTextHighlight]',
@@ -6954,10 +6818,10 @@ class IgxTextSelectionDirective {
             requestAnimationFrame(() => this.nativeElement.select());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxTextSelectionDirective, isStandalone: true, selector: "[igxTextSelection]", inputs: { selected: ["igxTextSelection", "selected", booleanAttribute] }, host: { listeners: { "focus": "onFocus()" } }, exportAs: ["igxTextSelection"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxTextSelectionDirective, isStandalone: true, selector: "[igxTextSelection]", inputs: { selected: ["igxTextSelection", "selected", booleanAttribute] }, host: { listeners: { "focus": "onFocus()" } }, exportAs: ["igxTextSelection"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'igxTextSelection',
@@ -7131,10 +6995,10 @@ class IgxTemplateOutletDirective {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTemplateOutletDirective, isStandalone: true, selector: "[igxTemplateOutlet]", inputs: { igxTemplateOutletContext: "igxTemplateOutletContext", igxTemplateOutlet: "igxTemplateOutlet" }, outputs: { viewCreated: "viewCreated", viewMoved: "viewMoved", cachedViewLoaded: "cachedViewLoaded", beforeViewDetach: "beforeViewDetach" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTemplateOutletDirective, isStandalone: true, selector: "[igxTemplateOutlet]", inputs: { igxTemplateOutletContext: "igxTemplateOutletContext", igxTemplateOutlet: "igxTemplateOutlet" }, outputs: { viewCreated: "viewCreated", viewMoved: "viewMoved", cachedViewLoaded: "cachedViewLoaded", beforeViewDetach: "beforeViewDetach" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTemplateOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTemplateOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTemplateOutlet]',
@@ -7477,10 +7341,10 @@ class IgxToggleDirective {
             subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxToggleDirective, isStandalone: true, selector: "[igxToggle]", inputs: { id: "id" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing", appended: "appended" }, host: { properties: { "class.igx-toggle--hidden": "hiddenClass", "attr.aria-hidden": "hiddenClass", "class.igx-toggle--hidden-webkit": "hiddenWebkitClass", "class.igx-toggle": "defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxToggleDirective, isStandalone: true, selector: "[igxToggle]", inputs: { id: "id" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing", appended: "appended" }, host: { properties: { "class.igx-toggle--hidden": "hiddenClass", "attr.aria-hidden": "hiddenClass", "class.igx-toggle--hidden-webkit": "hiddenWebkitClass", "class.igx-toggle": "defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'toggle',
@@ -7567,10 +7431,10 @@ class IgxToggleActionDirective {
         }
         return settings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxToggleActionDirective, isStandalone: true, selector: "[igxToggleAction]", inputs: { overlaySettings: "overlaySettings", outlet: ["igxToggleOutlet", "outlet"], target: ["igxToggleAction", "target"] }, host: { listeners: { "click": "onClick()" } }, exportAs: ["toggle-action"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxToggleActionDirective, isStandalone: true, selector: "[igxToggleAction]", inputs: { overlaySettings: "overlaySettings", outlet: ["igxToggleOutlet", "outlet"], target: ["igxToggleAction", "target"] }, host: { listeners: { "click": "onClick()" } }, exportAs: ["toggle-action"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleActionDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'toggle-action',
@@ -7602,10 +7466,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * losing to the (unlayered) global default.
  */
 class IgxNoTypographyDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxNoTypographyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxNoTypographyDirective, isStandalone: true, selector: "[igxNoTypography]", host: { attributes: { "data-no-typography": "" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNoTypographyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxNoTypographyDirective, isStandalone: true, selector: "[igxNoTypography]", host: { attributes: { "data-no-typography": "" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxNoTypographyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNoTypographyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxNoTypography]',
@@ -7763,10 +7627,10 @@ class IgxTooltipDirective extends IgxToggleDirective {
         this._arrowEl.remove();
         this._arrowEl = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTooltipDirective, isStandalone: true, selector: "[igxTooltip]", inputs: { context: "context", id: "id", role: "role" }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class.igx-tooltip--hidden": "this.hiddenClass", "class.igx-tooltip": "this.defaultClass", "attr.id": "this.id", "attr.role": "this.role" } }, exportAs: ["tooltip"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxTooltipDirective, isStandalone: true, selector: "[igxTooltip]", inputs: { context: "context", id: "id", role: "role" }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class.igx-tooltip--hidden": "this.hiddenClass", "class.igx-tooltip": "this.defaultClass", "attr.id": "this.id", "attr.role": "this.role" } }, exportAs: ["tooltip"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'tooltip',
@@ -7800,10 +7664,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }] } });
 
 class IgxTooltipComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxTooltipComponent, isStandalone: true, selector: "igx-tooltip", viewQueries: [{ propertyName: "tooltip", first: true, predicate: IgxTooltipDirective, descendants: true, static: true }], ngImport: i0, template: "<span data-default igxTooltip>{{content}}</span>\n", dependencies: [{ kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxTooltipComponent, isStandalone: true, selector: "igx-tooltip", viewQueries: [{ propertyName: "tooltip", first: true, predicate: IgxTooltipDirective, descendants: true, static: true }], ngImport: i0, template: "<span data-default igxTooltip>{{content}}</span>\n", dependencies: [{ kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tooltip', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxTooltipDirective], template: "<span data-default igxTooltip>{{content}}</span>\n" }]
         }], propDecorators: { tooltip: [{
@@ -7818,8 +7682,8 @@ class IgxTooltipCloseButtonComponent {
     handleClick() {
         this.clicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTooltipCloseButtonComponent, isStandalone: true, selector: "igx-tooltip-close-button", inputs: { customTemplate: "customTemplate" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxTooltipCloseButtonComponent, isStandalone: true, selector: "igx-tooltip-close-button", inputs: { customTemplate: "customTemplate" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "handleClick()" } }, ngImport: i0, template: `
         @if (customTemplate) {
           <ng-container *ngTemplateOutlet="customTemplate"></ng-container>
         } @else {
@@ -7827,7 +7691,7 @@ class IgxTooltipCloseButtonComponent {
         }
         `, isInline: true, dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipCloseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipCloseButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'igx-tooltip-close-button',
@@ -8726,10 +8590,10 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
             this._closeButtonRef = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipTargetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxTooltipTargetDirective, isStandalone: true, selector: "[igxTooltipTarget]", inputs: { showDelay: "showDelay", hideDelay: "hideDelay", hasArrow: "hasArrow", sticky: "sticky", closeTemplate: ["closeButtonTemplate", "closeTemplate"], positionSettings: "positionSettings", tooltipDisabled: ["tooltipDisabled", "tooltipDisabled", booleanAttribute], showTriggers: "showTriggers", hideTriggers: "hideTriggers", target: ["igxTooltipTarget", "target"], tooltip: "tooltip" }, outputs: { tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, exportAs: ["tooltipTarget"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipTargetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxTooltipTargetDirective, isStandalone: true, selector: "[igxTooltipTarget]", inputs: { showDelay: "showDelay", hideDelay: "hideDelay", hasArrow: "hasArrow", sticky: "sticky", closeTemplate: ["closeButtonTemplate", "closeTemplate"], positionSettings: "positionSettings", tooltipDisabled: ["tooltipDisabled", "tooltipDisabled", booleanAttribute], showTriggers: "showTriggers", hideTriggers: "hideTriggers", target: ["igxTooltipTarget", "target"], tooltip: "tooltip" }, outputs: { tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, exportAs: ["tooltipTarget"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'tooltipTarget',
@@ -9426,13 +9290,13 @@ class IgxDateTimeEditorDirective extends IgxMaskDirective {
             return cursorPos;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDateTimeEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxDateTimeEditorDirective, isStandalone: true, selector: "[igxDateTimeEditor]", inputs: { locale: "locale", minValue: "minValue", maxValue: "maxValue", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], displayFormat: "displayFormat", inputFormat: ["igxDateTimeEditor", "inputFormat"], value: "value", defaultFormatType: "defaultFormatType", spinDelta: "spinDelta" }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "wheel": "onWheel($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateTimeEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxDateTimeEditorDirective, isStandalone: true, selector: "[igxDateTimeEditor]", inputs: { locale: "locale", minValue: "minValue", maxValue: "maxValue", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], displayFormat: "displayFormat", inputFormat: ["igxDateTimeEditor", "inputFormat"], value: "value", defaultFormatType: "defaultFormatType", spinDelta: "spinDelta" }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "wheel": "onWheel($event)" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateTimeEditorDirective, multi: true },
             { provide: NG_VALIDATORS, useExisting: IgxDateTimeEditorDirective, multi: true }
         ], exportAs: ["igxDateTimeEditor"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDateTimeEditorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateTimeEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDateTimeEditor]',
@@ -9486,8 +9350,8 @@ class IgcFormControlDirective {
         this.onTouched();
     }
     /** @hidden @internal */
-    listenForValueChange(value) {
-        this.onChange(value);
+    listenForValueChange(event) {
+        this.onChange(event.detail);
     }
     /** @hidden @internal */
     writeValue(value) {
@@ -9507,8 +9371,8 @@ class IgcFormControlDirective {
     setDisabledState(isDisabled) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgcFormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgcFormControlDirective, isStandalone: true, selector: "igc-rating[ngModel],igc-rating[formControlName]", host: { listeners: { "blur": "onBlur()", "igcChange": "listenForValueChange($event.detail)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgcFormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgcFormControlDirective, isStandalone: true, selector: "igc-rating[ngModel],igc-rating[formControlName],igc-color-picker[ngModel],igc-color-picker[formControlName]", host: { listeners: { "blur": "onBlur()", "igcChange": "listenForValueChange($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IgcFormControlDirective),
@@ -9516,11 +9380,11 @@ class IgcFormControlDirective {
             }
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgcFormControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgcFormControlDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'igc-rating[ngModel],igc-rating[formControlName]',
+                    selector: 'igc-rating[ngModel],igc-rating[formControlName],igc-color-picker[ngModel],igc-color-picker[formControlName]',
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -9535,7 +9399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: ['blur']
             }], listenForValueChange: [{
                 type: HostListener,
-                args: ['igcChange', ['$event.detail']]
+                args: ['igcChange', ['$event']]
             }] } });
 
 class IgxNotificationsDirective extends IgxToggleDirective {
@@ -9612,10 +9476,10 @@ class IgxNotificationsDirective extends IgxToggleDirective {
         clearTimeout(this.timeoutId);
         super.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxNotificationsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxNotificationsDirective, isStandalone: true, inputs: { ariaLive: "ariaLive", autoHide: ["autoHide", "autoHide", booleanAttribute], displayTime: "displayTime", outlet: "outlet", positioning: "positioning", isVisible: ["isVisible", "isVisible", booleanAttribute] }, host: { properties: { "attr.aria-live": "this.ariaLive" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNotificationsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxNotificationsDirective, isStandalone: true, inputs: { ariaLive: "ariaLive", autoHide: ["autoHide", "autoHide", booleanAttribute], displayTime: "displayTime", outlet: "outlet", positioning: "positioning", isVisible: ["isVisible", "isVisible", booleanAttribute] }, host: { properties: { "attr.aria-live": "this.ariaLive" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxNotificationsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNotificationsDirective, decorators: [{
             type: Directive
         }], propDecorators: { ariaLive: [{
                 type: HostBinding,
@@ -9641,11 +9505,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonModule, imports: [IgxButtonDirective, IgxIconButtonDirective], exports: [IgxButtonDirective, IgxIconButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonModule, imports: [IgxButtonDirective, IgxIconButtonDirective], exports: [IgxButtonDirective, IgxIconButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxButtonDirective, IgxIconButtonDirective],
@@ -9658,11 +9522,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDateTimeEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDateTimeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxDateTimeEditorModule, imports: [IgxDateTimeEditorDirective], exports: [IgxDateTimeEditorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDateTimeEditorModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateTimeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDateTimeEditorModule, imports: [IgxDateTimeEditorDirective], exports: [IgxDateTimeEditorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateTimeEditorModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDateTimeEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDateTimeEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxDateTimeEditorDirective],
@@ -9675,11 +9539,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDividerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxDividerModule, imports: [IgxDividerComponent], exports: [IgxDividerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDividerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDividerModule, imports: [IgxDividerComponent], exports: [IgxDividerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDividerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDividerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxDividerComponent],
@@ -9692,11 +9556,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxDragDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxDragDropModule, imports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective], exports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragDropModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxDragDropModule, imports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective], exports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragDropModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDragDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective],
@@ -9709,11 +9573,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterModule, imports: [IgxFilterDirective, IgxFilterPipe], exports: [IgxFilterDirective, IgxFilterPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterModule, imports: [IgxFilterDirective, IgxFilterPipe], exports: [IgxFilterDirective, IgxFilterPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxFilterDirective, IgxFilterPipe],
@@ -9726,11 +9590,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxFocusModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusModule, imports: [IgxFocusDirective], exports: [IgxFocusDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusModule, imports: [IgxFocusDirective], exports: [IgxFocusDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxFocusDirective],
@@ -9743,11 +9607,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxFocusTrapModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusTrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusTrapModule, imports: [IgxFocusTrapDirective], exports: [IgxFocusTrapDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusTrapModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusTrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusTrapModule, imports: [IgxFocusTrapDirective], exports: [IgxFocusTrapDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusTrapModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxFocusTrapModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFocusTrapModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxFocusTrapDirective],
@@ -9760,11 +9624,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxForOfModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfModule, imports: [IgxForOfDirective], exports: [IgxForOfDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfModule, imports: [IgxForOfDirective], exports: [IgxForOfDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxForOfModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxForOfModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxForOfDirective],
@@ -9777,11 +9641,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgcFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgcFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgcFormsModule, imports: [IgcFormControlDirective], exports: [IgcFormControlDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgcFormsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgcFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgcFormsModule, imports: [IgcFormControlDirective], exports: [IgcFormControlDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgcFormsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgcFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgcFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgcFormControlDirective],
@@ -9794,11 +9658,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxLayoutModule, imports: [IgxFlexDirective, IgxLayoutDirective], exports: [IgxFlexDirective, IgxLayoutDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxLayoutModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxLayoutModule, imports: [IgxFlexDirective, IgxLayoutDirective], exports: [IgxFlexDirective, IgxLayoutDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxLayoutModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxFlexDirective, IgxLayoutDirective],
@@ -9811,11 +9675,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxMaskModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxMaskModule, imports: [IgxMaskDirective], exports: [IgxMaskDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxMaskModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxMaskModule, imports: [IgxMaskDirective], exports: [IgxMaskDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMaskModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxMaskModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMaskModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxMaskDirective],
@@ -9828,11 +9692,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxRippleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxRippleModule, imports: [IgxRippleDirective], exports: [IgxRippleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRippleModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxRippleModule, imports: [IgxRippleDirective], exports: [IgxRippleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRippleModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRippleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRippleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxRippleDirective],
@@ -9845,11 +9709,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxScrollInertiaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxScrollInertiaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxScrollInertiaModule, imports: [IgxScrollInertiaDirective], exports: [IgxScrollInertiaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxScrollInertiaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxScrollInertiaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxScrollInertiaModule, imports: [IgxScrollInertiaDirective], exports: [IgxScrollInertiaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxScrollInertiaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxScrollInertiaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxScrollInertiaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxScrollInertiaDirective],
@@ -9862,11 +9726,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTextHighlightModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightModule, imports: [IgxTextHighlightDirective], exports: [IgxTextHighlightDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightModule, imports: [IgxTextHighlightDirective], exports: [IgxTextHighlightDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextHighlightModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextHighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxTextHighlightDirective],
@@ -9879,11 +9743,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTextSelectionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextSelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTextSelectionModule, imports: [IgxTextSelectionDirective], exports: [IgxTextSelectionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextSelectionModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextSelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxTextSelectionModule, imports: [IgxTextSelectionDirective], exports: [IgxTextSelectionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextSelectionModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTextSelectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTextSelectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxTextSelectionDirective],
@@ -9896,11 +9760,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleModule, imports: [IgxToggleDirective, IgxToggleActionDirective], exports: [IgxToggleDirective, IgxToggleActionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleModule, imports: [IgxToggleDirective, IgxToggleActionDirective], exports: [IgxToggleDirective, IgxToggleActionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxToggleDirective, IgxToggleActionDirective],
@@ -9913,11 +9777,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipModule, imports: [IgxTooltipDirective, IgxTooltipTargetDirective], exports: [IgxTooltipDirective, IgxTooltipTargetDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipModule, imports: [IgxTooltipDirective, IgxTooltipTargetDirective], exports: [IgxTooltipDirective, IgxTooltipTargetDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IGX_TOOLTIP_DIRECTIVES],