igniteui-angular 20.1.7 → 20.1.9

package/fesm2022/igniteui-angular.mjs

@@ -8056,7 +8056,13 @@ class IgxOverlayService {
             }
         }
         this.updateSize(info);
+        const openAnimation = info.settings.positionStrategy.settings.openAnimation;
+        const closeAnimation = info.settings.positionStrategy.settings.closeAnimation;
         info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
+        if (openAnimation !== info.settings.positionStrategy.settings.openAnimation ||
+            closeAnimation !== info.settings.positionStrategy.settings.closeAnimation) {
+            this.buildAnimationPlayers(info);
+        }
         this.addModalClasses(info);
         if (info.settings.positionStrategy.settings.openAnimation) {
             // TODO: should we build players again. This was already done in attach!!!
@@ -20861,6 +20867,9 @@ class IgxToggleDirective {
     get hiddenClass() {
         return this.collapsed;
     }
+    /**
+     * @hidden
+     */
     get hiddenWebkitClass() {
         const isSafari = this.platform?.isSafari;
         const browserVersion = this.platform?.browserVersion;
@@ -21000,6 +21009,14 @@ class IgxToggleDirective {
             return;
         }
         this._collapsed = false;
+        // TODO: this is a workaround for the issue introduced by Angular's with Ivy renderer.
+        // When calling detectChanges(), Angular marks the element for check, but does not update the classes
+        // immediately, which causes the overlay to calculate incorrect dimensions of target element.
+        // Overlay show should be called in the next tick to ensure the classes are updated and target element is measured correctly.
+        // Note: across the codebase, each host binding should be checked and similar fix applied if needed!!!
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden', 'igx-toggle');
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden-webkit', 'igx-toggle');
+        this.elementRef.nativeElement.removeAttribute('aria-hidden');
         this.cdr.detectChanges();
         if (!info) {
             this.unsubscribe();
@@ -21150,14 +21167,20 @@ class IgxToggleDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxOverlayService }, { token: IgxNavigationService, optional: true }, { token: PlatformUtil, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", 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": "this.hiddenClass", "attr.aria-hidden": "this.hiddenClass", "class.igx-toggle--hidden-webkit": "this.hiddenWebkitClass", "class.igx-toggle": "this.defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", 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: "20.3.6", ngImport: i0, type: IgxToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'toggle',
                     selector: '[igxToggle]',
-                    standalone: true
+                    standalone: true,
+                    host: {
+                        '[class.igx-toggle--hidden]': 'hiddenClass',
+                        '[attr.aria-hidden]': 'hiddenClass',
+                        '[class.igx-toggle--hidden-webkit]': 'hiddenWebkitClass',
+                        '[class.igx-toggle]': 'defaultClass'
+                    }
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
@@ -21178,18 +21201,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 type: Output
             }], id: [{
                 type: Input
-            }], hiddenClass: [{
-                type: HostBinding,
-                args: ['class.igx-toggle--hidden']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-hidden']
-            }], hiddenWebkitClass: [{
-                type: HostBinding,
-                args: ['class.igx-toggle--hidden-webkit']
-            }], defaultClass: [{
-                type: HostBinding,
-                args: ['class.igx-toggle']
             }] } });
 class IgxToggleActionDirective {
     /**
@@ -21503,11 +21514,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
 
 class IgxTooltipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxTooltipComponent, isStandalone: true, selector: "igx-tooltip", viewQueries: [{ propertyName: "tooltip", first: true, predicate: IgxTooltipDirective, descendants: true, static: true }], ngImport: i0, template: "<span igxTooltip>{{content}}</span>", dependencies: [{ kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-tooltip', imports: [IgxTooltipDirective], template: "<span igxTooltip>{{content}}</span>" }]
+            args: [{ selector: 'igx-tooltip', imports: [IgxTooltipDirective], template: "<span data-default igxTooltip>{{content}}</span>\n" }]
         }], propDecorators: { tooltip: [{
                 type: ViewChild,
                 args: [IgxTooltipDirective, { static: true }]
@@ -45039,6 +45050,7 @@ class IgxColumnComponent {
     get index() {
         return this.grid._columns.indexOf(this);
     }
+    /* mustCoerceToInt */
     /**
      * Gets the pinning position of the column.
      * ```typescript
@@ -76254,7 +76266,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         if (!this._init) {
             this.validation.updateAll(this._data);
         }
-        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {
+        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {
             this.setupColumns();
         }
         this.cdr.markForCheck();
@@ -83194,7 +83206,7 @@ class BaseToolbarDirective {
         this.columnToggle = new EventEmitter();
         this.$destroy = new Subject();
         this._overlaySettings = {
-            positionStrategy: new ConnectedPositioningStrategy({
+            positionStrategy: new AutoPositionStrategy({
                 horizontalDirection: HorizontalAlignment.Left,
                 horizontalStartPoint: HorizontalAlignment.Right,
                 verticalDirection: VerticalAlignment.Bottom,
@@ -89376,7 +89388,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (!this._init) {
             this.validation.updateAll(this._data);
         }
-        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {
+        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {
             this.setupColumns();
             this.reflow();
         }