@mohamedatia/fly-design-system 2.11.0 → 2.13.0

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

@@ -11,6 +11,72 @@ import { switchMap, debounceTime, distinctUntilChanged, filter } from 'rxjs/oper
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import Cropper from 'cropperjs';
 
+/**
+ * Federation singleton self-check (side-effecting module).
+ *
+ * Invariant: the design-system MUST resolve to ONE shared instance per browser
+ * window. The FlyOS shell shares it from workspace SOURCE (federation.config.js
+ * `sharedMappings` + `features.mappingVersion`, advertising the real version),
+ * and every federated remote (Circles, …) binds to that single instance as a
+ * `singleton`. If a remote instead bundles its OWN copy — `requiredVersion`
+ * unsatisfied, `strictVersion: true`, or the host advertising an empty version
+ * because `mappingVersion` is off — the platform silently forks. Separate
+ * `providedIn: 'root'` singletons then mean:
+ *   - cross-app deep links break: `FlyRemoteRouter` writes the canonical
+ *     `?app=&route=` URL on the remote's own instance, so a reload never reaches
+ *     the shell's launch pipeline (see skills/cross-app-deep-linking.md);
+ *   - the `/lookup` + slash-command registries diverge, so entities registered
+ *     in the remote never reach the shell's agent input.
+ *
+ * Both bugs are invisible until a user trips over them. This check makes the
+ * fork LOUD at load time: each DS module evaluation appends its compiled-in
+ * version to a `globalThis` registry, and a second entry in the same window is
+ * the fork signal. The healthy case (one shared instance) stays silent.
+ *
+ * Why a plain `globalThis` key and not DI: a forked DS means a *separate* module
+ * graph, so any DI token / module-scoped variable is exactly what's duplicated.
+ * Only a JS global is shared across module instances in one window — the same
+ * reason `__FLYOS_SHELL__` and the pending-launches registry use globals.
+ *
+ * See skills/business-app-angular-remote.md § "Design-system singleton across
+ * the federation boundary".
+ */
+// Keep in sync with projects/design-system/package.json "version". Used only for
+// the diagnostic message — the duplicate-instance detection is version-agnostic.
+const FLY_DS_VERSION = '2.12.0';
+const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
+/**
+ * Records this design-system instance on the shared `scope` and returns the
+ * running count of instances seen in this window. Emits a single loud
+ * `console.error` the moment the count exceeds 1 (the fork signal). Pure aside
+ * from the registry mutation + console — callable with a fake scope in tests.
+ */
+function registerDesignSystemInstance(scope, version) {
+    const registry = (scope[FLY_DS_REGISTRY_KEY] ??= { versions: [] });
+    registry.versions.push(version);
+    if (registry.versions.length > 1) {
+        // eslint-disable-next-line no-console
+        console.error(`[fly-design-system] Federation singleton FORKED: ${registry.versions.length} ` +
+            `design-system instances loaded in one window (versions: ${registry.versions.join(', ')}). ` +
+            `A federated remote is using its own bundled copy instead of the shell's shared ` +
+            `singleton — cross-app deep links and /lookup registration WILL break. Fix: align the ` +
+            `remote's federation \`requiredVersion\` with the host's advertised version and keep ` +
+            `\`features.mappingVersion: true\` in the shell's federation.config.js.`);
+    }
+    return registry.versions.length;
+}
+// Run once when this module is evaluated — except under the Vitest runner, which
+// re-evaluates module graphs per test file against a shared Node global and would
+// otherwise accumulate phantom "instances". The fork this detects only occurs in a
+// real federated browser runtime, where each bundle evaluates the module exactly once.
+// Reach `process.env.VITEST` via globalThis rather than the bare `process`
+// identifier — the latter needs @types/node, which the production library build
+// (tsconfig.lib.prod.json) deliberately doesn't include, and would fail TS2591.
+const underTest = !!globalThis.process?.env?.['VITEST'];
+if (!underTest) {
+    registerDesignSystemInstance(globalThis, FLY_DS_VERSION);
+}
+
 const WINDOW_DATA = new InjectionToken('WINDOW_DATA');
 /**
  * Per-window injection token carrying the active `LaunchContext` as a signal.
@@ -738,16 +804,51 @@ class FlyRemoteRouter {
      * In embedded mode: push a real browser history entry (so back/forward work)
      * and update the internal signal synchronously.
      *
-     * The state object carries `flyRemoteUrl` so the popstate listener can
-     * restore the exact URL without relying on window.location.pathname (which
-     * could be the shell's route, not the remote's logical URL).
+     * The browser address bar is written as the shell's **canonical deep-link
+     * form** — `<shell-path>?app=<appId>&route=<remote-url>` — NOT the bare remote
+     * URL. This is what makes a hard reload work: on reload the shell's
+     * `DeepLinkService` captures `?app=&route=` in its APP_INITIALIZER, re-opens
+     * this app, and replays the route through the pending-launch pipeline
+     * (`ShellLauncherService.launch` → `FLYOS_LAUNCH_EVENT` / pending registry →
+     * the remote's root applies `ctx.route`). Writing the bare remote URL (e.g.
+     * `/trends/abc`) instead would leave a host-unroutable path in the bar — on
+     * reload the shell router falls through to its `**` wildcard, redirects to
+     * `/desktop`, and the deep link is silently lost. See
+     * skills/cross-app-deep-linking.md.
+     *
+     * `flyRemoteUrl` is still stashed in the history state so the popstate
+     * listener restores the exact remote URL for back/forward without re-parsing
+     * the query string.
      */
     _pushEmbedded(url) {
         if (typeof history !== 'undefined') {
-            history.pushState({ flyRemoteUrl: url }, '', url);
+            history.pushState({ flyRemoteUrl: url }, '', this._buildEmbeddedHistoryUrl(url));
         }
         this._url.set(url);
     }
+    /**
+     * Build the browser-address-bar URL for an embedded navigation: the shell's
+     * current path plus the canonical `?app=&route=` deep-link query (the same
+     * contract `DeepLinkService.captureFromCurrentUrl` parses on cold load).
+     *
+     * The path is left untouched — only the query string carries the remote's
+     * logical route — so the shell's own Angular Router (anchored at e.g.
+     * `/desktop`) is never handed a path it cannot match.
+     *
+     * Fallback: when `appId` is unknown (WINDOW_DATA not injected — the Native
+     * Federation token-split case where only `__FLYOS_SHELL__` proves embedding)
+     * we cannot build a shareable link, so we return the shell path query-less.
+     * Back/forward still work via the `flyRemoteUrl` history state; only
+     * reload-restore is unavailable — no regression over leaving the bar as-is.
+     */
+    _buildEmbeddedHistoryUrl(remoteUrl) {
+        const shellPath = (typeof window !== 'undefined' && window.location.pathname) || this.basePath || '/';
+        const appId = this.windowData?.appId;
+        if (!appId)
+            return shellPath;
+        const query = new URLSearchParams({ app: appId, route: remoteUrl });
+        return `${shellPath}?${query.toString()}`;
+    }
     buildUrl(commands) {
         const parts = commands
             .map(c => (c == null ? '' : String(c)))
@@ -763,6 +864,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Shared cross-bundle store key + sync event. **Public contract** — a remote that
+ * cannot consume a DS new enough to back {@link FlyRemoteContextService.publish} on
+ * `globalThis` itself may write this slot directly (same shape, keyed by appId) and
+ * dispatch {@link FLY_REMOTE_CONTEXT_EVENT} to notify the shell. Keep these literals
+ * stable; they are an integration boundary, not an implementation detail.
+ */
+const FLY_REMOTE_CONTEXT_STORE_KEY = '__flyRemoteContext__';
+const FLY_REMOTE_CONTEXT_EVENT = 'fly:remote-context';
+/** The single cross-bundle store, lazily created on `globalThis`. */
+function store() {
+    const g = globalThis;
+    return (g[FLY_REMOTE_CONTEXT_STORE_KEY] ??= {});
+}
+/** Notify every federated copy of the service that the store changed. */
+function emitSync() {
+    const g = globalThis;
+    try {
+        g.dispatchEvent?.(new Event(FLY_REMOTE_CONTEXT_EVENT));
+    }
+    catch {
+        /* non-DOM realm (SSR / unit env without Event) — readers fall back to a direct read */
+    }
+}
+function toMap(s) {
+    return new Map(Object.entries(s));
+}
+/**
+ * Remote → shell route/context channel.
+ *
+ * Why this exists
+ * ---------------
+ * A federated remote (e.g. Circles) renders inside a desktop-shell window and
+ * keeps its own internal Angular route (`/trends/:id`). The shell cannot see that
+ * route: the remote provides {@link FlyRemoteRouter} at its **component** injector
+ * (so it can read per-window `WINDOW_DATA`), which makes the route state invisible
+ * to the host. Shell-side features that need "what is the user looking at right
+ * now" — most importantly Category-B slash commands whose `contextBindings` include
+ * a `lookup`/`route` entity id — had no way to resolve the current entity id, and
+ * degraded to "ask the user".
+ *
+ * The channel — why `globalThis`, not the DI singleton
+ * ----------------------------------------------------
+ * This service is `providedIn: 'root'`, but a root instance is **NOT** reliably
+ * shared across the federation boundary. The shell builds the design system from
+ * workspace SOURCE while remotes consume the PUBLISHED npm package; Native
+ * Federation only collapses those two physical builds into one runtime instance if
+ * version negotiation succeeds perfectly (matching advertised `mappingVersion`,
+ * `singleton`, compatible ranges). That negotiation has silently split before —
+ * giving the shell and a remote *separate* `providedIn:'root'` instances, so a
+ * value published on one was invisible to the other.
+ *
+ * `globalThis` is the one substrate guaranteed shared across every federated bundle
+ * in the same realm (there are no iframes), so the channel stores its state there
+ * (see {@link FLY_REMOTE_CONTEXT_STORE_KEY}). {@link context} / {@link param} read
+ * it directly — split-proof, synchronous, no injector-token gymnastics. A per-
+ * instance signal mirrors the store for reactive consumers and is re-synced from a
+ * `globalThis` event whenever any copy of the service (or a remote writing the slot
+ * directly) mutates it. The same pattern already backs the shell's app-launch
+ * context bridge, so this is an established boundary, not a new hack.
+ *
+ * Contract
+ * --------
+ * - Remote: call {@link publish} whenever its embedded route changes, and
+ *   {@link clear} on teardown (window close / component destroy).
+ * - Shell: call {@link context} (or {@link param}) for an app id to resolve bindings.
+ *
+ * Keyed by `appId` (last publisher wins) — a single live window per app is the v1
+ * assumption; a windowId key is the natural extension if multi-window-per-app
+ * dispatch is ever needed.
+ */
+class FlyRemoteContextService {
+    _byApp = signal(toMap(store()), ...(ngDevMode ? [{ debugName: "_byApp" }] : /* istanbul ignore next */ []));
+    /** All currently-published contexts, keyed by app id. Reactive. */
+    contexts = this._byApp.asReadonly();
+    constructor() {
+        // Keep this instance's reactive mirror current when ANOTHER federated copy of
+        // the service — or a remote writing the store slot directly — mutates it.
+        const g = globalThis;
+        g.addEventListener?.(FLY_REMOTE_CONTEXT_EVENT, () => this._byApp.set(toMap(store())));
+    }
+    /** Publish (or replace) the active route context for an app. */
+    publish(ctx) {
+        store()[ctx.appId] = ctx;
+        this._byApp.set(toMap(store()));
+        emitSync();
+    }
+    /** Drop an app's context (remote unmounted / window closed). No-op if absent. */
+    clear(appId) {
+        const s = store();
+        if (!(appId in s))
+            return;
+        delete s[appId];
+        this._byApp.set(toMap(s));
+        emitSync();
+    }
+    /** Current context for an app, or `null` when nothing is published. */
+    context(appId) {
+        return store()[appId] ?? null;
+    }
+    /**
+     * Resolve a single route param for an app, e.g. `param('circles', 'id')`.
+     * Returns `null` when the app has no published context or the param is absent —
+     * the caller then degrades (the skill asks for the missing id).
+     */
+    param(appId, path) {
+        const value = store()[appId]?.params[path];
+        return value != null && value !== '' ? value : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteContextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteContextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 const APP_LOOKUP = new InjectionToken('APP_LOOKUP');
 /**
  * Canonicalizes raw source-app identifiers and resolves display names.
@@ -823,64 +1041,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 /**
- * Publishes a {@link WindowHelpHint} for the current window so the shell's
- * titlebar Help button deeplinks the help-center reader to the article most
- * relevant to where the user is.
- *
- * This is the **publisher twin** of the shell's `WindowHelpHintService`
- * (the listener). It exists in the design system so that **any app — and
- * especially a federated remote — publishes hints the same way**, without
+ * Publishes a {@link WindowHelpHint} for a window so the shell's titlebar Help
+ * button deeplinks the help-center reader to the article most relevant to where
+ * the user is. The **publisher twin** of the shell's `WindowHelpHintService`
+ * (the listener): it exists in the design system so that **any app — in-shell
+ * OS-Core app or federated remote — publishes hints the same way**, without
  * hand-rolling the cross-bundle CustomEvent contract.
  *
  * **Why a `window` CustomEvent and not the `WINDOW_HELP_HINT` DI token?**
- * Native Federation can split an `InjectionToken` instance across the host and
- * remote bundles, so a remote that injects `WINDOW_HELP_HINT` may get a
+ * Native Federation can split an `InjectionToken` instance across host and
+ * remote bundles, so a remote that injects `WINDOW_HELP_HINT` may receive a
  * different token than the one the shell provides. The string-keyed
- * {@link FLY_WINDOW_HELP_HINT_EVENT} crosses bundles reliably; the shell
- * mirrors it into the matching per-window hint signal. In-shell (OS-Core) apps
- * may still use the DI token directly, but this service works for them too.
+ * {@link FLY_WINDOW_HELP_HINT_EVENT} crosses bundles reliably; the shell mirrors
+ * it into the matching per-window hint signal.
  *
- * **Imperative by design.** The service holds no signals and runs no effect —
- * the *app* owns its reactivity (route + state → resolved hint) and pushes the
- * result via {@link setHint}. The design system owns only the wire format. A
- * hint set before {@link bindWindow} is buffered and emitted once the window id
- * arrives, so call order doesn't matter.
- *
- * Usage (typically from the remote root + its feature components):
- * ```ts
- * private help = inject(FlyWindowHelpService);
- * constructor() {
- *   this.help.bindWindow(inject(WINDOW_DATA, { optional: true })?.id);
- *   effect(() => this.help.setHint(this.resolvedHint())); // app-specific
- * }
- * ```
+ * **Why a per-window handle and not `bindWindow`/`setHint` state?**
+ * This service is `providedIn: 'root'` and the design system is a shared
+ * Native-Federation singleton, so a *single* instance is shared across the
+ * shell and every concurrently-open window (multiple in-shell apps, multiple
+ * remotes). A handle closes over its window id, so two windows never clobber a
+ * shared "current window" — each handle targets only its own titlebar.
  */
 class FlyWindowHelpService {
-    windowId = null;
-    hint = null;
-    /**
-     * Bind (or clear) the host window id — typically once, from the app root,
-     * with `WINDOW_DATA.id`. Re-emits the current hint for the (new) window.
-     * Passing null/undefined (standalone, no shell) makes publishing a no-op.
-     */
-    bindWindow(windowId) {
-        this.windowId = windowId ?? null;
-        this.publish();
-    }
     /**
-     * Set the active hint (or null to clear — the shell then reverts to the
-     * window's own `appId`). Emits immediately when a window is bound; otherwise
-     * the value is buffered and emitted on the next {@link bindWindow}.
+     * Returns a publisher bound to a single window. Call once per window (e.g.
+     * from the app root with `WINDOW_DATA.id`) and keep the handle. A
+     * null/undefined id (standalone, no shell) yields a handle whose `setHint`
+     * is a no-op.
      */
-    setHint(hint) {
-        this.hint = hint;
-        this.publish();
-    }
-    publish() {
-        if (typeof window === 'undefined' || !this.windowId)
-            return;
-        const detail = { windowId: this.windowId, hint: this.hint };
-        window.dispatchEvent(new CustomEvent(FLY_WINDOW_HELP_HINT_EVENT, { detail }));
+    forWindow(windowId) {
+        const id = windowId ?? null;
+        return {
+            setHint: (hint) => {
+                if (typeof window === 'undefined' || !id)
+                    return;
+                const detail = { windowId: id, hint };
+                window.dispatchEvent(new CustomEvent(FLY_WINDOW_HELP_HINT_EVENT, { detail }));
+            },
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyWindowHelpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyWindowHelpService, providedIn: 'root' });
@@ -1757,11 +1955,11 @@ class MessageBoxComponent {
         this.previouslyFocused = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessageBoxComponent, isStandalone: true, selector: "fly-message-box", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (service.visible()) {\n  <div\n    class=\"mb-backdrop\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\">\n    <div\n      class=\"mb-dialog\"\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"mb-title\"\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\n\n      @if (iconClass()) {\n        <div class=\"mb-icon-wrap\">\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\n        </div>\n      }\n\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\n\n      @if (dontAskAgainConfig(); as daa) {\n        <label class=\"mb-dont-ask-again\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"dontAskAgainChecked()\"\n            (change)=\"onDontAskAgainToggle($event)\" />\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\n        </label>\n      }\n\n      <div class=\"mb-actions\">\n        @for (btn of service.buttons(); track btn.result) {\n          <button\n            type=\"button\"\n            class=\"vos-btn sm mb-btn\"\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\n            (click)=\"onButtonClick(btn.result)\">\n            {{ btn.label }}\n          </button>\n        }\n      </div>\n\n    </div>\n  </div>\n}\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\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: MessageBoxComponent, isStandalone: true, selector: "fly-message-box", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (service.visible()) {\r\n  <div\r\n    class=\"mb-backdrop\"\r\n    (click)=\"onBackdropClick()\"\r\n    role=\"presentation\">\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of service.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"vos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\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: MessageBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-message-box', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.visible()) {\n  <div\n    class=\"mb-backdrop\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\">\n    <div\n      class=\"mb-dialog\"\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"mb-title\"\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\n\n      @if (iconClass()) {\n        <div class=\"mb-icon-wrap\">\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\n        </div>\n      }\n\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\n\n      @if (dontAskAgainConfig(); as daa) {\n        <label class=\"mb-dont-ask-again\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"dontAskAgainChecked()\"\n            (change)=\"onDontAskAgainToggle($event)\" />\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\n        </label>\n      }\n\n      <div class=\"mb-actions\">\n        @for (btn of service.buttons(); track btn.result) {\n          <button\n            type=\"button\"\n            class=\"vos-btn sm mb-btn\"\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\n            (click)=\"onButtonClick(btn.result)\">\n            {{ btn.label }}\n          </button>\n        }\n      </div>\n\n    </div>\n  </div>\n}\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"] }]
+            args: [{ selector: 'fly-message-box', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.visible()) {\r\n  <div\r\n    class=\"mb-backdrop\"\r\n    (click)=\"onBackdropClick()\"\r\n    role=\"presentation\">\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of service.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"vos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"] }]
         }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2093,11 +2291,11 @@ class SharePanelComponent {
         }
     }
     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", defaultChartSystemKey: "defaultChartSystemKey", defaultChartId: "defaultChartId", loadOuLabelMap: "loadOuLabelMap", grantToUser: "grantToUser", grantToOu: "grantToOu", updatePermission: "updatePermission", revokePermission: "revokePermission", showApplyToChildren: "showApplyToChildren", supportsDeny: "supportsDeny", permissionLevels: "permissionLevels", everyoneLabelKey: "everyoneLabelKey", loadRoleOus: "loadRoleOus" }, 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\n        type=\"button\"\n        class=\"fac-close\"\n        (click)=\"close.emit()\"\n        [attr.aria-label]=\"'files.share.close' | translate\">\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          [attr.aria-label]=\"'files.share.search_users' | 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            <button\n              type=\"button\"\n              class=\"fac-ou-item\"\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n              (click)=\"onGrantToOu(ou)\"\n              [attr.aria-label]=\"('files.share.share_with_ou_named' | translate) + ' ' + ou.displayName\"\n            >\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span dir=\"auto\">{{ ou.displayName }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      @if (loadRoleOus && roleOus().length > 0) {\n        <div class=\"fac-role-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_role' | translate }}</div>\n          <input\n            type=\"text\"\n            class=\"fac-input\"\n            [(ngModel)]=\"roleSearchQuery\"\n            [placeholder]=\"'files.share.role_search_placeholder' | translate\"\n            [attr.aria-label]=\"'files.share.search_roles' | translate\"\n            [hidden]=\"!showRolePicker()\" />\n          @if (showRolePicker()) {\n            <div class=\"fac-role-list\">\n              @for (role of filteredRoles(); track role.ouId) {\n                <button\n                  type=\"button\"\n                  class=\"fac-role-item\"\n                  (click)=\"onGrantToRole(role)\"\n                  [attr.aria-label]=\"('files.share.share_with_role_named' | translate) + ' ' + role.displayName\">\n                  <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n                  <span dir=\"auto\">{{ role.displayName }}</span>\n                  <span class=\"fac-role-app\">{{ role.appId }}</span>\n                </button>\n              }\n              @if (filteredRoles().length === 0) {\n                <div class=\"fac-empty\">{{ 'files.share.no_roles_match' | translate }}</div>\n              }\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 (loadRoleOus && roleOus().length > 0) {\n          <button type=\"button\" class=\"fac-link\" (click)=\"showRolePicker.set(!showRolePicker())\">\n            {{ showRolePicker() ? ('files.share.hide_roles' | translate) : ('files.share.show_roles' | translate) }}\n          </button>\n        }\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        @if (supportsDeny) {\n          <label class=\"fac-checkbox-label fac-deny-toggle\"\n            [title]=\"'files.share.deny_help' | translate\">\n            <input type=\"checkbox\" [(ngModel)]=\"addAsDeny\" />\n            <i class=\"pi pi-ban\" aria-hidden=\"true\"></i>\n            {{ 'files.share.add_as_deny' | 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\" [class.fac-perm-row-deny]=\"perm.isDeny\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\" dir=\"auto\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isDeny) {\n                <span class=\"fac-badge deny\">{{ 'files.share.denied' | translate }}</span>\n              }\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              @if (!perm.isDeny) {\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              }\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-badge.deny{background:#ff3b302e;color:#ff3b30;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.fac-perm-row-deny{background:#ff3b300f;border-inline-start:3px solid #ff3b30;padding-inline-start:8px;border-radius:6px}.fac-perm-row-deny .fac-perm-info i{color:#ff3b30}.fac-deny-toggle{color:#ff6b6b}.fac-deny-toggle i{color:#ff6b6b;font-size:11px;margin-inline-end:2px}.fac-deny-toggle input{accent-color:#ff3b30}.fac-role-section{margin-top:10px;display:flex;flex-direction:column;gap:6px}.fac-role-list{margin-top:6px;max-height:220px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-role-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-role-item:hover{background:var(--surface-hover)}.fac-role-item i{color:var(--text-color-secondary)}.fac-role-app{margin-inline-start:auto;font-size:11px;color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.5px}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SharePanelComponent, isStandalone: true, selector: "fly-share-panel", inputs: { targetName: "targetName", titleKey: "titleKey", loadPermissions: "loadPermissions", searchUsers: "searchUsers", loadOuTree: "loadOuTree", loadChartOptions: "loadChartOptions", defaultChartSystemKey: "defaultChartSystemKey", defaultChartId: "defaultChartId", loadOuLabelMap: "loadOuLabelMap", grantToUser: "grantToUser", grantToOu: "grantToOu", updatePermission: "updatePermission", revokePermission: "revokePermission", showApplyToChildren: "showApplyToChildren", supportsDeny: "supportsDeny", permissionLevels: "permissionLevels", everyoneLabelKey: "everyoneLabelKey", loadRoleOus: "loadRoleOus" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\r\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"fac-header\">\r\n      <h3>{{ titleKey | translate }}</h3>\r\n      <span class=\"fac-target-name\">{{ targetName }}</span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fac-close\"\r\n        (click)=\"close.emit()\"\r\n        [attr.aria-label]=\"'files.share.close' | translate\">\r\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"fac-add-section\">\r\n      <div class=\"fac-search-row\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"fac-input\"\r\n          [(ngModel)]=\"searchQuery\"\r\n          (input)=\"onSearchInput()\"\r\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\r\n          [attr.aria-label]=\"'files.share.search_users' | translate\"\r\n        />\r\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\r\n          @for (opt of levelOptions; track opt.value) {\r\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\r\n          }\r\n        </select>\r\n      </div>\r\n\r\n      @if (searchResults().length > 0) {\r\n        <div class=\"fac-search-results\">\r\n          @for (result of searchResults(); track result.id) {\r\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\r\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\r\n              <span class=\"fac-email\">{{ result.email }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (chartOptions().length > 0) {\r\n        <div class=\"fac-chart-row\">\r\n          <label for=\"fac-org-chart-select\" class=\"fac-section-label\">{{\r\n            'files.share.org_chart' | translate\r\n          }}</label>\r\n          <select\r\n            id=\"fac-org-chart-select\"\r\n            class=\"fac-select\"\r\n            [ngModel]=\"selectedOrgChartId()\"\r\n            (ngModelChange)=\"onOrgChartSelectChange($event)\">\r\n            @for (opt of chartOptions(); track $index) {\r\n              <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n      }\r\n\r\n      @if (showOuPicker()) {\r\n        <div class=\"fac-ou-section\">\r\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\r\n          @for (ou of ouTree(); track ou.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fac-ou-item\"\r\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\r\n              (click)=\"onGrantToOu(ou)\"\r\n              [attr.aria-label]=\"('files.share.share_with_ou_named' | translate) + ' ' + ou.displayName\"\r\n            >\r\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n              <span dir=\"auto\">{{ ou.displayName }}</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (loadRoleOus && roleOus().length > 0) {\r\n        <div class=\"fac-role-section\">\r\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_role' | translate }}</div>\r\n          <input\r\n            type=\"text\"\r\n            class=\"fac-input\"\r\n            [(ngModel)]=\"roleSearchQuery\"\r\n            [placeholder]=\"'files.share.role_search_placeholder' | translate\"\r\n            [attr.aria-label]=\"'files.share.search_roles' | translate\"\r\n            [hidden]=\"!showRolePicker()\" />\r\n          @if (showRolePicker()) {\r\n            <div class=\"fac-role-list\">\r\n              @for (role of filteredRoles(); track role.ouId) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fac-role-item\"\r\n                  (click)=\"onGrantToRole(role)\"\r\n                  [attr.aria-label]=\"('files.share.share_with_role_named' | translate) + ' ' + role.displayName\">\r\n                  <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n                  <span dir=\"auto\">{{ role.displayName }}</span>\r\n                  <span class=\"fac-role-app\">{{ role.appId }}</span>\r\n                </button>\r\n              }\r\n              @if (filteredRoles().length === 0) {\r\n                <div class=\"fac-empty\">{{ 'files.share.no_roles_match' | translate }}</div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"fac-toggle-row\">\r\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\r\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\r\n        </button>\r\n        @if (loadRoleOus && roleOus().length > 0) {\r\n          <button type=\"button\" class=\"fac-link\" (click)=\"showRolePicker.set(!showRolePicker())\">\r\n            {{ showRolePicker() ? ('files.share.hide_roles' | translate) : ('files.share.show_roles' | translate) }}\r\n          </button>\r\n        }\r\n        @if (showApplyToChildren) {\r\n          <label class=\"fac-checkbox-label\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\r\n            {{ 'files.share.apply_children' | translate }}\r\n          </label>\r\n        }\r\n        @if (supportsDeny) {\r\n          <label class=\"fac-checkbox-label fac-deny-toggle\"\r\n            [title]=\"'files.share.deny_help' | translate\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"addAsDeny\" />\r\n            <i class=\"pi pi-ban\" aria-hidden=\"true\"></i>\r\n            {{ 'files.share.add_as_deny' | translate }}\r\n          </label>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fac-perms-section\">\r\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\r\n      @if (loading()) {\r\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\r\n      } @else if (permissions().length === 0) {\r\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\r\n      } @else {\r\n        @for (perm of permissions(); track perm.id) {\r\n          <div class=\"fac-perm-row\" [class.fac-perm-row-deny]=\"perm.isDeny\">\r\n            <div class=\"fac-perm-info\">\r\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\r\n              <span class=\"fac-perm-name\" dir=\"auto\">{{ getPermLabel(perm) }}</span>\r\n              @if (perm.isDeny) {\r\n                <span class=\"fac-badge deny\">{{ 'files.share.denied' | translate }}</span>\r\n              }\r\n              @if (perm.isInherited) {\r\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\r\n              }\r\n            </div>\r\n            <div class=\"fac-perm-actions\">\r\n              @if (!perm.isDeny) {\r\n                <select\r\n                  class=\"fac-select sm\"\r\n                  [ngModel]=\"perm.level\"\r\n                  (ngModelChange)=\"onUpdateLevel(perm, $event)\"\r\n                  [disabled]=\"perm.isInherited === true\"\r\n                >\r\n                  @for (opt of levelOptions; track opt.value) {\r\n                    <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\r\n                  }\r\n                </select>\r\n              }\r\n              <button\r\n                type=\"button\"\r\n                class=\"fac-icon-btn danger\"\r\n                (click)=\"onRevokePermission(perm)\"\r\n                [disabled]=\"perm.isInherited === true\"\r\n                [title]=\"'files.share.revoke' | translate\"\r\n              >\r\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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-badge.deny{background:#ff3b302e;color:#ff3b30;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.fac-perm-row-deny{background:#ff3b300f;border-inline-start:3px solid #ff3b30;padding-inline-start:8px;border-radius:6px}.fac-perm-row-deny .fac-perm-info i{color:#ff3b30}.fac-deny-toggle{color:#ff6b6b}.fac-deny-toggle i{color:#ff6b6b;font-size:11px;margin-inline-end:2px}.fac-deny-toggle input{accent-color:#ff3b30}.fac-role-section{margin-top:10px;display:flex;flex-direction:column;gap:6px}.fac-role-list{margin-top:6px;max-height:220px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-role-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-role-item:hover{background:var(--surface-hover)}.fac-role-item i{color:var(--text-color-secondary)}.fac-role-app{margin-inline-start:auto;font-size:11px;color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.5px}.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\n        type=\"button\"\n        class=\"fac-close\"\n        (click)=\"close.emit()\"\n        [attr.aria-label]=\"'files.share.close' | translate\">\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          [attr.aria-label]=\"'files.share.search_users' | 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            <button\n              type=\"button\"\n              class=\"fac-ou-item\"\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n              (click)=\"onGrantToOu(ou)\"\n              [attr.aria-label]=\"('files.share.share_with_ou_named' | translate) + ' ' + ou.displayName\"\n            >\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span dir=\"auto\">{{ ou.displayName }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      @if (loadRoleOus && roleOus().length > 0) {\n        <div class=\"fac-role-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_role' | translate }}</div>\n          <input\n            type=\"text\"\n            class=\"fac-input\"\n            [(ngModel)]=\"roleSearchQuery\"\n            [placeholder]=\"'files.share.role_search_placeholder' | translate\"\n            [attr.aria-label]=\"'files.share.search_roles' | translate\"\n            [hidden]=\"!showRolePicker()\" />\n          @if (showRolePicker()) {\n            <div class=\"fac-role-list\">\n              @for (role of filteredRoles(); track role.ouId) {\n                <button\n                  type=\"button\"\n                  class=\"fac-role-item\"\n                  (click)=\"onGrantToRole(role)\"\n                  [attr.aria-label]=\"('files.share.share_with_role_named' | translate) + ' ' + role.displayName\">\n                  <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n                  <span dir=\"auto\">{{ role.displayName }}</span>\n                  <span class=\"fac-role-app\">{{ role.appId }}</span>\n                </button>\n              }\n              @if (filteredRoles().length === 0) {\n                <div class=\"fac-empty\">{{ 'files.share.no_roles_match' | translate }}</div>\n              }\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 (loadRoleOus && roleOus().length > 0) {\n          <button type=\"button\" class=\"fac-link\" (click)=\"showRolePicker.set(!showRolePicker())\">\n            {{ showRolePicker() ? ('files.share.hide_roles' | translate) : ('files.share.show_roles' | translate) }}\n          </button>\n        }\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        @if (supportsDeny) {\n          <label class=\"fac-checkbox-label fac-deny-toggle\"\n            [title]=\"'files.share.deny_help' | translate\">\n            <input type=\"checkbox\" [(ngModel)]=\"addAsDeny\" />\n            <i class=\"pi pi-ban\" aria-hidden=\"true\"></i>\n            {{ 'files.share.add_as_deny' | 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\" [class.fac-perm-row-deny]=\"perm.isDeny\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\" dir=\"auto\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isDeny) {\n                <span class=\"fac-badge deny\">{{ 'files.share.denied' | translate }}</span>\n              }\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              @if (!perm.isDeny) {\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              }\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-badge.deny{background:#ff3b302e;color:#ff3b30;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.fac-perm-row-deny{background:#ff3b300f;border-inline-start:3px solid #ff3b30;padding-inline-start:8px;border-radius:6px}.fac-perm-row-deny .fac-perm-info i{color:#ff3b30}.fac-deny-toggle{color:#ff6b6b}.fac-deny-toggle i{color:#ff6b6b;font-size:11px;margin-inline-end:2px}.fac-deny-toggle input{accent-color:#ff3b30}.fac-role-section{margin-top:10px;display:flex;flex-direction:column;gap:6px}.fac-role-list{margin-top:6px;max-height:220px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-role-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-role-item:hover{background:var(--surface-hover)}.fac-role-item i{color:var(--text-color-secondary)}.fac-role-app{margin-inline-start:auto;font-size:11px;color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.5px}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"] }]
+            args: [{ selector: 'fly-share-panel', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\r\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"fac-header\">\r\n      <h3>{{ titleKey | translate }}</h3>\r\n      <span class=\"fac-target-name\">{{ targetName }}</span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fac-close\"\r\n        (click)=\"close.emit()\"\r\n        [attr.aria-label]=\"'files.share.close' | translate\">\r\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"fac-add-section\">\r\n      <div class=\"fac-search-row\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"fac-input\"\r\n          [(ngModel)]=\"searchQuery\"\r\n          (input)=\"onSearchInput()\"\r\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\r\n          [attr.aria-label]=\"'files.share.search_users' | translate\"\r\n        />\r\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\r\n          @for (opt of levelOptions; track opt.value) {\r\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\r\n          }\r\n        </select>\r\n      </div>\r\n\r\n      @if (searchResults().length > 0) {\r\n        <div class=\"fac-search-results\">\r\n          @for (result of searchResults(); track result.id) {\r\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\r\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\r\n              <span class=\"fac-email\">{{ result.email }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (chartOptions().length > 0) {\r\n        <div class=\"fac-chart-row\">\r\n          <label for=\"fac-org-chart-select\" class=\"fac-section-label\">{{\r\n            'files.share.org_chart' | translate\r\n          }}</label>\r\n          <select\r\n            id=\"fac-org-chart-select\"\r\n            class=\"fac-select\"\r\n            [ngModel]=\"selectedOrgChartId()\"\r\n            (ngModelChange)=\"onOrgChartSelectChange($event)\">\r\n            @for (opt of chartOptions(); track $index) {\r\n              <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n      }\r\n\r\n      @if (showOuPicker()) {\r\n        <div class=\"fac-ou-section\">\r\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\r\n          @for (ou of ouTree(); track ou.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fac-ou-item\"\r\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\r\n              (click)=\"onGrantToOu(ou)\"\r\n              [attr.aria-label]=\"('files.share.share_with_ou_named' | translate) + ' ' + ou.displayName\"\r\n            >\r\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n              <span dir=\"auto\">{{ ou.displayName }}</span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (loadRoleOus && roleOus().length > 0) {\r\n        <div class=\"fac-role-section\">\r\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_role' | translate }}</div>\r\n          <input\r\n            type=\"text\"\r\n            class=\"fac-input\"\r\n            [(ngModel)]=\"roleSearchQuery\"\r\n            [placeholder]=\"'files.share.role_search_placeholder' | translate\"\r\n            [attr.aria-label]=\"'files.share.search_roles' | translate\"\r\n            [hidden]=\"!showRolePicker()\" />\r\n          @if (showRolePicker()) {\r\n            <div class=\"fac-role-list\">\r\n              @for (role of filteredRoles(); track role.ouId) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fac-role-item\"\r\n                  (click)=\"onGrantToRole(role)\"\r\n                  [attr.aria-label]=\"('files.share.share_with_role_named' | translate) + ' ' + role.displayName\">\r\n                  <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n                  <span dir=\"auto\">{{ role.displayName }}</span>\r\n                  <span class=\"fac-role-app\">{{ role.appId }}</span>\r\n                </button>\r\n              }\r\n              @if (filteredRoles().length === 0) {\r\n                <div class=\"fac-empty\">{{ 'files.share.no_roles_match' | translate }}</div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"fac-toggle-row\">\r\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\r\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\r\n        </button>\r\n        @if (loadRoleOus && roleOus().length > 0) {\r\n          <button type=\"button\" class=\"fac-link\" (click)=\"showRolePicker.set(!showRolePicker())\">\r\n            {{ showRolePicker() ? ('files.share.hide_roles' | translate) : ('files.share.show_roles' | translate) }}\r\n          </button>\r\n        }\r\n        @if (showApplyToChildren) {\r\n          <label class=\"fac-checkbox-label\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\r\n            {{ 'files.share.apply_children' | translate }}\r\n          </label>\r\n        }\r\n        @if (supportsDeny) {\r\n          <label class=\"fac-checkbox-label fac-deny-toggle\"\r\n            [title]=\"'files.share.deny_help' | translate\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"addAsDeny\" />\r\n            <i class=\"pi pi-ban\" aria-hidden=\"true\"></i>\r\n            {{ 'files.share.add_as_deny' | translate }}\r\n          </label>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fac-perms-section\">\r\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\r\n      @if (loading()) {\r\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\r\n      } @else if (permissions().length === 0) {\r\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\r\n      } @else {\r\n        @for (perm of permissions(); track perm.id) {\r\n          <div class=\"fac-perm-row\" [class.fac-perm-row-deny]=\"perm.isDeny\">\r\n            <div class=\"fac-perm-info\">\r\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\r\n              <span class=\"fac-perm-name\" dir=\"auto\">{{ getPermLabel(perm) }}</span>\r\n              @if (perm.isDeny) {\r\n                <span class=\"fac-badge deny\">{{ 'files.share.denied' | translate }}</span>\r\n              }\r\n              @if (perm.isInherited) {\r\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\r\n              }\r\n            </div>\r\n            <div class=\"fac-perm-actions\">\r\n              @if (!perm.isDeny) {\r\n                <select\r\n                  class=\"fac-select sm\"\r\n                  [ngModel]=\"perm.level\"\r\n                  (ngModelChange)=\"onUpdateLevel(perm, $event)\"\r\n                  [disabled]=\"perm.isInherited === true\"\r\n                >\r\n                  @for (opt of levelOptions; track opt.value) {\r\n                    <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\r\n                  }\r\n                </select>\r\n              }\r\n              <button\r\n                type=\"button\"\r\n                class=\"fac-icon-btn danger\"\r\n                (click)=\"onRevokePermission(perm)\"\r\n                [disabled]=\"perm.isInherited === true\"\r\n                [title]=\"'files.share.revoke' | translate\"\r\n              >\r\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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-badge.deny{background:#ff3b302e;color:#ff3b30;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.fac-perm-row-deny{background:#ff3b300f;border-inline-start:3px solid #ff3b30;padding-inline-start:8px;border-radius:6px}.fac-perm-row-deny .fac-perm-info i{color:#ff3b30}.fac-deny-toggle{color:#ff6b6b}.fac-deny-toggle i{color:#ff6b6b;font-size:11px;margin-inline-end:2px}.fac-deny-toggle input{accent-color:#ff3b30}.fac-role-section{margin-top:10px;display:flex;flex-direction:column;gap:6px}.fac-role-list{margin-top:6px;max-height:220px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-role-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-role-item:hover{background:var(--surface-hover)}.fac-role-item i{color:var(--text-color-secondary)}.fac-role-app{margin-inline-start:auto;font-size:11px;color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.5px}.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: [{
@@ -2743,7 +2941,7 @@ class AudienceBuilderComponent {
                 useExisting: forwardRef(() => AudienceBuilderComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"fab-root\">\n\n  <!-- Includes section -->\n  <div class=\"fab-bucket\">\n    <div class=\"fab-bucket-header\">\n      <div class=\"fab-section-label\" id=\"fab-includes-label\">{{ 'audience.includes' | translate }}</div>\n      <button\n        type=\"button\"\n        class=\"fab-add-btn\"\n        (click)=\"openPicker('includes')\"\n        [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'includes'\"\n        [attr.aria-controls]=\"pickerOpen() && editTarget() === 'includes' ? 'fab-picker-region' : null\"\n      >\n        <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n        {{ 'audience.add_term' | translate }}\n      </button>\n    </div>\n\n    @if (includes().length === 0) {\n      <div class=\"fab-empty\">{{ 'audience.includes_empty' | translate }}</div>\n    } @else {\n      <ul class=\"fab-term-list\" aria-labelledby=\"fab-includes-label\">\n        @for (term of includes(); track term) {\n          <li class=\"fab-term\">\n            <ng-container\n              *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'includes', index: $index }\">\n            </ng-container>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  <!-- Excludes section -->\n  @if (showExcludes) {\n    <div class=\"fab-bucket fab-bucket-exclude\">\n      <div class=\"fab-bucket-header\">\n        <div class=\"fab-section-label\" id=\"fab-excludes-label\">{{ 'audience.excludes' | translate }}</div>\n        <button\n          type=\"button\"\n          class=\"fab-add-btn\"\n          (click)=\"openPicker('excludes')\"\n          [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'excludes'\"\n          [attr.aria-controls]=\"pickerOpen() && editTarget() === 'excludes' ? 'fab-picker-region' : null\"\n        >\n          <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n          {{ 'audience.add_term' | translate }}\n        </button>\n      </div>\n\n      @if (excludes().length === 0) {\n        <div class=\"fab-empty\">{{ 'audience.excludes_empty' | translate }}</div>\n      } @else {\n        <ul class=\"fab-term-list\" aria-labelledby=\"fab-excludes-label\">\n          @for (term of excludes(); track term) {\n            <li class=\"fab-term\">\n              <ng-container\n                *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'excludes', index: $index }\">\n              </ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  <!-- Inline picker (shared across includes/excludes; gated by pickerOpen) -->\n  @if (pickerOpen()) {\n    <div\n      id=\"fab-picker-region\"\n      class=\"fab-picker\"\n      role=\"region\"\n      [attr.aria-label]=\"(editTarget() === 'includes'\n        ? ('audience.adding_to_includes' | translate)\n        : ('audience.adding_to_excludes' | translate))\"\n    >\n      <div class=\"fab-picker-header\">\n        <span class=\"fab-picker-target\">\n          {{\n            editTarget() === 'includes'\n              ? ('audience.adding_to_includes' | translate)\n              : ('audience.adding_to_excludes' | translate)\n          }}\n        </span>\n        <button type=\"button\" class=\"fab-close\" (click)=\"closePicker()\" [attr.aria-label]=\"'audience.close' | translate\">\n          <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n\n      <!-- Kind tabs -->\n      <div class=\"fab-kind-tabs\" role=\"tablist\">\n        @for (kind of supportedKinds; track kind) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"fab-kind-tab\"\n            [id]=\"'fab-tab-' + kind\"\n            [class.active]=\"activeKind() === kind\"\n            [attr.aria-selected]=\"activeKind() === kind\"\n            [attr.aria-controls]=\"'fab-tabpanel-' + kind\"\n            (click)=\"selectKind(kind)\"\n          >\n            <i [class]=\"kindIconClass(kind)\" aria-hidden=\"true\"></i>\n            <span>{{ kindLocaleKey(kind) | translate }}</span>\n          </button>\n        }\n      </div>\n\n      @if (errorKey()) {\n        <div class=\"fab-inline-error\" role=\"alert\">\n          <i class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></i>\n          {{ errorKey()! | translate }}\n        </div>\n      }\n\n      <!-- Per-kind picker bodies -->\n      <div\n        class=\"fab-picker-body\"\n        role=\"tabpanel\"\n        [id]=\"'fab-tabpanel-' + activeKind()\"\n        [attr.aria-labelledby]=\"'fab-tab-' + activeKind()\"\n      >\n        @switch (activeKind()) {\n\n          @case ('users') {\n            <input\n              type=\"text\"\n              class=\"fab-input\"\n              [ngModel]=\"userSearchQuery()\"\n              (ngModelChange)=\"userSearchQuery.set($event); onUserSearchInput()\"\n              [placeholder]=\"'audience.search_users_placeholder' | translate\"\n              [attr.aria-label]=\"'audience.search_users_placeholder' | translate\"\n            />\n            @if (userSearchResults().length > 0) {\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (u of userSearchResults(); track u.id) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickUser(u)\">\n                    <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n                    <span>{{ u.firstName }} {{ u.lastName }}</span>\n                    <span class=\"fab-result-secondary\">{{ u.email }}</span>\n                  </button>\n                }\n              </div>\n            } @else if (userSearchQuery().length >= 2) {\n              <div class=\"fab-empty\">{{ 'audience.no_users_match' | translate }}</div>\n            }\n          }\n\n          @case ('roles') {\n            @if (loadRoleOus && roleOus().length > 0) {\n              <input\n                type=\"text\"\n                class=\"fab-input\"\n                [ngModel]=\"roleSearchQuery()\"\n                (ngModelChange)=\"roleSearchQuery.set($event)\"\n                [placeholder]=\"'audience.search_roles_placeholder' | translate\"\n                [attr.aria-label]=\"'audience.search_roles_placeholder' | translate\"\n              />\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (role of filteredRoles(); track role.ouId) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickRole(role)\">\n                    <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n                    <span>{{ role.displayName }}</span>\n                    <span class=\"fab-result-secondary\">{{ role.appId }}</span>\n                  </button>\n                }\n                @if (filteredRoles().length === 0) {\n                  <div class=\"fab-empty\">{{ 'audience.no_roles_match' | translate }}</div>\n                }\n              </div>\n            } @else {\n              <div class=\"fab-empty\">{{ 'audience.roles_unavailable' | translate }}</div>\n            }\n          }\n\n          @case ('ou') {\n            @if (chartOptions().length > 0) {\n              <label for=\"fab-chart-select\" class=\"fab-mini-label\">\n                {{ 'audience.org_chart' | translate }}\n              </label>\n              <select\n                id=\"fab-chart-select\"\n                class=\"fab-select\"\n                [ngModel]=\"selectedChartId()\"\n                (ngModelChange)=\"onChartChange($event)\"\n              >\n                @for (opt of chartOptions(); track $index) {\n                  <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\n                }\n              </select>\n            }\n            <label class=\"fab-checkbox-label\">\n              <input\n                type=\"checkbox\"\n                [ngModel]=\"ouIncludeDescendants()\"\n                (ngModelChange)=\"ouIncludeDescendants.set($event)\"\n              />\n              {{ 'audience.include_descendants' | translate }}\n            </label>\n            @if (ouTree().length === 0) {\n              <div class=\"fab-empty\">{{ 'audience.ou_tree_empty' | translate }}</div>\n            } @else {\n              <div class=\"fab-result-list fab-ou-tree\" role=\"list\">\n                @for (ou of ouTree(); track ou.id) {\n                  <button\n                    type=\"button\"\n                    role=\"listitem\"\n                    class=\"fab-result-item\"\n                    [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n                    (click)=\"pickOu(ou)\"\n                  >\n                    <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n                    <span>{{ ou.displayName }}</span>\n                  </button>\n                }\n              </div>\n            }\n          }\n\n          @case ('app-everyone') {\n            @if (appEveryoneOptions.length === 0) {\n              <div class=\"fab-empty\">{{ 'audience.app_everyone_empty' | translate }}</div>\n            } @else {\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (app of appEveryoneOptions; track app.appId) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickAppEveryone(app.appId)\">\n                    <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\n                    <span>{{ app.displayName }}</span>\n                    <span class=\"fab-result-secondary\">{{ app.appId }}</span>\n                  </button>\n                }\n              </div>\n            }\n          }\n\n          @case ('chart') {\n            @if (chartTermOptions().length === 0) {\n              <div class=\"fab-empty\">{{ 'audience.chart_options_empty' | translate }}</div>\n            } @else {\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (opt of chartTermOptions(); track opt.id) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickChart(opt.id)\">\n                    <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\n                    <span>{{ opt.name }}</span>\n                  </button>\n                }\n              </div>\n            }\n          }\n\n          @case ('preset') {\n            <div class=\"fab-result-list\" role=\"list\">\n              @for (p of presetOptions; track p) {\n                <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickPreset(p)\">\n                  <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\n                  <span>{{ presetLocaleKey(p) | translate }}</span>\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n</div>\n\n<!-- Reusable term card template, parameterised by target bucket + index for removal callbacks -->\n<ng-template #termCard let-term let-target=\"target\" let-index=\"index\">\n  <div class=\"fab-term-card\" [class.fab-term-exclude]=\"target === 'excludes'\">\n\n    @switch (term.kind) {\n      @case ('users') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_users' | translate: { count: term.userIds.length } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"fab-term-chips\">\n          @for (id of term.userIds; track id) {\n            <span class=\"fab-chip\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ id.substring(0, 8) }}\u2026</span>\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeUserId(target, index, id)\"\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @case ('roles') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_roles' | translate: { app: appLabel(term.appId), count: term.roleKeys.length } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"fab-term-chips\">\n          @for (k of term.roleKeys; track k) {\n            <span class=\"fab-chip\">\n              <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n              <span>{{ roleLabel(term.appId, k) }}</span>\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeRoleKey(target, index, k)\"\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @case ('ou') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_ous' | translate: { count: term.ouIds.length } }}\n            @if (term.includeDescendants) {\n              <span class=\"fab-badge\">{{ 'audience.descendants_badge' | translate }}</span>\n            }\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"fab-term-chips\">\n          @for (id of term.ouIds; track id) {\n            <span class=\"fab-chip\">\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ouLabel(id) }}</span>\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeOuId(target, index, id)\"\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @case ('app-everyone') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_app_everyone' | translate: { app: appLabel(term.appId) } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      @case ('chart') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_chart' | translate: { chart: chartLabel(term.chartId) } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      @case ('preset') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ presetLocaleKey(term.preset) | translate }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".fab-root{display:flex;flex-direction:column;gap:14px;width:100%}.fab-bucket{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px}.fab-bucket.fab-bucket-exclude{border-inline-start:3px solid rgba(255,59,48,.55)}.fab-bucket-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.fab-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color-secondary)}.fab-add-btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary-color, #e8732a);color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}.fab-add-btn:hover{filter:brightness(1.05)}.fab-add-btn i{font-size:11px}.fab-empty{text-align:center;padding:12px;color:var(--text-color-secondary);font-size:12px;font-style:italic}.fab-term-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.fab-term-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.fab-term-card.fab-term-exclude{background:#ff3b300d;border-color:#ff3b302e}.fab-term-head{display:flex;align-items:center;gap:8px}.fab-term-head i:first-child{color:var(--text-color-secondary)}.fab-term-title{flex:1;font-size:13px;display:inline-flex;align-items:center;gap:6px}.fab-badge{font-size:10px;background:#ffffff1a;color:var(--text-color-secondary);padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}.fab-term-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.fab-chip{display:inline-flex;align-items:center;gap:4px;background:#ffffff0f;border-radius:12px;padding:2px 4px 2px 8px;font-size:11px}.fab-chip i{font-size:10px;color:var(--text-color-secondary)}.fab-chip-x{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;padding:2px 4px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.fab-chip-x i{font-size:9px}.fab-chip-x:hover{background:#ff3b302e;color:#ff3b30}.fab-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:11px}.fab-icon-btn:hover{background:#ffffff24}.fab-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fab-picker{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px #0000002e}.fab-picker-header{display:flex;align-items:center;justify-content:space-between}.fab-picker-target{font-size:12px;color:var(--text-color-secondary)}.fab-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:14px;padding:4px}.fab-close:hover{color:var(--text-color)}.fab-kind-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--surface-border);padding-bottom:6px}.fab-kind-tab{background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 10px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:6px}.fab-kind-tab i{font-size:11px}.fab-kind-tab:hover{background:var(--surface-hover);color:var(--text-color)}.fab-kind-tab.active{background:#e8732a1f;border-color:var(--primary-color, #e8732a);color:var(--text-color)}.fab-picker-body{display:flex;flex-direction:column;gap:8px}.fab-input,.fab-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fab-input:focus,.fab-select:focus{border-color:var(--primary-color, #e8732a)}.fab-mini-label{font-size:11px;color:var(--text-color-secondary)}.fab-result-list{max-height:200px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fab-result-list.fab-ou-tree{max-height:240px}button.fab-result-item{width:100%;background:transparent;border:none;color:inherit;font:inherit;text-align:start;appearance:none}.fab-result-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px}.fab-result-item:hover{background:var(--surface-hover)}.fab-result-item:focus-visible{outline:2px solid var(--primary-color, #e8732a);outline-offset:-2px}.fab-result-item i{color:var(--text-color-secondary)}.fab-result-secondary{color:var(--text-color-secondary);font-size:11px;margin-inline-start:auto;text-transform:uppercase;letter-spacing:.4px}.fab-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fab-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fab-inline-error{display:flex;align-items:center;gap:6px;background:#ff3b301a;color:#ff8a80;border-radius:6px;padding:6px 10px;font-size:12px}.fab-inline-error i{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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 });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"fab-root\">\r\n\r\n  <!-- Includes section -->\r\n  <div class=\"fab-bucket\">\r\n    <div class=\"fab-bucket-header\">\r\n      <div class=\"fab-section-label\" id=\"fab-includes-label\">{{ 'audience.includes' | translate }}</div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fab-add-btn\"\r\n        (click)=\"openPicker('includes')\"\r\n        [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'includes'\"\r\n        [attr.aria-controls]=\"pickerOpen() && editTarget() === 'includes' ? 'fab-picker-region' : null\"\r\n      >\r\n        <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\r\n        {{ 'audience.add_term' | translate }}\r\n      </button>\r\n    </div>\r\n\r\n    @if (includes().length === 0) {\r\n      <div class=\"fab-empty\">{{ 'audience.includes_empty' | translate }}</div>\r\n    } @else {\r\n      <ul class=\"fab-term-list\" aria-labelledby=\"fab-includes-label\">\r\n        @for (term of includes(); track term) {\r\n          <li class=\"fab-term\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'includes', index: $index }\">\r\n            </ng-container>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </div>\r\n\r\n  <!-- Excludes section -->\r\n  @if (showExcludes) {\r\n    <div class=\"fab-bucket fab-bucket-exclude\">\r\n      <div class=\"fab-bucket-header\">\r\n        <div class=\"fab-section-label\" id=\"fab-excludes-label\">{{ 'audience.excludes' | translate }}</div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fab-add-btn\"\r\n          (click)=\"openPicker('excludes')\"\r\n          [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'excludes'\"\r\n          [attr.aria-controls]=\"pickerOpen() && editTarget() === 'excludes' ? 'fab-picker-region' : null\"\r\n        >\r\n          <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\r\n          {{ 'audience.add_term' | translate }}\r\n        </button>\r\n      </div>\r\n\r\n      @if (excludes().length === 0) {\r\n        <div class=\"fab-empty\">{{ 'audience.excludes_empty' | translate }}</div>\r\n      } @else {\r\n        <ul class=\"fab-term-list\" aria-labelledby=\"fab-excludes-label\">\r\n          @for (term of excludes(); track term) {\r\n            <li class=\"fab-term\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'excludes', index: $index }\">\r\n              </ng-container>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Inline picker (shared across includes/excludes; gated by pickerOpen) -->\r\n  @if (pickerOpen()) {\r\n    <div\r\n      id=\"fab-picker-region\"\r\n      class=\"fab-picker\"\r\n      role=\"region\"\r\n      [attr.aria-label]=\"(editTarget() === 'includes'\r\n        ? ('audience.adding_to_includes' | translate)\r\n        : ('audience.adding_to_excludes' | translate))\"\r\n    >\r\n      <div class=\"fab-picker-header\">\r\n        <span class=\"fab-picker-target\">\r\n          {{\r\n            editTarget() === 'includes'\r\n              ? ('audience.adding_to_includes' | translate)\r\n              : ('audience.adding_to_excludes' | translate)\r\n          }}\r\n        </span>\r\n        <button type=\"button\" class=\"fab-close\" (click)=\"closePicker()\" [attr.aria-label]=\"'audience.close' | translate\">\r\n          <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Kind tabs -->\r\n      <div class=\"fab-kind-tabs\" role=\"tablist\">\r\n        @for (kind of supportedKinds; track kind) {\r\n          <button\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            class=\"fab-kind-tab\"\r\n            [id]=\"'fab-tab-' + kind\"\r\n            [class.active]=\"activeKind() === kind\"\r\n            [attr.aria-selected]=\"activeKind() === kind\"\r\n            [attr.aria-controls]=\"'fab-tabpanel-' + kind\"\r\n            (click)=\"selectKind(kind)\"\r\n          >\r\n            <i [class]=\"kindIconClass(kind)\" aria-hidden=\"true\"></i>\r\n            <span>{{ kindLocaleKey(kind) | translate }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (errorKey()) {\r\n        <div class=\"fab-inline-error\" role=\"alert\">\r\n          <i class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></i>\r\n          {{ errorKey()! | translate }}\r\n        </div>\r\n      }\r\n\r\n      <!-- Per-kind picker bodies -->\r\n      <div\r\n        class=\"fab-picker-body\"\r\n        role=\"tabpanel\"\r\n        [id]=\"'fab-tabpanel-' + activeKind()\"\r\n        [attr.aria-labelledby]=\"'fab-tab-' + activeKind()\"\r\n      >\r\n        @switch (activeKind()) {\r\n\r\n          @case ('users') {\r\n            <input\r\n              type=\"text\"\r\n              class=\"fab-input\"\r\n              [ngModel]=\"userSearchQuery()\"\r\n              (ngModelChange)=\"userSearchQuery.set($event); onUserSearchInput()\"\r\n              [placeholder]=\"'audience.search_users_placeholder' | translate\"\r\n              [attr.aria-label]=\"'audience.search_users_placeholder' | translate\"\r\n            />\r\n            @if (userSearchResults().length > 0) {\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (u of userSearchResults(); track u.id) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickUser(u)\">\r\n                    <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n                    <span>{{ u.firstName }} {{ u.lastName }}</span>\r\n                    <span class=\"fab-result-secondary\">{{ u.email }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            } @else if (userSearchQuery().length >= 2) {\r\n              <div class=\"fab-empty\">{{ 'audience.no_users_match' | translate }}</div>\r\n            }\r\n          }\r\n\r\n          @case ('roles') {\r\n            @if (loadRoleOus && roleOus().length > 0) {\r\n              <input\r\n                type=\"text\"\r\n                class=\"fab-input\"\r\n                [ngModel]=\"roleSearchQuery()\"\r\n                (ngModelChange)=\"roleSearchQuery.set($event)\"\r\n                [placeholder]=\"'audience.search_roles_placeholder' | translate\"\r\n                [attr.aria-label]=\"'audience.search_roles_placeholder' | translate\"\r\n              />\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (role of filteredRoles(); track role.ouId) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickRole(role)\">\r\n                    <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n                    <span>{{ role.displayName }}</span>\r\n                    <span class=\"fab-result-secondary\">{{ role.appId }}</span>\r\n                  </button>\r\n                }\r\n                @if (filteredRoles().length === 0) {\r\n                  <div class=\"fab-empty\">{{ 'audience.no_roles_match' | translate }}</div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"fab-empty\">{{ 'audience.roles_unavailable' | translate }}</div>\r\n            }\r\n          }\r\n\r\n          @case ('ou') {\r\n            @if (chartOptions().length > 0) {\r\n              <label for=\"fab-chart-select\" class=\"fab-mini-label\">\r\n                {{ 'audience.org_chart' | translate }}\r\n              </label>\r\n              <select\r\n                id=\"fab-chart-select\"\r\n                class=\"fab-select\"\r\n                [ngModel]=\"selectedChartId()\"\r\n                (ngModelChange)=\"onChartChange($event)\"\r\n              >\r\n                @for (opt of chartOptions(); track $index) {\r\n                  <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\r\n                }\r\n              </select>\r\n            }\r\n            <label class=\"fab-checkbox-label\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [ngModel]=\"ouIncludeDescendants()\"\r\n                (ngModelChange)=\"ouIncludeDescendants.set($event)\"\r\n              />\r\n              {{ 'audience.include_descendants' | translate }}\r\n            </label>\r\n            @if (ouTree().length === 0) {\r\n              <div class=\"fab-empty\">{{ 'audience.ou_tree_empty' | translate }}</div>\r\n            } @else {\r\n              <div class=\"fab-result-list fab-ou-tree\" role=\"list\">\r\n                @for (ou of ouTree(); track ou.id) {\r\n                  <button\r\n                    type=\"button\"\r\n                    role=\"listitem\"\r\n                    class=\"fab-result-item\"\r\n                    [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\r\n                    (click)=\"pickOu(ou)\"\r\n                  >\r\n                    <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n                    <span>{{ ou.displayName }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @case ('app-everyone') {\r\n            @if (appEveryoneOptions.length === 0) {\r\n              <div class=\"fab-empty\">{{ 'audience.app_everyone_empty' | translate }}</div>\r\n            } @else {\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (app of appEveryoneOptions; track app.appId) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickAppEveryone(app.appId)\">\r\n                    <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\r\n                    <span>{{ app.displayName }}</span>\r\n                    <span class=\"fab-result-secondary\">{{ app.appId }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @case ('chart') {\r\n            @if (chartTermOptions().length === 0) {\r\n              <div class=\"fab-empty\">{{ 'audience.chart_options_empty' | translate }}</div>\r\n            } @else {\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (opt of chartTermOptions(); track opt.id) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickChart(opt.id)\">\r\n                    <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\r\n                    <span>{{ opt.name }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @case ('preset') {\r\n            <div class=\"fab-result-list\" role=\"list\">\r\n              @for (p of presetOptions; track p) {\r\n                <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickPreset(p)\">\r\n                  <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\r\n                  <span>{{ presetLocaleKey(p) | translate }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Reusable term card template, parameterised by target bucket + index for removal callbacks -->\r\n<ng-template #termCard let-term let-target=\"target\" let-index=\"index\">\r\n  <div class=\"fab-term-card\" [class.fab-term-exclude]=\"target === 'excludes'\">\r\n\r\n    @switch (term.kind) {\r\n      @case ('users') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_users' | translate: { count: term.userIds.length } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n        <div class=\"fab-term-chips\">\r\n          @for (id of term.userIds; track id) {\r\n            <span class=\"fab-chip\">\r\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n              <span>{{ id.substring(0, 8) }}\u2026</span>\r\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeUserId(target, index, id)\"\r\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_roles' | translate: { app: appLabel(term.appId), count: term.roleKeys.length } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n        <div class=\"fab-term-chips\">\r\n          @for (k of term.roleKeys; track k) {\r\n            <span class=\"fab-chip\">\r\n              <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n              <span>{{ roleLabel(term.appId, k) }}</span>\r\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeRoleKey(target, index, k)\"\r\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('ou') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_ous' | translate: { count: term.ouIds.length } }}\r\n            @if (term.includeDescendants) {\r\n              <span class=\"fab-badge\">{{ 'audience.descendants_badge' | translate }}</span>\r\n            }\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n        <div class=\"fab-term-chips\">\r\n          @for (id of term.ouIds; track id) {\r\n            <span class=\"fab-chip\">\r\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n              <span>{{ ouLabel(id) }}</span>\r\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeOuId(target, index, id)\"\r\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('app-everyone') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_app_everyone' | translate: { app: appLabel(term.appId) } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      @case ('chart') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_chart' | translate: { chart: chartLabel(term.chartId) } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      @case ('preset') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ presetLocaleKey(term.preset) | translate }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".fab-root{display:flex;flex-direction:column;gap:14px;width:100%}.fab-bucket{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px}.fab-bucket.fab-bucket-exclude{border-inline-start:3px solid rgba(255,59,48,.55)}.fab-bucket-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.fab-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color-secondary)}.fab-add-btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary-color, #e8732a);color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}.fab-add-btn:hover{filter:brightness(1.05)}.fab-add-btn i{font-size:11px}.fab-empty{text-align:center;padding:12px;color:var(--text-color-secondary);font-size:12px;font-style:italic}.fab-term-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.fab-term-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.fab-term-card.fab-term-exclude{background:#ff3b300d;border-color:#ff3b302e}.fab-term-head{display:flex;align-items:center;gap:8px}.fab-term-head i:first-child{color:var(--text-color-secondary)}.fab-term-title{flex:1;font-size:13px;display:inline-flex;align-items:center;gap:6px}.fab-badge{font-size:10px;background:#ffffff1a;color:var(--text-color-secondary);padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}.fab-term-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.fab-chip{display:inline-flex;align-items:center;gap:4px;background:#ffffff0f;border-radius:12px;padding:2px 4px 2px 8px;font-size:11px}.fab-chip i{font-size:10px;color:var(--text-color-secondary)}.fab-chip-x{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;padding:2px 4px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.fab-chip-x i{font-size:9px}.fab-chip-x:hover{background:#ff3b302e;color:#ff3b30}.fab-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:11px}.fab-icon-btn:hover{background:#ffffff24}.fab-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fab-picker{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px #0000002e}.fab-picker-header{display:flex;align-items:center;justify-content:space-between}.fab-picker-target{font-size:12px;color:var(--text-color-secondary)}.fab-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:14px;padding:4px}.fab-close:hover{color:var(--text-color)}.fab-kind-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--surface-border);padding-bottom:6px}.fab-kind-tab{background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 10px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:6px}.fab-kind-tab i{font-size:11px}.fab-kind-tab:hover{background:var(--surface-hover);color:var(--text-color)}.fab-kind-tab.active{background:#e8732a1f;border-color:var(--primary-color, #e8732a);color:var(--text-color)}.fab-picker-body{display:flex;flex-direction:column;gap:8px}.fab-input,.fab-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fab-input:focus,.fab-select:focus{border-color:var(--primary-color, #e8732a)}.fab-mini-label{font-size:11px;color:var(--text-color-secondary)}.fab-result-list{max-height:200px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fab-result-list.fab-ou-tree{max-height:240px}button.fab-result-item{width:100%;background:transparent;border:none;color:inherit;font:inherit;text-align:start;appearance:none}.fab-result-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px}.fab-result-item:hover{background:var(--surface-hover)}.fab-result-item:focus-visible{outline:2px solid var(--primary-color, #e8732a);outline-offset:-2px}.fab-result-item i{color:var(--text-color-secondary)}.fab-result-secondary{color:var(--text-color-secondary);font-size:11px;margin-inline-start:auto;text-transform:uppercase;letter-spacing:.4px}.fab-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fab-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fab-inline-error{display:flex;align-items:center;gap:6px;background:#ff3b301a;color:#ff8a80;border-radius:6px;padding:6px 10px;font-size:12px}.fab-inline-error i{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AudienceBuilderComponent, decorators: [{
             type: Component,
@@ -2758,7 +2956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                             useExisting: forwardRef(() => AudienceBuilderComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"fab-root\">\n\n  <!-- Includes section -->\n  <div class=\"fab-bucket\">\n    <div class=\"fab-bucket-header\">\n      <div class=\"fab-section-label\" id=\"fab-includes-label\">{{ 'audience.includes' | translate }}</div>\n      <button\n        type=\"button\"\n        class=\"fab-add-btn\"\n        (click)=\"openPicker('includes')\"\n        [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'includes'\"\n        [attr.aria-controls]=\"pickerOpen() && editTarget() === 'includes' ? 'fab-picker-region' : null\"\n      >\n        <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n        {{ 'audience.add_term' | translate }}\n      </button>\n    </div>\n\n    @if (includes().length === 0) {\n      <div class=\"fab-empty\">{{ 'audience.includes_empty' | translate }}</div>\n    } @else {\n      <ul class=\"fab-term-list\" aria-labelledby=\"fab-includes-label\">\n        @for (term of includes(); track term) {\n          <li class=\"fab-term\">\n            <ng-container\n              *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'includes', index: $index }\">\n            </ng-container>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  <!-- Excludes section -->\n  @if (showExcludes) {\n    <div class=\"fab-bucket fab-bucket-exclude\">\n      <div class=\"fab-bucket-header\">\n        <div class=\"fab-section-label\" id=\"fab-excludes-label\">{{ 'audience.excludes' | translate }}</div>\n        <button\n          type=\"button\"\n          class=\"fab-add-btn\"\n          (click)=\"openPicker('excludes')\"\n          [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'excludes'\"\n          [attr.aria-controls]=\"pickerOpen() && editTarget() === 'excludes' ? 'fab-picker-region' : null\"\n        >\n          <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n          {{ 'audience.add_term' | translate }}\n        </button>\n      </div>\n\n      @if (excludes().length === 0) {\n        <div class=\"fab-empty\">{{ 'audience.excludes_empty' | translate }}</div>\n      } @else {\n        <ul class=\"fab-term-list\" aria-labelledby=\"fab-excludes-label\">\n          @for (term of excludes(); track term) {\n            <li class=\"fab-term\">\n              <ng-container\n                *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'excludes', index: $index }\">\n              </ng-container>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  <!-- Inline picker (shared across includes/excludes; gated by pickerOpen) -->\n  @if (pickerOpen()) {\n    <div\n      id=\"fab-picker-region\"\n      class=\"fab-picker\"\n      role=\"region\"\n      [attr.aria-label]=\"(editTarget() === 'includes'\n        ? ('audience.adding_to_includes' | translate)\n        : ('audience.adding_to_excludes' | translate))\"\n    >\n      <div class=\"fab-picker-header\">\n        <span class=\"fab-picker-target\">\n          {{\n            editTarget() === 'includes'\n              ? ('audience.adding_to_includes' | translate)\n              : ('audience.adding_to_excludes' | translate)\n          }}\n        </span>\n        <button type=\"button\" class=\"fab-close\" (click)=\"closePicker()\" [attr.aria-label]=\"'audience.close' | translate\">\n          <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n\n      <!-- Kind tabs -->\n      <div class=\"fab-kind-tabs\" role=\"tablist\">\n        @for (kind of supportedKinds; track kind) {\n          <button\n            type=\"button\"\n            role=\"tab\"\n            class=\"fab-kind-tab\"\n            [id]=\"'fab-tab-' + kind\"\n            [class.active]=\"activeKind() === kind\"\n            [attr.aria-selected]=\"activeKind() === kind\"\n            [attr.aria-controls]=\"'fab-tabpanel-' + kind\"\n            (click)=\"selectKind(kind)\"\n          >\n            <i [class]=\"kindIconClass(kind)\" aria-hidden=\"true\"></i>\n            <span>{{ kindLocaleKey(kind) | translate }}</span>\n          </button>\n        }\n      </div>\n\n      @if (errorKey()) {\n        <div class=\"fab-inline-error\" role=\"alert\">\n          <i class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></i>\n          {{ errorKey()! | translate }}\n        </div>\n      }\n\n      <!-- Per-kind picker bodies -->\n      <div\n        class=\"fab-picker-body\"\n        role=\"tabpanel\"\n        [id]=\"'fab-tabpanel-' + activeKind()\"\n        [attr.aria-labelledby]=\"'fab-tab-' + activeKind()\"\n      >\n        @switch (activeKind()) {\n\n          @case ('users') {\n            <input\n              type=\"text\"\n              class=\"fab-input\"\n              [ngModel]=\"userSearchQuery()\"\n              (ngModelChange)=\"userSearchQuery.set($event); onUserSearchInput()\"\n              [placeholder]=\"'audience.search_users_placeholder' | translate\"\n              [attr.aria-label]=\"'audience.search_users_placeholder' | translate\"\n            />\n            @if (userSearchResults().length > 0) {\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (u of userSearchResults(); track u.id) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickUser(u)\">\n                    <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n                    <span>{{ u.firstName }} {{ u.lastName }}</span>\n                    <span class=\"fab-result-secondary\">{{ u.email }}</span>\n                  </button>\n                }\n              </div>\n            } @else if (userSearchQuery().length >= 2) {\n              <div class=\"fab-empty\">{{ 'audience.no_users_match' | translate }}</div>\n            }\n          }\n\n          @case ('roles') {\n            @if (loadRoleOus && roleOus().length > 0) {\n              <input\n                type=\"text\"\n                class=\"fab-input\"\n                [ngModel]=\"roleSearchQuery()\"\n                (ngModelChange)=\"roleSearchQuery.set($event)\"\n                [placeholder]=\"'audience.search_roles_placeholder' | translate\"\n                [attr.aria-label]=\"'audience.search_roles_placeholder' | translate\"\n              />\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (role of filteredRoles(); track role.ouId) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickRole(role)\">\n                    <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n                    <span>{{ role.displayName }}</span>\n                    <span class=\"fab-result-secondary\">{{ role.appId }}</span>\n                  </button>\n                }\n                @if (filteredRoles().length === 0) {\n                  <div class=\"fab-empty\">{{ 'audience.no_roles_match' | translate }}</div>\n                }\n              </div>\n            } @else {\n              <div class=\"fab-empty\">{{ 'audience.roles_unavailable' | translate }}</div>\n            }\n          }\n\n          @case ('ou') {\n            @if (chartOptions().length > 0) {\n              <label for=\"fab-chart-select\" class=\"fab-mini-label\">\n                {{ 'audience.org_chart' | translate }}\n              </label>\n              <select\n                id=\"fab-chart-select\"\n                class=\"fab-select\"\n                [ngModel]=\"selectedChartId()\"\n                (ngModelChange)=\"onChartChange($event)\"\n              >\n                @for (opt of chartOptions(); track $index) {\n                  <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\n                }\n              </select>\n            }\n            <label class=\"fab-checkbox-label\">\n              <input\n                type=\"checkbox\"\n                [ngModel]=\"ouIncludeDescendants()\"\n                (ngModelChange)=\"ouIncludeDescendants.set($event)\"\n              />\n              {{ 'audience.include_descendants' | translate }}\n            </label>\n            @if (ouTree().length === 0) {\n              <div class=\"fab-empty\">{{ 'audience.ou_tree_empty' | translate }}</div>\n            } @else {\n              <div class=\"fab-result-list fab-ou-tree\" role=\"list\">\n                @for (ou of ouTree(); track ou.id) {\n                  <button\n                    type=\"button\"\n                    role=\"listitem\"\n                    class=\"fab-result-item\"\n                    [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n                    (click)=\"pickOu(ou)\"\n                  >\n                    <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n                    <span>{{ ou.displayName }}</span>\n                  </button>\n                }\n              </div>\n            }\n          }\n\n          @case ('app-everyone') {\n            @if (appEveryoneOptions.length === 0) {\n              <div class=\"fab-empty\">{{ 'audience.app_everyone_empty' | translate }}</div>\n            } @else {\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (app of appEveryoneOptions; track app.appId) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickAppEveryone(app.appId)\">\n                    <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\n                    <span>{{ app.displayName }}</span>\n                    <span class=\"fab-result-secondary\">{{ app.appId }}</span>\n                  </button>\n                }\n              </div>\n            }\n          }\n\n          @case ('chart') {\n            @if (chartTermOptions().length === 0) {\n              <div class=\"fab-empty\">{{ 'audience.chart_options_empty' | translate }}</div>\n            } @else {\n              <div class=\"fab-result-list\" role=\"list\">\n                @for (opt of chartTermOptions(); track opt.id) {\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickChart(opt.id)\">\n                    <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\n                    <span>{{ opt.name }}</span>\n                  </button>\n                }\n              </div>\n            }\n          }\n\n          @case ('preset') {\n            <div class=\"fab-result-list\" role=\"list\">\n              @for (p of presetOptions; track p) {\n                <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickPreset(p)\">\n                  <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\n                  <span>{{ presetLocaleKey(p) | translate }}</span>\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n</div>\n\n<!-- Reusable term card template, parameterised by target bucket + index for removal callbacks -->\n<ng-template #termCard let-term let-target=\"target\" let-index=\"index\">\n  <div class=\"fab-term-card\" [class.fab-term-exclude]=\"target === 'excludes'\">\n\n    @switch (term.kind) {\n      @case ('users') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_users' | translate: { count: term.userIds.length } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"fab-term-chips\">\n          @for (id of term.userIds; track id) {\n            <span class=\"fab-chip\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ id.substring(0, 8) }}\u2026</span>\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeUserId(target, index, id)\"\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @case ('roles') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_roles' | translate: { app: appLabel(term.appId), count: term.roleKeys.length } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"fab-term-chips\">\n          @for (k of term.roleKeys; track k) {\n            <span class=\"fab-chip\">\n              <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\n              <span>{{ roleLabel(term.appId, k) }}</span>\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeRoleKey(target, index, k)\"\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @case ('ou') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_ous' | translate: { count: term.ouIds.length } }}\n            @if (term.includeDescendants) {\n              <span class=\"fab-badge\">{{ 'audience.descendants_badge' | translate }}</span>\n            }\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n        <div class=\"fab-term-chips\">\n          @for (id of term.ouIds; track id) {\n            <span class=\"fab-chip\">\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ouLabel(id) }}</span>\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeOuId(target, index, id)\"\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @case ('app-everyone') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_app_everyone' | translate: { app: appLabel(term.appId) } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      @case ('chart') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ 'audience.term_chart' | translate: { chart: chartLabel(term.chartId) } }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n\n      @case ('preset') {\n        <div class=\"fab-term-head\">\n          <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\n          <span class=\"fab-term-title\">\n            {{ presetLocaleKey(term.preset) | translate }}\n          </span>\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".fab-root{display:flex;flex-direction:column;gap:14px;width:100%}.fab-bucket{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px}.fab-bucket.fab-bucket-exclude{border-inline-start:3px solid rgba(255,59,48,.55)}.fab-bucket-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.fab-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color-secondary)}.fab-add-btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary-color, #e8732a);color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}.fab-add-btn:hover{filter:brightness(1.05)}.fab-add-btn i{font-size:11px}.fab-empty{text-align:center;padding:12px;color:var(--text-color-secondary);font-size:12px;font-style:italic}.fab-term-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.fab-term-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.fab-term-card.fab-term-exclude{background:#ff3b300d;border-color:#ff3b302e}.fab-term-head{display:flex;align-items:center;gap:8px}.fab-term-head i:first-child{color:var(--text-color-secondary)}.fab-term-title{flex:1;font-size:13px;display:inline-flex;align-items:center;gap:6px}.fab-badge{font-size:10px;background:#ffffff1a;color:var(--text-color-secondary);padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}.fab-term-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.fab-chip{display:inline-flex;align-items:center;gap:4px;background:#ffffff0f;border-radius:12px;padding:2px 4px 2px 8px;font-size:11px}.fab-chip i{font-size:10px;color:var(--text-color-secondary)}.fab-chip-x{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;padding:2px 4px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.fab-chip-x i{font-size:9px}.fab-chip-x:hover{background:#ff3b302e;color:#ff3b30}.fab-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:11px}.fab-icon-btn:hover{background:#ffffff24}.fab-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fab-picker{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px #0000002e}.fab-picker-header{display:flex;align-items:center;justify-content:space-between}.fab-picker-target{font-size:12px;color:var(--text-color-secondary)}.fab-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:14px;padding:4px}.fab-close:hover{color:var(--text-color)}.fab-kind-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--surface-border);padding-bottom:6px}.fab-kind-tab{background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 10px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:6px}.fab-kind-tab i{font-size:11px}.fab-kind-tab:hover{background:var(--surface-hover);color:var(--text-color)}.fab-kind-tab.active{background:#e8732a1f;border-color:var(--primary-color, #e8732a);color:var(--text-color)}.fab-picker-body{display:flex;flex-direction:column;gap:8px}.fab-input,.fab-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fab-input:focus,.fab-select:focus{border-color:var(--primary-color, #e8732a)}.fab-mini-label{font-size:11px;color:var(--text-color-secondary)}.fab-result-list{max-height:200px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fab-result-list.fab-ou-tree{max-height:240px}button.fab-result-item{width:100%;background:transparent;border:none;color:inherit;font:inherit;text-align:start;appearance:none}.fab-result-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px}.fab-result-item:hover{background:var(--surface-hover)}.fab-result-item:focus-visible{outline:2px solid var(--primary-color, #e8732a);outline-offset:-2px}.fab-result-item i{color:var(--text-color-secondary)}.fab-result-secondary{color:var(--text-color-secondary);font-size:11px;margin-inline-start:auto;text-transform:uppercase;letter-spacing:.4px}.fab-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fab-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fab-inline-error{display:flex;align-items:center;gap:6px;background:#ff3b301a;color:#ff8a80;border-radius:6px;padding:6px 10px;font-size:12px}.fab-inline-error i{font-size:12px}\n"] }]
+                    ], template: "<div class=\"fab-root\">\r\n\r\n  <!-- Includes section -->\r\n  <div class=\"fab-bucket\">\r\n    <div class=\"fab-bucket-header\">\r\n      <div class=\"fab-section-label\" id=\"fab-includes-label\">{{ 'audience.includes' | translate }}</div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fab-add-btn\"\r\n        (click)=\"openPicker('includes')\"\r\n        [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'includes'\"\r\n        [attr.aria-controls]=\"pickerOpen() && editTarget() === 'includes' ? 'fab-picker-region' : null\"\r\n      >\r\n        <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\r\n        {{ 'audience.add_term' | translate }}\r\n      </button>\r\n    </div>\r\n\r\n    @if (includes().length === 0) {\r\n      <div class=\"fab-empty\">{{ 'audience.includes_empty' | translate }}</div>\r\n    } @else {\r\n      <ul class=\"fab-term-list\" aria-labelledby=\"fab-includes-label\">\r\n        @for (term of includes(); track term) {\r\n          <li class=\"fab-term\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'includes', index: $index }\">\r\n            </ng-container>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </div>\r\n\r\n  <!-- Excludes section -->\r\n  @if (showExcludes) {\r\n    <div class=\"fab-bucket fab-bucket-exclude\">\r\n      <div class=\"fab-bucket-header\">\r\n        <div class=\"fab-section-label\" id=\"fab-excludes-label\">{{ 'audience.excludes' | translate }}</div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fab-add-btn\"\r\n          (click)=\"openPicker('excludes')\"\r\n          [attr.aria-expanded]=\"pickerOpen() && editTarget() === 'excludes'\"\r\n          [attr.aria-controls]=\"pickerOpen() && editTarget() === 'excludes' ? 'fab-picker-region' : null\"\r\n        >\r\n          <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\r\n          {{ 'audience.add_term' | translate }}\r\n        </button>\r\n      </div>\r\n\r\n      @if (excludes().length === 0) {\r\n        <div class=\"fab-empty\">{{ 'audience.excludes_empty' | translate }}</div>\r\n      } @else {\r\n        <ul class=\"fab-term-list\" aria-labelledby=\"fab-excludes-label\">\r\n          @for (term of excludes(); track term) {\r\n            <li class=\"fab-term\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"termCard; context: { $implicit: term, target: 'excludes', index: $index }\">\r\n              </ng-container>\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Inline picker (shared across includes/excludes; gated by pickerOpen) -->\r\n  @if (pickerOpen()) {\r\n    <div\r\n      id=\"fab-picker-region\"\r\n      class=\"fab-picker\"\r\n      role=\"region\"\r\n      [attr.aria-label]=\"(editTarget() === 'includes'\r\n        ? ('audience.adding_to_includes' | translate)\r\n        : ('audience.adding_to_excludes' | translate))\"\r\n    >\r\n      <div class=\"fab-picker-header\">\r\n        <span class=\"fab-picker-target\">\r\n          {{\r\n            editTarget() === 'includes'\r\n              ? ('audience.adding_to_includes' | translate)\r\n              : ('audience.adding_to_excludes' | translate)\r\n          }}\r\n        </span>\r\n        <button type=\"button\" class=\"fab-close\" (click)=\"closePicker()\" [attr.aria-label]=\"'audience.close' | translate\">\r\n          <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Kind tabs -->\r\n      <div class=\"fab-kind-tabs\" role=\"tablist\">\r\n        @for (kind of supportedKinds; track kind) {\r\n          <button\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            class=\"fab-kind-tab\"\r\n            [id]=\"'fab-tab-' + kind\"\r\n            [class.active]=\"activeKind() === kind\"\r\n            [attr.aria-selected]=\"activeKind() === kind\"\r\n            [attr.aria-controls]=\"'fab-tabpanel-' + kind\"\r\n            (click)=\"selectKind(kind)\"\r\n          >\r\n            <i [class]=\"kindIconClass(kind)\" aria-hidden=\"true\"></i>\r\n            <span>{{ kindLocaleKey(kind) | translate }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (errorKey()) {\r\n        <div class=\"fab-inline-error\" role=\"alert\">\r\n          <i class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></i>\r\n          {{ errorKey()! | translate }}\r\n        </div>\r\n      }\r\n\r\n      <!-- Per-kind picker bodies -->\r\n      <div\r\n        class=\"fab-picker-body\"\r\n        role=\"tabpanel\"\r\n        [id]=\"'fab-tabpanel-' + activeKind()\"\r\n        [attr.aria-labelledby]=\"'fab-tab-' + activeKind()\"\r\n      >\r\n        @switch (activeKind()) {\r\n\r\n          @case ('users') {\r\n            <input\r\n              type=\"text\"\r\n              class=\"fab-input\"\r\n              [ngModel]=\"userSearchQuery()\"\r\n              (ngModelChange)=\"userSearchQuery.set($event); onUserSearchInput()\"\r\n              [placeholder]=\"'audience.search_users_placeholder' | translate\"\r\n              [attr.aria-label]=\"'audience.search_users_placeholder' | translate\"\r\n            />\r\n            @if (userSearchResults().length > 0) {\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (u of userSearchResults(); track u.id) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickUser(u)\">\r\n                    <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n                    <span>{{ u.firstName }} {{ u.lastName }}</span>\r\n                    <span class=\"fab-result-secondary\">{{ u.email }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            } @else if (userSearchQuery().length >= 2) {\r\n              <div class=\"fab-empty\">{{ 'audience.no_users_match' | translate }}</div>\r\n            }\r\n          }\r\n\r\n          @case ('roles') {\r\n            @if (loadRoleOus && roleOus().length > 0) {\r\n              <input\r\n                type=\"text\"\r\n                class=\"fab-input\"\r\n                [ngModel]=\"roleSearchQuery()\"\r\n                (ngModelChange)=\"roleSearchQuery.set($event)\"\r\n                [placeholder]=\"'audience.search_roles_placeholder' | translate\"\r\n                [attr.aria-label]=\"'audience.search_roles_placeholder' | translate\"\r\n              />\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (role of filteredRoles(); track role.ouId) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickRole(role)\">\r\n                    <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n                    <span>{{ role.displayName }}</span>\r\n                    <span class=\"fab-result-secondary\">{{ role.appId }}</span>\r\n                  </button>\r\n                }\r\n                @if (filteredRoles().length === 0) {\r\n                  <div class=\"fab-empty\">{{ 'audience.no_roles_match' | translate }}</div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"fab-empty\">{{ 'audience.roles_unavailable' | translate }}</div>\r\n            }\r\n          }\r\n\r\n          @case ('ou') {\r\n            @if (chartOptions().length > 0) {\r\n              <label for=\"fab-chart-select\" class=\"fab-mini-label\">\r\n                {{ 'audience.org_chart' | translate }}\r\n              </label>\r\n              <select\r\n                id=\"fab-chart-select\"\r\n                class=\"fab-select\"\r\n                [ngModel]=\"selectedChartId()\"\r\n                (ngModelChange)=\"onChartChange($event)\"\r\n              >\r\n                @for (opt of chartOptions(); track $index) {\r\n                  <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\r\n                }\r\n              </select>\r\n            }\r\n            <label class=\"fab-checkbox-label\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [ngModel]=\"ouIncludeDescendants()\"\r\n                (ngModelChange)=\"ouIncludeDescendants.set($event)\"\r\n              />\r\n              {{ 'audience.include_descendants' | translate }}\r\n            </label>\r\n            @if (ouTree().length === 0) {\r\n              <div class=\"fab-empty\">{{ 'audience.ou_tree_empty' | translate }}</div>\r\n            } @else {\r\n              <div class=\"fab-result-list fab-ou-tree\" role=\"list\">\r\n                @for (ou of ouTree(); track ou.id) {\r\n                  <button\r\n                    type=\"button\"\r\n                    role=\"listitem\"\r\n                    class=\"fab-result-item\"\r\n                    [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\r\n                    (click)=\"pickOu(ou)\"\r\n                  >\r\n                    <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n                    <span>{{ ou.displayName }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @case ('app-everyone') {\r\n            @if (appEveryoneOptions.length === 0) {\r\n              <div class=\"fab-empty\">{{ 'audience.app_everyone_empty' | translate }}</div>\r\n            } @else {\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (app of appEveryoneOptions; track app.appId) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickAppEveryone(app.appId)\">\r\n                    <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\r\n                    <span>{{ app.displayName }}</span>\r\n                    <span class=\"fab-result-secondary\">{{ app.appId }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @case ('chart') {\r\n            @if (chartTermOptions().length === 0) {\r\n              <div class=\"fab-empty\">{{ 'audience.chart_options_empty' | translate }}</div>\r\n            } @else {\r\n              <div class=\"fab-result-list\" role=\"list\">\r\n                @for (opt of chartTermOptions(); track opt.id) {\r\n                  <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickChart(opt.id)\">\r\n                    <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\r\n                    <span>{{ opt.name }}</span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @case ('preset') {\r\n            <div class=\"fab-result-list\" role=\"list\">\r\n              @for (p of presetOptions; track p) {\r\n                <button type=\"button\" role=\"listitem\" class=\"fab-result-item\" (click)=\"pickPreset(p)\">\r\n                  <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\r\n                  <span>{{ presetLocaleKey(p) | translate }}</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Reusable term card template, parameterised by target bucket + index for removal callbacks -->\r\n<ng-template #termCard let-term let-target=\"target\" let-index=\"index\">\r\n  <div class=\"fab-term-card\" [class.fab-term-exclude]=\"target === 'excludes'\">\r\n\r\n    @switch (term.kind) {\r\n      @case ('users') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_users' | translate: { count: term.userIds.length } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n        <div class=\"fab-term-chips\">\r\n          @for (id of term.userIds; track id) {\r\n            <span class=\"fab-chip\">\r\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\r\n              <span>{{ id.substring(0, 8) }}\u2026</span>\r\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeUserId(target, index, id)\"\r\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_roles' | translate: { app: appLabel(term.appId), count: term.roleKeys.length } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n        <div class=\"fab-term-chips\">\r\n          @for (k of term.roleKeys; track k) {\r\n            <span class=\"fab-chip\">\r\n              <i class=\"pi pi-id-card\" aria-hidden=\"true\"></i>\r\n              <span>{{ roleLabel(term.appId, k) }}</span>\r\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeRoleKey(target, index, k)\"\r\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('ou') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_ous' | translate: { count: term.ouIds.length } }}\r\n            @if (term.includeDescendants) {\r\n              <span class=\"fab-badge\">{{ 'audience.descendants_badge' | translate }}</span>\r\n            }\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n        <div class=\"fab-term-chips\">\r\n          @for (id of term.ouIds; track id) {\r\n            <span class=\"fab-chip\">\r\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\r\n              <span>{{ ouLabel(id) }}</span>\r\n              <button type=\"button\" class=\"fab-chip-x\" (click)=\"removeOuId(target, index, id)\"\r\n                [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n                <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n              </button>\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('app-everyone') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-globe\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_app_everyone' | translate: { app: appLabel(term.appId) } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      @case ('chart') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-share-alt\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ 'audience.term_chart' | translate: { chart: chartLabel(term.chartId) } }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      @case ('preset') {\r\n        <div class=\"fab-term-head\">\r\n          <i class=\"pi pi-star\" aria-hidden=\"true\"></i>\r\n          <span class=\"fab-term-title\">\r\n            {{ presetLocaleKey(term.preset) | translate }}\r\n          </span>\r\n          <button type=\"button\" class=\"fab-icon-btn danger\" (click)=\"removeTerm(target, index)\"\r\n            [attr.aria-label]=\"'audience.remove_term' | translate\">\r\n            <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".fab-root{display:flex;flex-direction:column;gap:14px;width:100%}.fab-bucket{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px}.fab-bucket.fab-bucket-exclude{border-inline-start:3px solid rgba(255,59,48,.55)}.fab-bucket-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.fab-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color-secondary)}.fab-add-btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary-color, #e8732a);color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}.fab-add-btn:hover{filter:brightness(1.05)}.fab-add-btn i{font-size:11px}.fab-empty{text-align:center;padding:12px;color:var(--text-color-secondary);font-size:12px;font-style:italic}.fab-term-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.fab-term-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 10px}.fab-term-card.fab-term-exclude{background:#ff3b300d;border-color:#ff3b302e}.fab-term-head{display:flex;align-items:center;gap:8px}.fab-term-head i:first-child{color:var(--text-color-secondary)}.fab-term-title{flex:1;font-size:13px;display:inline-flex;align-items:center;gap:6px}.fab-badge{font-size:10px;background:#ffffff1a;color:var(--text-color-secondary);padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}.fab-term-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.fab-chip{display:inline-flex;align-items:center;gap:4px;background:#ffffff0f;border-radius:12px;padding:2px 4px 2px 8px;font-size:11px}.fab-chip i{font-size:10px;color:var(--text-color-secondary)}.fab-chip-x{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;padding:2px 4px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.fab-chip-x i{font-size:9px}.fab-chip-x:hover{background:#ff3b302e;color:#ff3b30}.fab-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:11px}.fab-icon-btn:hover{background:#ffffff24}.fab-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fab-picker{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px #0000002e}.fab-picker-header{display:flex;align-items:center;justify-content:space-between}.fab-picker-target{font-size:12px;color:var(--text-color-secondary)}.fab-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:14px;padding:4px}.fab-close:hover{color:var(--text-color)}.fab-kind-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--surface-border);padding-bottom:6px}.fab-kind-tab{background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 10px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:6px}.fab-kind-tab i{font-size:11px}.fab-kind-tab:hover{background:var(--surface-hover);color:var(--text-color)}.fab-kind-tab.active{background:#e8732a1f;border-color:var(--primary-color, #e8732a);color:var(--text-color)}.fab-picker-body{display:flex;flex-direction:column;gap:8px}.fab-input,.fab-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fab-input:focus,.fab-select:focus{border-color:var(--primary-color, #e8732a)}.fab-mini-label{font-size:11px;color:var(--text-color-secondary)}.fab-result-list{max-height:200px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fab-result-list.fab-ou-tree{max-height:240px}button.fab-result-item{width:100%;background:transparent;border:none;color:inherit;font:inherit;text-align:start;appearance:none}.fab-result-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px}.fab-result-item:hover{background:var(--surface-hover)}.fab-result-item:focus-visible{outline:2px solid var(--primary-color, #e8732a);outline-offset:-2px}.fab-result-item i{color:var(--text-color-secondary)}.fab-result-secondary{color:var(--text-color-secondary);font-size:11px;margin-inline-start:auto;text-transform:uppercase;letter-spacing:.4px}.fab-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fab-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fab-inline-error{display:flex;align-items:center;gap:6px;background:#ff3b301a;color:#ff8a80;border-radius:6px;padding:6px 10px;font-size:12px}.fab-inline-error i{font-size:12px}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], showExcludes: [{
@@ -2986,110 +3184,110 @@ class FlyImageUploadComponent {
         });
     }
     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>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyImageUploadComponent, isStandalone: true, selector: "fly-image-upload", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxSizeBytes: { classPropertyName: "maxSizeBytes", publicName: "maxSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, currentImageId: { classPropertyName: "currentImageId", publicName: "currentImageId", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploaded: "uploaded", removed: "removed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "cropImage", first: true, predicate: ["cropImage"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="fly-image-upload">
+      @if (previewUrl()) {
+        <div class="fly-image-upload__preview">
+          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
+          <div class="fly-image-upload__overlay">
+            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
+              <span class="pi pi-pencil" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
+              <span class="pi pi-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      } @else {
+        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          @if (uploading()) {
+            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
+          } @else {
+            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
+            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
+          }
+        </button>
+      }
+
+      @if (error()) {
+        <div class="fly-image-upload__error">{{ error() }}</div>
+      }
+
+      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
+
+      @if (showCropper()) {
+        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
+          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
+            <div class="fly-image-upload__crop-header">
+              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
+            </div>
+            <div class="fly-image-upload__crop-body">
+              <img #cropImage [src]="rawImageUrl()" alt="" />
+            </div>
+            <div class="fly-image-upload__crop-footer">
+              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
+              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-image-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="fly-image-upload">
-      @if (previewUrl()) {
-        <div class="fly-image-upload__preview">
-          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
-          <div class="fly-image-upload__overlay">
-            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
-              <span class="pi pi-pencil" aria-hidden="true"></span>
-            </button>
-            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
-              <span class="pi pi-trash" aria-hidden="true"></span>
-            </button>
-          </div>
-        </div>
-      } @else {
-        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
-          @if (uploading()) {
-            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
-            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
-          } @else {
-            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
-            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
-            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
-          }
-        </button>
-      }
-
-      @if (error()) {
-        <div class="fly-image-upload__error">{{ error() }}</div>
-      }
-
-      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
-
-      @if (showCropper()) {
-        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
-          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
-            <div class="fly-image-upload__crop-header">
-              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
-            </div>
-            <div class="fly-image-upload__crop-body">
-              <img #cropImage [src]="rawImageUrl()" alt="" />
-            </div>
-            <div class="fly-image-upload__crop-footer">
-              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
-              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'fly-image-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="fly-image-upload">
+      @if (previewUrl()) {
+        <div class="fly-image-upload__preview">
+          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
+          <div class="fly-image-upload__overlay">
+            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
+              <span class="pi pi-pencil" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
+              <span class="pi pi-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      } @else {
+        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          @if (uploading()) {
+            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
+          } @else {
+            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
+            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
+          }
+        </button>
+      }
+
+      @if (error()) {
+        <div class="fly-image-upload__error">{{ error() }}</div>
+      }
+
+      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
+
+      @if (showCropper()) {
+        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
+          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
+            <div class="fly-image-upload__crop-header">
+              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
+            </div>
+            <div class="fly-image-upload__crop-body">
+              <img #cropImage [src]="rawImageUrl()" alt="" />
+            </div>
+            <div class="fly-image-upload__crop-footer">
+              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
+              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"] }]
         }], ctorParameters: () => [], 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 }] }] } });
 
@@ -3530,12 +3728,18 @@ function isSignal$1(v) {
 /**
  * Singleton registry of entity lookups offered by the `/lookup` typeahead.
  *
- * Mirrors {@link AgentCommandRegistry} exactly — same federation-singleton story
- * (`sharedMappings: ['@mohamedatia/fly-design-system']`), same id-collision
- * "latest wins" contract, same disposable-handle ergonomics. Federated remotes
- * register their lookupable entities at boot (Circles: scenario / trend / signal)
- * and dispose on window close, so the picker only ever offers entities whose app
- * is currently live.
+ * Mirrors {@link AgentCommandRegistry}'s federation-singleton story
+ * (`sharedMappings: ['@mohamedatia/fly-design-system']`), id-collision
+ * "latest wins" contract, and disposable-handle ergonomics. OS-core entities
+ * (note / calendar event / file) register once at shell bootstrap via
+ * `CORE_APP_LOOKUPS`; federated remotes (Circles: scenario / trend / signal)
+ * register at remote-component boot and dispose on window close.
+ *
+ * **Scope semantics diverge from commands.** Commands HIDE when their `appId`
+ * isn't in `liveAppIds`. Lookups DO NOT — they're always offered, and
+ * `{appId}` is just a *priority hint* that bumps that lookup to the top of
+ * the entity picker when the app is live. See {@link LookupRegistration.scope}
+ * for the rationale.
  *
  * Storage is a signal store keyed on {@link LookupRegistration.entity}. Because
  * `entity` is the collision key, an app re-registering the same entity replaces
@@ -3546,10 +3750,18 @@ class AgentLookupRegistry {
     /** All currently-registered lookups, in insertion order. */
     all = this._lookups.asReadonly();
     /**
-     * Lookups whose scope is `'global'` OR whose `scope.appId` is in the live app
-     * set. Recomputes when either the registry or `liveAppIds` changes — pass a
+     * All registered lookups, sorted by affinity to `liveAppIds`:
+     *
+     *   1. Lookups whose `scope.appId` is in the live app set (in registration
+     *      order within that bucket).
+     *   2. Then everything else — `'global'` lookups AND scoped lookups whose
+     *      app isn't currently live — in registration order.
+     *
+     * Recomputes when either the registry or `liveAppIds` changes. Pass a
      * `Signal<ReadonlySet<string>>` from the host's app-registry for reactive
-     * filtering, exactly like {@link AgentCommandRegistry.visible}.
+     * re-sorting. **Always returns the full registry** — see the type doc on
+     * {@link LookupRegistration.scope} for why this differs from
+     * {@link AgentCommandRegistry.visible}.
      */
     visible(liveAppIds) {
         const liveSignal = isSignal(liveAppIds)
@@ -3557,11 +3769,18 @@ class AgentLookupRegistry {
             : signal(liveAppIds).asReadonly();
         return computed(() => {
             const live = liveSignal();
-            return this._lookups().filter((l) => {
-                if (l.scope === 'global')
-                    return true;
-                return live.has(l.scope.appId);
-            });
+            const all = this._lookups();
+            const prioritized = [];
+            const rest = [];
+            for (const l of all) {
+                if (l.scope !== 'global' && live.has(l.scope.appId)) {
+                    prioritized.push(l);
+                }
+                else {
+                    rest.push(l);
+                }
+            }
+            return prioritized.length === 0 ? all : [...prioritized, ...rest];
         });
     }
     /**
@@ -3610,6 +3829,36 @@ class AgentLookupRegistry {
             },
         };
     }
+    /**
+     * Resolve a deep-link anchor to a concrete launch target.
+     *
+     * `kind` is the dotted `<appId>.<entity>` token the agents backend emits
+     * inside `flyos:<kind>/<id>` chat-answer anchors — the same entity-kind
+     * vocabulary as drag-payload kinds and `ref` parts. Returns
+     * `{ appId, route }` when a registered lookup for that `(appId, entity)`
+     * pair carries a {@link LookupDescriptor.deepLinkRoute} template; `null`
+     * otherwise (unknown entity, app mismatch, or no template — e.g. the
+     * owning app isn't installed) so the caller renders plain text rather than
+     * a dead link.
+     *
+     * `appId` and `entity` are both dot-free by their own grammars, so the
+     * FIRST dot is the unambiguous split point; a dotless `kind` can't carry an
+     * app and never resolves. The template's single `{id}` placeholder is
+     * substituted URL-encoded.
+     */
+    resolveDeepLink(kind, id) {
+        if (!kind || !id)
+            return null;
+        const dot = kind.indexOf('.');
+        if (dot <= 0 || dot >= kind.length - 1)
+            return null;
+        const appId = kind.slice(0, dot);
+        const entity = kind.slice(dot + 1);
+        const reg = this._lookups().find((r) => r.entity === entity && r.deepLinkRoute && ownerAppId(r) === appId);
+        if (!reg?.deepLinkRoute)
+            return null;
+        return { appId, route: reg.deepLinkRoute.replace('{id}', encodeURIComponent(id)) };
+    }
     /** Tear down by entity. Idempotent. */
     unregister(entity) {
         if (this._owners.delete(entity)) {
@@ -3631,6 +3880,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 function isSignal(v) {
     return typeof v === 'function';
 }
+/**
+ * The app that owns a registration, for deep-link resolution. Prefers the
+ * stamped {@link LookupDescriptor.appId} (set by `RemoteManifestService` /
+ * `CORE_APP_LOOKUPS`), falling back to the affinity `scope.appId` so a raw
+ * manifest descriptor still resolves even before the host stamps it.
+ * Returns `undefined` for `'global'`-scoped lookups with no stamped appId.
+ */
+function ownerAppId(reg) {
+    return reg.appId ?? (typeof reg.scope === 'object' ? reg.scope.appId : undefined);
+}
 
 /**
  * Singleton registry of chip-renderer components and keyboard-alternative draggable
@@ -5350,6 +5609,9 @@ function isRtlLocaleEntry(entry) {
  *         `.workflow/plans/agent-input-component.md` Phase 2b-1.
  * See docs/ExternalAppsGuide/03-frontend-app.md.
  */
+// ─── Federation singleton self-check (side effect; must run first) ───────────
+// Loud console.error if a federated remote forks its own DS copy instead of
+// binding to the shell's shared singleton. See the module doc.
 /**
  * Stable error codes returned by audience-aware backend endpoints. Mirror of
  * `Fly.Shared.Core.Audience.AudienceErrorCodes`. Compare on these strings, not on HTTP
@@ -5366,5 +5628,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLYOS_LAUNCH_EVENT, FLY_LOCALE_CATALOG, FLY_REMOTE_BASE_PATH, FLY_REMOTE_ROUTES, FLY_THEME_MODE_IDS, FLY_WINDOW_HELP_HINT_EVENT, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySecureSrcDirective, FlyThemeService, FlyWindowHelpService, FlyosPendingLaunchesGlobalKey, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, loadRemoteStyles, matchFlyRoutePattern, normalizeFlyTheme, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLYOS_LAUNCH_EVENT, FLY_LOCALE_CATALOG, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_THEME_MODE_IDS, FLY_WINDOW_HELP_HINT_EVENT, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySecureSrcDirective, FlyThemeService, FlyWindowHelpService, FlyosPendingLaunchesGlobalKey, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, loadRemoteStyles, matchFlyRoutePattern, normalizeFlyTheme, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map