@mohamedatia/fly-design-system 2.3.0 → 2.3.2

package/fesm2022/mohamedatia-fly-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, forwardRef, viewChild, effect, ViewEncapsulation, model } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
@@ -1765,6 +1765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  */
 class FlyImageUploadComponent {
     http = inject(HttpClient);
+    injector = inject(Injector);
     // ── Inputs ──
     aspectRatio = input(16 / 9, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
     maxSizeBytes = input(5 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxSizeBytes" }] : /* istanbul ignore next */ []));
@@ -1877,8 +1878,12 @@ class FlyImageUploadComponent {
         const url = URL.createObjectURL(file);
         this.rawImageUrl.set(url);
         this.showCropper.set(true);
-        // Wait for next tick so cropImage element is in DOM
-        setTimeout(() => this.initCropper(), 0);
+        // Init cropperjs after the @if (showCropper()) block has rendered and
+        // the #cropImage signal viewQuery is populated. setTimeout(0) used to
+        // race here under Native Federation when fewer host CD passes happen
+        // before the macrotask fires (cropImage() returned undefined and
+        // initCropper bailed). afterNextRender is deterministic.
+        afterNextRender(() => this.initCropper(), { injector: this.injector });
     }
     initCropper() {
         this.destroyCropper();