@mohamedatia/fly-design-system 1.5.0 → 1.9.1

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

@@ -1,11 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input } 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, viewChild, ViewEncapsulation, model } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { of } from 'rxjs';
-import { CommonModule } from '@angular/common';
+import { of, ReplaySubject } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { switchMap } from 'rxjs/operators';
+import { HttpClient, HttpEventType } from '@angular/common/http';
+import Cropper from 'cropperjs';
 
 const WINDOW_DATA = new InjectionToken('WINDOW_DATA');
 
@@ -229,21 +232,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Single source of truth for persisted / API theme strings. */
+const FLY_THEME_MODE_IDS = ['light', 'spatial', 'dark'];
+/** Factory default: `dark` (opaque dark / `html.dark-theme`); shell i18n `settings.theme.dark`. Keep in sync with `UserSettings` defaults. */
+const DEFAULT_FLY_THEME_MODE = 'dark';
+/** Coerce unknown values (localStorage, API) to a valid theme mode. */
+function normalizeFlyTheme(value) {
+    if (typeof value === 'string' && FLY_THEME_MODE_IDS.includes(value)) {
+        return value;
+    }
+    return DEFAULT_FLY_THEME_MODE;
+}
 /**
- * Applies `html.light-theme` / `html.dark-theme` / `html.transparent-theme` for DS SCSS.
+ * Applies `html.light-theme` / `html.spatial-theme` / `html.dark-theme` for DS SCSS.
  * Shell and standalone Business Apps use the same service (federation singleton when shared).
  */
 class FlyThemeService {
-    theme = signal('light', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    platformId = inject(PLATFORM_ID);
+    theme = signal(DEFAULT_FLY_THEME_MODE, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     applyTheme(mode) {
         this.theme.set(mode);
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
         const html = document.documentElement;
-        html.classList.remove('dark-theme', 'light-theme', 'transparent-theme');
-        if (mode === 'dark') {
-            html.classList.add('dark-theme');
+        html.classList.remove('light-theme', 'spatial-theme', 'dark-theme');
+        if (mode === 'spatial') {
+            html.classList.add('spatial-theme');
         }
-        else if (mode === 'transparent') {
-            html.classList.add('transparent-theme');
+        else if (mode === 'dark') {
+            html.classList.add('dark-theme');
         }
         else {
             html.classList.add('light-theme');
@@ -264,6 +282,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * on the shell's internal implementation.
  */
 class WindowManagerService {
+    /**
+     * Shell: increments per-window depth and shows content block UI.
+     * Standalone / no host: no-op.
+     */
+    beginContentUiBlock(_windowId, _messageKey) { }
+    /** Shell: decrements depth; clears block when depth reaches 0. Standalone: no-op. */
+    endContentUiBlock(_windowId) { }
 }
 /**
  * No-op fallback implementation used when running a Business App in
@@ -352,6 +377,13 @@ class MockAuthService {
     hasPendingTwoFactor;
     /** Always false in mock mode — auth is pre-populated synchronously. */
     initializing;
+    /**
+     * Shell and guards may read this flag; real auth uses `localStorage` `fly_had_session`.
+     * Default false — override in the app’s `auth.service.mock.ts` if needed.
+     */
+    get hadPriorSession() {
+        return false;
+    }
     constructor() {
         // All signal/computed calls are inside the constructor body so Angular's
         // injection context and ngDevMode are fully set up before they execute.
@@ -718,7 +750,18 @@ class SharePanelComponent {
     /** Load current shares / permissions (host resolves display names when possible). */
     loadPermissions;
     searchUsers;
+    /**
+     * Load OU hierarchy for sharing. `chartId` is null for the default/official tree;
+     * non-null for an alternative chart.
+     */
     loadOuTree;
+    /** Chart selector options; first entry should be the default chart (`id: null`). */
+    loadChartOptions;
+    /**
+     * Labels from the default (official) OU tree for stable display names on OU grants
+     * when the picker shows an alternative chart.
+     */
+    loadOuLabelMap;
     grantToUser;
     grantToOu;
     updatePermission;
@@ -740,17 +783,49 @@ class SharePanelComponent {
     searchResults = signal([], ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
     ouTree = signal([], ...(ngDevMode ? [{ debugName: "ouTree" }] : /* istanbul ignore next */ []));
     showOuPicker = signal(false, ...(ngDevMode ? [{ debugName: "showOuPicker" }] : /* istanbul ignore next */ []));
+    chartOptions = signal([], ...(ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []));
+    selectedOrgChartId = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrgChartId" }] : /* istanbul ignore next */ []));
+    /** Default-tree id → display name for permission rows (OU grants). */
+    ouLabelById = signal({}, ...(ngDevMode ? [{ debugName: "ouLabelById" }] : /* istanbul ignore next */ []));
     searchTimeout = null;
+    /** Emits after chart options load; further emissions on user chart changes (no initial null). */
+    selectedChartId$ = new ReplaySubject(1);
     ngOnInit() {
         const levels = this.levelOptions;
         this.newLevel = levels[0]?.value ?? 'View';
         this.refreshPermissions();
-        this.loadOuTree()
+        this.loadOuLabelMap()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
+            next: (m) => this.ouLabelById.set(m),
+            error: () => this.ouLabelById.set({}),
+        });
+        this.selectedChartId$
+            .pipe(switchMap((id) => this.loadOuTree(id)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
             next: (tree) => this.ouTree.set(tree),
             error: () => this.ouTree.set([]),
         });
+        this.loadChartOptions()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (opts) => {
+                this.chartOptions.set(opts);
+                const first = opts[0];
+                const initial = first ? first.id : null;
+                this.selectedOrgChartId.set(initial);
+                this.selectedChartId$.next(initial);
+            },
+            error: () => {
+                this.chartOptions.set([]);
+                this.selectedOrgChartId.set(null);
+                this.selectedChartId$.next(null);
+            },
+        });
+    }
+    onOrgChartSelectChange(chartId) {
+        this.selectedOrgChartId.set(chartId);
+        this.selectedChartId$.next(chartId);
     }
     get levelOptions() {
         const p = this.permissionLevels;
@@ -819,6 +894,11 @@ class SharePanelComponent {
             return 'pi pi-globe';
         return 'pi pi-question';
     }
+    /** Logical start padding for OU hierarchy (roots align with section padding). */
+    ouIndentStartPx(ou) {
+        const d = ou.depth ?? 0;
+        return 12 + d * 18;
+    }
     getPermLabel(perm) {
         if (perm.displayName?.trim())
             return perm.displayName.trim();
@@ -826,21 +906,25 @@ class SharePanelComponent {
             return `${perm.grantedToUserId.substring(0, 8)}…`;
         }
         if (perm.grantedToOuId) {
-            const ou = this.ouTree().find((o) => o.id === perm.grantedToOuId);
+            const id = perm.grantedToOuId;
+            const fromDefault = this.ouLabelById()[id];
+            if (fromDefault)
+                return fromDefault;
+            const ou = this.ouTree().find((o) => o.id === id);
             if (ou)
                 return ou.displayName;
-            return `${perm.grantedToOuId.substring(0, 8)}…`;
+            return `${id.substring(0, 8)}…`;
         }
         if (perm.grantedToAppId === '*')
             return this.i18n.t(this.everyoneLabelKey);
         return perm.grantedToAppId ?? '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SharePanelComponent, isStandalone: true, selector: "fly-share-panel", inputs: { targetName: "targetName", titleKey: "titleKey", loadPermissions: "loadPermissions", searchUsers: "searchUsers", loadOuTree: "loadOuTree", grantToUser: "grantToUser", grantToOu: "grantToOu", updatePermission: "updatePermission", revokePermission: "revokePermission", showApplyToChildren: "showApplyToChildren", permissionLevels: "permissionLevels", everyoneLabelKey: "everyoneLabelKey" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"fac-header\">\n      <h3>{{ titleKey | translate }}</h3>\n      <span class=\"fac-target-name\">{{ targetName }}</span>\n      <button type=\"button\" class=\"fac-close\" (click)=\"close.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"fac-add-section\">\n      <div class=\"fac-search-row\">\n        <input\n          type=\"text\"\n          class=\"fac-input\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\n        />\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\n          @for (opt of levelOptions; track opt.value) {\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n          }\n        </select>\n      </div>\n\n      @if (searchResults().length > 0) {\n        <div class=\"fac-search-results\">\n          @for (result of searchResults(); track result.id) {\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\n              <span class=\"fac-email\">{{ result.email }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      @if (showOuPicker()) {\n        <div class=\"fac-ou-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\n          @for (ou of ouTree(); track ou.id) {\n            <div class=\"fac-ou-item\" (click)=\"onGrantToOu(ou)\">\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ou.displayName }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      <div class=\"fac-toggle-row\">\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\n        </button>\n        @if (showApplyToChildren) {\n          <label class=\"fac-checkbox-label\">\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\n            {{ 'files.share.apply_children' | translate }}\n          </label>\n        }\n      </div>\n    </div>\n\n    <div class=\"fac-perms-section\">\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\n      @if (loading()) {\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\n      } @else if (permissions().length === 0) {\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\n      } @else {\n        @for (perm of permissions(); track perm.id) {\n          <div class=\"fac-perm-row\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isInherited) {\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\n              }\n            </div>\n            <div class=\"fac-perm-actions\">\n              <select\n                class=\"fac-select sm\"\n                [ngModel]=\"perm.level\"\n                (ngModelChange)=\"onUpdateLevel(perm, $event)\"\n                [disabled]=\"perm.isInherited === true\"\n              >\n                @for (opt of levelOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n                }\n              </select>\n              <button\n                type=\"button\"\n                class=\"fac-icon-btn danger\"\n                (click)=\"onRevokePermission(perm)\"\n                [disabled]=\"perm.isInherited === true\"\n                [title]=\"'files.share.revoke' | translate\"\n              >\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fac-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fac-panel{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:12px;width:480px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px #0006}.fac-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-header h3{margin:0;font-size:16px;font-weight:600}.fac-target-name{flex:1;font-size:13px;color:var(--text-color-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:4px}.fac-close:hover{color:var(--text-color)}.fac-add-section{padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-search-row{display:flex;gap:8px}.fac-input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fac-input:focus{border-color:var(--primary-color, #e8732a)}.fac-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px;color:inherit;font-size:13px;outline:none}.fac-select.sm{padding:4px 8px;font-size:12px}.fac-search-results{margin-top:8px;max-height:150px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-search-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-search-item:hover{background:var(--surface-hover)}.fac-search-item i{color:var(--text-color-secondary)}.fac-email{color:var(--text-color-secondary);font-size:12px;margin-inline-start:auto}.fac-ou-section{margin-top:10px;max-height:120px;overflow-y:auto}.fac-ou-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px;border-radius:6px}.fac-ou-item:hover{background:var(--surface-hover)}.fac-ou-item i{color:var(--text-color-secondary)}.fac-section-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-color-secondary);letter-spacing:.5px;margin-bottom:8px}.fac-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.fac-link{background:none;border:none;color:var(--primary-color, #e8732a);cursor:pointer;font-size:12px;padding:0}.fac-link:hover{text-decoration:underline}.fac-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fac-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fac-perms-section{flex:1;overflow-y:auto;padding:16px 20px}.fac-loading,.fac-empty{text-align:center;padding:20px;color:var(--text-color-secondary);font-size:13px}.fac-perm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}.fac-perm-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.fac-perm-info i{color:var(--text-color-secondary);flex-shrink:0}.fac-perm-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-badge{font-size:10px;padding:2px 6px;border-radius:8px;flex-shrink:0}.fac-badge.inherited{background:#ffffff1a;color:var(--text-color-secondary)}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SharePanelComponent, isStandalone: true, selector: "fly-share-panel", inputs: { targetName: "targetName", titleKey: "titleKey", loadPermissions: "loadPermissions", searchUsers: "searchUsers", loadOuTree: "loadOuTree", loadChartOptions: "loadChartOptions", loadOuLabelMap: "loadOuLabelMap", grantToUser: "grantToUser", grantToOu: "grantToOu", updatePermission: "updatePermission", revokePermission: "revokePermission", showApplyToChildren: "showApplyToChildren", permissionLevels: "permissionLevels", everyoneLabelKey: "everyoneLabelKey" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"fac-header\">\n      <h3>{{ titleKey | translate }}</h3>\n      <span class=\"fac-target-name\">{{ targetName }}</span>\n      <button type=\"button\" class=\"fac-close\" (click)=\"close.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"fac-add-section\">\n      <div class=\"fac-search-row\">\n        <input\n          type=\"text\"\n          class=\"fac-input\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\n        />\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\n          @for (opt of levelOptions; track opt.value) {\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n          }\n        </select>\n      </div>\n\n      @if (searchResults().length > 0) {\n        <div class=\"fac-search-results\">\n          @for (result of searchResults(); track result.id) {\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\n              <span class=\"fac-email\">{{ result.email }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      @if (chartOptions().length > 0) {\n        <div class=\"fac-chart-row\">\n          <label for=\"fac-org-chart-select\" class=\"fac-section-label\">{{\n            'files.share.org_chart' | translate\n          }}</label>\n          <select\n            id=\"fac-org-chart-select\"\n            class=\"fac-select\"\n            [ngModel]=\"selectedOrgChartId()\"\n            (ngModelChange)=\"onOrgChartSelectChange($event)\">\n            @for (opt of chartOptions(); track $index) {\n              <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\n            }\n          </select>\n        </div>\n      }\n\n      @if (showOuPicker()) {\n        <div class=\"fac-ou-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\n          @for (ou of ouTree(); track ou.id) {\n            <div\n              class=\"fac-ou-item\"\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n              (click)=\"onGrantToOu(ou)\"\n            >\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ou.displayName }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      <div class=\"fac-toggle-row\">\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\n        </button>\n        @if (showApplyToChildren) {\n          <label class=\"fac-checkbox-label\">\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\n            {{ 'files.share.apply_children' | translate }}\n          </label>\n        }\n      </div>\n    </div>\n\n    <div class=\"fac-perms-section\">\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\n      @if (loading()) {\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\n      } @else if (permissions().length === 0) {\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\n      } @else {\n        @for (perm of permissions(); track perm.id) {\n          <div class=\"fac-perm-row\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isInherited) {\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\n              }\n            </div>\n            <div class=\"fac-perm-actions\">\n              <select\n                class=\"fac-select sm\"\n                [ngModel]=\"perm.level\"\n                (ngModelChange)=\"onUpdateLevel(perm, $event)\"\n                [disabled]=\"perm.isInherited === true\"\n              >\n                @for (opt of levelOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n                }\n              </select>\n              <button\n                type=\"button\"\n                class=\"fac-icon-btn danger\"\n                (click)=\"onRevokePermission(perm)\"\n                [disabled]=\"perm.isInherited === true\"\n                [title]=\"'files.share.revoke' | translate\"\n              >\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fac-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fac-panel{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:12px;width:600px;max-width:min(600px,96vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px #0006}.fac-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-header h3{margin:0;font-size:16px;font-weight:600}.fac-target-name{flex:1;font-size:13px;color:var(--text-color-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:4px}.fac-close:hover{color:var(--text-color)}.fac-add-section{padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-search-row{display:flex;gap:8px}.fac-chart-row{display:flex;flex-direction:column;gap:6px;margin-top:12px}.fac-chart-row .fac-select{width:100%}.fac-input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fac-input:focus{border-color:var(--primary-color, #e8732a)}.fac-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px;color:inherit;font-size:13px;outline:none}.fac-select.sm{padding:4px 8px;font-size:12px}.fac-search-results{margin-top:8px;max-height:150px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-search-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-search-item:hover{background:var(--surface-hover)}.fac-search-item i{color:var(--text-color-secondary)}.fac-email{color:var(--text-color-secondary);font-size:12px;margin-inline-start:auto}.fac-ou-section{margin-top:10px;max-height:220px;overflow-y:auto}.fac-ou-item{display:flex;align-items:center;gap:8px;padding:6px 12px;padding-inline-start:12px;cursor:pointer;font-size:13px;border-radius:6px}.fac-ou-item:hover{background:var(--surface-hover)}.fac-ou-item i{color:var(--text-color-secondary)}.fac-section-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-color-secondary);letter-spacing:.5px;margin-bottom:8px}.fac-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.fac-link{background:none;border:none;color:var(--primary-color, #e8732a);cursor:pointer;font-size:12px;padding:0}.fac-link:hover{text-decoration:underline}.fac-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fac-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fac-perms-section{flex:1;overflow-y:auto;padding:16px 20px}.fac-loading,.fac-empty{text-align:center;padding:20px;color:var(--text-color-secondary);font-size:13px}.fac-perm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}.fac-perm-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.fac-perm-info i{color:var(--text-color-secondary);flex-shrink:0}.fac-perm-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-badge{font-size:10px;padding:2px 6px;border-radius:8px;flex-shrink:0}.fac-badge.inherited{background:#ffffff1a;color:var(--text-color-secondary)}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-share-panel', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"fac-header\">\n      <h3>{{ titleKey | translate }}</h3>\n      <span class=\"fac-target-name\">{{ targetName }}</span>\n      <button type=\"button\" class=\"fac-close\" (click)=\"close.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"fac-add-section\">\n      <div class=\"fac-search-row\">\n        <input\n          type=\"text\"\n          class=\"fac-input\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\n        />\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\n          @for (opt of levelOptions; track opt.value) {\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n          }\n        </select>\n      </div>\n\n      @if (searchResults().length > 0) {\n        <div class=\"fac-search-results\">\n          @for (result of searchResults(); track result.id) {\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\n              <span class=\"fac-email\">{{ result.email }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      @if (showOuPicker()) {\n        <div class=\"fac-ou-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\n          @for (ou of ouTree(); track ou.id) {\n            <div class=\"fac-ou-item\" (click)=\"onGrantToOu(ou)\">\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ou.displayName }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      <div class=\"fac-toggle-row\">\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\n        </button>\n        @if (showApplyToChildren) {\n          <label class=\"fac-checkbox-label\">\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\n            {{ 'files.share.apply_children' | translate }}\n          </label>\n        }\n      </div>\n    </div>\n\n    <div class=\"fac-perms-section\">\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\n      @if (loading()) {\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\n      } @else if (permissions().length === 0) {\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\n      } @else {\n        @for (perm of permissions(); track perm.id) {\n          <div class=\"fac-perm-row\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isInherited) {\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\n              }\n            </div>\n            <div class=\"fac-perm-actions\">\n              <select\n                class=\"fac-select sm\"\n                [ngModel]=\"perm.level\"\n                (ngModelChange)=\"onUpdateLevel(perm, $event)\"\n                [disabled]=\"perm.isInherited === true\"\n              >\n                @for (opt of levelOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n                }\n              </select>\n              <button\n                type=\"button\"\n                class=\"fac-icon-btn danger\"\n                (click)=\"onRevokePermission(perm)\"\n                [disabled]=\"perm.isInherited === true\"\n                [title]=\"'files.share.revoke' | translate\"\n              >\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fac-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fac-panel{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:12px;width:480px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px #0006}.fac-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-header h3{margin:0;font-size:16px;font-weight:600}.fac-target-name{flex:1;font-size:13px;color:var(--text-color-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:4px}.fac-close:hover{color:var(--text-color)}.fac-add-section{padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-search-row{display:flex;gap:8px}.fac-input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fac-input:focus{border-color:var(--primary-color, #e8732a)}.fac-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px;color:inherit;font-size:13px;outline:none}.fac-select.sm{padding:4px 8px;font-size:12px}.fac-search-results{margin-top:8px;max-height:150px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-search-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-search-item:hover{background:var(--surface-hover)}.fac-search-item i{color:var(--text-color-secondary)}.fac-email{color:var(--text-color-secondary);font-size:12px;margin-inline-start:auto}.fac-ou-section{margin-top:10px;max-height:120px;overflow-y:auto}.fac-ou-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px;border-radius:6px}.fac-ou-item:hover{background:var(--surface-hover)}.fac-ou-item i{color:var(--text-color-secondary)}.fac-section-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-color-secondary);letter-spacing:.5px;margin-bottom:8px}.fac-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.fac-link{background:none;border:none;color:var(--primary-color, #e8732a);cursor:pointer;font-size:12px;padding:0}.fac-link:hover{text-decoration:underline}.fac-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fac-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fac-perms-section{flex:1;overflow-y:auto;padding:16px 20px}.fac-loading,.fac-empty{text-align:center;padding:20px;color:var(--text-color-secondary);font-size:13px}.fac-perm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}.fac-perm-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.fac-perm-info i{color:var(--text-color-secondary);flex-shrink:0}.fac-perm-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-badge{font-size:10px;padding:2px 6px;border-radius:8px;flex-shrink:0}.fac-badge.inherited{background:#ffffff1a;color:var(--text-color-secondary)}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"] }]
+            args: [{ selector: 'fly-share-panel', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"fac-header\">\n      <h3>{{ titleKey | translate }}</h3>\n      <span class=\"fac-target-name\">{{ targetName }}</span>\n      <button type=\"button\" class=\"fac-close\" (click)=\"close.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"fac-add-section\">\n      <div class=\"fac-search-row\">\n        <input\n          type=\"text\"\n          class=\"fac-input\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\n        />\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\n          @for (opt of levelOptions; track opt.value) {\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n          }\n        </select>\n      </div>\n\n      @if (searchResults().length > 0) {\n        <div class=\"fac-search-results\">\n          @for (result of searchResults(); track result.id) {\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\n              <span class=\"fac-email\">{{ result.email }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      @if (chartOptions().length > 0) {\n        <div class=\"fac-chart-row\">\n          <label for=\"fac-org-chart-select\" class=\"fac-section-label\">{{\n            'files.share.org_chart' | translate\n          }}</label>\n          <select\n            id=\"fac-org-chart-select\"\n            class=\"fac-select\"\n            [ngModel]=\"selectedOrgChartId()\"\n            (ngModelChange)=\"onOrgChartSelectChange($event)\">\n            @for (opt of chartOptions(); track $index) {\n              <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\n            }\n          </select>\n        </div>\n      }\n\n      @if (showOuPicker()) {\n        <div class=\"fac-ou-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\n          @for (ou of ouTree(); track ou.id) {\n            <div\n              class=\"fac-ou-item\"\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n              (click)=\"onGrantToOu(ou)\"\n            >\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ou.displayName }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      <div class=\"fac-toggle-row\">\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\n        </button>\n        @if (showApplyToChildren) {\n          <label class=\"fac-checkbox-label\">\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\n            {{ 'files.share.apply_children' | translate }}\n          </label>\n        }\n      </div>\n    </div>\n\n    <div class=\"fac-perms-section\">\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\n      @if (loading()) {\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\n      } @else if (permissions().length === 0) {\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\n      } @else {\n        @for (perm of permissions(); track perm.id) {\n          <div class=\"fac-perm-row\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isInherited) {\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\n              }\n            </div>\n            <div class=\"fac-perm-actions\">\n              <select\n                class=\"fac-select sm\"\n                [ngModel]=\"perm.level\"\n                (ngModelChange)=\"onUpdateLevel(perm, $event)\"\n                [disabled]=\"perm.isInherited === true\"\n              >\n                @for (opt of levelOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n                }\n              </select>\n              <button\n                type=\"button\"\n                class=\"fac-icon-btn danger\"\n                (click)=\"onRevokePermission(perm)\"\n                [disabled]=\"perm.isInherited === true\"\n                [title]=\"'files.share.revoke' | translate\"\n              >\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fac-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fac-panel{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:12px;width:600px;max-width:min(600px,96vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px #0006}.fac-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-header h3{margin:0;font-size:16px;font-weight:600}.fac-target-name{flex:1;font-size:13px;color:var(--text-color-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:4px}.fac-close:hover{color:var(--text-color)}.fac-add-section{padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-search-row{display:flex;gap:8px}.fac-chart-row{display:flex;flex-direction:column;gap:6px;margin-top:12px}.fac-chart-row .fac-select{width:100%}.fac-input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fac-input:focus{border-color:var(--primary-color, #e8732a)}.fac-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px;color:inherit;font-size:13px;outline:none}.fac-select.sm{padding:4px 8px;font-size:12px}.fac-search-results{margin-top:8px;max-height:150px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-search-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-search-item:hover{background:var(--surface-hover)}.fac-search-item i{color:var(--text-color-secondary)}.fac-email{color:var(--text-color-secondary);font-size:12px;margin-inline-start:auto}.fac-ou-section{margin-top:10px;max-height:220px;overflow-y:auto}.fac-ou-item{display:flex;align-items:center;gap:8px;padding:6px 12px;padding-inline-start:12px;cursor:pointer;font-size:13px;border-radius:6px}.fac-ou-item:hover{background:var(--surface-hover)}.fac-ou-item i{color:var(--text-color-secondary)}.fac-section-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-color-secondary);letter-spacing:.5px;margin-bottom:8px}.fac-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.fac-link{background:none;border:none;color:var(--primary-color, #e8732a);cursor:pointer;font-size:12px;padding:0}.fac-link:hover{text-decoration:underline}.fac-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fac-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fac-perms-section{flex:1;overflow-y:auto;padding:16px 20px}.fac-loading,.fac-empty{text-align:center;padding:20px;color:var(--text-color-secondary);font-size:13px}.fac-perm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}.fac-perm-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.fac-perm-info i{color:var(--text-color-secondary);flex-shrink:0}.fac-perm-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-badge{font-size:10px;padding:2px 6px;border-radius:8px;flex-shrink:0}.fac-badge.inherited{background:#ffffff1a;color:var(--text-color-secondary)}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"] }]
         }], propDecorators: { targetName: [{
                 type: Input
             }], titleKey: [{
@@ -854,6 +938,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }], loadOuTree: [{
                 type: Input,
                 args: [{ required: true }]
+            }], loadChartOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadOuLabelMap: [{
+                type: Input,
+                args: [{ required: true }]
             }], grantToUser: [{
                 type: Input,
                 args: [{ required: true }]
@@ -876,6 +966,599 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 type: Output
             }] } });
 
+/** Full-bleed loading overlay for window content (shell) or embedded hosts. */
+class FlyBlockUiComponent {
+    /** When false, the overlay is not rendered (host may use @if instead). */
+    active = input.required(...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** i18n key for status text; empty uses `common.loading`. */
+    messageKey = input('', ...(ngDevMode ? [{ debugName: "messageKey" }] : /* istanbul ignore next */ []));
+    resolvedMessageKey = computed(() => {
+        const k = this.messageKey()?.trim();
+        return k && k.length > 0 ? k : 'common.loading';
+    }, ...(ngDevMode ? [{ debugName: "resolvedMessageKey" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyBlockUiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
+
+/**
+ * Image upload component with built-in cropperjs cropping modal.
+ *
+ * Usage:
+ * ```html
+ * <fly-image-upload
+ *   [aspectRatio]="16/9"
+ *   [currentImageId]="trend.coverImageId"
+ *   sourceApp="circles"
+ *   sourceEntityType="trend"
+ *   (uploaded)="onImageUploaded($event)"
+ *   (removed)="onImageRemoved()"
+ * />
+ * ```
+ */
+class FlyImageUploadComponent {
+    http = inject(HttpClient);
+    // ── Inputs ──
+    aspectRatio = input(16 / 9, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    maxSizeBytes = input(5 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxSizeBytes" }] : /* istanbul ignore next */ []));
+    currentImageId = input(null, ...(ngDevMode ? [{ debugName: "currentImageId" }] : /* istanbul ignore next */ []));
+    sourceApp = input('unknown', ...(ngDevMode ? [{ debugName: "sourceApp" }] : /* istanbul ignore next */ []));
+    sourceEntityType = input(null, ...(ngDevMode ? [{ debugName: "sourceEntityType" }] : /* istanbul ignore next */ []));
+    sourceEntityId = input(null, ...(ngDevMode ? [{ debugName: "sourceEntityId" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    uploaded = output();
+    removed = output();
+    // ── State ──
+    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    showCropper = signal(false, ...(ngDevMode ? [{ debugName: "showCropper" }] : /* istanbul ignore next */ []));
+    rawImageUrl = signal('', ...(ngDevMode ? [{ debugName: "rawImageUrl" }] : /* istanbul ignore next */ []));
+    localBlob = signal(null, ...(ngDevMode ? [{ debugName: "localBlob" }] : /* istanbul ignore next */ []));
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    cropImage = viewChild('cropImage', ...(ngDevMode ? [{ debugName: "cropImage" }] : /* istanbul ignore next */ []));
+    cropper = null;
+    selectedFile = null;
+    previewUrl = computed(() => {
+        if (this.localBlob())
+            return this.localBlob();
+        const id = this.currentImageId();
+        return id ? `/api/files/${id}/download` : null;
+    }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : /* istanbul ignore next */ []));
+    sizeHint = computed(() => {
+        const mb = this.maxSizeBytes() / (1024 * 1024);
+        return `Max ${mb}MB`;
+    }, ...(ngDevMode ? [{ debugName: "sizeHint" }] : /* istanbul ignore next */ []));
+    triggerFileInput() {
+        this.fileInput()?.nativeElement.click();
+    }
+    onDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    onDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const file = e.dataTransfer?.files?.[0];
+        if (file)
+            this.processFile(file);
+    }
+    onFileSelected(e) {
+        const input = e.target;
+        const file = input.files?.[0];
+        if (file)
+            this.processFile(file);
+        input.value = '';
+    }
+    removeImage() {
+        this.localBlob.set(null);
+        this.error.set(null);
+        this.removed.emit();
+    }
+    cancelCrop() {
+        this.showCropper.set(false);
+        this.destroyCropper();
+        if (this.rawImageUrl())
+            URL.revokeObjectURL(this.rawImageUrl());
+        this.rawImageUrl.set('');
+    }
+    applyCrop() {
+        if (!this.cropper)
+            return;
+        const canvas = this.cropper.getCroppedCanvas({ maxWidth: 1920, maxHeight: 1080 });
+        this.showCropper.set(false);
+        this.destroyCropper();
+        if (this.rawImageUrl())
+            URL.revokeObjectURL(this.rawImageUrl());
+        this.rawImageUrl.set('');
+        canvas.toBlob((blob) => {
+            if (!blob)
+                return;
+            const fileName = this.selectedFile?.name ?? 'cropped-image.jpg';
+            const file = new File([blob], fileName, { type: blob.type || 'image/jpeg' });
+            this.uploadFile(file);
+        }, 'image/jpeg', 0.9);
+    }
+    processFile(file) {
+        this.error.set(null);
+        if (!file.type.startsWith('image/')) {
+            this.error.set('Only image files are allowed');
+            return;
+        }
+        if (file.size > this.maxSizeBytes()) {
+            const mb = this.maxSizeBytes() / (1024 * 1024);
+            this.error.set(`File exceeds ${mb}MB limit`);
+            return;
+        }
+        this.selectedFile = file;
+        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);
+    }
+    initCropper() {
+        this.destroyCropper();
+        const imgEl = this.cropImage()?.nativeElement;
+        if (!imgEl)
+            return;
+        this.cropper = new Cropper(imgEl, {
+            aspectRatio: this.aspectRatio(),
+            viewMode: 1,
+            autoCropArea: 0.9,
+            responsive: true,
+            background: false,
+        });
+    }
+    destroyCropper() {
+        this.cropper?.destroy();
+        this.cropper = null;
+    }
+    uploadFile(file) {
+        this.uploading.set(true);
+        this.error.set(null);
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+        formData.append('sourceApp', this.sourceApp());
+        if (this.sourceEntityType())
+            formData.append('sourceEntityType', this.sourceEntityType());
+        if (this.sourceEntityId())
+            formData.append('sourceEntityId', this.sourceEntityId());
+        this.http.post('/api/files/upload', formData).subscribe({
+            next: (res) => {
+                this.uploading.set(false);
+                const info = res.data ?? res;
+                this.localBlob.set(URL.createObjectURL(file));
+                this.uploaded.emit(info);
+            },
+            error: (err) => {
+                this.uploading.set(false);
+                this.error.set(err?.error?.message ?? 'Upload failed');
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyImageUploadComponent, isStandalone: true, selector: "fly-image-upload", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxSizeBytes: { classPropertyName: "maxSizeBytes", publicName: "maxSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, currentImageId: { classPropertyName: "currentImageId", publicName: "currentImageId", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploaded: "uploaded", removed: "removed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "cropImage", first: true, predicate: ["cropImage"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="fly-image-upload">
+      @if (previewUrl()) {
+        <div class="fly-image-upload__preview">
+          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
+          <div class="fly-image-upload__overlay">
+            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
+              <span class="pi pi-pencil" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
+              <span class="pi pi-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      } @else {
+        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          @if (uploading()) {
+            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
+          } @else {
+            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
+            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
+          }
+        </button>
+      }
+
+      @if (error()) {
+        <div class="fly-image-upload__error">{{ error() }}</div>
+      }
+
+      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
+
+      @if (showCropper()) {
+        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
+          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
+            <div class="fly-image-upload__crop-header">
+              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
+            </div>
+            <div class="fly-image-upload__crop-body">
+              <img #cropImage [src]="rawImageUrl()" alt="" />
+            </div>
+            <div class="fly-image-upload__crop-footer">
+              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
+              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.spatial-theme .fly-image-upload__crop-modal{background:#ffffffa6;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4)}html.spatial-theme .fly-image-upload__crop-header,html.spatial-theme .fly-image-upload__crop-footer{background:transparent}html.spatial-theme .fly-image-upload__crop-body{background:#0000000d}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyImageUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-image-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="fly-image-upload">
+      @if (previewUrl()) {
+        <div class="fly-image-upload__preview">
+          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
+          <div class="fly-image-upload__overlay">
+            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
+              <span class="pi pi-pencil" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
+              <span class="pi pi-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      } @else {
+        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          @if (uploading()) {
+            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
+          } @else {
+            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
+            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
+          }
+        </button>
+      }
+
+      @if (error()) {
+        <div class="fly-image-upload__error">{{ error() }}</div>
+      }
+
+      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
+
+      @if (showCropper()) {
+        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
+          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
+            <div class="fly-image-upload__crop-header">
+              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
+            </div>
+            <div class="fly-image-upload__crop-body">
+              <img #cropImage [src]="rawImageUrl()" alt="" />
+            </div>
+            <div class="fly-image-upload__crop-footer">
+              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
+              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.spatial-theme .fly-image-upload__crop-modal{background:#ffffffa6;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4)}html.spatial-theme .fly-image-upload__crop-header,html.spatial-theme .fly-image-upload__crop-footer{background:transparent}html.spatial-theme .fly-image-upload__crop-body{background:#0000000d}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"] }]
+        }], propDecorators: { aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeBytes", required: false }] }], currentImageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentImageId", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], uploaded: [{ type: i0.Output, args: ["uploaded"] }], removed: [{ type: i0.Output, args: ["removed"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], cropImage: [{ type: i0.ViewChild, args: ['cropImage', { isSignal: true }] }] } });
+
+const FILE_ICONS = {
+    'application/pdf': 'pi-file-pdf',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'pi-file-word',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'pi-file-excel',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pi-file',
+    'image/': 'pi-image',
+    'video/': 'pi-video',
+    'audio/': 'pi-volume-up',
+};
+function iconForType(contentType) {
+    for (const [prefix, icon] of Object.entries(FILE_ICONS)) {
+        if (contentType.startsWith(prefix))
+            return icon;
+    }
+    return 'pi-file';
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * Multi-file upload with drag-drop, progress, and validation.
+ *
+ * Usage:
+ * ```html
+ * <fly-file-upload
+ *   [maxFiles]="5"
+ *   [maxFileSizeBytes]="5242880"
+ *   accept=".pdf,.docx,.xlsx"
+ *   [(files)]="trend.attachments"
+ *   sourceApp="circles"
+ *   sourceEntityType="trend"
+ *   (filesChanged)="onAttachmentsChanged($event)"
+ * />
+ * ```
+ */
+class FlyFileUploadComponent {
+    http = inject(HttpClient);
+    // ── Inputs ──
+    maxFiles = input(5, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    maxFileSizeBytes = input(5 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxFileSizeBytes" }] : /* istanbul ignore next */ []));
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    sourceApp = input('unknown', ...(ngDevMode ? [{ debugName: "sourceApp" }] : /* istanbul ignore next */ []));
+    sourceEntityType = input(null, ...(ngDevMode ? [{ debugName: "sourceEntityType" }] : /* istanbul ignore next */ []));
+    sourceEntityId = input(null, ...(ngDevMode ? [{ debugName: "sourceEntityId" }] : /* istanbul ignore next */ []));
+    /** Two-way model for completed file metadata. */
+    files = model([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    filesChanged = output();
+    // ── State ──
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    slots = signal([], ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    /** Pre-existing files loaded from the entity (before any new uploads this session). */
+    existingFiles = signal([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : /* istanbul ignore next */ []));
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    allSlots = computed(() => this.slots(), ...(ngDevMode ? [{ debugName: "allSlots" }] : /* istanbul ignore next */ []));
+    canAddMore = computed(() => {
+        const current = this.files().length + this.slots().filter(s => s.status === 'uploading').length;
+        return current < this.maxFiles();
+    }, ...(ngDevMode ? [{ debugName: "canAddMore" }] : /* istanbul ignore next */ []));
+    limitHint = computed(() => {
+        const mb = this.maxFileSizeBytes() / (1024 * 1024);
+        return `Max ${this.maxFiles()} files, ${mb}MB each`;
+    }, ...(ngDevMode ? [{ debugName: "limitHint" }] : /* istanbul ignore next */ []));
+    triggerFileInput() {
+        this.fileInput()?.nativeElement.click();
+    }
+    onDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragging.set(true);
+    }
+    onDragLeave(e) {
+        e.preventDefault();
+        this.dragging.set(false);
+    }
+    onDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragging.set(false);
+        const fileList = e.dataTransfer?.files;
+        if (fileList)
+            this.processFiles(Array.from(fileList));
+    }
+    onFilesSelected(e) {
+        const input = e.target;
+        if (input.files)
+            this.processFiles(Array.from(input.files));
+        input.value = '';
+    }
+    removeSlot(slot) {
+        this.slots.update(s => s.filter(x => x !== slot));
+        if (slot.info) {
+            this.files.update(f => f.filter(x => x.id !== slot.info.id));
+            this.filesChanged.emit(this.files());
+        }
+    }
+    removeExisting(f) {
+        this.existingFiles.update(list => list.filter(x => x.id !== f.id));
+        this.files.update(list => list.filter(x => x.id !== f.id));
+        this.filesChanged.emit(this.files());
+    }
+    iconFor(slot) { return iconForType(slot.file.type); }
+    iconForInfo(f) { return iconForType(f.contentType); }
+    formatFileSize(bytes) { return formatSize(bytes); }
+    processFiles(newFiles) {
+        this.error.set(null);
+        const currentCount = this.files().length + this.slots().filter(s => s.status === 'uploading').length;
+        const remaining = this.maxFiles() - currentCount;
+        if (remaining <= 0) {
+            this.error.set(`Maximum ${this.maxFiles()} files allowed`);
+            return;
+        }
+        const toUpload = newFiles.slice(0, remaining);
+        if (newFiles.length > remaining) {
+            this.error.set(`Only ${remaining} more file(s) can be added`);
+        }
+        for (const file of toUpload) {
+            if (file.size > this.maxFileSizeBytes()) {
+                const mb = this.maxFileSizeBytes() / (1024 * 1024);
+                this.error.set(`"${file.name}" exceeds ${mb}MB limit`);
+                continue;
+            }
+            this.uploadFile(file);
+        }
+    }
+    uploadFile(file) {
+        const slot = { file, progress: 0, status: 'uploading' };
+        this.slots.update(s => [...s, slot]);
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+        formData.append('sourceApp', this.sourceApp());
+        if (this.sourceEntityType())
+            formData.append('sourceEntityType', this.sourceEntityType());
+        if (this.sourceEntityId())
+            formData.append('sourceEntityId', this.sourceEntityId());
+        this.http.post('/api/files/upload', formData, {
+            reportProgress: true,
+            observe: 'events',
+        }).subscribe({
+            next: (event) => {
+                if (event.type === HttpEventType.UploadProgress && event.total) {
+                    slot.progress = Math.round((event.loaded / event.total) * 100);
+                    this.slots.update(s => [...s]); // trigger signal change
+                }
+                else if (event.type === HttpEventType.Response) {
+                    const info = event.body?.data ?? event.body;
+                    slot.status = 'done';
+                    slot.progress = 100;
+                    slot.info = info;
+                    this.slots.update(s => [...s]);
+                    this.files.update(f => [...f, info]);
+                    this.filesChanged.emit(this.files());
+                }
+            },
+            error: (err) => {
+                slot.status = 'error';
+                slot.error = err?.error?.message ?? 'Upload failed';
+                this.slots.update(s => [...s]);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyFileUploadComponent, isStandalone: true, selector: "fly-file-upload", inputs: { maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesChanged: "filesChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="fly-file-upload">
+      @if (canAddMore()) {
+        <div class="fly-file-upload__dropzone"
+             [class.fly-file-upload__dropzone--drag]="dragging()"
+             (click)="triggerFileInput()"
+             (dragover)="onDragOver($event)"
+             (dragleave)="onDragLeave($event)"
+             (drop)="onDrop($event)">
+          <span class="pi pi-cloud-upload fly-file-upload__icon" aria-hidden="true"></span>
+          <span class="fly-file-upload__label">{{ 'files.fileUpload.dropOrClick' | translate }}</span>
+          <span class="fly-file-upload__hint">{{ limitHint() }}</span>
+        </div>
+      }
+
+      @if (error()) {
+        <div class="fly-file-upload__error">{{ error() }}</div>
+      }
+
+      @if (allSlots().length) {
+        <ul class="fly-file-upload__list">
+          @for (slot of allSlots(); track slot.file.name + slot.file.size) {
+            <li class="fly-file-upload__item">
+              <span class="pi {{ iconFor(slot) }} fly-file-upload__file-icon" aria-hidden="true"></span>
+              <div class="fly-file-upload__file-info">
+                <span class="fly-file-upload__file-name">{{ slot.file.name }}</span>
+                <span class="fly-file-upload__file-size">{{ formatFileSize(slot.file.size) }}</span>
+              </div>
+              @if (slot.status === 'uploading') {
+                <div class="fly-file-upload__progress-track">
+                  <div class="fly-file-upload__progress-fill" [style.width.%]="slot.progress"></div>
+                </div>
+              }
+              @if (slot.status === 'error') {
+                <span class="fly-file-upload__file-error" [title]="slot.error ?? ''">
+                  <span class="pi pi-exclamation-triangle" aria-hidden="true"></span>
+                </span>
+              }
+              @if (slot.status === 'done') {
+                <span class="pi pi-check-circle fly-file-upload__file-ok" aria-hidden="true"></span>
+              }
+              <button type="button" class="fly-file-upload__remove-btn" (click)="removeSlot(slot)" [title]="'common.remove' | translate">
+                <span class="pi pi-times" aria-hidden="true"></span>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+
+      @if (existingFiles().length && !allSlots().length) {
+        <ul class="fly-file-upload__list">
+          @for (f of existingFiles(); track f.id) {
+            <li class="fly-file-upload__item">
+              <span class="pi {{ iconForInfo(f) }} fly-file-upload__file-icon" aria-hidden="true"></span>
+              <div class="fly-file-upload__file-info">
+                <span class="fly-file-upload__file-name">{{ f.fileName }}</span>
+                <span class="fly-file-upload__file-size">{{ formatFileSize(f.sizeBytes) }}</span>
+              </div>
+              <span class="pi pi-check-circle fly-file-upload__file-ok" aria-hidden="true"></span>
+              <button type="button" class="fly-file-upload__remove-btn" (click)="removeExisting(f)" [title]="'common.remove' | translate">
+                <span class="pi pi-times" aria-hidden="true"></span>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+
+      <input #fileInput type="file" [accept]="accept()" multiple class="fly-file-upload__hidden" (change)="onFilesSelected($event)" />
+    </div>
+  `, isInline: true, styles: [".fly-file-upload{display:flex;flex-direction:column;gap:8px}.fly-file-upload__hidden{display:none}.fly-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:10px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--system-red, #ef4444);padding:4px 0}.fly-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.fly-file-upload__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--separator-primary, #e5e7eb);border-radius:8px;background:var(--fill-quaternary, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--label-tertiary, #9ca3af);flex-shrink:0}.fly-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fly-file-upload__file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label-primary, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--fill-tertiary, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent-primary, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--system-green, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--system-red, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--label-tertiary, #9ca3af);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}.fly-file-upload__remove-btn:hover{color:var(--system-red, #ef4444);background:var(--fill-tertiary, #f3f4f6)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-file-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="fly-file-upload">
+      @if (canAddMore()) {
+        <div class="fly-file-upload__dropzone"
+             [class.fly-file-upload__dropzone--drag]="dragging()"
+             (click)="triggerFileInput()"
+             (dragover)="onDragOver($event)"
+             (dragleave)="onDragLeave($event)"
+             (drop)="onDrop($event)">
+          <span class="pi pi-cloud-upload fly-file-upload__icon" aria-hidden="true"></span>
+          <span class="fly-file-upload__label">{{ 'files.fileUpload.dropOrClick' | translate }}</span>
+          <span class="fly-file-upload__hint">{{ limitHint() }}</span>
+        </div>
+      }
+
+      @if (error()) {
+        <div class="fly-file-upload__error">{{ error() }}</div>
+      }
+
+      @if (allSlots().length) {
+        <ul class="fly-file-upload__list">
+          @for (slot of allSlots(); track slot.file.name + slot.file.size) {
+            <li class="fly-file-upload__item">
+              <span class="pi {{ iconFor(slot) }} fly-file-upload__file-icon" aria-hidden="true"></span>
+              <div class="fly-file-upload__file-info">
+                <span class="fly-file-upload__file-name">{{ slot.file.name }}</span>
+                <span class="fly-file-upload__file-size">{{ formatFileSize(slot.file.size) }}</span>
+              </div>
+              @if (slot.status === 'uploading') {
+                <div class="fly-file-upload__progress-track">
+                  <div class="fly-file-upload__progress-fill" [style.width.%]="slot.progress"></div>
+                </div>
+              }
+              @if (slot.status === 'error') {
+                <span class="fly-file-upload__file-error" [title]="slot.error ?? ''">
+                  <span class="pi pi-exclamation-triangle" aria-hidden="true"></span>
+                </span>
+              }
+              @if (slot.status === 'done') {
+                <span class="pi pi-check-circle fly-file-upload__file-ok" aria-hidden="true"></span>
+              }
+              <button type="button" class="fly-file-upload__remove-btn" (click)="removeSlot(slot)" [title]="'common.remove' | translate">
+                <span class="pi pi-times" aria-hidden="true"></span>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+
+      @if (existingFiles().length && !allSlots().length) {
+        <ul class="fly-file-upload__list">
+          @for (f of existingFiles(); track f.id) {
+            <li class="fly-file-upload__item">
+              <span class="pi {{ iconForInfo(f) }} fly-file-upload__file-icon" aria-hidden="true"></span>
+              <div class="fly-file-upload__file-info">
+                <span class="fly-file-upload__file-name">{{ f.fileName }}</span>
+                <span class="fly-file-upload__file-size">{{ formatFileSize(f.sizeBytes) }}</span>
+              </div>
+              <span class="pi pi-check-circle fly-file-upload__file-ok" aria-hidden="true"></span>
+              <button type="button" class="fly-file-upload__remove-btn" (click)="removeExisting(f)" [title]="'common.remove' | translate">
+                <span class="pi pi-times" aria-hidden="true"></span>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+
+      <input #fileInput type="file" [accept]="accept()" multiple class="fly-file-upload__hidden" (change)="onFilesSelected($event)" />
+    </div>
+  `, styles: [".fly-file-upload{display:flex;flex-direction:column;gap:8px}.fly-file-upload__hidden{display:none}.fly-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:10px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--system-red, #ef4444);padding:4px 0}.fly-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.fly-file-upload__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--separator-primary, #e5e7eb);border-radius:8px;background:var(--fill-quaternary, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--label-tertiary, #9ca3af);flex-shrink:0}.fly-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fly-file-upload__file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label-primary, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--fill-tertiary, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent-primary, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--system-green, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--system-red, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--label-tertiary, #9ca3af);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}.fly-file-upload__remove-btn:hover{color:var(--system-red, #ef4444);background:var(--fill-tertiary, #f3f4f6)}\n"] }]
+        }], propDecorators: { maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
 /*
  * @mohamedatia/fly-design-system — Public API
  * https://www.npmjs.com/package/@mohamedatia/fly-design-system
@@ -901,6 +1584,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *         MessageBoxButtons, MessageBoxIcon, DialogResult, MessageBoxOptions, MessageBoxButton exported.
  * v1.5.0: SharePanelComponent — generic share/ACL overlay; host supplies API callbacks and optional
  *         permission level options (file ACL vs note-style View/Edit).
+ * v1.6.0: SharePanelComponent — `loadOuTree(chartId: string | null)`; optional `loadChartOptions` for
+ *         default vs alternative org charts (OU grants still use real OU ids). `ShareOrgChartOption` exported.
+ * v1.7.0: SharePanelComponent — `loadChartOptions` and `loadOuLabelMap` are required; chart tree loads after
+ *         options resolve (no spurious null fetch). `loadOuLabelMap` supplies default-tree labels for OU rows.
+ * v1.8.0: `WindowInstance` optional `contentUiBlocked` / `contentUiBlockMessageKey`; `WindowManagerService`
+ *         `beginContentUiBlock` / `endContentUiBlock` default no-ops; `FlyBlockUiComponent` for shell window overlay.
  * See docs/ExternalAppsGuide/03-frontend-app.md.
  */
 
@@ -908,5 +1597,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, ContextMenuComponent, DialogResult, FlyThemeService, I18nService, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, isRtlLocale };
+export { AuthService, ContextMenuComponent, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_THEME_MODE_IDS, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyThemeService, I18nService, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, isRtlLocale, normalizeFlyTheme };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map