igniteui-angular 19.2.7 → 19.2.9

package/fesm2022/igniteui-angular.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, NgZone, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
+import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, contentChildren, QueryList, signal, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, NgZone, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, sampleTime, filter as filter$1, pipe } from 'rxjs';
-import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
+import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, filter as filter$1, pipe } from 'rxjs';
+import { takeUntil, filter, throttle, throttleTime, first as first$2, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, DOCUMENT, NgTemplateOutlet, NgClass, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
 import { strToU8, zip } from 'fflate';
@@ -238,17 +238,9 @@ const getResizeObserver = () => globalThis.window?.ResizeObserver;
 /**
  * @hidden
  */
-const cloneArray = (array, deep) => {
-    const arr = [];
-    if (!array) {
-        return arr;
-    }
-    let i = array.length;
-    while (i--) {
-        arr[i] = deep ? cloneValue(array[i]) : array[i];
-    }
-    return arr;
-};
+function cloneArray(array, deep = false) {
+    return deep ? (array ?? []).map(cloneValue) : (array ?? []).slice();
+}
 /**
  * Doesn't clone leaf items
  *
@@ -306,7 +298,7 @@ const cloneValue = (value) => {
         return new Date(value.getTime());
     }
     if (Array.isArray(value)) {
-        return [...value];
+        return value.slice();
     }
     if (value instanceof Map || value instanceof Set) {
         return value;
@@ -613,10 +605,8 @@ const resizeObservable = (target) => {
             return unsubscribe;
         });
     }
-    else {
-        // if on a server env return a empty observable that does not complete immediately
-        return NEVER;
-    }
+    // if on a server env return a empty observable that does not complete immediately
+    return NEVER;
 };
 /**
  * @hidden
@@ -626,7 +616,7 @@ const resizeObservable = (target) => {
  */
 const compareMaps = (map1, map2) => {
     if (!map2) {
-        return !map1 ? true : false;
+        return !map1;
     }
     if (map1.size !== map2.size) {
         return false;
@@ -646,24 +636,34 @@ const compareMaps = (map1, map2) => {
     }
     return match;
 };
+function _isObject(entity) {
+    return entity != null && typeof entity === 'object';
+}
+function columnFieldPath(path) {
+    return path?.split('.') ?? [];
+}
 /**
- *
  * Given a property access path in the format `x.y.z` resolves and returns
  * the value of the `z` property in the passed object.
  *
  * @hidden
  * @internal
  */
-const resolveNestedPath = (obj, path) => {
-    const parts = path?.split('.') ?? [];
-    let current = obj[parts.shift()];
-    parts.forEach(prop => {
-        if (current) {
-            current = current[prop];
+function resolveNestedPath(obj, pathParts, defaultValue) {
+    if (!_isObject(obj) || pathParts.length < 1) {
+        return defaultValue;
+    }
+    let current = obj;
+    for (const key of pathParts) {
+        if (_isObject(current) && key in current) {
+            current = current[key];
         }
-    });
+        else {
+            return defaultValue;
+        }
+    }
     return current;
-};
+}
 /**
  *
  * Given a property access path in the format `x.y.z` and a value
@@ -779,7 +779,6 @@ function getComponentCssSizeVar(size) {
             return 'var(--ig-size, var(--ig-size-small))';
         case "2":
             return 'var(--ig-size, var(--ig-size-medium))';
-        case "3":
         default:
             return 'var(--ig-size, var(--ig-size-large))';
     }
@@ -1050,7 +1049,7 @@ class IgxSorting {
    * @internal
    */
     getFieldValue(obj, key, isDate = false, isTime = false) {
-        let resolvedValue = resolveNestedPath(obj, key);
+        let resolvedValue = resolveNestedPath(obj, columnFieldPath(key));
         const date = parseDate(resolvedValue);
         if (date && isDate && isTime) {
             resolvedValue = date;
@@ -3349,9 +3348,6 @@ class BaseFilteringStrategy {
             if (!records) { // child grid is not yet created
                 return true;
             }
-            else if (records.length === 0) { // child grid is empty
-                return false;
-            }
             for (let index = 0; index < records.length; index++) {
                 const record = records[index];
                 if ((shouldMatchRecords && this.matchRecord(record, expr.searchTree, grid, expr.searchTree.entity)) ||
@@ -3373,7 +3369,7 @@ class BaseFilteringStrategy {
                 const expressionsTree = expressions;
                 const operator = expressionsTree.operator;
                 let matchOperand;
-                if (expressionsTree.filteringOperands && expressionsTree.filteringOperands.length) {
+                if (expressionsTree.filteringOperands?.length) {
                     for (const operand of expressionsTree.filteringOperands) {
                         matchOperand = this.matchRecord(rec, operand, grid, entity);
                         // Return false if at least one operand does not match and the filtering logic is And
@@ -3423,15 +3419,14 @@ class BaseFilteringStrategy {
         return null;
     }
     getFilterItems(column, tree) {
+        const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
         let data = column.grid.gridAPI.filterDataByExpressions(tree);
         data = column.grid.gridAPI.sortDataByExpressions(data, [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }]);
-        const columnField = column.field;
+        const pathParts = columnFieldPath(column.field);
         let filterItems = data.map(record => {
-            let value = resolveNestedPath(record, columnField);
-            const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
-            value = applyFormatter ?
-                column.formatter(value, record) :
-                value;
+            const value = applyFormatter ?
+                column.formatter(resolveNestedPath(record, pathParts), record) :
+                resolveNestedPath(record, pathParts);
             return {
                 value,
                 label: this.getFilterItemLabel(column, value, !applyFormatter, record)
@@ -3508,31 +3503,18 @@ class NoopFilteringStrategy extends BaseFilteringStrategy {
 }
 class FilteringStrategy extends BaseFilteringStrategy {
     static { this._instance = null; }
-    constructor() {
-        super();
-    }
     static instance() {
         return this._instance || (this._instance = new this());
     }
     filter(data, expressionsTree, advancedExpressionsTree, grid) {
-        let i;
-        let rec;
-        const len = data.length;
-        const res = [];
-        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree)) || !len) {
+        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree))) {
             return data;
         }
-        for (i = 0; i < len; i++) {
-            rec = data[i];
-            if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
-                res.push(rec);
-            }
-        }
-        return res;
+        return data.filter(record => this.matchRecord(record, expressionsTree, grid) && this.matchRecord(record, advancedExpressionsTree, grid));
     }
     getFieldValue(rec, fieldName, isDate = false, isTime = false, grid) {
         const column = grid?.getColumnByName(fieldName);
-        let value = resolveNestedPath(rec, fieldName);
+        let value = resolveNestedPath(rec, columnFieldPath(fieldName));
         value = column?.formatter && this.shouldFormatFilterValues(column) ?
             column.formatter(value, rec) :
             value && (isDate || isTime) ? parseDate(value) : value;
@@ -3568,14 +3550,14 @@ class TreeGridFilteringStrategy extends BaseFilteringStrategy {
         const hierarchicalRecord = rec;
         let value = this.isHierarchicalFilterField(fieldName) ?
             this.getHierarchicalFieldValue(hierarchicalRecord, fieldName) :
-            resolveNestedPath(hierarchicalRecord.data, fieldName);
+            resolveNestedPath(hierarchicalRecord.data, columnFieldPath(fieldName));
         value = column?.formatter && this.shouldFormatFilterValues(column) ?
             column.formatter(value, rec.data) :
             value && (isDate || isTime) ? parseDate(value) : value;
         return value;
     }
     getHierarchicalFieldValue(record, field) {
-        const value = resolveNestedPath(record.data, field);
+        const value = resolveNestedPath(record.data, columnFieldPath(field));
         return record.parent ?
             `${this.getHierarchicalFieldValue(record.parent, field)}${value ? `.[${value}]` : ''}` :
             `[${value}]`;
@@ -3618,8 +3600,9 @@ class TreeGridFilteringStrategy extends BaseFilteringStrategy {
         return Promise.resolve(items);
     }
     getHierarchicalFilterItems(records, column, parent) {
+        const pathParts = columnFieldPath(column.field);
         return records?.map(record => {
-            let value = resolveNestedPath(record.data, column.field);
+            let value = resolveNestedPath(record.data, pathParts);
             const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
             value = applyFormatter ?
                 column.formatter(value, record.data) :
@@ -4061,7 +4044,7 @@ class IgxBaseExporter {
                 }
                 record.data = columns.reduce((a, e) => {
                     if (!e.skip) {
-                        let rawValue = resolveNestedPath(record.data, e.field);
+                        let rawValue = resolveNestedPath(record.data, columnFieldPath(e.field));
                         const shouldApplyFormatter = e.formatter && !e.skipFormatter && record.type !== ExportRecordType.GroupedRecord;
                         const isOfDateType = e.dataType === 'date' || e.dataType === 'dateTime' || e.dataType === 'time';
                         if (isOfDateType &&
@@ -19195,6 +19178,19 @@ let nextId = 0;
  * ```
  */
 class IgxRadioGroupDirective {
+    /**
+     * Returns reference to the child radio buttons.
+     *
+     * @example
+     * ```typescript
+     * let radioButtons =  this.radioGroup.radioButtons;
+     * ```
+     */
+    get radioButtons() {
+        const buttons = Array.from(this._radioButtons());
+        this._radioButtonsList.reset(buttons);
+        return this._radioButtonsList;
+    }
     /**
      * Sets/gets the `value` attribute.
      *
@@ -19283,6 +19279,26 @@ class IgxRadioGroupDirective {
         this._invalid = value;
         this._setRadioButtonsInvalid();
     }
+    /**
+     * A css class applied to the component if any of the
+     * child radio buttons labelPosition is set to `before`.
+     *
+     * @hidden
+     * @internal
+     */
+    get labelBefore() {
+        return this._radioButtons().some((radio) => radio.labelPosition === 'before');
+    }
+    /**
+     * A css class applied to the component if all
+     * child radio buttons are disabled.
+     *
+     * @hidden
+     * @internal
+     */
+    get disabled() {
+        return this._radioButtons().every((radio) => radio.disabled);
+    }
     handleClick(event) {
         event.stopPropagation();
         if (this.selected) {
@@ -19291,7 +19307,7 @@ class IgxRadioGroupDirective {
     }
     handleKeyDown(event) {
         const { key } = event;
-        const buttons = this.radioButtons.filter(radio => !radio.disabled);
+        const buttons = this._radioButtons().filter(radio => !radio.disabled);
         const checked = buttons.find((radio) => radio.checked);
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
             let index = checked ? buttons.indexOf(checked) : -1;
@@ -19357,60 +19373,12 @@ class IgxRadioGroupDirective {
     set alignment(value) {
         this.vertical = value === RadioGroupAlignment.vertical;
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    ngAfterContentInit() {
-        // The initial value can possibly be set by NgModel and it is possible that
-        // the OnInit of the NgModel occurs after the OnInit of this class.
-        this._isInitialized = true;
-        this.radioButtons.changes.pipe(startWith(0), takeUntil(this.destroy$)).subscribe(() => {
-            this.queryChange$.next();
-            setTimeout(() => this._initRadioButtons());
-        });
-        if (this.ngControl) {
-            this.radioButtons.forEach((button) => {
-                if (this.ngControl.disabled) {
-                    button.disabled = this.ngControl.disabled;
-                }
-            });
-        }
-    }
-    /**
-     * @hidden
-     * @internal
-    */
-    ngAfterViewInit() {
-        if (this.ngControl) {
-            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.invalid = false;
-            });
-            if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
-                this._required = this.ngControl?.control?.hasValidator(Validators.required);
-            }
-        }
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
-                button.blurRadio
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe(() => {
-                    this.updateValidityOnBlur();
-                });
-                fromEvent(button.nativeElement, 'keyup')
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe((event) => {
-                    this.updateOnKeyUp(event);
-                });
-            });
-        }
-    }
     /**
      * @hidden
      * @internal
      */
     updateValidityOnBlur() {
-        this.radioButtons.forEach((button) => {
+        this._radioButtons().forEach((button) => {
             button.focused = false;
             if (button.invalid) {
                 this.invalid = true;
@@ -19422,9 +19390,9 @@ class IgxRadioGroupDirective {
      * @internal
      */
     updateOnKeyUp(event) {
-        const checked = this.radioButtons.find(x => x.checked);
+        const checked = this._radioButtons().find(x => x.checked);
         if (event.key === "Tab") {
-            this.radioButtons.forEach((radio) => {
+            this._radioButtons().forEach((radio) => {
                 if (radio === checked) {
                     checked.focused = true;
                 }
@@ -19437,10 +19405,10 @@ class IgxRadioGroupDirective {
     _updateTabIndex() {
         // Needed so that the keyboard navigation of a radio group
         // placed inside a dialog works properly
-        if (this.radioButtons) {
-            const checked = this.radioButtons.find(x => x.checked);
+        if (this._radioButtons) {
+            const checked = this._radioButtons().find(x => x.checked);
             if (checked) {
-                this.radioButtons.forEach((button) => {
+                this._radioButtons().forEach((button) => {
                     checked.nativeElement.tabIndex = 0;
                     if (button !== checked) {
                         button.nativeElement.tabIndex = -1;
@@ -19481,8 +19449,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     registerOnTouched(fn) {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.registerOnTouched(fn);
             });
         }
@@ -19499,6 +19467,8 @@ class IgxRadioGroupDirective {
         this.ngControl = ngControl;
         this._directionality = _directionality;
         this.cdr = cdr;
+        this._radioButtons = contentChildren(IgxRadioComponent, { descendants: true });
+        this._radioButtonsList = new QueryList();
         /**
          * An event that is emitted after the radio group `value` is changed.
          *
@@ -19553,7 +19523,7 @@ class IgxRadioGroupDirective {
          * @hidden
          * @internal
          */
-        this._isInitialized = false;
+        this._isInitialized = signal(false);
         /**
          * @hidden
          * @internal
@@ -19577,31 +19547,72 @@ class IgxRadioGroupDirective {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
+        effect(() => {
+            this.initialize();
+            Promise.resolve().then(() => {
+                this.setRadioButtons();
+            });
+        });
     }
     /**
      * @hidden
      * @internal
      */
-    _initRadioButtons() {
-        if (this.radioButtons) {
-            const props = { name: this._name, required: this._required };
-            this.radioButtons.forEach((button) => {
-                Object.assign(button, props);
-                if (button.value === this._value) {
-                    button.checked = true;
-                    this._selected = button;
-                    this.cdr.markForCheck();
+    initialize() {
+        // The initial value can possibly be set by NgModel and it is possible that
+        // the OnInit of the NgModel occurs after the OnInit of this class.
+        this._isInitialized.set(true);
+        if (this.ngControl) {
+            this.ngControl.statusChanges
+                .pipe(takeUntil$1(this.destroy$))
+                .subscribe(() => {
+                this.invalid = false;
+            });
+            if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
+                this._required = this.ngControl?.control?.hasValidator(Validators.required);
+            }
+            this._radioButtons().forEach((button) => {
+                if (this.ngControl.disabled) {
+                    button.disabled = this.ngControl.disabled;
                 }
-                button.change.pipe(takeUntil(button.destroy$), takeUntil(this.destroy$), takeUntil(this.queryChange$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
             });
         }
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    setRadioButtons() {
+        this._radioButtons().forEach((button) => {
+            button.name = this._name;
+            button.required = this._required;
+            if (button.value === this._value) {
+                button.checked = true;
+                this._selected = button;
+                this.cdr.markForCheck();
+            }
+            this._setRadioButtonEvents(button);
+        });
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    _setRadioButtonEvents(button) {
+        button.change.pipe(takeUntil$1(button.destroy$), takeUntil$1(this.destroy$), takeUntil$1(this.queryChange$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
+        button.blurRadio
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(() => this.updateValidityOnBlur());
+        fromEvent(button.nativeElement, 'keyup')
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((event) => this.updateOnKeyUp(event));
+    }
     /**
      * @hidden
      * @internal
      */
     _selectedRadioButtonChanged(args) {
-        this.radioButtons.forEach((button) => {
+        this._radioButtons().forEach((button) => {
             button.checked = button.id === args.owner.id;
             if (button.checked && button.ngControl) {
                 this.invalid = button.ngControl.invalid;
@@ -19622,8 +19633,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _setRadioButtonNames() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.name = this._name;
             });
         }
@@ -19633,8 +19644,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _selectRadioButton() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 if (this._value === null) {
                     // no value - uncheck all radio buttons
                     if (button.checked) {
@@ -19666,8 +19677,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _setRadioButtonsRequired() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.required = this._required;
             });
         }
@@ -19677,14 +19688,14 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _setRadioButtonsInvalid() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.invalid = this._invalid;
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxRadioGroupDirective, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: IgxDirectionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.5", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical" } }, queries: [{ propertyName: "radioButtons", predicate: IgxRadioComponent, descendants: true }], exportAs: ["igxRadioGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.5", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical", "class.igx-radio-group--before": "this.labelBefore", "class.igx-radio-group--disabled": "this.disabled" } }, queries: [{ propertyName: "_radioButtons", predicate: IgxRadioComponent, descendants: true, isSignal: true }], exportAs: ["igxRadioGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
             type: Directive,
@@ -19697,10 +19708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: IgxDirectionality }, { type: i0.ChangeDetectorRef }], propDecorators: { radioButtons: [{
-                type: ContentChildren,
-                args: [IgxRadioComponent, { descendants: true }]
-            }], value: [{
+                }] }, { type: IgxDirectionality }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -19720,6 +19728,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }], vertical: [{
                 type: HostBinding,
                 args: ['class.igx-radio-group--vertical']
+            }], labelBefore: [{
+                type: HostBinding,
+                args: ['class.igx-radio-group--before']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.igx-radio-group--disabled']
             }], handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -20908,6 +20922,21 @@ class IgxTooltipDirective extends IgxToggleDirective {
          * Returns whether open time out has started
          */
         this.toBeShown = false;
+        this._destroy$ = new Subject();
+        this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
+        this.overlayService.opening.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
+            document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
+        });
+        this.overlayService.closed.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
+            document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        });
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        this._destroy$.next(true);
+        this._destroy$.complete();
     }
     /**
      * If there is open animation in progress this method will finish is.
@@ -20951,6 +20980,9 @@ class IgxTooltipDirective extends IgxToggleDirective {
             overlaySettings.positionStrategy.settings.closeAnimation = animation;
         }
     }
+    onDocumentTouchStart(event) {
+        this.tooltipTarget?.onDocumentTouchStart(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxOverlayService }, { token: IgxNavigationService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: IgxTooltipDirective, isStandalone: true, selector: "[igxTooltip]", inputs: { context: "context", id: "id" }, host: { 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 }); }
 }
@@ -21164,6 +21196,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
         if (shouldReturn) {
             return;
         }
+        this.target.tooltipTarget = this;
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);
         if (showingArgs.cancel) {
@@ -21229,18 +21262,23 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
         this.target.closing.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            if (this.target.tooltipTarget !== this) {
+                return;
+            }
             const hidingArgs = { target: this, tooltip: this.target, cancel: false };
             this.tooltipHide.emit(hidingArgs);
             if (hidingArgs.cancel) {
                 event.cancel = true;
             }
         });
+        this.nativeElement.addEventListener('touchstart', this.onTouchStart = this.onTouchStart.bind(this), { passive: true });
     }
     /**
      * @hidden
      */
     ngOnDestroy() {
         this.hideTooltip();
+        this.nativeElement.removeEventListener('touchstart', this.onTouchStart);
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -21258,6 +21296,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
             this.target.forceClose(this.mergedOverlaySettings);
             this.target.toBeHidden = false;
         }
+        this.target.tooltipTarget = this;
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);
         if (showingArgs.cancel) {
@@ -21325,7 +21364,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxTooltipTargetDirective, deps: [{ token: i0.ElementRef }, { token: IgxNavigationService, optional: true }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.5", type: IgxTooltipTargetDirective, isStandalone: true, selector: "[igxTooltipTarget]", inputs: { showDelay: "showDelay", hideDelay: "hideDelay", tooltipDisabled: ["tooltipDisabled", "tooltipDisabled", booleanAttribute], target: ["igxTooltipTarget", "target"], tooltip: "tooltip" }, outputs: { tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "document:touchstart": "onDocumentTouchStart($event)" } }, exportAs: ["tooltipTarget"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.5", type: IgxTooltipTargetDirective, isStandalone: true, selector: "[igxTooltipTarget]", inputs: { showDelay: "showDelay", hideDelay: "hideDelay", tooltipDisabled: ["tooltipDisabled", "tooltipDisabled", booleanAttribute], target: ["igxTooltipTarget", "target"], tooltip: "tooltip" }, outputs: { tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, exportAs: ["tooltipTarget"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxTooltipTargetDirective, decorators: [{
             type: Directive,
@@ -21361,12 +21400,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }], onTouchStart: [{
-                type: HostListener,
-                args: ['touchstart']
-            }], onDocumentTouchStart: [{
-                type: HostListener,
-                args: ['document:touchstart', ['$event']]
             }] } });
 
 /* NOTE: Tooltip directives collection for ease-of-use import in standalone components scenario */
@@ -31651,7 +31684,7 @@ class IgxCalendarBaseDirective {
             case 'month':
                 return `${this.resourceStrings.igx_calendar_previous_month}, ${detail}`;
             case 'year':
-                return this.resourceStrings.igx_calendar_previous_year.replace('{0}', '15');
+                return this.resourceStrings.igx_calendar_previous_year;
             case 'decade':
                 return this.resourceStrings.igx_calendar_previous_years.replace('{0}', '15');
         }
@@ -31661,7 +31694,7 @@ class IgxCalendarBaseDirective {
             case 'month':
                 return `${this.resourceStrings.igx_calendar_next_month}, ${detail}`;
             case 'year':
-                return this.resourceStrings.igx_calendar_next_year.replace('{0}', '15');
+                return this.resourceStrings.igx_calendar_next_year;
             case 'decade':
                 return this.resourceStrings.igx_calendar_next_years.replace('{0}', '15');
         }
@@ -34091,7 +34124,7 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService
             },
-        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }] }); }
+        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
             type: Component,
@@ -34111,7 +34144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         IgxIconComponent,
                         IgxMonthsViewComponent,
                         IgxYearsViewComponent,
-                    ], template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
+                    ], template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ["attr.id"]
@@ -42991,7 +43024,7 @@ class IgxGridCell {
         // will return undefined for a column layout, because getCellByColumnVisibleIndex may return the column layout at that index.
         // getCellByColumnVisibleIndex is deprecated and will be removed in future version
         return this.column.field ?
-            this.column.hasNestedPath ? resolveNestedPath(this.row?.data, this.column.field) : this.row?.data[this.column.field]
+            this.column.hasNestedPath ? resolveNestedPath(this.row?.data, columnFieldPath(this.column.field)) : this.row?.data[this.column.field]
             : undefined;
     }
     /**
@@ -60998,10 +61031,11 @@ class IgxGridCellStyleClassesPipe {
             return '';
         }
         const result = [];
+        const pathParts = columnFieldPath(field);
         for (const cssClass of Object.keys(cssClasses)) {
             const callbackOrValue = cssClasses[cssClass];
             const apply = typeof callbackOrValue === 'function' ?
-                callbackOrValue(data, field, resolveNestedPath(data, field), index) : callbackOrValue;
+                callbackOrValue(data, field, resolveNestedPath(data, pathParts), index) : callbackOrValue;
             if (apply) {
                 result.push(cssClass);
             }
@@ -61028,9 +61062,10 @@ class IgxGridCellStylesPipe {
         if (!styles) {
             return css;
         }
+        const pathParts = columnFieldPath(field);
         for (const prop of Object.keys(styles)) {
             const res = styles[prop];
-            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, field), index) : res;
+            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, pathParts), index) : res;
         }
         return css;
     }
@@ -61324,7 +61359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }] }], propDecorators: { transform: [] } });
 class IgxGridDataMapperPipe {
     transform(data, field, _, val, isNestedPath) {
-        return isNestedPath ? resolveNestedPath(data, field) : val;
+        return isNestedPath ? resolveNestedPath(data, columnFieldPath(field)) : val;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
@@ -61355,14 +61390,14 @@ class IgxGridTransactionStatePipe {
         if (rowEditable) {
             const rowCurrentState = transactions.getAggregatedValue(row_id, false);
             if (rowCurrentState) {
-                const value = resolveNestedPath(rowCurrentState, field);
+                const value = resolveNestedPath(rowCurrentState, columnFieldPath(field));
                 return value !== undefined && value !== null;
             }
         }
         else {
             const transaction = transactions.getState(row_id);
-            const value = resolveNestedPath(transaction?.value ?? {}, field);
-            return transaction && transaction.value && (value || value === 0 || value === false);
+            const value = resolveNestedPath(transaction?.value ?? {}, columnFieldPath(field));
+            return transaction?.value && (value || value === 0 || value === false);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
@@ -62723,7 +62758,7 @@ class IgxGridValidationService {
     * @internal
     */
     addFormControl(formGroup, data, column) {
-        const value = resolveNestedPath(data || {}, column.field);
+        const value = resolveNestedPath(data || {}, columnFieldPath(column.field));
         const field = this.getFieldKey(column.field);
         const control = new FormControl(value, { updateOn: this.grid.validationTrigger });
         control.addValidators(column.validators);
@@ -63640,7 +63675,7 @@ class IgxGridSummaryService {
         }
         if (!args) {
             this.summaryCacheMap.clear();
-            if (this.grid && this.grid.rootSummariesEnabled) {
+            if (this.grid?.rootSummariesEnabled) {
                 this.retriggerRootPipe++;
             }
             return;
@@ -63729,15 +63764,17 @@ class IgxGridSummaryService {
         if (!this.hasSummarizedColumns || !data) {
             return rowSummaries;
         }
-        this.grid.columns.filter(col => col.hasSummary).forEach((column) => {
+        const columns = this.grid.columns.filter(col => col.hasSummary);
+        const columnPathParts = columns.map(col => columnFieldPath(col.field));
+        for (const [idx, column] of columns.entries()) {
             if (!rowSummaries.get(column.field)) {
-                let summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, column.field)), data, column.field, groupRecord, this.grid.locale, column.pipeArgs);
+                let summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, columnPathParts[idx])), data, column.field, groupRecord, this.grid.locale, column.pipeArgs);
                 summaryResult = column.disabledSummaries.length > 0
                     ? summaryResult.filter(s => !column.disabledSummaries.includes(s.key))
                     : summaryResult;
                 rowSummaries.set(column.field, summaryResult);
             }
-        });
+        }
         return rowSummaries;
     }
     resetSummaryHeight() {
@@ -69748,7 +69785,7 @@ class IgxGridBaseDirective {
                         const key = this.type !== 'pivot' && headers ? col.header || col.field : col.field;
                         const rowData = source[row].ghostRecord ? source[row].recordRef : source[row];
                         const value = this.type === 'pivot' ? rowData.aggregationValues.get(col.field)
-                            : resolveNestedPath(rowData, col.field);
+                            : resolveNestedPath(rowData, columnFieldPath(col.field));
                         record[key] = formatters && col.formatter ? col.formatter(value, rowData) : value;
                         if (columnData) {
                             if (!record[key]) {
@@ -70217,14 +70254,15 @@ class IgxGridBaseDirective {
         const searchText = caseSensitive ? this._lastSearchInfo.searchText : this._lastSearchInfo.searchText.toLowerCase();
         const data = this.filteredSortedData;
         const columnItems = this.visibleColumns.filter((c) => !c.columnGroup).sort((c1, c2) => c1.visibleIndex - c2.visibleIndex);
+        const columnsPathParts = columnItems.map(col => columnFieldPath(col.field));
         data.forEach((dataRow, rowIndex) => {
-            columnItems.forEach((c) => {
+            columnItems.forEach((c, cid) => {
                 const pipeArgs = this.getColumnByName(c.field).pipeArgs;
-                const value = c.formatter ? c.formatter(resolveNestedPath(dataRow, c.field), dataRow) :
-                    c.dataType === 'number' ? formatNumber(resolveNestedPath(dataRow, c.field), this.locale, pipeArgs.digitsInfo) :
+                const value = c.formatter ? c.formatter(resolveNestedPath(dataRow, columnsPathParts[cid]), dataRow) :
+                    c.dataType === 'number' ? formatNumber(resolveNestedPath(dataRow, columnsPathParts[cid]), this.locale, pipeArgs.digitsInfo) :
                         c.dataType === 'date'
-                            ? formatDate(resolveNestedPath(dataRow, c.field), pipeArgs.format, this.locale, pipeArgs.timezone)
-                            : resolveNestedPath(dataRow, c.field);
+                            ? formatDate(resolveNestedPath(dataRow, columnsPathParts[cid]), pipeArgs.format, this.locale, pipeArgs.timezone)
+                            : resolveNestedPath(dataRow, columnsPathParts[cid]);
                 if (value !== undefined && value !== null && c.searchable) {
                     let searchValue = caseSensitive ? String(value) : String(value).toLowerCase();
                     if (exactMatch) {
@@ -77249,10 +77287,11 @@ class IgxPivotGridCellStyleClassesPipe {
             return '';
         }
         const result = [];
+        const pathParts = columnFieldPath(columnData.field);
         for (const cssClass of Object.keys(cssClasses)) {
             const callbackOrValue = cssClasses[cssClass];
             const apply = typeof callbackOrValue === 'function' ?
-                callbackOrValue(rowData, columnData, resolveNestedPath(rowData, columnData.field), index) : callbackOrValue;
+                callbackOrValue(rowData, columnData, resolveNestedPath(rowData, pathParts), index) : callbackOrValue;
             if (apply) {
                 result.push(cssClass);
             }
@@ -86144,7 +86183,7 @@ class IgxGridHierarchicalPipe {
                     v[childKey] = [];
                 }
                 const hasNestedPath = childKey?.includes('.');
-                const childData = !hasNestedPath ? v[childKey] : resolveNestedPath(v, childKey);
+                const childData = !hasNestedPath ? v[childKey] : resolveNestedPath(v, columnFieldPath(childKey));
                 childGridsData[childKey] = childData;
             });
             if (grid.gridAPI.get_row_expansion_state(v)) {