@mohamedatia/fly-design-system 1.9.2 → 2.3.0

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

@@ -1,16 +1,63 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, viewChild, effect, ViewEncapsulation, model } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, forwardRef, viewChild, effect, ViewEncapsulation, model } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { of, ReplaySubject } from 'rxjs';
+import { of, ReplaySubject, Subject } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import Cropper from 'cropperjs';
 
 const WINDOW_DATA = new InjectionToken('WINDOW_DATA');
+/**
+ * Per-window injection token carrying the active `LaunchContext` as a signal.
+ * Resolves to `null` outside the desktop shell (e.g. mock-host dev mode).
+ *
+ * Remotes typically consume it as:
+ * ```ts
+ * private readonly launchCtx = inject(LAUNCH_CONTEXT, { optional: true });
+ * constructor() {
+ *   effect(() => {
+ *     const ctx = this.launchCtx?.();
+ *     if (ctx?.route) this.router.navigateByUrl(ctx.route);
+ *   });
+ * }
+ * ```
+ */
+const LAUNCH_CONTEXT = new InjectionToken('LAUNCH_CONTEXT');
+
+/** Discriminator string values — re-exported so hosts can build kind menus dynamically. */
+const AUDIENCE_TERM_KINDS = [
+    'users',
+    'roles',
+    'ou',
+    'app-everyone',
+    'chart',
+    'preset',
+];
+/**
+ * Runtime values for {@link AudiencePresetKind}. Hosts iterate this when surfacing a
+ * preset picker; the type union mirrors this list 1:1.
+ */
+const AUDIENCE_PRESETS = [
+    'self',
+    'ou-managers',
+    'direct-reports',
+];
+/**
+ * Hard caps mirrored from `AudienceLimits.cs`. Hosts use these for client-side validation
+ * before submit — backend re-validates regardless. Keep these in sync with the C# constants.
+ */
+const AUDIENCE_LIMITS = {
+    maxTermsPerFilter: 64,
+    maxUserIdsPerTerm: 500,
+    maxRoleKeysPerTerm: 64,
+    maxOuIdsPerTerm: 32,
+    maxResolvedUsers: 10_000,
+};
 
 /**
  * Shared AuthService for Business Apps.
@@ -768,10 +815,30 @@ class SharePanelComponent {
     revokePermission;
     /** When true, show “apply to children” (e.g. folders). */
     showApplyToChildren = false;
+    /**
+     * When true, surfaces an "Add as deny" toggle in the add-permission row and renders
+     * existing deny grants with red styling. Hosts whose backend does not support deny
+     * grants (legacy callers) leave this false and the panel hides all deny affordances.
+     */
+    supportsDeny = false;
     /** Override level dropdown options (e.g. notes: View / Edit only). */
     permissionLevels;
     /** i18n key for wildcard app grant label */
     everyoneLabelKey = 'files.share.everyone';
+    /**
+     * Optional apps-chart role-OU index for the tenant. When supplied, the panel:
+     * <list type="bullet">
+     * <item>Renders existing OU grants whose ouId matches a row as <c>RolePrincipal</c>
+     *   chips ("FFO in Circles") instead of opaque OU labels.</item>
+     * <item>Surfaces an "Add role" picker that translates the picked role to its
+     *   role-OU UUID and dispatches via {@link grantToOu}. Backend stores it as a
+     *   plain OU grant; <see cref="PermissionResolver"/> resolves at access time via
+     *   the user's effective OU set.</item>
+     * </list>
+     * Hosts that don't have access to the apps-chart (or don't want the role flow) omit
+     * this input — OU grants then render as generic OU principals.
+     */
+    loadRoleOus;
     close = new EventEmitter();
     destroyRef = inject(DestroyRef);
     i18n = inject(I18nService);
@@ -780,6 +847,20 @@ class SharePanelComponent {
     searchQuery = '';
     newLevel = '';
     applyToChildren = false;
+    /** Apps-chart role-OU index, populated lazily when {@link loadRoleOus} is provided. */
+    roleOus = signal([], ...(ngDevMode ? [{ debugName: "roleOus" }] : /* istanbul ignore next */ []));
+    /** Map<ouId, role row> — derived from roleOus for O(1) lookup during rendering. */
+    roleOusByOuId = signal({}, ...(ngDevMode ? [{ debugName: "roleOusByOuId" }] : /* istanbul ignore next */ []));
+    /** Two-way bound to the role picker's filter input. */
+    roleSearchQuery = '';
+    /** True while the role picker section is expanded. */
+    showRolePicker = signal(false, ...(ngDevMode ? [{ debugName: "showRolePicker" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bound to the "Add as deny" toggle. When true, the next user/OU pick is
+     * persisted as a deny grant. Reset to false after each successful grant so the next
+     * pick defaults back to allow.
+     */
+    addAsDeny = false;
     searchResults = signal([], ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
     ouTree = signal([], ...(ngDevMode ? [{ debugName: "ouTree" }] : /* istanbul ignore next */ []));
     showOuPicker = signal(false, ...(ngDevMode ? [{ debugName: "showOuPicker" }] : /* istanbul ignore next */ []));
@@ -794,6 +875,23 @@ class SharePanelComponent {
         const levels = this.levelOptions;
         this.newLevel = levels[0]?.value ?? 'View';
         this.refreshPermissions();
+        // Load the role-OU lookup table once. Failures degrade gracefully — OU grants then
+        // render as generic OU principals (the v1 behaviour) instead of Role chips.
+        this.loadRoleOus?.()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (rows) => {
+                this.roleOus.set(rows);
+                const byId = {};
+                for (const r of rows)
+                    byId[r.ouId] = r;
+                this.roleOusByOuId.set(byId);
+            },
+            error: () => {
+                this.roleOus.set([]);
+                this.roleOusByOuId.set({});
+            },
+        });
         this.loadOuLabelMap()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
@@ -866,14 +964,55 @@ class SharePanelComponent {
     onGrantToUser(user) {
         this.searchResults.set([]);
         this.searchQuery = '';
-        this.grantToUser(user.id, this.newLevel, this.applyToChildren)
+        const isDeny = this.supportsDeny && this.addAsDeny;
+        this.grantToUser(user.id, this.newLevel, this.applyToChildren, isDeny)
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({ next: () => this.refreshPermissions() });
+            .subscribe({
+            next: () => {
+                // Reset deny toggle after each successful grant so allow is the default for the
+                // next pick. Preserves the level dropdown which is genuinely sticky.
+                this.addAsDeny = false;
+                this.refreshPermissions();
+            },
+        });
     }
     onGrantToOu(ou) {
-        this.grantToOu(ou.id, this.newLevel, this.applyToChildren)
+        const isDeny = this.supportsDeny && this.addAsDeny;
+        this.grantToOu(ou.id, this.newLevel, this.applyToChildren, isDeny)
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({ next: () => this.refreshPermissions() });
+            .subscribe({
+            next: () => {
+                this.addAsDeny = false;
+                this.refreshPermissions();
+            },
+        });
+    }
+    /**
+     * Add a role grant. Resolves to the role-OU UUID and dispatches via {@link grantToOu}
+     * so the backend stores it as a plain OU grant; PermissionResolver matches it at access
+     * time via the user's effective OU set (apps-chart computed-from-role membership).
+     */
+    onGrantToRole(role) {
+        const isDeny = this.supportsDeny && this.addAsDeny;
+        this.grantToOu(role.ouId, this.newLevel, this.applyToChildren, isDeny)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => {
+                this.addAsDeny = false;
+                this.roleSearchQuery = '';
+                this.refreshPermissions();
+            },
+        });
+    }
+    /** Filtered role list — empty query returns all roles, otherwise case-insensitive substring match. */
+    filteredRoles() {
+        const q = this.roleSearchQuery.trim().toLowerCase();
+        const all = this.roleOus();
+        if (!q)
+            return all;
+        return all.filter((r) => r.displayName.toLowerCase().includes(q)
+            || r.roleKey.toLowerCase().includes(q)
+            || r.appId.toLowerCase().includes(q));
     }
     onUpdateLevel(perm, level) {
         this.updatePermission(perm.id, level)
@@ -886,13 +1025,25 @@ class SharePanelComponent {
             .subscribe({ next: () => this.refreshPermissions() });
     }
     getPermIcon(perm) {
-        if (perm.grantedToUserId)
-            return 'pi pi-user';
-        if (perm.grantedToOuId)
-            return 'pi pi-sitemap';
-        if (perm.grantedToAppId)
-            return 'pi pi-globe';
-        return 'pi pi-question';
+        // Deny rows take a distinct icon regardless of principal kind so the operator can
+        // scan a long permission list and immediately spot revocations.
+        if (perm.isDeny)
+            return 'pi pi-ban';
+        // Reverse-translate: an OuPrincipal whose ouId matches a known role-OU should render
+        // as a role chip, even though the host stored it as an OU grant.
+        if (perm.principal.kind === 'ou' && this.roleOusByOuId()[perm.principal.ouId]) {
+            return 'pi pi-id-card';
+        }
+        return SharePanelComponent.principalIcon(perm.principal);
+    }
+    /** Maps a principal kind to its display icon. Static so hosts can reuse for menus. */
+    static principalIcon(principal) {
+        switch (principal.kind) {
+            case 'user': return 'pi pi-user';
+            case 'role': return 'pi pi-id-card';
+            case 'ou': return 'pi pi-sitemap';
+            case 'app-everyone': return 'pi pi-globe';
+        }
     }
     /** Logical start padding for OU hierarchy (roots align with section padding). */
     ouIndentStartPx(ou) {
@@ -900,31 +1051,40 @@ class SharePanelComponent {
         return 12 + d * 18;
     }
     getPermLabel(perm) {
-        if (perm.displayName?.trim())
-            return perm.displayName.trim();
-        if (perm.grantedToUserId) {
-            return `${perm.grantedToUserId.substring(0, 8)}…`;
-        }
-        if (perm.grantedToOuId) {
-            const id = perm.grantedToOuId;
-            const fromDefault = this.ouLabelById()[id];
-            if (fromDefault)
-                return fromDefault;
-            const ou = this.ouTree().find((o) => o.id === id);
-            if (ou)
-                return ou.displayName;
-            return `${id.substring(0, 8)}…`;
+        const p = perm.principal;
+        if (p.displayName?.trim())
+            return p.displayName.trim();
+        switch (p.kind) {
+            case 'user':
+                return `${p.userId.substring(0, 8)}…`;
+            case 'role':
+                // Hosts SHOULD pre-resolve role display names — this branch is the
+                // worst-case fallback for an unresolved key.
+                return `${p.appId}:${p.roleKey}`;
+            case 'ou': {
+                // Reverse-translate: if this OU id matches a known apps-chart role-OU, render
+                // as the semantic role label instead of the opaque OU name.
+                const role = this.roleOusByOuId()[p.ouId];
+                if (role)
+                    return role.displayName;
+                const fromDefault = this.ouLabelById()[p.ouId];
+                if (fromDefault)
+                    return fromDefault;
+                const ou = this.ouTree().find((o) => o.id === p.ouId);
+                if (ou)
+                    return ou.displayName;
+                return `${p.ouId.substring(0, 8)}…`;
+            }
+            case 'app-everyone':
+                return p.appId === '*' ? this.i18n.t(this.everyoneLabelKey) : p.appId;
         }
-        if (perm.grantedToAppId === '*')
-            return this.i18n.t(this.everyoneLabelKey);
-        return perm.grantedToAppId ?? '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SharePanelComponent, isStandalone: true, selector: "fly-share-panel", inputs: { targetName: "targetName", titleKey: "titleKey", loadPermissions: "loadPermissions", searchUsers: "searchUsers", loadOuTree: "loadOuTree", loadChartOptions: "loadChartOptions", loadOuLabelMap: "loadOuLabelMap", grantToUser: "grantToUser", grantToOu: "grantToOu", updatePermission: "updatePermission", revokePermission: "revokePermission", showApplyToChildren: "showApplyToChildren", permissionLevels: "permissionLevels", everyoneLabelKey: "everyoneLabelKey" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"fac-overlay\" (click)=\"close.emit()\">\n  <div class=\"fac-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"fac-header\">\n      <h3>{{ titleKey | translate }}</h3>\n      <span class=\"fac-target-name\">{{ targetName }}</span>\n      <button type=\"button\" class=\"fac-close\" (click)=\"close.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"fac-add-section\">\n      <div class=\"fac-search-row\">\n        <input\n          type=\"text\"\n          class=\"fac-input\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\n        />\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\n          @for (opt of levelOptions; track opt.value) {\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n          }\n        </select>\n      </div>\n\n      @if (searchResults().length > 0) {\n        <div class=\"fac-search-results\">\n          @for (result of searchResults(); track result.id) {\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\n              <span class=\"fac-email\">{{ result.email }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      @if (chartOptions().length > 0) {\n        <div class=\"fac-chart-row\">\n          <label for=\"fac-org-chart-select\" class=\"fac-section-label\">{{\n            'files.share.org_chart' | translate\n          }}</label>\n          <select\n            id=\"fac-org-chart-select\"\n            class=\"fac-select\"\n            [ngModel]=\"selectedOrgChartId()\"\n            (ngModelChange)=\"onOrgChartSelectChange($event)\">\n            @for (opt of chartOptions(); track $index) {\n              <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\n            }\n          </select>\n        </div>\n      }\n\n      @if (showOuPicker()) {\n        <div class=\"fac-ou-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\n          @for (ou of ouTree(); track ou.id) {\n            <div\n              class=\"fac-ou-item\"\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n              (click)=\"onGrantToOu(ou)\"\n            >\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ou.displayName }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      <div class=\"fac-toggle-row\">\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\n        </button>\n        @if (showApplyToChildren) {\n          <label class=\"fac-checkbox-label\">\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\n            {{ 'files.share.apply_children' | translate }}\n          </label>\n        }\n      </div>\n    </div>\n\n    <div class=\"fac-perms-section\">\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\n      @if (loading()) {\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\n      } @else if (permissions().length === 0) {\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\n      } @else {\n        @for (perm of permissions(); track perm.id) {\n          <div class=\"fac-perm-row\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isInherited) {\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\n              }\n            </div>\n            <div class=\"fac-perm-actions\">\n              <select\n                class=\"fac-select sm\"\n                [ngModel]=\"perm.level\"\n                (ngModelChange)=\"onUpdateLevel(perm, $event)\"\n                [disabled]=\"perm.isInherited === true\"\n              >\n                @for (opt of levelOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n                }\n              </select>\n              <button\n                type=\"button\"\n                class=\"fac-icon-btn danger\"\n                (click)=\"onRevokePermission(perm)\"\n                [disabled]=\"perm.isInherited === true\"\n                [title]=\"'files.share.revoke' | translate\"\n              >\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fac-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fac-panel{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:12px;width:600px;max-width:min(600px,96vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px #0006}.fac-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-header h3{margin:0;font-size:16px;font-weight:600}.fac-target-name{flex:1;font-size:13px;color:var(--text-color-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:4px}.fac-close:hover{color:var(--text-color)}.fac-add-section{padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-search-row{display:flex;gap:8px}.fac-chart-row{display:flex;flex-direction:column;gap:6px;margin-top:12px}.fac-chart-row .fac-select{width:100%}.fac-input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fac-input:focus{border-color:var(--primary-color, #e8732a)}.fac-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px;color:inherit;font-size:13px;outline:none}.fac-select.sm{padding:4px 8px;font-size:12px}.fac-search-results{margin-top:8px;max-height:150px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-search-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-search-item:hover{background:var(--surface-hover)}.fac-search-item i{color:var(--text-color-secondary)}.fac-email{color:var(--text-color-secondary);font-size:12px;margin-inline-start:auto}.fac-ou-section{margin-top:10px;max-height:220px;overflow-y:auto}.fac-ou-item{display:flex;align-items:center;gap:8px;padding:6px 12px;padding-inline-start:12px;cursor:pointer;font-size:13px;border-radius:6px}.fac-ou-item:hover{background:var(--surface-hover)}.fac-ou-item i{color:var(--text-color-secondary)}.fac-section-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-color-secondary);letter-spacing:.5px;margin-bottom:8px}.fac-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.fac-link{background:none;border:none;color:var(--primary-color, #e8732a);cursor:pointer;font-size:12px;padding:0}.fac-link:hover{text-decoration:underline}.fac-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fac-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fac-perms-section{flex:1;overflow-y:auto;padding:16px 20px}.fac-loading,.fac-empty{text-align:center;padding:20px;color:var(--text-color-secondary);font-size:13px}.fac-perm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}.fac-perm-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.fac-perm-info i{color:var(--text-color-secondary);flex-shrink:0}.fac-perm-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-badge{font-size:10px;padding:2px 6px;border-radius:8px;flex-shrink:0}.fac-badge.inherited{background:#ffffff1a;color:var(--text-color-secondary)}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SharePanelComponent, isStandalone: true, selector: "fly-share-panel", inputs: { targetName: "targetName", titleKey: "titleKey", loadPermissions: "loadPermissions", searchUsers: "searchUsers", loadOuTree: "loadOuTree", loadChartOptions: "loadChartOptions", loadOuLabelMap: "loadOuLabelMap", grantToUser: "grantToUser", grantToOu: "grantToOu", updatePermission: "updatePermission", revokePermission: "revokePermission", showApplyToChildren: "showApplyToChildren", 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 type=\"button\" class=\"fac-close\" (click)=\"close.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <div class=\"fac-add-section\">\n      <div class=\"fac-search-row\">\n        <input\n          type=\"text\"\n          class=\"fac-input\"\n          [(ngModel)]=\"searchQuery\"\n          (input)=\"onSearchInput()\"\n          [placeholder]=\"'files.share.search_placeholder' | translate\"\n        />\n        <select class=\"fac-select\" [(ngModel)]=\"newLevel\">\n          @for (opt of levelOptions; track opt.value) {\n            <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n          }\n        </select>\n      </div>\n\n      @if (searchResults().length > 0) {\n        <div class=\"fac-search-results\">\n          @for (result of searchResults(); track result.id) {\n            <div class=\"fac-search-item\" (click)=\"onGrantToUser(result)\">\n              <i class=\"pi pi-user\" aria-hidden=\"true\"></i>\n              <span>{{ result.firstName }} {{ result.lastName }}</span>\n              <span class=\"fac-email\">{{ result.email }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      @if (chartOptions().length > 0) {\n        <div class=\"fac-chart-row\">\n          <label for=\"fac-org-chart-select\" class=\"fac-section-label\">{{\n            'files.share.org_chart' | translate\n          }}</label>\n          <select\n            id=\"fac-org-chart-select\"\n            class=\"fac-select\"\n            [ngModel]=\"selectedOrgChartId()\"\n            (ngModelChange)=\"onOrgChartSelectChange($event)\">\n            @for (opt of chartOptions(); track $index) {\n              <option [ngValue]=\"opt.id\">{{ opt.name }}</option>\n            }\n          </select>\n        </div>\n      }\n\n      @if (showOuPicker()) {\n        <div class=\"fac-ou-section\">\n          <div class=\"fac-section-label\">{{ 'files.share.share_with_ou' | translate }}</div>\n          @for (ou of ouTree(); track ou.id) {\n            <div\n              class=\"fac-ou-item\"\n              [style.padding-inline-start.px]=\"ouIndentStartPx(ou)\"\n              (click)=\"onGrantToOu(ou)\"\n            >\n              <i class=\"pi pi-sitemap\" aria-hidden=\"true\"></i>\n              <span>{{ ou.displayName }}</span>\n            </div>\n          }\n        </div>\n      }\n\n      <div class=\"fac-toggle-row\">\n        <button type=\"button\" class=\"fac-link\" (click)=\"showOuPicker.set(!showOuPicker())\">\n          {{ showOuPicker() ? ('files.share.hide_ous' | translate) : ('files.share.show_ous' | translate) }}\n        </button>\n        @if (showApplyToChildren) {\n          <label class=\"fac-checkbox-label\">\n            <input type=\"checkbox\" [(ngModel)]=\"applyToChildren\" />\n            {{ 'files.share.apply_children' | translate }}\n          </label>\n        }\n      </div>\n    </div>\n\n    <div class=\"fac-perms-section\">\n      <div class=\"fac-section-label\">{{ 'files.share.current_permissions' | translate }}</div>\n      @if (loading()) {\n        <div class=\"fac-loading\"><i class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></i></div>\n      } @else if (permissions().length === 0) {\n        <div class=\"fac-empty\">{{ 'files.share.no_permissions' | translate }}</div>\n      } @else {\n        @for (perm of permissions(); track perm.id) {\n          <div class=\"fac-perm-row\">\n            <div class=\"fac-perm-info\">\n              <i [class]=\"getPermIcon(perm)\" aria-hidden=\"true\"></i>\n              <span class=\"fac-perm-name\">{{ getPermLabel(perm) }}</span>\n              @if (perm.isInherited) {\n                <span class=\"fac-badge inherited\">{{ 'files.share.inherited' | translate }}</span>\n              }\n            </div>\n            <div class=\"fac-perm-actions\">\n              <select\n                class=\"fac-select sm\"\n                [ngModel]=\"perm.level\"\n                (ngModelChange)=\"onUpdateLevel(perm, $event)\"\n                [disabled]=\"perm.isInherited === true\"\n              >\n                @for (opt of levelOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.labelKey | translate }}</option>\n                }\n              </select>\n              <button\n                type=\"button\"\n                class=\"fac-icon-btn danger\"\n                (click)=\"onRevokePermission(perm)\"\n                [disabled]=\"perm.isInherited === true\"\n                [title]=\"'files.share.revoke' | translate\"\n              >\n                <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fac-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fac-panel{background:var(--surface-card, #1e1e1e);border:1px solid var(--surface-border);border-radius:12px;width:600px;max-width:min(600px,96vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px #0006}.fac-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-header h3{margin:0;font-size:16px;font-weight:600}.fac-target-name{flex:1;font-size:13px;color:var(--text-color-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-close{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:4px}.fac-close:hover{color:var(--text-color)}.fac-add-section{padding:16px 20px;border-bottom:1px solid var(--surface-border)}.fac-search-row{display:flex;gap:8px}.fac-chart-row{display:flex;flex-direction:column;gap:6px;margin-top:12px}.fac-chart-row .fac-select{width:100%}.fac-input{flex:1;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px;color:inherit;font-size:13px;outline:none}.fac-input:focus{border-color:var(--primary-color, #e8732a)}.fac-select{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px;color:inherit;font-size:13px;outline:none}.fac-select.sm{padding:4px 8px;font-size:12px}.fac-search-results{margin-top:8px;max-height:150px;overflow-y:auto;border:1px solid var(--surface-border);border-radius:8px}.fac-search-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}.fac-search-item:hover{background:var(--surface-hover)}.fac-search-item i{color:var(--text-color-secondary)}.fac-email{color:var(--text-color-secondary);font-size:12px;margin-inline-start:auto}.fac-ou-section{margin-top:10px;max-height:220px;overflow-y:auto}.fac-ou-item{display:flex;align-items:center;gap:8px;padding:6px 12px;padding-inline-start:12px;cursor:pointer;font-size:13px;border-radius:6px}.fac-ou-item:hover{background:var(--surface-hover)}.fac-ou-item i{color:var(--text-color-secondary)}.fac-section-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-color-secondary);letter-spacing:.5px;margin-bottom:8px}.fac-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.fac-link{background:none;border:none;color:var(--primary-color, #e8732a);cursor:pointer;font-size:12px;padding:0}.fac-link:hover{text-decoration:underline}.fac-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-color-secondary);cursor:pointer}.fac-checkbox-label input{accent-color:var(--primary-color, #e8732a)}.fac-perms-section{flex:1;overflow-y:auto;padding:16px 20px}.fac-loading,.fac-empty{text-align:center;padding:20px;color:var(--text-color-secondary);font-size:13px}.fac-perm-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}.fac-perm-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.fac-perm-info i{color:var(--text-color-secondary);flex-shrink:0}.fac-perm-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fac-badge{font-size:10px;padding:2px 6px;border-radius:8px;flex-shrink:0}.fac-badge.inherited{background:#ffffff1a;color:var(--text-color-secondary)}.fac-perm-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.fac-icon-btn{background:#ffffff0f;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;font-size:12px}.fac-icon-btn:hover{background:#ffffff24}.fac-icon-btn.danger:hover{background:#ff3b3033;color:#ff3b30}.fac-icon-btn:disabled{opacity:.4;cursor:default}\n"] }]
+            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: [{
@@ -958,14 +1118,618 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: [{ required: true }]
             }], showApplyToChildren: [{
                 type: Input
+            }], supportsDeny: [{
+                type: Input
             }], permissionLevels: [{
                 type: Input
             }], everyoneLabelKey: [{
                 type: Input
+            }], loadRoleOus: [{
+                type: Input
             }], close: [{
                 type: Output
             }] } });
 
+/**
+ * Generic builder for {@link AudienceFilter}. Accepts an initial value, emits both the
+ * full filter and a validity flag on every change. Reuses the same callback shapes as
+ * {@link SharePanelComponent} so a host already wiring the share panel can drop this in
+ * with no extra plumbing.
+ *
+ * Compaction policy: when the operator picks the same kind multiple times, the component
+ * merges into a single term where it's safe to do so:
+ * <list type="bullet">
+ *   <item><b>users</b>: dedupes user ids into one {@link UsersTerm}.</item>
+ *   <item><b>roles</b>: per `appId`, dedupes role keys into one {@link RolesTerm}.</item>
+ *   <item><b>ou</b>: per `(chartId, includeDescendants)`, dedupes OU ids into one {@link OuTerm}.</item>
+ *   <item><b>app-everyone / chart / preset</b>: idempotent per kind+key.</item>
+ * </list>
+ * This keeps the term count well below {@link AUDIENCE_LIMITS.maxTermsPerFilter} for typical
+ * use, and matches how the backend resolver would have unioned them anyway.
+ */
+class AudienceBuilderComponent {
+    /** Initial audience filter. Two-way: changes emit via {@link audienceChange}. */
+    value = { includes: [] };
+    /** Hide the Excludes section entirely (e.g. for simple "send to" pickers). */
+    showExcludes = true;
+    /**
+     * Which term kinds are selectable. Defaults to all six. Hosts that don't have a
+     * concept of `chart` or `preset` should narrow this down to keep the UI focused.
+     */
+    supportedKinds = [
+        'users',
+        'roles',
+        'ou',
+        'app-everyone',
+        'chart',
+        'preset',
+    ];
+    /**
+     * Anchor user id used when adding a `preset` term. Typically `auth.currentUser().id`.
+     * If null and the operator picks a preset, the term is rejected with an inline error.
+     */
+    selfUserId = null;
+    /** App ids the host wants to expose as `app-everyone` options. */
+    appEveryoneOptions = [];
+    // ── Picker callbacks (same shapes as SharePanelComponent) ────────────────────
+    searchUsers;
+    loadOuTree;
+    loadChartOptions;
+    /**
+     * Optional apps-chart role-OU index. When supplied, the picker exposes a "Roles" tab
+     * surfacing role chips; without it, that tab is hidden even if `'roles'` is in
+     * {@link supportedKinds}.
+     */
+    loadRoleOus;
+    // ── Outputs ──────────────────────────────────────────────────────────────────
+    /** Fires on every successful add/remove with the current filter. */
+    audienceChange = new EventEmitter();
+    /**
+     * True when {@link AudienceFilter.includes} is non-empty and the term count is within
+     * {@link AUDIENCE_LIMITS.maxTermsPerFilter}. Hosts should disable submit when false.
+     */
+    validityChange = new EventEmitter();
+    // ── Internal state (signals; computed where derived) ─────────────────────────
+    destroyRef = inject(DestroyRef);
+    i18n = inject(I18nService);
+    includes = signal([], ...(ngDevMode ? [{ debugName: "includes" }] : /* istanbul ignore next */ []));
+    excludes = signal([], ...(ngDevMode ? [{ debugName: "excludes" }] : /* istanbul ignore next */ []));
+    editTarget = signal('includes', ...(ngDevMode ? [{ debugName: "editTarget" }] : /* istanbul ignore next */ []));
+    pickerOpen = signal(false, ...(ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []));
+    activeKind = signal('users', ...(ngDevMode ? [{ debugName: "activeKind" }] : /* istanbul ignore next */ []));
+    // User picker — signal-backed so OnPush + computed re-evaluates correctly. Keystrokes go
+    // through a debounced Subject + switchMap so a slow "fo" result can never overwrite a
+    // fresh "foobar" result (the previous setTimeout-based path had this race).
+    userSearchQuery = signal('', ...(ngDevMode ? [{ debugName: "userSearchQuery" }] : /* istanbul ignore next */ []));
+    userSearchResults = signal([], ...(ngDevMode ? [{ debugName: "userSearchResults" }] : /* istanbul ignore next */ []));
+    userSearch$ = new Subject();
+    // Role picker.
+    roleOus = signal([], ...(ngDevMode ? [{ debugName: "roleOus" }] : /* istanbul ignore next */ []));
+    roleSearchQuery = signal('', ...(ngDevMode ? [{ debugName: "roleSearchQuery" }] : /* istanbul ignore next */ []));
+    /**
+     * Filtered role list as a `computed` so the template doesn't re-call a method on every
+     * change-detection cycle.
+     */
+    filteredRoles = computed(() => {
+        const q = this.roleSearchQuery().trim().toLowerCase();
+        const all = this.roleOus();
+        if (!q)
+            return all;
+        return all.filter((r) => r.displayName.toLowerCase().includes(q)
+            || r.roleKey.toLowerCase().includes(q)
+            || r.appId.toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "filteredRoles" }] : /* istanbul ignore next */ []));
+    // OU picker.
+    ouTree = signal([], ...(ngDevMode ? [{ debugName: "ouTree" }] : /* istanbul ignore next */ []));
+    chartOptions = signal([], ...(ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []));
+    selectedChartId = signal(null, ...(ngDevMode ? [{ debugName: "selectedChartId" }] : /* istanbul ignore next */ []));
+    ouIncludeDescendants = signal(false, ...(ngDevMode ? [{ debugName: "ouIncludeDescendants" }] : /* istanbul ignore next */ []));
+    /**
+     * Chart-term picker entries — filters out the null-id default chart since `ChartTerm`
+     * requires a real Guid. Avoids the UX trap where clicking "Default Company" surfaces
+     * an inline error.
+     */
+    chartTermOptions = computed(() => this.chartOptions().filter((c) => c.id !== null), ...(ngDevMode ? [{ debugName: "chartTermOptions" }] : /* istanbul ignore next */ []));
+    selectedChartId$ = new ReplaySubject(1);
+    // Preset options exposed from the model so the template stays in sync with new presets.
+    presetOptions = AUDIENCE_PRESETS;
+    // Validation surface (inline errors).
+    errorKey = signal(null, ...(ngDevMode ? [{ debugName: "errorKey" }] : /* istanbul ignore next */ []));
+    /** True when the host disabled this control (template-driven `[disabled]` or reactive). */
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // ── ControlValueAccessor + Validator wiring ──────────────────────────────────
+    // These let hosts bind the component via `formControl` / `formControlName` /
+    // `[(ngModel)]` instead of plumbing `[value]` + `(audienceChange)` manually. The
+    // (audienceChange) / (validityChange) outputs still fire — Angular forms infrastructure
+    // is purely additive and template-driven hosts continue to work unchanged.
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    onValidatorChange = () => undefined;
+    // ── Lifecycle ────────────────────────────────────────────────────────────────
+    ngOnInit() {
+        // applyValue() seeds includes/excludes — defer the initial emit so we don't trigger
+        // ExpressionChangedAfterItHasBeenChecked when a parent template binding observes
+        // (audienceChange) / (validityChange) in the same change-detection cycle.
+        this.applyValue(this.value, /* emitImmediate */ false);
+        queueMicrotask(() => this.emitState());
+        if (this.loadRoleOus) {
+            this.loadRoleOus()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (rows) => this.roleOus.set(rows),
+                error: () => this.roleOus.set([]),
+            });
+        }
+        this.selectedChartId$
+            .pipe(switchMap((id) => this.loadOuTree(id)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (tree) => this.ouTree.set(tree),
+            error: () => this.ouTree.set([]),
+        });
+        // Debounced user search: 300ms idle → switchMap cancels any in-flight request when a
+        // newer query arrives, killing the "stale result overwrites fresh result" race the old
+        // setTimeout path had. `filter(q.length >= 2)` preserves the same UX gate.
+        this.userSearch$
+            .pipe(debounceTime(300), distinctUntilChanged(), filter((q) => q.length >= 2), switchMap((q) => this.searchUsers(q)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (items) => this.userSearchResults.set(items),
+            error: () => this.userSearchResults.set([]),
+        });
+        this.loadChartOptions()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (opts) => {
+                this.chartOptions.set(opts);
+                const initial = opts[0]?.id ?? null;
+                this.selectedChartId.set(initial);
+                this.selectedChartId$.next(initial);
+            },
+            error: () => {
+                this.chartOptions.set([]);
+                this.selectedChartId.set(null);
+                this.selectedChartId$.next(null);
+            },
+        });
+        if (this.supportedKinds.length > 0 && !this.supportedKinds.includes(this.activeKind())) {
+            this.activeKind.set(this.supportedKinds[0]);
+        }
+    }
+    ngOnChanges(changes) {
+        // Re-hydrate when the host swaps the filter wholesale (e.g. editing a different rule).
+        // First-mount initialisation is handled by ngOnInit so we skip the initial assignment
+        // here. Picker UI state is also reset so a stale search query / open picker from the
+        // previous draft doesn't bleed into the new one.
+        //
+        // We do NOT emit (audienceChange) / onChange — the host already KNOWS the value it
+        // pushed. Echoing back via the change callback can create a feedback loop with two-way
+        // bindings and reactive forms. Validity, however, may genuinely change with the new
+        // value — emit that signal explicitly via the form-validator hook + (validityChange).
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.applyValue(this.value, /* emitImmediate */ false);
+            this.closePicker();
+            this.errorKey.set(null);
+            this.emitValidityOnly();
+        }
+    }
+    ngOnDestroy() {
+        this.userSearch$.complete();
+    }
+    /**
+     * Replaces the in-component state from an external value. Null-safe — if the host
+     * passes <c>null</c> or <c>undefined</c> (e.g. while a parent signal is loading),
+     * we treat it as an empty filter rather than crashing.
+     */
+    applyValue(v, emitImmediate) {
+        this.includes.set([...(v?.includes ?? [])]);
+        this.excludes.set([...(v?.excludes ?? [])]);
+        if (emitImmediate)
+            this.emitState();
+    }
+    // ── Picker open/close + tabs ─────────────────────────────────────────────────
+    openPicker(target) {
+        if (this.disabled())
+            return;
+        this.editTarget.set(target);
+        this.pickerOpen.set(true);
+        this.errorKey.set(null);
+    }
+    closePicker() {
+        this.pickerOpen.set(false);
+        this.userSearchQuery.set('');
+        this.userSearchResults.set([]);
+        this.roleSearchQuery.set('');
+    }
+    selectKind(kind) {
+        this.activeKind.set(kind);
+        this.errorKey.set(null);
+    }
+    // ── User picker ──────────────────────────────────────────────────────────────
+    onUserSearchInput() {
+        const q = this.userSearchQuery().trim();
+        if (q.length < 2) {
+            this.userSearchResults.set([]);
+            // Push the short query into the stream so distinctUntilChanged resets when the user
+            // shortens and re-lengthens the query (otherwise "foo" → "f" → "foo" is a no-op).
+            this.userSearch$.next(q);
+            return;
+        }
+        this.userSearch$.next(q);
+    }
+    pickUser(user) {
+        this.addToActiveBucket((existing) => this.upsertUsersTerm(existing, user.id));
+        this.userSearchQuery.set('');
+        this.userSearchResults.set([]);
+    }
+    // ── Role picker ──────────────────────────────────────────────────────────────
+    pickRole(role) {
+        this.addToActiveBucket((existing) => this.upsertRolesTerm(existing, role.appId, role.roleKey));
+        this.roleSearchQuery.set('');
+    }
+    // ── OU picker ────────────────────────────────────────────────────────────────
+    onChartChange(chartId) {
+        this.selectedChartId.set(chartId);
+        this.selectedChartId$.next(chartId);
+    }
+    pickOu(ou) {
+        const chartId = this.selectedChartId();
+        const includeDescendants = this.ouIncludeDescendants();
+        this.addToActiveBucket((existing) => this.upsertOuTerm(existing, ou.id, chartId, includeDescendants));
+    }
+    ouIndentStartPx(ou) {
+        const d = ou.depth ?? 0;
+        return 12 + d * 18;
+    }
+    // ── App-everyone picker ──────────────────────────────────────────────────────
+    pickAppEveryone(appId) {
+        this.addToActiveBucket((existing) => this.upsertAppEveryoneTerm(existing, appId));
+    }
+    // ── Chart picker ─────────────────────────────────────────────────────────────
+    pickChart(chartId) {
+        if (!chartId) {
+            this.errorKey.set('audience.error.chart_id_required');
+            return;
+        }
+        this.addToActiveBucket((existing) => this.upsertChartTerm(existing, chartId));
+    }
+    // ── Preset picker ────────────────────────────────────────────────────────────
+    pickPreset(preset) {
+        if (!this.selfUserId) {
+            this.errorKey.set('audience.error.self_user_required');
+            return;
+        }
+        const anchor = this.selfUserId;
+        this.addToActiveBucket((existing) => this.upsertPresetTerm(existing, preset, anchor));
+    }
+    // ── Term removal ─────────────────────────────────────────────────────────────
+    removeTerm(target, index) {
+        if (this.disabled())
+            return;
+        const list = target === 'includes' ? this.includes() : this.excludes();
+        const next = list.filter((_, i) => i !== index);
+        if (target === 'includes')
+            this.includes.set(next);
+        else
+            this.excludes.set(next);
+        this.emitState();
+    }
+    removeUserId(target, termIndex, userId) {
+        this.editTermAt(target, termIndex, (term) => {
+            if (term.kind !== 'users')
+                return term;
+            const next = term.userIds.filter((id) => id !== userId);
+            return next.length === 0 ? null : { ...term, userIds: next };
+        });
+    }
+    removeRoleKey(target, termIndex, roleKey) {
+        this.editTermAt(target, termIndex, (term) => {
+            if (term.kind !== 'roles')
+                return term;
+            const next = term.roleKeys.filter((k) => k !== roleKey);
+            return next.length === 0 ? null : { ...term, roleKeys: next };
+        });
+    }
+    removeOuId(target, termIndex, ouId) {
+        this.editTermAt(target, termIndex, (term) => {
+            if (term.kind !== 'ou')
+                return term;
+            const next = term.ouIds.filter((id) => id !== ouId);
+            return next.length === 0 ? null : { ...term, ouIds: next };
+        });
+    }
+    // ── Public read API ──────────────────────────────────────────────────────────
+    /** Returns the current filter snapshot — useful for hosts that want to peek without subscribing. */
+    snapshot() {
+        return this.buildFilter();
+    }
+    // ── ControlValueAccessor implementation ──────────────────────────────────────
+    /**
+     * Called by the forms infrastructure to push a new value into the control. Mirrors the
+     * `[value]` setter path — re-uses `applyValue` so template-driven and reactive callers
+     * converge on the same hydration code.
+     */
+    writeValue(value) {
+        this.applyValue(value, /* emitImmediate */ false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        if (isDisabled)
+            this.closePicker();
+    }
+    // ── Validator implementation ─────────────────────────────────────────────────
+    /**
+     * Aligns Angular's reactive-forms validity with the component's own `validityChange`
+     * output. Returns `audienceRequired` when includes is empty (the canonical "zero
+     * recipients" guard) and `audienceTooManyTerms` when over the per-filter cap.
+     * <br>
+     * The output-event path (<see cref="emitState"/>) reuses this method so there is ONE
+     * definition of "valid" — the classic "two almost-identical validators drifted" bug
+     * cannot recur here.
+     */
+    validate(_) {
+        return this.validateFilter(this.buildFilter());
+    }
+    validateFilter(candidate) {
+        if (candidate.includes.length === 0)
+            return { audienceRequired: true };
+        const total = candidate.includes.length + (candidate.excludes?.length ?? 0);
+        if (total > AUDIENCE_LIMITS.maxTermsPerFilter) {
+            return { audienceTooManyTerms: { actual: total, max: AUDIENCE_LIMITS.maxTermsPerFilter } };
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ── Term display helpers ─────────────────────────────────────────────────────
+    ouLabel(ouId) {
+        const match = this.ouTree().find((o) => o.id === ouId);
+        return match?.displayName ?? `${ouId.substring(0, 8)}…`;
+    }
+    roleLabel(appId, roleKey) {
+        const match = this.roleOus().find((r) => r.appId === appId && r.roleKey === roleKey);
+        return match?.displayName ?? `${appId}:${roleKey}`;
+    }
+    appLabel(appId) {
+        if (appId === '*')
+            return this.i18n.t('audience.app_everyone_wildcard');
+        const match = this.appEveryoneOptions.find((a) => a.appId === appId);
+        return match?.displayName ?? appId;
+    }
+    chartLabel(chartId) {
+        const match = this.chartOptions().find((c) => c.id === chartId);
+        return match?.name ?? `${chartId.substring(0, 8)}…`;
+    }
+    /**
+     * Locale key for a term kind. Replaces hyphens with underscores so the JSON file uses
+     * one consistent naming convention (`audience.kind_app_everyone`, not the hyphen variant).
+     */
+    kindLocaleKey(kind) {
+        return `audience.kind_${kind.replace(/-/g, '_')}`;
+    }
+    /** Same convention as {@link kindLocaleKey} but for preset names. */
+    presetLocaleKey(preset) {
+        return `audience.preset_${preset.replace(/-/g, '_')}`;
+    }
+    /** Picon icon CSS class for a term kind tab — kept here so the template stays declarative. */
+    kindIconClass(kind) {
+        switch (kind) {
+            case 'users': return 'pi pi-user';
+            case 'roles': return 'pi pi-id-card';
+            case 'ou': return 'pi pi-sitemap';
+            case 'app-everyone': return 'pi pi-globe';
+            case 'chart': return 'pi pi-share-alt';
+            case 'preset': return 'pi pi-star';
+        }
+    }
+    // ── Internal helpers — upsert + state emission ───────────────────────────────
+    addToActiveBucket(upsert) {
+        if (this.disabled())
+            return;
+        const target = this.editTarget();
+        const current = target === 'includes' ? this.includes() : this.excludes();
+        const next = upsert(current);
+        if (this.totalTermCount(next, target) > AUDIENCE_LIMITS.maxTermsPerFilter) {
+            this.errorKey.set('audience.error.too_many_terms');
+            return;
+        }
+        if (target === 'includes')
+            this.includes.set(next);
+        else
+            this.excludes.set(next);
+        this.errorKey.set(null);
+        this.emitState();
+    }
+    editTermAt(target, index, fn) {
+        if (this.disabled())
+            return;
+        const list = target === 'includes' ? this.includes() : this.excludes();
+        const term = list[index];
+        if (!term)
+            return;
+        const replaced = fn(term);
+        const next = replaced === null
+            ? list.filter((_, i) => i !== index)
+            : list.map((t, i) => (i === index ? replaced : t));
+        if (target === 'includes')
+            this.includes.set(next);
+        else
+            this.excludes.set(next);
+        this.emitState();
+    }
+    totalTermCount(replacement, target) {
+        const inc = target === 'includes' ? replacement : this.includes();
+        const exc = target === 'excludes' ? replacement : this.excludes();
+        return inc.length + exc.length;
+    }
+    upsertUsersTerm(existing, userId) {
+        const idx = existing.findIndex((t) => t.kind === 'users');
+        if (idx < 0) {
+            const term = { kind: 'users', userIds: [userId] };
+            return [...existing, term];
+        }
+        const term = existing[idx];
+        if (term.userIds.includes(userId))
+            return existing; // idempotent
+        if (term.userIds.length >= AUDIENCE_LIMITS.maxUserIdsPerTerm) {
+            this.errorKey.set('audience.error.too_many_users_per_term');
+            return existing;
+        }
+        return existing.map((t, i) => i === idx ? { ...term, userIds: [...term.userIds, userId] } : t);
+    }
+    upsertRolesTerm(existing, appId, roleKey) {
+        const idx = existing.findIndex((t) => t.kind === 'roles' && t.appId === appId);
+        if (idx < 0) {
+            const term = { kind: 'roles', appId, roleKeys: [roleKey] };
+            return [...existing, term];
+        }
+        const term = existing[idx];
+        if (term.roleKeys.includes(roleKey))
+            return existing;
+        if (term.roleKeys.length >= AUDIENCE_LIMITS.maxRoleKeysPerTerm) {
+            this.errorKey.set('audience.error.too_many_roles_per_term');
+            return existing;
+        }
+        return existing.map((t, i) => i === idx ? { ...term, roleKeys: [...term.roleKeys, roleKey] } : t);
+    }
+    upsertOuTerm(existing, ouId, chartId, includeDescendants) {
+        const idx = existing.findIndex((t) => t.kind === 'ou'
+            && t.chartId === chartId
+            && t.includeDescendants === includeDescendants);
+        if (idx < 0) {
+            const term = {
+                kind: 'ou',
+                ouIds: [ouId],
+                chartId,
+                includeDescendants,
+            };
+            return [...existing, term];
+        }
+        const term = existing[idx];
+        if (term.ouIds.includes(ouId))
+            return existing;
+        if (term.ouIds.length >= AUDIENCE_LIMITS.maxOuIdsPerTerm) {
+            this.errorKey.set('audience.error.too_many_ous_per_term');
+            return existing;
+        }
+        return existing.map((t, i) => i === idx ? { ...term, ouIds: [...term.ouIds, ouId] } : t);
+    }
+    upsertAppEveryoneTerm(existing, appId) {
+        const exists = existing.some((t) => t.kind === 'app-everyone' && t.appId === appId);
+        if (exists)
+            return existing;
+        const term = { kind: 'app-everyone', appId };
+        return [...existing, term];
+    }
+    upsertChartTerm(existing, chartId) {
+        const exists = existing.some((t) => t.kind === 'chart' && t.chartId === chartId);
+        if (exists)
+            return existing;
+        const term = { kind: 'chart', chartId };
+        return [...existing, term];
+    }
+    upsertPresetTerm(existing, preset, anchorUserId) {
+        const exists = existing.some((t) => t.kind === 'preset' && t.preset === preset && t.anchorUserId === anchorUserId);
+        if (exists)
+            return existing;
+        const term = { kind: 'preset', preset, anchorUserId };
+        return [...existing, term];
+    }
+    buildFilter() {
+        const inc = this.includes();
+        const exc = this.excludes();
+        return {
+            includes: inc,
+            ...(exc.length > 0 ? { excludes: exc } : {}),
+            ...(this.value?.options ? { options: this.value.options } : {}),
+        };
+    }
+    emitState() {
+        const filter = this.buildFilter();
+        this.audienceChange.emit(filter);
+        this.validityChange.emit(this.computeValidity(filter));
+        // Forward to the forms infrastructure so reactive forms see the change.
+        this.onChange(filter);
+        this.onTouched();
+        this.onValidatorChange();
+    }
+    /**
+     * Emits ONLY the validity signal (component output + forms-validator hook). Used by
+     * <see cref="ngOnChanges"/> when the host pushes a new value: the host already knows the
+     * value it sent, so re-firing onChange / audienceChange is redundant and risks feedback
+     * loops with two-way bindings; but the validity flag may genuinely have flipped and the
+     * host needs that to enable / disable submit.
+     */
+    emitValidityOnly() {
+        const filter = this.buildFilter();
+        this.validityChange.emit(this.computeValidity(filter));
+        this.onValidatorChange();
+    }
+    computeValidity(candidate) {
+        // Single-source: delegate to validateFilter so the output flag and the form-validator
+        // result agree by construction.
+        return this.validateFilter(candidate) === null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudienceBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AudienceBuilderComponent, isStandalone: true, selector: "fly-audience-builder", inputs: { value: "value", showExcludes: "showExcludes", supportedKinds: "supportedKinds", selfUserId: "selfUserId", appEveryoneOptions: "appEveryoneOptions", searchUsers: "searchUsers", loadOuTree: "loadOuTree", loadChartOptions: "loadChartOptions", loadRoleOus: "loadRoleOus" }, outputs: { audienceChange: "audienceChange", validityChange: "validityChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AudienceBuilderComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => AudienceBuilderComponent),
+                multi: true,
+            },
+        ], 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,
+            args: [{ selector: 'fly-audience-builder', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AudienceBuilderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => AudienceBuilderComponent),
+                            multi: true,
+                        },
+                    ], 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: [{
+                type: Input
+            }], supportedKinds: [{
+                type: Input
+            }], selfUserId: [{
+                type: Input
+            }], appEveryoneOptions: [{
+                type: Input
+            }], searchUsers: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadOuTree: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadChartOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loadRoleOus: [{
+                type: Input
+            }], audienceChange: [{
+                type: Output
+            }], validityChange: [{
+                type: Output
+            }] } });
+
 /** Full-bleed loading overlay for window content (shell) or embedded hosts. */
 class FlyBlockUiComponent {
     /** When false, the overlay is not rendered (host may use @if instead). */
@@ -1312,6 +2076,8 @@ class FlyFileUploadComponent {
     sourceApp = input('unknown', ...(ngDevMode ? [{ debugName: "sourceApp" }] : /* istanbul ignore next */ []));
     sourceEntityType = input(null, ...(ngDevMode ? [{ debugName: "sourceEntityType" }] : /* istanbul ignore next */ []));
     sourceEntityId = input(null, ...(ngDevMode ? [{ debugName: "sourceEntityId" }] : /* istanbul ignore next */ []));
+    /** Optional: provide file IDs to auto-fetch metadata for pre-existing files (edit mode). */
+    existingFileIds = input(null, ...(ngDevMode ? [{ debugName: "existingFileIds" }] : /* istanbul ignore next */ []));
     /** Two-way model for completed file metadata. */
     files = model([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
@@ -1323,6 +2089,24 @@ class FlyFileUploadComponent {
     /** Pre-existing files loaded from the entity (before any new uploads this session). */
     existingFiles = signal([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : /* istanbul ignore next */ []));
     fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Auto-fetch metadata for existing file IDs (edit mode)
+        effect((onCleanup) => {
+            const ids = this.existingFileIds();
+            if (!ids?.length)
+                return;
+            const subs = ids.map(id => this.http.get(`/api/files/${id}`).subscribe({
+                next: (res) => {
+                    const info = res.data ?? res;
+                    if (info?.id) {
+                        this.existingFiles.update(list => list.some(f => f.id === info.id) ? list : [...list, info]);
+                        this.files.update(list => list.some(f => f.id === info.id) ? list : [...list, info]);
+                    }
+                },
+            }));
+            onCleanup(() => subs.forEach(s => s.unsubscribe()));
+        });
+    }
     allSlots = computed(() => this.slots(), ...(ngDevMode ? [{ debugName: "allSlots" }] : /* istanbul ignore next */ []));
     canAddMore = computed(() => {
         const current = this.files().length + this.slots().filter(s => s.status === 'uploading').length;
@@ -1431,7 +2215,7 @@ class FlyFileUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyFileUploadComponent, isStandalone: true, selector: "fly-file-upload", inputs: { maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesChanged: "filesChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyFileUploadComponent, isStandalone: true, selector: "fly-file-upload", inputs: { maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null }, existingFileIds: { classPropertyName: "existingFileIds", publicName: "existingFileIds", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesChanged: "filesChanged" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="fly-file-upload">
       @if (canAddMore()) {
         <div class="fly-file-upload__dropzone"
@@ -1574,7 +2358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       <input #fileInput type="file" [accept]="accept()" multiple class="fly-file-upload__hidden" (change)="onFilesSelected($event)" />
     </div>
   `, styles: [".fly-file-upload{display:flex;flex-direction:column;gap:8px}.fly-file-upload__hidden{display:none}.fly-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:10px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--system-red, #ef4444);padding:4px 0}.fly-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.fly-file-upload__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--separator-primary, #e5e7eb);border-radius:8px;background:var(--fill-quaternary, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--label-tertiary, #9ca3af);flex-shrink:0}.fly-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fly-file-upload__file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label-primary, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--fill-tertiary, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent-primary, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--system-green, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--system-red, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--label-tertiary, #9ca3af);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}.fly-file-upload__remove-btn:hover{color:var(--system-red, #ef4444);background:var(--fill-tertiary, #f3f4f6)}\n"] }]
-        }], propDecorators: { maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], existingFileIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileIds", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 /*
  * @mohamedatia/fly-design-system — Public API
@@ -1607,12 +2391,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *         options resolve (no spurious null fetch). `loadOuLabelMap` supplies default-tree labels for OU rows.
  * v1.8.0: `WindowInstance` optional `contentUiBlocked` / `contentUiBlockMessageKey`; `WindowManagerService`
  *         `beginContentUiBlock` / `endContentUiBlock` default no-ops; `FlyBlockUiComponent` for shell window overlay.
+ * v1.10.0: SharePanelComponent — `supportsDeny` input + `isDeny?` on `SharePermissionEntry`. Surfaces an
+ *          "Add as deny" toggle in the add-permission row and renders existing deny grants with red
+ *          accent + ban icon. `grantToUser` / `grantToOu` callbacks gain a fourth `isDeny: boolean`
+ *          parameter (additive — existing 3-arg callers won't compile until updated). New locale keys
+ *          `files.share.add_as_deny`, `files.share.deny_help`, `files.share.denied` (en/ar/fr/ur).
+ *          Backed by Files Manager `FilePermission.IsDeny` and Notes `NoteShareLevel.Deny`.
+ * v2.0.0: BREAKING — `SharePermissionEntry` adopts the `SharePrincipal` discriminated union
+ *         (`{ kind: 'user' | 'role' | 'ou' | 'app-everyone', ... }`) instead of the v1
+ *         `grantedToUserId` / `grantedToOuId` / `grantedToAppId` set-which-is-set fields.
+ *         Hosts must translate domain DTOs to/from the new shape (see
+ *         `file-access-control.component.ts` and `notes.component.ts` for migration patterns).
+ *         The `role` kind is reserved for the planned apps-chart role-as-principal flow;
+ *         hosts should not emit it until the backend's `PermissionResolver` enumerates a
+ *         user's full OU set (direct + computed-from-role memberships).
+ * v2.1.0: AudienceBuilderComponent — generic <fly-audience-builder> form-control for composing
+ *         a `Fly.Shared.Core.Audience.AudienceFilter`. TypeScript model (`AudienceFilter`,
+ *         `AudienceTerm` discriminated union, `AUDIENCE_LIMITS`) mirrors the C# polymorphic
+ *         shape byte-for-byte (`kind` discriminator: users/roles/ou/app-everyone/chart/preset).
+ *         Reuses share-panel callback shapes (searchUsers, loadOuTree, loadChartOptions,
+ *         loadRoleOus). Distinct from share-panel: emits `(audienceChange)` + `(validityChange)`
+ *         instead of auto-persisting; hosts save on submit. New `audience.*` locale namespace.
+ * v2.3.0: Deep-link launch contract — `LAUNCH_CONTEXT` injection token + `LaunchContext`
+ *         type for federated remotes to receive a route + params payload when the host
+ *         opens (or re-opens) their window via a `?app=&route=&params=` URL on the shell.
+ *         Token resolves to `Signal<LaunchContext | null>`; `null` when no host provider.
+ *         Backed by `Fly.Shared.Core.Apps.IDeepLinkBuilder` for outbound URL generation.
+ * v2.2.0: AudienceBuilderComponent now implements `ControlValueAccessor` + `Validator` so
+ *         hosts can bind via `formControl` / `formControlName` / `[(ngModel)]`. Existing
+ *         `[value]` + `(audienceChange)` + `(validityChange)` API still works (forms wiring
+ *         is purely additive). `AUDIENCE_PRESETS` const exported for hosts that build their
+ *         own preset pickers. `OuTerm.chartId` and `OuTerm.includeDescendants` are now
+ *         REQUIRED (no longer optional) so wire round-trips are deterministic — emit explicit
+ *         `null` / `boolean` rather than `undefined`. New `AudienceErrorCodes` mirror added.
  * See docs/ExternalAppsGuide/03-frontend-app.md.
  */
+/**
+ * Stable error codes returned by audience-aware backend endpoints. Mirror of
+ * `Fly.Shared.Core.Audience.AudienceErrorCodes`. Compare on these strings, not on HTTP
+ * status, so localized messages can change without breaking integrations.
+ */
+const AUDIENCE_ERROR_CODES = {
+    invalidFilter: 'INVALID_AUDIENCE_FILTER',
+    audienceTooLarge: 'AUDIENCE_TOO_LARGE',
+    resolverUnavailable: 'AUDIENCE_RESOLVER_UNAVAILABLE',
+    invalidAudienceKind: 'INVALID_AUDIENCE_KIND',
+};
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, ContextMenuComponent, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_THEME_MODE_IDS, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyThemeService, I18nService, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, isRtlLocale, normalizeFlyTheme };
+export { AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_THEME_MODE_IDS, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyThemeService, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, isRtlLocale, normalizeFlyTheme };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map