@mohamedatia/fly-design-system 2.9.0 → 2.10.0

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, DestroyRef, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, EventEmitter, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model, Directive } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, DestroyRef, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, EventEmitter, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model, Directive, Renderer2 } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, NgComponentOutlet, CommonModule, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
@@ -3922,6 +3922,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: ['dragstart', ['$event']]
             }] } });
 
+/**
+ * Renders an authenticated image into a host `<img>` element by fetching the
+ * resource as a blob through Angular's `HttpClient` and binding the resulting
+ * object URL to the host's `src` attribute.
+ *
+ * Why this exists: every Business / Supporting app stores files in the Files
+ * Manager service, which authenticates with a Bearer JWT. A raw `<img src>`
+ * request bypasses the Angular HTTP interceptor — the browser issues the GET
+ * without the Authorization header, so the response is 401 and the image is
+ * broken. The standard workaround is roughly fifteen lines of `effect` +
+ * `URL.createObjectURL` + `URL.revokeObjectURL` per call site (see prior
+ * inline copies in `FlyImageUploadComponent` and the Circles trend-detail
+ * cover). This directive centralizes that pattern so:
+ *
+ *   * Memory hygiene is automatic — the previous object URL is revoked
+ *     whenever the input changes and on destroy. Easy to forget inline.
+ *   * Error handling is uniform — a fetch failure clears the host `src`
+ *     so the browser shows its broken-image affordance once, not the prior
+ *     image stuck on screen.
+ *   * A future protocol change (per-request signed URLs, CDN tokens, etc.)
+ *     lands in one place rather than across every app's image bindings.
+ *
+ * Usage:
+ *
+ * ```html
+ * <img [flySecureSrc]="trend.coverImageId" alt="" class="cover-img" />
+ * ```
+ *
+ * Pass a full URL when the resource lives somewhere other than the default
+ * Files Manager download endpoint:
+ *
+ * ```html
+ * <img [flySecureSrc]="'/api/avatars/' + user.id" alt="" />
+ * ```
+ *
+ * A bare file id (no `/` prefix) is resolved against
+ * `/api/files/{id}/download`, which matches the Files Manager convention
+ * used everywhere in the platform. Anything that starts with `/` is treated
+ * as a literal URL and passed through unchanged — apps with bespoke download
+ * routes (signed Excel exports, attachment thumbnails, …) keep working
+ * without a wrapper.
+ */
+class FlySecureSrcDirective {
+    /**
+     * File id or absolute path. Passing `null` / `undefined` / `''` clears the
+     * `src` attribute and revokes the previous blob. Useful when binding to a
+     * signal whose value can become empty (e.g. after a file is detached).
+     */
+    flySecureSrc = input(...(ngDevMode ? [undefined, { debugName: "flySecureSrc" }] : /* istanbul ignore next */ []));
+    http = inject(HttpClient);
+    host = inject((ElementRef));
+    renderer = inject(Renderer2);
+    /**
+     * The object URL currently bound to the host's `src` attribute. Tracked so
+     * we can revoke it before binding a new one (avoids leaking blob memory
+     * across rapid input changes — e.g. carousel scrubbing) and on destroy.
+     */
+    currentUrl = null;
+    constructor() {
+        effect((onCleanup) => {
+            const raw = this.flySecureSrc();
+            this.releaseCurrent();
+            this.renderer.removeAttribute(this.host.nativeElement, 'src');
+            if (!raw)
+                return;
+            const url = raw.startsWith('/') ? raw : `/api/files/${raw}/download`;
+            const sub = this.http
+                .get(url, { responseType: 'blob' })
+                .subscribe({
+                next: (blob) => {
+                    const objectUrl = URL.createObjectURL(blob);
+                    this.currentUrl = objectUrl;
+                    this.renderer.setAttribute(this.host.nativeElement, 'src', objectUrl);
+                },
+                // A 401 / 403 / 404 here means the image is unavailable for this user.
+                // Don't loop or retry — clear the src and let the host page render its
+                // own placeholder. Logging is intentionally silent: it's expected on
+                // permission boundaries (e.g. shared-evidence on a trend you can read
+                // but whose file you can't), and stack-traces would be noise.
+                error: () => {
+                    this.releaseCurrent();
+                    this.renderer.removeAttribute(this.host.nativeElement, 'src');
+                },
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
+    }
+    ngOnDestroy() {
+        this.releaseCurrent();
+    }
+    releaseCurrent() {
+        if (this.currentUrl) {
+            URL.revokeObjectURL(this.currentUrl);
+            this.currentUrl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlySecureSrcDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: FlySecureSrcDirective, isStandalone: true, selector: "img[flySecureSrc]", inputs: { flySecureSrc: { classPropertyName: "flySecureSrc", publicName: "flySecureSrc", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlySecureSrcDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[flySecureSrc]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { flySecureSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "flySecureSrc", required: false }] }] } });
+
 /**
  * Verbatim TypeScript port of the C# `LanguageDTO[] _AllLanguages` array supplied by
  * product. **31 entries**, in the canonical order. Three RTL flagged: `he-IL`, `ur-IN`,
@@ -4560,5 +4667,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentCommandRegistry, AgentDropRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLYOS_LAUNCH_EVENT, FLY_LOCALE_CATALOG, FLY_REMOTE_BASE_PATH, FLY_REMOTE_ROUTES, FLY_THEME_MODE_IDS, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlyThemeService, FlyosPendingLaunchesGlobalKey, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, loadRemoteStyles, matchFlyRoutePattern, normalizeFlyTheme, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentCommandRegistry, AgentDropRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLYOS_LAUNCH_EVENT, FLY_LOCALE_CATALOG, FLY_REMOTE_BASE_PATH, FLY_REMOTE_ROUTES, FLY_THEME_MODE_IDS, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySecureSrcDirective, FlyThemeService, FlyosPendingLaunchesGlobalKey, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, loadRemoteStyles, matchFlyRoutePattern, normalizeFlyTheme, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map