igniteui-angular 14.0.11 → 14.0.14

package/fesm2020/igniteui-angular.mjs

@@ -7,7 +7,7 @@ import { NgModel, FormControlName, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxReq
 import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, getLocaleFirstDayOfWeek, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, Subject, fromEvent, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
-import { takeUntil, filter, first as first$1, throttleTime, take, throttle, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, pluck } from 'rxjs/operators';
+import { takeUntil, filter, first as first$1, throttleTime, take, throttle, startWith, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, pluck } from 'rxjs/operators';
 import mergeWith from 'lodash.mergewith';
 import * as JSZip from 'jszip';
 import * as i1$2 from '@angular/platform-browser';
@@ -2109,11 +2109,11 @@ const verticalAnimations = [
     swingOutBottomBck,
 ];
 /**
- * Similar to Angular's formatDate. However it will not throw on `undefined | null` instead
+ * Similar to Angular's formatDate. However it will not throw on `undefined | null | ''` instead
  * coalescing to an empty string.
  */
 const formatDate = (value, format, locale, timezone) => {
-    if (value === null || value === undefined) {
+    if (value === null || value === undefined || value === '') {
         return '';
     }
     return formatDate$1(value, format, locale, timezone);
@@ -15890,7 +15890,7 @@ class IgxDragDirective {
         // Check for shadowRoot instance and use it if present
         for (const elFromPoint of elementsFromPoint) {
             if (!!elFromPoint?.shadowRoot) {
-                targetElements = targetElements.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY));
+                targetElements = targetElements.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));
             }
             else if (targetElements.indexOf(elFromPoint) === -1) {
                 targetElements.push(elFromPoint);
@@ -15924,13 +15924,15 @@ class IgxDragDirective {
      * @hidden
      * Traverse shadow dom in depth.
      */
-    getFromShadowRoot(elem, pageX, pageY) {
+    getFromShadowRoot(elem, pageX, pageY, parentDomElems) {
         const elementsFromPoint = elem.shadowRoot.elementsFromPoint(pageX, pageY);
-        let res = elementsFromPoint;
-        for (const elFromPoint of elementsFromPoint) {
+        const shadowElements = elementsFromPoint.filter(cur => parentDomElems.indexOf(cur) === -1);
+        let res = [];
+        for (const elFromPoint of shadowElements) {
             if (!!elFromPoint?.shadowRoot && elFromPoint.shadowRoot !== elem.shadowRoot) {
-                res = res.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY));
+                res = res.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));
             }
+            res.push(elFromPoint);
         }
         return res;
     }
@@ -17939,6 +17941,11 @@ let nextId$3 = 0;
 class IgxRadioComponent {
     constructor(cdr) {
         this.cdr = cdr;
+        /**
+         * @hidden
+         * @internal
+         */
+        this.destroy$ = new Subject();
         /**
          * Sets/gets the `id` of the radio component.
          * If not set, the `id` of the first radio component will be `"igx-radio-0"`.
@@ -18112,6 +18119,14 @@ class IgxRadioComponent {
     set disabled(value) {
         this._disabled = (value === '') || value;
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
     /**
     * @hidden
     * @internal
@@ -18411,6 +18426,11 @@ class IgxRadioGroupDirective {
          * @internal
          */
         this.destroy$ = new Subject();
+        /**
+         * @hidden
+         * @internal
+         */
+        this.queryChange$ = new Subject();
     }
     /**
      * Sets/gets the `value` attribute.
@@ -18556,8 +18576,9 @@ class IgxRadioGroupDirective {
         // 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;
-        setTimeout(() => {
-            this._initRadioButtons();
+        this.radioButtons.changes.pipe(startWith(0), takeUntil(this.destroy$)).subscribe(() => {
+            this.queryChange$.next();
+            setTimeout(() => this._initRadioButtons());
         });
     }
     /**
@@ -18635,7 +18656,7 @@ class IgxRadioGroupDirective {
                     button.checked = true;
                     this._selected = button;
                 }
-                button.change.pipe(takeUntil(this.destroy$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
+                button.change.pipe(takeUntil(button.destroy$), takeUntil(this.destroy$), takeUntil(this.queryChange$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
             });
         }
     }
@@ -24230,9 +24251,13 @@ class IgxGridSelectionService {
          */
         this.pointerEventInGridBody = false;
         this._ranges = new Set();
-        this.pointerOriginHandler = () => {
+        this.pointerOriginHandler = (event) => {
             this.pointerEventInGridBody = false;
             document.body.removeEventListener('pointerup', this.pointerOriginHandler);
+            const targetTagName = event.target.tagName.toLowerCase();
+            if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {
+                this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
+            }
         };
         this.initPointerState();
         this.initKeyboardState();
@@ -24349,6 +24374,7 @@ class IgxGridSelectionService {
      * and the start node of the `state`.
      */
     generateRange(node, state) {
+        this._lastSelectedNode = node;
         if (!state) {
             return {
                 rowStart: node.row,
@@ -24466,8 +24492,8 @@ class IgxGridSelectionService {
         }
         return true;
     }
-    pointerUp(node, emitter) {
-        if (this.dragMode) {
+    pointerUp(node, emitter, firedOutsideGrid) {
+        if (this.dragMode || firedOutsideGrid) {
             this.restoreTextSelection();
             this.addRangeMeta(node, this.pointerState);
             this.mergeMap(this.selection, this.temp);
@@ -38544,6 +38570,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
         this._onTouchedCallback = noop;
         this._onValidatorChange = noop;
         this.onStatusChanged = () => {
+            this.disabled = this._ngControl.disabled;
             this.updateValidity();
             this.inputGroup.isRequired = this.required;
         };
@@ -42496,7 +42523,8 @@ class IgxTimePickerComponent extends PickerBaseDirective {
     }
     onStatusChanged() {
         if ((this._ngControl.control.touched || this._ngControl.control.dirty) &&
-            (this._ngControl.control.validator || this._ngControl.control.asyncValidator)) {
+            (this._ngControl.control.validator || this._ngControl.control.asyncValidator) &&
+            !this._ngControl.disabled) {
             if (this._inputGroup.isFocused) {
                 this.inputDirective.valid = this._ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
             }
@@ -46323,6 +46351,9 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
      * ```
      */
     expand() {
+        if (this.expanded && !this.treeService.collapsingNodes.has(this)) {
+            return;
+        }
         const args = {
             owner: this.tree,
             node: this,
@@ -46351,6 +46382,9 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
      * ```
      */
     collapse() {
+        if (!this.expanded || this.treeService.collapsingNodes.has(this)) {
+            return;
+        }
         const args = {
             owner: this.tree,
             node: this,
@@ -56096,10 +56130,10 @@ class IgxPageNavigationComponent {
     }
 }
 IgxPageNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxPageNavigationComponent, deps: [{ token: IgxPaginatorComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxPageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxPageNavigationComponent, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.paginate(0)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n>\n    <igx-icon>first_page</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.previousPage()\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n>\n    <igx-icon>chevron_left</igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxButton=\"icon\"\n>\n    <igx-icon>chevron_right</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n>\n    <igx-icon>last_page</igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
+IgxPageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxPageNavigationComponent, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.paginate(0)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon>first_page</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.previousPage()\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon>chevron_left</igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxButton=\"icon\"\n    type=\"button\"\n>\n    <igx-icon>chevron_right</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon>last_page</igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-page-nav', template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.paginate(0)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n>\n    <igx-icon>first_page</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.previousPage()\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n>\n    <igx-icon>chevron_left</igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxButton=\"icon\"\n>\n    <igx-icon>chevron_right</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n>\n    <igx-icon>last_page</igx-icon>\n</button>\n\n" }]
+            args: [{ selector: 'igx-page-nav', template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.paginate(0)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon>first_page</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isFirstPageDisabled\"\n    (click)=\"paginator.previousPage()\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon>chevron_left</igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxButton=\"icon\"\n    type=\"button\"\n>\n    <igx-icon>chevron_right</igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPageDisabled\"\n    [attr.aria-disabled]=\"paginator.isLastPageDisabled\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxButton=\"icon\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon>last_page</igx-icon>\n</button>\n\n" }]
         }], ctorParameters: function () { return [{ type: IgxPaginatorComponent, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { cssClass: [{
@@ -58715,8 +58749,13 @@ class IgxGridNavigationService {
             if (shouldClearSelection || (this.grid.cellSelection !== GridSelectionMode.multiple)) {
                 this.grid.clearCellSelection();
                 this.grid.navigateTo(this.activeNode.row, this.activeNode.column, (obj) => {
-                    obj.target?.activate(event);
-                    this.grid.cdr.detectChanges();
+                    if (this.activeNode.row === obj.target.row.index) {
+                        obj.target?.activate(event);
+                        this.grid.cdr.detectChanges();
+                    }
+                    else {
+                        this.grid.navigateTo(this.activeNode.row, this.activeNode.column);
+                    }
                 });
             }
             else {
@@ -69005,7 +69044,6 @@ class IgxGridComponent extends IgxGridBaseDirective {
         if (this.groupTemplate) {
             this._groupRowTemplate = this.groupTemplate.template;
         }
-        this.detailTemplate.changes.subscribe(() => this.trackChanges = (_, rec) => (rec?.detailsData !== undefined ? rec.detailsData : rec));
         if (this.hideGroupedColumns && this._columns && this.groupingExpressions) {
             this._setGroupColsVisibility(this.hideGroupedColumns);
         }
@@ -69044,6 +69082,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     ngOnInit() {
         super.ngOnInit();
+        this.trackChanges = (_, rec) => (rec?.detailsData !== undefined ? rec.detailsData : rec);
         this.onGroupingDone.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             this.crudService.endEdit(false);
             this.summaryService.updateSummaryCache(args);
@@ -83956,14 +83995,14 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
         this.onValidatorChange = noop;
         this.onStatusChanged = () => {
             if (this.inputGroup) {
-                this.inputDirective.valid = this.isTouchedOrDirty
+                this.inputDirective.valid = this.isTouchedOrDirty && !this._ngControl.disabled
                     ? this.getInputState(this.inputGroup.isFocused)
                     : IgxInputState.INITIAL;
             }
             else if (this.hasProjectedInputs) {
                 this.projectedInputs
                     .forEach(i => {
-                    i.inputDirective.valid = this.isTouchedOrDirty
+                    i.inputDirective.valid = this.isTouchedOrDirty && !this._ngControl.disabled
                         ? this.getInputState(i.isFocused)
                         : IgxInputState.INITIAL;
                     ;