@almatar/smart-booking-dashboard 0.0.2-alpha.2 → 0.0.2-alpha.3

package/fesm2022/almatar-smart-booking-dashboard.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, model, output, Component, computed, signal, effect, EventEmitter, Inject, Optional, Input, Output, NgModule, ChangeDetectionStrategy, DestroyRef, Pipe, HostListener } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, model, output, Component, computed, signal, effect, EventEmitter, Inject, Optional, Input, Output, NgModule, ChangeDetectionStrategy, DestroyRef, Pipe, untracked, Injector, runInInjectionContext, HostListener } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { NgTemplateOutlet, NgClass, DOCUMENT, CommonModule, LowerCasePipe, UpperCasePipe, NgIf } from '@angular/common';
 import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { HttpClient, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, catchError as catchError$1 } from 'rxjs/operators';
+import { map, filter, catchError as catchError$1, switchMap, debounceTime, distinctUntilChanged, tap, finalize } from 'rxjs/operators';
 import { ToastrService } from 'ngx-toastr';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -19,9 +19,8 @@ import * as i1$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i4 from 'primeng/sidebar';
-import { SidebarModule } from 'primeng/sidebar';
-import { of, BehaviorSubject, Subject, catchError, map as map$1, throwError } from 'rxjs';
+import { of, BehaviorSubject, Subject, catchError, map as map$1, throwError, EMPTY, isObservable, firstValueFrom } from 'rxjs';
+import * as i2$2 from 'primeng/api';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$4 from '@angular/router';
 import { ActivatedRoute, RouterModule } from '@angular/router';
@@ -32,11 +31,12 @@ import { TagModule } from 'primeng/tag';
 import * as i5$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i2$2 from 'primeng/api';
 
 const SBD_DEFAULT_CONFIG = {
     apiBase: '/api',
     platform: 'BO',
+    webBaseUrl: '',
+    reissueEnabled: false,
 };
 const SBD_CONFIG = new InjectionToken('SBD_CONFIG', {
     providedIn: 'root',
@@ -113,14 +113,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const SBD_TOAST_HANDLER = new InjectionToken('SBD_TOAST_HANDLER');
 class SbdToastService {
     constructor() {
-        this.toastr = inject(ToastrService);
+        // The host's handler wins; ngx-toastr is the fallback and is optional, so a host that never configured it still works.
+        this.handler = inject(SBD_TOAST_HANDLER, { optional: true }) ?? inject(ToastrService, { optional: true });
+    }
+    success(msg) { this.show('success', msg); }
+    error(msg) { this.show('error', msg); }
+    info(msg) { this.show('info', msg); }
+    warning(msg) { this.show('warning', msg); }
+    show(kind, msg) {
+        if (this.handler)
+            this.handler[kind](msg);
+        else
+            console.warn(`[smart-booking-dashboard] ${kind}: ${msg}`);
     }
-    success(msg) { this.toastr.success(msg); }
-    error(msg) { this.toastr.error(msg); }
-    info(msg) { this.toastr.info(msg); }
-    warning(msg) { this.toastr.warning(msg); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdToastService, providedIn: 'root' }); }
 }
@@ -1216,14 +1224,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class SbdWorkflowActionsComponent {
     constructor() {
         this.bookingId = input.required();
+        this.showReissue = input(false);
         this.cancelBooking = output();
+        this.reissue = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdWorkflowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdWorkflowActionsComponent, isStandalone: true, selector: "app-sbd-workflow-actions", inputs: { bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cancelBooking: "cancelBooking" }, ngImport: i0, template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdWorkflowActionsComponent, isStandalone: true, selector: "app-sbd-workflow-actions", inputs: { bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: true, transformFunction: null }, showReissue: { classPropertyName: "showReissue", publicName: "showReissue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelBooking: "cancelBooking", reissue: "reissue" }, ngImport: i0, template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  @if (showReissue()) {\n    <button pButton label=\"Reissue Booking\" icon=\"pi pi-refresh\"\n      class=\"p-button-outlined p-button-sm\"\n      (click)=\"reissue.emit()\">\n    </button>\n  }\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdWorkflowActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sbd-workflow-actions', standalone: true, imports: [ButtonModule, TooltipModule], template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"] }]
+            args: [{ selector: 'app-sbd-workflow-actions', standalone: true, imports: [ButtonModule, TooltipModule], template: "<div class=\"sbd-workflow-actions\">\n  <button pButton label=\"Cancel Booking\" icon=\"pi pi-times-circle\"\n    class=\"p-button-danger p-button-outlined p-button-sm\"\n    (click)=\"cancelBooking.emit()\">\n  </button>\n\n  @if (showReissue()) {\n    <button pButton label=\"Reissue Booking\" icon=\"pi pi-refresh\"\n      class=\"p-button-outlined p-button-sm\"\n      (click)=\"reissue.emit()\">\n    </button>\n  }\n\n  <button pButton label=\"Send Ticket\" icon=\"pi pi-send\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Flight Status\" icon=\"pi pi-chart-bar\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Select Seat\" icon=\"pi pi-th-large\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Baggage\" icon=\"pi pi-briefcase\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n\n  <button pButton label=\"Add Service\" icon=\"pi pi-plus-circle\"\n    class=\"p-button-outlined p-button-sm p-button-secondary\"\n    [disabled]=\"true\"\n    pTooltip=\"Coming soon\" tooltipPosition=\"bottom\">\n  </button>\n</div>\n", styles: [".sbd-workflow-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n"] }]
         }] });
 
 class SbdActionCardComponent {
@@ -2880,11 +2890,11 @@ class AsideComponent {
         this.document.body.style.overflow = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AsideComponent, deps: [{ token: SharedService }, { token: DOCUMENT }, { token: AsideBackButtonService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AsideComponent, isStandalone: true, selector: "almatar-aside", inputs: { asideTitle: "asideTitle", showHeader: "showHeader", headerTemplate: "headerTemplate", whiteHeader: "whiteHeader", showAside: "showAside", width: "width", modal: "modal", closable: "closable", transitionOptions: "transitionOptions", closeIconTemplate: "closeIconTemplate", interceptClose: "interceptClose" }, outputs: { onClose: "onClose", closeRequested: "closeRequested" }, ngImport: i0, template: "<!-- `position=\"right\"` is intentional for both directions: PrimeNG's flex\n     positioning is writing-direction aware, so under dir=\"rtl\" (Arabic) it\n     mirrors to the visual left on its own. Passing \"left\" for Arabic\n     double-flips it back to the right. -->\n<p-sidebar\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  (onShow)=\"onDialogShow()\"\n  [showCloseIcon]=\"closable && !isInAppView\"\n  (onHide)=\"onCloseModal()\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"right\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n  [modal]=\"modal\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead\n           of) PrimeNG's own close (X) button \u2014 so both are visible together,\n           and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children \u2014 otherwise\n             `.p-sidebar-header`'s `justify-content: space-between` spreads the\n             arrow and title apart instead of keeping them side by side. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  @if (closeIconTemplate) {\n    <!-- Custom close icon template -->\n    <ng-template pTemplate=\"closeicon\">\n      <ng-container *ngTemplateOutlet=\"closeIconTemplate\"></ng-container>\n    </ng-template>\n  } @else if (isWhiteHeader) {\n    <ng-template pTemplate=\"closeicon\">\n      <img src=\"/assets/icons/close-dark.svg\" alt=\"\" width=\"24\" height=\"24\" />\n    </ng-template>\n  }\n\n  <ng-content></ng-content>\n</p-sidebar>\n", styles: [".almatar_aside ::ng-deep .p-sidebar{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-sidebar{width:100vw!important;margin:auto!important}}.almatar_aside ::ng-deep .p-sidebar-content{height:100vh}.almatar_aside ::ng-deep .p-sidebar-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-sidebar-header{background:var(--almatar-secondary-surface);border:none}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content,.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-sidebar-content{background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-sidebar-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AsideComponent, isStandalone: true, selector: "almatar-aside", inputs: { asideTitle: "asideTitle", showHeader: "showHeader", headerTemplate: "headerTemplate", whiteHeader: "whiteHeader", showAside: "showAside", width: "width", modal: "modal", closable: "closable", transitionOptions: "transitionOptions", interceptClose: "interceptClose" }, outputs: { onClose: "onClose", closeRequested: "closeRequested" }, ngImport: i0, template: "<!-- A side panel built on `p-dialog` with `position=\"right\"`, not on PrimeNG's sidebar/drawer: `p-dialog` exists with\n     the same name in PrimeNG 14 (the backoffice) and 20 (Helix), while `primeng/sidebar` was removed in 20 and\n     `primeng/drawer` does not exist in 14.\n     `position=\"right\"` is intentional for both directions: the flex positioning is writing-direction aware, so\n     under dir=\"rtl\" (Arabic) it mirrors to the visual left on its own. Passing \"left\" for Arabic double-flips it\n     back to the right. -->\n<p-dialog\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  position=\"right\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  (onShow)=\"onDialogShow()\"\n  (onHide)=\"onCloseModal()\"\n  [modal]=\"modal\"\n  [closable]=\"closable && !isInAppView\"\n  [showHeader]=\"showHeader\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead of) the dialog's own close (X)\n           button, so both are visible together and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children: the header's `justify-content: space-between`\n             would otherwise spread the arrow and the title apart. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  <ng-content></ng-content>\n</p-dialog>\n", styles: [".almatar_aside ::ng-deep .p-dialog{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-dialog{width:100vw!important}}.almatar_aside ::ng-deep .p-dialog-mask.p-component-overlay,.almatar_aside ::ng-deep .p-dialog-mask.p-overlay-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-dialog-header{background:var(--almatar-secondary-surface);border:none;border-radius:0;padding:1rem 1.25rem}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-dialog-content{height:100%;flex-grow:1;background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-dialog-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AsideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'almatar-aside', standalone: true, imports: [CommonModule, SidebarModule], template: "<!-- `position=\"right\"` is intentional for both directions: PrimeNG's flex\n     positioning is writing-direction aware, so under dir=\"rtl\" (Arabic) it\n     mirrors to the visual left on its own. Passing \"left\" for Arabic\n     double-flips it back to the right. -->\n<p-sidebar\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  (onShow)=\"onDialogShow()\"\n  [showCloseIcon]=\"closable && !isInAppView\"\n  (onHide)=\"onCloseModal()\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"right\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n  [modal]=\"modal\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead\n           of) PrimeNG's own close (X) button \u2014 so both are visible together,\n           and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children \u2014 otherwise\n             `.p-sidebar-header`'s `justify-content: space-between` spreads the\n             arrow and title apart instead of keeping them side by side. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"p-sidebar-header-content\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  @if (closeIconTemplate) {\n    <!-- Custom close icon template -->\n    <ng-template pTemplate=\"closeicon\">\n      <ng-container *ngTemplateOutlet=\"closeIconTemplate\"></ng-container>\n    </ng-template>\n  } @else if (isWhiteHeader) {\n    <ng-template pTemplate=\"closeicon\">\n      <img src=\"/assets/icons/close-dark.svg\" alt=\"\" width=\"24\" height=\"24\" />\n    </ng-template>\n  }\n\n  <ng-content></ng-content>\n</p-sidebar>\n", styles: [".almatar_aside ::ng-deep .p-sidebar{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-sidebar{width:100vw!important;margin:auto!important}}.almatar_aside ::ng-deep .p-sidebar-content{height:100vh}.almatar_aside ::ng-deep .p-sidebar-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-sidebar-header{background:var(--almatar-secondary-surface);border:none}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content,.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-sidebar-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-sidebar-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-sidebar-content{background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-sidebar-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-sidebar-header .p-sidebar-header-content{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"] }]
+            args: [{ selector: 'almatar-aside', standalone: true, imports: [CommonModule, DialogModule], template: "<!-- A side panel built on `p-dialog` with `position=\"right\"`, not on PrimeNG's sidebar/drawer: `p-dialog` exists with\n     the same name in PrimeNG 14 (the backoffice) and 20 (Helix), while `primeng/sidebar` was removed in 20 and\n     `primeng/drawer` does not exist in 14.\n     `position=\"right\"` is intentional for both directions: the flex positioning is writing-direction aware, so\n     under dir=\"rtl\" (Arabic) it mirrors to the visual left on its own. Passing \"left\" for Arabic double-flips it\n     back to the right. -->\n<p-dialog\n  class=\"almatar_aside\"\n  [ngClass]=\"{ 'almatar_aside--white-header': isWhiteHeader }\"\n  position=\"right\"\n  [visible]=\"showAside\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  (onShow)=\"onDialogShow()\"\n  (onHide)=\"onCloseModal()\"\n  [modal]=\"modal\"\n  [closable]=\"closable && !isInAppView\"\n  [showHeader]=\"showHeader\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: width || (isWhiteHeader ? '580px' : '490px') }\"\n  [transitionOptions]=\"transitionOptions\"\n>\n  @if (showHeader) {\n    @if (showBackButton) {\n      <!-- Rendered into the header's leading content, alongside (not instead of) the dialog's own close (X)\n           button, so both are visible together and the X keeps its normal close behavior untouched. -->\n      <ng-template pTemplate=\"header\">\n        <!-- One flex group, not two separate header children: the header's `justify-content: space-between`\n             would otherwise spread the arrow and the title apart. -->\n        <div class=\"almatar-aside__back-header\">\n          <i\n            class=\"almatar-aside__back-icon\"\n            [class]=\"backIconClass\"\n            (click)=\"onBackIconClick($event)\"\n          ></i>\n          <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n        </div>\n      </ng-template>\n    } @else if (headerTemplate) {\n      <ng-template pTemplate=\"header\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-template>\n    } @else {\n      <ng-template pTemplate=\"header\">\n        <span class=\"almatar-aside__title\">{{ asideTitle }}</span>\n      </ng-template>\n    }\n  }\n\n  <ng-content></ng-content>\n</p-dialog>\n", styles: [".almatar_aside ::ng-deep .p-dialog{margin:0!important;height:100svh;max-height:100svh!important;border-radius:0;border:none;transform:unset}@media (max-width: 768px){.almatar_aside ::ng-deep .p-dialog{width:100vw!important}}.almatar_aside ::ng-deep .p-dialog-mask.p-component-overlay,.almatar_aside ::ng-deep .p-dialog-mask.p-overlay-mask{background-color:#0000008a}.almatar_aside ::ng-deep .p-dialog-header{background:var(--almatar-secondary-surface);border:none;border-radius:0;padding:1rem 1.25rem}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-secondary-text-on-surface);font-size:calc(21 * var(--almatar-font-size-ratio, 1) * 1px);margin:0;font-weight:var(--almatar-font-weight-regular)}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-header{display:flex;align-items:center;gap:12px}.almatar_aside ::ng-deep .p-dialog-header .almatar-aside__back-icon{cursor:pointer;font-size:1.25rem;color:var(--almatar-neutral-icon-secondary-static)}.almatar_aside ::ng-deep .p-dialog-header-close-icon,.almatar_aside ::ng-deep .p-dialog-close-icon{font-size:1.5rem!important}.almatar_aside ::ng-deep .p-dialog-content{height:100%;flex-grow:1;background-color:var(--almatar-neutral-surface-card);padding:0}.almatar_aside--white-header ::ng-deep .p-dialog-header{background:var(--almatar-neutral-surface-card);border-bottom:1px solid var(--almatar-primary-border-disabled)}.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-header-close-icon,.almatar_aside--white-header ::ng-deep .p-dialog-header .p-dialog-close-icon{color:var(--almatar-neutral-icon-primary-static)}.almatar_aside--white-header ::ng-deep .p-dialog-header .almatar-aside__title{color:var(--almatar-neutral-text-primary-static);font-weight:var(--almatar-font-weight-regular)}\n"] }]
         }], ctorParameters: () => [{ type: SharedService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2908,8 +2918,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], transitionOptions: [{
                 type: Input
-            }], closeIconTemplate: [{
-                type: Input
             }], interceptClose: [{
                 type: Input
             }], onClose: [{
@@ -3157,6 +3165,7 @@ function resolveMyTripsViewedEntrySourceFromQueryParams(params) {
 class AlmatarHotelAutoCancellationEndpointsService {
     constructor() {
         this.api = inject(ApiService);
+        this.apiBase = inject(SBD_CONFIG).apiBase;
         this.route = inject(ActivatedRoute);
         this.hotelManageBookingService = inject(HotelManageBookingService);
         this._almatarBookingId = signal('');
@@ -3179,8 +3188,15 @@ class AlmatarHotelAutoCancellationEndpointsService {
             }
         });
     }
+    /**
+     * Full URL of an endpoint from the enum. The enum paths start with `/api/`, which is the default `apiBase`; a host
+     * that serves the API somewhere else (Helix: its own API origin) sets `apiBase`, so that part is swapped for it.
+     */
+    resolveEndpoint(path) {
+        return `${this.apiBase.replace(/\/+$/, '')}/${path.replace(/^\/?api\//, '')}`;
+    }
     getRefundDetails(packageIds = []) {
-        const endpoint = AlmatarHotelAutoCancellationEndpointsEnum.getRefundDetails;
+        const endpoint = this.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.getRefundDetails);
         const payload = {
             bookingId: `${this.hotelManageBookingService.selectedHotelBooking.value?.bookingId ||
                 ''}`,
@@ -3472,7 +3488,7 @@ class AlmatarHotelAutoCancellationEndpointsService {
         return allRooms;
     }
     processAutoCancellation(packageIds, refundOption = 'originalPaymentMethod') {
-        const endpoint = AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation;
+        const endpoint = this.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation);
         const uniquePackageIds = [...new Set(packageIds)]; // Ensure unique package IDs
         const payload = {
             bookingId: `${this.hotelManageBookingService.selectedHotelBooking.value?.bookingId ||
@@ -3522,7 +3538,7 @@ class AlmatarHotelAutoCancellationEndpointsService {
         }), catchError((error) => this.handleError(error, 'Failed to process cancellation')));
     }
     processNonRefundableCancellation(packageId, attachmentUrl, language = 'en') {
-        const endpoint = AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation;
+        const endpoint = this.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.processAutoCancellation);
         const payload = {
             bookingId: `${this.hotelManageBookingService.selectedHotelBooking.value?.bookingId ||
                 ''}`,
@@ -3798,7 +3814,7 @@ class AlmatarHotelAutoCancellationNonRefundableRoomComponent {
         this.uploadedFileUrl.set(null);
         const formData = new FormData();
         formData.append('file', file);
-        const req = new HttpRequest('POST', AlmatarHotelAutoCancellationEndpointsEnum.uploadAttachment, formData, {
+        const req = new HttpRequest('POST', this.endpointsService.resolveEndpoint(AlmatarHotelAutoCancellationEndpointsEnum.uploadAttachment), formData, {
             reportProgress: true,
             responseType: 'json',
         });
@@ -5482,7 +5498,7 @@ class AlmatarHotelAutoCancellationComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation", inputs: { selectedHotelBooking: { classPropertyName: "selectedHotelBooking", publicName: "selectedHotelBooking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", cancellationSuccess: "cancellationSuccess", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess", chatWithAgent: "chatWithAgent" }, providers: [
             AlmatarHotelAutoCancellationService,
             AlmatarHotelAutoCancellationEndpointsService
-        ], ngImport: i0, template: "@if (showAside()) {\n  <almatar-aside\n\n    class=\"auto_cancellation_wrapper\"\n    [asideTitle]=\"asideTitle()\"\n    [showAside]=\"showAside()\"\n    [whiteHeader]=\"true\"\n    [showHeader]=\"false\"\n    (onClose)=\"onCloseModal()\"\n  >\n    <!-- Custom Header with 60px height -->\n    <div class=\"auto_cancellation__header\">\n      @if (canGoBack()) {\n        <button class=\"auto_cancellation__header-back\" (click)=\"onGoBack()\" type=\"button\">\n          <i class=\"pi pi-arrow-left\"></i>\n        </button>\n      }\n      <div class=\"auto_cancellation__header-content\">\n        @if (currentStep() === stepEnum.selectRooms) {\n          <h2 class=\"auto_cancellation__header-title\">\n            @if (isSinglePackage()) {\n              Cancel Rooms\n            } @else {\n              Select Rooms\n            }\n          </h2>\n          <p class=\"auto_cancellation__header-subtitle\">\n            @if (isSinglePackage()) {\n              Review and confirm your cancellation\n            } @else {\n              Choose which room(s) you'd like to cancel\n            }\n          </p>\n        } @else if (currentStep() === stepEnum.refundSummary) {\n          <h2 class=\"auto_cancellation__header-title\">Cancel Booking Request</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Review your refund summary and proceed</p>\n        } @else if (currentStep() === stepEnum.refundMethod) {\n          <h2 class=\"auto_cancellation__header-title\">Select Refund Method</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Choose how you'd like to receive your refund</p>\n        } @else {\n          <h2 class=\"auto_cancellation__header-title\">{{ asideTitle() }}</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Complete your booking cancellation</p>\n        }\n      </div>\n      <button class=\"auto_cancellation__header-close\" (click)=\"onCloseModal()\" type=\"button\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"auto_cancellation__component\" [class.isNusk]=\"isNusk()\">\n      @if (isLoading()) {\n        <div class=\"auto_cancellation__loading\">\n          <app-loader></app-loader>\n        </div>\n      }\n\n      @if (currentStep() === stepEnum.selectRooms && !isLoading()) {\n        <almatar-hotel-auto-cancellation-select-rooms\n          [packages]=\"packages()\"\n          [hotelInfo]=\"hotelInfo()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.hotelId\"\n          [currencyCode]=\"selectedHotelBooking()?.currencyCode || 'SAR'\"\n          (continueToCancel)=\"onContinueToCancel($event)\"\n          (closeModal)=\"onCloseModal()\"\n          (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          (chatWithAgent)=\"onChatWithAgent()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundSummary && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-summary\n          [selectedRooms]=\"autoCancellationService.selectedRooms()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.id || selectedHotelBooking()?.hpk\"\n          [hotelInfo]=\"hotelInfo()\"\n          [selectionSkipped]=\"packages().length <= 1\"\n          (keepRoom)=\"onKeepRoom()\"\n          (selectRefundOption)=\"onSelectRefundOption($event)\"\n          (closeModal)=\"onCloseModal()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundMethod && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-method\n          [refundDetailsData]=\"refundDetailsData()\"\n          [currencyObj]=\"currentCurrency()\"\n          [refundMethod]=\"refundMethod()\"\n          [isCancelling]=\"isCancelling()\"\n          (methodSelected)=\"onMethodSelected($event)\"\n          (backRequested)=\"onBackFromRefundMethod()\"\n          (confirmRequested)=\"confirmCancellation()\"\n          (closeModal)=\"onCloseModal()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n        />\n      }\n    </div>\n  </almatar-aside>\n}\n\n@if (showErrorModal()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n@if (showResultOverlay() && resultOverlayData()) {\n  <app-result-overlay\n    [data]=\"resultOverlayData()!\"\n    [show]=\"showResultOverlay()\"\n    (confirm)=\"onResultOverlayConfirm()\"\n    (cancel)=\"onResultOverlayCancel()\"\n  />\n}\n", styles: [".auto_cancellation__header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;gap:16px}.auto_cancellation__header-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.auto_cancellation__header-title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#1e293b;margin:0;line-height:1.3}.auto_cancellation__header-subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;color:#64748b;margin:0;line-height:1.4}.auto_cancellation__header-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease;margin-right:8px}.auto_cancellation__header-back i{font-size:18px;color:#64748b}.auto_cancellation__header-back:hover{background:#f1f5f9}.auto_cancellation__header-back:hover i{color:#1e293b}.auto_cancellation__header-back:active{background:#e2e8f0}.auto_cancellation__header-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease}.auto_cancellation__header-close i{font-size:18px;color:#64748b}.auto_cancellation__header-close:hover{background:#f1f5f9}.auto_cancellation__header-close:hover i{color:#1e293b}.auto_cancellation__header-close:active{background:#e2e8f0}.auto_cancellation__component{height:calc(100% - 60px)}.auto_cancellation__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.auto_cancellation_wrapper ::ng-deep almatar-hotel-auto-cancellation{display:block;height:100%}.auto_cancellation_wrapper ::ng-deep .p-sidebar-header{display:none!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-content{padding-top:0!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-close{display:none!important}.auto_cancellation_wrapper ::ng-deep .almatar_aside .p-dialog-content{background:var(--almatar-neutral-surface-screen-bg)}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn{min-height:48px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.auto_cancellation_wrapper ::ng-deep .main_btn:disabled,.auto_cancellation_wrapper ::ng-deep .btn:disabled{opacity:.5;cursor:not-allowed}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .main_btn:hover:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .main_btn:active:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .btn--secondary{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}.auto_cancellation_wrapper ::ng-deep .btn--secondary:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--secondary:active:not(:disabled){background:#cbd5e1;transform:translateY(0)}.auto_cancellation_wrapper ::ng-deep .btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.auto_cancellation_wrapper ::ng-deep .btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef44444d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b9814d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto_cancellation_wrapper ::ng-deep .isNusk .main_btn,.auto_cancellation_wrapper ::ng-deep .isNusk .btn--primary{background:linear-gradient(135deg,var(--almatar-nusuk-primary),var(--almatar-nusuk-primary))!important;border-radius:33px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["loading", "message"] }, { kind: "component", type: AsideComponent, selector: "almatar-aside", inputs: ["asideTitle", "showHeader", "headerTemplate", "whiteHeader", "showAside", "width", "modal", "closable", "transitionOptions", "closeIconTemplate", "interceptClose"], outputs: ["onClose", "closeRequested"] }, { kind: "component", type: AlmatarHotelAutoCancellationSelectRoomsComponent, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: ["packages", "hotelInfo", "bookingId", "hotelId", "currencyCode"], outputs: ["continueToCancel", "closeModal", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundSummaryComponent, selector: "almatar-hotel-auto-cancellation-refund-summary", inputs: ["selectedRooms", "bookingId", "hotelId", "hotelInfo", "selectionSkipped"], outputs: ["keepRoom", "selectRefundOption", "closeModal"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundMethodComponent, selector: "almatar-hotel-auto-cancellation-refund-method", inputs: ["refundDetailsData", "currencyObj", "refundMethod", "bookingId", "isCancelling", "showBack"], outputs: ["methodSelected", "backRequested", "confirmRequested", "closeModal"] }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: ResultOverlayComponent, selector: "app-result-overlay", inputs: ["data", "show"], outputs: ["confirm", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (showAside()) {\n  <almatar-aside\n\n    class=\"auto_cancellation_wrapper\"\n    [asideTitle]=\"asideTitle()\"\n    [showAside]=\"showAside()\"\n    [whiteHeader]=\"true\"\n    [showHeader]=\"false\"\n    (onClose)=\"onCloseModal()\"\n  >\n    <!-- Custom Header with 60px height -->\n    <div class=\"auto_cancellation__header\">\n      @if (canGoBack()) {\n        <button class=\"auto_cancellation__header-back\" (click)=\"onGoBack()\" type=\"button\">\n          <i class=\"pi pi-arrow-left\"></i>\n        </button>\n      }\n      <div class=\"auto_cancellation__header-content\">\n        @if (currentStep() === stepEnum.selectRooms) {\n          <h2 class=\"auto_cancellation__header-title\">\n            @if (isSinglePackage()) {\n              Cancel Rooms\n            } @else {\n              Select Rooms\n            }\n          </h2>\n          <p class=\"auto_cancellation__header-subtitle\">\n            @if (isSinglePackage()) {\n              Review and confirm your cancellation\n            } @else {\n              Choose which room(s) you'd like to cancel\n            }\n          </p>\n        } @else if (currentStep() === stepEnum.refundSummary) {\n          <h2 class=\"auto_cancellation__header-title\">Cancel Booking Request</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Review your refund summary and proceed</p>\n        } @else if (currentStep() === stepEnum.refundMethod) {\n          <h2 class=\"auto_cancellation__header-title\">Select Refund Method</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Choose how you'd like to receive your refund</p>\n        } @else {\n          <h2 class=\"auto_cancellation__header-title\">{{ asideTitle() }}</h2>\n          <p class=\"auto_cancellation__header-subtitle\">Complete your booking cancellation</p>\n        }\n      </div>\n      <button class=\"auto_cancellation__header-close\" (click)=\"onCloseModal()\" type=\"button\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n\n    <div class=\"auto_cancellation__component\" [class.isNusk]=\"isNusk()\">\n      @if (isLoading()) {\n        <div class=\"auto_cancellation__loading\">\n          <app-loader></app-loader>\n        </div>\n      }\n\n      @if (currentStep() === stepEnum.selectRooms && !isLoading()) {\n        <almatar-hotel-auto-cancellation-select-rooms\n          [packages]=\"packages()\"\n          [hotelInfo]=\"hotelInfo()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.hotelId\"\n          [currencyCode]=\"selectedHotelBooking()?.currencyCode || 'SAR'\"\n          (continueToCancel)=\"onContinueToCancel($event)\"\n          (closeModal)=\"onCloseModal()\"\n          (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n          (chatWithAgent)=\"onChatWithAgent()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundSummary && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-summary\n          [selectedRooms]=\"autoCancellationService.selectedRooms()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n          [hotelId]=\"selectedHotelBooking()?.id || selectedHotelBooking()?.hpk\"\n          [hotelInfo]=\"hotelInfo()\"\n          [selectionSkipped]=\"packages().length <= 1\"\n          (keepRoom)=\"onKeepRoom()\"\n          (selectRefundOption)=\"onSelectRefundOption($event)\"\n          (closeModal)=\"onCloseModal()\"\n        />\n      }\n\n      @if (currentStep() === stepEnum.refundMethod && !isLoading()) {\n        <almatar-hotel-auto-cancellation-refund-method\n          [refundDetailsData]=\"refundDetailsData()\"\n          [currencyObj]=\"currentCurrency()\"\n          [refundMethod]=\"refundMethod()\"\n          [isCancelling]=\"isCancelling()\"\n          (methodSelected)=\"onMethodSelected($event)\"\n          (backRequested)=\"onBackFromRefundMethod()\"\n          (confirmRequested)=\"confirmCancellation()\"\n          (closeModal)=\"onCloseModal()\"\n          [bookingId]=\"selectedHotelBooking()?.bookingId\"\n        />\n      }\n    </div>\n  </almatar-aside>\n}\n\n@if (showErrorModal()) {\n  <div\n    almatar-manage-booking-failed-modal\n    [errorMessage]=\"hotelManageError()\"\n    (cancelEvent)=\"closeAllModals()\"\n    (confirmEvent)=\"closeAllModals()\"\n  ></div>\n}\n\n@if (showResultOverlay() && resultOverlayData()) {\n  <app-result-overlay\n    [data]=\"resultOverlayData()!\"\n    [show]=\"showResultOverlay()\"\n    (confirm)=\"onResultOverlayConfirm()\"\n    (cancel)=\"onResultOverlayCancel()\"\n  />\n}\n", styles: [".auto_cancellation__header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;gap:16px}.auto_cancellation__header-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.auto_cancellation__header-title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:700;color:#1e293b;margin:0;line-height:1.3}.auto_cancellation__header-subtitle{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;color:#64748b;margin:0;line-height:1.4}.auto_cancellation__header-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease;margin-right:8px}.auto_cancellation__header-back i{font-size:18px;color:#64748b}.auto_cancellation__header-back:hover{background:#f1f5f9}.auto_cancellation__header-back:hover i{color:#1e293b}.auto_cancellation__header-back:active{background:#e2e8f0}.auto_cancellation__header-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;flex-shrink:0;transition:all .2s ease}.auto_cancellation__header-close i{font-size:18px;color:#64748b}.auto_cancellation__header-close:hover{background:#f1f5f9}.auto_cancellation__header-close:hover i{color:#1e293b}.auto_cancellation__header-close:active{background:#e2e8f0}.auto_cancellation__component{height:calc(100% - 60px)}.auto_cancellation__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.auto_cancellation_wrapper ::ng-deep almatar-hotel-auto-cancellation{display:block;height:100%}.auto_cancellation_wrapper ::ng-deep .p-sidebar-header{display:none!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-content{padding-top:0!important}.auto_cancellation_wrapper ::ng-deep .p-sidebar-close{display:none!important}.auto_cancellation_wrapper ::ng-deep .almatar_aside .p-dialog-content{background:var(--almatar-neutral-surface-screen-bg)}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn{min-height:48px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.auto_cancellation_wrapper ::ng-deep .main_btn:disabled,.auto_cancellation_wrapper ::ng-deep .btn:disabled{opacity:.5;cursor:not-allowed}.auto_cancellation_wrapper ::ng-deep .main_btn,.auto_cancellation_wrapper ::ng-deep .btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .main_btn:hover:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .main_btn:active:not(:disabled),.auto_cancellation_wrapper ::ng-deep .btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #3b82f64d}.auto_cancellation_wrapper ::ng-deep .btn--secondary{background:#f1f5f9;color:#1e293b;border:1px solid #e2e8f0}.auto_cancellation_wrapper ::ng-deep .btn--secondary:hover:not(:disabled){background:#e2e8f0;border-color:#cbd5e1;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--secondary:active:not(:disabled){background:#cbd5e1;transform:translateY(0)}.auto_cancellation_wrapper ::ng-deep .btn--danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.auto_cancellation_wrapper ::ng-deep .btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #ef44444d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b9814d}.auto_cancellation_wrapper ::ng-deep .main_btn--chat-with-us:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #10b98166;transform:translateY(-1px)}.auto_cancellation_wrapper ::ng-deep .btn__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auto_cancellation_wrapper ::ng-deep .isNusk .main_btn,.auto_cancellation_wrapper ::ng-deep .isNusk .btn--primary{background:linear-gradient(135deg,var(--almatar-nusuk-primary),var(--almatar-nusuk-primary))!important;border-radius:33px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["loading", "message"] }, { kind: "component", type: AsideComponent, selector: "almatar-aside", inputs: ["asideTitle", "showHeader", "headerTemplate", "whiteHeader", "showAside", "width", "modal", "closable", "transitionOptions", "interceptClose"], outputs: ["onClose", "closeRequested"] }, { kind: "component", type: AlmatarHotelAutoCancellationSelectRoomsComponent, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: ["packages", "hotelInfo", "bookingId", "hotelId", "currencyCode"], outputs: ["continueToCancel", "closeModal", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundSummaryComponent, selector: "almatar-hotel-auto-cancellation-refund-summary", inputs: ["selectedRooms", "bookingId", "hotelId", "hotelInfo", "selectionSkipped"], outputs: ["keepRoom", "selectRefundOption", "closeModal"] }, { kind: "component", type: AlmatarHotelAutoCancellationRefundMethodComponent, selector: "almatar-hotel-auto-cancellation-refund-method", inputs: ["refundDetailsData", "currencyObj", "refundMethod", "bookingId", "isCancelling", "showBack"], outputs: ["methodSelected", "backRequested", "confirmRequested", "closeModal"] }, { kind: "ngmodule", type: AlmatarIconModule }, { kind: "component", type: ResultOverlayComponent, selector: "app-result-overlay", inputs: ["data", "show"], outputs: ["confirm", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationComponent, decorators: [{
             type: Component,
@@ -6058,6 +6074,1880 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-sbd-add-note-dialog', standalone: true, imports: [DialogModule, ButtonModule, FormsModule, NgSelectModule], template: "<p-dialog\n  [visible]=\"visible()\"\n  (visibleChange)=\"$event ? null : closed.emit()\"\n  [modal]=\"true\"\n  [blockScroll]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [style]=\"{ width: '480px' }\"\n  styleClass=\"sbd-add-note-dialog-wrapper\"\n  header=\"Add Note\">\n\n  <div class=\"and\">\n\n    <!-- Note type -->\n    <div class=\"and__field\">\n      <label class=\"and__label\">Note type</label>\n      <div class=\"and__type-group\">\n        @for (opt of actionOptions; track opt.value) {\n          <button\n            type=\"button\"\n            class=\"and__type-btn\"\n            [class.and__type-btn--active]=\"action() === opt.value\"\n            (click)=\"action.set(opt.value)\">\n            <i class=\"{{ opt.icon }}\"></i>\n            {{ opt.label }}\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Message -->\n    <div class=\"and__field\">\n      <label class=\"and__label\">\n        Message\n        <span class=\"and__char-count\">{{ message().length }} / 1000</span>\n      </label>\n      <textarea\n        class=\"and__textarea\"\n        [ngModel]=\"message()\"\n        (ngModelChange)=\"message.set($event)\"\n        placeholder=\"Write your note here...\"\n        rows=\"6\"\n        maxlength=\"1000\"\n        [disabled]=\"submitting()\">\n      </textarea>\n    </div>\n\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <button pButton label=\"Cancel\" icon=\"pi pi-times\"\n      class=\"p-button-outlined p-button-secondary p-button-sm\"\n      [disabled]=\"submitting()\"\n      (click)=\"closed.emit()\">\n    </button>\n    <button pButton label=\"Submit Note\"\n      [icon]=\"submitting() ? 'pi pi-spin pi-spinner' : 'pi pi-check'\"\n      class=\"p-button-sm sbd-note-submit\"\n      [disabled]=\"!message().trim() || submitting()\"\n      (click)=\"submit()\">\n    </button>\n  </ng-template>\n\n</p-dialog>\n", styles: [".and{display:flex;flex-direction:column;gap:20px;padding:4px 0}.and__field{display:flex;flex-direction:column;gap:8px}.and__label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.and__char-count{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:#94a3b8}.and__type-group{display:flex;gap:8px}.and__type-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f8fafc;color:#64748b;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s ease}.and__type-btn .pi{font-size:13px}.and__type-btn:hover{border-color:#94a3b8;background:#f1f5f9;color:#334155}.and__type-btn--active{border-color:var(--sbd-primary, #3b82f6);background:#eff6ff;color:#1d4ed8}.and__type-btn--active:hover{border-color:#2563eb;background:#dbeafe}.and__textarea{width:100%;resize:vertical;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13.5px;font-family:inherit;color:#1e2e4a;background:#fff;line-height:1.55;transition:border-color .15s ease;box-sizing:border-box}.and__textarea::placeholder{color:#94a3b8}.and__textarea:focus{outline:none;border-color:var(--sbd-primary, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--sbd-primary, #3b82f6) 10%,transparent)}.and__textarea:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.sbd-note-submit{background:var(--sbd-primary, #007ad9);border-color:var(--sbd-primary, #007ad9)}.sbd-note-submit:enabled:hover{background:color-mix(in srgb,var(--sbd-primary, #007ad9) 88%,#000);border-color:color-mix(in srgb,var(--sbd-primary, #007ad9) 88%,#000)}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Port of the web's `FlightManageBookingService.navigateToOnlineBooking()`
+ * (almatar-consumer-apps) — builds the query params of
+ * `/flights/manage-booking/list`, where the web continues the reissue
+ * (search -> view-price -> choose-flight -> payment).
+ * Keep the param names/values identical to the web.
+ */
+const REISSUE_WEB_PATH = '/flights/manage-booking/list/';
+/** Same strings as the web's `FlightManageBookingAsideTabEnum`. */
+const SERVICE_NAME = {
+    change_date: 'change-travel-date-time',
+    change_route: 'change-flight-route',
+};
+// ── date helpers ────────────────────────────────────────────────────────────
+/** `moment.utc(str).valueOf()` — strings without a timezone are read as UTC. */
+function utcMs(value) {
+    const hasTz = /[zZ]$|[+-]\d{2}:?\d{2}$/.test(value);
+    return new Date(hasTz ? value : `${value}Z`).getTime();
+}
+/** Web's `getAbsoluteDate(date)` -> `YYYY-MM-DD` of the date part. */
+function dateOnly(value) {
+    return value.slice(0, 10);
+}
+/** Web's `getAbsoluteDate(date, true)` -> UTC midnight of that calendar day. */
+function absoluteMs(value) {
+    const [y, m, d] = dateOnly(value).split('-').map(Number);
+    return Date.UTC(y, m - 1, d);
+}
+function capitalize(value) {
+    return value ? value.charAt(0).toUpperCase() + value.slice(1).toLowerCase() : value;
+}
+// ── booking_info -> context ─────────────────────────────────────────────────
+function inferTripType(bi, legs) {
+    const explicit = bi?.IteneraryTripType;
+    if (explicit === 'OneWay' || explicit === 'RoundTrip' || explicit === 'MultiCity')
+        return explicit;
+    if (legs.length <= 1)
+        return 'OneWay';
+    if (legs.length === 2 && legs[1].direction === 'Return')
+        return 'RoundTrip';
+    return 'MultiCity';
+}
+function countPassengers(bi, type) {
+    const list = bi?.passenger_info?.passengers ?? [];
+    return list.filter(p => p?.type === type).length;
+}
+/**
+ * Normalizes the dashboard's `booking_info` (from `/v1/fcr/booking/information`)
+ * into what the URL builder needs. Reads defensively: any field missing in the
+ * BO response falls back to an empty value.
+ */
+function buildReissueBookingContext(bookingData, bookingId) {
+    const bi = bookingData?.data?.booking_info;
+    const legsRaw = bi?.leg_info ?? [];
+    if (!legsRaw.length)
+        return null;
+    const airline = bi?.airline_info ?? [];
+    const legs = legsRaw.map((l, i) => {
+        const segs = airline[i]?.Segments ?? [];
+        const first = segs[0] ?? {};
+        const last = segs[segs.length - 1] ?? first;
+        // Some bookings come back with a sparse `leg_info` — fall back to the
+        // first/last segment (airline_info, then duration/terminal) for the route and times.
+        const durSegs = bi?.duration?.legs?.[i]?.Segments ?? [];
+        const termSegs = bi?.terminal?.[i]?.Segments ?? [];
+        const firstAny = { ...(termSegs[0] ?? {}), ...(durSegs[0] ?? {}), ...first };
+        const lastAny = {
+            ...(termSegs[termSegs.length - 1] ?? {}),
+            ...(durSegs[durSegs.length - 1] ?? {}),
+            ...last,
+        };
+        const originCode = l.LegDepartureAirportCode ?? firstAny.DepartureAirportCode ?? firstAny.SegmentDepartureAirportCode ?? '';
+        const destinationCode = l.LegArrivalAirportCode ?? lastAny.ArrivalAirportCode ?? lastAny.SegmentArrivalAirportCode ?? '';
+        return {
+            // No id in the response -> a positional placeholder so the dialog still works.
+            legId: l.LegID ?? l.legId ?? l.LegId ?? `leg-${i}`,
+            direction: l.LegDirectionality ?? '',
+            originCode,
+            originName: l.LegDepartureAirportName ?? firstAny.DepartureAirportName ?? '',
+            originCityName: l.LegDepartureCityName ?? firstAny.SegmentDepartureCityName ?? firstAny.DepartureAirportName ?? originCode,
+            originCountryName: l.LegDepartureCountryName ?? firstAny.SegmentDepartureCountryName ?? '',
+            destinationCode,
+            destinationName: l.LegArrivalAirportName ?? lastAny.ArrivalAirportName ?? '',
+            destinationCityName: l.LegArrivalCityName ?? lastAny.SegmentArrivalCityName ?? lastAny.ArrivalAirportName ?? destinationCode,
+            destinationCountryName: l.LegArrivalCountryName ?? lastAny.SegmentArrivalCountryName ?? '',
+            departure: l.LegDepartureDateTime ?? firstAny.DepartureDateTime ?? firstAny.SegmentDepartureDateTime ?? firstAny.DepartureTime ?? '',
+            arrival: l.LegArrivalDateTime ?? lastAny.ArrivalDateTime ?? lastAny.SegmentArrivalDateTime ?? lastAny.ArrivalTime ?? '',
+            airline: (l.LegAirlinesNames ?? [])[0] ?? first.AirlineName ?? '',
+            stops: (l.Stops ?? []).length,
+            flightNo: first.AirlineCode ? `${first.AirlineCode}${first.FlightNumber ?? ''}` : '',
+        };
+    });
+    const firstLegRaw = legsRaw[0];
+    const firstSeg = airline[0]?.Segments?.[0] ?? {};
+    return {
+        bookingId: String(bookingId),
+        tripType: inferTripType(bi, legs),
+        legs,
+        adults: countPassengers(bi, 'ADT'),
+        children: countPassengers(bi, 'CNN'),
+        infants: countPassengers(bi, 'INF'),
+        // The BO response may carry no cabin at all (sparse bookings) — default so the web search still gets a class.
+        cabinName: firstLegRaw.LegCabins?.[0]?.Name ?? 'Economy',
+        cabinCode: firstLegRaw.LegCabins?.[0]?.Code ?? 'Y',
+        currency: bi?.currency ?? bi?.payment_status?.currency ?? '',
+        airlineCode: firstSeg.AirlineCode ?? '',
+        flightNumber: String(firstSeg.FlightNumber ?? ''),
+        airlineName: (firstLegRaw.LegAirlinesNames ?? [])[0] ?? firstSeg.AirlineName ?? '',
+        totalStops: (firstLegRaw.Stops ?? []).length,
+    };
+}
+// ── URL builder ─────────────────────────────────────────────────────────────
+function airportCityLabel(name, country, code) {
+    return `${name || code}${country ? ', ' + country : ''}(${code})`;
+}
+function otherLegOf(ctx, legId) {
+    const other = ctx.legs.find(l => l.legId !== legId);
+    return other
+        ? {
+            legId: other.legId,
+            departDateTime: other.departure,
+            destinationCode: other.destinationCode,
+            originCode: other.originCode,
+            isReturn: other.direction === 'Return',
+        }
+        : undefined;
+}
+function buildReissueSearchParams(rawCtx, selection, postBookingId) {
+    // The BO booking information may carry no leg dates at all. Without an original date the
+    // web's `departure` / `return` / `updatingLegs` would be NaN, so fall back to the date the
+    // agent picked (or today) — only affects sparse bookings; real ones have `LegDepartureDateTime`.
+    const fallbackDate = `${selection.legs.find(c => c.departDate)?.departDate ?? new Date().toLocaleDateString('en-CA')}T00:00:00`;
+    const ctx = {
+        ...rawCtx,
+        legs: rawCtx.legs.map(l => (l.departure ? l : { ...l, departure: fallbackDate })),
+    };
+    const isDate = selection.service === 'change_date';
+    const leg0 = ctx.legs[0];
+    const changes = selection.legs;
+    const legOf = (c) => ctx.legs.find(l => l.legId === c.legId) ?? leg0;
+    // `config.legs` in the web.
+    const legsPayload = changes.map(c => {
+        const orig = legOf(c);
+        if (isDate) {
+            return {
+                legId: c.legId,
+                ...(ctx.tripType === 'MultiCity' ? { touched: true } : {}),
+                departDateTime: dateOnly(c.departDate ?? orig.departure),
+                destinationCode: orig.destinationCode,
+                originCode: orig.originCode,
+            };
+        }
+        return {
+            legId: c.legId,
+            originCode: c.origin?.id ?? orig.originCode,
+            originCityName: c.origin?.city_name || c.origin?.name || orig.originCityName,
+            destinationCode: c.destination?.id ?? orig.destinationCode,
+            destinationCityName: c.destination?.city_name || c.destination?.name || orig.destinationCityName,
+            departDateTime: orig.departure,
+        };
+    });
+    // `routeConfig` in the web.
+    const first = changes[0];
+    const routeOrigin = !isDate ? first?.origin : undefined;
+    const routeDest = !isDate ? first?.destination : undefined;
+    const routeDeparture = isDate ? `${dateOnly(changes[0].departDate ?? leg0.departure)}T00:00:00` : undefined;
+    const routeReturn = isDate && changes.length > 1
+        ? `${dateOnly(changes[1].departDate ?? ctx.legs[1]?.departure ?? '')}T00:00:00`
+        : undefined;
+    const origin = routeOrigin?.id ?? leg0.originCode;
+    const destination = routeDest?.id ?? leg0.destinationCode;
+    const className = ctx.cabinName.toUpperCase().includes('ECONOMY')
+        ? capitalize(ctx.cabinName.replace(/\s+/g, ''))
+        : ctx.cabinName;
+    const params = {
+        flightSearchId: ctx.bookingId,
+        category: 'flights',
+        id: `${ctx.airlineCode}-${ctx.flightNumber}`,
+        origin,
+        originCity: routeOrigin
+            ? routeOrigin.name || `${routeOrigin.city_name}, ${routeOrigin.country_name}`
+            : airportCityLabel(leg0.originName, leg0.originCountryName, leg0.originCode),
+        originCityName: routeOrigin?.city_name ?? leg0.originCityName,
+        originCountryName: routeOrigin?.country_name ?? leg0.originCountryName,
+        destinationCityName: routeDest?.city_name ?? leg0.destinationCityName,
+        destinationCity: routeDest
+            ? routeDest.name || `${routeDest.city_name}, ${routeDest.country_name}`
+            : airportCityLabel(leg0.destinationName, leg0.destinationCountryName, leg0.destinationCode),
+        destinationCountryName: routeDest?.country_name ?? leg0.destinationCountryName,
+        destination,
+        departureFlightAirlines: ctx.airlineName,
+        adult: ctx.adults,
+        child: ctx.children,
+        lapinfant: ctx.infants,
+        class: className,
+        className: ctx.cabinCode,
+        departure: utcMs(routeDeparture ?? leg0.departure),
+        infantonchair: 0,
+        originType: routeOrigin?.type ?? 'city',
+        destinationType: routeDest?.type ?? 'city',
+        isDirect: 'false',
+        serviceName: SERVICE_NAME[selection.service],
+        currency: ctx.currency,
+        classType: ctx.cabinCode,
+        connection: ctx.tripType,
+        directFlights: ctx.totalStops === 0,
+        flexibleDates: false,
+        legs: JSON.stringify(legsPayload),
+        // Lets the results page show an "UPDATING NOW" banner per changed leg.
+        updatingLegs: JSON.stringify(changes.map(c => {
+            const o = legOf(c);
+            return {
+                legId: o.legId,
+                direction: o.direction,
+                originCode: o.originCode,
+                destinationCode: o.destinationCode,
+                originCityName: o.originCityName,
+                destinationCityName: o.destinationCityName,
+                originalDeparture: utcMs(o.departure),
+            };
+        })),
+    };
+    if (ctx.tripType === 'RoundTrip') {
+        const secondLeg = ctx.legs[1];
+        params['return'] = routeReturn
+            ? utcMs(routeReturn)
+            : secondLeg
+                ? utcMs(secondLeg.departure) // the web parses this one in the customer's timezone; read as UTC here so it doesn't depend on the agent's timezone
+                : utcMs(String(legsPayload[0].departDateTime));
+        if (changes.length === 1) {
+            const other = otherLegOf(ctx, changes[0].legId);
+            if (isDate && other && !other.isReturn) {
+                params['departure'] = utcMs(other.departDateTime);
+                params['return'] = utcMs(String(legsPayload[0].departDateTime));
+            }
+            if (other)
+                params['extraLeg'] = JSON.stringify(other);
+        }
+    }
+    if (ctx.tripType === 'MultiCity') {
+        let cities;
+        if (isDate) {
+            const changedDate = new Map(changes.map(c => [c.legId, c.departDate]));
+            cities = ctx.legs.map(l => ({
+                departure: absoluteMs(changedDate.get(l.legId) || l.departure),
+                destination: l.destinationCode,
+                destinationType: l.destinationCode,
+                origin: l.originCode,
+                originType: l.originCode,
+                destinationCity: l.destinationCityName,
+                destinationCityName: l.destinationCityName,
+                destinationName: l.destinationCityName,
+                destinationCountryName: l.destinationCountryName,
+                originCity: l.originCityName,
+                originCityName: l.originCityName,
+                originName: l.originCityName,
+                originCountryName: l.originCountryName,
+            }));
+        }
+        else {
+            cities = changes.map(c => {
+                const o = legOf(c);
+                const from = c.origin;
+                const to = c.destination;
+                return {
+                    departure: utcMs(o.departure),
+                    destination: to?.id ?? o.destinationCode,
+                    destinationType: to?.type ?? o.destinationCode,
+                    origin: from?.id ?? o.originCode,
+                    originType: from?.id ?? o.originCode,
+                    destinationCity: to?.name ?? o.destinationCityName,
+                    destinationCityName: to?.name ?? o.destinationCityName,
+                    destinationName: to?.name ?? o.destinationCityName,
+                    destinationCountryName: to?.country_name ?? o.destinationCountryName,
+                    originCity: from?.name ?? o.originCityName,
+                    originCityName: from?.name ?? o.originCityName,
+                    originName: from?.name ?? o.originCityName,
+                    originCountryName: from?.country_name ?? o.originCountryName,
+                };
+            });
+        }
+        params['departure'] = cities[0].departure;
+        params['cities'] = JSON.stringify(cities);
+    }
+    params['bookingId'] = ctx.bookingId;
+    params['postBookingId'] = postBookingId;
+    return Object.fromEntries(Object.entries(params)
+        .filter(([, v]) => v !== undefined && v !== null)
+        .map(([k, v]) => [k, String(v)]));
+}
+function buildReissueSearchUrl(webBaseUrl, ctx, selection, postBookingId) {
+    const qs = new URLSearchParams(buildReissueSearchParams(ctx, selection, postBookingId));
+    return `${webBaseUrl.replace(/\/+$/, '')}${REISSUE_WEB_PATH}?${qs.toString()}`;
+}
+/**
+ * Adds the host's auth parameters (for example its token) to the web link: in the query string, or in the `#fragment`
+ * (which browsers do not send to servers or in the Referer). Empty values are skipped.
+ */
+function appendAuthParams(url, params, where = 'query') {
+    const entries = Object.entries(params ?? {}).filter(([, value]) => !!value);
+    if (!entries.length)
+        return url;
+    const target = new URL(url);
+    if (where === 'hash') {
+        const hash = new URLSearchParams(target.hash.replace(/^#/, ''));
+        entries.forEach(([name, value]) => hash.set(name, value));
+        target.hash = hash.toString();
+    }
+    else {
+        entries.forEach(([name, value]) => target.searchParams.set(name, value));
+    }
+    return target.toString();
+}
+
+/**
+ * Query params the web always sends on `create-post-booking` (`getEntrySourceDeviceBrand()`): where the flow started
+ * and on which device. Same defaults as the web; ask the backend which values BO should send.
+ */
+const POST_BOOKING_PARAMS = { entrySource: 'navigation bar', device: 'web' };
+/**
+ * Reissue APIs — the same endpoints the consumer web uses (the backend opens them for BO).
+ */
+class SbdReissueService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.config = inject(SBD_CONFIG);
+        this.base = this.config.apiBase;
+    }
+    get headers() {
+        return { platform: this.config.platform };
+    }
+    /** `POST /v2/manage-booking/flight/create-post-booking/{bookingId}` -> `postBookingId`. */
+    createPostBooking(bookingId) {
+        return this.http
+            .post(`${this.base}/v2/manage-booking/flight/create-post-booking/${bookingId}`, null, // the web sends no body on this call
+        { headers: this.headers, params: POST_BOOKING_PARAMS })
+            .pipe(map(res => res?.data?.postBookingId ?? ''));
+    }
+    /** `GET /v3/manage-booking/flight/reissue/availability/{bookingId}/{postBookingId}` -> `data.legs[]`. */
+    getAvailability(bookingId, postBookingId, ctx) {
+        return this.http.get(`${this.base}/v3/manage-booking/flight/reissue/availability/${bookingId}/${postBookingId}`, { headers: this.headers });
+    }
+    /**
+     * `POST /v3/manage-booking/flight/reissue/upgrade-class/{bookingId}/{postBookingId}` — same call (and body) the
+     * web makes to decide whether the "Upgrade Class" option is shown. Returns the unwrapped `data`.
+     */
+    getUpgradeClassOptions(bookingId, postBookingId, ctx) {
+        const body = {
+            serviceName: 'change-flight-class',
+            legs: ctx.legs.map(l => ({
+                legId: l.legId,
+                legDepartureAirportCode: l.originCode,
+                legArrivalAirportCode: l.destinationCode,
+                legDepartureDate: l.departure,
+            })),
+        };
+        return this.http
+            .post(`${this.base}/v3/manage-booking/flight/reissue/upgrade-class/${bookingId}/${postBookingId}`, body, { headers: this.headers })
+            .pipe(map(res => (res?.data ?? res) ?? null));
+    }
+    /** Same rule as the web's `hasUpgradeOptions()`: at least one option in any section. */
+    hasUpgradeOptions(data) {
+        if (!data)
+            return false;
+        if (data.fareOptionScope === 'leg')
+            return (data.legs ?? []).some(l => (l.options?.length ?? 0) > 0);
+        return (data.options?.length ?? 0) > 0;
+    }
+    /**
+     * Airport picker for Change Route. Same typeahead endpoint the web and the backoffice already use
+     * (`StaticDataService.getAirports`) — no extra backend work needed. Response: `data[].items[].items[]`.
+     * An empty term makes no request (the dialog lists the booking's own airports meanwhile).
+     */
+    searchAirports(term) {
+        const q = term.trim();
+        if (!q)
+            return of([]);
+        return this.http
+            .get(`${this.base}/v1/typeahead-search-service/suggestion/suggest/flights`, { params: { q }, headers: this.headers })
+            .pipe(map(res => {
+            const out = [];
+            for (const group of res?.data ?? []) {
+                for (const item of group.items ?? []) {
+                    if (item.items)
+                        out.push(...item.items);
+                }
+            }
+            return out.map(a => ({
+                id: a.id,
+                name: a.name,
+                city_name: a.city_name,
+                country_name: a.country_name,
+                type: a.type === 'airport' ? 'airport' : 'city',
+            }));
+        }), catchError$1(() => of([])));
+    }
+    // ── Upgrade Class ──────────────────────────────────────────────────────────
+    /**
+     * `POST /v3/manage-booking/flight/reissue/choose-flight/{bookingId}/{postBookingId}` — prices the chosen upgrade
+     * option. Same endpoint/body the web uses; response `data` carries `itineraryAvailable`, `priceChanged`, `price`, `currency`.
+     */
+    chooseFlight(bookingId, postBookingId, body) {
+        return this.http
+            .post(`${this.base}/v3/manage-booking/flight/reissue/choose-flight/${bookingId}/${postBookingId}`, body, { headers: this.headers })
+            .pipe(map(res => res?.data ?? {}));
+    }
+    /** `POST /v2/manage-booking/flight/book-now` — places a zero-total reissue (no payment needed). */
+    bookNow(postBookingId) {
+        return this.http.post(`${this.base}/v2/manage-booking/flight/book-now`, { postBookingId }, { headers: this.headers });
+    }
+    /**
+     * Payment link of a reissue with an amount to pay. There is no separate API: the backend puts the link in the
+     * cart of the post-booking (`GET /v2/manage-booking/flight/cart/{postBookingId}`, the call the web checkout reads).
+     * The name of the field is not final yet: the first of the names below that exists is used, and the call fails
+     * with a clear message when the cart has none.
+     */
+    getPaymentLink(postBookingId, amount = 0, currency = '') {
+        return this.http
+            .get(`${this.base}/v2/manage-booking/flight/cart/${postBookingId}`, {
+            headers: this.headers,
+        })
+            .pipe(map(res => {
+            const cart = res?.data ?? {};
+            let url = cart['paymentLink'] ?? cart['link'] ?? cart['payment']?.link ?? cart['payment']?.paymentLink ?? cart['payment']?.url;
+            if (!url)
+                throw new Error('The cart has no payment link yet.');
+            // The cart returns only a path ("/<paymentId>"): the customer page base comes from the host config.
+            if (!/^https?:\/\//i.test(url)) {
+                const linkBase = this.config.paymentLinkBase?.replace(/\/+$/, '');
+                if (!linkBase) {
+                    throw new Error(`The cart returned a relative link (${url}) and no paymentLinkBase is configured.`);
+                }
+                url = `${linkBase}${url.startsWith('/') ? '' : '/'}${url}`;
+            }
+            return {
+                url,
+                amount: cart['payment']?.amount ?? amount,
+                currency: cart['payment']?.currency ?? currency,
+                expiresAt: cart['payment']?.expiryDate ?? cart['expiryDate'],
+            };
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Today as `YYYY-MM-DD` in the agent's timezone (what `<input type="date">` compares against). */
+function todayIso() {
+    return new Date().toLocaleDateString('en-CA');
+}
+function formatReissueDate(value) {
+    if (!value)
+        return '—';
+    const date = new Date(value);
+    return Number.isNaN(date.getTime())
+        ? value
+        : date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+/**
+ * Expiry of the payment link as epoch ms. The backend sends `YYYY-MM-DD HH:mm:ss` with no timezone, read as UTC (to
+ * be confirmed with the backend); a value that carries `Z` or an offset is read as it is. `null` when missing/invalid.
+ */
+function parseLinkExpiry(value) {
+    if (!value)
+        return null;
+    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/i.test(value.trim());
+    const ms = Date.parse(hasZone ? value : `${value.trim().replace(' ', 'T')}Z`);
+    return Number.isNaN(ms) ? null : ms;
+}
+/** `mm:ss` (or `h:mm:ss` from one hour up) for a countdown. */
+function formatCountdown(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const pad = (n) => String(n).padStart(2, '0');
+    return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+function legTitle(leg) {
+    return `${leg.direction || 'Leg'} · ${leg.originCode} → ${leg.destinationCode}`;
+}
+function airportOf(id, name, city, country) {
+    return { id, name: name || city || id, city_name: city || id, country_name: country, type: 'airport' };
+}
+const originAirport = (l) => airportOf(l.originCode, l.originName, l.originCityName, l.originCountryName);
+const destinationAirport = (l) => airportOf(l.destinationCode, l.destinationName, l.destinationCityName, l.destinationCountryName);
+const compareAirports = (a, b) => a?.id === b?.id;
+function formatMoney(amount, currency) {
+    return `${amount.toLocaleString('en-US', { maximumFractionDigits: 2 })} ${currency}`.trim();
+}
+/** `21 Oct` — same short date the cancel dialog shows on a leg card. */
+function formatShortDate(value) {
+    if (!value)
+        return '—';
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? value : date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
+}
+/** `01:55` straight from the `YYYY-MM-DDTHH:mm:ss` string (no timezone conversion). */
+function formatTime(value) {
+    return value && value.length >= 16 && value[10] === 'T' ? value.slice(11, 16) : '—';
+}
+/**
+ * The leg already departed. The booking gives no timezone for `LegDepartureDateTime` (airport local time), so this
+ * compares with the agent's clock: it can be off by a few hours on the day of the flight, never by a day.
+ */
+function isLegFlown(leg) {
+    const time = leg.departure ? Date.parse(leg.departure) : NaN;
+    return !Number.isNaN(time) && time < Date.now();
+}
+
+function buildLegRow(leg, available, selected, unavailableReason = 'offline') {
+    const flown = isLegFlown(leg);
+    return {
+        leg,
+        direction: leg.direction,
+        from: leg.originCode,
+        to: leg.destinationCode,
+        dateLabel: formatShortDate(leg.departure),
+        depTime: formatTime(leg.departure),
+        arrTime: formatTime(leg.arrival),
+        stopsLabel: leg.stops > 0 ? `${leg.stops} stop${leg.stops > 1 ? 's' : ''}` : 'Direct',
+        airlineLine: [leg.airline, leg.flightNo].filter(Boolean).join(' · '),
+        flown,
+        available: available && !flown,
+        reason: flown ? 'flown' : available ? null : unavailableReason,
+        selected: selected && !flown,
+    };
+}
+const START_ERROR = 'Could not start the reissue request.';
+const AVAILABILITY_ERROR = 'Could not check availability for this booking.';
+/** `base (HTTP 500: message from the backend)` — so the agent (and we, while the APIs are new) can see why it failed. */
+function describeHttpError(base, e) {
+    const err = e;
+    // The backend sends both: `error` (the real reason, e.g. "Unauthorized!") and a generic `message`.
+    const body = typeof err?.error === 'string' ? [err.error] : [err?.error?.error, err?.error?.message];
+    const text = body.filter(Boolean).join(' — ').slice(0, 200);
+    const detail = [err?.status ? `HTTP ${err.status}` : '', text].filter(Boolean).join(': ');
+    return detail ? `${base} (${detail})` : base;
+}
+/**
+ * State + rules of the Reissue dialog (one instance per dialog, provided by the dialog component).
+ * The step components are presentational: they get view models from here through the dialog shell.
+ */
+class SbdReissueStore {
+    constructor() {
+        this.api = inject(SbdReissueService);
+        this.config = inject(SBD_CONFIG);
+        this.today = todayIso();
+        // ── state ─────────────────────────────────────────────────────────────────
+        this.booking = signal(null);
+        this.step = signal('service');
+        this.loading = signal(false);
+        this.error = signal(null);
+        this.postBookingId = signal('');
+        this.service = signal(null);
+        /** Raw upgrade-class response; `null` when not loaded / not offered. Read by `SbdReissueUpgradeStore`. */
+        this.upgradeOptions = signal(null);
+        this.upgradeAvailable = computed(() => this.api.hasUpgradeOptions(this.upgradeOptions()));
+        this.availableIds = signal(new Set());
+        /** The availability call answered (so "no leg available" is a real answer, not "still loading"). */
+        this.availabilityLoaded = signal(false);
+        this.selectedLegIds = signal([]);
+        /** The "select flight" step was skipped (one-way): Back from the edit step returns to the service list. */
+        this.legsStepSkipped = signal(false);
+        this.dateEdits = signal({});
+        this.routeEdits = signal({});
+        this.searchedAirports = signal([]);
+        this.load$ = new Subject();
+        this.airportTerm$ = new Subject();
+        // ── derived ───────────────────────────────────────────────────────────────
+        this.ctx = computed(() => {
+            const b = this.booking();
+            return b ? buildReissueBookingContext(b.data, b.id) : null;
+        });
+        this.legs = computed(() => this.ctx()?.legs ?? []);
+        this.selectedSet = computed(() => new Set(this.selectedLegIds()));
+        this.selectedLegs = computed(() => this.legs().filter(l => this.selectedSet().has(l.legId)));
+        this.legRows = computed(() => this.legs().map(leg => buildLegRow(leg, this.availableIds().has(leg.legId), this.selectedSet().has(leg.legId))));
+        /** `false` = a round trip must be upgraded as a whole (availability's `allowCustomerToSelectSingleLeg`). */
+        this.allowSingleLegSelection = signal(true);
+        this.anyAvailable = computed(() => this.legRows().some(r => r.available));
+        /**
+         * No leg can be reissued online (offline, or already flown): the dialog shows this message instead of the options,
+         * like the cancel dialog does for a booking it cannot auto-cancel. `null` while loading or when any leg is available.
+         */
+        this.blocked = computed(() => {
+            const rows = this.legRows();
+            if (!this.availabilityLoaded() || !rows.length || rows.some(r => r.available))
+                return null;
+            return rows.every(r => r.flown)
+                ? { title: 'All flights of this booking have already departed.', text: 'There is nothing left to reissue.' }
+                : {
+                    title: 'This booking doesn’t support online reissue.',
+                    text: 'Please escalate to the relevant team for manual handling.',
+                };
+        });
+        this.canContinue = computed(() => this.selectedLegIds().length > 0);
+        /** A leg's date after the change: the new one when the agent is changing it, the original otherwise. */
+        this.dateRows = computed(() => {
+            const legs = this.legs();
+            const selected = this.selectedSet();
+            const edits = this.dateEdits();
+            const effective = (l) => (selected.has(l.legId) ? (edits[l.legId] ?? '') : l.departure.slice(0, 10));
+            return legs.flatMap((leg, i) => {
+                if (!selected.has(leg.legId))
+                    return [];
+                const prev = i > 0 ? effective(legs[i - 1]) : '';
+                return [
+                    {
+                        leg,
+                        title: legTitle(leg),
+                        current: formatReissueDate(leg.departure),
+                        value: edits[leg.legId] ?? '',
+                        // Never before today or the previous leg; never after the next leg (same day is fine).
+                        min: prev > this.today ? prev : this.today,
+                        max: i < legs.length - 1 ? effective(legs[i + 1]) : '',
+                    },
+                ];
+            });
+        });
+        this.routeRows = computed(() => {
+            const edits = this.routeEdits();
+            return this.selectedLegs().map(leg => ({
+                leg,
+                title: legTitle(leg),
+                current: formatReissueDate(leg.departure),
+                origin: edits[leg.legId]?.origin ?? originAirport(leg),
+                destination: edits[leg.legId]?.destination ?? destinationAirport(leg),
+            }));
+        });
+        this.airportOptions = computed(() => {
+            const byId = new Map();
+            // Order matters (later wins): the booking's own airports, the search results, then what is already picked.
+            for (const l of this.legs()) {
+                byId.set(l.originCode, originAirport(l));
+                byId.set(l.destinationCode, destinationAirport(l));
+            }
+            for (const a of this.searchedAirports())
+                byId.set(a.id, a);
+            for (const e of Object.values(this.routeEdits())) {
+                byId.set(e.origin.id, e.origin);
+                byId.set(e.destination.id, e.destination);
+            }
+            return [...byId.values()].map(a => ({ ...a, label: `${a.city_name} (${a.id}) – ${a.name}` }));
+        });
+        this.validationError = computed(() => {
+            const service = this.service();
+            if (!service || !this.selectedLegIds().length)
+                return 'Select at least one leg.';
+            if (service === 'change_date') {
+                for (const { leg, value, min, max } of this.dateRows()) {
+                    const who = leg.direction || 'This leg';
+                    if (!value)
+                        return 'Pick a new date for every selected leg.';
+                    if (value < this.today)
+                        return 'The new date cannot be in the past.';
+                    if (value < min)
+                        return `${who} cannot depart before the previous flight (${min}).`;
+                    if (max && value > max)
+                        return `${who} cannot depart after the next flight (${max}).`;
+                }
+                return null;
+            }
+            let changed = false;
+            for (const { leg, origin, destination } of this.routeRows()) {
+                if (origin.id === destination.id)
+                    return 'Origin and destination must be different.';
+                if (origin.id !== leg.originCode || destination.id !== leg.destinationCode)
+                    changed = true;
+            }
+            return changed ? null : 'Change at least one airport.';
+        });
+        this.load$.pipe(switchMap(() => this.loadFlow()), takeUntilDestroyed()).subscribe();
+        // Debounced typeahead: one request per pause in typing, older in-flight ones are dropped.
+        this.airportTerm$
+            .pipe(debounceTime(250), distinctUntilChanged(), switchMap(term => this.api.searchAirports(term)), takeUntilDestroyed())
+            .subscribe(list => this.searchedAirports.set(list));
+    }
+    /** The leg came back online from the availability check. */
+    isLegOnline(legId) {
+        return this.availableIds().has(legId);
+    }
+    // ── actions ───────────────────────────────────────────────────────────────
+    /** (Re)starts the dialog for a booking: clears every choice, then loads post-booking + availability. */
+    open(data, id) {
+        this.booking.set({ data, id });
+        this.step.set('service');
+        this.service.set(null);
+        this.selectedLegIds.set([]);
+        this.dateEdits.set({});
+        this.routeEdits.set({});
+        this.searchedAirports.set([]);
+        this.postBookingId.set('');
+        this.availableIds.set(new Set());
+        this.availabilityLoaded.set(false);
+        this.upgradeOptions.set(null);
+        this.load();
+    }
+    load() {
+        this.load$.next();
+    }
+    chooseService(service) {
+        if (this.loading() || this.error())
+            return;
+        this.service.set(service);
+        // A one-way with its only leg online has nothing to choose: skip "select flight" and go straight to editing.
+        // (An offline one-way still shows the step, so the agent sees why it cannot be changed.)
+        const rows = this.legRows();
+        if (rows.length === 1 && rows[0].available) {
+            this.selectedLegIds.set([rows[0].leg.legId]);
+            this.legsStepSkipped.set(true);
+            this.goToEdit();
+            return;
+        }
+        this.legsStepSkipped.set(false);
+        this.selectedLegIds.set([]);
+        this.step.set('legs');
+    }
+    toggleLeg(legId) {
+        if (!this.availableIds().has(legId))
+            return;
+        this.selectedLegIds.update(ids => (ids.includes(legId) ? ids.filter(i => i !== legId) : [...ids, legId]));
+    }
+    /** Legs -> edit: seed each selected leg with its current date / airports. */
+    goToEdit() {
+        if (!this.canContinue())
+            return;
+        if (this.service() === 'change_date') {
+            this.dateEdits.update(edits => {
+                const next = { ...edits };
+                for (const l of this.selectedLegs())
+                    next[l.legId] ??= l.departure.slice(0, 10);
+                return next;
+            });
+        }
+        else {
+            this.routeEdits.update(edits => {
+                const next = { ...edits };
+                for (const l of this.selectedLegs()) {
+                    next[l.legId] ??= { origin: originAirport(l), destination: destinationAirport(l) };
+                }
+                return next;
+            });
+        }
+        this.step.set('edit');
+    }
+    goTo(step) {
+        this.step.set(step);
+    }
+    back() {
+        const previous = {
+            service: 'service',
+            legs: 'service',
+            edit: this.legsStepSkipped() ? 'service' : 'legs',
+            'upgrade-legs': 'service',
+            upgrade: 'service', // the upgrade store overrides this when the leg step was shown
+            confirm: 'upgrade',
+        };
+        this.step.update(s => previous[s]);
+    }
+    setDate(legId, date) {
+        this.dateEdits.update(edits => ({ ...edits, [legId]: date }));
+    }
+    setAirport(legId, side, airport) {
+        if (!airport)
+            return;
+        const current = this.routeRows().find(r => r.leg.legId === legId);
+        if (!current)
+            return;
+        this.routeEdits.update(edits => ({
+            ...edits,
+            [legId]: { origin: current.origin, destination: current.destination, [side]: airport },
+        }));
+    }
+    /** Swaps a leg's origin and destination (the arrow between the two pickers). */
+    swapAirports(legId) {
+        const current = this.routeRows().find(r => r.leg.legId === legId);
+        if (!current)
+            return;
+        this.routeEdits.update(edits => ({
+            ...edits,
+            [legId]: { origin: current.destination, destination: current.origin },
+        }));
+    }
+    searchAirports(term) {
+        this.airportTerm$.next(term ?? '');
+    }
+    /** The web search URL for the current choices, or `null` when they are not valid yet. */
+    searchUrl() {
+        const ctx = this.ctx();
+        const service = this.service();
+        if (!ctx || !service || service === 'upgrade_class' || this.validationError())
+            return null;
+        const selection = {
+            service,
+            legs: service === 'change_date'
+                ? this.dateRows().map(r => ({ legId: r.leg.legId, departDate: r.value }))
+                : this.routeRows().map(r => ({ legId: r.leg.legId, origin: r.origin, destination: r.destination })),
+        };
+        return buildReissueSearchUrl(this.config.webBaseUrl, ctx, selection, this.postBookingId());
+    }
+    // ── loading: post-booking -> availability -> upgrade options (once per dialog visit) ─────────
+    loadFlow() {
+        const ctx = this.ctx();
+        if (!ctx) {
+            this.error.set('This booking has no leg data to reissue.');
+            return EMPTY;
+        }
+        this.loading.set(true);
+        this.error.set(null);
+        return this.api.createPostBooking(ctx.bookingId).pipe(switchMap(postBookingId => {
+            if (!postBookingId)
+                return throwError(() => START_ERROR);
+            this.postBookingId.set(postBookingId);
+            return this.api.getAvailability(ctx.bookingId, postBookingId, ctx).pipe(catchError$1(e => throwError(() => describeHttpError(AVAILABILITY_ERROR, e))), tap(res => {
+                // A leg that already flew can never be changed, whatever availability says: treat it as offline.
+                const flown = new Set(ctx.legs.filter(isLegFlown).map(l => l.legId));
+                this.availableIds.set(new Set((res?.data?.legs ?? []).filter(l => l.available && !flown.has(l.legId)).map(l => l.legId)));
+                this.allowSingleLegSelection.set(res?.data?.allowCustomerToSelectSingleLeg ?? true);
+                this.availabilityLoaded.set(true);
+            }), switchMap(() => this.offersUpgrade(ctx.tripType, ctx.legs, postBookingId)));
+        }), tap(options => {
+            this.upgradeOptions.set(options);
+            this.loading.set(false);
+        }), catchError$1((e) => {
+            this.error.set(typeof e === 'string' ? e : describeHttpError(START_ERROR, e));
+            this.loading.set(false);
+            return EMPTY;
+        }));
+    }
+    /**
+     * The upgrade-class options (same rule as the web for listing "Upgrade Class"): skipped for a one-way whose
+     * only leg is offline; a failing call just yields `null` (option hidden) instead of blocking the dialog.
+     */
+    offersUpgrade(tripType, legs, postBookingId) {
+        const ctx = this.ctx();
+        const oneWayOffline = tripType === 'OneWay' && !this.availableIds().has(legs[0]?.legId);
+        if (!ctx || !legs.length || oneWayOffline)
+            return of(null);
+        return this.api
+            .getUpgradeClassOptions(ctx.bookingId, postBookingId, ctx)
+            .pipe(catchError$1(() => of(null)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const extraOf = (o) => o.fareDetails?.totalAdditionalFare ?? o.priceDifference ?? 0;
+const routeOf = (l) => `${l.origin} → ${l.destination}`;
+const currentOf = (l) => {
+    if (!l)
+        return '';
+    const cabin = [l.class, l.fareBrand?.name].filter(Boolean).join(' · ');
+    return cabin ? `Current: ${cabin}` : '';
+};
+/**
+ * Upgrade Class flow: pick the new class -> price it (choose-flight) -> confirm (book-now when nothing to pay,
+ * otherwise a backend-generated payment link). Reads the options the main store already loaded.
+ */
+class SbdReissueUpgradeStore {
+    constructor() {
+        this.main = inject(SbdReissueStore);
+        this.api = inject(SbdReissueService);
+        this.destroyRef = inject(DestroyRef);
+        this.submitting = signal(false);
+        this.error = signal(null);
+        this.priceChanged = signal(false);
+        /** `book-now` succeeded (nothing to pay): the reissue is being placed with the supplier. */
+        this.booked = signal(false);
+        this.paymentLink = signal(null);
+        this.selected = signal({}); // sectionId -> referenceKey
+        this.unavailableKeys = signal(new Set());
+        /** Legs the agent chose to upgrade (the "select leg" step; a one-way preselects its only leg). */
+        this.legIds = signal([]);
+        /** Options fetched for a partial leg selection; `null` = the options loaded when the dialog opened (all legs) apply. */
+        this.freshOptions = signal(null);
+        this.legsStepSkipped = signal(false);
+        // ── derived ───────────────────────────────────────────────────────────────
+        this.currency = computed(() => this.main.ctx()?.currency ?? '');
+        /** The options to show: for a partial leg selection the fresh response, otherwise the one loaded with the dialog. */
+        this.options = computed(() => this.freshOptions() ?? this.main.upgradeOptions());
+        this.legRows = computed(() => {
+            const chosen = new Set(this.legIds());
+            return this.main
+                .legs()
+                .map((leg, i) => buildLegRow(leg, this.legUpgradable(leg.legId, i), chosen.has(leg.legId), this.main.isLegOnline(leg.legId) ? 'no-options' : 'offline'));
+        });
+        this.anyLegUpgradable = computed(() => this.legRows().some(r => r.available));
+        this.canContinueFromLegs = computed(() => this.legIds().length > 0 && !this.submitting());
+        /** Legs the options on screen were requested for (all of them, or just the selected ones after a partial fetch). */
+        this.optionLegs = computed(() => {
+            const all = this.main.legs();
+            return this.freshOptions() ? all.filter(l => this.legIds().includes(l.legId)) : all;
+        });
+        this.rawSections = computed(() => {
+            const data = this.options();
+            if (!data)
+                return [];
+            if (data.fareOptionScope === 'leg') {
+                return (data.legs ?? []).map(leg => ({
+                    id: String(leg.legIndex),
+                    title: routeOf({ origin: leg.origin ?? leg.existingLeg.origin, destination: leg.destination ?? leg.existingLeg.destination }),
+                    current: currentOf(leg.existingLeg),
+                    options: leg.options ?? [],
+                }));
+            }
+            const originals = data.existingLegs ?? data.originalLegs ?? [];
+            return [
+                {
+                    id: 'booking',
+                    title: originals.map(routeOf).join(' · ') || 'Whole booking',
+                    current: currentOf(originals[0]),
+                    options: data.options ?? [],
+                },
+            ];
+        });
+        this.sections = computed(() => {
+            const selected = this.selected();
+            const unavailable = this.unavailableKeys();
+            const currency = this.currency();
+            return this.rawSections().map(s => ({
+                id: s.id,
+                title: s.title,
+                current: s.current,
+                options: s.options.map(o => {
+                    const extra = extraOf(o);
+                    return {
+                        key: o.referenceKey,
+                        name: o.name,
+                        code: o.code,
+                        extraLabel: extra > 0 ? `+${formatMoney(extra, currency)}` : 'No extra cost',
+                        selected: selected[s.id] === o.referenceKey,
+                        unavailable: unavailable.has(o.referenceKey),
+                    };
+                }),
+            }));
+        });
+        this.picks = computed(() => {
+            const selected = this.selected();
+            return this.rawSections().flatMap(section => {
+                const option = section.options.find(o => o.referenceKey === selected[section.id]);
+                return option ? [{ section, option }] : [];
+            });
+        });
+        this.canContinue = computed(() => this.picks().length > 0 && !this.submitting());
+        /**
+         * Amount to pay: the sum of the picked options' additional fare (same as the web's `getTotalToPay`).
+         * choose-flight's own `price` is deliberately not used — it is not known whether it is the difference or the full fare.
+         */
+        this.total = computed(() => this.picks().reduce((sum, p) => sum + extraOf(p.option), 0));
+        this.totalLabel = computed(() => (this.total() > 0 ? formatMoney(this.total(), this.currency()) : 'Nothing to pay'));
+        this.summary = computed(() => this.picks().map(({ section, option }) => ({
+            title: section.title,
+            from: section.current.replace(/^Current:\s*/, ''),
+            to: option.name,
+            extraLabel: extraOf(option) > 0 ? `+${formatMoney(extraOf(option), this.currency())}` : 'No extra cost',
+        })));
+        this.action = computed(() => {
+            if (this.booked() || this.paymentLink())
+                return 'done';
+            return this.total() > 0 ? 'link' : 'book';
+        });
+        /** Nothing can be changed any more once the upgrade is placed or a link was generated. */
+        this.locked = computed(() => this.booked() || !!this.paymentLink() || this.submitting());
+        // A fresh options response (new dialog visit / retry) starts the flow over.
+        effect(() => {
+            this.main.upgradeOptions();
+            untracked(() => this.reset());
+        }, { allowSignalWrites: true });
+    }
+    // ── leg selection ─────────────────────────────────────────────────────────
+    /** A leg can be upgraded only if it is online AND has upgrade options (per leg for leg scope; booking scope applies to all). */
+    legUpgradable(legId, index) {
+        if (!this.main.isLegOnline(legId))
+            return false;
+        const data = this.main.upgradeOptions();
+        if (!data)
+            return false;
+        if (data.fareOptionScope === 'leg') {
+            return (data.legs?.find(l => l.legIndex === index)?.options?.length ?? 0) > 0;
+        }
+        return (data.options?.length ?? 0) > 0;
+    }
+    // ── actions ───────────────────────────────────────────────────────────────
+    /**
+     * Service picked: go to "select leg", unless there is nothing to choose (one-way with its only leg upgradable),
+     * which goes straight to the options like the web.
+     */
+    start() {
+        if (this.main.loading() || this.main.error())
+            return;
+        this.main.service.set('upgrade_class');
+        this.freshOptions.set(null);
+        this.selected.set({});
+        this.error.set(null);
+        const upgradable = this.legRows().filter(r => r.available);
+        if (this.legRows().length === 1 && upgradable.length === 1) {
+            this.legIds.set([upgradable[0].leg.legId]);
+            this.legsStepSkipped.set(true);
+            this.main.goTo('upgrade');
+            return;
+        }
+        this.legsStepSkipped.set(false);
+        // "Upgrade as a whole" bookings: every upgradable leg is preselected and cannot be unticked.
+        this.legIds.set(this.main.allowSingleLegSelection() ? [] : upgradable.map(r => r.leg.legId));
+        this.main.goTo('upgrade-legs');
+    }
+    toggleLeg(legId) {
+        const row = this.legRows().find(r => r.leg.legId === legId);
+        if (!row?.available || !this.main.allowSingleLegSelection())
+            return;
+        this.error.set(null);
+        this.legIds.update(ids => (ids.includes(legId) ? ids.filter(i => i !== legId) : [...ids, legId]));
+    }
+    /**
+     * Select leg -> options. All legs selected: reuse the options loaded with the dialog. A subset: fetch the options
+     * again for just those legs (the earlier response covers the whole booking, so it would price the wrong legs).
+     */
+    continueFromLegs() {
+        const ctx = this.main.ctx();
+        const chosen = this.main.legs().filter(l => this.legIds().includes(l.legId));
+        if (!ctx || !chosen.length || !this.canContinueFromLegs())
+            return;
+        this.selected.set({});
+        this.unavailableKeys.set(new Set());
+        if (chosen.length === this.main.legs().length) {
+            this.freshOptions.set(null);
+            this.main.goTo('upgrade');
+            return;
+        }
+        this.submitting.set(true);
+        this.error.set(null);
+        this.api
+            .getUpgradeClassOptions(ctx.bookingId, this.main.postBookingId(), { ...ctx, legs: chosen })
+            .pipe(finalize(() => this.submitting.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: data => {
+                if (!this.api.hasUpgradeOptions(data)) {
+                    this.error.set('No upgrade is available for the selected flight(s).');
+                    return;
+                }
+                this.freshOptions.set(data);
+                this.main.goTo('upgrade');
+            },
+            error: () => this.error.set('Could not load the upgrade options for the selected flight(s).'),
+        });
+    }
+    /** Back from the options: to "select leg" when that step was shown, otherwise to the service list. */
+    back() {
+        this.main.goTo(this.legsStepSkipped() ? 'service' : 'upgrade-legs');
+    }
+    select(sectionId, key) {
+        if (this.unavailableKeys().has(key))
+            return;
+        this.error.set(null);
+        this.selected.update(s => ({ ...s, [sectionId]: key }));
+    }
+    /** Options -> confirm: prices the pick(s) with choose-flight (same body the web sends). */
+    continue() {
+        const ctx = this.main.ctx();
+        const picks = this.picks();
+        if (!ctx || !picks.length || !this.canContinue())
+            return;
+        this.submitting.set(true);
+        this.error.set(null);
+        this.api
+            .chooseFlight(ctx.bookingId, this.main.postBookingId(), this.chooseBody(picks))
+            .pipe(finalize(() => this.submitting.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: res => {
+                if (res?.itineraryAvailable === false) {
+                    this.unavailableKeys.update(keys => new Set([...keys, ...picks.map(p => p.option.referenceKey)]));
+                    this.selected.set({});
+                    this.error.set('This option is no longer available. Please choose another one.');
+                    return;
+                }
+                this.priceChanged.set(res?.priceChanged === true);
+                this.main.goTo('confirm');
+            },
+            error: () => this.error.set('Could not price the selected upgrade. Please try again.'),
+        });
+    }
+    /** Confirm step primary action: place the free upgrade, or generate the payment link. */
+    confirm() {
+        const action = this.action();
+        if (action === 'done' || this.submitting())
+            return;
+        const postBookingId = this.main.postBookingId();
+        this.submitting.set(true);
+        this.error.set(null);
+        const request$ = action === 'book'
+            ? this.api.bookNow(postBookingId)
+            : this.api.getPaymentLink(postBookingId, this.total(), this.currency());
+        request$
+            .pipe(finalize(() => this.submitting.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: res => {
+                // The dialog does not follow the result (no confirmation-status): after `book-now`, or once the link is
+                // sent, the agent follows the booking from the dashboard.
+                if (action === 'book')
+                    this.booked.set(true);
+                else
+                    this.paymentLink.set(res);
+            },
+            error: (err) => this.error.set(action === 'book'
+                ? 'Could not place the upgrade. Please try again.'
+                : err instanceof Error && err.message.startsWith('The cart ')
+                    ? err.message
+                    : 'Could not get the payment link. Please try again.'),
+        });
+    }
+    reset() {
+        this.selected.set({});
+        this.unavailableKeys.set(new Set());
+        this.legIds.set([]);
+        this.freshOptions.set(null);
+        this.legsStepSkipped.set(false);
+        this.submitting.set(false);
+        this.error.set(null);
+        this.priceChanged.set(false);
+        this.booked.set(false);
+        this.paymentLink.set(null);
+    }
+    /** Booking scope: one itinerary. Leg scope: each picked leg as onwardLeg / returnLeg (by the real leg direction). */
+    chooseBody(picks) {
+        const scope = this.options()?.fareOptionScope ?? 'booking';
+        if (scope !== 'leg')
+            return { fareOptionScope: 'booking', ItineraryId: picks[0].option.referenceKey };
+        // A partial fetch re-indexes the sections from 0, so resolve the direction from the legs the options were requested for.
+        const legs = this.optionLegs();
+        const toLeg = (p) => (p ? { legId: p.option.referenceKey, providerType: p.option.providerType } : undefined);
+        const isReturn = (p) => legs[Number(p.section.id)]?.direction === 'Return';
+        return {
+            fareOptionScope: 'leg',
+            onwardLeg: toLeg(picks.find(p => !isReturn(p))),
+            returnLeg: toLeg(picks.find(isReturn)),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/** Icon + message box used for the info callout, loading / error states and the validation hint. */
+class SbdReissueNoticeComponent {
+    constructor() {
+        this.icon = input('pi pi-info-circle');
+        this.tone = input('info');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SbdReissueNoticeComponent, isStandalone: true, selector: "app-sbd-reissue-notice", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"sbd-notice sbd-notice--\" + tone()" } }, ngImport: i0, template: `<i [class]="icon()"></i><span class="sbd-notice__text"><ng-content /></span><ng-content select="[action]" />`, isInline: true, styles: [":host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}:host i{flex-shrink:0;margin-top:1px}:host .sbd-notice__text{flex:1}:host(.sbd-notice--info){background:#eaf2ff;border:1px solid #b9d6ff;color:#1a5fd6}:host(.sbd-notice--warn){background:#fdf3e3;border:1px solid #f3d9a4;color:#8a5a1e}:host(.sbd-notice--warn) i{color:#b98a3e}:host(.sbd-notice--error){background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}:host(.sbd-notice--success){background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host(.sbd-notice--muted){align-items:center;color:#64748b}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueNoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-notice', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"sbd-notice sbd-notice--" + tone()' }, template: `<i [class]="icon()"></i><span class="sbd-notice__text"><ng-content /></span><ng-content select="[action]" />`, styles: [":host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}:host i{flex-shrink:0;margin-top:1px}:host .sbd-notice__text{flex:1}:host(.sbd-notice--info){background:#eaf2ff;border:1px solid #b9d6ff;color:#1a5fd6}:host(.sbd-notice--warn){background:#fdf3e3;border:1px solid #f3d9a4;color:#8a5a1e}:host(.sbd-notice--warn) i{color:#b98a3e}:host(.sbd-notice--error){background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}:host(.sbd-notice--success){background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host(.sbd-notice--muted){align-items:center;color:#64748b}\n"] }]
+        }] });
+
+/** New-class options as radio cards, in the look of the cancel dialog's refund-method options. */
+class SbdReissueUpgradeStepComponent {
+    constructor() {
+        this.sections = input.required();
+        this.error = input(null);
+        this.picked = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueUpgradeStepComponent, isStandalone: true, selector: "app-sbd-reissue-upgrade-step", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, host: { classAttribute: "sbd-rup" }, ngImport: i0, template: `
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (section of sections(); track section.id) {
+      <section class="sbd-rup__section">
+        <div class="sbd-rup__head">
+          <span class="sbd-rup__route">{{ section.title }}</span>
+          @if (section.current) { <span class="sbd-rup__current">{{ section.current }}</span> }
+        </div>
+
+        @if (!section.options.length) {
+          <span class="sbd-rup__empty">No upgrade available for this flight.</span>
+        }
+
+        @for (option of section.options; track option.key) {
+          <button type="button" class="sbd-rup__option"
+            [class.sbd-rup__option--active]="option.selected"
+            [disabled]="option.unavailable"
+            (click)="picked.emit({ sectionId: section.id, key: option.key })">
+            <span class="sbd-rup__radio" [class.sbd-rup__radio--on]="option.selected"></span>
+            <span class="sbd-rup__text">
+              <strong>{{ option.name }}</strong>
+              <small>{{ option.code }}</small>
+            </span>
+            @if (option.unavailable) {
+              <span class="sbd-rup__unavailable">Not available</span>
+            } @else {
+              <span class="sbd-rup__price">{{ option.extraLabel }}</span>
+            }
+          </button>
+        }
+      </section>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rup__section{display:flex;flex-direction:column;gap:10px}.sbd-rup__head{display:flex;flex-direction:column;gap:2px}.sbd-rup__route{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rup__current,.sbd-rup__empty{font-size:13px;color:#64748b}.sbd-rup__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rup__option--active{border-color:var(--sbd-accent, #6d4aff);box-shadow:0 0 0 1px var(--sbd-accent, #6d4aff)}.sbd-rup__option:disabled{opacity:.5;cursor:not-allowed}.sbd-rup__option:hover:not(:disabled):not(.sbd-rup__option--active){border-color:#cbd5e1}.sbd-rup__radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}.sbd-rup__radio--on{border-color:var(--sbd-accent, #6d4aff);box-shadow:inset 0 0 0 4px #fff;background:var(--sbd-accent, #6d4aff)}.sbd-rup__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rup__text strong{font-size:14px;font-weight:700;color:#1e2e4a}.sbd-rup__text small{font-size:12.5px;color:#64748b}.sbd-rup__price{font-size:14px;font-weight:800;color:#1e2e4a;white-space:nowrap;font-variant-numeric:tabular-nums}.sbd-rup__unavailable{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#64748b;background:#f8fafc;box-shadow:inset 0 0 0 1px #e2e8f0;border-radius:20px;padding:3px 12px;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-upgrade-step', standalone: true, imports: [SbdReissueNoticeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (section of sections(); track section.id) {
+      <section class="sbd-rup__section">
+        <div class="sbd-rup__head">
+          <span class="sbd-rup__route">{{ section.title }}</span>
+          @if (section.current) { <span class="sbd-rup__current">{{ section.current }}</span> }
+        </div>
+
+        @if (!section.options.length) {
+          <span class="sbd-rup__empty">No upgrade available for this flight.</span>
+        }
+
+        @for (option of section.options; track option.key) {
+          <button type="button" class="sbd-rup__option"
+            [class.sbd-rup__option--active]="option.selected"
+            [disabled]="option.unavailable"
+            (click)="picked.emit({ sectionId: section.id, key: option.key })">
+            <span class="sbd-rup__radio" [class.sbd-rup__radio--on]="option.selected"></span>
+            <span class="sbd-rup__text">
+              <strong>{{ option.name }}</strong>
+              <small>{{ option.code }}</small>
+            </span>
+            @if (option.unavailable) {
+              <span class="sbd-rup__unavailable">Not available</span>
+            } @else {
+              <span class="sbd-rup__price">{{ option.extraLabel }}</span>
+            }
+          </button>
+        }
+      </section>
+    }
+  `, host: { class: 'sbd-rup' }, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rup__section{display:flex;flex-direction:column;gap:10px}.sbd-rup__head{display:flex;flex-direction:column;gap:2px}.sbd-rup__route{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rup__current,.sbd-rup__empty{font-size:13px;color:#64748b}.sbd-rup__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rup__option--active{border-color:var(--sbd-accent, #6d4aff);box-shadow:0 0 0 1px var(--sbd-accent, #6d4aff)}.sbd-rup__option:disabled{opacity:.5;cursor:not-allowed}.sbd-rup__option:hover:not(:disabled):not(.sbd-rup__option--active){border-color:#cbd5e1}.sbd-rup__radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}.sbd-rup__radio--on{border-color:var(--sbd-accent, #6d4aff);box-shadow:inset 0 0 0 4px #fff;background:var(--sbd-accent, #6d4aff)}.sbd-rup__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rup__text strong{font-size:14px;font-weight:700;color:#1e2e4a}.sbd-rup__text small{font-size:12.5px;color:#64748b}.sbd-rup__price{font-size:14px;font-weight:800;color:#1e2e4a;white-space:nowrap;font-variant-numeric:tabular-nums}.sbd-rup__unavailable{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#64748b;background:#f8fafc;box-shadow:inset 0 0 0 1px #e2e8f0;border-radius:20px;padding:3px 12px;white-space:nowrap}\n"] }]
+        }] });
+
+class SbdReissueUpgradeConfirmStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.total = input(0);
+        this.totalLabel = input('');
+        this.priceChanged = input(false);
+        /** `book-now` was sent. */
+        this.booked = input(false);
+        this.link = input(null);
+        this.error = input(null);
+        /** The link expired and the agent chose to redo the upgrade from the beginning. */
+        this.restart = output();
+        this.copied = signal(false);
+        /** Ticks every second so the countdown (and the expired state) update on their own. */
+        this.now = signal(Date.now());
+        this.remainingMs = computed(() => {
+            const expiry = parseLinkExpiry(this.link()?.expiresAt);
+            return expiry == null ? null : expiry - this.now();
+        });
+        this.expired = computed(() => {
+            const left = this.remainingMs();
+            return left != null && left <= 0;
+        });
+        /** `mm:ss` until the link expires; empty when the backend sent no (valid) expiry. */
+        this.countdown = computed(() => {
+            const left = this.remainingMs();
+            return left == null || left <= 0 ? '' : formatCountdown(left);
+        });
+        /** Last two minutes: highlight the countdown. */
+        this.soon = computed(() => (this.remainingMs() ?? Infinity) <= 2 * 60 * 1000);
+        const timer = setInterval(() => this.now.set(Date.now()), 1000);
+        inject(DestroyRef).onDestroy(() => clearInterval(timer));
+    }
+    async copy(url) {
+        try {
+            await navigator.clipboard.writeText(url);
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 1500);
+        }
+        catch {
+            // Clipboard blocked (e.g. insecure context): the input is selectable, so the agent can still copy by hand.
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeConfirmStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueUpgradeConfirmStepComponent, isStandalone: true, selector: "app-sbd-reissue-upgrade-confirm-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, totalLabel: { classPropertyName: "totalLabel", publicName: "totalLabel", isSignal: true, isRequired: false, transformFunction: null }, priceChanged: { classPropertyName: "priceChanged", publicName: "priceChanged", isSignal: true, isRequired: false, transformFunction: null }, booked: { classPropertyName: "booked", publicName: "booked", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restart: "restart" }, host: { classAttribute: "sbd-rconf" }, ngImport: i0, template: `
+    @if (priceChanged()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">
+        The price changed since the options were loaded. Check the total below.
+      </app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    <div class="sbd-rconf__summary">
+      @for (row of rows(); track row.title) {
+        <div class="sbd-rconf__row">
+          <span class="sbd-rconf__row-main">
+            <b>{{ row.title }}</b>
+            <small>{{ row.from ? row.from + ' → ' : '' }}{{ row.to }}</small>
+          </span>
+          <strong>{{ row.extraLabel }}</strong>
+        </div>
+      }
+      <div class="sbd-rconf__total">
+        <span>Total to pay</span>
+        <strong>{{ totalLabel() }}</strong>
+      </div>
+    </div>
+
+    @if (link(); as link) {
+      @if (expired()) {
+        <app-sbd-reissue-notice tone="error" icon="pi pi-clock">
+          The payment link expired. Start the upgrade again from the beginning.
+          <button action pButton type="button" class="p-button-sm p-button-outlined p-button-secondary" label="Start again"
+            (click)="restart.emit()"></button>
+        </app-sbd-reissue-notice>
+      } @else {
+        <div class="sbd-rconf__link">
+          <div class="sbd-rconf__link-head"><b>Payment link</b><small>Send it to the customer</small></div>
+          <div class="sbd-rconf__link-row">
+            <input class="sbd-rconf__link-input" readonly [value]="link.url" (focus)="$any($event.target).select()" />
+            <button pButton type="button" class="p-button-sm p-button-outlined p-button-secondary"
+              [icon]="copied() ? 'pi pi-check' : 'pi pi-copy'" [label]="copied() ? 'Copied' : 'Copy'" (click)="copy(link.url)"></button>
+          </div>
+          @if (countdown(); as left) {
+            <small class="sbd-rconf__expiry" [class.sbd-rconf__expiry--soon]="soon()">Link expires in {{ left }}</small>
+          } @else if (link.expiresAt) {
+            <small class="sbd-rconf__expiry">Expires {{ link.expiresAt.slice(0, 16).replace('T', ' ') }}</small>
+          }
+        </div>
+      }
+    }
+
+    <!-- The dialog does not follow the result: after book-now, or once the link is sent, the agent follows the booking. -->
+    @if (booked()) {
+      <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+        The upgrade request was sent. Check the booking for the result.
+      </app-sbd-reissue-notice>
+    } @else if (link()) {
+      @if (!expired()) {
+        <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+          Copy the link and send it to the customer. The upgrade is placed once they pay: check the booking then.
+        </app-sbd-reissue-notice>
+      }
+    } @else {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">
+        {{ total() > 0
+          ? 'A payment link will be generated for the customer to pay the difference.'
+          : 'Nothing to pay: confirming places the upgrade straight away.' }}
+      </app-sbd-reissue-notice>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rconf__summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.sbd-rconf__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}.sbd-rconf__row strong{font-size:14px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums;white-space:nowrap}.sbd-rconf__row-main{display:flex;flex-direction:column;gap:2px;min-width:0}.sbd-rconf__row-main b{font-weight:700;color:#1e2e4a}.sbd-rconf__row-main small{font-size:12.5px;color:#64748b}.sbd-rconf__total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e8f0;padding-top:12px}.sbd-rconf__total span{font-size:14.5px;font-weight:700;color:#1e2e4a}.sbd-rconf__total strong{font-size:17px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rconf__link{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:10px}.sbd-rconf__link-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#1e2e4a}.sbd-rconf__link-head small{color:#94a3b8;font-size:12.5px}.sbd-rconf__link-row{display:flex;gap:8px}.sbd-rconf__link-input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rconf__link-input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}.sbd-rconf__link-input{flex:1;min-width:0;height:36px;font-size:12px;color:#334155}.sbd-rconf__expiry{color:#94a3b8;font-size:12.5px;font-variant-numeric:tabular-nums}.sbd-rconf__expiry--soon{color:#b45309;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueUpgradeConfirmStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-upgrade-confirm-step', standalone: true, imports: [ButtonModule, SbdReissueNoticeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (priceChanged()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">
+        The price changed since the options were loaded. Check the total below.
+      </app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    <div class="sbd-rconf__summary">
+      @for (row of rows(); track row.title) {
+        <div class="sbd-rconf__row">
+          <span class="sbd-rconf__row-main">
+            <b>{{ row.title }}</b>
+            <small>{{ row.from ? row.from + ' → ' : '' }}{{ row.to }}</small>
+          </span>
+          <strong>{{ row.extraLabel }}</strong>
+        </div>
+      }
+      <div class="sbd-rconf__total">
+        <span>Total to pay</span>
+        <strong>{{ totalLabel() }}</strong>
+      </div>
+    </div>
+
+    @if (link(); as link) {
+      @if (expired()) {
+        <app-sbd-reissue-notice tone="error" icon="pi pi-clock">
+          The payment link expired. Start the upgrade again from the beginning.
+          <button action pButton type="button" class="p-button-sm p-button-outlined p-button-secondary" label="Start again"
+            (click)="restart.emit()"></button>
+        </app-sbd-reissue-notice>
+      } @else {
+        <div class="sbd-rconf__link">
+          <div class="sbd-rconf__link-head"><b>Payment link</b><small>Send it to the customer</small></div>
+          <div class="sbd-rconf__link-row">
+            <input class="sbd-rconf__link-input" readonly [value]="link.url" (focus)="$any($event.target).select()" />
+            <button pButton type="button" class="p-button-sm p-button-outlined p-button-secondary"
+              [icon]="copied() ? 'pi pi-check' : 'pi pi-copy'" [label]="copied() ? 'Copied' : 'Copy'" (click)="copy(link.url)"></button>
+          </div>
+          @if (countdown(); as left) {
+            <small class="sbd-rconf__expiry" [class.sbd-rconf__expiry--soon]="soon()">Link expires in {{ left }}</small>
+          } @else if (link.expiresAt) {
+            <small class="sbd-rconf__expiry">Expires {{ link.expiresAt.slice(0, 16).replace('T', ' ') }}</small>
+          }
+        </div>
+      }
+    }
+
+    <!-- The dialog does not follow the result: after book-now, or once the link is sent, the agent follows the booking. -->
+    @if (booked()) {
+      <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+        The upgrade request was sent. Check the booking for the result.
+      </app-sbd-reissue-notice>
+    } @else if (link()) {
+      @if (!expired()) {
+        <app-sbd-reissue-notice tone="success" icon="pi pi-check-circle">
+          Copy the link and send it to the customer. The upgrade is placed once they pay: check the booking then.
+        </app-sbd-reissue-notice>
+      }
+    } @else {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">
+        {{ total() > 0
+          ? 'A payment link will be generated for the customer to pay the difference.'
+          : 'Nothing to pay: confirming places the upgrade straight away.' }}
+      </app-sbd-reissue-notice>
+    }
+  `, host: { class: 'sbd-rconf' }, styles: [":host{display:flex;flex-direction:column;gap:14px}.sbd-rconf__summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.sbd-rconf__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}.sbd-rconf__row strong{font-size:14px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums;white-space:nowrap}.sbd-rconf__row-main{display:flex;flex-direction:column;gap:2px;min-width:0}.sbd-rconf__row-main b{font-weight:700;color:#1e2e4a}.sbd-rconf__row-main small{font-size:12.5px;color:#64748b}.sbd-rconf__total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e8f0;padding-top:12px}.sbd-rconf__total span{font-size:14.5px;font-weight:700;color:#1e2e4a}.sbd-rconf__total strong{font-size:17px;font-weight:800;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rconf__link{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:10px}.sbd-rconf__link-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#1e2e4a}.sbd-rconf__link-head small{color:#94a3b8;font-size:12.5px}.sbd-rconf__link-row{display:flex;gap:8px}.sbd-rconf__link-input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rconf__link-input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}.sbd-rconf__link-input{flex:1;min-width:0;height:36px;font-size:12px;color:#334155}.sbd-rconf__expiry{color:#94a3b8;font-size:12.5px;font-variant-numeric:tabular-nums}.sbd-rconf__expiry--soon{color:#b45309;font-weight:600}\n"] }]
+        }], ctorParameters: () => [] });
+
+const OPTIONS = [
+    { key: 'change_date', icon: 'pi pi-calendar', title: 'Change Flight Date', description: 'Move one or more flights to a new date' },
+    { key: 'change_route', icon: 'pi pi-map', title: 'Change Route', description: 'Change the origin or destination airport' },
+    { key: 'upgrade_class', icon: 'pi pi-arrow-up', title: 'Upgrade Class', description: 'Move to a higher cabin or fare class' },
+];
+class SbdReissueServiceStepComponent {
+    constructor() {
+        this.upgradeAvailable = input(false);
+        this.chosen = output();
+        /** Upgrade Class is listed only when the upgrade-class API returned options. */
+        this.options = computed(() => OPTIONS.filter(o => o.key !== 'upgrade_class' || this.upgradeAvailable()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueServiceStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueServiceStepComponent, isStandalone: true, selector: "app-sbd-reissue-service-step", inputs: { upgradeAvailable: { classPropertyName: "upgradeAvailable", publicName: "upgradeAvailable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosen: "chosen" }, host: { classAttribute: "sbd-rsvc" }, ngImport: i0, template: `
+    @for (option of options(); track option.key) {
+      <button type="button" class="sbd-rsvc__option" (click)="chosen.emit(option.key)">
+        <span class="sbd-rsvc__icon"><i [class]="option.icon"></i></span>
+        <span class="sbd-rsvc__text">
+          <strong>{{ option.title }}</strong>
+          <small>{{ option.description }}</small>
+        </span>
+        <i class="pi pi-chevron-right sbd-rsvc__arrow"></i>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rsvc__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rsvc__option:hover{border-color:var(--sbd-accent, #6d4aff)}.sbd-rsvc__icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;border:1px solid #e2e8f0;color:#1e2e4a;display:flex;align-items:center;justify-content:center}.sbd-rsvc__icon .pi{font-size:16px}.sbd-rsvc__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rsvc__text strong{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rsvc__text small{font-size:12.5px;color:#64748b}.sbd-rsvc__arrow{color:#94a3b8;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueServiceStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-service-step', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (option of options(); track option.key) {
+      <button type="button" class="sbd-rsvc__option" (click)="chosen.emit(option.key)">
+        <span class="sbd-rsvc__icon"><i [class]="option.icon"></i></span>
+        <span class="sbd-rsvc__text">
+          <strong>{{ option.title }}</strong>
+          <small>{{ option.description }}</small>
+        </span>
+        <i class="pi pi-chevron-right sbd-rsvc__arrow"></i>
+      </button>
+    }
+  `, host: { class: 'sbd-rsvc' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rsvc__option{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;font-family:inherit;cursor:pointer}.sbd-rsvc__option:hover{border-color:var(--sbd-accent, #6d4aff)}.sbd-rsvc__icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;border:1px solid #e2e8f0;color:#1e2e4a;display:flex;align-items:center;justify-content:center}.sbd-rsvc__icon .pi{font-size:16px}.sbd-rsvc__text{flex:1;display:flex;flex-direction:column;gap:2px}.sbd-rsvc__text strong{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rsvc__text small{font-size:12.5px;color:#64748b}.sbd-rsvc__arrow{color:#94a3b8;font-size:12px}\n"] }]
+        }] });
+
+/** Leg cards in the cancel dialog's "Select Leg" design: checkbox overlay, outline badge, times row. */
+class SbdReissueLegsStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.anyAvailable = input(true);
+        this.unavailableText = input('None of these flights can be changed online. Handle this booking manually.');
+        /** Extra info line, e.g. "these flights must be upgraded together". */
+        this.note = input(null);
+        this.error = input(null);
+        this.toggled = output();
+    }
+    /** The note under a disabled leg. */
+    reasonText(reason) {
+        switch (reason) {
+            case 'flown': return 'This flight has already departed.';
+            case 'no-options': return 'No upgrade options are available for this flight.';
+            default: return 'This flight doesn’t support online reissue.';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueLegsStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueLegsStepComponent, isStandalone: true, selector: "app-sbd-reissue-legs-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, anyAvailable: { classPropertyName: "anyAvailable", publicName: "anyAvailable", isSignal: true, isRequired: false, transformFunction: null }, unavailableText: { classPropertyName: "unavailableText", publicName: "unavailableText", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { classAttribute: "sbd-rlegs" }, ngImport: i0, template: `
+    @if (!anyAvailable()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">{{ unavailableText() }}</app-sbd-reissue-notice>
+    }
+    @if (note()) {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">{{ note() }}</app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rlegs__card" role="checkbox" tabindex="0"
+        [attr.aria-checked]="row.selected" [attr.aria-disabled]="!row.available"
+        [class.sbd-rlegs__card--selected]="row.selected"
+        [class.sbd-rlegs__card--disabled]="!row.available"
+        (click)="toggled.emit(row.leg.legId)"
+        (keydown.enter)="toggled.emit(row.leg.legId)"
+        (keydown.space)="$event.preventDefault(); toggled.emit(row.leg.legId)">
+
+        <span class="sbd-rlegs__checkbox" [class.sbd-rlegs__checkbox--on]="row.selected" [class.sbd-rlegs__checkbox--off]="!row.available">
+          <i class="pi pi-check"></i>
+        </span>
+
+        <div class="sbd-rlegs__content">
+          <div class="sbd-rlegs__top">
+            <div>
+              <span class="sbd-rlegs__name">{{ row.from }} to {{ row.to }}</span>
+              <div class="sbd-rlegs__date">{{ row.direction ? row.direction + ' · ' : '' }}{{ row.dateLabel }}</div>
+            </div>
+            <span class="sbd-rlegs__badge" [class.sbd-rlegs__badge--green]="row.available">
+              {{ row.reason === 'flown' ? 'Used Flight' : row.reason === 'offline' ? 'Not supported' : row.reason ? 'Not available' : 'Available' }}
+            </span>
+          </div>
+
+          <div class="sbd-rlegs__times">
+            <span class="sbd-rlegs__time">{{ row.depTime }}</span>
+            <span class="sbd-rlegs__line">
+              <span class="sbd-rlegs__stops">{{ row.stopsLabel }}</span>
+              <i class="pi pi-arrow-right sbd-rlegs__arrow"></i>
+            </span>
+            <span class="sbd-rlegs__time">{{ row.arrTime }}</span>
+          </div>
+
+          @if (row.airlineLine) { <span class="sbd-rlegs__airline">{{ row.airlineLine }}</span> }
+
+          @if (!row.available) {
+            <div class="sbd-rlegs__notice">
+              <i class="pi pi-info-circle"></i>
+              <span>{{ reasonText(row.reason) }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rlegs__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;position:relative;padding:16px 16px 16px 48px;cursor:pointer}.sbd-rlegs__card:focus-visible{outline:2px solid var(--sbd-accent, #6d4aff);outline-offset:2px}.sbd-rlegs__card--selected{border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__card--disabled{opacity:.7;cursor:not-allowed}.sbd-rlegs__checkbox{position:absolute;top:16px;left:16px;width:22px;height:22px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}.sbd-rlegs__checkbox--on{background:var(--sbd-accent, #6d4aff);border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__checkbox--off{background:#f1f5f9;border-color:#e2e8f0}.sbd-rlegs__content{display:flex;flex-direction:column;gap:8px}.sbd-rlegs__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sbd-rlegs__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rlegs__date{font-size:13px;color:#64748b;margin-top:2px}.sbd-rlegs__badge{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:20px;padding:4px 14px;width:max-content;background:#f8fafc;color:#64748b;box-shadow:inset 0 0 0 1px #e2e8f0}.sbd-rlegs__badge--green{background:transparent;color:#16a34a;box-shadow:inset 0 0 0 1.5px currentColor}.sbd-rlegs__times{display:flex;align-items:center;gap:8px}.sbd-rlegs__time{font-size:18px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rlegs__line{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px 0 8px}.sbd-rlegs__line:before{content:\"\";position:absolute;left:0;right:14px;top:50%;height:2px;background:#cbd5e1;z-index:1}.sbd-rlegs__stops{font-size:12px;color:#64748b;background:#fff;padding:0 6px;z-index:2}.sbd-rlegs__arrow{position:absolute;right:4px;top:51%;transform:translateY(-50%);font-size:11px;color:#64748b}.sbd-rlegs__airline{font-size:12.5px;color:#64748b}.sbd-rlegs__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:#fdf1e0;color:#6b4a16;font-size:12.5px;line-height:1.4}.sbd-rlegs__notice i{flex-shrink:0;margin-top:1px;color:#b98a3e}\n"], dependencies: [{ kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueLegsStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-legs-step', standalone: true, imports: [SbdReissueNoticeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (!anyAvailable()) {
+      <app-sbd-reissue-notice tone="warn" icon="pi pi-exclamation-triangle">{{ unavailableText() }}</app-sbd-reissue-notice>
+    }
+    @if (note()) {
+      <app-sbd-reissue-notice icon="pi pi-info-circle">{{ note() }}</app-sbd-reissue-notice>
+    }
+    @if (error()) {
+      <app-sbd-reissue-notice tone="error" icon="pi pi-exclamation-circle">{{ error() }}</app-sbd-reissue-notice>
+    }
+
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rlegs__card" role="checkbox" tabindex="0"
+        [attr.aria-checked]="row.selected" [attr.aria-disabled]="!row.available"
+        [class.sbd-rlegs__card--selected]="row.selected"
+        [class.sbd-rlegs__card--disabled]="!row.available"
+        (click)="toggled.emit(row.leg.legId)"
+        (keydown.enter)="toggled.emit(row.leg.legId)"
+        (keydown.space)="$event.preventDefault(); toggled.emit(row.leg.legId)">
+
+        <span class="sbd-rlegs__checkbox" [class.sbd-rlegs__checkbox--on]="row.selected" [class.sbd-rlegs__checkbox--off]="!row.available">
+          <i class="pi pi-check"></i>
+        </span>
+
+        <div class="sbd-rlegs__content">
+          <div class="sbd-rlegs__top">
+            <div>
+              <span class="sbd-rlegs__name">{{ row.from }} to {{ row.to }}</span>
+              <div class="sbd-rlegs__date">{{ row.direction ? row.direction + ' · ' : '' }}{{ row.dateLabel }}</div>
+            </div>
+            <span class="sbd-rlegs__badge" [class.sbd-rlegs__badge--green]="row.available">
+              {{ row.reason === 'flown' ? 'Used Flight' : row.reason === 'offline' ? 'Not supported' : row.reason ? 'Not available' : 'Available' }}
+            </span>
+          </div>
+
+          <div class="sbd-rlegs__times">
+            <span class="sbd-rlegs__time">{{ row.depTime }}</span>
+            <span class="sbd-rlegs__line">
+              <span class="sbd-rlegs__stops">{{ row.stopsLabel }}</span>
+              <i class="pi pi-arrow-right sbd-rlegs__arrow"></i>
+            </span>
+            <span class="sbd-rlegs__time">{{ row.arrTime }}</span>
+          </div>
+
+          @if (row.airlineLine) { <span class="sbd-rlegs__airline">{{ row.airlineLine }}</span> }
+
+          @if (!row.available) {
+            <div class="sbd-rlegs__notice">
+              <i class="pi pi-info-circle"></i>
+              <span>{{ reasonText(row.reason) }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, host: { class: 'sbd-rlegs' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rlegs__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;position:relative;padding:16px 16px 16px 48px;cursor:pointer}.sbd-rlegs__card:focus-visible{outline:2px solid var(--sbd-accent, #6d4aff);outline-offset:2px}.sbd-rlegs__card--selected{border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__card--disabled{opacity:.7;cursor:not-allowed}.sbd-rlegs__checkbox{position:absolute;top:16px;left:16px;width:22px;height:22px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}.sbd-rlegs__checkbox--on{background:var(--sbd-accent, #6d4aff);border-color:var(--sbd-accent, #6d4aff)}.sbd-rlegs__checkbox--off{background:#f1f5f9;border-color:#e2e8f0}.sbd-rlegs__content{display:flex;flex-direction:column;gap:8px}.sbd-rlegs__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sbd-rlegs__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rlegs__date{font-size:13px;color:#64748b;margin-top:2px}.sbd-rlegs__badge{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:20px;padding:4px 14px;width:max-content;background:#f8fafc;color:#64748b;box-shadow:inset 0 0 0 1px #e2e8f0}.sbd-rlegs__badge--green{background:transparent;color:#16a34a;box-shadow:inset 0 0 0 1.5px currentColor}.sbd-rlegs__times{display:flex;align-items:center;gap:8px}.sbd-rlegs__time{font-size:18px;font-weight:700;color:#1e2e4a;font-variant-numeric:tabular-nums}.sbd-rlegs__line{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px 0 8px}.sbd-rlegs__line:before{content:\"\";position:absolute;left:0;right:14px;top:50%;height:2px;background:#cbd5e1;z-index:1}.sbd-rlegs__stops{font-size:12px;color:#64748b;background:#fff;padding:0 6px;z-index:2}.sbd-rlegs__arrow{position:absolute;right:4px;top:51%;transform:translateY(-50%);font-size:11px;color:#64748b}.sbd-rlegs__airline{font-size:12.5px;color:#64748b}.sbd-rlegs__notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:#fdf1e0;color:#6b4a16;font-size:12.5px;line-height:1.4}.sbd-rlegs__notice i{flex-shrink:0;margin-top:1px;color:#b98a3e}\n"] }]
+        }] });
+
+class SbdReissueDateStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.changed = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDateStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueDateStepComponent, isStandalone: true, selector: "app-sbd-reissue-date-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "sbd-rdate" }, ngImport: i0, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rdate__card">
+        <div class="sbd-rdate__head">
+          <span class="sbd-rdate__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rdate__current">Currently {{ row.current }}</span>
+        </div>
+        <label class="sbd-rdate__field">
+          <span>New departure date</span>
+          <input type="date" class="sbd-rdate__input"
+            [value]="row.value" [min]="row.min" [attr.max]="row.max || null"
+            (input)="changed.emit({ legId: row.leg.legId, date: $any($event.target).value })" />
+        </label>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rdate__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rdate__head{display:flex;flex-direction:column;gap:2px}.sbd-rdate__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rdate__current{font-size:13px;color:#64748b}.sbd-rdate__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rdate__input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rdate__input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDateStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-date-step', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rdate__card">
+        <div class="sbd-rdate__head">
+          <span class="sbd-rdate__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rdate__current">Currently {{ row.current }}</span>
+        </div>
+        <label class="sbd-rdate__field">
+          <span>New departure date</span>
+          <input type="date" class="sbd-rdate__input"
+            [value]="row.value" [min]="row.min" [attr.max]="row.max || null"
+            (input)="changed.emit({ legId: row.leg.legId, date: $any($event.target).value })" />
+        </label>
+      </div>
+    }
+  `, host: { class: 'sbd-rdate' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rdate__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rdate__head{display:flex;flex-direction:column;gap:2px}.sbd-rdate__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rdate__current{font-size:13px;color:#64748b}.sbd-rdate__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rdate__input{height:40px;padding:0 12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;font-family:inherit;color:#1e2e4a}.sbd-rdate__input:focus{outline:none;border-color:var(--sbd-accent, #6d4aff)}\n"] }]
+        }] });
+
+class SbdReissueRouteStepComponent {
+    constructor() {
+        this.rows = input.required();
+        this.options = input.required();
+        this.airportChanged = output();
+        this.searched = output();
+        this.swapped = output();
+        this.compare = compareAirports;
+        this.sides = [
+            { key: 'origin', label: 'From' },
+            { key: 'destination', label: 'To' },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueRouteStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueRouteStepComponent, isStandalone: true, selector: "app-sbd-reissue-route-step", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { airportChanged: "airportChanged", searched: "searched", swapped: "swapped" }, host: { classAttribute: "sbd-rroute" }, ngImport: i0, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rroute__card">
+        <div class="sbd-rroute__head">
+          <span class="sbd-rroute__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rroute__current">Currently {{ row.current }}</span>
+        </div>
+
+        <div class="sbd-rroute__pair">
+          @for (side of sides; track side.key) {
+            <label class="sbd-rroute__field">
+              <span>{{ side.label }}</span>
+              <ng-select class="sbd-rroute__select" bindLabel="label" [clearable]="false"
+                [items]="options()" [compareWith]="compare" [ngModel]="row[side.key]"
+                (ngModelChange)="airportChanged.emit({ legId: row.leg.legId, side: side.key, airport: $event })"
+                (search)="searched.emit($event.term)">
+                <ng-template ng-label-tmp let-item="item">{{ item.city_name }} ({{ item.id }})</ng-template>
+                <ng-template ng-option-tmp let-item="item">
+                  <div class="sbd-rroute__opt"><b>{{ item.city_name }} ({{ item.id }})</b><small>{{ item.name }}</small></div>
+                </ng-template>
+              </ng-select>
+            </label>
+
+            <!-- Swap arrow, between From and To -->
+            @if ($first) {
+              <button type="button" class="sbd-rroute__swap" aria-label="Swap origin and destination"
+                (click)="swapped.emit(row.leg.legId)">
+                <!-- Inline SVG: primeicons 4.x has no horizontal swap arrows. -->
+                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"
+                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M2 5.5h11M10.5 3l2.5 2.5-2.5 2.5M14 10.5H3M5.5 8 3 10.5 5.5 13" />
+                </svg>
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rroute__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rroute__head{display:flex;flex-direction:column;gap:2px}.sbd-rroute__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rroute__current{font-size:13px;color:#64748b}.sbd-rroute__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rroute__pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}.sbd-rroute__swap{width:32px;height:32px;margin-bottom:4px;border-radius:50%;border:1.5px solid #e2e8f0;background:#fff;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}.sbd-rroute__swap .pi{font-size:13px}.sbd-rroute__swap:hover{background:#f8fafc;border-color:var(--sbd-accent, #6d4aff)}.sbd-rroute__opt{display:flex;flex-direction:column;line-height:1.3;min-width:0}.sbd-rroute__opt b{font-size:13px;font-weight:600;color:#1e2e4a}.sbd-rroute__opt small{font-size:11px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .sbd-rroute__select{font-size:13px;font-weight:400;color:#1e2e4a}:host ::ng-deep .sbd-rroute__select .ng-select-container{min-height:40px;border-radius:10px;border:1.5px solid #e2e8f0}:host ::ng-deep .sbd-rroute__select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--sbd-accent, #6d4aff);box-shadow:none}:host ::ng-deep .sbd-rroute__select .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel{min-width:100%;z-index:1100;border-radius:10px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option{padding:8px 12px;font-size:13px;white-space:normal}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-selected,:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-marked{background:var(--sbd-accent-soft, #ede9fe)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueRouteStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-route-step', standalone: true, imports: [FormsModule, NgSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (row of rows(); track row.leg.legId) {
+      <div class="sbd-rroute__card">
+        <div class="sbd-rroute__head">
+          <span class="sbd-rroute__name">{{ row.leg.originCode }} to {{ row.leg.destinationCode }}</span>
+          <span class="sbd-rroute__current">Currently {{ row.current }}</span>
+        </div>
+
+        <div class="sbd-rroute__pair">
+          @for (side of sides; track side.key) {
+            <label class="sbd-rroute__field">
+              <span>{{ side.label }}</span>
+              <ng-select class="sbd-rroute__select" bindLabel="label" [clearable]="false"
+                [items]="options()" [compareWith]="compare" [ngModel]="row[side.key]"
+                (ngModelChange)="airportChanged.emit({ legId: row.leg.legId, side: side.key, airport: $event })"
+                (search)="searched.emit($event.term)">
+                <ng-template ng-label-tmp let-item="item">{{ item.city_name }} ({{ item.id }})</ng-template>
+                <ng-template ng-option-tmp let-item="item">
+                  <div class="sbd-rroute__opt"><b>{{ item.city_name }} ({{ item.id }})</b><small>{{ item.name }}</small></div>
+                </ng-template>
+              </ng-select>
+            </label>
+
+            <!-- Swap arrow, between From and To -->
+            @if ($first) {
+              <button type="button" class="sbd-rroute__swap" aria-label="Swap origin and destination"
+                (click)="swapped.emit(row.leg.legId)">
+                <!-- Inline SVG: primeicons 4.x has no horizontal swap arrows. -->
+                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6"
+                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M2 5.5h11M10.5 3l2.5 2.5-2.5 2.5M14 10.5H3M5.5 8 3 10.5 5.5 13" />
+                </svg>
+              </button>
+            }
+          }
+        </div>
+      </div>
+    }
+  `, host: { class: 'sbd-rroute' }, styles: [":host{display:flex;flex-direction:column;gap:12px}.sbd-rroute__card{border:1.5px solid #e2e8f0;border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s;padding:16px;display:flex;flex-direction:column;gap:14px}.sbd-rroute__head{display:flex;flex-direction:column;gap:2px}.sbd-rroute__name{font-size:15px;font-weight:700;color:#1e2e4a}.sbd-rroute__current{font-size:13px;color:#64748b}.sbd-rroute__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;font-weight:600;color:#475569}.sbd-rroute__pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:end}.sbd-rroute__swap{width:32px;height:32px;margin-bottom:4px;border-radius:50%;border:1.5px solid #e2e8f0;background:#fff;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}.sbd-rroute__swap .pi{font-size:13px}.sbd-rroute__swap:hover{background:#f8fafc;border-color:var(--sbd-accent, #6d4aff)}.sbd-rroute__opt{display:flex;flex-direction:column;line-height:1.3;min-width:0}.sbd-rroute__opt b{font-size:13px;font-weight:600;color:#1e2e4a}.sbd-rroute__opt small{font-size:11px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .sbd-rroute__select{font-size:13px;font-weight:400;color:#1e2e4a}:host ::ng-deep .sbd-rroute__select .ng-select-container{min-height:40px;border-radius:10px;border:1.5px solid #e2e8f0}:host ::ng-deep .sbd-rroute__select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--sbd-accent, #6d4aff);box-shadow:none}:host ::ng-deep .sbd-rroute__select .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel{min-width:100%;z-index:1100;border-radius:10px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option{padding:8px 12px;font-size:13px;white-space:normal}:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-selected,:host ::ng-deep .sbd-rroute__select .ng-dropdown-panel .ng-option.ng-option-marked{background:var(--sbd-accent-soft, #ede9fe)}\n"] }]
+        }] });
+
+/**
+ * Reissue dialog shell: owns the p-dialog, the loading / error states and the footer, and swaps the step
+ * components. All state and rules live in `SbdReissueStore`; the steps only render and emit.
+ */
+class SbdReissueDialogComponent {
+    constructor() {
+        this.store = inject(SbdReissueStore);
+        this.upgrade = inject(SbdReissueUpgradeStore);
+        this.config = inject(SBD_CONFIG);
+        this.injector = inject(Injector);
+        this.visible = input(false);
+        this.bookingId = input('');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.bookingData = input(null);
+        this.closed = output();
+        /** Header title per screen, like the cancel dialog's "Select Leg to Cancel" / "Refund Method". */
+        this.title = computed(() => {
+            switch (this.store.step()) {
+                case 'legs': return 'Select Flight to Change';
+                case 'edit': return this.store.service() === 'change_date' ? 'Choose New Date' : 'Choose New Route';
+                case 'upgrade-legs': return 'Select Flight to Upgrade';
+                case 'upgrade': return 'Choose New Class';
+                case 'confirm': return 'Review Upgrade';
+                default: return 'Reissue Booking';
+            }
+        });
+        /** Gray hint above the footer (cancel's "Select at least one flight to continue"), or why Search is disabled. */
+        this.hint = computed(() => {
+            switch (this.store.step()) {
+                case 'legs':
+                    return this.store.anyAvailable() && !this.store.canContinue() ? 'Select at least one flight to continue' : null;
+                case 'edit':
+                    return this.store.validationError();
+                case 'upgrade-legs':
+                    return this.upgrade.anyLegUpgradable() && !this.upgrade.canContinueFromLegs() && !this.upgrade.submitting()
+                        ? 'Select at least one flight to continue'
+                        : null;
+                case 'upgrade':
+                    return this.upgrade.sections().some(s => s.options.length) && !this.upgrade.canContinue() && !this.upgrade.submitting()
+                        ? 'Select a class to continue'
+                        : null;
+                default:
+                    return null;
+            }
+        });
+        // Depends only on these three inputs; whatever the store reads while opening must not retrigger it.
+        effect(() => {
+            const [visible, data, id] = [this.visible(), this.bookingData(), this.bookingId()];
+            if (visible)
+                untracked(() => this.store.open(data, id));
+        }, { allowSignalWrites: true });
+    }
+    onServiceChosen(service) {
+        if (service === 'upgrade_class')
+            this.upgrade.start();
+        else
+            this.store.chooseService(service);
+    }
+    /** Back from the options returns to "select leg" only when that step was shown (the upgrade store knows). */
+    onBack() {
+        if (this.store.step() === 'upgrade')
+            this.upgrade.back();
+        else
+            this.store.back();
+    }
+    /** The payment link expired: redo the whole reissue from the start (a new post-booking, the service list again). */
+    restartFlow() {
+        this.store.open(this.bookingData(), this.bookingId());
+    }
+    /** Redirects to the web search (new tab: the agent keeps the dashboard open next to the web flow). */
+    async searchFlights() {
+        const url = this.store.searchUrl();
+        if (!url)
+            return;
+        // Open the tab now, inside the click, so the browser does not block it while the host's token is awaited.
+        const tab = window.open('about:blank', '_blank');
+        const finalUrl = appendAuthParams(url, await this.redirectAuthParams(), this.config.redirectAuthIn);
+        if (tab) {
+            tab.opener = null; // same protection as `noopener`
+            tab.location.href = finalUrl;
+        }
+        else {
+            window.open(finalUrl, '_blank', 'noopener');
+        }
+        this.closed.emit();
+    }
+    /** The host's auth parameters for the web link; `{}` when it has none or it fails (the web then asks to log in). */
+    async redirectAuthParams() {
+        const provide = this.config.redirectAuthParams;
+        if (!provide)
+            return {};
+        try {
+            const result = runInInjectionContext(this.injector, provide);
+            return (isObservable(result) ? await firstValueFrom(result) : await result) ?? {};
+        }
+        catch {
+            return {};
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SbdReissueDialogComponent, isStandalone: true, selector: "app-sbd-reissue-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, bookingData: { classPropertyName: "bookingData", publicName: "bookingData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, providers: [SbdReissueStore, SbdReissueUpgradeStore], ngImport: i0, template: "<p-dialog [visible]=\"visible()\" (visibleChange)=\"$event ? null : closed.emit()\"\n  [modal]=\"true\" [blockScroll]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\n  [showHeader]=\"false\" [style]=\"{ width: '560px', padding: '0' }\" styleClass=\"sbd-reissue-dialog-wrapper\">\n\n  <div class=\"sbd-reissue\">\n\n    <!-- Header: same layout as the cancel dialog (round close button, centered title + booking id) -->\n    <div class=\"sbd-reissue__header\">\n      <button type=\"button\" class=\"sbd-reissue__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n      <div class=\"sbd-reissue__header-text\">\n        <h3 class=\"sbd-reissue__title\">{{ title() }}</h3>\n        <span class=\"sbd-reissue__sub\">Booking ID #{{ bookingId() }}</span>\n      </div>\n    </div>\n\n    @if (store.loading()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon\"><i class=\"pi pi-spin pi-spinner\"></i></div>\n        <div class=\"sbd-reissue__state-text\">Checking availability\u2026</div>\n        <div class=\"sbd-reissue__dots\"><span></span><span></span><span></span></div>\n      </div>\n    } @else if (store.error()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon sbd-reissue__state-icon--warn\"><i class=\"pi pi-exclamation-triangle\"></i></div>\n        <div class=\"sbd-reissue__state-text\">{{ store.error() }}</div>\n        <button pButton type=\"button\" label=\"Retry\" class=\"p-button-outlined p-button-secondary\" (click)=\"store.load()\"></button>\n      </div>\n    } @else if (store.blocked()) {\n      <!-- No leg can be reissued online: same idea as the cancel dialog's \"not eligible, escalate\" notice. -->\n      <div class=\"sbd-reissue__body\">\n        <app-sbd-reissue-notice tone=\"warn\" icon=\"pi pi-exclamation-triangle\">\n          <strong>{{ store.blocked()?.title }}</strong><br>{{ store.blocked()?.text }}\n        </app-sbd-reissue-notice>\n      </div>\n      <div class=\"sbd-reissue__footer\">\n        <button pButton type=\"button\" label=\"Close\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n          (click)=\"closed.emit()\"></button>\n      </div>\n    } @else {\n      <div class=\"sbd-reissue__body\">\n        @switch (store.step()) {\n          @case ('service') {\n            <app-sbd-reissue-notice>Change requests are subject to availability from the airline.</app-sbd-reissue-notice>\n            <app-sbd-reissue-service-step\n              [upgradeAvailable]=\"store.upgradeAvailable()\"\n              (chosen)=\"onServiceChosen($event)\" />\n          }\n          @case ('legs') {\n            <app-sbd-reissue-legs-step\n              [rows]=\"store.legRows()\"\n              [anyAvailable]=\"store.anyAvailable()\"\n              (toggled)=\"store.toggleLeg($event)\" />\n          }\n          @case ('edit') {\n            @if (store.service() === 'change_date') {\n              <app-sbd-reissue-date-step\n                [rows]=\"store.dateRows()\"\n                (changed)=\"store.setDate($event.legId, $event.date)\" />\n            } @else {\n              <app-sbd-reissue-route-step\n                [rows]=\"store.routeRows()\"\n                [options]=\"store.airportOptions()\"\n                (airportChanged)=\"store.setAirport($event.legId, $event.side, $event.airport)\"\n                (searched)=\"store.searchAirports($event)\"\n                (swapped)=\"store.swapAirports($event)\" />\n            }\n          }\n          @case ('upgrade-legs') {\n            <app-sbd-reissue-legs-step\n              unavailableText=\"None of these flights can be upgraded online. Handle this booking manually.\"\n              [rows]=\"upgrade.legRows()\"\n              [anyAvailable]=\"upgrade.anyLegUpgradable()\"\n              [note]=\"store.allowSingleLegSelection() ? null : 'These flights must be upgraded together.'\"\n              [error]=\"upgrade.error()\"\n              (toggled)=\"upgrade.toggleLeg($event)\" />\n          }\n          @case ('upgrade') {\n            <app-sbd-reissue-upgrade-step\n              [sections]=\"upgrade.sections()\"\n              [error]=\"upgrade.error()\"\n              (picked)=\"upgrade.select($event.sectionId, $event.key)\" />\n          }\n          @case ('confirm') {\n            <app-sbd-reissue-upgrade-confirm-step\n              [rows]=\"upgrade.summary()\"\n              [total]=\"upgrade.total()\"\n              [totalLabel]=\"upgrade.totalLabel()\"\n              [priceChanged]=\"upgrade.priceChanged()\"\n              [booked]=\"upgrade.booked()\"\n              [link]=\"upgrade.paymentLink()\"\n              [error]=\"upgrade.error()\"\n              (restart)=\"restartFlow()\" />\n          }\n        }\n      </div>\n\n      @if (hint(); as text) {\n        <div class=\"sbd-reissue__hint\">{{ text }}</div>\n      }\n\n      @if (store.step() !== 'service') {\n        <div class=\"sbd-reissue__footer\">\n          <button pButton type=\"button\" label=\"Back\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n            [disabled]=\"store.step() === 'confirm' && upgrade.locked()\" (click)=\"onBack()\"></button>\n\n          @switch (store.step()) {\n            @case ('legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!store.canContinue()\" (click)=\"store.goToEdit()\"></button>\n            }\n            @case ('edit') {\n              <button pButton type=\"button\" icon=\"pi pi-search\" label=\"Search flights\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!!store.validationError()\" (click)=\"searchFlights()\"></button>\n            }\n            @case ('upgrade-legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinueFromLegs()\" (click)=\"upgrade.continueFromLegs()\"></button>\n            }\n            @case ('upgrade') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinue()\" (click)=\"upgrade.continue()\"></button>\n            }\n            @case ('confirm') {\n              @switch (upgrade.action()) {\n                @case ('done') {\n                  <button pButton type=\"button\" label=\"Close\" class=\"sbd-reissue__btn\" (click)=\"closed.emit()\"></button>\n                }\n                @case ('book') {\n                  <button pButton type=\"button\" label=\"Confirm upgrade\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n                @case ('link') {\n                  <button pButton type=\"button\" icon=\"pi pi-link\" label=\"Generate payment link\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n              }\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .sbd-reissue-dialog-wrapper{border-radius:16px;box-shadow:0 24px 60px #0f172a38}:host ::ng-deep .sbd-reissue-dialog-wrapper .p-dialog-content{padding:0;border-radius:16px;overflow:visible}.sbd-reissue{font-family:inherit;position:relative}.sbd-reissue__header{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}.sbd-reissue__close{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#f8fafc;border:none;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer}.sbd-reissue__close .pi{font-size:13px}.sbd-reissue__close:hover{background:#e2e8f0}.sbd-reissue__header-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-right:32px}.sbd-reissue__title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0}.sbd-reissue__sub{font-size:12.5px;color:#94a3b8}.sbd-reissue__body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}.sbd-reissue__hint{text-align:center;padding:0 20px 12px;font-size:13px;color:#94a3b8}.sbd-reissue__footer{display:flex;justify-content:flex-end;gap:10px;align-items:stretch;padding:14px 20px;border-top:1px solid #e2e8f0;background:#fff;border-radius:0 0 16px 16px}.sbd-reissue__btn{flex:1 1 0;justify-content:center}.sbd-reissue__state{padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.sbd-reissue__state-icon{width:56px;height:56px;border-radius:50%;background:#fff7ed;border:2px solid #fed7aa;display:flex;align-items:center;justify-content:center}.sbd-reissue__state-icon .pi{font-size:24px;color:#f97316}.sbd-reissue__state-icon--warn{background:#fef2f2;border-color:#fecaca}.sbd-reissue__state-icon--warn .pi{color:#ef4444}.sbd-reissue__state-text{font-size:13px;color:#64748b;min-height:20px}.sbd-reissue__dots{display:flex;gap:6px}.sbd-reissue__dots span{width:7px;height:7px;border-radius:50%;background:#f97316;opacity:.3;animation:sbd-reissue-dot 1.2s ease-in-out infinite}.sbd-reissue__dots span:nth-child(2){animation-delay:.2s}.sbd-reissue__dots span:nth-child(3){animation-delay:.4s}@keyframes sbd-reissue-dot{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: SbdReissueNoticeComponent, selector: "app-sbd-reissue-notice", inputs: ["icon", "tone"] }, { kind: "component", type: SbdReissueServiceStepComponent, selector: "app-sbd-reissue-service-step", inputs: ["upgradeAvailable"], outputs: ["chosen"] }, { kind: "component", type: SbdReissueLegsStepComponent, selector: "app-sbd-reissue-legs-step", inputs: ["rows", "anyAvailable", "unavailableText", "note", "error"], outputs: ["toggled"] }, { kind: "component", type: SbdReissueDateStepComponent, selector: "app-sbd-reissue-date-step", inputs: ["rows"], outputs: ["changed"] }, { kind: "component", type: SbdReissueRouteStepComponent, selector: "app-sbd-reissue-route-step", inputs: ["rows", "options"], outputs: ["airportChanged", "searched", "swapped"] }, { kind: "component", type: SbdReissueUpgradeStepComponent, selector: "app-sbd-reissue-upgrade-step", inputs: ["sections", "error"], outputs: ["picked"] }, { kind: "component", type: SbdReissueUpgradeConfirmStepComponent, selector: "app-sbd-reissue-upgrade-confirm-step", inputs: ["rows", "total", "totalLabel", "priceChanged", "booked", "link", "error"], outputs: ["restart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbdReissueDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sbd-reissue-dialog', standalone: true, imports: [
+                        DialogModule,
+                        ButtonModule,
+                        SbdReissueNoticeComponent,
+                        SbdReissueServiceStepComponent,
+                        SbdReissueLegsStepComponent,
+                        SbdReissueDateStepComponent,
+                        SbdReissueRouteStepComponent,
+                        SbdReissueUpgradeStepComponent,
+                        SbdReissueUpgradeConfirmStepComponent,
+                    ], providers: [SbdReissueStore, SbdReissueUpgradeStore], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog [visible]=\"visible()\" (visibleChange)=\"$event ? null : closed.emit()\"\n  [modal]=\"true\" [blockScroll]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\n  [showHeader]=\"false\" [style]=\"{ width: '560px', padding: '0' }\" styleClass=\"sbd-reissue-dialog-wrapper\">\n\n  <div class=\"sbd-reissue\">\n\n    <!-- Header: same layout as the cancel dialog (round close button, centered title + booking id) -->\n    <div class=\"sbd-reissue__header\">\n      <button type=\"button\" class=\"sbd-reissue__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n      <div class=\"sbd-reissue__header-text\">\n        <h3 class=\"sbd-reissue__title\">{{ title() }}</h3>\n        <span class=\"sbd-reissue__sub\">Booking ID #{{ bookingId() }}</span>\n      </div>\n    </div>\n\n    @if (store.loading()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon\"><i class=\"pi pi-spin pi-spinner\"></i></div>\n        <div class=\"sbd-reissue__state-text\">Checking availability\u2026</div>\n        <div class=\"sbd-reissue__dots\"><span></span><span></span><span></span></div>\n      </div>\n    } @else if (store.error()) {\n      <div class=\"sbd-reissue__state\">\n        <div class=\"sbd-reissue__state-icon sbd-reissue__state-icon--warn\"><i class=\"pi pi-exclamation-triangle\"></i></div>\n        <div class=\"sbd-reissue__state-text\">{{ store.error() }}</div>\n        <button pButton type=\"button\" label=\"Retry\" class=\"p-button-outlined p-button-secondary\" (click)=\"store.load()\"></button>\n      </div>\n    } @else if (store.blocked()) {\n      <!-- No leg can be reissued online: same idea as the cancel dialog's \"not eligible, escalate\" notice. -->\n      <div class=\"sbd-reissue__body\">\n        <app-sbd-reissue-notice tone=\"warn\" icon=\"pi pi-exclamation-triangle\">\n          <strong>{{ store.blocked()?.title }}</strong><br>{{ store.blocked()?.text }}\n        </app-sbd-reissue-notice>\n      </div>\n      <div class=\"sbd-reissue__footer\">\n        <button pButton type=\"button\" label=\"Close\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n          (click)=\"closed.emit()\"></button>\n      </div>\n    } @else {\n      <div class=\"sbd-reissue__body\">\n        @switch (store.step()) {\n          @case ('service') {\n            <app-sbd-reissue-notice>Change requests are subject to availability from the airline.</app-sbd-reissue-notice>\n            <app-sbd-reissue-service-step\n              [upgradeAvailable]=\"store.upgradeAvailable()\"\n              (chosen)=\"onServiceChosen($event)\" />\n          }\n          @case ('legs') {\n            <app-sbd-reissue-legs-step\n              [rows]=\"store.legRows()\"\n              [anyAvailable]=\"store.anyAvailable()\"\n              (toggled)=\"store.toggleLeg($event)\" />\n          }\n          @case ('edit') {\n            @if (store.service() === 'change_date') {\n              <app-sbd-reissue-date-step\n                [rows]=\"store.dateRows()\"\n                (changed)=\"store.setDate($event.legId, $event.date)\" />\n            } @else {\n              <app-sbd-reissue-route-step\n                [rows]=\"store.routeRows()\"\n                [options]=\"store.airportOptions()\"\n                (airportChanged)=\"store.setAirport($event.legId, $event.side, $event.airport)\"\n                (searched)=\"store.searchAirports($event)\"\n                (swapped)=\"store.swapAirports($event)\" />\n            }\n          }\n          @case ('upgrade-legs') {\n            <app-sbd-reissue-legs-step\n              unavailableText=\"None of these flights can be upgraded online. Handle this booking manually.\"\n              [rows]=\"upgrade.legRows()\"\n              [anyAvailable]=\"upgrade.anyLegUpgradable()\"\n              [note]=\"store.allowSingleLegSelection() ? null : 'These flights must be upgraded together.'\"\n              [error]=\"upgrade.error()\"\n              (toggled)=\"upgrade.toggleLeg($event)\" />\n          }\n          @case ('upgrade') {\n            <app-sbd-reissue-upgrade-step\n              [sections]=\"upgrade.sections()\"\n              [error]=\"upgrade.error()\"\n              (picked)=\"upgrade.select($event.sectionId, $event.key)\" />\n          }\n          @case ('confirm') {\n            <app-sbd-reissue-upgrade-confirm-step\n              [rows]=\"upgrade.summary()\"\n              [total]=\"upgrade.total()\"\n              [totalLabel]=\"upgrade.totalLabel()\"\n              [priceChanged]=\"upgrade.priceChanged()\"\n              [booked]=\"upgrade.booked()\"\n              [link]=\"upgrade.paymentLink()\"\n              [error]=\"upgrade.error()\"\n              (restart)=\"restartFlow()\" />\n          }\n        }\n      </div>\n\n      @if (hint(); as text) {\n        <div class=\"sbd-reissue__hint\">{{ text }}</div>\n      }\n\n      @if (store.step() !== 'service') {\n        <div class=\"sbd-reissue__footer\">\n          <button pButton type=\"button\" label=\"Back\" class=\"p-button-outlined p-button-secondary sbd-reissue__btn\"\n            [disabled]=\"store.step() === 'confirm' && upgrade.locked()\" (click)=\"onBack()\"></button>\n\n          @switch (store.step()) {\n            @case ('legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!store.canContinue()\" (click)=\"store.goToEdit()\"></button>\n            }\n            @case ('edit') {\n              <button pButton type=\"button\" icon=\"pi pi-search\" label=\"Search flights\" class=\"sbd-reissue__btn\"\n                [disabled]=\"!!store.validationError()\" (click)=\"searchFlights()\"></button>\n            }\n            @case ('upgrade-legs') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinueFromLegs()\" (click)=\"upgrade.continueFromLegs()\"></button>\n            }\n            @case ('upgrade') {\n              <button pButton type=\"button\" label=\"Continue\" class=\"sbd-reissue__btn\" [loading]=\"upgrade.submitting()\"\n                [disabled]=\"!upgrade.canContinue()\" (click)=\"upgrade.continue()\"></button>\n            }\n            @case ('confirm') {\n              @switch (upgrade.action()) {\n                @case ('done') {\n                  <button pButton type=\"button\" label=\"Close\" class=\"sbd-reissue__btn\" (click)=\"closed.emit()\"></button>\n                }\n                @case ('book') {\n                  <button pButton type=\"button\" label=\"Confirm upgrade\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n                @case ('link') {\n                  <button pButton type=\"button\" icon=\"pi pi-link\" label=\"Generate payment link\" class=\"sbd-reissue__btn\"\n                    [loading]=\"upgrade.submitting()\" (click)=\"upgrade.confirm()\"></button>\n                }\n              }\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .sbd-reissue-dialog-wrapper{border-radius:16px;box-shadow:0 24px 60px #0f172a38}:host ::ng-deep .sbd-reissue-dialog-wrapper .p-dialog-content{padding:0;border-radius:16px;overflow:visible}.sbd-reissue{font-family:inherit;position:relative}.sbd-reissue__header{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 0}.sbd-reissue__close{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#f8fafc;border:none;color:#1e2e4a;display:flex;align-items:center;justify-content:center;cursor:pointer}.sbd-reissue__close .pi{font-size:13px}.sbd-reissue__close:hover{background:#e2e8f0}.sbd-reissue__header-text{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-right:32px}.sbd-reissue__title{font-size:19px;font-weight:800;color:#1e2e4a;margin:0}.sbd-reissue__sub{font-size:12.5px;color:#94a3b8}.sbd-reissue__body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}.sbd-reissue__hint{text-align:center;padding:0 20px 12px;font-size:13px;color:#94a3b8}.sbd-reissue__footer{display:flex;justify-content:flex-end;gap:10px;align-items:stretch;padding:14px 20px;border-top:1px solid #e2e8f0;background:#fff;border-radius:0 0 16px 16px}.sbd-reissue__btn{flex:1 1 0;justify-content:center}.sbd-reissue__state{padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.sbd-reissue__state-icon{width:56px;height:56px;border-radius:50%;background:#fff7ed;border:2px solid #fed7aa;display:flex;align-items:center;justify-content:center}.sbd-reissue__state-icon .pi{font-size:24px;color:#f97316}.sbd-reissue__state-icon--warn{background:#fef2f2;border-color:#fecaca}.sbd-reissue__state-icon--warn .pi{color:#ef4444}.sbd-reissue__state-text{font-size:13px;color:#64748b;min-height:20px}.sbd-reissue__dots{display:flex;gap:6px}.sbd-reissue__dots span{width:7px;height:7px;border-radius:50%;background:#f97316;opacity:.3;animation:sbd-reissue-dot 1.2s ease-in-out infinite}.sbd-reissue__dots span:nth-child(2){animation-delay:.2s}.sbd-reissue__dots span:nth-child(3){animation-delay:.4s}@keyframes sbd-reissue-dot{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}\n"] }]
+        }], ctorParameters: () => [] });
+
 class SbdHotelContentComponent {
     constructor() {
         // Inputs
@@ -6182,6 +8072,8 @@ class SmartBookingDashboardComponent {
     constructor() {
         this.bookingService = inject(SbdBookingService);
         this.toast = inject(SbdToastService);
+        /** The Reissue button is shown for flights only, and only when the host enabled the feature. */
+        this.reissueEnabled = inject(SBD_CONFIG).reissueEnabled;
         this.product = signal('flight');
         this.bookingId = signal('');
         this.bookingStatus = signal('idle');
@@ -6190,6 +8082,7 @@ class SmartBookingDashboardComponent {
         this.hotelAutoCancelDialogOpen = signal(false);
         this.actionDialogOpen = signal(false);
         this.addNoteDialogOpen = signal(false);
+        this.reissueDialogOpen = signal(false);
         this.selectedActionKey = signal(null);
         this.activeContextTab = signal('changes');
         this.availableActions = computed(() => (this.product() === 'flight' ? FLIGHT_ACTIONS : HOTEL_ACTIONS).filter(a => !a.hidden));
@@ -6295,7 +8188,7 @@ class SmartBookingDashboardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SmartBookingDashboardComponent, isStandalone: true, selector: "app-smart-booking-dashboard", host: { listeners: { "document:keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__aside\">\n\n        <!-- Data search at the top of the sidebar -->\n        @if (bookingStatus() === 'success') {\n          <app-sbd-data-search [data]=\"bookingData()\" />\n          <app-sbd-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__error\">\n            <i class=\"pi pi-exclamation-circle\"></i>\n            <span>Booking not found. Double-check the ID and product type, then try again.</span>\n          </div>\n        }\n\n        <!-- Content once loaded -->\n        @if (bookingStatus() === 'success') {\n\n          <!-- Quick actions -->\n          <div class=\"sbd-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__context-pill--notes\">{{ bookingNotes().length }}</span>\n              </button>\n              @if (activeContextTab() === 'notes') {\n                <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-inbox\"></i> No notes yet\n                  </div>\n                }\n                @for (note of bookingNotes(); track $index) {\n                  <div class=\"sbd-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-check\"></i> No changes recorded\n                  </div>\n                }\n                @for (group of historyGroups(); track group.changedAt) {\n                  <div class=\"sbd-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__changes-table\">\n                      <thead>\n                        <tr>\n                          <th>Field</th>\n                          <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                          <th><i class=\"pi pi-check-circle\"></i> After</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (entry of group.entries; track entry.field) {\n                          <tr>\n                            <td class=\"sbd-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__changes-new\">{{ entry.to }}</td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n\n          </div>\n\n        }\n\n        <!-- Loading skeleton for main -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: SbdBookingInputComponent, selector: "app-sbd-booking-input", inputs: ["loading", "product", "bookingId"], outputs: ["productChange", "bookingIdChange", "lookup"] }, { kind: "component", type: SbdWorkflowActionsComponent, selector: "app-sbd-workflow-actions", inputs: ["bookingId"], outputs: ["cancelBooking"] }, { kind: "component", type: SbdActionGridComponent, selector: "app-sbd-action-grid", inputs: ["actions", "activeKey", "loadingKey"], outputs: ["actionSelected"] }, { kind: "component", type: SbdCancelDialogComponent, selector: "app-sbd-cancel-dialog", inputs: ["visible", "bookingId", "product", "pnrInfo", "bookingInfo"], outputs: ["closed", "confirmed"] }, { kind: "component", type: AlmatarHotelAutoCancellationComponent, selector: "almatar-hotel-auto-cancellation", inputs: ["selectedHotelBooking"], outputs: ["closed", "cancellationSuccess", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: SbdFlightItineraryCardComponent, selector: "app-sbd-flight-itinerary-card", inputs: ["data", "product", "verified"] }, { kind: "component", type: SbdDataSearchComponent, selector: "app-sbd-data-search", inputs: ["data"] }, { kind: "component", type: SbdActionDialogComponent, selector: "app-sbd-action-dialog", inputs: ["visible", "bookingId", "product", "actions", "initialKey", "preloadedData"], outputs: ["closed"] }, { kind: "component", type: SbdAddNoteDialogComponent, selector: "app-sbd-add-note-dialog", inputs: ["visible", "bookingId", "product"], outputs: ["closed"] }, { kind: "component", type: SbdHotelContentComponent, selector: "app-sbd-hotel-content", inputs: ["bookingData", "bookingStatus", "bookingId", "dataVerified", "bookingNotes", "bookingHistory", "historyGroups", "activeContextTab"], outputs: ["cancelBooking", "addNoteRequested", "contextTabChanged"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SmartBookingDashboardComponent, isStandalone: true, selector: "app-smart-booking-dashboard", host: { listeners: { "document:keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__aside\">\n\n        <!-- Data search at the top of the sidebar -->\n        @if (bookingStatus() === 'success') {\n          <app-sbd-data-search [data]=\"bookingData()\" />\n          <app-sbd-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__error\">\n            <i class=\"pi pi-exclamation-circle\"></i>\n            <span>Booking not found. Double-check the ID and product type, then try again.</span>\n          </div>\n        }\n\n        <!-- Content once loaded -->\n        @if (bookingStatus() === 'success') {\n\n          <!-- Quick actions -->\n          <div class=\"sbd-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              [showReissue]=\"reissueEnabled && product() === 'flight'\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n              (reissue)=\"reissueDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__context-pill--notes\">{{ bookingNotes().length }}</span>\n              </button>\n              @if (activeContextTab() === 'notes') {\n                <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-inbox\"></i> No notes yet\n                  </div>\n                }\n                @for (note of bookingNotes(); track $index) {\n                  <div class=\"sbd-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-check\"></i> No changes recorded\n                  </div>\n                }\n                @for (group of historyGroups(); track group.changedAt) {\n                  <div class=\"sbd-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__changes-table\">\n                      <thead>\n                        <tr>\n                          <th>Field</th>\n                          <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                          <th><i class=\"pi pi-check-circle\"></i> After</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (entry of group.entries; track entry.field) {\n                          <tr>\n                            <td class=\"sbd-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__changes-new\">{{ entry.to }}</td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n\n          </div>\n\n        }\n\n        <!-- Loading skeleton for main -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n\n<app-sbd-reissue-dialog\n  [visible]=\"reissueDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [bookingData]=\"bookingData()\"\n  (closed)=\"reissueDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: SbdBookingInputComponent, selector: "app-sbd-booking-input", inputs: ["loading", "product", "bookingId"], outputs: ["productChange", "bookingIdChange", "lookup"] }, { kind: "component", type: SbdWorkflowActionsComponent, selector: "app-sbd-workflow-actions", inputs: ["bookingId", "showReissue"], outputs: ["cancelBooking", "reissue"] }, { kind: "component", type: SbdActionGridComponent, selector: "app-sbd-action-grid", inputs: ["actions", "activeKey", "loadingKey"], outputs: ["actionSelected"] }, { kind: "component", type: SbdCancelDialogComponent, selector: "app-sbd-cancel-dialog", inputs: ["visible", "bookingId", "product", "pnrInfo", "bookingInfo"], outputs: ["closed", "confirmed"] }, { kind: "component", type: AlmatarHotelAutoCancellationComponent, selector: "almatar-hotel-auto-cancellation", inputs: ["selectedHotelBooking"], outputs: ["closed", "cancellationSuccess", "nonRefundableSubmitSuccess", "chatWithAgent"] }, { kind: "component", type: SbdFlightItineraryCardComponent, selector: "app-sbd-flight-itinerary-card", inputs: ["data", "product", "verified"] }, { kind: "component", type: SbdDataSearchComponent, selector: "app-sbd-data-search", inputs: ["data"] }, { kind: "component", type: SbdActionDialogComponent, selector: "app-sbd-action-dialog", inputs: ["visible", "bookingId", "product", "actions", "initialKey", "preloadedData"], outputs: ["closed"] }, { kind: "component", type: SbdAddNoteDialogComponent, selector: "app-sbd-add-note-dialog", inputs: ["visible", "bookingId", "product"], outputs: ["closed"] }, { kind: "component", type: SbdReissueDialogComponent, selector: "app-sbd-reissue-dialog", inputs: ["visible", "bookingId", "bookingData"], outputs: ["closed"] }, { kind: "component", type: SbdHotelContentComponent, selector: "app-sbd-hotel-content", inputs: ["bookingData", "bookingStatus", "bookingId", "dataVerified", "bookingNotes", "bookingHistory", "historyGroups", "activeContextTab"], outputs: ["cancelBooking", "addNoteRequested", "contextTabChanged"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmartBookingDashboardComponent, decorators: [{
             type: Component,
@@ -6310,11 +8203,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SbdDataSearchComponent,
                         SbdActionDialogComponent,
                         SbdAddNoteDialogComponent,
+                        SbdReissueDialogComponent,
                         SbdHotelContentComponent,
                         LowerCasePipe,
                         NgIf,
                         ButtonModule,
-                    ], template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__aside\">\n\n        <!-- Data search at the top of the sidebar -->\n        @if (bookingStatus() === 'success') {\n          <app-sbd-data-search [data]=\"bookingData()\" />\n          <app-sbd-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__error\">\n            <i class=\"pi pi-exclamation-circle\"></i>\n            <span>Booking not found. Double-check the ID and product type, then try again.</span>\n          </div>\n        }\n\n        <!-- Content once loaded -->\n        @if (bookingStatus() === 'success') {\n\n          <!-- Quick actions -->\n          <div class=\"sbd-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__context-pill--notes\">{{ bookingNotes().length }}</span>\n              </button>\n              @if (activeContextTab() === 'notes') {\n                <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-inbox\"></i> No notes yet\n                  </div>\n                }\n                @for (note of bookingNotes(); track $index) {\n                  <div class=\"sbd-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-check\"></i> No changes recorded\n                  </div>\n                }\n                @for (group of historyGroups(); track group.changedAt) {\n                  <div class=\"sbd-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__changes-table\">\n                      <thead>\n                        <tr>\n                          <th>Field</th>\n                          <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                          <th><i class=\"pi pi-check-circle\"></i> After</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (entry of group.entries; track entry.field) {\n                          <tr>\n                            <td class=\"sbd-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__changes-new\">{{ entry.to }}</td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n\n          </div>\n\n        }\n\n        <!-- Loading skeleton for main -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    ], template: "<div class=\"sbd-page\">\n\n  <!-- Search bar full-width at top -->\n  <div class=\"sbd-page__search\">\n    <app-sbd-booking-input\n      [(product)]=\"product\"\n      [(bookingId)]=\"bookingId\"\n      [loading]=\"bookingStatus() === 'loading'\"\n      (lookup)=\"lookupBooking()\"\n    />\n  </div>\n\n  <!-- Hotel: Use dedicated component -->\n  @if (product() === 'hotel') {\n    <app-sbd-hotel-content\n      [bookingData]=\"bookingData()\"\n      [bookingStatus]=\"bookingStatus()\"\n      [bookingId]=\"bookingId()\"\n      [dataVerified]=\"dataVerified()\"\n      [bookingNotes]=\"bookingNotes()\"\n      [bookingHistory]=\"bookingHistory()\"\n      [historyGroups]=\"historyGroups()\"\n      [activeContextTab]=\"activeContextTab()\"\n      (cancelBooking)=\"cancelDialogOpen.set(true)\"\n      (addNoteRequested)=\"addNoteDialogOpen.set(true)\"\n      (contextTabChanged)=\"activeContextTab.set($event)\"\n    />\n  }\n\n  <!-- Flight: Keep original 2-column layout -->\n  @if (product() === 'flight') {\n    <div class=\"sbd-page__content\">\n\n      <!-- Left: booking context -->\n      <aside class=\"sbd-page__aside\">\n\n        <!-- Data search at the top of the sidebar -->\n        @if (bookingStatus() === 'success') {\n          <app-sbd-data-search [data]=\"bookingData()\" />\n          <app-sbd-flight-itinerary-card [product]=\"product()\" [data]=\"bookingData()\" [verified]=\"dataVerified()\" />\n        }\n\n        <!-- Loading skeleton for aside -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:60%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:80%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:50%\"></div>\n          </div>\n        }\n\n      </aside>\n\n      <!-- Right: agent workspace -->\n      <main class=\"sbd-page__main\">\n\n        <!-- Error state -->\n        @if (bookingStatus() === 'error') {\n          <div class=\"sbd-page__error\">\n            <i class=\"pi pi-exclamation-circle\"></i>\n            <span>Booking not found. Double-check the ID and product type, then try again.</span>\n          </div>\n        }\n\n        <!-- Content once loaded -->\n        @if (bookingStatus() === 'success') {\n\n          <!-- Quick actions -->\n          <div class=\"sbd-page__quick-actions\">\n            <span class=\"sbd-page__quick-label\">Quick actions</span>\n            <app-sbd-workflow-actions\n              [bookingId]=\"bookingId()\"\n              [showReissue]=\"reissueEnabled && product() === 'flight'\"\n              (cancelBooking)=\"cancelDialogOpen.set(true)\"\n              (reissue)=\"reissueDialogOpen.set(true)\"\n            />\n          </div>\n\n          <!-- Action grid -->\n          <app-sbd-action-grid\n            [actions]=\"availableActions()\"\n            [activeKey]=\"selectedActionKey()\"\n            (actionSelected)=\"openAction($event)\"\n          />\n\n          <!-- Context: Notes + Changes tabbed -->\n          <div class=\"sbd-page__context\">\n\n            <!-- Tab bar -->\n            <div class=\"sbd-page__context-tabs\">\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'changes'\"\n                (click)=\"activeContextTab.set('changes')\">\n                <i class=\"pi pi-history\"></i>\n                Changes\n                @if (bookingHistory().length > 0) {\n                  <span class=\"sbd-page__context-pill sbd-page__context-pill--changes\">{{ bookingHistory().length }}</span>\n                }\n              </button>\n              <button class=\"sbd-page__context-tab\"\n                [class.sbd-page__context-tab--active]=\"activeContextTab() === 'notes'\"\n                (click)=\"activeContextTab.set('notes')\">\n                <i class=\"pi pi-comments\"></i>\n                Notes\n                <span class=\"sbd-page__context-pill sbd-page__context-pill--notes\">{{ bookingNotes().length }}</span>\n              </button>\n              @if (activeContextTab() === 'notes') {\n                <button pButton label=\"Add Note\" icon=\"pi pi-plus\" class=\"p-button-sm p-button-outlined sbd-page__context-add\"\n                  (click)=\"addNoteDialogOpen.set(true)\">\n                </button>\n              }\n            </div>\n\n            <!-- Notes tab -->\n            @if (activeContextTab() === 'notes') {\n              <div class=\"sbd-page__notes-list\">\n                @if (bookingNotes().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-inbox\"></i> No notes yet\n                  </div>\n                }\n                @for (note of bookingNotes(); track $index) {\n                  <div class=\"sbd-page__note\">\n                    <div class=\"sbd-page__note-top\">\n                      <span class=\"sbd-page__note-badge sbd-page__note-badge--{{ note.action | lowercase }}\">\n                        {{ note.action }}\n                      </span>\n                      <span class=\"sbd-page__note-author\">\n                        {{ note.writtenBy?.firstName }} {{ note.writtenBy?.lastName }}\n                      </span>\n                      <span class=\"sbd-page__note-date\">{{ fmtNoteDate(note.date) }}</span>\n                    </div>\n                    <p class=\"sbd-page__note-msg\">{{ note.message }}</p>\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Changes tab -->\n            @if (activeContextTab() === 'changes') {\n              <div class=\"sbd-page__changes-groups\">\n                @if (historyGroups().length === 0) {\n                  <div class=\"sbd-page__context-empty\">\n                    <i class=\"pi pi-check\"></i> No changes recorded\n                  </div>\n                }\n                @for (group of historyGroups(); track group.changedAt) {\n                  <div class=\"sbd-page__changes-group\">\n                    <div class=\"sbd-page__changes-meta\">\n                      <i class=\"pi pi-user\"></i>\n                      <strong>{{ group.changedBy }}</strong>\n                      <span class=\"sbd-page__changes-sep\">\u00B7</span>\n                      <span>{{ fmtDate(group.changedAt) }}</span>\n                    </div>\n                    <table class=\"sbd-page__changes-table\">\n                      <thead>\n                        <tr>\n                          <th>Field</th>\n                          <th><i class=\"pi pi-times-circle\"></i> Before</th>\n                          <th><i class=\"pi pi-check-circle\"></i> After</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (entry of group.entries; track entry.field) {\n                          <tr>\n                            <td class=\"sbd-page__changes-field\">{{ formatField(entry.field) }}</td>\n                            <td class=\"sbd-page__changes-old\">{{ entry.from }}</td>\n                            <td class=\"sbd-page__changes-new\">{{ entry.to }}</td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n\n          </div>\n\n        }\n\n        <!-- Loading skeleton for main -->\n        @if (bookingStatus() === 'loading') {\n          <div class=\"sbd-page__skeleton-card\">\n            <div class=\"sbd-page__skeleton-row\" style=\"width:40%\"></div>\n            <div class=\"sbd-page__skeleton-row\" style=\"width:25%\"></div>\n          </div>\n        }\n\n      </main>\n\n    </div>\n  }\n\n</div>\n\n<app-sbd-cancel-dialog\n  [visible]=\"cancelDialogOpen() && product() === 'flight'\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [pnrInfo]=\"cancelPnrInfo()\"\n  [bookingInfo]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (confirmed)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<almatar-hotel-auto-cancellation\n  *ngIf=\"cancelDialogOpen() && product() === 'hotel'\"\n  [selectedHotelBooking]=\"bookingData()\"\n  (closed)=\"cancelDialogOpen.set(false)\"\n  (cancellationSuccess)=\"bookingStatus.set('idle'); bookingData.set(null)\"\n/>\n\n<app-sbd-action-dialog\n  [visible]=\"actionDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  [actions]=\"availableActions()\"\n  [initialKey]=\"selectedActionKey()\"\n  [preloadedData]=\"bookingData()\"\n  (closed)=\"actionDialogOpen.set(false)\"\n/>\n\n<app-sbd-add-note-dialog\n  [visible]=\"addNoteDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [product]=\"product()\"\n  (closed)=\"addNoteDialogOpen.set(false)\"\n/>\n\n<app-sbd-reissue-dialog\n  [visible]=\"reissueDialogOpen()\"\n  [bookingId]=\"bookingId()\"\n  [bookingData]=\"bookingData()\"\n  (closed)=\"reissueDialogOpen.set(false)\"\n/>\n", styles: [".sbd-page{display:flex;flex-direction:column;gap:20px;padding:24px;max-width:1400px;min-height:100%}.sbd-page__search{width:100%}.sbd-page__error{display:flex;align-items:center;gap:10px;padding:16px 20px;background:#fef2f2;border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#ef4444;font-size:13.5px;font-weight:500}.sbd-page__error i{font-size:18px}.sbd-page__content{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}@media (max-width: 960px){.sbd-page__content{grid-template-columns:1fr}}.sbd-page__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}.sbd-page__main{display:flex;flex-direction:column;gap:16px}.sbd-page__quick-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;flex-wrap:wrap}.sbd-page__quick-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.sbd-page__context{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.sbd-page__context-tabs{display:flex;align-items:center;border-bottom:1px solid #e2e8f0;background:#f8fafc}.sbd-page__context-add{margin-left:auto;margin-right:10px}.sbd-page__context-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;font-size:13px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.sbd-page__context-tab .pi{font-size:13px}.sbd-page__context-tab:hover{color:#334155}.sbd-page__context-tab--active{color:#1e2e4a;border-bottom-color:var(--sbd-primary, #3b82f6);background:#fff}.sbd-page__context-pill{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}.sbd-page__context-pill--notes{background:#e0e7ff;color:#4338ca}.sbd-page__context-pill--changes{background:#fef3c7;color:#b45309}.sbd-page__context-empty{display:flex;align-items:center;gap:8px;padding:24px 20px;font-size:13px;color:#94a3b8}.sbd-page__context-empty .pi{font-size:16px}.sbd-page__notes-list{display:flex;flex-direction:column}.sbd-page__note{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:6px}.sbd-page__note:last-child{border-bottom:none}.sbd-page__note-top{display:flex;align-items:center;gap:8px}.sbd-page__note-badge{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0}.sbd-page__note-badge--general{background:#dbeafe;color:#1d4ed8}.sbd-page__note-badge--remark{background:#fef3c7;color:#b45309}.sbd-page__note-badge--feedback{background:#f3e8ff;color:#7e22ce}.sbd-page__note-author{font-size:12px;font-weight:700;color:#1e2e4a}.sbd-page__note-date{margin-left:auto;font-size:11px;color:#94a3b8;white-space:nowrap}.sbd-page__note-msg{margin:0;font-size:13px;color:#334155;line-height:1.55}.sbd-page__changes-groups{display:flex;flex-direction:column}.sbd-page__changes-group{border-bottom:1px solid #f1f5f9}.sbd-page__changes-group:last-child{border-bottom:none}.sbd-page__changes-meta{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fafafa;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#64748b}.sbd-page__changes-meta strong{font-weight:700;color:#334155}.sbd-page__changes-meta .pi{font-size:11px;color:#94a3b8}.sbd-page__changes-sep{color:#cbd5e1}.sbd-page__changes-table{width:100%;border-collapse:collapse;font-size:12.5px}.sbd-page__changes-table thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}.sbd-page__changes-table thead th{padding:7px 14px;text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}.sbd-page__changes-table thead th .pi{margin-right:4px;font-size:10px}.sbd-page__changes-table thead th:nth-child(2){color:#dc2626}.sbd-page__changes-table thead th:nth-child(3){color:#16a34a}.sbd-page__changes-table tbody tr{border-bottom:1px solid #f1f5f9}.sbd-page__changes-table tbody tr:last-child{border-bottom:none}.sbd-page__changes-table tbody tr:hover{background:#f8fafc}.sbd-page__changes-table tbody td{padding:8px 14px;vertical-align:top;word-break:break-word}.sbd-page__changes-field{font-size:12px;font-weight:600;color:#475569;width:28%}.sbd-page__changes-old{color:#dc2626;font-weight:500;text-decoration:line-through;opacity:.8;width:36%}.sbd-page__changes-new{color:#16a34a;font-weight:700;width:36%}.sbd-page__content--loading{opacity:.6;pointer-events:none}.sbd-page__skeleton-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.sbd-page__skeleton-row{height:13px;background:#f1f5f9;border-radius:6px;animation:sbd-shimmer 1.4s ease-in-out infinite}.sbd-page__skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.sbd-page__skeleton-chip{height:56px;background:#f1f5f9;border-radius:8px;animation:sbd-shimmer 1.4s ease-in-out infinite}@keyframes sbd-shimmer{0%,to{opacity:1}50%{opacity:.45}}@keyframes sbd-fadein{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { onKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -6353,5 +8247,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SBD_CONFIG, SBD_DEFAULT_CONFIG, SmartBookingDashboardComponent, SmartBookingDashboardModule, provideSmartBookingDashboard, smartBookingDashboardRoutes };
+export { SBD_CONFIG, SBD_DEFAULT_CONFIG, SBD_TOAST_HANDLER, SmartBookingDashboardComponent, SmartBookingDashboardModule, appendAuthParams, buildReissueBookingContext, buildReissueSearchParams, buildReissueSearchUrl, provideSmartBookingDashboard, smartBookingDashboardRoutes };
 //# sourceMappingURL=almatar-smart-booking-dashboard.mjs.map