@mohamedatia/fly-design-system 1.4.0 → 1.9.0

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

@@ -1,7 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, Pipe, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, ElementRef } 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 { 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');
 
@@ -225,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');
@@ -260,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
@@ -348,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.
@@ -417,32 +453,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class ContextMenuComponent {
     menuEl;
+    doc = inject(DOCUMENT);
+    hostEl = inject((ElementRef));
     x = input.required(...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
     y = input.required(...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
     sections = input.required(...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     action = output();
     closed = output();
-    menuWidth = signal(220, ...(ngDevMode ? [{ debugName: "menuWidth" }] : /* istanbul ignore next */ []));
-    menuHeight = signal(200, ...(ngDevMode ? [{ debugName: "menuHeight" }] : /* istanbul ignore next */ []));
+    menuWidth = signal(0, ...(ngDevMode ? [{ debugName: "menuWidth" }] : /* istanbul ignore next */ []));
+    menuHeight = signal(0, ...(ngDevMode ? [{ debugName: "menuHeight" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
+    // Resolved position: clamp to viewport so the menu never overflows an edge.
+    // menuWidth/Height start at 0 so the first render places the menu at (x,y)
+    // with no clamping; ngAfterViewInit measures the real size and updates the
+    // signals, which re-evaluates this computed and repositions correctly.
     clampedPos = computed(() => {
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
+        const vw = this.doc.defaultView?.innerWidth ?? 0;
+        const vh = this.doc.defaultView?.innerHeight ?? 0;
+        const w = this.menuWidth();
+        const h = this.menuHeight();
+        const x = this.x();
+        const y = this.y();
         return {
-            x: Math.min(this.x(), vw - this.menuWidth()),
-            y: Math.min(this.y(), vh - this.menuHeight()),
+            left: w > 0 ? Math.min(x, vw - w - 8) : x,
+            top: h > 0 ? Math.min(y, vh - h - 8) : y,
         };
     }, ...(ngDevMode ? [{ debugName: "clampedPos" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
+        // Portal: move host to <body> so position:fixed resolves against the true
+        // viewport, not against any transformed/backdrop-filtered ancestor window.
+        this.doc.body.appendChild(this.hostEl.nativeElement);
+        // Measure after portal move so offsetWidth/Height are accurate.
         const el = this.menuEl?.nativeElement;
         if (el) {
             this.menuWidth.set(el.offsetWidth);
             this.menuHeight.set(el.offsetHeight);
         }
-        // Store focus origin and move focus to first menu item
         this.previouslyFocused = document.activeElement;
         this.focusItem(0);
     }
+    ngOnDestroy() {
+        const el = this.hostEl.nativeElement;
+        if (el.parentNode === this.doc.body) {
+            this.doc.body.removeChild(el);
+        }
+    }
     onAction(id) {
         this.action.emit(id);
         this.close();
@@ -501,11 +556,11 @@ class ContextMenuComponent {
         this.previouslyFocused = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ContextMenuComponent, isStandalone: true, selector: "fly-context-menu", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", closed: "closed" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "document:keydown.escape": "onEscape()", "document:contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().x\"\n  [style.top.px]=\"clampedPos().y\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:9500}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ContextMenuComponent, isStandalone: true, selector: "fly-context-menu", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", closed: "closed" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "document:keydown.escape": "onEscape()", "document:contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().left\"\n  [style.top.px]=\"clampedPos().top\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{display:contents}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\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: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-context-menu', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().x\"\n  [style.top.px]=\"clampedPos().y\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:9500}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"] }]
+            args: [{ selector: 'fly-context-menu', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().left\"\n  [style.top.px]=\"clampedPos().top\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{display:contents}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"] }]
         }], propDecorators: { menuEl: [{
                 type: ViewChild,
                 args: ['contextMenu']
@@ -680,11 +735,835 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+/** Default permission levels (file-style ACL). Hosts can override via `permissionLevels`. */
+const SHARE_PANEL_DEFAULT_FILE_LEVELS = [
+    { value: 'View', labelKey: 'files.share.level_view' },
+    { value: 'Download', labelKey: 'files.share.level_download' },
+    { value: 'Edit', labelKey: 'files.share.level_edit' },
+    { value: 'FullControl', labelKey: 'files.share.level_full' },
+];
+class SharePanelComponent {
+    /** Resource title shown in the header */
+    targetName = '';
+    /** i18n key for panel title */
+    titleKey = 'files.share.title';
+    /** 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;
+    revokePermission;
+    /** When true, show “apply to children” (e.g. folders). */
+    showApplyToChildren = false;
+    /** Override level dropdown options (e.g. notes: View / Edit only). */
+    permissionLevels;
+    /** i18n key for wildcard app grant label */
+    everyoneLabelKey = 'files.share.everyone';
+    close = new EventEmitter();
+    destroyRef = inject(DestroyRef);
+    i18n = inject(I18nService);
+    permissions = signal([], ...(ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    searchQuery = '';
+    newLevel = '';
+    applyToChildren = false;
+    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.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;
+        return p && p.length > 0 ? p : SHARE_PANEL_DEFAULT_FILE_LEVELS;
+    }
+    refreshPermissions() {
+        this.loading.set(true);
+        this.loadPermissions()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (perms) => {
+                this.permissions.set(perms);
+                this.loading.set(false);
+            },
+            error: () => {
+                this.permissions.set([]);
+                this.loading.set(false);
+            },
+        });
+    }
+    onSearchInput() {
+        if (this.searchTimeout)
+            clearTimeout(this.searchTimeout);
+        const query = this.searchQuery.trim();
+        if (query.length < 2) {
+            this.searchResults.set([]);
+            return;
+        }
+        this.searchTimeout = setTimeout(() => {
+            this.searchUsers(query)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (items) => this.searchResults.set(items),
+                error: () => this.searchResults.set([]),
+            });
+        }, 300);
+    }
+    onGrantToUser(user) {
+        this.searchResults.set([]);
+        this.searchQuery = '';
+        this.grantToUser(user.id, this.newLevel, this.applyToChildren)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({ next: () => this.refreshPermissions() });
+    }
+    onGrantToOu(ou) {
+        this.grantToOu(ou.id, this.newLevel, this.applyToChildren)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({ next: () => this.refreshPermissions() });
+    }
+    onUpdateLevel(perm, level) {
+        this.updatePermission(perm.id, level)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({ next: () => this.refreshPermissions() });
+    }
+    onRevokePermission(perm) {
+        this.revokePermission(perm.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({ next: () => this.refreshPermissions() });
+    }
+    getPermIcon(perm) {
+        if (perm.grantedToUserId)
+            return 'pi pi-user';
+        if (perm.grantedToOuId)
+            return 'pi pi-sitemap';
+        if (perm.grantedToAppId)
+            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();
+        if (perm.grantedToUserId) {
+            return `${perm.grantedToUserId.substring(0, 8)}…`;
+        }
+        if (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 `${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", 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 (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: [{
+                type: Input
+            }], loadPermissions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], searchUsers: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadOuTree: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadChartOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadOuLabelMap: [{
+                type: Input,
+                args: [{ required: true }]
+            }], grantToUser: [{
+                type: Input,
+                args: [{ required: true }]
+            }], grantToOu: [{
+                type: Input,
+                args: [{ required: true }]
+            }], updatePermission: [{
+                type: Input,
+                args: [{ required: true }]
+            }], revokePermission: [{
+                type: Input,
+                args: [{ required: true }]
+            }], showApplyToChildren: [{
+                type: Input
+            }], permissionLevels: [{
+                type: Input
+            }], everyoneLabelKey: [{
+                type: Input
+            }], close: [{
+                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;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0000004d}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden}.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)}\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;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0000004d}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden}.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)}\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
  *
- * This is the single entry point for Business App developers.
+ * This is the single entry point for Business / Supporting App developers.
  * Import everything from '@mohamedatia/fly-design-system' — never from relative shell paths.
  *
  * NOTE: This package is published under @mohamedatia/fly-design-system until the @fly
@@ -703,12 +1582,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *         shell to design system. MessageBoxService + MessageBoxComponent added (Windows Forms-style
  *         modal dialogs with localized button labels, focus management, and Escape key support).
  *         MessageBoxButtons, MessageBoxIcon, DialogResult, MessageBoxOptions, MessageBoxButton exported.
- * See BusinessAppsGuide/03-frontend-app.md.
+ * 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.
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, ContextMenuComponent, DialogResult, FlyThemeService, I18nService, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, 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