fix(component-loader): prevent popover context text flash in zoneless… (#6817)

* fix(component-loader): prevent popover context text flash in zoneless mode

In zoneless mode, popover content rendered with popoverContext briefly
flashed at the trigger element location before being positioned in the
popup. Hide the element until the first positioning pass completes, and
pass the provided context to createEmbeddedView so the content renders
correctly.

Fixes #6811

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore: bump version to 21.2.1

---------

Co-authored-by: Alex Umanskiy <aleksey.umanskiy@valor-software.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

apps/ngx-bootstrap-docs/src/assets/json/current-version.json

@@ -1,3 +1,3 @@
 {
-  "version": "21.2.0"
+  "version": "21.2.1"
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap-base",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "license": "MIT",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "schematics": "./schematics/src/collection.json",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/accordion",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

src/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/alert",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

src/alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/buttons",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

src/buttons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/carousel",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

src/carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/chronos",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

src/chronos/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/collapse",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }

src/collapse/package.json

@@ -187,6 +187,11 @@ export class ComponentLoader<T extends object> {
         );
       }
 
+      // Hide element initially when positioning is active to prevent flash in zoneless mode
+      if (this.attachment) {
+        this._componentRef.location.nativeElement.style.visibility = 'hidden';
+      }
+
       // we need to manually invoke change detection since events registered
       // via
       // Renderer::listen() are not picked up by change detection with the
@@ -368,12 +373,24 @@ export class ComponentLoader<T extends object> {
 
     // Use requestAnimationFrame for zoneless-compatible position updates
     // This replaces the previous NgZone.onStable subscription
+    let isFirstPositioning = true;
     const schedulePositioning = () => {
       if (!this._componentRef) {
         return;
       }
 
       this._posService.calcPosition();
+      
+      // Show popover after first positioning is complete to prevent flash
+      if (isFirstPositioning) {
+        isFirstPositioning = false;
+        requestAnimationFrame(() => {
+          if (this._componentRef?.location) {
+            this._componentRef.location.nativeElement.style.visibility = 'visible';
+          }
+        });
+      }
+      
       this._positioningRafId = requestAnimationFrame(schedulePositioning);
     };
 
@@ -408,7 +425,7 @@ export class ComponentLoader<T extends object> {
 
         return new ContentRef([_viewRef.rootNodes], _viewRef);
       }
-      const viewRef = content.createEmbeddedView({});
+      const viewRef = content.createEmbeddedView(context || {});
       this._applicationRef.attachView(viewRef);
 
       return new ContentRef([viewRef.rootNodes], viewRef);