@flyos/design-system 3.12.0 → 3.13.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.12.0';
+const FLY_DS_VERSION = '3.13.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -5513,10 +5513,10 @@ class FlyRemoteRouterOutletComponent {
                 provide: FLY_REMOTE_OUTLET_DEPTH,
                 useFactory: () => (inject(FLY_REMOTE_OUTLET_DEPTH, { optional: true, skipSelf: true }) ?? -1) + 1,
             },
-        ], ngImport: i0, template: `
-    @if (rendered(); as cmp) {
-      <ng-container *ngComponentOutlet="cmp" />
-    }
+        ], ngImport: i0, template: `
+    @if (rendered(); as cmp) {
+      <ng-container *ngComponentOutlet="cmp" />
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteRouterOutletComponent, decorators: [{
@@ -5536,10 +5536,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             useFactory: () => (inject(FLY_REMOTE_OUTLET_DEPTH, { optional: true, skipSelf: true }) ?? -1) + 1,
                         },
                     ],
-                    template: `
-    @if (rendered(); as cmp) {
-      <ng-container *ngComponentOutlet="cmp" />
-    }
+                    template: `
+    @if (rendered(); as cmp) {
+      <ng-container *ngComponentOutlet="cmp" />
+    }
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -9989,11 +9989,11 @@ class FlyBlockUiComponent {
         return k && k.length > 0 ? k : 'common.loading';
     }, ...(ngDevMode ? [{ debugName: "resolvedMessageKey" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
+            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
 
 const STATE_KEY = {
@@ -20294,11 +20294,11 @@ class FlyPeoplePickerComponent {
         this.selectionChange.emit(this._selected().map((o) => o.id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", 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 } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\n    @for (o of selected(); track o.id) {\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n          @if (o.avatarUrl) {\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\n          } @else {\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n          }\n        </span>\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n        <button\n          type=\"button\"\n          class=\"fly-people-picker__chip-remove\"\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n          (click)=\"remove(o.id)\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n@if (showSearch()) {\n  <fly-typeahead\n    [searchFn]=\"typeaheadSearchFn\"\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n    [allowFreeText]=\"false\"\n    (selected)=\"onPicked($event)\" />\n} @else {\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n    {{ 'people_picker.change' | translate }}\n  </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_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);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", 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 } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\r\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\r\n    @for (o of selected(); track o.id) {\r\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\r\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\r\n          @if (o.avatarUrl) {\r\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\r\n          } @else {\r\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-people-picker__chip-remove\"\r\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\r\n          (click)=\"remove(o.id)\">\r\n          \u2715\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n@if (showSearch()) {\r\n  <fly-typeahead\r\n    [searchFn]=\"typeaheadSearchFn\"\r\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\r\n    [allowFreeText]=\"false\"\r\n    (selected)=\"onPicked($event)\" />\r\n} @else {\r\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\r\n    {{ 'people_picker.change' | translate }}\r\n  </button>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_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);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\n    @for (o of selected(); track o.id) {\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n          @if (o.avatarUrl) {\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\n          } @else {\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n          }\n        </span>\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n        <button\n          type=\"button\"\n          class=\"fly-people-picker__chip-remove\"\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n          (click)=\"remove(o.id)\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n@if (showSearch()) {\n  <fly-typeahead\n    [searchFn]=\"typeaheadSearchFn\"\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n    [allowFreeText]=\"false\"\n    (selected)=\"onPicked($event)\" />\n} @else {\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n    {{ 'people_picker.change' | translate }}\n  </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_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);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
+            args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\r\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\r\n    @for (o of selected(); track o.id) {\r\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\r\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\r\n          @if (o.avatarUrl) {\r\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\r\n          } @else {\r\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-people-picker__chip-remove\"\r\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\r\n          (click)=\"remove(o.id)\">\r\n          \u2715\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n@if (showSearch()) {\r\n  <fly-typeahead\r\n    [searchFn]=\"typeaheadSearchFn\"\r\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\r\n    [allowFreeText]=\"false\"\r\n    (selected)=\"onPicked($event)\" />\r\n} @else {\r\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\r\n    {{ 'people_picker.change' | translate }}\r\n  </button>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_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);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], excludeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeIds", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], typeahead: [{
                 type: ViewChild,
                 args: [FlyTypeaheadComponent]
@@ -23448,111 +23448,11 @@ class FlyLifecyclePipelineComponent {
     /** i18n key for the `role="list"` accessible name. */
     ariaLabelKey = input.required(...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyLifecyclePipelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyLifecyclePipelineComponent, isStandalone: true, selector: "fly-lifecycle-pipeline", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, rollup: { classPropertyName: "rollup", publicName: "rollup", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <div class="lp">
-      <div class="lp__row" role="list" [attr.aria-label]="ariaLabelKey() | translate">
-        @for (
-          step of steps();
-          track step.label ?? step.labelKey;
-          let i = $index;
-          let last = $last
-        ) {
-          <div
-            class="lp__step"
-            [class.lp__step--current]="step.current"
-            role="listitem"
-            [attr.aria-current]="step.current ? 'step' : null"
-          >
-            <span class="lp__index" [attr.data-tone]="step.tone">
-              @if (step.tone === 'success') {
-                <i class="pi pi-check" aria-hidden="true"></i>
-              } @else {
-                {{ i + 1 }}
-              }
-            </span>
-            <span class="lp__name">
-              @if (step.label) {
-                {{ step.label }}
-              } @else if (step.labelKey) {
-                {{ step.labelKey | translate }}
-              }
-            </span>
-            <fly-chip [tone]="step.tone">{{ step.statusLabelKey | translate }}</fly-chip>
-            @if (step.progress) {
-              <span class="lp__progress">{{ step.progress }}</span>
-            }
-          </div>
-          @if (!last) {
-            <span class="lp__connector" aria-hidden="true"></span>
-          }
-        }
-      </div>
-      @if (rollup().length) {
-        <div class="lp__rollup">
-          @for (item of rollup(); track item.labelKey) {
-            <span class="lp__rollup-item">
-              <span class="lp__rollup-label">{{ item.labelKey | translate }}</span>
-              <span class="lp__rollup-value">{{ item.value }}</span>
-            </span>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block}.lp{display:flex;flex-direction:column;gap:var(--sp-3)}.lp__row{display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--sp-3)}.lp__step{display:flex;align-items:center;gap:var(--sp-2);padding:6px 10px;border-radius:var(--r-lg);border:1px solid transparent}.lp__step--current{border-color:var(--accent-fill);background:var(--tint-sel)}.lp__index{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:999px;font-family:var(--font-family);font-size:11px;font-weight:var(--fw-bold);line-height:1}.lp__index .pi{font-size:10px}.lp__index[data-tone=neutral]{background:var(--w06);color:var(--w85)}.lp__index[data-tone=accent]{background:var(--accent-fill);color:var(--on-accent-fill)}.lp__index[data-tone=success]{background:var(--success-bg);color:var(--success)}.lp__index[data-tone=warning]{background:var(--warning-bg);color:var(--warning-fg)}.lp__index[data-tone=danger]{background:var(--danger-bg);color:var(--danger)}.lp__name{font-family:var(--font-family);font-weight:var(--fw-medium);font-size:var(--text-sm);color:var(--ink);white-space:nowrap}.lp__step--current .lp__name{font-weight:var(--fw-bold)}.lp__progress{font-family:var(--font-family);font-size:var(--text-xs);color:var(--w45);font-variant-numeric:tabular-nums}.lp__connector{flex:1 1 32px;min-width:20px;height:1px;background:var(--w16);margin-inline:2px}.lp__rollup{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding-block-start:var(--sp-2);border-block-start:1px solid var(--w06)}.lp__rollup-item{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-family);font-size:var(--text-xs)}.lp__rollup-label{color:var(--w45)}.lp__rollup-value{color:var(--w85);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: FlyChipComponent, selector: "fly-chip", inputs: ["tone"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyLifecyclePipelineComponent, isStandalone: true, selector: "fly-lifecycle-pipeline", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, rollup: { classPropertyName: "rollup", publicName: "rollup", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"lp\">\n  <div class=\"lp__row\" role=\"list\" [attr.aria-label]=\"ariaLabelKey() | translate\">\n    @for (\n      step of steps();\n      track step.label ?? step.labelKey;\n      let i = $index;\n      let last = $last\n    ) {\n      <div\n        class=\"lp__step\"\n        [class.lp__step--current]=\"step.current\"\n        role=\"listitem\"\n        [attr.aria-current]=\"step.current ? 'step' : null\"\n      >\n        <span class=\"lp__index\" [attr.data-tone]=\"step.tone\">\n          @if (step.tone === 'success') {\n            <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"lp__name\">\n          @if (step.label) {\n            {{ step.label }}\n          } @else if (step.labelKey) {\n            {{ step.labelKey | translate }}\n          }\n        </span>\n        <fly-chip [tone]=\"step.tone\">{{ step.statusLabelKey | translate }}</fly-chip>\n        @if (step.progress) {\n          <span class=\"lp__progress\">{{ step.progress }}</span>\n        }\n      </div>\n      @if (!last) {\n        <span class=\"lp__connector\" aria-hidden=\"true\"></span>\n      }\n    }\n  </div>\n  @if (rollup().length) {\n    <div class=\"lp__rollup\">\n      @for (item of rollup(); track item.labelKey) {\n        <span class=\"lp__rollup-item\">\n          <span class=\"lp__rollup-label\">{{ item.labelKey | translate }}</span>\n          <span class=\"lp__rollup-value\">{{ item.value }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.lp{display:flex;flex-direction:column;gap:var(--sp-3)}.lp__row{display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--sp-3)}.lp__step{display:flex;align-items:center;gap:var(--sp-2);padding:6px 10px;border-radius:var(--r-lg);border:1px solid transparent}.lp__step--current{border-color:var(--accent-fill);background:var(--tint-sel)}.lp__index{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:999px;font-family:var(--font-family);font-size:11px;font-weight:var(--fw-bold);line-height:1}.lp__index .pi{font-size:10px}.lp__index[data-tone=neutral]{background:var(--w06);color:var(--w85)}.lp__index[data-tone=accent]{background:var(--accent-fill);color:var(--on-accent-fill)}.lp__index[data-tone=success]{background:var(--success-bg);color:var(--success)}.lp__index[data-tone=warning]{background:var(--warning-bg);color:var(--warning-fg)}.lp__index[data-tone=danger]{background:var(--danger-bg);color:var(--danger)}.lp__name{font-family:var(--font-family);font-weight:var(--fw-medium);font-size:var(--text-sm);color:var(--ink);white-space:nowrap}.lp__step--current .lp__name{font-weight:var(--fw-bold)}.lp__progress{font-family:var(--font-family);font-size:var(--text-xs);color:var(--w45);font-variant-numeric:tabular-nums}.lp__connector{flex:1 1 32px;min-width:20px;height:1px;background:var(--w16);margin-inline:2px}.lp__rollup{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding-block-start:var(--sp-2);border-block-start:1px solid var(--w06)}.lp__rollup-item{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-family);font-size:var(--text-xs)}.lp__rollup-label{color:var(--w45)}.lp__rollup-value{color:var(--w85);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: FlyChipComponent, selector: "fly-chip", inputs: ["tone"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyLifecyclePipelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-lifecycle-pipeline', standalone: true, imports: [TranslatePipe, FlyChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="lp">
-      <div class="lp__row" role="list" [attr.aria-label]="ariaLabelKey() | translate">
-        @for (
-          step of steps();
-          track step.label ?? step.labelKey;
-          let i = $index;
-          let last = $last
-        ) {
-          <div
-            class="lp__step"
-            [class.lp__step--current]="step.current"
-            role="listitem"
-            [attr.aria-current]="step.current ? 'step' : null"
-          >
-            <span class="lp__index" [attr.data-tone]="step.tone">
-              @if (step.tone === 'success') {
-                <i class="pi pi-check" aria-hidden="true"></i>
-              } @else {
-                {{ i + 1 }}
-              }
-            </span>
-            <span class="lp__name">
-              @if (step.label) {
-                {{ step.label }}
-              } @else if (step.labelKey) {
-                {{ step.labelKey | translate }}
-              }
-            </span>
-            <fly-chip [tone]="step.tone">{{ step.statusLabelKey | translate }}</fly-chip>
-            @if (step.progress) {
-              <span class="lp__progress">{{ step.progress }}</span>
-            }
-          </div>
-          @if (!last) {
-            <span class="lp__connector" aria-hidden="true"></span>
-          }
-        }
-      </div>
-      @if (rollup().length) {
-        <div class="lp__rollup">
-          @for (item of rollup(); track item.labelKey) {
-            <span class="lp__rollup-item">
-              <span class="lp__rollup-label">{{ item.labelKey | translate }}</span>
-              <span class="lp__rollup-value">{{ item.value }}</span>
-            </span>
-          }
-        </div>
-      }
-    </div>
-  `, styles: [":host{display:block}.lp{display:flex;flex-direction:column;gap:var(--sp-3)}.lp__row{display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--sp-3)}.lp__step{display:flex;align-items:center;gap:var(--sp-2);padding:6px 10px;border-radius:var(--r-lg);border:1px solid transparent}.lp__step--current{border-color:var(--accent-fill);background:var(--tint-sel)}.lp__index{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:999px;font-family:var(--font-family);font-size:11px;font-weight:var(--fw-bold);line-height:1}.lp__index .pi{font-size:10px}.lp__index[data-tone=neutral]{background:var(--w06);color:var(--w85)}.lp__index[data-tone=accent]{background:var(--accent-fill);color:var(--on-accent-fill)}.lp__index[data-tone=success]{background:var(--success-bg);color:var(--success)}.lp__index[data-tone=warning]{background:var(--warning-bg);color:var(--warning-fg)}.lp__index[data-tone=danger]{background:var(--danger-bg);color:var(--danger)}.lp__name{font-family:var(--font-family);font-weight:var(--fw-medium);font-size:var(--text-sm);color:var(--ink);white-space:nowrap}.lp__step--current .lp__name{font-weight:var(--fw-bold)}.lp__progress{font-family:var(--font-family);font-size:var(--text-xs);color:var(--w45);font-variant-numeric:tabular-nums}.lp__connector{flex:1 1 32px;min-width:20px;height:1px;background:var(--w16);margin-inline:2px}.lp__rollup{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding-block-start:var(--sp-2);border-block-start:1px solid var(--w06)}.lp__rollup-item{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-family);font-size:var(--text-xs)}.lp__rollup-label{color:var(--w45)}.lp__rollup-value{color:var(--w85);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}\n"] }]
+            args: [{ selector: 'fly-lifecycle-pipeline', standalone: true, imports: [TranslatePipe, FlyChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lp\">\n  <div class=\"lp__row\" role=\"list\" [attr.aria-label]=\"ariaLabelKey() | translate\">\n    @for (\n      step of steps();\n      track step.label ?? step.labelKey;\n      let i = $index;\n      let last = $last\n    ) {\n      <div\n        class=\"lp__step\"\n        [class.lp__step--current]=\"step.current\"\n        role=\"listitem\"\n        [attr.aria-current]=\"step.current ? 'step' : null\"\n      >\n        <span class=\"lp__index\" [attr.data-tone]=\"step.tone\">\n          @if (step.tone === 'success') {\n            <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n          } @else {\n            {{ i + 1 }}\n          }\n        </span>\n        <span class=\"lp__name\">\n          @if (step.label) {\n            {{ step.label }}\n          } @else if (step.labelKey) {\n            {{ step.labelKey | translate }}\n          }\n        </span>\n        <fly-chip [tone]=\"step.tone\">{{ step.statusLabelKey | translate }}</fly-chip>\n        @if (step.progress) {\n          <span class=\"lp__progress\">{{ step.progress }}</span>\n        }\n      </div>\n      @if (!last) {\n        <span class=\"lp__connector\" aria-hidden=\"true\"></span>\n      }\n    }\n  </div>\n  @if (rollup().length) {\n    <div class=\"lp__rollup\">\n      @for (item of rollup(); track item.labelKey) {\n        <span class=\"lp__rollup-item\">\n          <span class=\"lp__rollup-label\">{{ item.labelKey | translate }}</span>\n          <span class=\"lp__rollup-value\">{{ item.value }}</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.lp{display:flex;flex-direction:column;gap:var(--sp-3)}.lp__row{display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--sp-3)}.lp__step{display:flex;align-items:center;gap:var(--sp-2);padding:6px 10px;border-radius:var(--r-lg);border:1px solid transparent}.lp__step--current{border-color:var(--accent-fill);background:var(--tint-sel)}.lp__index{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:999px;font-family:var(--font-family);font-size:11px;font-weight:var(--fw-bold);line-height:1}.lp__index .pi{font-size:10px}.lp__index[data-tone=neutral]{background:var(--w06);color:var(--w85)}.lp__index[data-tone=accent]{background:var(--accent-fill);color:var(--on-accent-fill)}.lp__index[data-tone=success]{background:var(--success-bg);color:var(--success)}.lp__index[data-tone=warning]{background:var(--warning-bg);color:var(--warning-fg)}.lp__index[data-tone=danger]{background:var(--danger-bg);color:var(--danger)}.lp__name{font-family:var(--font-family);font-weight:var(--fw-medium);font-size:var(--text-sm);color:var(--ink);white-space:nowrap}.lp__step--current .lp__name{font-weight:var(--fw-bold)}.lp__progress{font-family:var(--font-family);font-size:var(--text-xs);color:var(--w45);font-variant-numeric:tabular-nums}.lp__connector{flex:1 1 32px;min-width:20px;height:1px;background:var(--w16);margin-inline:2px}.lp__rollup{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);padding-block-start:var(--sp-2);border-block-start:1px solid var(--w06)}.lp__rollup-item{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-family);font-size:var(--text-xs)}.lp__rollup-label{color:var(--w45)}.lp__rollup-value{color:var(--w85);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], rollup: [{ type: i0.Input, args: [{ isSignal: true, alias: "rollup", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: true }] }] } });
 
 function canGoPrev$1(page) {
@@ -24802,30 +24702,30 @@ class FlyDetailCardComponent {
     /** Drop the body padding — for a child that brings its own list/table chrome. */
     flush = input(false, ...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (titleKey() || hasProjectedTitle()) {
-      <fly-section-header [titleKey]="titleKey()">
-        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
-        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
-      </fly-section-header>
-    }
-    <div class="dc__body" [class.dc__body--flush]="flush()">
-      <ng-content />
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
   `, isInline: true, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;animation:itemIn .3s var(--nova-ease-micro) both}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"], dependencies: [{ kind: "component", type: FlySectionHeaderComponent, selector: "fly-section-header", inputs: ["titleKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (titleKey() || hasProjectedTitle()) {
-      <fly-section-header [titleKey]="titleKey()">
-        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
-        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
-      </fly-section-header>
-    }
-    <div class="dc__body" [class.dc__body--flush]="flush()">
-      <ng-content />
-    </div>
+            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
   `, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;animation:itemIn .3s var(--nova-ease-micro) both}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"] }]
         }], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], hasProjectedTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedTitle", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
 
@@ -24953,108 +24853,108 @@ class FlyDetailShellComponent {
         buttons?.[next]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="ds__layout">
-      <aside class="ds__aside">
-        <div class="ds__pinned">
-          <ng-content select="[detail-aside]" />
-        </div>
-
-        @if (sections().length > 0) {
-          <div
-            #rail
-            class="ds__rail"
-            role="tablist"
-            tabindex="-1"
-            [attr.aria-orientation]="'vertical'"
-            [attr.aria-label]="sectionsLabelKey() | translate"
-            (keydown)="onKey($event)"
-          >
-            @for (s of sections(); track s.id) {
-              <button
-                type="button"
-                class="ds__tab"
-                role="tab"
-                [id]="tabId(s.id)"
-                [class.ds__tab--active]="activeId() === s.id"
-                [attr.aria-selected]="activeId() === s.id"
-                [attr.aria-controls]="panelId()"
-                [attr.tabindex]="activeId() === s.id ? 0 : -1"
-                [attr.title]="s.labelKey | translate"
-                (click)="select(s.id)"
-              >
-                @if (s.icon) {
-                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
-                }
-                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
-              </button>
-            }
-          </div>
-        }
-      </aside>
-
-      <div
-        class="ds__panel"
-        [id]="panelId()"
-        [attr.role]="sections().length ? 'tabpanel' : null"
-        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
-      >
-        <ng-content />
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--w06);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid;outline-color:var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (width <= 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}@media(width<=980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}\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: FlyDetailShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="ds__layout">
-      <aside class="ds__aside">
-        <div class="ds__pinned">
-          <ng-content select="[detail-aside]" />
-        </div>
-
-        @if (sections().length > 0) {
-          <div
-            #rail
-            class="ds__rail"
-            role="tablist"
-            tabindex="-1"
-            [attr.aria-orientation]="'vertical'"
-            [attr.aria-label]="sectionsLabelKey() | translate"
-            (keydown)="onKey($event)"
-          >
-            @for (s of sections(); track s.id) {
-              <button
-                type="button"
-                class="ds__tab"
-                role="tab"
-                [id]="tabId(s.id)"
-                [class.ds__tab--active]="activeId() === s.id"
-                [attr.aria-selected]="activeId() === s.id"
-                [attr.aria-controls]="panelId()"
-                [attr.tabindex]="activeId() === s.id ? 0 : -1"
-                [attr.title]="s.labelKey | translate"
-                (click)="select(s.id)"
-              >
-                @if (s.icon) {
-                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
-                }
-                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
-              </button>
-            }
-          </div>
-        }
-      </aside>
-
-      <div
-        class="ds__panel"
-        [id]="panelId()"
-        [attr.role]="sections().length ? 'tabpanel' : null"
-        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
-      >
-        <ng-content />
-      </div>
-    </div>
+            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
   `, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--w06);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid;outline-color:var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (width <= 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}@media(width<=980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}\n"] }]
         }], propDecorators: { rail: [{ type: i0.ViewChild, args: ['rail', { isSignal: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sectionsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsLabelKey", required: false }] }] } });