@flyos/design-system 3.3.0 → 3.5.0

package/fesm2022/flyos-design-system.mjs

@@ -47,7 +47,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
 // Used only for the diagnostic message; the duplicate-instance detection itself is
 // version-agnostic, so a stale literal misnames a fork rather than hiding one.
-const FLY_DS_VERSION = '3.3.0';
+const FLY_DS_VERSION = '3.5.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -1218,12 +1218,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Standalone-dev route guard: if there is no authenticated session, start the PKCE login (redirects
  * to the STS) and block activation. Not reached in federated mode — the shell mounts the app's root
  * component directly rather than routing through the app shell.
+ *
+ * Before redirecting it stashes the attempted URL under the same appId-scoped sessionStorage key the
+ * step-up flow uses, so the auth callback lands back on the deep link instead of `/` — an
+ * unauthenticated deep link previously lost its target on the STS round-trip.
  */
-const flyStandaloneAuthGuard = () => {
+const flyStandaloneAuthGuard = (_route, state) => {
     const auth = inject(FlyStandaloneAuthService);
     if (auth.isAuthenticated())
         return true;
-    void auth.startLogin();
+    const appId = inject(FLY_STANDALONE_AUTH_CONFIG).appId;
+    try {
+        sessionStorage.setItem(stepUpReturnKey(appId), state.url);
+    }
+    catch {
+        /* sessionStorage unavailable — fall back to the callback's default landing */
+    }
+    auth.startLogin().catch((err) => {
+        // Surface the failure instead of leaving a silent white screen: the guard already returned
+        // false, so if the authorize redirect never happens the router renders nothing at all.
+        console.error('[FlyStandaloneAuth] startLogin failed — the app cannot authenticate', err);
+    });
     return false;
 };
 
@@ -1303,7 +1318,7 @@ function flyStandaloneAuthInterceptor(req, next) {
  * is a safe default that an integrator can override without coordination.
  *
  * Scope: only the keys the **shippable** DS components reference today
- * (`common.*` toolbar/link/emoji-picker labels + `agent.lookup.*` + `select.*` + `typeahead.*` + `cron.*` + `gantt.*` + `form.*` + `captcha.*` + `comment.*` + `canvas_board.*` + `moderation.*` + `people_picker.*` + `currency_selector.*` + `pagination.*` + `tree_nav.*` + `magic_actions.*`). When a new DS component
+ * (`common.*` toolbar/link/emoji-picker labels + `agent.lookup.*` + `select.*` + `typeahead.*` + `cron.*` + `gantt.*` + `form.*` + `captcha.*` + `comment.*` + `canvas_board.*` + `moderation.*` + `people_picker.*` + `strategy_selector.*` + `currency_selector.*` + `pagination.*` + `tree_nav.*` + `magic_actions.*`). When a new DS component
  * starts using `| translate` **or `I18nService.t()`**, add its keys here so it stays
  * self-sufficient — `fly-magic-actions` shipped resolving three keys that existed only in the
  * shell bundle, so an External App rendering it got the raw key string as every disabled
@@ -1575,6 +1590,9 @@ const DS_BASELINE_LOCALES = {
         'captcha.verified': 'Verified',
         'captcha.expired': 'Verification expired — please retry.',
         'captcha.error': 'Verification failed.',
+        // file upload (fly-file-upload)
+        'files.fileUpload.dropOrClick': 'Drop files or click to browse',
+        'files.fileUpload.limitHint': 'Max {{n}} files, {{mb}}MB each',
         // standalone auth callback (provideFlyStandaloneAuth)
         'auth.callback.signing_in': 'Signing you in…',
         // comment-thread (fly-comment-thread)
@@ -1641,6 +1659,13 @@ const DS_BASELINE_LOCALES = {
         'people_picker.search_placeholder': 'Search people…',
         'people_picker.remove': 'Remove {{name}}',
         'people_picker.change': 'Change',
+        // strategy selector (fly-strategy-selector)
+        'strategy_selector.search_placeholder': 'Search strategic objectives…',
+        'strategy_selector.remove': 'Remove {{name}}',
+        'strategy_selector.no_results': 'No matching objectives.',
+        'strategy_selector.loading': 'Loading objectives…',
+        'strategy_selector.error': 'Objectives could not be loaded.',
+        'strategy_selector.retry': 'Retry',
         // currency selector (fly-currency-selector)
         'currency_selector.placeholder': 'Select a currency',
         'currency_selector.placeholder_multi': 'Select currencies',
@@ -1680,6 +1705,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'Select a module',
         'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Switch module',
+        'ui.pager.next': 'Next page',
+        'ui.pager.page': 'Page {{page}}',
+        'ui.pager.previous': 'Previous page',
         'ui.pagination.first': 'First page',
         'ui.pagination.label': 'Pagination',
         'ui.pagination.last': 'Last page',
@@ -1965,6 +1993,9 @@ const DS_BASELINE_LOCALES = {
         'captcha.verified': 'تم التحقق',
         'captcha.expired': 'انتهت صلاحية التحقق — يرجى إعادة المحاولة.',
         'captcha.error': 'فشل التحقق.',
+        // file upload (fly-file-upload)
+        'files.fileUpload.dropOrClick': 'أسقط الملفات أو انقر للتصفح',
+        'files.fileUpload.limitHint': 'بحد أقصى {{n}} ملفات، {{mb}} ميغابايت لكل ملف',
         // standalone auth callback (provideFlyStandaloneAuth)
         'auth.callback.signing_in': 'جارٍ تسجيل الدخول…',
         // comment-thread (fly-comment-thread)
@@ -2031,6 +2062,13 @@ const DS_BASELINE_LOCALES = {
         'people_picker.search_placeholder': 'ابحث عن أشخاص…',
         'people_picker.remove': 'إزالة {{name}}',
         'people_picker.change': 'تغيير',
+        // strategy selector (fly-strategy-selector)
+        'strategy_selector.search_placeholder': 'ابحث عن الأهداف الاستراتيجية…',
+        'strategy_selector.remove': 'إزالة {{name}}',
+        'strategy_selector.no_results': 'لا توجد أهداف مطابقة.',
+        'strategy_selector.loading': 'جارٍ تحميل الأهداف…',
+        'strategy_selector.error': 'تعذّر تحميل الأهداف.',
+        'strategy_selector.retry': 'إعادة المحاولة',
         // currency selector (fly-currency-selector)
         'currency_selector.placeholder': 'اختر عملة',
         'currency_selector.placeholder_multi': 'اختر العملات',
@@ -2070,6 +2108,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'اختر وحدة',
         'ui.nav.sections': 'الأقسام',
         'ui.nav.switchModule': 'تبديل الوحدة',
+        'ui.pager.next': 'الصفحة التالية',
+        'ui.pager.page': 'الصفحة {{page}}',
+        'ui.pager.previous': 'الصفحة السابقة',
         'ui.pagination.first': 'الصفحة الأولى',
         'ui.pagination.label': 'تقسيم الصفحات',
         'ui.pagination.last': 'الصفحة الأخيرة',
@@ -2355,6 +2396,9 @@ const DS_BASELINE_LOCALES = {
         'captcha.verified': 'Vérifié',
         'captcha.expired': 'Vérification expirée — veuillez réessayer.',
         'captcha.error': 'Échec de la vérification.',
+        // file upload (fly-file-upload)
+        'files.fileUpload.dropOrClick': 'Déposez des fichiers ou cliquez pour parcourir',
+        'files.fileUpload.limitHint': '{{n}} fichiers max., {{mb}} Mo chacun',
         // standalone auth callback (provideFlyStandaloneAuth)
         'auth.callback.signing_in': 'Connexion en cours…',
         // comment-thread (fly-comment-thread)
@@ -2421,6 +2465,13 @@ const DS_BASELINE_LOCALES = {
         'people_picker.search_placeholder': 'Rechercher des personnes…',
         'people_picker.remove': 'Retirer {{name}}',
         'people_picker.change': 'Changer',
+        // strategy selector (fly-strategy-selector)
+        'strategy_selector.search_placeholder': 'Rechercher des objectifs stratégiques…',
+        'strategy_selector.remove': 'Retirer {{name}}',
+        'strategy_selector.no_results': 'Aucun objectif correspondant.',
+        'strategy_selector.loading': 'Chargement des objectifs…',
+        'strategy_selector.error': 'Impossible de charger les objectifs.',
+        'strategy_selector.retry': 'Réessayer',
         // currency selector (fly-currency-selector)
         'currency_selector.placeholder': 'Sélectionner une devise',
         'currency_selector.placeholder_multi': 'Sélectionner des devises',
@@ -2460,6 +2511,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'Choisir un module',
         'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Changer de module',
+        'ui.pager.next': 'Page suivante',
+        'ui.pager.page': 'Page {{page}}',
+        'ui.pager.previous': 'Page précédente',
         'ui.pagination.first': 'Première page',
         'ui.pagination.label': 'Pagination',
         'ui.pagination.last': 'Dernière page',
@@ -2744,6 +2798,9 @@ const DS_BASELINE_LOCALES = {
         'captcha.verified': 'تصدیق ہو گئی',
         'captcha.expired': 'تصدیق کی میعاد ختم — دوبارہ کوشش کریں۔',
         'captcha.error': 'تصدیق ناکام۔',
+        // file upload (fly-file-upload)
+        'files.fileUpload.dropOrClick': 'فائلیں چھوڑیں یا براؤز کرنے کے لیے کلک کریں',
+        'files.fileUpload.limitHint': 'زیادہ سے زیادہ {{n}} فائلیں، ہر ایک {{mb}} ایم بی',
         // standalone auth callback (provideFlyStandaloneAuth)
         'auth.callback.signing_in': 'سائن ان ہو رہا ہے…',
         // comment-thread (fly-comment-thread)
@@ -2810,6 +2867,13 @@ const DS_BASELINE_LOCALES = {
         'people_picker.search_placeholder': 'لوگ تلاش کریں…',
         'people_picker.remove': '{{name}} کو ہٹائیں',
         'people_picker.change': 'تبدیل کریں',
+        // strategy selector (fly-strategy-selector)
+        'strategy_selector.search_placeholder': 'اسٹریٹجک مقاصد تلاش کریں…',
+        'strategy_selector.remove': '{{name}} کو ہٹائیں',
+        'strategy_selector.no_results': 'کوئی مماثل مقصد نہیں۔',
+        'strategy_selector.loading': 'مقاصد لوڈ ہو رہے ہیں…',
+        'strategy_selector.error': 'مقاصد لوڈ نہیں ہو سکے۔',
+        'strategy_selector.retry': 'دوبارہ کوشش کریں',
         // currency selector (fly-currency-selector)
         'currency_selector.placeholder': 'کرنسی منتخب کریں',
         'currency_selector.placeholder_multi': 'کرنسیاں منتخب کریں',
@@ -2849,6 +2913,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'ماڈیول منتخب کریں',
         'ui.nav.sections': 'حصے',
         'ui.nav.switchModule': 'ماڈیول تبدیل کریں',
+        'ui.pager.next': 'اگلا صفحہ',
+        'ui.pager.page': 'صفحہ {{page}}',
+        'ui.pager.previous': 'پچھلا صفحہ',
         'ui.pagination.first': 'پہلا صفحہ',
         'ui.pagination.label': 'صفحہ بندی',
         'ui.pagination.last': 'آخری صفحہ',
@@ -4008,12 +4075,12 @@ function connectRemoteLaunch(opts) {
 const FLY_REMOTE_CONTEXT_STORE_KEY = '__flyRemoteContext__';
 const FLY_REMOTE_CONTEXT_EVENT = 'fly:remote-context';
 /** The single cross-bundle store, lazily created on `globalThis`. */
-function store$1() {
+function store$2() {
     const g = globalThis;
     return (g[FLY_REMOTE_CONTEXT_STORE_KEY] ??= {});
 }
 /** Notify every federated copy of the service that the store changed. */
-function emitSync$1() {
+function emitSync$2() {
     const g = globalThis;
     try {
         g.dispatchEvent?.(new Event(FLY_REMOTE_CONTEXT_EVENT));
@@ -4070,33 +4137,33 @@ function toMap(s) {
  * dispatch is ever needed.
  */
 class FlyRemoteContextService {
-    _byApp = signal(toMap(store$1()), ...(ngDevMode ? [{ debugName: "_byApp" }] : /* istanbul ignore next */ []));
+    _byApp = signal(toMap(store$2()), ...(ngDevMode ? [{ debugName: "_byApp" }] : /* istanbul ignore next */ []));
     /** All currently-published contexts, keyed by app id. Reactive. */
     contexts = this._byApp.asReadonly();
     constructor() {
         // Keep this instance's reactive mirror current when ANOTHER federated copy of
         // the service — or a remote writing the store slot directly — mutates it.
         const g = globalThis;
-        g.addEventListener?.(FLY_REMOTE_CONTEXT_EVENT, () => this._byApp.set(toMap(store$1())));
+        g.addEventListener?.(FLY_REMOTE_CONTEXT_EVENT, () => this._byApp.set(toMap(store$2())));
     }
     /** Publish (or replace) the active route context for an app. */
     publish(ctx) {
-        store$1()[ctx.appId] = ctx;
-        this._byApp.set(toMap(store$1()));
-        emitSync$1();
+        store$2()[ctx.appId] = ctx;
+        this._byApp.set(toMap(store$2()));
+        emitSync$2();
     }
     /** Drop an app's context (remote unmounted / window closed). No-op if absent. */
     clear(appId) {
-        const s = store$1();
+        const s = store$2();
         if (!(appId in s))
             return;
         delete s[appId];
         this._byApp.set(toMap(s));
-        emitSync$1();
+        emitSync$2();
     }
     /** Current context for an app, or `null` when nothing is published. */
     context(appId) {
-        return store$1()[appId] ?? null;
+        return store$2()[appId] ?? null;
     }
     /**
      * Resolve a single route param for an app, e.g. `param('circles', 'id')`.
@@ -4104,7 +4171,7 @@ class FlyRemoteContextService {
      * the caller then degrades (the skill asks for the missing id).
      */
     param(appId, path) {
-        const value = store$1()[appId]?.params[path];
+        const value = store$2()[appId]?.params[path];
         return value != null && value !== '' ? value : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9971,15 +10038,144 @@ class FlyBreadcrumbComponent {
         this.navigate.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBreadcrumbComponent, isStandalone: true, selector: "fly-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasCurrentPage: { classPropertyName: "hasCurrentPage", publicName: "hasCurrentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { properties: { "attr.dir": "i18n.direction()" } }, ngImport: i0, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  <ol class=\"fly-breadcrumb__list\">\r\n    @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n      @if (i > 0) {\r\n        <li class=\"fly-breadcrumb__separator\" aria-hidden=\"true\"></li>\r\n      }\r\n      @if (entry.kind === 'overflow') {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</li>\r\n      } @else if (entry.isCurrent) {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n          {{ entry.item.label }}\r\n        </li>\r\n      } @else {\r\n        <li class=\"fly-breadcrumb__crumb\">\r\n          @if (entry.item.href) {\r\n            <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n               (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</a>\r\n          } @else {\r\n            <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                    (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</button>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{min-inline-size:0}.fly-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{color:var(--text-color);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--t-state),color var(--t-state)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__separator{flex:0 0 auto;inline-size:7px;block-size:7px;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:rotate(-135deg)}@media(forced-colors:active){.fly-breadcrumb__separator{border-color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBreadcrumbComponent, isStandalone: true, selector: "fly-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasCurrentPage: { classPropertyName: "hasCurrentPage", publicName: "hasCurrentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { properties: { "attr.dir": "i18n.direction()" } }, ngImport: i0, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n    @if (i > 0) {\r\n      <svg class=\"fly-breadcrumb__separator\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n           stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n           aria-hidden=\"true\">\r\n        <path d=\"M9 5l7 7-7 7\" />\r\n      </svg>\r\n    }\r\n    @if (entry.kind === 'overflow') {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</span>\r\n    } @else if (entry.isCurrent) {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n        @if (entry.item.iconPath; as d) {\r\n          <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n               aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n        }\r\n        {{ entry.item.label }}\r\n      </span>\r\n    } @else {\r\n      <span class=\"fly-breadcrumb__crumb\">\r\n        @if (entry.item.href) {\r\n          <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n             (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </a>\r\n        } @else {\r\n          <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                  (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </button>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;flex:none;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{flex:1 1 auto;min-inline-size:0;gap:6px;block-size:26px;padding-inline:4px;font-weight:600;letter-spacing:-.006em;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .fly-breadcrumb__crumb--current{letter-spacing:normal}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;gap:6px;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__icon{flex:none}.fly-breadcrumb__separator{flex:none;color:var(--w28)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:scaleX(-1)}@media(forced-colors:active){.fly-breadcrumb__separator{color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.dir]': 'i18n.direction()',
-                    }, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  <ol class=\"fly-breadcrumb__list\">\r\n    @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n      @if (i > 0) {\r\n        <li class=\"fly-breadcrumb__separator\" aria-hidden=\"true\"></li>\r\n      }\r\n      @if (entry.kind === 'overflow') {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</li>\r\n      } @else if (entry.isCurrent) {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n          {{ entry.item.label }}\r\n        </li>\r\n      } @else {\r\n        <li class=\"fly-breadcrumb__crumb\">\r\n          @if (entry.item.href) {\r\n            <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n               (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</a>\r\n          } @else {\r\n            <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                    (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</button>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{min-inline-size:0}.fly-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{color:var(--text-color);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--t-state),color var(--t-state)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__separator{flex:0 0 auto;inline-size:7px;block-size:7px;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:rotate(-135deg)}@media(forced-colors:active){.fly-breadcrumb__separator{border-color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"] }]
+                    }, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n    @if (i > 0) {\r\n      <svg class=\"fly-breadcrumb__separator\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n           stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n           aria-hidden=\"true\">\r\n        <path d=\"M9 5l7 7-7 7\" />\r\n      </svg>\r\n    }\r\n    @if (entry.kind === 'overflow') {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</span>\r\n    } @else if (entry.isCurrent) {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n        @if (entry.item.iconPath; as d) {\r\n          <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n               aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n        }\r\n        {{ entry.item.label }}\r\n      </span>\r\n    } @else {\r\n      <span class=\"fly-breadcrumb__crumb\">\r\n        @if (entry.item.href) {\r\n          <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n             (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </a>\r\n        } @else {\r\n          <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                  (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </button>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;flex:none;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{flex:1 1 auto;min-inline-size:0;gap:6px;block-size:26px;padding-inline:4px;font-weight:600;letter-spacing:-.006em;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .fly-breadcrumb__crumb--current{letter-spacing:normal}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;gap:6px;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__icon{flex:none}.fly-breadcrumb__separator{flex:none;color:var(--w28)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:scaleX(-1)}@media(forced-colors:active){.fly-breadcrumb__separator{color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasCurrentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCurrentPage", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
 
+/** Cross-bundle store key + sync event — same shape as `FLY_MAGIC_BAR_STORE_KEY`. */
+const FLY_WINDOW_BREADCRUMBS_STORE_KEY = '__flyWindowBreadcrumbs__';
+const FLY_WINDOW_BREADCRUMBS_EVENT = 'fly:window-breadcrumbs';
+function store$1() {
+    const g = globalThis;
+    return (g[FLY_WINDOW_BREADCRUMBS_STORE_KEY] ??= { trails: {}, revision: 0 });
+}
+function emitSync$1() {
+    const g = globalThis;
+    try {
+        g.dispatchEvent?.(new Event(FLY_WINDOW_BREADCRUMBS_EVENT));
+    }
+    catch {
+        // Non-DOM realm (SSR / a unit env without `Event`) — see the identical note on
+        // `MagicBarRegistry.emitSync`. The instance that mutated the store is
+        // unaffected; any OTHER instance in such a realm stays stale until its own
+        // next mutation calls `sync()` directly.
+    }
+}
+/**
+ * Where an app publishes the breadcrumb trail its window's header strip renders.
+ *
+ * The design puts a trail inside the window
+ * (`UX/FlyOS Desktop-app/MainContent.dc.html`, `nav[aria-label="Breadcrumb"]`), and
+ * the window chrome (`WindowComponent`) renders whatever this registry holds for
+ * its window id, falling back to the plain window title when nothing has published.
+ *
+ * ## Why the state lives on `globalThis`
+ *
+ * Same reasoning as {@link MagicBarRegistry} (`services/magic-bar/`), and the same
+ * direction of travel (remote → shell chrome). This service is `providedIn: 'root'`,
+ * but a root instance is not *reliably* shared across the federation boundary: the
+ * shell builds the design system from workspace source while remotes consume the
+ * published package, and Native Federation collapses those into one runtime
+ * instance only when version negotiation succeeds — a split there is invisible at
+ * build time and would otherwise present as a window whose breadcrumb silently
+ * never appears, for federated apps only. Keeping the state on the one substrate
+ * every bundle shares makes this store fork-proof: whichever copy of this service
+ * publishes, every copy's `trail()` agrees. Each instance mirrors the store into a
+ * local signal and re-reads on the sync event, so `WindowComponent`'s template —
+ * which reads `trail()` inside its own reactive context — repaints whichever
+ * bundle actually published.
+ *
+ * Simpler than `MagicBarRegistry` on purpose: a breadcrumb trail is addressed
+ * directly by the window id its publisher already has (via `WINDOW_DATA`), so
+ * there is no owner-vs-active-window arbitration, no per-action indexing and no
+ * publish-fingerprint dedup to carry — `publish()` just replaces the entry.
+ *
+ * ```ts
+ * const win = inject(WINDOW_DATA);
+ * const crumbs = inject(WindowBreadcrumbsRegistry);
+ * crumbs.publish(win.id, [
+ *   { id: 'root', label: circleName, navigate: () => this.showList() },
+ *   { id: 'trend', label: trend.title },
+ * ]);
+ * ```
+ */
+class WindowBreadcrumbsRegistry {
+    _trails = signal(new Map(), ...(ngDevMode ? [{ debugName: "_trails" }] : /* istanbul ignore next */ []));
+    _syncedStore = null;
+    _syncedRevision = -1;
+    /** Every published trail, keyed by window id. Reactive — read it inside a template/computed/effect. */
+    all = this._trails.asReadonly();
+    constructor() {
+        const g = globalThis;
+        g.addEventListener?.(FLY_WINDOW_BREADCRUMBS_EVENT, () => this.sync());
+        this.sync();
+    }
+    /**
+     * This window's published trail, or an empty array.
+     *
+     * A plain method over a signal read, not a per-id `computed`: it is called from
+     * the window template, where the signal read is tracked whatever the call depth,
+     * and a `computed` cache keyed by a mutable window id would outlive its window.
+     */
+    trail(windowId) {
+        return this._trails().get(windowId) ?? EMPTY_TRAIL;
+    }
+    /**
+     * Replace a window's trail. Publishing an empty array is how an app goes back to
+     * showing the plain window title — it is a state, not a clear.
+     */
+    publish(windowId, crumbs) {
+        const s = store$1();
+        s.trails = { ...s.trails, [windowId]: [...crumbs] };
+        s.revision++;
+        this.sync();
+        emitSync$1();
+    }
+    /** Drop a window's trail entirely. The window chrome calls this when it is destroyed. */
+    clear(windowId) {
+        const s = store$1();
+        if (!(windowId in s.trails))
+            return;
+        const trails = { ...s.trails };
+        delete trails[windowId];
+        s.trails = trails;
+        s.revision++;
+        this.sync();
+        emitSync$1();
+    }
+    /**
+     * Re-read the shared store. Cheap no-op unless a real mutation landed.
+     *
+     * Keys on store IDENTITY as well as revision — see the identical note on
+     * `MagicBarRegistry.sync`: a revision counter alone cannot distinguish "nothing
+     * changed" from "the `globalThis` slot now holds a brand-new store that happens
+     * to be at the same revision" (every spec's `beforeEach` replaces the store).
+     */
+    sync() {
+        const s = store$1();
+        if (s === this._syncedStore && s.revision === this._syncedRevision)
+            return;
+        this._syncedStore = s;
+        this._syncedRevision = s.revision;
+        this._trails.set(new Map(Object.entries(s.trails)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WindowBreadcrumbsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WindowBreadcrumbsRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WindowBreadcrumbsRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/** Shared empty result — a fresh `[]` per read would re-render every window on every pass. */
+const EMPTY_TRAIL = Object.freeze([]);
+
+/** Public window-breadcrumbs surface — see `window-breadcrumbs-registry.service.ts`. */
+
 /**
  * Headless keyboard-navigation logic — roving focus for menus, radiogroups, and
  * tablists.
@@ -10933,10 +11129,10 @@ class FlyFileUploadComponent {
         const current = this.files().length + this.slots().filter(s => s.status === 'uploading').length;
         return current < this.maxFiles();
     }, ...(ngDevMode ? [{ debugName: "canAddMore" }] : /* istanbul ignore next */ []));
-    limitHint = computed(() => {
-        const mb = this.maxFileSizeBytes() / (1024 * 1024);
-        return `Max ${this.maxFiles()} files, ${mb}MB each`;
-    }, ...(ngDevMode ? [{ debugName: "limitHint" }] : /* istanbul ignore next */ []));
+    limitHintParams = computed(() => ({
+        n: this.maxFiles(),
+        mb: this.maxFileSizeBytes() / (1024 * 1024),
+    }), ...(ngDevMode ? [{ debugName: "limitHintParams" }] : /* istanbul ignore next */ []));
     triggerFileInput() {
         this.fileInput()?.nativeElement.click();
     }
@@ -11037,11 +11233,11 @@ class FlyFileUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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\">\r\n  @if (canAddMore()) {\r\n    <button type=\"button\" class=\"fly-file-upload__dropzone\"\r\n         [class.fly-file-upload__dropzone--drag]=\"dragging()\"\r\n         (click)=\"triggerFileInput()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\"\r\n         (drop)=\"onDrop($event)\">\r\n      <span class=\"pi pi-cloud-upload fly-file-upload__icon\" aria-hidden=\"true\"></span>\r\n      <span class=\"fly-file-upload__label\">{{ 'files.fileUpload.dropOrClick' | translate }}</span>\r\n      <span class=\"fly-file-upload__hint\">{{ limitHint() }}</span>\r\n    </button>\r\n  }\r\n\r\n  @if (error()) {\r\n    <div class=\"fly-file-upload__error\">{{ error() }}</div>\r\n  }\r\n\r\n  @if (allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (slot of allSlots(); track slot.file.name + slot.file.size) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconFor(slot) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ slot.file.name }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(slot.file.size) }}</span>\r\n          </div>\r\n          @if (slot.status === 'uploading') {\r\n            <div class=\"fly-file-upload__progress-track\">\r\n              <div class=\"fly-file-upload__progress-fill\" [style.width.%]=\"slot.progress\"></div>\r\n            </div>\r\n          }\r\n          @if (slot.status === 'error') {\r\n            <span class=\"fly-file-upload__file-error\" [title]=\"slot.error ?? ''\">\r\n              <span class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></span>\r\n            </span>\r\n          }\r\n          @if (slot.status === 'done') {\r\n            <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeSlot(slot)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  @if (existingFiles().length && !allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (f of existingFiles(); track f.id) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconForInfo(f) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ f.fileName }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(f.sizeBytes) }}</span>\r\n          </div>\r\n          <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeExisting(f)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  <input #fileInput type=\"file\" [accept]=\"accept()\" multiple class=\"fly-file-upload__hidden\" (change)=\"onFilesSelected($event)\" />\r\n</div>\r\n", styles: [".fly-file-upload{display:flex;flex-direction:column;gap:8px}.fly-file-upload__hidden{display:none}.fly-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:10px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--system-red, #ef4444);padding:4px 0}.fly-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.fly-file-upload__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--separator-primary, #e5e7eb);border-radius:8px;background:var(--fill-quaternary, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--label-tertiary, #9ca3af);flex-shrink:0}.fly-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fly-file-upload__file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label-primary, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--fill-tertiary, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent-primary, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--system-green, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--system-red, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--label-tertiary, #9ca3af);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}.fly-file-upload__remove-btn:hover{color:var(--system-red, #ef4444);background:var(--fill-tertiary, #f3f4f6)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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\">\r\n  @if (canAddMore()) {\r\n    <button type=\"button\" class=\"fly-file-upload__dropzone\"\r\n         [class.fly-file-upload__dropzone--drag]=\"dragging()\"\r\n         (click)=\"triggerFileInput()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\"\r\n         (drop)=\"onDrop($event)\">\r\n      <span class=\"pi pi-cloud-upload fly-file-upload__icon\" aria-hidden=\"true\"></span>\r\n      <span class=\"fly-file-upload__label\">{{ 'files.fileUpload.dropOrClick' | translate }}</span>\r\n      <span class=\"fly-file-upload__hint\">{{ 'files.fileUpload.limitHint' | translate: limitHintParams() }}</span>\r\n    </button>\r\n  }\r\n\r\n  @if (error()) {\r\n    <div class=\"fly-file-upload__error\">{{ error() }}</div>\r\n  }\r\n\r\n  @if (allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (slot of allSlots(); track slot.file.name + slot.file.size) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconFor(slot) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ slot.file.name }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(slot.file.size) }}</span>\r\n          </div>\r\n          @if (slot.status === 'uploading') {\r\n            <div class=\"fly-file-upload__progress-track\">\r\n              <div class=\"fly-file-upload__progress-fill\" [style.width.%]=\"slot.progress\"></div>\r\n            </div>\r\n          }\r\n          @if (slot.status === 'error') {\r\n            <span class=\"fly-file-upload__file-error\" [title]=\"slot.error ?? ''\">\r\n              <span class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></span>\r\n            </span>\r\n          }\r\n          @if (slot.status === 'done') {\r\n            <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeSlot(slot)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  @if (existingFiles().length && !allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (f of existingFiles(); track f.id) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconForInfo(f) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ f.fileName }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(f.sizeBytes) }}</span>\r\n          </div>\r\n          <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeExisting(f)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  <input #fileInput type=\"file\" [accept]=\"accept()\" multiple class=\"fly-file-upload__hidden\" (change)=\"onFilesSelected($event)\" />\r\n</div>\r\n", 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(--line, #e5e7eb);border-radius:10px;background:var(--bg-3, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent, #0071e3);background:var(--bg-hover, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--ink-4, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--ink-3, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--ink-4, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--danger, #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(--line, #e5e7eb);border-radius:8px;background:var(--bg-3, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--ink-4, #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(--ink, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--ink-4, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--bg-hover, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--success, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--danger, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--ink-4, #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(--danger, #ef4444);background:var(--bg-hover, #f3f4f6)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-file-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fly-file-upload\">\r\n  @if (canAddMore()) {\r\n    <button type=\"button\" class=\"fly-file-upload__dropzone\"\r\n         [class.fly-file-upload__dropzone--drag]=\"dragging()\"\r\n         (click)=\"triggerFileInput()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\"\r\n         (drop)=\"onDrop($event)\">\r\n      <span class=\"pi pi-cloud-upload fly-file-upload__icon\" aria-hidden=\"true\"></span>\r\n      <span class=\"fly-file-upload__label\">{{ 'files.fileUpload.dropOrClick' | translate }}</span>\r\n      <span class=\"fly-file-upload__hint\">{{ limitHint() }}</span>\r\n    </button>\r\n  }\r\n\r\n  @if (error()) {\r\n    <div class=\"fly-file-upload__error\">{{ error() }}</div>\r\n  }\r\n\r\n  @if (allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (slot of allSlots(); track slot.file.name + slot.file.size) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconFor(slot) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ slot.file.name }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(slot.file.size) }}</span>\r\n          </div>\r\n          @if (slot.status === 'uploading') {\r\n            <div class=\"fly-file-upload__progress-track\">\r\n              <div class=\"fly-file-upload__progress-fill\" [style.width.%]=\"slot.progress\"></div>\r\n            </div>\r\n          }\r\n          @if (slot.status === 'error') {\r\n            <span class=\"fly-file-upload__file-error\" [title]=\"slot.error ?? ''\">\r\n              <span class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></span>\r\n            </span>\r\n          }\r\n          @if (slot.status === 'done') {\r\n            <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeSlot(slot)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  @if (existingFiles().length && !allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (f of existingFiles(); track f.id) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconForInfo(f) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ f.fileName }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(f.sizeBytes) }}</span>\r\n          </div>\r\n          <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeExisting(f)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  <input #fileInput type=\"file\" [accept]=\"accept()\" multiple class=\"fly-file-upload__hidden\" (change)=\"onFilesSelected($event)\" />\r\n</div>\r\n", 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"] }]
+            args: [{ selector: 'fly-file-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fly-file-upload\">\r\n  @if (canAddMore()) {\r\n    <button type=\"button\" class=\"fly-file-upload__dropzone\"\r\n         [class.fly-file-upload__dropzone--drag]=\"dragging()\"\r\n         (click)=\"triggerFileInput()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\"\r\n         (drop)=\"onDrop($event)\">\r\n      <span class=\"pi pi-cloud-upload fly-file-upload__icon\" aria-hidden=\"true\"></span>\r\n      <span class=\"fly-file-upload__label\">{{ 'files.fileUpload.dropOrClick' | translate }}</span>\r\n      <span class=\"fly-file-upload__hint\">{{ 'files.fileUpload.limitHint' | translate: limitHintParams() }}</span>\r\n    </button>\r\n  }\r\n\r\n  @if (error()) {\r\n    <div class=\"fly-file-upload__error\">{{ error() }}</div>\r\n  }\r\n\r\n  @if (allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (slot of allSlots(); track slot.file.name + slot.file.size) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconFor(slot) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ slot.file.name }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(slot.file.size) }}</span>\r\n          </div>\r\n          @if (slot.status === 'uploading') {\r\n            <div class=\"fly-file-upload__progress-track\">\r\n              <div class=\"fly-file-upload__progress-fill\" [style.width.%]=\"slot.progress\"></div>\r\n            </div>\r\n          }\r\n          @if (slot.status === 'error') {\r\n            <span class=\"fly-file-upload__file-error\" [title]=\"slot.error ?? ''\">\r\n              <span class=\"pi pi-exclamation-triangle\" aria-hidden=\"true\"></span>\r\n            </span>\r\n          }\r\n          @if (slot.status === 'done') {\r\n            <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          }\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeSlot(slot)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  @if (existingFiles().length && !allSlots().length) {\r\n    <ul class=\"fly-file-upload__list\">\r\n      @for (f of existingFiles(); track f.id) {\r\n        <li class=\"fly-file-upload__item\">\r\n          <span class=\"pi {{ iconForInfo(f) }} fly-file-upload__file-icon\" aria-hidden=\"true\"></span>\r\n          <div class=\"fly-file-upload__file-info\">\r\n            <span class=\"fly-file-upload__file-name\">{{ f.fileName }}</span>\r\n            <span class=\"fly-file-upload__file-size\">{{ formatFileSize(f.sizeBytes) }}</span>\r\n          </div>\r\n          <span class=\"pi pi-check-circle fly-file-upload__file-ok\" aria-hidden=\"true\"></span>\r\n          <button type=\"button\" class=\"fly-file-upload__remove-btn\" (click)=\"removeExisting(f)\" [title]=\"'common.remove' | translate\">\r\n            <span class=\"pi pi-times\" aria-hidden=\"true\"></span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n\r\n  <input #fileInput type=\"file\" [accept]=\"accept()\" multiple class=\"fly-file-upload__hidden\" (change)=\"onFilesSelected($event)\" />\r\n</div>\r\n", 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(--line, #e5e7eb);border-radius:10px;background:var(--bg-3, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent, #0071e3);background:var(--bg-hover, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--ink-4, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--ink-3, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--ink-4, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--danger, #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(--line, #e5e7eb);border-radius:8px;background:var(--bg-3, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--ink-4, #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(--ink, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--ink-4, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--bg-hover, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--success, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--danger, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--ink-4, #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(--danger, #ef4444);background:var(--bg-hover, #f3f4f6)}\n"] }]
         }], 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 }] }] } });
 
 /** Process-wide counter so every instance owns unique element ids (`aria-controls`,
@@ -12768,6 +12964,53 @@ function resolveLinks(deps, renderableIds) {
     }
     return out;
 }
+/** Straight run (px) a dependency elbow travels out of a bar edge before it turns. */
+const LINK_STUB = 12;
+/**
+ * Relationship kind implied by the edge a gesture left and the edge it landed on. The name is
+ * literally `<predecessor endpoint><successor endpoint>`, so this is a lookup, not a rule.
+ */
+function linkTypeFor(from, to) {
+    if (from === 'finish')
+        return to === 'start' ? 'FS' : 'FF';
+    return to === 'start' ? 'SS' : 'SF';
+}
+/**
+ * Route a dependency elbow for any of the four relationship kinds (render space).
+ *
+ * The kind names the two endpoints, so it decides both the anchor x's and the direction the
+ * arrow travels: leaving a *finish* edge moves forward in time, leaving a *start* edge moves
+ * backward; entering a *start* edge approaches from behind, entering a *finish* edge from
+ * ahead. `fwd` folds RTL in, so none of that branches on direction.
+ *
+ * One turn suffices when the entry stub lies ahead of the exit stub in the approach
+ * direction. When it does not — overlapping or reversed bars, which SS/FF/SF hit constantly —
+ * a straight drop would cut back through the bars, so the elbow detours via the gap between
+ * the two rows instead.
+ */
+function routeLink(from, to, type, rtl, rowHeight) {
+    const fwd = rtl ? -1 : 1;
+    const fromFinish = type === 'FS' || type === 'FF';
+    const toStart = type === 'FS' || type === 'SS';
+    const x1 = from.shape === 'milestone' ? from.pointX : fromFinish ? from.endX : from.startX;
+    const x2 = to.shape === 'milestone' ? to.pointX : toStart ? to.startX : to.endX;
+    const y1 = from.midY;
+    const y2 = to.midY;
+    const d1 = (fromFinish ? 1 : -1) * fwd; // exit direction
+    const d2 = (toStart ? 1 : -1) * fwd; // approach direction
+    const exit = x1 + LINK_STUB * d1;
+    const entry = x2 - LINK_STUB * d2;
+    if ((entry - exit) * d2 >= 0) {
+        return { path: `M ${x1} ${y1} H ${exit} V ${y2} H ${x2}`, badgeX: exit, badgeY: (y1 + y2) / 2 };
+    }
+    // Distinct rows always differ in y; the guard only keeps a degenerate input off the bar.
+    const yMid = y1 === y2 ? y1 - rowHeight / 2 : (y1 + y2) / 2;
+    return {
+        path: `M ${x1} ${y1} H ${exit} V ${yMid} H ${entry} V ${y2} H ${x2}`,
+        badgeX: entry,
+        badgeY: yMid,
+    };
+}
 // ── RTL coordinate mapping ───────────────────────────────────────────────────
 /** Mirror a logical x into render space. LTR is identity; RTL reflects about the canvas width. */
 function mapX(logicalX, innerWidth, rtl) {
@@ -12868,6 +13111,257 @@ function weekendBands(domain, zoom, pxPerDay) {
     return bands;
 }
 
+/** Label-pane width bounds (px) the splitter clamps to. */
+const GANTT_LABEL_W_MIN = 140;
+const GANTT_LABEL_W_MAX = 720;
+/** Keyboard resize steps (plain arrow / with Shift). */
+const LABEL_STEP = 16;
+const LABEL_STEP_COARSE = 64;
+/** Clamp any candidate label-pane width into the splitter's range. */
+function clampGanttLabelWidth(px) {
+    return Math.max(GANTT_LABEL_W_MIN, Math.min(GANTT_LABEL_W_MAX, Math.round(px)));
+}
+/**
+ * The Gantt's label-pane divider: width state plus the pointer and keyboard resize gestures.
+ *
+ * ## Why this is not in the component
+ * `fly-gantt` is a large component by nature — it owns a two-pane layout, a time scale, four row
+ * shapes, drag/resize/link gestures and dependency routing. The pane divider is the one region
+ * with *no* coupling to any of that: it needs a direction, a fallback width and somewhere to
+ * report a committed value, and nothing else. Keeping it here means the component's remaining
+ * bulk is all chart, and the divider's RTL rules — which are the subtle part — are stated in one
+ * place and unit-testable without rendering an SVG.
+ *
+ * ## The RTL rule, once
+ * The label pane sits on the inline-START side in both directions, so "drag outward = wider"
+ * flips physical sign with direction, and the arrow key that widens is the one pointing AWAY
+ * from the pane (`ArrowRight` in LTR, `ArrowLeft` in RTL). Both facts are encoded here rather
+ * than at each call site, which is what stops one of the two gestures being mirrored and the
+ * other not — the failure this consolidation exists to prevent.
+ */
+class GanttLabelPane {
+    deps;
+    /** True for the duration of a pointer drag — the host paints a resizing affordance. */
+    resizing = signal(false, ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    /** The user's dragged width, or `null` while the consumer's input is in charge. */
+    _override = signal(null, ...(ngDevMode ? [{ debugName: "_override" }] : /* istanbul ignore next */ []));
+    /** The width to render: the user's drag when present, else the clamped input. */
+    width = computed(() => clampGanttLabelWidth(this._override() ?? this.deps.inputWidth()), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    constructor(deps) {
+        this.deps = deps;
+    }
+    /**
+     * Pointer-drag the divider. Forward-in-time is `+x` LTR and `-x` RTL, and the label pane sits
+     * on the inline-start side in both, so the same sign flip that mirrors the timeline also
+     * mirrors "drag outward = wider".
+     *
+     * Listeners go on `document`, not the divider: a fast drag outruns the 8px-wide handle, and a
+     * pointer that leaves it would otherwise strand the gesture mid-resize.
+     */
+    onPointerDown(ev) {
+        if (!this.deps.resizable() || ev.button !== 0)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        const startClientX = ev.clientX;
+        const startWidth = this.width();
+        const dirSign = this.deps.rtl() ? -1 : 1;
+        this.resizing.set(true);
+        const onMove = (e) => {
+            this._override.set(clampGanttLabelWidth(startWidth + (e.clientX - startClientX) * dirSign));
+        };
+        const onUp = () => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+            this.resizing.set(false);
+            const final = this.width();
+            // Only a width that actually MOVED is committed: a plain click on the divider must not
+            // emit, or a consumer persisting the value would write on every stray press.
+            if (final !== startWidth)
+                this.deps.commit(final);
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        this.deps.destroyRef.onDestroy(() => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        });
+    }
+    /**
+     * Keyboard resize on the focused divider. ArrowRight/Left grow/shrink by the *inline* meaning
+     * of the key, so under RTL the arrow that points away from the pane is still the one that
+     * widens it. `Home`/`End` jump to the bounds, Enter/Escape restore the input width.
+     *
+     * Typed `Event` because Angular's strict template checker types a `(keydown)` `$event` as
+     * `Event`; the cast is done here once rather than at the binding.
+     */
+    onKeydown(ev) {
+        if (!this.deps.resizable())
+            return;
+        const key = ev.key;
+        const coarse = ev.shiftKey;
+        const step = coarse ? LABEL_STEP_COARSE : LABEL_STEP;
+        const rtl = this.deps.rtl();
+        const grow = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const shrink = rtl ? 'ArrowRight' : 'ArrowLeft';
+        let next;
+        if (key === grow)
+            next = this.width() + step;
+        else if (key === shrink)
+            next = this.width() - step;
+        else if (key === 'Home')
+            next = GANTT_LABEL_W_MIN;
+        else if (key === 'End')
+            next = GANTT_LABEL_W_MAX;
+        else if (key === 'Enter' || key === 'Escape') {
+            // Stop the grid-level Enter handler from also activating the selected row.
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.reset();
+            return;
+        }
+        else
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        const clamped = clampGanttLabelWidth(next);
+        // Already at a bound: swallow the key (it was ours) but emit nothing.
+        if (clamped === this.width())
+            return;
+        this._override.set(clamped);
+        this.deps.commit(clamped);
+    }
+    /** Drop the user's dragged width and fall back to the consumer's input width. */
+    reset() {
+        if (this._override() === null)
+            return;
+        this._override.set(null);
+        this.deps.commit(this.width());
+    }
+}
+
+/**
+ * Drawing a dependency by dragging from one end of a bar to another — the gesture, the drop-target
+ * resolution and the resulting relationship type.
+ *
+ * ## Why this is not in the component
+ * `fly-gantt` already owns a two-pane layout, a time scale, four row shapes and bar move/resize.
+ * This is a self-contained second gesture with one output, and its interesting part is a *rule*
+ * rather than any rendering: which end you START on plus which end you DROP nearest decides which
+ * of the four MS-Project relationships you get. Stating that rule beside the hit-testing that
+ * feeds it — rather than in the middle of a 700-line component — is what makes it reviewable.
+ *
+ * ## The selection is here too, and deliberately
+ * `selectedKey` is the link the user has clicked, which is what the delete affordance and the
+ * keyboard's Delete both act on. It lives with the gesture because both are "the user is
+ * manipulating dependencies", and keeping them together stops a click-selection surviving a drag
+ * that replaced the very link it pointed at.
+ */
+class GanttLinkGestures {
+    deps;
+    /** The in-flight drag, or `null`. */
+    gesture = signal(null, ...(ngDevMode ? [{ debugName: "gesture" }] : /* istanbul ignore next */ []));
+    /** The clicked link's key, or `null`. Drives the delete affordance and the Delete key. */
+    selectedKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
+    /** Rubber-band path for the in-flight gesture (render space), or `null` when idle. */
+    path = computed(() => {
+        const g = this.gesture();
+        return g ? `M ${g.x0} ${g.y0} L ${g.x1} ${g.y1}` : null;
+    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    constructor(deps) {
+        this.deps = deps;
+    }
+    /** Clear any link selection — the host calls this when the user selects a row instead. */
+    clearSelection() {
+        this.selectedKey.set(null);
+    }
+    /** Toggle the clicked link's selection. */
+    toggleSelection(key) {
+        this.selectedKey.set(this.selectedKey() === key ? null : key);
+    }
+    /**
+     * Start a link gesture from one end of a bar. Which end it started on, plus which end of the
+     * target row it is dropped nearest to, is what selects the dependency type — so all four
+     * MS-Project relationships are reachable with the same single drag.
+     *
+     * Listeners go on `document`, not the connector: the connector is an 8px dot and any real drag
+     * leaves it immediately.
+     */
+    start(ev, row, anchor) {
+        if (this.deps.readonly() || row.flat.row.readonly || ev.button !== 0)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        const local = this.toBodyPoint(ev.clientX, ev.clientY);
+        const x0 = row.shape === 'milestone' ? row.pointX : anchor === 'finish' ? row.endX : row.startX;
+        this.gesture.set({
+            fromId: row.flat.row.id,
+            anchor,
+            x0,
+            y0: row.midY,
+            x1: local.x,
+            y1: local.y,
+        });
+        const onMove = (e) => {
+            const p = this.toBodyPoint(e.clientX, e.clientY);
+            const g = this.gesture();
+            if (g)
+                this.gesture.set({ ...g, x1: p.x, y1: p.y });
+        };
+        const onUp = (e) => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+            const g = this.gesture();
+            this.gesture.set(null);
+            if (!g)
+                return;
+            const target = this.dropTargetAt(e.clientX, e.clientY);
+            // A row cannot depend on itself; a drop on empty space is simply abandoned.
+            if (target && target.id !== g.fromId) {
+                this.deps.createLink({
+                    fromId: g.fromId,
+                    toId: target.id,
+                    type: linkTypeFor(g.anchor, target.anchor),
+                });
+            }
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        this.deps.destroyRef.onDestroy(() => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        });
+    }
+    /** Convert client coordinates to a point inside the body SVG (render space). */
+    toBodyPoint(clientX, clientY) {
+        const svg = this.deps.bodySvg();
+        if (!svg)
+            return { x: 0, y: 0 };
+        const rect = svg.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+    }
+    /**
+     * The row a link gesture was dropped on **and which of its ends** the drop landed nearest —
+     * the second half of the type derivation. A milestone has no width, so both of its ends are the
+     * same point and it is reported as `start`, giving the FS/SS pair anyone actually wants.
+     */
+    dropTargetAt(clientX, clientY) {
+        const el = document.elementFromPoint(clientX, clientY);
+        const holder = el?.closest('[data-row-id]');
+        const id = holder?.getAttribute('data-row-id');
+        if (!id)
+            return null;
+        const row = this.deps.rows().find((r) => r.flat.row.id === id);
+        if (!row || row.shape === 'milestone' || row.shape === 'empty')
+            return { id, anchor: 'start' };
+        const x = this.toBodyPoint(clientX, clientY).x;
+        return {
+            id,
+            anchor: Math.abs(x - row.endX) < Math.abs(x - row.startX) ? 'finish' : 'start',
+        };
+    }
+}
+
 /** Process-wide counter so each instance owns a unique arrowhead `<marker>` id. */
 let _flyGanttUid = 0;
 /** Header band heights (two-tier: coarse period over fine period). */
@@ -12878,27 +13372,6 @@ const HEADER_H = HEADER_UPPER_H + HEADER_LOWER_H;
 const BAR_V_PAD = 6;
 /** Edge-handle hit width (px) for resize + the link connector radius. */
 const HANDLE_W = 8;
-/** Label-pane width bounds (px) the splitter clamps to. */
-const MIN_LABEL_W = 140;
-const MAX_LABEL_W = 720;
-/** Keyboard resize steps (plain arrow / with Shift). */
-const LABEL_STEP = 16;
-const LABEL_STEP_COARSE = 64;
-/** Straight run (px) a dependency elbow travels out of a bar edge before it turns. */
-const LINK_STUB = 12;
-/** Clamp any candidate label-pane width into the splitter's range. */
-function clampLabelWidth(px) {
-    return Math.max(MIN_LABEL_W, Math.min(MAX_LABEL_W, Math.round(px)));
-}
-/**
- * Relationship kind implied by the edge a gesture left and the edge it landed on. The name is
- * literally `<predecessor endpoint><successor endpoint>`, so this is a lookup, not a rule.
- */
-function linkTypeFor(from, to) {
-    if (from === 'finish')
-        return to === 'start' ? 'FS' : 'FF';
-    return to === 'start' ? 'SS' : 'SF';
-}
 /**
  * **`fly-gantt`** — the design-system SVG Gantt chart.
  *
@@ -12970,22 +13443,16 @@ class FlyGanttComponent {
     HEADER_UPPER_H = HEADER_UPPER_H;
     HEADER_LOWER_H = HEADER_LOWER_H;
     HANDLE_W = HANDLE_W;
-    MIN_LABEL_W = MIN_LABEL_W;
-    MAX_LABEL_W = MAX_LABEL_W;
+    MIN_LABEL_W = GANTT_LABEL_W_MIN;
+    MAX_LABEL_W = GANTT_LABEL_W_MAX;
     // ── Interaction state ─────────────────────────────────────────────────────────
     selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
-    /** Key (`from~to~type`) of the dependency arrow the user has selected, if any. */
-    selectedLinkKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedLinkKey" }] : /* istanbul ignore next */ []));
     _collapsed = signal(new Set(), ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
     /** Live drag preview `{id,start,end}` folded into geometry while a gesture runs. */
     _dragPreview = signal(null, ...(ngDevMode ? [{ debugName: "_dragPreview" }] : /* istanbul ignore next */ []));
-    /** Rubber-band link gesture render-space anchor + cursor, and its origin row + edge. */
-    linkGesture = signal(null, ...(ngDevMode ? [{ debugName: "linkGesture" }] : /* istanbul ignore next */ []));
     dragTooltip = signal(null, ...(ngDevMode ? [{ debugName: "dragTooltip" }] : /* istanbul ignore next */ []));
     /** True while a divider drag is in flight (suppresses text selection host-wide). */
-    resizingLabels = signal(false, ...(ngDevMode ? [{ debugName: "resizingLabels" }] : /* istanbul ignore next */ []));
     /** User-chosen pane width; `null` = still following the {@link labelWidth} input. */
-    _labelWidthOverride = signal(null, ...(ngDevMode ? [{ debugName: "_labelWidthOverride" }] : /* istanbul ignore next */ []));
     bodyRef = viewChild('bodySvg', ...(ngDevMode ? [{ debugName: "bodyRef" }] : /* istanbul ignore next */ []));
     // ── Derived model ──────────────────────────────────────────────────────────────
     rtl = computed(() => this.i18n.isRtl(), ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
@@ -12993,7 +13460,6 @@ class FlyGanttComponent {
     domain = computed(() => computeDomain(this.rows(), this.zoom()), ...(ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []));
     innerWidth = computed(() => Math.max(1, dateToX(this.domain().end, this.domain().start, this.pxPerDay())), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
     /** Label-pane width actually rendered — the user's dragged width, else the input. */
-    effectiveLabelWidth = computed(() => clampLabelWidth(this._labelWidthOverride() ?? this.labelWidth()), ...(ngDevMode ? [{ debugName: "effectiveLabelWidth" }] : /* istanbul ignore next */ []));
     /** Full visible list after tree flatten/collapse. */
     _flat = computed(() => flattenRows(this.rows(), this._collapsed()), ...(ngDevMode ? [{ debugName: "_flat" }] : /* istanbul ignore next */ []));
     /** Capped list actually rendered. */
@@ -13095,7 +13561,7 @@ class FlyGanttComponent {
             const to = vmById.get(link.toId);
             if (!from || !to)
                 continue;
-            const routed = this._route(from, to, link.type, rtl);
+            const routed = routeLink(from, to, link.type, rtl, this.rowHeight());
             out.push({
                 key: `${link.fromId}~${link.toId}~${link.type}`,
                 fromId: link.fromId,
@@ -13151,85 +13617,31 @@ class FlyGanttComponent {
     }
     // ── Label-pane divider ─────────────────────────────────────────────────────────
     /**
-     * Pointer-drag the divider. Forward-in-time is `+x` LTR and `-x` RTL, and the label pane sits
-     * on the inline-start side in both, so the same sign flip that mirrors the timeline also
-     * mirrors "drag outward = wider".
+     * The divider's own state machine, in {@link GanttLabelPane}. It is composed rather than
+     * inlined because it is the one region of this component with no coupling to the chart: give it
+     * a direction, a fallback width and somewhere to report a committed value and it is complete.
+     * The subtle part — that "wider" flips physical sign under RTL for BOTH the drag and the arrow
+     * keys — is stated once there instead of twice here.
      */
+    _labelPane = new GanttLabelPane({
+        resizable: this.resizableLabels,
+        rtl: this.rtl,
+        inputWidth: this.labelWidth,
+        commit: (width) => this.labelWidthChange.emit(width),
+        destroyRef: this.destroyRef,
+    });
+    /** Painted width of the label pane — the user's dragged value, else the clamped input. */
+    effectiveLabelWidth = this._labelPane.width;
+    /** True mid-drag; drives the host's resizing cursor/affordance. */
+    resizingLabels = this._labelPane.resizing;
     onLabelResizePointerDown(ev) {
-        if (!this.resizableLabels() || ev.button !== 0)
-            return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        const startClientX = ev.clientX;
-        const startWidth = this.effectiveLabelWidth();
-        const dirSign = this.rtl() ? -1 : 1;
-        this.resizingLabels.set(true);
-        const onMove = (e) => {
-            this._labelWidthOverride.set(clampLabelWidth(startWidth + (e.clientX - startClientX) * dirSign));
-        };
-        const onUp = () => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-            this.resizingLabels.set(false);
-            const final = this.effectiveLabelWidth();
-            if (final !== startWidth)
-                this.labelWidthChange.emit(final);
-        };
-        document.addEventListener('pointermove', onMove);
-        document.addEventListener('pointerup', onUp);
-        this.destroyRef.onDestroy(() => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-        });
+        this._labelPane.onPointerDown(ev);
     }
-    /**
-     * Keyboard resize on the focused divider. ArrowRight/Left grow/shrink by the *inline* meaning
-     * of the key, so under RTL the arrow that points away from the pane is still the one that
-     * widens it. `Home`/`End` jump to the bounds, Enter/Escape restore the input width.
-     *
-     * Typed `Event` for the same reason as {@link onLabelRowKeydown}: Angular's strict template
-     * checker types `(keydown)` `$event` as `Event`, so the cast is done here once.
-     */
     onLabelResizeKeydown(ev) {
-        if (!this.resizableLabels())
-            return;
-        const key = ev.key;
-        const coarse = ev.shiftKey;
-        const step = coarse ? LABEL_STEP_COARSE : LABEL_STEP;
-        const grow = this.rtl() ? 'ArrowLeft' : 'ArrowRight';
-        const shrink = this.rtl() ? 'ArrowRight' : 'ArrowLeft';
-        let next;
-        if (key === grow)
-            next = this.effectiveLabelWidth() + step;
-        else if (key === shrink)
-            next = this.effectiveLabelWidth() - step;
-        else if (key === 'Home')
-            next = MIN_LABEL_W;
-        else if (key === 'End')
-            next = MAX_LABEL_W;
-        else if (key === 'Enter' || key === 'Escape') {
-            // Stop the grid-level Enter handler from also activating the selected row.
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.resetLabelWidth();
-            return;
-        }
-        else
-            return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        const clamped = clampLabelWidth(next);
-        if (clamped === this.effectiveLabelWidth())
-            return;
-        this._labelWidthOverride.set(clamped);
-        this.labelWidthChange.emit(clamped);
+        this._labelPane.onKeydown(ev);
     }
-    /** Drop the user's dragged width and fall back to the {@link labelWidth} input. */
     resetLabelWidth() {
-        if (this._labelWidthOverride() === null)
-            return;
-        this._labelWidthOverride.set(null);
-        this.labelWidthChange.emit(this.effectiveLabelWidth());
+        this._labelPane.reset();
     }
     // ── Group collapse ─────────────────────────────────────────────────────────────
     isCollapsed(id) {
@@ -13260,7 +13672,7 @@ class FlyGanttComponent {
         this.selectedId.set(id);
         // A row and a link are alternative selections — picking one drops the other, so Delete is
         // never ambiguous about which thing it would remove.
-        this.selectedLinkKey.set(null);
+        this._links.clearSelection();
         this.rowClick.emit(id);
     }
     onRowDblClick(id) {
@@ -13269,14 +13681,14 @@ class FlyGanttComponent {
     // ── Dependency arrow selection + removal ───────────────────────────────────────
     onLinkClick(ev, vm) {
         ev.stopPropagation();
-        this.selectedLinkKey.set(this.selectedLinkKey() === vm.key ? null : vm.key);
+        this._links.toggleSelection(vm.key);
     }
     deleteLink(ev, vm) {
         ev.stopPropagation();
         ev.preventDefault();
         if (this.readonly())
             return;
-        this.selectedLinkKey.set(null);
+        this._links.clearSelection();
         this.dependencyDelete.emit({ fromId: vm.fromId, toId: vm.toId, type: vm.type });
     }
     // ── Keyboard ───────────────────────────────────────────────────────────────────
@@ -13413,54 +13825,27 @@ class FlyGanttComponent {
     }
     // ── Pointer drag: dependency create ──────────────────────────────────────────────
     /**
-     * Start a link gesture from one end of a bar. Which end it started on, plus which end of the
-     * target row it is dropped nearest to, is what selects the {@link GanttDependencyType} — so all
-     * four MS-Project relationships are reachable with the same single drag.
+     * The dependency-drawing gesture, in {@link GanttLinkGestures}. Composed rather than inlined
+     * because it is a self-contained second gesture whose interesting part is a RULE — the end you
+     * start on plus the end you drop nearest, selects the relationship type — which reads far better beside
+     * its own hit-testing than in the middle of this component.
      */
+    _links = new GanttLinkGestures({
+        readonly: this.readonly,
+        rows: this.rowVms,
+        bodySvg: () => this.bodyRef()?.nativeElement ?? null,
+        createLink: (dependency) => this.dependencyCreate.emit(dependency),
+        destroyRef: this.destroyRef,
+    });
+    /** Key (`from~to~type`) of the dependency arrow the user has selected, if any. */
+    selectedLinkKey = this._links.selectedKey;
+    /** The in-flight rubber-band gesture, or `null` — the template draws it when present. */
+    linkGesture = this._links.gesture;
+    /** Rubber-band path for an in-flight link gesture (render space). */
+    linkGesturePath = this._links.path;
     onLinkPointerDown(ev, vm, anchor) {
-        if (this.readonly() || vm.flat.row.readonly || ev.button !== 0)
-            return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        const local = this._toBodyPoint(ev);
-        const x0 = vm.shape === 'milestone' ? vm.pointX : anchor === 'finish' ? vm.endX : vm.startX;
-        this.linkGesture.set({ fromId: vm.flat.row.id, anchor, x0, y0: vm.midY, x1: local.x, y1: local.y });
-        const onMove = (e) => {
-            const p = this._toBodyPoint(e);
-            const g = this.linkGesture();
-            if (g)
-                this.linkGesture.set({ ...g, x1: p.x, y1: p.y });
-        };
-        const onUp = (e) => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-            const g = this.linkGesture();
-            this.linkGesture.set(null);
-            if (!g)
-                return;
-            const target = this._dropTargetAt(e.clientX, e.clientY);
-            if (target && target.id !== g.fromId) {
-                this.dependencyCreate.emit({
-                    fromId: g.fromId,
-                    toId: target.id,
-                    type: linkTypeFor(g.anchor, target.anchor),
-                });
-            }
-        };
-        document.addEventListener('pointermove', onMove);
-        document.addEventListener('pointerup', onUp);
-        this.destroyRef.onDestroy(() => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-        });
+        this._links.start(ev, vm, anchor);
     }
-    /** Rubber-band path for an in-flight link gesture (render space). */
-    linkGesturePath = computed(() => {
-        const g = this.linkGesture();
-        if (!g)
-            return null;
-        return `M ${g.x0} ${g.y0} L ${g.x1} ${g.y1}`;
-    }, ...(ngDevMode ? [{ debugName: "linkGesturePath" }] : /* istanbul ignore next */ []));
     // ── Internals ────────────────────────────────────────────────────────────────────
     /**
      * Resolve a row's `backgroundColor` into the low-alpha band colour actually painted.
@@ -13481,70 +13866,6 @@ class FlyGanttComponent {
         // Reflect each cell: its inline-start edge becomes innerWidth - (x + width).
         return ticks.map((t) => ({ ...t, x: w - t.x - t.width }));
     }
-    /**
-     * Route a dependency elbow for any of the four relationship kinds (render space).
-     *
-     * The kind names the two endpoints, so it decides both the anchor x's and the direction the
-     * arrow travels: leaving a *finish* edge moves forward in time, leaving a *start* edge moves
-     * backward; entering a *start* edge approaches from behind, entering a *finish* edge from
-     * ahead. `fwd` folds RTL in, so none of that branches on direction.
-     *
-     * One turn suffices when the entry stub lies ahead of the exit stub in the approach
-     * direction. When it does not — overlapping or reversed bars, which SS/FF/SF hit constantly —
-     * a straight drop would cut back through the bars, so the elbow detours via the gap between
-     * the two rows instead.
-     */
-    _route(from, to, type, rtl) {
-        const fwd = rtl ? -1 : 1;
-        const fromFinish = type === 'FS' || type === 'FF';
-        const toStart = type === 'FS' || type === 'SS';
-        const x1 = from.shape === 'milestone' ? from.pointX : fromFinish ? from.endX : from.startX;
-        const x2 = to.shape === 'milestone' ? to.pointX : toStart ? to.startX : to.endX;
-        const y1 = from.midY;
-        const y2 = to.midY;
-        const d1 = (fromFinish ? 1 : -1) * fwd; // exit direction
-        const d2 = (toStart ? 1 : -1) * fwd; // approach direction
-        const exit = x1 + LINK_STUB * d1;
-        const entry = x2 - LINK_STUB * d2;
-        if ((entry - exit) * d2 >= 0) {
-            return { path: `M ${x1} ${y1} H ${exit} V ${y2} H ${x2}`, badgeX: exit, badgeY: (y1 + y2) / 2 };
-        }
-        // Distinct rows always differ in y; the guard only keeps a degenerate input off the bar.
-        const yMid = y1 === y2 ? y1 - this.rowHeight() / 2 : (y1 + y2) / 2;
-        return {
-            path: `M ${x1} ${y1} H ${exit} V ${yMid} H ${entry} V ${y2} H ${x2}`,
-            badgeX: entry,
-            badgeY: yMid,
-        };
-    }
-    /** Convert a pointer event to a coordinate inside the body SVG (render space). */
-    _toBodyPoint(ev) {
-        const svg = this.bodyRef()?.nativeElement;
-        if (!svg)
-            return { x: 0, y: 0 };
-        const rect = svg.getBoundingClientRect();
-        return { x: ev.clientX - rect.left, y: ev.clientY - rect.top };
-    }
-    /**
-     * The row a link gesture was dropped on **and which of its ends** the drop landed nearest —
-     * the second half of the type derivation. A milestone has no width, so both of its ends are
-     * the same point and it is reported as `start`, giving the FS/SS pair anyone actually wants.
-     */
-    _dropTargetAt(clientX, clientY) {
-        const el = document.elementFromPoint(clientX, clientY);
-        const holder = el?.closest('[data-row-id]');
-        const id = holder?.getAttribute('data-row-id');
-        if (!id)
-            return null;
-        const vm = this.rowVms().find((v) => v.flat.row.id === id);
-        if (!vm || vm.shape === 'milestone' || vm.shape === 'empty')
-            return { id, anchor: 'start' };
-        const x = this._toBodyPoint({ clientX, clientY }).x;
-        return {
-            id,
-            anchor: Math.abs(x - vm.endX) < Math.abs(x - vm.startX) ? 'finish' : 'start',
-        };
-    }
     _ariaFor(row, start, end, shape) {
         const t = (k, p) => this.i18n.t(k, p);
         if (shape === 'milestone') {
@@ -19349,6 +19670,294 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: [FlyTypeaheadComponent]
             }] } });
 
+/** The platform endpoint the component falls back to. Relative — the host's gateway + auth interceptors apply. */
+const FLY_STRATEGY_OBJECTIVES_LOOKUP_ENDPOINT = '/api/strategies/objectives/lookup';
+/**
+ * Tolerant unwrap of the `ApiResponse<List<ObjectiveLookupDto>>` envelope. Anything that
+ * doesn't parse degrades to an empty list — a picker must degrade to "no options", never throw.
+ */
+function flyUnwrapObjectiveLookup(res) {
+    const data = res?.data;
+    if (!Array.isArray(data))
+        return [];
+    return data.filter((r) => !!r && typeof r.id === 'string' &&
+        typeof r.title === 'string');
+}
+/**
+ * **`fly-strategy-selector`** — pick ONE strategic objective from the Strategies
+ * app, so any Core or External App can optionally link its own entity (a
+ * programme, an initiative, a budget line) to the strategy it serves.
+ *
+ * Pre-canned for the Strategies app's cross-strategy objective lookup
+ * (`GET /api/strategies/objectives/lookup?q=`, `ObjectiveLookupDto` — only
+ * StrategicObjective items on the PUBLISHED version of an Active strategy
+ * surface there): with no data inputs it queries that endpoint itself through
+ * the host's `HttpClient`, so gateway routing and the auth interceptor apply
+ * and a consuming app writes one tag and nothing else. A host that must not
+ * reach the platform directly supplies `[searchFn]` instead — the same
+ * transport-agnostic escape hatch `fly-people-picker` and
+ * `fly-currency-selector` offer.
+ *
+ * A bespoke panel (own search box + floating results box), not a wrapped
+ * `fly-typeahead` — a flat list can't show which strategy an objective belongs
+ * to, and two strategies routinely share near-identical objective titles.
+ * Results are grouped into contiguous {@link FlyStrategyObjectiveGroup} runs
+ * with the parent strategy's own icon as the group header, mirroring
+ * `fly-currency-selector`'s pinned/all group pattern.
+ *
+ * Single-select by design (an entity serves ONE objective link here; a many-
+ * to-many mapping is a matrix surface, not a form field) and built for
+ * OPTIONAL fields: the empty state is a search box, a pick renders as a
+ * removable chip (objective title + parent strategy secondary line), and
+ * {@link selectionChange} emits `null` on removal.
+ *
+ * Emits the full {@link FlyStrategyObjectiveRef}, not just the id: the
+ * consumer freezes the label at link time (the cross-app reference canon —
+ * the link must stay renderable even when the strategy is later archived or
+ * the caller can no longer read it).
+ *
+ * For an edit surface, feed {@link initialSelection} with the saved ref (the
+ * consumer's own frozen copy — no re-resolve round-trip needed). Seeding never
+ * emits {@link selectionChange}, so loading a form does not mark it dirty.
+ *
+ * i18n is self-sufficient through the `strategy_selector.*` keys in
+ * `DS_BASELINE_LOCALES` (en/ar/fr/ur). RTL works via logical CSS.
+ *
+ * @example
+ * ```html
+ * <!-- Queries /api/strategies/objectives/lookup itself: -->
+ * <fly-strategy-selector (selectionChange)="onObjectivePicked($event)" />
+ *
+ * <!-- Edit surface, seeded from the host's frozen ref: -->
+ * <fly-strategy-selector
+ *   [initialSelection]="savedObjectiveRef()"
+ *   (selectionChange)="onObjectiveChanged($event)" />
+ * ```
+ */
+class FlyStrategySelectorComponent {
+    http = inject(HttpClient, { optional: true });
+    // ── Inputs ───────────────────────────────────────────────────────────────────
+    /** Host-supplied loader. Omit to fall back to `GET /api/strategies/objectives/lookup`. */
+    searchFn = input(null, ...(ngDevMode ? [{ debugName: "searchFn" }] : /* istanbul ignore next */ []));
+    /** Saved ref to seed an edit surface with — rendered as the picked chip. Seeded ONCE, on the
+     *  first non-null value (a host's load typically lands after construction); later input changes
+     *  are ignored so a re-emitting load can't clobber the user's in-progress edit. Seeding does NOT
+     *  emit {@link selectionChange}. */
+    initialSelection = input(null, ...(ngDevMode ? [{ debugName: "initialSelection" }] : /* istanbul ignore next */ []));
+    /** Placeholder for the search box. Falls back to the localized `strategy_selector.search_placeholder`. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Debounce (ms) between the last keystroke and the search call. */
+    debounceMs = input(250, ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──────────────────────────────────────────────────────────────────
+    /** The picked objective in full (label freezable by the host), or `null` when removed. */
+    selectionChange = output();
+    searchEl;
+    host = inject((ElementRef));
+    // ── State ────────────────────────────────────────────────────────────────────
+    _selected = signal(null, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loadFailed = signal(false, ...(ngDevMode ? [{ debugName: "loadFailed" }] : /* istanbul ignore next */ []));
+    /** The most recent search batch, already ordered strategy-first by the server/mock. */
+    _results = signal([], ...(ngDevMode ? [{ debugName: "_results" }] : /* istanbul ignore next */ []));
+    _searchStarted = false;
+    /** One-shot latch: flips true after {@link initialSelection} has seeded the chip. */
+    _seeded = false;
+    _timer = null;
+    _searchSub = null;
+    constructor() {
+        effect(() => {
+            const init = this.initialSelection();
+            if (this._seeded || init === null)
+                return;
+            this._seeded = true;
+            this._selected.set(init);
+        });
+    }
+    selected = this._selected.asReadonly();
+    showSearch = computed(() => this._selected() === null, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** {@link _results} folded into contiguous per-strategy runs — the panel's drilldown grouping.
+     *  Also doubles as the flat keyboard-navigation order (a group header is never itself an option,
+     *  so nav index N always resolves via {@link navOptions}, not a per-group offset). */
+    groups = computed(() => {
+        const rows = this._results();
+        const out = [];
+        for (const r of rows) {
+            const last = out[out.length - 1];
+            if (last && last.strategyId === r.strategyId)
+                last.items.push(r);
+            else {
+                out.push({
+                    strategyId: r.strategyId,
+                    strategyTitle: r.strategyTitle,
+                    strategyIcon: r.strategyIcon ?? null,
+                    items: [r],
+                });
+            }
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    navOptions = computed(() => this._results(), ...(ngDevMode ? [{ debugName: "navOptions" }] : /* istanbul ignore next */ []));
+    navIndexOf(id) {
+        return this.navOptions().findIndex((r) => r.id === id);
+    }
+    activeDescendant = computed(() => {
+        const options = this.navOptions();
+        if (!this.isOpen() || options.length === 0)
+            return '';
+        return this.optionId(Math.min(this.activeIndex(), options.length - 1));
+    }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    optionId(index) {
+        return `fly-strategy-selector-opt-${index}`;
+    }
+    // ── Open / close ───────────────────────────────────────────────────────────
+    open() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.activeIndex.set(0);
+        // Surface the "top N" once per mount; don't re-hit the server on every refocus.
+        if (!this._searchStarted)
+            this._runSearch(this.searchTerm());
+        queueMicrotask(() => this.searchEl?.nativeElement.focus());
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+    }
+    onSearchInput(value) {
+        this.searchTerm.set(value);
+        this.activeIndex.set(0);
+        this.isOpen.set(true);
+        this._scheduleSearch(value.trim());
+    }
+    // ── Keyboard ───────────────────────────────────────────────────────────────
+    onPanelKeydown(event) {
+        const options = this.navOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.isOpen.set(true);
+                if (options.length > 0)
+                    this.activeIndex.set((this.activeIndex() + 1) % options.length);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (options.length > 0) {
+                    this.activeIndex.set((this.activeIndex() - 1 + options.length) % options.length);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activeIndex.set(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activeIndex.set(Math.max(0, options.length - 1));
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const active = options[this.activeIndex()];
+                if (active)
+                    this.pick(active);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            default:
+                break;
+        }
+    }
+    onOptionHover(index) {
+        if (index !== this.activeIndex())
+            this.activeIndex.set(index);
+    }
+    // ── Click-outside ────────────────────────────────────────────────────────────
+    onDocumentMouseDown(ev) {
+        if (!this.isOpen())
+            return;
+        const target = ev.target;
+        if (target && this.host.nativeElement.contains(target))
+            return;
+        this.close();
+    }
+    // ── Search ───────────────────────────────────────────────────────────────────
+    retry() {
+        this._runSearch(this.searchTerm());
+    }
+    _scheduleSearch(q) {
+        this._clearTimer();
+        this._timer = setTimeout(() => this._runSearch(q), this.debounceMs());
+    }
+    _clearTimer() {
+        if (this._timer !== null) {
+            clearTimeout(this._timer);
+            this._timer = null;
+        }
+    }
+    _runSearch(q) {
+        this._clearTimer();
+        this._searchSub?.unsubscribe();
+        this._searchStarted = true;
+        this.loading.set(true);
+        this.loadFailed.set(false);
+        this._searchSub = this._search(q)
+            .pipe(catchError(() => of(null)))
+            .subscribe((rows) => {
+            this.loading.set(false);
+            if (rows === null) {
+                this.loadFailed.set(true);
+                this._results.set([]);
+                return;
+            }
+            this._results.set(rows);
+            this.activeIndex.set(0);
+        });
+    }
+    _search(query) {
+        const fetch = this.searchFn();
+        if (fetch)
+            return fetch(query);
+        // No loader and no transport: degrade to "no options" — a picker must never throw
+        // mid-keystroke. (Only reachable in a host without provideHttpClient and without [searchFn].)
+        if (!this.http)
+            return of([]);
+        return this.http
+            .get(FLY_STRATEGY_OBJECTIVES_LOOKUP_ENDPOINT, { params: { q: query, limit: 10 } })
+            .pipe(map(flyUnwrapObjectiveLookup));
+    }
+    // ── Selection ────────────────────────────────────────────────────────────────
+    pick(ref) {
+        this._selected.set(ref);
+        this.selectionChange.emit(ref);
+        this.close();
+        this.searchTerm.set('');
+        this._results.set([]);
+        this._searchStarted = false;
+    }
+    remove() {
+        this._selected.set(null);
+        this.selectionChange.emit(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyStrategySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyStrategySelectorComponent, isStandalone: true, selector: "fly-strategy-selector", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" }, properties: { "class.fly-strategy-selector--open": "isOpen()" }, classAttribute: "fly-strategy-selector" }, viewQueries: [{ propertyName: "searchEl", first: true, predicate: ["searchRef"], descendants: true }], ngImport: i0, template: "@if (selected(); as pick) {\r\n  <div class=\"fly-strategy-selector__chip\" role=\"group\" [attr.aria-label]=\"pick.title\">\r\n    <span class=\"fly-strategy-selector__chip-icon\" aria-hidden=\"true\">\r\n      @if (pick.strategyIcon) {\r\n        <i class=\"pi {{ pick.strategyIcon }}\"></i>\r\n      } @else {\r\n        <i class=\"pi pi-compass\"></i>\r\n      }\r\n    </span>\r\n    <span class=\"fly-strategy-selector__chip-body\">\r\n      <span class=\"fly-strategy-selector__chip-title\" [title]=\"pick.title\">{{ pick.title }}</span>\r\n      <span class=\"fly-strategy-selector__chip-strategy\" [title]=\"pick.strategyTitle\">{{ pick.strategyTitle }}</span>\r\n    </span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-strategy-selector__chip-remove\"\r\n      [attr.aria-label]=\"'strategy_selector.remove' | translate: { name: pick.title }\"\r\n      (click)=\"remove()\">\r\n      \u2715\r\n    </button>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"fly-strategy-selector__wrap\"\r\n    [flyClickOutsideEnabled]=\"isOpen()\"\r\n    (flyClickOutside)=\"close()\"\r\n  >\r\n    <input\r\n      #searchRef\r\n      type=\"text\"\r\n      class=\"fly-strategy-selector__search-input\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      aria-controls=\"fly-strategy-selector-listbox\"\r\n      [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n      [attr.aria-label]=\"placeholder() || ('strategy_selector.search_placeholder' | translate)\"\r\n      [placeholder]=\"placeholder() || ('strategy_selector.search_placeholder' | translate)\"\r\n      [value]=\"searchTerm()\"\r\n      (focus)=\"open()\"\r\n      (input)=\"onSearchInput($any($event.target).value)\"\r\n      (keydown)=\"onPanelKeydown($event)\"\r\n    />\r\n\r\n    @if (isOpen()) {\r\n      <div class=\"fly-strategy-selector__panel\">\r\n        <div\r\n          class=\"fly-strategy-selector__listbox\"\r\n          role=\"listbox\"\r\n          id=\"fly-strategy-selector-listbox\"\r\n          [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"fly-strategy-selector__status\" role=\"status\">\r\n              {{ 'strategy_selector.loading' | translate }}\r\n            </div>\r\n          } @else if (loadFailed()) {\r\n            <div class=\"fly-strategy-selector__status fly-strategy-selector__status--error\" role=\"alert\">\r\n              <span>{{ 'strategy_selector.error' | translate }}</span>\r\n              <button type=\"button\" class=\"fly-strategy-selector__retry\" (click)=\"retry()\">\r\n                {{ 'strategy_selector.retry' | translate }}\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            @for (group of groups(); track group.strategyId) {\r\n              <div class=\"fly-strategy-selector__group\" role=\"presentation\">\r\n                <i class=\"pi {{ group.strategyIcon || 'pi-compass' }}\" aria-hidden=\"true\"></i>\r\n                <span class=\"fly-strategy-selector__group-title\">{{ group.strategyTitle }}</span>\r\n              </div>\r\n              @for (item of group.items; track item.id) {\r\n                <div\r\n                  class=\"fly-strategy-selector__option\"\r\n                  role=\"option\"\r\n                  tabindex=\"-1\"\r\n                  [id]=\"optionId(navIndexOf(item.id))\"\r\n                  [attr.aria-selected]=\"false\"\r\n                  [class.fly-strategy-selector__option--active]=\"navIndexOf(item.id) === activeIndex()\"\r\n                  (click)=\"pick(item)\"\r\n                  (keydown.enter)=\"pick(item)\"\r\n                  (mouseenter)=\"onOptionHover(navIndexOf(item.id))\"\r\n                >\r\n                  <span class=\"fly-strategy-selector__option-title\">{{ item.title }}</span>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (groups().length === 0) {\r\n              <div class=\"fly-strategy-selector__status\" role=\"presentation\">\r\n                {{ 'strategy_selector.no_results' | translate }}\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{--_surface: var(--surface-card, #fff);--_surface-panel: var(--glass-bg-elevated, var(--surface-card, #fff));--_panel-blur: var(--glass-blur, 40px);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_surface-hover: var(--surface-hover, #f1f5f9);--_accent: var(--accent);--_primary: var(--primary-color, var(--_accent));--_danger: var(--system-red, #ef4444);--_radius: 8px;display:block;inline-size:100%;color:var(--_text);font-size:13px}:host,:host *,:host *:before,:host *:after{box-sizing:border-box}.fly-strategy-selector__chip{display:flex;align-items:center;gap:8px;padding-block:5px;padding-inline:8px;border:1px solid var(--_border);border-radius:10px;background:var(--_fill);max-inline-size:100%}.fly-strategy-selector__chip-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:22px;block-size:22px;border-radius:50%;background:color-mix(in srgb,var(--_accent, var(--_text-subtle)) 14%,transparent);color:var(--_accent, var(--_text-subtle));font-size:12px;line-height:1}.fly-strategy-selector__chip-body{display:flex;flex-direction:column;min-inline-size:0;flex:1}.fly-strategy-selector__chip-title{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__chip-strategy{font-size:11px;color:var(--_text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__chip-remove{border:none;background:transparent;padding:4px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-strategy-selector__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-strategy-selector__wrap{position:relative;inline-size:100%}.fly-strategy-selector__search-input{inline-size:100%;min-block-size:2.25rem;padding-block:5px;padding-inline:10px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit}.fly-strategy-selector__search-input:focus-visible{outline:2px solid var(--_primary);outline-offset:-1px}.fly-strategy-selector__panel{position:absolute;z-index:60;inset-inline:0;inset-block-start:calc(100% + 4px);display:flex;flex-direction:column;max-block-size:19rem;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface-panel);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));box-shadow:0 12px 32px #0000002e;overflow:hidden}.fly-strategy-selector__listbox{flex:1 1 auto;overflow-y:auto;padding-block:4px}.fly-strategy-selector__group{display:flex;align-items:center;gap:6px;padding-block:6px 3px;padding-inline:10px;color:var(--_text-subtle);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.fly-strategy-selector__group .pi{font-size:11px}.fly-strategy-selector__group-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__option{padding-block:6px;padding-inline:26px 10px;cursor:pointer}.fly-strategy-selector__option--active{background:var(--_surface-hover)}.fly-strategy-selector__option-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__status{display:flex;align-items:center;gap:8px;padding-block:10px;padding-inline:10px;color:var(--_text-subtle)}.fly-strategy-selector__status--error{color:var(--_danger)}.fly-strategy-selector__retry{border:1px solid var(--_border);border-radius:6px;background:var(--_surface);padding-block:2px;padding-inline:8px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled", "flyClickOutsideIgnore"], outputs: ["flyClickOutside"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyStrategySelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-strategy-selector', standalone: true, imports: [CommonModule, TranslatePipe, FlyClickOutsideDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-strategy-selector', '[class.fly-strategy-selector--open]': 'isOpen()' }, template: "@if (selected(); as pick) {\r\n  <div class=\"fly-strategy-selector__chip\" role=\"group\" [attr.aria-label]=\"pick.title\">\r\n    <span class=\"fly-strategy-selector__chip-icon\" aria-hidden=\"true\">\r\n      @if (pick.strategyIcon) {\r\n        <i class=\"pi {{ pick.strategyIcon }}\"></i>\r\n      } @else {\r\n        <i class=\"pi pi-compass\"></i>\r\n      }\r\n    </span>\r\n    <span class=\"fly-strategy-selector__chip-body\">\r\n      <span class=\"fly-strategy-selector__chip-title\" [title]=\"pick.title\">{{ pick.title }}</span>\r\n      <span class=\"fly-strategy-selector__chip-strategy\" [title]=\"pick.strategyTitle\">{{ pick.strategyTitle }}</span>\r\n    </span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-strategy-selector__chip-remove\"\r\n      [attr.aria-label]=\"'strategy_selector.remove' | translate: { name: pick.title }\"\r\n      (click)=\"remove()\">\r\n      \u2715\r\n    </button>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"fly-strategy-selector__wrap\"\r\n    [flyClickOutsideEnabled]=\"isOpen()\"\r\n    (flyClickOutside)=\"close()\"\r\n  >\r\n    <input\r\n      #searchRef\r\n      type=\"text\"\r\n      class=\"fly-strategy-selector__search-input\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      aria-controls=\"fly-strategy-selector-listbox\"\r\n      [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n      [attr.aria-label]=\"placeholder() || ('strategy_selector.search_placeholder' | translate)\"\r\n      [placeholder]=\"placeholder() || ('strategy_selector.search_placeholder' | translate)\"\r\n      [value]=\"searchTerm()\"\r\n      (focus)=\"open()\"\r\n      (input)=\"onSearchInput($any($event.target).value)\"\r\n      (keydown)=\"onPanelKeydown($event)\"\r\n    />\r\n\r\n    @if (isOpen()) {\r\n      <div class=\"fly-strategy-selector__panel\">\r\n        <div\r\n          class=\"fly-strategy-selector__listbox\"\r\n          role=\"listbox\"\r\n          id=\"fly-strategy-selector-listbox\"\r\n          [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"fly-strategy-selector__status\" role=\"status\">\r\n              {{ 'strategy_selector.loading' | translate }}\r\n            </div>\r\n          } @else if (loadFailed()) {\r\n            <div class=\"fly-strategy-selector__status fly-strategy-selector__status--error\" role=\"alert\">\r\n              <span>{{ 'strategy_selector.error' | translate }}</span>\r\n              <button type=\"button\" class=\"fly-strategy-selector__retry\" (click)=\"retry()\">\r\n                {{ 'strategy_selector.retry' | translate }}\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            @for (group of groups(); track group.strategyId) {\r\n              <div class=\"fly-strategy-selector__group\" role=\"presentation\">\r\n                <i class=\"pi {{ group.strategyIcon || 'pi-compass' }}\" aria-hidden=\"true\"></i>\r\n                <span class=\"fly-strategy-selector__group-title\">{{ group.strategyTitle }}</span>\r\n              </div>\r\n              @for (item of group.items; track item.id) {\r\n                <div\r\n                  class=\"fly-strategy-selector__option\"\r\n                  role=\"option\"\r\n                  tabindex=\"-1\"\r\n                  [id]=\"optionId(navIndexOf(item.id))\"\r\n                  [attr.aria-selected]=\"false\"\r\n                  [class.fly-strategy-selector__option--active]=\"navIndexOf(item.id) === activeIndex()\"\r\n                  (click)=\"pick(item)\"\r\n                  (keydown.enter)=\"pick(item)\"\r\n                  (mouseenter)=\"onOptionHover(navIndexOf(item.id))\"\r\n                >\r\n                  <span class=\"fly-strategy-selector__option-title\">{{ item.title }}</span>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (groups().length === 0) {\r\n              <div class=\"fly-strategy-selector__status\" role=\"presentation\">\r\n                {{ 'strategy_selector.no_results' | translate }}\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{--_surface: var(--surface-card, #fff);--_surface-panel: var(--glass-bg-elevated, var(--surface-card, #fff));--_panel-blur: var(--glass-blur, 40px);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_surface-hover: var(--surface-hover, #f1f5f9);--_accent: var(--accent);--_primary: var(--primary-color, var(--_accent));--_danger: var(--system-red, #ef4444);--_radius: 8px;display:block;inline-size:100%;color:var(--_text);font-size:13px}:host,:host *,:host *:before,:host *:after{box-sizing:border-box}.fly-strategy-selector__chip{display:flex;align-items:center;gap:8px;padding-block:5px;padding-inline:8px;border:1px solid var(--_border);border-radius:10px;background:var(--_fill);max-inline-size:100%}.fly-strategy-selector__chip-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:22px;block-size:22px;border-radius:50%;background:color-mix(in srgb,var(--_accent, var(--_text-subtle)) 14%,transparent);color:var(--_accent, var(--_text-subtle));font-size:12px;line-height:1}.fly-strategy-selector__chip-body{display:flex;flex-direction:column;min-inline-size:0;flex:1}.fly-strategy-selector__chip-title{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__chip-strategy{font-size:11px;color:var(--_text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__chip-remove{border:none;background:transparent;padding:4px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-strategy-selector__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-strategy-selector__wrap{position:relative;inline-size:100%}.fly-strategy-selector__search-input{inline-size:100%;min-block-size:2.25rem;padding-block:5px;padding-inline:10px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit}.fly-strategy-selector__search-input:focus-visible{outline:2px solid var(--_primary);outline-offset:-1px}.fly-strategy-selector__panel{position:absolute;z-index:60;inset-inline:0;inset-block-start:calc(100% + 4px);display:flex;flex-direction:column;max-block-size:19rem;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface-panel);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));box-shadow:0 12px 32px #0000002e;overflow:hidden}.fly-strategy-selector__listbox{flex:1 1 auto;overflow-y:auto;padding-block:4px}.fly-strategy-selector__group{display:flex;align-items:center;gap:6px;padding-block:6px 3px;padding-inline:10px;color:var(--_text-subtle);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.fly-strategy-selector__group .pi{font-size:11px}.fly-strategy-selector__group-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__option{padding-block:6px;padding-inline:26px 10px;cursor:pointer}.fly-strategy-selector__option--active{background:var(--_surface-hover)}.fly-strategy-selector__option-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-strategy-selector__status{display:flex;align-items:center;gap:8px;padding-block:10px;padding-inline:10px;color:var(--_text-subtle)}.fly-strategy-selector__status--error{color:var(--_danger)}.fly-strategy-selector__retry{border:1px solid var(--_border);border-radius:6px;background:var(--_surface);padding-block:2px;padding-inline:8px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchEl: [{
+                type: ViewChild,
+                args: ['searchRef']
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
 /** The platform endpoint the catalogue reads. Relative — the host's gateway + auth interceptors apply. */
 const FLY_CURRENCIES_BRIEF_ENDPOINT = '/api/currencies/brief';
 /**
@@ -19370,6 +19979,29 @@ function flyUnwrapCurrencies(res) {
     const data = res?.data;
     return Array.isArray(data) ? data : [];
 }
+/** The platform endpoint serving the CALLING TENANT's default currency. Relative, like its
+ *  catalogue sibling — the host's gateway + auth interceptors apply, and the answer is scoped to
+ *  whatever tenant that auth resolves to. */
+const FLY_CURRENCY_DEFAULT_ENDPOINT = '/api/currencies/default';
+/**
+ * Unwraps the single-row shape of `GET /api/currencies/default`.
+ *
+ * `null` is a SUCCESS answer, not a failure: a tenant with no country has no default currency,
+ * and a platform-scoped caller has no tenant whose currency could be meant. Anything that is not
+ * recognisably a currency row — an envelope with `data: null`, an error body, an HTML login page
+ * from a misrouted request — collapses to `null` for the same reason
+ * {@link flyUnwrapCurrencies} returns `[]`: a picker must degrade to "no preselection", never
+ * preselect something the platform did not vouch for.
+ */
+function flyUnwrapCurrency(res) {
+    const candidate = res !== null && typeof res === 'object' && 'data' in res
+        ? res.data
+        : res;
+    if (candidate === null || typeof candidate !== 'object')
+        return null;
+    const row = candidate;
+    return typeof row.code === 'string' && row.code.length > 0 ? candidate : null;
+}
 /**
  * **`FlyCurrencyCatalogService`** — the one ISO-code → {@link FlyCurrency} adapter for the
  * platform currency catalogue (`GET /api/currencies/brief`).
@@ -19490,6 +20122,8 @@ let _flyCurrencySelectorUid = 0;
  *  Re-exported from {@link FlyCurrencyCatalogService}'s module so the picker and the display-only
  *  catalogue cannot drift on which route serves the rows. */
 const CURRENCIES_BRIEF_ENDPOINT = FLY_CURRENCIES_BRIEF_ENDPOINT;
+/** The platform endpoint behind {@link FlyCurrencySelectorComponent.applyTenantDefault}. */
+const CURRENCY_DEFAULT_ENDPOINT = FLY_CURRENCY_DEFAULT_ENDPOINT;
 /** Cached answer of {@link probeFlagEmojiSupport} — the measurement is stable for a document's lifetime. */
 let _flagEmojiSupport = null;
 /**
@@ -19600,6 +20234,34 @@ class FlyCurrencySelectorComponent {
     currencies = input(null, ...(ngDevMode ? [{ debugName: "currencies" }] : /* istanbul ignore next */ []));
     /** Host-supplied loader, used when `[currencies]` is absent. Falls back to `GET /api/currencies/brief`. */
     fetchFn = input(null, ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []));
+    /**
+     * Pre-fill an EMPTY single-select with the calling tenant's default currency
+     * (`GET /api/currencies/default`, or `[tenantDefaultFetchFn]`). On by default.
+     *
+     * An amount is nearly always denominated in the tenant's reporting currency, and a form that
+     * opens empty makes every user restate a fact the platform already holds — while an untouched
+     * field silently saves null, which downstream money formatting cannot render at all.
+     *
+     * Deliberately narrow. It applies only when ALL of these hold, because outside them a
+     * preselection would be a guess rather than a default:
+     *   - `mode="single"` — a multi-select accumulates a SET, and seeding one member of a set
+     *     states something the tenant currency does not say.
+     *   - not `locked()` — a frozen value is authoritative; proposing one contradicts the lock.
+     *   - the control is still empty — a written value always wins.
+     *
+     * It stays armed until something rules it out: a user commit (pick, clear, remove) or a
+     * written non-empty value. A written NULL does not rule it out — the forms layer initializes
+     * a fresh control by writing its empty value on a microtask, which can land AFTER a
+     * synchronously-resolved default has already committed, and reading that write as a user
+     * clear would erase the default. Clearing the field by hand does latch it off, so the value
+     * cannot reappear and read as the clear having not registered.
+     *
+     * A host that supplied `[currencies]` or `[fetchFn]` is never taken to the platform endpoint —
+     * see {@link tenantDefaultFetchFn}, which is how such a host opts back in.
+     */
+    applyTenantDefault = input(true, ...(ngDevMode ? [{ debugName: "applyTenantDefault" }] : /* istanbul ignore next */ []));
+    /** Host-supplied loader for {@link applyTenantDefault}. Falls back to `GET /api/currencies/default`. */
+    tenantDefaultFetchFn = input(null, ...(ngDevMode ? [{ debugName: "tenantDefaultFetchFn" }] : /* istanbul ignore next */ []));
     /** Restrict the offered set to these ISO 4217 codes (case-insensitive). Empty = offer everything. */
     allowedCodes = input([], ...(ngDevMode ? [{ debugName: "allowedCodes" }] : /* istanbul ignore next */ []));
     /**
@@ -19660,6 +20322,21 @@ class FlyCurrencySelectorComponent {
     _selectedCodes = signal([], ...(ngDevMode ? [{ debugName: "_selectedCodes" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _fetchStarted = false;
+    /** Guards the once-per-instance tenant-default resolve. */
+    _tenantDefaultStarted = false;
+    /**
+     * Latches once the default has been RULED OUT: a user commit (pick, clear, remove) or a
+     * written non-empty value. Applying the default does NOT latch it, and neither does a null
+     * write: `NgModel` syncs the model's initial value on a microtask (`resolvedPromise.then` in
+     * its `_updateValue`), so a SYNCHRONOUS `tenantDefaultFetchFn` — `of(currency)`, an offline
+     * lookup — commits before that first write lands. When the self-application latched this
+     * guard, the stale null write erased the committed default AND pinned the guard off, so the
+     * default never applied for exactly those hosts (async HTTP fetches always lost the race
+     * and were unaffected).
+     */
+    _tenantDefaultRuledOut = false;
+    /** The resolved row, kept so a `writeValue(null)` arriving AFTER the fetch can still use it. */
+    _tenantDefaultRow = null;
     searchEl;
     triggerEl;
     _onChange = () => undefined;
@@ -19675,6 +20352,34 @@ class FlyCurrencySelectorComponent {
             this._fetchStarted = true;
             this._load();
         });
+        // A control that HOLDS a value must resolve it, whether or not the user ever opens the
+        // panel: `selected()` maps codes through the loaded rows, so a saved code with no rows
+        // renders as the placeholder — an edit form reading "Select a currency" over a project that
+        // is denominated in AED. The lazy rule is still intact for the case it was written for: an
+        // EMPTY selector on a tab nobody opens fetches nothing.
+        effect(() => {
+            if (this._fetchStarted)
+                return;
+            if (this.currencies() !== null)
+                return;
+            if (this._selectedCodes().length === 0)
+                return;
+            this._fetchStarted = true;
+            this._load();
+        });
+        // The tenant default is resolved EAGERLY, unlike the catalogue: its whole job is to be in
+        // place before the user looks at the field, so deferring it to first open would defeat it.
+        // The cost is bounded - one small request per defaulting selector, against an endpoint that
+        // returns a single row. An effect rather than the constructor body so `applyTenantDefault`
+        // and `locked` are read AFTER the host's bindings are applied, not at their declared values.
+        effect(() => {
+            if (this._tenantDefaultStarted)
+                return;
+            if (!this.applyTenantDefault() || this.isMulti() || this.locked())
+                return;
+            this._tenantDefaultStarted = true;
+            this._loadTenantDefault();
+        });
     }
     // ── Derived view state ─────────────────────────────────────────────────────
     effectiveDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
@@ -19899,13 +20604,74 @@ class FlyCurrencySelectorComponent {
             this._loaded.set(rows);
         });
     }
+    _loadTenantDefault() {
+        const fetch = this.tenantDefaultFetchFn();
+        // A host that took over the CATALOGUE owns the default too: `[currencies]`/`[fetchFn]` are
+        // the "do not reach the platform routes" declaration (offline builds, fixtures, apps that
+        // proxy reference data), and honouring it for the rows while quietly firing a platform
+        // request for the default would break exactly the consumers those inputs exist for. Such a
+        // host opts back in by supplying `[tenantDefaultFetchFn]`.
+        const hostOwnsData = this.currencies() !== null || this.fetchFn() !== null;
+        const source = fetch
+            ? fetch()
+            : this.http && !hostOwnsData
+                ? this.http.get(CURRENCY_DEFAULT_ENDPOINT).pipe(map(flyUnwrapCurrency))
+                : null;
+        // No transport and no loader is not an error state here: an offline surface simply has no
+        // default. Nothing is surfaced to the user - unlike a failed CATALOGUE load, which must be
+        // retryable because it leaves the control unusable.
+        if (!source)
+            return;
+        source.pipe(catchError$1(() => of(null))).subscribe((row) => {
+            this._tenantDefaultRow = row;
+            this._applyTenantDefaultIfEmpty();
+        });
+    }
+    /**
+     * Applies the resolved default to a still-empty control.
+     *
+     * Called from both ends of a race with no fixed winner: the fetch may land before the forms
+     * layer writes, or after it writes the empty value a form is built with. It can also run
+     * AGAIN after applying — the forms layer's deferred initial null write clears the codes and
+     * re-enters here — in which case it re-commits the same row, which also re-syncs the
+     * `FormControl` the null write just reset.
+     */
+    _applyTenantDefaultIfEmpty() {
+        if (this._tenantDefaultRuledOut)
+            return;
+        if (!this.applyTenantDefault() || this.isMulti() || this.locked())
+            return;
+        const row = this._tenantDefaultRow;
+        if (!row)
+            return;
+        if (this._selectedCodes().length > 0)
+            return;
+        // Seed the row so the trigger can RENDER the pick straight away. Without this the selection
+        // would be invisible until the catalogue loads - which is lazy, on first open - so the field
+        // would look untouched while its form value said otherwise. `_load` replaces the whole set
+        // on success, and leaves this seed alone on failure.
+        if (this.currencies() === null && this._loaded().length === 0)
+            this._loaded.set([row]);
+        this._commit([row.code], { fromTenantDefault: true });
+    }
     // ── ControlValueAccessor ───────────────────────────────────────────────────
     writeValue(value) {
         if (value === null || value === undefined) {
             this._selectedCodes.set([]);
+            // An empty write re-tries the default - this is the common `patchValue`-after-load path,
+            // and on a fresh form it is the write that arrives BEFORE the fetch has landed. It is
+            // ALSO NgModel's microtask-deferred initial write arriving AFTER a synchronous fetch has
+            // committed — re-trying restores the default that write just cleared.
+            this._applyTenantDefaultIfEmpty();
             return;
         }
-        this._selectedCodes.set(typeof value === 'string' ? [value] : [...value]);
+        const codes = typeof value === 'string' ? [value] : [...value];
+        this._selectedCodes.set(codes);
+        // A written value is the host's own answer; there is no hole left for a default to fill.
+        if (codes.length > 0)
+            this._tenantDefaultRuledOut = true;
+        else
+            this._applyTenantDefaultIfEmpty();
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -19921,7 +20687,14 @@ class FlyCurrencySelectorComponent {
         const codes = this._selectedCodes();
         return this.isMulti() ? [...codes] : (codes[0] ?? null);
     }
-    _commit(codes) {
+    _commit(codes, opts) {
+        // Every user-driven change routes through here - pick, toggle, remove, clear - so this is the
+        // one place that has to latch the default off. A cleared field that refilled itself would be
+        // indistinguishable from the clear never having registered. The one caller that must NOT
+        // latch is the default's own application: latching there let the forms layer's deferred
+        // initial writeValue(null) erase a synchronously-fetched default for good.
+        if (!opts?.fromTenantDefault)
+            this._tenantDefaultRuledOut = true;
         this._selectedCodes.set([...codes]);
         this._onChange(this._controlValue());
         this.selectionChange.emit([...codes]);
@@ -19931,7 +20704,7 @@ class FlyCurrencySelectorComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyCurrencySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyCurrencySelectorComponent, isStandalone: true, selector: "fly-currency-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, currencies: { classPropertyName: "currencies", publicName: "currencies", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null }, allowedCodes: { classPropertyName: "allowedCodes", publicName: "allowedCodes", isSignal: true, isRequired: false, transformFunction: null }, pinnedCodes: { classPropertyName: "pinnedCodes", publicName: "pinnedCodes", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonKey: { classPropertyName: "lockedReasonKey", publicName: "lockedReasonKey", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonParams: { classPropertyName: "lockedReasonParams", publicName: "lockedReasonParams", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", selectionDetailChange: "selectionDetailChange", openedChange: "openedChange" }, host: { properties: { "class.fly-currency-selector--open": "isOpen()", "class.fly-currency-selector--disabled": "effectiveDisabled()", "class.fly-currency-selector--locked": "locked()" }, classAttribute: "fly-currency-selector" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyCurrencySelectorComponent, isStandalone: true, selector: "fly-currency-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, currencies: { classPropertyName: "currencies", publicName: "currencies", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null }, applyTenantDefault: { classPropertyName: "applyTenantDefault", publicName: "applyTenantDefault", isSignal: true, isRequired: false, transformFunction: null }, tenantDefaultFetchFn: { classPropertyName: "tenantDefaultFetchFn", publicName: "tenantDefaultFetchFn", isSignal: true, isRequired: false, transformFunction: null }, allowedCodes: { classPropertyName: "allowedCodes", publicName: "allowedCodes", isSignal: true, isRequired: false, transformFunction: null }, pinnedCodes: { classPropertyName: "pinnedCodes", publicName: "pinnedCodes", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonKey: { classPropertyName: "lockedReasonKey", publicName: "lockedReasonKey", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonParams: { classPropertyName: "lockedReasonParams", publicName: "lockedReasonParams", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", selectionDetailChange: "selectionDetailChange", openedChange: "openedChange" }, host: { properties: { "class.fly-currency-selector--open": "isOpen()", "class.fly-currency-selector--disabled": "effectiveDisabled()", "class.fly-currency-selector--locked": "locked()" }, classAttribute: "fly-currency-selector" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FlyCurrencySelectorComponent),
@@ -19953,7 +20726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         '[class.fly-currency-selector--disabled]': 'effectiveDisabled()',
                         '[class.fly-currency-selector--locked]': 'locked()',
                     }, template: "<div\r\n  class=\"fly-currency-selector__wrap\"\r\n  [flyClickOutsideEnabled]=\"isOpen()\"\r\n  (flyClickOutside)=\"close()\"\r\n>\r\n  @if (locked()) {\r\n    <!-- \u2500\u2500 Locked readout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n         NOT a dimmed `disabled` trigger: there is no dropdown affordance here at all \u2014 the\r\n         value is frozen on purpose, not merely unavailable right now. `role=\"group\"` +\r\n         `aria-label` name the field the way the combobox trigger's `aria-label` does; the\r\n         reason is REAL, always-rendered text (not a `title` attribute, which many screen\r\n         readers never announce and which no sighted user sees without hovering) and is\r\n         additionally wired via `aria-describedby` for AT that reads by relationship rather\r\n         than document order. -->\r\n    <div\r\n      class=\"fly-currency-selector__locked\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n      [attr.aria-describedby]=\"lockedReasonId\"\r\n    >\r\n      @if (selected().length === 0) {\r\n        <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__chips\">\r\n          @for (c of selected(); track c.code) {\r\n            <span class=\"fly-currency-selector__chip\">\r\n              <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n                @if (flagsRenderable() && c.flag) {\r\n                  <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n                } @else {\r\n                  <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n                }\r\n              </span>\r\n              <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n              <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n      <span class=\"fly-currency-selector__lock-icon\" aria-hidden=\"true\">&#128274;</span>\r\n    </div>\r\n    <p class=\"fly-currency-selector__locked-reason\" [id]=\"lockedReasonId\">{{ lockedReasonText() }}</p>\r\n  } @else {\r\n\r\n  <!-- \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n       `aria-label` is never null: a `combobox` does NOT take its accessible name from its\r\n       contents the way a plain button does, so the chips/placeholder painted inside it name\r\n       nothing. Absent a consumer label the localized placeholder supplies the control's\r\n       purpose; its VALUE is still announced from the contents. -->\r\n  <button\r\n    #triggerRef\r\n    type=\"button\"\r\n    [id]=\"triggerId\"\r\n    class=\"fly-currency-selector__trigger\"\r\n    role=\"combobox\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n    [class.fly-currency-selector__trigger--empty]=\"!hasSelection()\"\r\n    [disabled]=\"effectiveDisabled()\"\r\n    (click)=\"toggleOpen()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n  >\r\n    @if (selected().length === 0) {\r\n      <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n    } @else {\r\n      <span class=\"fly-currency-selector__chips\">\r\n        @for (c of selected(); track c.code) {\r\n          <span class=\"fly-currency-selector__chip\">\r\n            <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n              @if (flagsRenderable() && c.flag) {\r\n                <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n              } @else {\r\n                <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n              }\r\n            </span>\r\n            <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n            <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            @if (isMulti() && !effectiveDisabled()) {\r\n              <span\r\n                class=\"fly-currency-selector__chip-remove\"\r\n                role=\"button\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"'\u2715 ' + c.code\"\r\n                (click)=\"remove(c.code, $event)\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              >\u2715</span>\r\n            }\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n      <span\r\n        class=\"fly-currency-selector__clear\"\r\n        role=\"button\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-label]=\"clearText()\"\r\n        [title]=\"clearText()\"\r\n        (click)=\"clear($event)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n      >\u2715</span>\r\n    }\r\n\r\n    <span class=\"fly-currency-selector__chevron\" aria-hidden=\"true\">\u25BE</span>\r\n  </button>\r\n\r\n  <!-- \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  @if (isOpen()) {\r\n    <div class=\"fly-currency-selector__panel\" tabindex=\"-1\" (keydown)=\"onPanelKeydown($event)\">\r\n      <div class=\"fly-currency-selector__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-currency-selector__search-input\"\r\n          role=\"combobox\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-expanded]=\"true\"\r\n          [attr.aria-controls]=\"listboxId\"\r\n          [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n          [attr.aria-label]=\"searchPlaceholderText()\"\r\n          [placeholder]=\"searchPlaceholderText()\"\r\n          [value]=\"searchTerm()\"\r\n          (input)=\"onSearchInput($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      @if (loading()) {\r\n        <div class=\"fly-currency-selector__status\" role=\"status\">{{ loadingText() }}</div>\r\n      } @else if (loadFailed()) {\r\n        <div class=\"fly-currency-selector__status fly-currency-selector__status--error\" role=\"alert\">\r\n          <span>{{ errorText() }}</span>\r\n          <button type=\"button\" class=\"fly-currency-selector__retry\" (click)=\"retry()\">\r\n            {{ retryText() }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"fly-currency-selector__listbox\"\r\n        role=\"listbox\"\r\n        [id]=\"listboxId\"\r\n        [attr.aria-multiselectable]=\"isMulti() ? true : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n      >\r\n        @if (pinned().length > 0) {\r\n          <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ pinnedGroupText() }}</div>\r\n          @for (c of pinned(); track c.code) {\r\n            <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n          }\r\n          @if (rest().length > 0) {\r\n            <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ allGroupText() }}</div>\r\n          }\r\n        }\r\n        @for (c of rest(); track c.code) {\r\n          <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n        }\r\n\r\n        @if (!loading() && !loadFailed() && filtered().length === 0) {\r\n          <div class=\"fly-currency-selector__status\" role=\"presentation\">{{ noResultsText() }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 One option row, shared by the pinned and full groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<ng-template #row let-c>\r\n  <div\r\n    class=\"fly-currency-selector__option\"\r\n    role=\"option\"\r\n    tabindex=\"-1\"\r\n    [id]=\"optionId(navIndexOf(c.code))\"\r\n    [attr.aria-selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--active]=\"navIndexOf(c.code) === activeIndex()\"\r\n    (click)=\"pick(c)\"\r\n    (keydown.enter)=\"pick(c)\"\r\n    (mouseenter)=\"onOptionHover(navIndexOf(c.code))\"\r\n  >\r\n    <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n      @if (flagsRenderable() && c.flag) {\r\n        <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-text\">\r\n      <span class=\"fly-currency-selector__option-code\">{{ c.code }}</span>\r\n      <span class=\"fly-currency-selector__option-name\">{{ c.name }}</span>\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n\r\n    <span class=\"fly-currency-selector__check\" aria-hidden=\"true\">\r\n      @if (isSelected(c.code)) { \u2713 }\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-panel: var(--glass-bg-elevated, var(--surface-card, #fff));--_panel-blur: var(--glass-blur, 40px);--_surface-hover: var(--surface-hover, #f1f5f9);--_surface-active: var(--surface-active, #eef2ff);--_border: var(--surface-border, #e2e8f0);--_text: var(--text-color, #0f172a);--_text-subtle: var(--text-color-secondary, #64748b);--_fill: var(--fill-tertiary, #f3f4f6);--_primary: var(--primary-color);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:inline-block;inline-size:100%;min-inline-size:11rem;font-size:13px;color:var(--_text)}.fly-currency-selector__wrap{position:relative;inline-size:100%}.fly-currency-selector__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;text-align:start;cursor:pointer}.fly-currency-selector__trigger:focus-visible{outline:2px solid var(--_primary);outline-offset:2px}.fly-currency-selector__trigger:disabled{opacity:.55;cursor:not-allowed}.fly-currency-selector__placeholder{flex:1 1 auto;padding-inline-start:4px;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__chips{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:4px;min-inline-size:0}.fly-currency-selector__chip{display:inline-flex;align-items:center;gap:5px;padding-block:2px;padding-inline:3px 7px;border-radius:999px;background:var(--_fill);font-size:12px}.fly-currency-selector__chip-code{font-weight:700;letter-spacing:.02em}.fly-currency-selector__chip-symbol{color:var(--_text-subtle)}.fly-currency-selector__chip-remove{padding:1px 3px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer}.fly-currency-selector__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-currency-selector__clear,.fly-currency-selector__chevron{flex:none;color:var(--_text-subtle);font-size:11px;line-height:1}.fly-currency-selector__clear{padding:3px;border-radius:50%;cursor:pointer}.fly-currency-selector__clear:hover{background:var(--_surface-hover);color:var(--_text)}.fly-currency-selector__tile{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:26px;block-size:19px;border-radius:4px;background:var(--_fill);overflow:hidden}.fly-currency-selector__tile-flag{font-size:15px;line-height:1}.fly-currency-selector__tile-code{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--_text-subtle);direction:ltr;unicode-bidi:isolate}.fly-currency-selector__locked{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px dashed var(--_border);border-radius:var(--_radius);background:var(--_fill);color:var(--_text);cursor:default}.fly-currency-selector__lock-icon{flex:none;margin-inline-start:auto;font-size:12px;opacity:.7}.fly-currency-selector__locked-reason{margin:4px 0 0;color:var(--_text-subtle);font-size:11px;line-height:1.4}.fly-currency-selector__panel{position:absolute;z-index:60;inset-inline:0;inset-block-start:calc(100% + 4px);display:flex;flex-direction:column;max-block-size:19rem;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface-panel);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));box-shadow:0 12px 32px #0000002e;overflow:hidden}.fly-currency-selector__search{padding:6px;border-block-end:1px solid var(--_border)}.fly-currency-selector__search-input{inline-size:100%;padding-block:5px;padding-inline:8px;border:1px solid var(--_border);border-radius:6px;background:var(--_surface);color:var(--_text);font:inherit}.fly-currency-selector__search-input:focus-visible{outline:2px solid var(--_primary);outline-offset:-1px}.fly-currency-selector__listbox{flex:1 1 auto;overflow-y:auto;padding-block:4px}.fly-currency-selector__group{padding-block:6px 3px;padding-inline:10px;color:var(--_text-subtle);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.fly-currency-selector__option{display:flex;align-items:center;gap:9px;padding-block:5px;padding-inline:10px;cursor:pointer}.fly-currency-selector__option--active{background:var(--_surface-hover)}.fly-currency-selector__option--selected{background:var(--_surface-active)}.fly-currency-selector__option-text{display:flex;flex:1 1 auto;align-items:baseline;gap:8px;min-inline-size:0}.fly-currency-selector__option-code{flex:none;font-weight:700;letter-spacing:.02em;direction:ltr;unicode-bidi:isolate}.fly-currency-selector__option-name{flex:1 1 auto;min-inline-size:0;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__option-symbol{flex:none;min-inline-size:2.2em;color:var(--_text);text-align:end}.fly-currency-selector__check{flex:none;inline-size:1em;color:var(--_primary)}.fly-currency-selector__status{display:flex;align-items:center;gap:8px;padding-block:10px;padding-inline:10px;color:var(--_text-subtle)}.fly-currency-selector__status--error{color:var(--_danger)}.fly-currency-selector__retry{border:1px solid var(--_border);border-radius:6px;background:var(--_surface);padding-block:2px;padding-inline:8px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencies", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }], allowedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedCodes", required: false }] }], pinnedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedCodes", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], lockedReasonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonKey", required: false }] }], lockedReasonParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonParams", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionDetailChange: [{ type: i0.Output, args: ["selectionDetailChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], searchEl: [{
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencies", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }], applyTenantDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyTenantDefault", required: false }] }], tenantDefaultFetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenantDefaultFetchFn", required: false }] }], allowedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedCodes", required: false }] }], pinnedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedCodes", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], lockedReasonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonKey", required: false }] }], lockedReasonParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonParams", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionDetailChange: [{ type: i0.Output, args: ["selectionDetailChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], searchEl: [{
                 type: ViewChild,
                 args: ['searchRef']
             }], triggerEl: [{
@@ -21811,14 +22584,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'fly-meta', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl>\r\n  @for (item of items(); track $index) {\r\n    <div>\r\n      <dt>{{ item.labelKey | translate }}</dt>\r\n      <dd [class.mono]=\"item.mono ?? false\">{{ item.value }}</dd>\r\n    </div>\r\n  }\r\n  <ng-content />\r\n</dl>\r\n", styles: [":host{display:block}dl{margin:0;display:flex;flex-direction:column;gap:10px}dl ::ng-deep>div{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-3);align-items:baseline;font-size:var(--text-sm)}dl ::ng-deep dt{margin:0;font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4)}dl ::ng-deep dd{margin:0;min-width:0;color:var(--ink);word-break:break-word;line-height:1.45}dl ::ng-deep dd.mono,dl ::ng-deep dd .mono{font-size:var(--text-2xs)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
 
-function canGoPrev(page) {
+function canGoPrev$1(page) {
     return page > 1;
 }
-function canGoNext(page, totalPages) {
+function canGoNext$1(page, totalPages) {
     return page < totalPages;
 }
 /** Clamp a requested page into `[1, max(1, totalPages)]`. */
-function clampPage(page, totalPages) {
+function clampPage$1(page, totalPages) {
     return Math.min(Math.max(1, page), Math.max(1, totalPages));
 }
 
@@ -21853,10 +22626,10 @@ class FlyPaginationComponent {
     showEdges = input(false, ...(ngDevMode ? [{ debugName: "showEdges" }] : /* istanbul ignore next */ []));
     /** Emits the target page (already clamped to bounds). */
     pageChange = output();
-    prevEnabled = computed(() => canGoPrev(this.page()), ...(ngDevMode ? [{ debugName: "prevEnabled" }] : /* istanbul ignore next */ []));
-    nextEnabled = computed(() => canGoNext(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "nextEnabled" }] : /* istanbul ignore next */ []));
+    prevEnabled = computed(() => canGoPrev$1(this.page()), ...(ngDevMode ? [{ debugName: "prevEnabled" }] : /* istanbul ignore next */ []));
+    nextEnabled = computed(() => canGoNext$1(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "nextEnabled" }] : /* istanbul ignore next */ []));
     goTo(target) {
-        const next = clampPage(target, this.totalPages());
+        const next = clampPage$1(target, this.totalPages());
         if (next !== this.page())
             this.pageChange.emit(next);
     }
@@ -21868,6 +22641,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'fly-pagination', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pg\" [attr.aria-label]=\"'ui.pagination.label' | translate\">\r\n  @if (rangeText(); as range) {\r\n    <span class=\"pg__range\">{{ range }}</span>\r\n  }\r\n  <div class=\"pg__controls\">\r\n    @if (showEdges()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pg__btn\"\r\n        [disabled]=\"!prevEnabled()\"\r\n        (click)=\"goTo(1)\"\r\n        [attr.aria-label]=\"'ui.pagination.first' | translate\"\r\n      ><span class=\"pg__chev\" aria-hidden=\"true\">\u00AB</span></button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"pg__btn\"\r\n      [disabled]=\"!prevEnabled()\"\r\n      (click)=\"goTo(page() - 1)\"\r\n      [attr.aria-label]=\"'ui.pagination.previous' | translate\"\r\n    >\r\n      <svg class=\"pg__arrow\" data-arrow=\"prev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"15 6 9 12 15 18\" />\r\n      </svg>\r\n    </button>\r\n    <span class=\"pg__current\" aria-live=\"polite\">\r\n      {{ 'ui.pagination.pageOf' | translate: { page: page(), total: totalPages() } }}\r\n    </span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"pg__btn\"\r\n      [disabled]=\"!nextEnabled()\"\r\n      (click)=\"goTo(page() + 1)\"\r\n      [attr.aria-label]=\"'ui.pagination.next' | translate\"\r\n    >\r\n      <svg class=\"pg__arrow\" data-arrow=\"next\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"9 6 15 12 9 18\" />\r\n      </svg>\r\n    </button>\r\n    @if (showEdges()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pg__btn\"\r\n        [disabled]=\"!nextEnabled()\"\r\n        (click)=\"goTo(totalPages())\"\r\n        [attr.aria-label]=\"'ui.pagination.last' | translate\"\r\n      ><span class=\"pg__chev\" aria-hidden=\"true\">\u00BB</span></button>\r\n    }\r\n  </div>\r\n</nav>\r\n", styles: [".pg{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-block-start:var(--sp-4);font-size:var(--text-sm);color:var(--ink-3)}.pg__range{font-size:var(--text-sm);color:var(--ink-3);direction:ltr;unicode-bidi:isolate}.pg__range b{color:var(--ink);font-weight:var(--fw-medium)}.pg__controls{display:flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:var(--text-sm)}.pg__btn{inline-size:26px;block-size:26px;padding:0;border:1px solid transparent;background:transparent;color:var(--ink-3);border-radius:50%;font-size:var(--text-sm);cursor:pointer;display:inline-grid;place-items:center;transition:background var(--t-state),color var(--t-state)}.pg__btn:hover:not(:disabled){background:var(--w06);color:var(--ink)}.pg__btn:disabled{color:var(--w2);cursor:default}.pg__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.pg__arrow{inline-size:14px;block-size:14px}:host-context([dir=rtl]) .pg__arrow{transform:scaleX(-1)}.pg__current{font-size:var(--text-sm);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;padding:0 var(--sp-3);background:var(--accent);border:1px solid transparent;border-radius:999px;color:var(--on-accent-fill);height:24px;display:inline-grid;place-items:center;direction:ltr;unicode-bidi:isolate}:host-context(.rtl) .pg__chev,:host-context([dir=rtl]) .pg__chev{display:inline-block;transform:scaleX(-1)}\n"] }]
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], rangeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeText", required: false }] }], showEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdges", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
+/** 0-indexed sibling of `pagination.logic.ts` — see `pager.component.ts` for why. */
+function canGoPrev(page) {
+    return page > 0;
+}
+function canGoNext(page, totalPages) {
+    return page < totalPages - 1;
+}
+/** Clamp a requested page into `[0, max(0, totalPages - 1)]`. */
+function clampPage(page, totalPages) {
+    return Math.min(Math.max(0, page), Math.max(0, totalPages - 1));
+}
+
+/**
+ * Numbered list pager — back arrow, one pill per page, forward arrow — for the
+ * lists that want every page as a target rather than `fly-pagination`'s
+ * «prev / page of total / next» band. Shares the list's surface and continues
+ * its border (see `COMPONENTS.md`): pair with a list container that sets
+ * `border-bottom: 0` so the two read as one panel.
+ *
+ *   <fly-pager [page]="page()" [totalPages]="totalPages()" (goToPage)="goTo($event)" />
+ *
+ * `page`/the emitted target are 0-indexed (array-index pagination); buttons
+ * display `page + 1`. This is the opposite convention from `fly-pagination`
+ * (1-indexed) — the two are separate components for separate list shapes, not
+ * a shared base, so pick the one matching how the caller already indexes its
+ * pages rather than converting at the call site.
+ */
+class FlyPagerComponent {
+    page = input.required(...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    /** Emits the target page (already clamped to bounds), 0-indexed. */
+    goToPage = output();
+    prevEnabled = computed(() => canGoPrev(this.page()), ...(ngDevMode ? [{ debugName: "prevEnabled" }] : /* istanbul ignore next */ []));
+    nextEnabled = computed(() => canGoNext(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "nextEnabled" }] : /* istanbul ignore next */ []));
+    pages = computed(() => Array.from({ length: Math.max(0, this.totalPages()) }, (_, i) => i), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    goTo(target) {
+        const next = clampPage(target, this.totalPages());
+        if (next !== this.page())
+            this.goToPage.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPagerComponent, isStandalone: true, selector: "fly-pager", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "@if (totalPages() > 1) {\r\n  <nav class=\"pgr\" [attr.aria-label]=\"'ui.pagination.label' | translate\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"back\"\r\n      [disabled]=\"!prevEnabled()\"\r\n      (click)=\"goTo(page() - 1)\"\r\n      [attr.aria-label]=\"'ui.pager.previous' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M14.8 5.2L8 12l6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n    @for (p of pages(); track p) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pgr__page\"\r\n        [class.pgr__page--current]=\"p === page()\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        (click)=\"goTo(p)\"\r\n        [attr.aria-label]=\"'ui.pager.page' | translate: { page: p + 1 }\"\r\n      >{{ p + 1 }}</button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"forward\"\r\n      [disabled]=\"!nextEnabled()\"\r\n      (click)=\"goTo(page() + 1)\"\r\n      [attr.aria-label]=\"'ui.pager.next' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M9.2 5.2L16 12l-6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n  </nav>\r\n}\r\n", styles: [".pgr{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:14px 8px;background:var(--w03);border:1px solid var(--w08);border-top:0}.pgr__arrow{flex:none;inline-size:26px;block-size:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--w6);cursor:pointer;display:grid;place-items:center;transition:background var(--t-state),color var(--t-state)}.pgr__arrow svg{inline-size:14px;block-size:14px}.pgr__arrow:hover:not(:disabled){background:var(--w06)}.pgr__arrow:disabled{color:var(--w2);cursor:default}.pgr__arrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host-context([dir=rtl]) .pgr__arrow[data-arrow] svg{transform:scaleX(-1)}.pgr__page{flex:none;min-inline-size:24px;block-size:24px;padding:0 3px;border:0;border-radius:50%;background:transparent;color:var(--w45);cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;transition:background var(--t-state),color var(--t-state)}.pgr__page:hover{background:var(--w08)}.pgr__page--current{background:var(--accent);color:var(--on-accent-fill)}.pgr__page--current:hover{background:var(--accent)}.pgr__page:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-pager', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (totalPages() > 1) {\r\n  <nav class=\"pgr\" [attr.aria-label]=\"'ui.pagination.label' | translate\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"back\"\r\n      [disabled]=\"!prevEnabled()\"\r\n      (click)=\"goTo(page() - 1)\"\r\n      [attr.aria-label]=\"'ui.pager.previous' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M14.8 5.2L8 12l6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n    @for (p of pages(); track p) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pgr__page\"\r\n        [class.pgr__page--current]=\"p === page()\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        (click)=\"goTo(p)\"\r\n        [attr.aria-label]=\"'ui.pager.page' | translate: { page: p + 1 }\"\r\n      >{{ p + 1 }}</button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"forward\"\r\n      [disabled]=\"!nextEnabled()\"\r\n      (click)=\"goTo(page() + 1)\"\r\n      [attr.aria-label]=\"'ui.pager.next' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M9.2 5.2L16 12l-6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n  </nav>\r\n}\r\n", styles: [".pgr{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:14px 8px;background:var(--w03);border:1px solid var(--w08);border-top:0}.pgr__arrow{flex:none;inline-size:26px;block-size:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--w6);cursor:pointer;display:grid;place-items:center;transition:background var(--t-state),color var(--t-state)}.pgr__arrow svg{inline-size:14px;block-size:14px}.pgr__arrow:hover:not(:disabled){background:var(--w06)}.pgr__arrow:disabled{color:var(--w2);cursor:default}.pgr__arrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host-context([dir=rtl]) .pgr__arrow[data-arrow] svg{transform:scaleX(-1)}.pgr__page{flex:none;min-inline-size:24px;block-size:24px;padding:0 3px;border:0;border-radius:50%;background:transparent;color:var(--w45);cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;transition:background var(--t-state),color var(--t-state)}.pgr__page:hover{background:var(--w08)}.pgr__page--current{background:var(--accent);color:var(--on-accent-fill)}.pgr__page--current:hover{background:var(--accent)}.pgr__page:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}\n"] }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], goToPage: [{ type: i0.Output, args: ["goToPage"] }] } });
+
 /**
  * Listing card shell — one anatomy for the three reference card patterns:
  *
@@ -22828,11 +23649,11 @@ class PageHeaderComponent {
         return '#';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
+            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -23518,14 +24339,14 @@ class FlyAppTopbarComponent {
         this.rows()[index]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppTopbarComponent, isStandalone: true, selector: "fly-app-topbar", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-topbar--docked": "docked()" } }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rows", predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "trigger", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1;color:var(--label-secondary)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold)}:host(.fly-topbar--docked) .fly-topbar__sep{color:var(--w28)}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:22px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:22px;max-block-size:22px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled", "flyClickOutsideIgnore"], outputs: ["flyClickOutside"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppTopbarComponent, isStandalone: true, selector: "fly-app-topbar", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-topbar--docked": "docked()" } }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rows", predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "trigger", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-md);gap:6px;font-size:var(--text-sm);line-height:1;color:var(--w55)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{background:var(--w06);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold);letter-spacing:-.006em}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__module-label{letter-spacing:normal}:host(.fly-topbar--docked) .fly-topbar__sep{position:relative;display:inline-block;inline-size:7px;block-size:7px;color:transparent;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__sep{transform:rotate(-135deg)}:host(.fly-topbar--docked) .fly-topbar__actions{display:none}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:14px;max-block-size:14px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled", "flyClickOutsideIgnore"], outputs: ["flyClickOutside"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppTopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-app-topbar', standalone: true, imports: [TranslatePipe, FlyClickOutsideDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(document:keydown.escape)': 'onEscape()',
                         '[class.fly-topbar--docked]': 'docked()',
-                    }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1;color:var(--label-secondary)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold)}:host(.fly-topbar--docked) .fly-topbar__sep{color:var(--w28)}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:22px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:22px;max-block-size:22px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
+                    }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-md);gap:6px;font-size:var(--text-sm);line-height:1;color:var(--w55)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{background:var(--w06);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold);letter-spacing:-.006em}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__module-label{letter-spacing:normal}:host(.fly-topbar--docked) .fly-topbar__sep{position:relative;display:inline-block;inline-size:7px;block-size:7px;color:transparent;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__sep{transform:rotate(-135deg)}:host(.fly-topbar--docked) .fly-topbar__actions{display:none}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:14px;max-block-size:14px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], footerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLabel", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }], rows: [{ type: i0.ViewChildren, args: ['row', { isSignal: true }] }], trigger: [{ type: i0.ViewChildren, args: ['trigger', { isSignal: true }] }] } });
 
 /**
@@ -24249,66 +25070,66 @@ class FlySegmentedComponent {
         this.el.nativeElement.querySelectorAll('[role="radio"]')[next]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlySegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlySegmentedComponent, isStandalone: true, selector: "fly-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, ngImport: i0, template: `
-    <div
-      class="seg"
-      [attr.data-variant]="variant()"
-      [attr.role]="multiple() ? 'group' : 'radiogroup'"
-      tabindex="-1"
-      [attr.aria-label]="ariaLabelKey() ? (ariaLabelKey()! | translate) : null"
-      (keydown)="onKey($event)"
-    >
-      @for (opt of options(); track opt.value) {
-        <button
-          type="button"
-          class="seg__btn"
-          [attr.role]="multiple() ? null : 'radio'"
-          [class.on]="isOn(opt.value)"
-          [attr.aria-checked]="multiple() ? null : isOn(opt.value)"
-          [attr.aria-pressed]="multiple() ? isOn(opt.value) : null"
-          [attr.tabindex]="multiple() ? null : tabIndexFor($index)"
-          [disabled]="disabled()"
-          (click)="select(opt.value)"
-        >
-          {{ opt.labelKey | translate }}
-          @if (opt.count !== undefined) {
-            <span class="seg__count">{{ opt.count }}</span>
-          }
-        </button>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlySegmentedComponent, isStandalone: true, selector: "fly-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, ngImport: i0, template: `
+    <div
+      class="seg"
+      [attr.data-variant]="variant()"
+      [attr.role]="multiple() ? 'group' : 'radiogroup'"
+      tabindex="-1"
+      [attr.aria-label]="ariaLabelKey() ? (ariaLabelKey()! | translate) : null"
+      (keydown)="onKey($event)"
+    >
+      @for (opt of options(); track opt.value) {
+        <button
+          type="button"
+          class="seg__btn"
+          [attr.role]="multiple() ? null : 'radio'"
+          [class.on]="isOn(opt.value)"
+          [attr.aria-checked]="multiple() ? null : isOn(opt.value)"
+          [attr.aria-pressed]="multiple() ? isOn(opt.value) : null"
+          [attr.tabindex]="multiple() ? null : tabIndexFor($index)"
+          [disabled]="disabled()"
+          (click)="select(opt.value)"
+        >
+          {{ opt.labelKey | translate }}
+          @if (opt.count !== undefined) {
+            <span class="seg__count">{{ opt.count }}</span>
+          }
+        </button>
+      }
+    </div>
   `, isInline: true, styles: [":host{display:inline-flex}.seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;background:var(--w07);border:1px solid var(--w08);border-radius:99px}.seg[data-variant=pills]{gap:6px;padding:0;background:transparent;border:0;border-radius:0}.seg__btn{display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding:0 13px;border:0;background:transparent;color:var(--w55);font:500 12.5px/1.3 var(--font-family);font-family:inherit;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.seg__btn:hover{color:var(--w85)}.seg__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.seg__btn:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}.seg__btn.on{background:var(--w14);color:var(--w95);font-weight:600;box-shadow:var(--shadow-card),var(--glass2-inset)}.seg__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;padding:1px 5px;background:var(--w1);border-radius:4px;color:var(--w42)}.seg__btn.on .seg__count{color:var(--w55)}.seg[data-variant=pills] .seg__btn{min-block-size:30px;padding:0 12px;border:.5px solid var(--w12);background:var(--w04);color:var(--w7);border-radius:99px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.seg[data-variant=pills] .seg__btn:hover:not(.on){background:var(--w08);border-color:var(--w2);color:var(--ink)}.seg[data-variant=pills] .seg__btn.on{border-color:transparent;background:var(--accent);color:var(--on-accent);font-weight:500;box-shadow:none}.seg[data-variant=pills] .seg__count{padding:2px 6px;border-radius:7px;font-family:var(--font-family);font-size:10.5px;font-weight:var(--fw-semibold);color:inherit}.seg[data-variant=pills] .seg__btn.on .seg__count{background:var(--w22);color:inherit}@media(pointer:coarse){.seg__btn,.seg[data-variant=pills] .seg__btn{min-block-size:44px}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlySegmentedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-segmented', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="seg"
-      [attr.data-variant]="variant()"
-      [attr.role]="multiple() ? 'group' : 'radiogroup'"
-      tabindex="-1"
-      [attr.aria-label]="ariaLabelKey() ? (ariaLabelKey()! | translate) : null"
-      (keydown)="onKey($event)"
-    >
-      @for (opt of options(); track opt.value) {
-        <button
-          type="button"
-          class="seg__btn"
-          [attr.role]="multiple() ? null : 'radio'"
-          [class.on]="isOn(opt.value)"
-          [attr.aria-checked]="multiple() ? null : isOn(opt.value)"
-          [attr.aria-pressed]="multiple() ? isOn(opt.value) : null"
-          [attr.tabindex]="multiple() ? null : tabIndexFor($index)"
-          [disabled]="disabled()"
-          (click)="select(opt.value)"
-        >
-          {{ opt.labelKey | translate }}
-          @if (opt.count !== undefined) {
-            <span class="seg__count">{{ opt.count }}</span>
-          }
-        </button>
-      }
-    </div>
+            args: [{ selector: 'fly-segmented', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="seg"
+      [attr.data-variant]="variant()"
+      [attr.role]="multiple() ? 'group' : 'radiogroup'"
+      tabindex="-1"
+      [attr.aria-label]="ariaLabelKey() ? (ariaLabelKey()! | translate) : null"
+      (keydown)="onKey($event)"
+    >
+      @for (opt of options(); track opt.value) {
+        <button
+          type="button"
+          class="seg__btn"
+          [attr.role]="multiple() ? null : 'radio'"
+          [class.on]="isOn(opt.value)"
+          [attr.aria-checked]="multiple() ? null : isOn(opt.value)"
+          [attr.aria-pressed]="multiple() ? isOn(opt.value) : null"
+          [attr.tabindex]="multiple() ? null : tabIndexFor($index)"
+          [disabled]="disabled()"
+          (click)="select(opt.value)"
+        >
+          {{ opt.labelKey | translate }}
+          @if (opt.count !== undefined) {
+            <span class="seg__count">{{ opt.count }}</span>
+          }
+        </button>
+      }
+    </div>
   `, styles: [":host{display:inline-flex}.seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;background:var(--w07);border:1px solid var(--w08);border-radius:99px}.seg[data-variant=pills]{gap:6px;padding:0;background:transparent;border:0;border-radius:0}.seg__btn{display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding:0 13px;border:0;background:transparent;color:var(--w55);font:500 12.5px/1.3 var(--font-family);font-family:inherit;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.seg__btn:hover{color:var(--w85)}.seg__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.seg__btn:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}.seg__btn.on{background:var(--w14);color:var(--w95);font-weight:600;box-shadow:var(--shadow-card),var(--glass2-inset)}.seg__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;padding:1px 5px;background:var(--w1);border-radius:4px;color:var(--w42)}.seg__btn.on .seg__count{color:var(--w55)}.seg[data-variant=pills] .seg__btn{min-block-size:30px;padding:0 12px;border:.5px solid var(--w12);background:var(--w04);color:var(--w7);border-radius:99px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.seg[data-variant=pills] .seg__btn:hover:not(.on){background:var(--w08);border-color:var(--w2);color:var(--ink)}.seg[data-variant=pills] .seg__btn.on{border-color:transparent;background:var(--accent);color:var(--on-accent);font-weight:500;box-shadow:none}.seg[data-variant=pills] .seg__count{padding:2px 6px;border-radius:7px;font-family:var(--font-family);font-size:10.5px;font-weight:var(--fw-semibold);color:inherit}.seg[data-variant=pills] .seg__btn.on .seg__count{background:var(--w22);color:inherit}@media(pointer:coarse){.seg__btn,.seg[data-variant=pills] .seg__btn{min-block-size:44px}}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }] } });
 
@@ -26067,5 +26888,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, ENTITY_LINK_LAUNCHER, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_CURRENCIES_BRIEF_ENDPOINT, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_MAGIC_BAR_EVENT, FLY_MAGIC_BAR_ICONS, FLY_MAGIC_BAR_STORE_KEY, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SCAN_PENDING_DEFAULT_DELAY_MS, FLY_SCAN_PENDING_MAX_RETRIES, FLY_SCAN_PENDING_STATUS, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_VIEWPORT_IS_MOBILE, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAppUnavailableComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyCurrencyCatalogService, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDeepLinkPrefetchService, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileDownloadService, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMagicActionsComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyMoneyPipe, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStandaloneMagicActionsComponent, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_DEPENDENCY_TYPES, GANTT_ROW_TINT_ALPHA, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MAGIC_BAR_SEARCH_WIDTH_DEFAULT, MAGIC_BAR_SEARCH_WIDTH_MAX, MAGIC_BAR_SEARCH_WIDTH_MIN, MagicBarRegistry, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, NOVA_PRIORITY_TONE, NOVA_STATUS_TONE, NOVA_TONE_FALLBACK, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampMagicBarSearchWidth, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyApiErrorMessage, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatMoney, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, flyUnwrapCurrencies, flyUnwrapLenient, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, magicBarOwnerKey, magicBarSearchText, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, novaPriorityToneVar, novaStatusToneVar, overlayStack, parseCron, parseStepUpChallenge, parseTags, prefetchRemoteStyles, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sectionHintKey, sectionLayout, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, ENTITY_LINK_LAUNCHER, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_CURRENCIES_BRIEF_ENDPOINT, FLY_CURRENCY_DEFAULT_ENDPOINT, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_MAGIC_BAR_EVENT, FLY_MAGIC_BAR_ICONS, FLY_MAGIC_BAR_STORE_KEY, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SCAN_PENDING_DEFAULT_DELAY_MS, FLY_SCAN_PENDING_MAX_RETRIES, FLY_SCAN_PENDING_STATUS, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_STRATEGY_OBJECTIVES_LOOKUP_ENDPOINT, FLY_THEME_MODE_IDS, FLY_VIEWPORT_IS_MOBILE, FLY_WINDOW_BREADCRUMBS_EVENT, FLY_WINDOW_BREADCRUMBS_STORE_KEY, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAppUnavailableComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyCurrencyCatalogService, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDeepLinkPrefetchService, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileDownloadService, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMagicActionsComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyMoneyPipe, FlyPagerComponent, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStandaloneMagicActionsComponent, FlyStateMessageComponent, FlyStrategySelectorComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_DEPENDENCY_TYPES, GANTT_ROW_TINT_ALPHA, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MAGIC_BAR_SEARCH_WIDTH_DEFAULT, MAGIC_BAR_SEARCH_WIDTH_MAX, MAGIC_BAR_SEARCH_WIDTH_MIN, MagicBarRegistry, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, NOVA_PRIORITY_TONE, NOVA_STATUS_TONE, NOVA_TONE_FALLBACK, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowBreadcrumbsRegistry, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext$1 as canGoNext, canGoPrev$1 as canGoPrev, captureFocus, clampMagicBarSearchWidth, clampPage$1 as clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyApiErrorMessage, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatMoney, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, flyUnwrapCurrencies, flyUnwrapCurrency, flyUnwrapLenient, flyUnwrapObjectiveLookup, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, magicBarOwnerKey, magicBarSearchText, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, novaPriorityToneVar, novaStatusToneVar, overlayStack, canGoNext as pagerCanGoNext, canGoPrev as pagerCanGoPrev, clampPage as pagerClampPage, parseCron, parseStepUpChallenge, parseTags, prefetchRemoteStyles, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sectionHintKey, sectionLayout, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
 //# sourceMappingURL=flyos-design-system.mjs.map