@eric-emg/symphiq-components 1.2.118 → 1.2.120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/symphiq-components.mjs +841 -678
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +56 -43
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
package/fesm2022/symphiq-components.mjs CHANGED
@@ -51349,6 +51349,8 @@ class SectionNavigationComponent {
51349
51349
  this.sections = [];
51350
51350
  this.viewMode = ViewModeEnum.LIGHT;
51351
51351
  this.embedded = false;
51352
+ this.parentHeaderOffset = 0;
51353
+ this.HEADER_OFFSET = 80;
51352
51354
  this.activeSection = signal(0, ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
51353
51355
  }
51354
51356
  ngOnInit() {
@@ -51399,14 +51401,33 @@ class SectionNavigationComponent {
51399
51401
  scrollToSection(sectionId) {
51400
51402
  const element = document.getElementById(`section-${sectionId}`);
51401
51403
  if (element) {
51402
- element.scrollIntoView({ behavior: 'smooth', block: 'start' });
51404
+ this.scrollToElement(element);
51405
+ }
51406
+ }
51407
+ getScrollOffset() {
51408
+ return this.HEADER_OFFSET + this.parentHeaderOffset;
51409
+ }
51410
+ scrollToElement(element) {
51411
+ const offset = this.getScrollOffset();
51412
+ if (this.embedded && this.scrollElement) {
51413
+ const scrollContainer = this.scrollElement;
51414
+ const containerRect = scrollContainer.getBoundingClientRect();
51415
+ const elementRect = element.getBoundingClientRect();
51416
+ const relativeTop = elementRect.top - containerRect.top;
51417
+ const targetScrollTop = scrollContainer.scrollTop + relativeTop - offset;
51418
+ scrollContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
51419
+ }
51420
+ else {
51421
+ const elementRect = element.getBoundingClientRect();
51422
+ const targetScrollTop = window.scrollY + elementRect.top - offset;
51423
+ window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
51403
51424
  }
51404
51425
  }
51405
51426
  trackBySectionId(index, section) {
51406
51427
  return section.id || index;
51407
51428
  }
51408
51429
  static { this.ɵfac = function SectionNavigationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SectionNavigationComponent)(); }; }
51409
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionNavigationComponent, selectors: [["symphiq-section-navigation"]], inputs: { sections: "sections", viewMode: "viewMode", embedded: "embedded" }, decls: 3, vars: 3, consts: [[3, "ngClass"], [1, "flex", "flex-col", "gap-4"], ["type", "button", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipPosition"]], template: function SectionNavigationComponent_Template(rf, ctx) { if (rf & 1) {
51430
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionNavigationComponent, selectors: [["symphiq-section-navigation"]], inputs: { sections: "sections", viewMode: "viewMode", embedded: "embedded", scrollElement: "scrollElement", parentHeaderOffset: "parentHeaderOffset" }, decls: 3, vars: 3, consts: [[3, "ngClass"], [1, "flex", "flex-col", "gap-4"], ["type", "button", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipPosition"]], template: function SectionNavigationComponent_Template(rf, ctx) { if (rf & 1) {
51410
51431
  i0.ɵɵelementStart(0, "nav", 0)(1, "div", 1);
51411
51432
  i0.ɵɵtemplate(2, SectionNavigationComponent_button_2_Template, 2, 5, "button", 2);
51412
51433
  i0.ɵɵelementEnd()();
@@ -51423,22 +51444,22 @@ class SectionNavigationComponent {
51423
51444
  standalone: true,
51424
51445
  imports: [CommonModule, TooltipDirective],
51425
51446
  changeDetection: ChangeDetectionStrategy.OnPush,
51426
- template: `
51427
- <nav [ngClass]="getNavClasses()">
51428
- <div class="flex flex-col gap-4">
51429
- <button
51430
- *ngFor="let section of sections; let i = index; trackBy: trackBySectionId"
51431
- type="button"
51432
- [ngClass]="getDotClasses(i)"
51433
- (click)="scrollToSection(section.id!)"
51434
- [attr.aria-label]="'Navigate to ' + section.title"
51435
- [libSymphiqTooltip]="section.title"
51436
- [tooltipPosition]="'left'"
51437
- >
51438
- <div [ngClass]="getDotInnerClasses(i)"></div>
51439
- </button>
51440
- </div>
51441
- </nav>
51447
+ template: `
51448
+ <nav [ngClass]="getNavClasses()">
51449
+ <div class="flex flex-col gap-4">
51450
+ <button
51451
+ *ngFor="let section of sections; let i = index; trackBy: trackBySectionId"
51452
+ type="button"
51453
+ [ngClass]="getDotClasses(i)"
51454
+ (click)="scrollToSection(section.id!)"
51455
+ [attr.aria-label]="'Navigate to ' + section.title"
51456
+ [libSymphiqTooltip]="section.title"
51457
+ [tooltipPosition]="'left'"
51458
+ >
51459
+ <div [ngClass]="getDotInnerClasses(i)"></div>
51460
+ </button>
51461
+ </div>
51462
+ </nav>
51442
51463
  `
51443
51464
  }]
51444
51465
  }], null, { sections: [{
@@ -51447,6 +51468,10 @@ class SectionNavigationComponent {
51447
51468
  type: Input
51448
51469
  }], embedded: [{
51449
51470
  type: Input
51471
+ }], scrollElement: [{
51472
+ type: Input
51473
+ }], parentHeaderOffset: [{
51474
+ type: Input
51450
51475
  }] }); })();
51451
51476
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionNavigationComponent, { className: "SectionNavigationComponent", filePath: "lib/components/business-analysis-dashboard/section-navigation.component.ts", lineNumber: 29 }); })();
51452
51477
 
@@ -53617,13 +53642,13 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template(rf, c
53617
53642
  i0.ɵɵelement(0, "symphiq-section-navigation", 20);
53618
53643
  } if (rf & 2) {
53619
53644
  const ctx_r0 = i0.ɵɵnextContext();
53620
- i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded());
53645
+ i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded())("scrollElement", ctx_r0.scrollElement() ?? undefined);
53621
53646
  } }
53622
53647
  function SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
53623
53648
  i0.ɵɵelement(0, "symphiq-floating-toc", 20);
53624
53649
  } if (rf & 2) {
53625
53650
  const ctx_r0 = i0.ɵɵnextContext();
53626
- i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded());
53651
+ i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded())("scrollElement", ctx_r0.scrollElement() ?? undefined);
53627
53652
  } }
53628
53653
  function SymphiqBusinessAnalysisDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
53629
53654
  i0.ɵɵelementStart(0, "div", 0);
@@ -54113,7 +54138,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
54113
54138
  static { this.ɵfac = function SymphiqBusinessAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqBusinessAnalysisDashboardComponent)(); }; }
54114
54139
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqBusinessAnalysisDashboardComponent, selectors: [["symphiq-business-analysis-dashboard"]], hostBindings: function SymphiqBusinessAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
54115
54140
  i0.ɵɵlistener("scroll", function SymphiqBusinessAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow)("keydown", function SymphiqBusinessAnalysisDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, i0.ɵɵresolveDocument);
54116
- } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"] }, decls: 51, vars: 67, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-2"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], [1, "relative"], [3, "sections", "viewMode", "embedded"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
54141
+ } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"] }, decls: 51, vars: 67, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-2"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], [1, "relative"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
54117
54142
  i0.ɵɵelementStart(0, "div", 0)(1, "div");
54118
54143
  i0.ɵɵelement(2, "div", 1);
54119
54144
  i0.ɵɵelementEnd();
@@ -54157,8 +54182,8 @@ class SymphiqBusinessAnalysisDashboardComponent {
54157
54182
  i0.ɵɵelementStart(40, "main", 19);
54158
54183
  i0.ɵɵconditionalCreate(41, SymphiqBusinessAnalysisDashboardComponent_Conditional_41_Template, 8, 8)(42, SymphiqBusinessAnalysisDashboardComponent_Conditional_42_Template, 2, 0);
54159
54184
  i0.ɵɵelementEnd();
54160
- i0.ɵɵconditionalCreate(43, SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template, 1, 3, "symphiq-section-navigation", 20);
54161
- i0.ɵɵconditionalCreate(44, SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template, 1, 3, "symphiq-floating-toc", 20);
54185
+ i0.ɵɵconditionalCreate(43, SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template, 1, 4, "symphiq-section-navigation", 20);
54186
+ i0.ɵɵconditionalCreate(44, SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template, 1, 4, "symphiq-floating-toc", 20);
54162
54187
  i0.ɵɵelement(45, "symphiq-floating-back-button", 21);
54163
54188
  i0.ɵɵelementEnd();
54164
54189
  i0.ɵɵconditionalCreate(46, SymphiqBusinessAnalysisDashboardComponent_Conditional_46_Template, 2, 2, "div", 0);
@@ -54417,6 +54442,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
54417
54442
  [sections]="sections()"
54418
54443
  [viewMode]="viewMode()"
54419
54444
  [embedded]="embedded()"
54445
+ [scrollElement]="scrollElement() ?? undefined"
54420
54446
  />
54421
54447
  }
54422
54448
 
@@ -54425,6 +54451,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
54425
54451
  [sections]="sections()"
54426
54452
  [viewMode]="viewMode()"
54427
54453
  [embedded]="embedded()"
54454
+ [scrollElement]="scrollElement() ?? undefined"
54428
54455
  />
54429
54456
  }
54430
54457
 
@@ -54475,13 +54502,32 @@ class SymphiqBusinessAnalysisDashboardComponent {
54475
54502
  type: HostListener,
54476
54503
  args: ['document:keydown', ['$event']]
54477
54504
  }] }); })();
54478
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 301 }); })();
54505
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 303 }); })();
54479
54506
 
54480
- function DashboardHeaderComponent_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
54481
- i0.ɵɵelementStart(0, "span", 4);
54507
+ function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
54508
+ i0.ɵɵelement(0, "div", 6);
54509
+ } }
54510
+ function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
54511
+ i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
54512
+ i0.ɵɵtext(2, "Generated At");
54513
+ i0.ɵɵelementEnd();
54514
+ i0.ɵɵelementStart(3, "div", 16);
54515
+ i0.ɵɵtext(4);
54516
+ i0.ɵɵelementEnd()();
54517
+ } if (rf & 2) {
54518
+ const ctx_r0 = i0.ɵɵnextContext();
54519
+ i0.ɵɵadvance();
54520
+ i0.ɵɵclassMap(ctx_r0.metaLabelClass());
54521
+ i0.ɵɵadvance(2);
54522
+ i0.ɵɵclassMap(ctx_r0.headerTitleClass());
54523
+ i0.ɵɵadvance();
54524
+ i0.ɵɵtextInterpolate(ctx_r0.formattedGeneratedDate());
54525
+ } }
54526
+ function DashboardHeaderComponent_Conditional_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
54527
+ i0.ɵɵelementStart(0, "span", 5);
54482
54528
  i0.ɵɵtext(1, "\u203A");
54483
54529
  i0.ɵɵelementEnd();
54484
- i0.ɵɵelementStart(2, "span", 4);
54530
+ i0.ɵɵelementStart(2, "span", 5);
54485
54531
  i0.ɵɵtext(3);
54486
54532
  i0.ɵɵelementEnd();
54487
54533
  } if (rf & 2) {
@@ -54492,11 +54538,11 @@ function DashboardHeaderComponent_Conditional_24_Conditional_3_Template(rf, ctx)
54492
54538
  i0.ɵɵadvance();
54493
54539
  i0.ɵɵtextInterpolate1(" ", ctx_r0.currentSubsection, " ");
54494
54540
  } }
54495
- function DashboardHeaderComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
54496
- i0.ɵɵelementStart(0, "div", 14)(1, "span", 4);
54541
+ function DashboardHeaderComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
54542
+ i0.ɵɵelementStart(0, "div", 20)(1, "span", 5);
54497
54543
  i0.ɵɵtext(2);
54498
54544
  i0.ɵɵelementEnd();
54499
- i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_24_Conditional_3_Template, 4, 3);
54545
+ i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_33_Conditional_3_Template, 4, 3);
54500
54546
  i0.ɵɵelementEnd();
54501
54547
  } if (rf & 2) {
54502
54548
  const ctx_r0 = i0.ɵɵnextContext();
@@ -54509,6 +54555,8 @@ function DashboardHeaderComponent_Conditional_24_Template(rf, ctx) { if (rf & 1)
54509
54555
  } }
54510
54556
  class DashboardHeaderComponent {
54511
54557
  constructor() {
54558
+ this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
54559
+ this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
54512
54560
  this.title = '';
54513
54561
  this.subtitle = '';
54514
54562
  this.viewMode = ViewModeEnum.LIGHT;
@@ -54517,6 +54565,17 @@ class DashboardHeaderComponent {
54517
54565
  this.viewModeClick = new EventEmitter();
54518
54566
  this.headerScrollService = inject(HeaderScrollService);
54519
54567
  this.isLightMode = computed(() => this.viewMode === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
54568
+ this.dateFormatCache = new StringMemoizeCache();
54569
+ this.formattedGeneratedDate = computed(() => {
54570
+ let formatted = '';
54571
+ const createdDate = this.createdDate();
54572
+ if (createdDate) {
54573
+ formatted = this.formatDate(createdDate.toISOString());
54574
+ }
54575
+ return formatted;
54576
+ }, ...(ngDevMode ? [{ debugName: "formattedGeneratedDate" }] : []));
54577
+ this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
54578
+ this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
54520
54579
  }
54521
54580
  onSearchClick() {
54522
54581
  this.searchClick.emit();
@@ -54524,6 +54583,14 @@ class DashboardHeaderComponent {
54524
54583
  onViewModeClick() {
54525
54584
  this.viewModeClick.emit();
54526
54585
  }
54586
+ formatDate(dateString) {
54587
+ // Cache date formatting operations
54588
+ return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
54589
+ year: 'numeric',
54590
+ month: 'long',
54591
+ day: 'numeric',
54592
+ }));
54593
+ }
54527
54594
  getHeaderClasses() {
54528
54595
  return this.isLightMode()
54529
54596
  ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
@@ -54550,51 +54617,64 @@ class DashboardHeaderComponent {
54550
54617
  : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
54551
54618
  }
54552
54619
  static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
54553
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { title: "title", subtitle: "subtitle", viewMode: "viewMode", viewModeLabel: "viewModeLabel", currentSection: "currentSection", currentSubsection: "currentSubsection" }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 30, vars: 38, consts: [[1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [3, "ngClass"], [1, "flex", "items-center", "gap-2"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
54554
- i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "h1", 4);
54555
- i0.ɵɵtext(6);
54620
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: "title", subtitle: "subtitle", viewMode: "viewMode", viewModeLabel: "viewModeLabel", currentSection: "currentSection", currentSubsection: "currentSubsection", isLoading: "isLoading" }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 39, vars: 46, consts: [[1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
54621
+ i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
54622
+ i0.ɵɵtext(7);
54556
54623
  i0.ɵɵelementEnd();
54557
- i0.ɵɵelementStart(7, "p", 4);
54558
- i0.ɵɵtext(8);
54624
+ i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 6);
54625
+ i0.ɵɵelementEnd();
54626
+ i0.ɵɵelementStart(9, "p", 5);
54627
+ i0.ɵɵtext(10);
54559
54628
  i0.ɵɵelementEnd()();
54560
- i0.ɵɵelementStart(9, "div", 5)(10, "symphiq-search-button", 6);
54561
- i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_10_listener() { return ctx.onSearchClick(); });
54629
+ i0.ɵɵelementStart(11, "div", 7)(12, "symphiq-search-button", 8);
54630
+ i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_12_listener() { return ctx.onSearchClick(); });
54562
54631
  i0.ɵɵelementEnd();
54563
- i0.ɵɵelementStart(11, "button", 7);
54564
- i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_11_listener() { return ctx.onViewModeClick(); });
54632
+ i0.ɵɵelementStart(13, "button", 9);
54633
+ i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_13_listener() { return ctx.onViewModeClick(); });
54565
54634
  i0.ɵɵnamespaceSVG();
54566
- i0.ɵɵelementStart(12, "svg", 8);
54567
- i0.ɵɵelement(13, "path", 9)(14, "path", 10);
54635
+ i0.ɵɵelementStart(14, "svg", 10);
54636
+ i0.ɵɵelement(15, "path", 11)(16, "path", 12);
54568
54637
  i0.ɵɵelementEnd();
54569
54638
  i0.ɵɵnamespaceHTML();
54570
- i0.ɵɵelementStart(15, "span");
54571
- i0.ɵɵtext(16);
54639
+ i0.ɵɵelementStart(17, "span");
54640
+ i0.ɵɵtext(18);
54641
+ i0.ɵɵelementEnd()()();
54642
+ i0.ɵɵelementStart(19, "div", 13);
54643
+ i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 5, 5, "div", 14);
54644
+ i0.ɵɵelementStart(21, "div", 14)(22, "div", 15);
54645
+ i0.ɵɵtext(23, "Requested by");
54646
+ i0.ɵɵelementEnd();
54647
+ i0.ɵɵelementStart(24, "div", 16);
54648
+ i0.ɵɵtext(25);
54572
54649
  i0.ɵɵelementEnd()()()()()();
54573
- i0.ɵɵelementStart(17, "div", 1)(18, "div", 11)(19, "div", 3)(20, "div", 12)(21, "h1", 4);
54574
- i0.ɵɵtext(22);
54650
+ i0.ɵɵelementStart(26, "div", 1)(27, "div", 17)(28, "div", 3)(29, "div", 18)(30, "h1", 5);
54651
+ i0.ɵɵtext(31);
54575
54652
  i0.ɵɵelementEnd()();
54576
- i0.ɵɵelementStart(23, "div", 13);
54577
- i0.ɵɵconditionalCreate(24, DashboardHeaderComponent_Conditional_24_Template, 4, 3, "div", 14);
54578
- i0.ɵɵelementStart(25, "symphiq-search-button", 15);
54579
- i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_25_listener() { return ctx.onSearchClick(); });
54653
+ i0.ɵɵelementStart(32, "div", 19);
54654
+ i0.ɵɵconditionalCreate(33, DashboardHeaderComponent_Conditional_33_Template, 4, 3, "div", 20);
54655
+ i0.ɵɵelementStart(34, "symphiq-search-button", 21);
54656
+ i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_34_listener() { return ctx.onSearchClick(); });
54580
54657
  i0.ɵɵelementEnd();
54581
- i0.ɵɵelementStart(26, "button", 16);
54582
- i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_26_listener() { return ctx.onViewModeClick(); });
54658
+ i0.ɵɵelementStart(35, "button", 22);
54659
+ i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_35_listener() { return ctx.onViewModeClick(); });
54583
54660
  i0.ɵɵnamespaceSVG();
54584
- i0.ɵɵelementStart(27, "svg", 8);
54585
- i0.ɵɵelement(28, "path", 9)(29, "path", 10);
54661
+ i0.ɵɵelementStart(36, "svg", 10);
54662
+ i0.ɵɵelement(37, "path", 11)(38, "path", 12);
54586
54663
  i0.ɵɵelementEnd()()()()()()();
54587
54664
  } if (rf & 2) {
54665
+ let tmp_18_0;
54588
54666
  i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
54589
54667
  i0.ɵɵadvance();
54590
54668
  i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
54591
54669
  i0.ɵɵadvance();
54592
54670
  i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
54593
- i0.ɵɵadvance(3);
54671
+ i0.ɵɵadvance(4);
54594
54672
  i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
54595
54673
  i0.ɵɵadvance();
54596
54674
  i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
54597
54675
  i0.ɵɵadvance();
54676
+ i0.ɵɵconditional(ctx.isLoading ? 8 : -1);
54677
+ i0.ɵɵadvance();
54598
54678
  i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
54599
54679
  i0.ɵɵadvance();
54600
54680
  i0.ɵɵtextInterpolate1(" ", ctx.subtitle, " ");
@@ -54604,6 +54684,14 @@ class DashboardHeaderComponent {
54604
54684
  i0.ɵɵproperty("ngClass", ctx.getViewModeButtonClasses());
54605
54685
  i0.ɵɵadvance(5);
54606
54686
  i0.ɵɵtextInterpolate(ctx.viewModeLabel);
54687
+ i0.ɵɵadvance(2);
54688
+ i0.ɵɵconditional(ctx.formattedGeneratedDate() ? 20 : -1);
54689
+ i0.ɵɵadvance(2);
54690
+ i0.ɵɵclassMap(ctx.metaLabelClass());
54691
+ i0.ɵɵadvance(2);
54692
+ i0.ɵɵclassMap(ctx.headerTitleClass());
54693
+ i0.ɵɵadvance();
54694
+ i0.ɵɵtextInterpolate2("", (tmp_18_0 = ctx.requestedByUser()) == null ? null : tmp_18_0.firstName, " ", (tmp_18_0 = ctx.requestedByUser()) == null ? null : tmp_18_0.lastName);
54607
54695
  i0.ɵɵadvance();
54608
54696
  i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
54609
54697
  i0.ɵɵadvance();
@@ -54613,7 +54701,7 @@ class DashboardHeaderComponent {
54613
54701
  i0.ɵɵadvance();
54614
54702
  i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
54615
54703
  i0.ɵɵadvance(2);
54616
- i0.ɵɵconditional(ctx.currentSection ? 24 : -1);
54704
+ i0.ɵɵconditional(ctx.currentSection ? 33 : -1);
54617
54705
  i0.ɵɵadvance();
54618
54706
  i0.ɵɵproperty("isLightMode", ctx.isLightMode())("minimized", true);
54619
54707
  i0.ɵɵadvance();
@@ -54627,103 +54715,120 @@ class DashboardHeaderComponent {
54627
54715
  standalone: true,
54628
54716
  imports: [CommonModule, SearchButtonComponent],
54629
54717
  changeDetection: ChangeDetectionStrategy.OnPush,
54630
- template: `
54631
- <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
54632
- <!-- Expanded Header (default state) -->
54633
- <div
54634
- class="transition-all duration-300 ease-in-out overflow-hidden"
54635
- [class.max-h-0]="headerScrollService.isScrolled()"
54636
- [class.opacity-0]="headerScrollService.isScrolled()"
54637
- [class.max-h-96]="!headerScrollService.isScrolled()"
54638
- [class.opacity-100]="!headerScrollService.isScrolled()">
54639
- <div
54640
- class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
54641
- [class.pointer-events-none]="headerScrollService.isScrolled()"
54642
- [class.pointer-events-auto]="!headerScrollService.isScrolled()">
54643
- <div class="flex items-center justify-between">
54644
- <div>
54645
- <h1 [ngClass]="getMainTitleClasses()">
54646
- {{ title }}
54647
- </h1>
54648
- <p [ngClass]="getSubtitleClasses()">
54649
- {{ subtitle }}
54650
- </p>
54651
- </div>
54652
- <div class="flex items-center gap-2">
54653
- <symphiq-search-button
54654
- [isLightMode]="isLightMode()"
54655
- (searchClick)="onSearchClick()"
54656
- />
54657
- <button
54658
- type="button"
54659
- (click)="onViewModeClick()"
54660
- [ngClass]="getViewModeButtonClasses()"
54661
- class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
54662
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54663
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
54664
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
54665
- </svg>
54666
- <span>{{ viewModeLabel }}</span>
54667
- </button>
54668
- </div>
54669
- </div>
54670
- </div>
54671
- </div>
54672
-
54673
- <!-- Condensed Header (scrolled state) -->
54674
- <div
54675
- class="transition-all duration-300 ease-in-out overflow-hidden"
54676
- [class.max-h-0]="!headerScrollService.isScrolled()"
54677
- [class.opacity-0]="!headerScrollService.isScrolled()"
54678
- [class.max-h-20]="headerScrollService.isScrolled()"
54679
- [class.opacity-100]="headerScrollService.isScrolled()">
54680
- <div
54681
- class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
54682
- [class.pointer-events-none]="!headerScrollService.isScrolled()"
54683
- [class.pointer-events-auto]="headerScrollService.isScrolled()">
54684
- <div class="flex items-center justify-between">
54685
- <div class="flex-1 min-w-0 mr-4">
54686
- <h1 [ngClass]="getCondensedTitleClasses()">
54687
- {{ title }}
54688
- </h1>
54689
- </div>
54690
- <div class="flex items-center gap-4">
54691
- @if (currentSection) {
54692
- <div class="flex items-center gap-2 text-sm flex-shrink-0">
54693
- <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'">
54694
- {{ currentSection }}
54695
- </span>
54696
- @if (currentSubsection) {
54697
- <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'">›</span>
54698
- <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'">
54699
- {{ currentSubsection }}
54700
- </span>
54701
- }
54702
- </div>
54703
- }
54704
- <symphiq-search-button
54705
- [isLightMode]="isLightMode()"
54706
- [minimized]="true"
54707
- (searchClick)="onSearchClick()"
54708
- />
54709
- <button
54710
- type="button"
54711
- (click)="onViewModeClick()"
54712
- [ngClass]="getViewModeButtonClasses()"
54713
- class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
54714
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54715
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
54716
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
54717
- </svg>
54718
- </button>
54719
- </div>
54720
- </div>
54721
- </div>
54722
- </div>
54723
- </header>
54718
+ template: `
54719
+ <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
54720
+ <!-- Expanded Header (default state) -->
54721
+ <div
54722
+ class="transition-all duration-300 ease-in-out overflow-hidden"
54723
+ [class.max-h-0]="headerScrollService.isScrolled()"
54724
+ [class.opacity-0]="headerScrollService.isScrolled()"
54725
+ [class.max-h-96]="!headerScrollService.isScrolled()"
54726
+ [class.opacity-100]="!headerScrollService.isScrolled()">
54727
+ <div
54728
+ class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
54729
+ [class.pointer-events-none]="headerScrollService.isScrolled()"
54730
+ [class.pointer-events-auto]="!headerScrollService.isScrolled()">
54731
+ <div class="flex items-center justify-between">
54732
+ <div>
54733
+ <div class="flex items-center gap-3">
54734
+ <h1 [ngClass]="getMainTitleClasses()">
54735
+ {{ title }}
54736
+ </h1>
54737
+ @if (isLoading) {
54738
+ <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full" title="Refreshing data..."></div>
54739
+ }
54740
+ </div>
54741
+ <p [ngClass]="getSubtitleClasses()">
54742
+ {{ subtitle }}
54743
+ </p>
54744
+ </div>
54745
+ <div class="flex items-center gap-2">
54746
+ <symphiq-search-button
54747
+ [isLightMode]="isLightMode()"
54748
+ (searchClick)="onSearchClick()"
54749
+ />
54750
+ <button
54751
+ type="button"
54752
+ (click)="onViewModeClick()"
54753
+ [ngClass]="getViewModeButtonClasses()"
54754
+ class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
54755
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54756
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
54757
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
54758
+ </svg>
54759
+ <span>{{ viewModeLabel }}</span>
54760
+ </button>
54761
+ </div>
54762
+ <div class="flex flex-col gap-4 min-w-[180px]">
54763
+ @if (formattedGeneratedDate()) {
54764
+ <div class="text-left sm:text-right">
54765
+ <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
54766
+ <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
54767
+ </div>
54768
+ }
54769
+ <div class="text-left sm:text-right">
54770
+ <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
54771
+ <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
54772
+ </div>
54773
+ </div>
54774
+ </div>
54775
+ </div>
54776
+ </div>
54777
+
54778
+ <!-- Condensed Header (scrolled state) -->
54779
+ <div
54780
+ class="transition-all duration-300 ease-in-out overflow-hidden"
54781
+ [class.max-h-0]="!headerScrollService.isScrolled()"
54782
+ [class.opacity-0]="!headerScrollService.isScrolled()"
54783
+ [class.max-h-20]="headerScrollService.isScrolled()"
54784
+ [class.opacity-100]="headerScrollService.isScrolled()">
54785
+ <div
54786
+ class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
54787
+ [class.pointer-events-none]="!headerScrollService.isScrolled()"
54788
+ [class.pointer-events-auto]="headerScrollService.isScrolled()">
54789
+ <div class="flex items-center justify-between">
54790
+ <div class="flex-1 min-w-0 mr-4">
54791
+ <h1 [ngClass]="getCondensedTitleClasses()">
54792
+ {{ title }}
54793
+ </h1>
54794
+ </div>
54795
+ <div class="flex items-center gap-4">
54796
+ @if (currentSection) {
54797
+ <div class="flex items-center gap-2 text-sm flex-shrink-0">
54798
+ <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'">
54799
+ {{ currentSection }}
54800
+ </span>
54801
+ @if (currentSubsection) {
54802
+ <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'">›</span>
54803
+ <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'">
54804
+ {{ currentSubsection }}
54805
+ </span>
54806
+ }
54807
+ </div>
54808
+ }
54809
+ <symphiq-search-button
54810
+ [isLightMode]="isLightMode()"
54811
+ [minimized]="true"
54812
+ (searchClick)="onSearchClick()"
54813
+ />
54814
+ <button
54815
+ type="button"
54816
+ (click)="onViewModeClick()"
54817
+ [ngClass]="getViewModeButtonClasses()"
54818
+ class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
54819
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54820
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
54821
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
54822
+ </svg>
54823
+ </button>
54824
+ </div>
54825
+ </div>
54826
+ </div>
54827
+ </div>
54828
+ </header>
54724
54829
  `
54725
54830
  }]
54726
- }], null, { title: [{
54831
+ }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{
54727
54832
  type: Input
54728
54833
  }], subtitle: [{
54729
54834
  type: Input
@@ -54735,12 +54840,14 @@ class DashboardHeaderComponent {
54735
54840
  type: Input
54736
54841
  }], currentSubsection: [{
54737
54842
  type: Input
54843
+ }], isLoading: [{
54844
+ type: Input
54738
54845
  }], searchClick: [{
54739
54846
  type: Output
54740
54847
  }], viewModeClick: [{
54741
54848
  type: Output
54742
54849
  }] }); })();
54743
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 108 }); })();
54850
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 126 }); })();
54744
54851
 
54745
54852
  class GradeBadgeComponent {
54746
54853
  constructor() {
@@ -73147,13 +73254,13 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_11_Template(rf, ct
73147
73254
  i0.ɵɵelement(0, "symphiq-floating-toc", 8);
73148
73255
  } if (rf & 2) {
73149
73256
  const ctx_r0 = i0.ɵɵnextContext();
73150
- i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded);
73257
+ i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded)("scrollElement", ctx_r0.scrollElement ?? undefined);
73151
73258
  } }
73152
73259
  function SymphiqProfileAnalysisDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
73153
73260
  i0.ɵɵelement(0, "symphiq-section-navigation", 8);
73154
73261
  } if (rf & 2) {
73155
73262
  const ctx_r0 = i0.ɵɵnextContext();
73156
- i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded);
73263
+ i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded)("scrollElement", ctx_r0.scrollElement ?? undefined);
73157
73264
  } }
73158
73265
  function SymphiqProfileAnalysisDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
73159
73266
  i0.ɵɵelement(0, "symphiq-goal-card", 12);
@@ -73211,9 +73318,45 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_23_Template(rf, ct
73211
73318
  class SymphiqProfileAnalysisDashboardComponent {
73212
73319
  constructor() {
73213
73320
  this.viewMode = ViewModeEnum.LIGHT;
73321
+ this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
73322
+ this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
73214
73323
  this.embedded = false;
73215
73324
  this.analysisType = ProfileAnalysisTypeEnum.SHOP;
73216
73325
  this.isOnboarded = false;
73326
+ this.COLLAPSE_THRESHOLD = 20;
73327
+ this.EXPAND_THRESHOLD = 10;
73328
+ this.embeddedScrollEffect = effect(() => {
73329
+ const scrollEvent = this.scrollEvent;
73330
+ const isEmbedded = this.embedded;
73331
+ if (isEmbedded && !scrollEvent) {
73332
+ return;
73333
+ }
73334
+ if (!scrollEvent || !isEmbedded) {
73335
+ return;
73336
+ }
73337
+ const detail = scrollEvent.detail;
73338
+ if (!detail) {
73339
+ return;
73340
+ }
73341
+ const scrollTop = detail.scrollTop || 0;
73342
+ const currentState = this.headerScrollService.isScrolled();
73343
+ if (!currentState && scrollTop > this.COLLAPSE_THRESHOLD) {
73344
+ this.headerScrollService.isScrolled.set(true);
73345
+ }
73346
+ else if (currentState && scrollTop < this.EXPAND_THRESHOLD) {
73347
+ this.headerScrollService.isScrolled.set(false);
73348
+ }
73349
+ const scrollElement = this.scrollElement;
73350
+ if (scrollElement) {
73351
+ const scrollHeight = scrollElement.scrollHeight || 0;
73352
+ const clientHeight = scrollElement.clientHeight || 0;
73353
+ const maxScroll = scrollHeight - clientHeight;
73354
+ if (maxScroll > 0) {
73355
+ const progress = (scrollTop / maxScroll) * 100;
73356
+ this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
73357
+ }
73358
+ }
73359
+ }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
73217
73360
  // Signal version of funnelAnalysis for reactive computed signals
73218
73361
  this.funnelAnalysisSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "funnelAnalysisSignal" }] : []));
73219
73362
  this.headerScrollService = inject(HeaderScrollService);
@@ -73879,7 +74022,7 @@ class SymphiqProfileAnalysisDashboardComponent {
73879
74022
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.funnelModalComponent = _t.first);
73880
74023
  } }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
73881
74024
  i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
73882
- } }, inputs: { viewMode: "viewMode", embedded: "embedded", profileAnalysis: "profileAnalysis", profile: "profile", funnelAnalysis: "funnelAnalysis", analysisType: "analysisType", focusAreaDetails: "focusAreaDetails", isOnboarded: "isOnboarded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 27, vars: 42, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "fixed", "inset-0", "bg-slate-900"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [1, "absolute", "inset-0", "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]", "from-slate-800", "via-slate-900", "to-slate-900"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "viewMoreClick", "goals", "viewMode"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
74025
+ } }, inputs: { viewMode: "viewMode", requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: "embedded", profileAnalysis: "profileAnalysis", profile: "profile", funnelAnalysis: "funnelAnalysis", analysisType: "analysisType", focusAreaDetails: "focusAreaDetails", isOnboarded: "isOnboarded", scrollEvent: "scrollEvent", scrollElement: "scrollElement", isLoading: "isLoading" }, features: [i0.ɵɵNgOnChangesFeature], decls: 27, vars: 45, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "fixed", "inset-0", "bg-slate-900"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [1, "absolute", "inset-0", "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]", "from-slate-800", "via-slate-900", "to-slate-900"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "viewMoreClick", "goals", "viewMode"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
73883
74026
  i0.ɵɵelementStart(0, "div", 0)(1, "div");
73884
74027
  i0.ɵɵelement(2, "div", 1);
73885
74028
  i0.ɵɵelementEnd();
@@ -73893,8 +74036,8 @@ class SymphiqProfileAnalysisDashboardComponent {
73893
74036
  i0.ɵɵconditionalCreate(9, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Template, 3, 3);
73894
74037
  i0.ɵɵconditionalCreate(10, SymphiqProfileAnalysisDashboardComponent_Conditional_10_Template, 5, 5);
73895
74038
  i0.ɵɵelementEnd();
73896
- i0.ɵɵconditionalCreate(11, SymphiqProfileAnalysisDashboardComponent_Conditional_11_Template, 1, 3, "symphiq-floating-toc", 8);
73897
- i0.ɵɵconditionalCreate(12, SymphiqProfileAnalysisDashboardComponent_Conditional_12_Template, 1, 3, "symphiq-section-navigation", 8);
74039
+ i0.ɵɵconditionalCreate(11, SymphiqProfileAnalysisDashboardComponent_Conditional_11_Template, 1, 4, "symphiq-floating-toc", 8);
74040
+ i0.ɵɵconditionalCreate(12, SymphiqProfileAnalysisDashboardComponent_Conditional_12_Template, 1, 4, "symphiq-section-navigation", 8);
73898
74041
  i0.ɵɵelementStart(13, "symphiq-search-modal", 9);
73899
74042
  i0.ɵɵlistener("close", function SymphiqProfileAnalysisDashboardComponent_Template_symphiq_search_modal_close_13_listener() { return ctx.closeSearch(); });
73900
74043
  i0.ɵɵelementEnd();
@@ -73915,14 +74058,15 @@ class SymphiqProfileAnalysisDashboardComponent {
73915
74058
  i0.ɵɵelementEnd()();
73916
74059
  } if (rf & 2) {
73917
74060
  let tmp_5_0;
73918
- let tmp_26_0;
73919
- let tmp_27_0;
73920
- let tmp_28_0;
74061
+ let tmp_12_0;
73921
74062
  let tmp_29_0;
73922
74063
  let tmp_30_0;
73923
74064
  let tmp_31_0;
73924
74065
  let tmp_32_0;
73925
74066
  let tmp_33_0;
74067
+ let tmp_34_0;
74068
+ let tmp_35_0;
74069
+ let tmp_36_0;
73926
74070
  i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
73927
74071
  i0.ɵɵadvance();
73928
74072
  i0.ɵɵclassMap(ctx.embedded ? "sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30" : "fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30");
@@ -73932,7 +74076,7 @@ class SymphiqProfileAnalysisDashboardComponent {
73932
74076
  i0.ɵɵadvance();
73933
74077
  i0.ɵɵconditional(!ctx.isLightMode() ? 3 : -1);
73934
74078
  i0.ɵɵadvance(2);
73935
- i0.ɵɵproperty("title", ((tmp_5_0 = ctx.currentAnalysis()) == null ? null : tmp_5_0.profileAnalysisStructured == null ? null : tmp_5_0.profileAnalysisStructured.businessName) || "Profile Analysis")("subtitle", ctx.getAnalysisSubtitle())("currentSection", ctx.getAnalysisSubtitle())("viewMode", ctx.viewMode)("viewModeLabel", ctx.displayModeLabel());
74079
+ i0.ɵɵproperty("title", ((tmp_5_0 = ctx.currentAnalysis()) == null ? null : tmp_5_0.profileAnalysisStructured == null ? null : tmp_5_0.profileAnalysisStructured.businessName) || "Profile Analysis")("subtitle", ctx.getAnalysisSubtitle())("currentSection", ctx.getAnalysisSubtitle())("viewMode", ctx.viewMode)("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading)("requestedByUser", ctx.requestedByUser())("createdDate", (tmp_12_0 = ctx.currentAnalysis()) == null ? null : tmp_12_0.selfContentCompletedDate);
73936
74080
  i0.ɵɵadvance();
73937
74081
  i0.ɵɵconditional(ctx.isSimplifiedView() && !ctx.isOnboarded ? 6 : -1);
73938
74082
  i0.ɵɵadvance(2);
@@ -73952,21 +74096,21 @@ class SymphiqProfileAnalysisDashboardComponent {
73952
74096
  i0.ɵɵadvance();
73953
74097
  i0.ɵɵproperty("isLightMode", ctx.isLightMode())("allMetrics", ctx.allMetrics())("allInsights", ctx.allInsights())("allBusinessInsights", ctx.allBusinessInsights())("allCharts", ctx.allCharts());
73954
74098
  i0.ɵɵadvance();
73955
- i0.ɵɵconditional((tmp_26_0 = ctx.modalType() === "goal-detail" && ctx.getGoalDetailData()) ? 16 : -1, tmp_26_0);
74099
+ i0.ɵɵconditional((tmp_29_0 = ctx.modalType() === "goal-detail" && ctx.getGoalDetailData()) ? 16 : -1, tmp_29_0);
73956
74100
  i0.ɵɵadvance();
73957
- i0.ɵɵconditional((tmp_27_0 = ctx.modalType() === "goal-objectives" && ctx.getGoalDetailData()) ? 17 : -1, tmp_27_0);
74101
+ i0.ɵɵconditional((tmp_30_0 = ctx.modalType() === "goal-objectives" && ctx.getGoalDetailData()) ? 17 : -1, tmp_30_0);
73958
74102
  i0.ɵɵadvance();
73959
- i0.ɵɵconditional((tmp_28_0 = ctx.modalType() === "objective-strategies" && ctx.getObjectiveStrategiesData()) ? 18 : -1, tmp_28_0);
74103
+ i0.ɵɵconditional((tmp_31_0 = ctx.modalType() === "objective-strategies" && ctx.getObjectiveStrategiesData()) ? 18 : -1, tmp_31_0);
73960
74104
  i0.ɵɵadvance();
73961
- i0.ɵɵconditional((tmp_29_0 = ctx.modalType() === "strategy-recommendations" && ctx.getStrategyRecommendationsData()) ? 19 : -1, tmp_29_0);
74105
+ i0.ɵɵconditional((tmp_32_0 = ctx.modalType() === "strategy-recommendations" && ctx.getStrategyRecommendationsData()) ? 19 : -1, tmp_32_0);
73962
74106
  i0.ɵɵadvance();
73963
- i0.ɵɵconditional((tmp_30_0 = ctx.modalType() === "category-detail" && ctx.getCategoryDetailData()) ? 20 : -1, tmp_30_0);
74107
+ i0.ɵɵconditional((tmp_33_0 = ctx.modalType() === "category-detail" && ctx.getCategoryDetailData()) ? 20 : -1, tmp_33_0);
73964
74108
  i0.ɵɵadvance();
73965
- i0.ɵɵconditional((tmp_31_0 = ctx.modalType() === "strength-detail" && ctx.getStrengthDetailData()) ? 21 : -1, tmp_31_0);
74109
+ i0.ɵɵconditional((tmp_34_0 = ctx.modalType() === "strength-detail" && ctx.getStrengthDetailData()) ? 21 : -1, tmp_34_0);
73966
74110
  i0.ɵɵadvance();
73967
- i0.ɵɵconditional((tmp_32_0 = ctx.modalType() === "gap-detail" && ctx.getGapDetailData()) ? 22 : -1, tmp_32_0);
74111
+ i0.ɵɵconditional((tmp_35_0 = ctx.modalType() === "gap-detail" && ctx.getGapDetailData()) ? 22 : -1, tmp_35_0);
73968
74112
  i0.ɵɵadvance();
73969
- i0.ɵɵconditional((tmp_33_0 = ctx.modalType() === "opportunity-detail" && ctx.getOpportunityDetailData()) ? 23 : -1, tmp_33_0);
74113
+ i0.ɵɵconditional((tmp_36_0 = ctx.modalType() === "opportunity-detail" && ctx.getOpportunityDetailData()) ? 23 : -1, tmp_36_0);
73970
74114
  i0.ɵɵadvance();
73971
74115
  i0.ɵɵproperty("isLightMode", ctx.isLightMode())("viewMode", ctx.viewMode)("allMetrics", ctx.allMetrics())("allInsights", ctx.allInsights())("allCharts", ctx.allCharts());
73972
74116
  i0.ɵɵadvance();
@@ -73980,514 +74124,527 @@ class SymphiqProfileAnalysisDashboardComponent {
73980
74124
  standalone: true,
73981
74125
  imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, FloatingTocComponent, SectionNavigationComponent, GradeBadgeComponent, ShopWelcomeBannerComponent, FocusAreaWelcomeBannerComponent, MetricWelcomeBannerComponent, FocusAreaExecutiveSummaryComponent, MetricExecutiveSummaryComponent, NapkinVisualPlaceholderComponent, TooltipContainerComponent, ProfileSectionContentComponent, ProfileAnalysisModalComponent, ModalComponent, GoalCardComponent, GoalObjectivesModalContentComponent, ObjectiveStrategiesModalContentComponent, StrategyRecommendationsModalContentComponent, CategoryDetailModalContentComponent, StrengthDetailModalContentComponent, GapDetailModalContentComponent, OpportunityDetailModalContentComponent, BusinessAnalysisModalComponent, SectionDividerComponent, SymphiqIconComponent, RelatedGoalChipsComponent, StrategicGoalsTiledGridComponent, CollapsibleAnalysisSectionGroupComponent],
73982
74126
  changeDetection: ChangeDetectionStrategy.OnPush,
73983
- template: `
73984
- <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
73985
- <!-- Scroll Progress Bar -->
73986
- <div [class]="embedded ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
73987
- <div
73988
- [style.width.%]="scrollProgress()"
73989
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
73990
- class="h-full transition-all duration-200 ease-out">
73991
- </div>
73992
- </div>
73993
-
73994
- <!-- Background -->
73995
- @if (!isLightMode()) {
73996
- <div class="fixed inset-0 bg-slate-900">
73997
- <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-slate-800 via-slate-900 to-slate-900"></div>
73998
- </div>
73999
- }
74000
-
74001
- <div class="relative z-[51]">
74002
- <!-- Dashboard Header -->
74003
- <symphiq-dashboard-header
74004
- [title]="currentAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
74005
- [subtitle]="getAnalysisSubtitle()"
74006
- [currentSection]="getAnalysisSubtitle()"
74007
- [viewMode]="viewMode"
74008
- [viewModeLabel]="displayModeLabel()"
74009
- (searchClick)="openSearch()"
74010
- (viewModeClick)="openViewModeSwitcher()"
74011
- />
74012
-
74013
- <!-- Journey Progress Banner -->
74014
- @if (isSimplifiedView() && !isOnboarded) {
74015
- <symphiq-journey-progress-indicator
74016
- [viewMode]="viewMode"
74017
- [currentStepId]="isMetricAnalysis() ? 'metric-analysis' : (isFocusAreaAnalysis() ? 'focus-area-analysis' : 'shop-analysis')"
74018
- [showNextStepAction]="false"
74019
- />
74020
- }
74021
-
74022
- <!-- Main Content -->
74023
- <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
74024
-
74025
- <!-- Welcome Banner (Simplified View Only) -->
74026
- @if (isSimplifiedView()) {
74027
- <div class="mb-12">
74028
- @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
74029
- <symphiq-shop-welcome-banner
74030
- [viewMode]="viewMode"
74031
- [businessName]="currentAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
74032
- [isOnboarded]="isOnboarded"
74033
- />
74034
- }
74035
- @if (isFocusAreaAnalysis()) {
74036
- <symphiq-focus-area-welcome-banner
74037
- [viewMode]="viewMode"
74038
- [focusAreaDomain]="focusAreaDomain()"
74039
- [focusAreaName]="focusAreaName()"
74040
- [focusAreaDetails]="focusAreaDetails"
74041
- />
74042
- }
74043
- @if (isMetricAnalysis()) {
74044
- <symphiq-metric-welcome-banner
74045
- [viewMode]="viewMode"
74046
- [metricName]="currentAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
74047
- [isOnboarded]="isOnboarded"
74048
- />
74049
- }
74050
- </div>
74051
- }
74052
-
74053
- <!-- Simplified View Content -->
74054
- @if (isSimplifiedView()) {
74055
- <!-- Strategic Insights & Goals -->
74056
- <div class="mb-8">
74057
- <symphiq-strategic-goals-tiled-grid
74058
- [goals]="strategicRoadmapGoals()"
74059
- [viewMode]="viewMode"
74060
- (viewMoreClick)="openGoalModal($event)"
74061
- />
74062
- </div>
74063
-
74064
- <!-- Supporting Business Context -->
74065
- @if (nonStrategicSections().length > 0) {
74066
- <div>
74067
- <symphiq-collapsible-analysis-section-group
74068
- [sections]="nonStrategicSections()"
74069
- [viewMode]="viewMode"
74070
- [executiveSummary]="executiveSummary()"
74071
- [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
74072
- [metricExecutiveSummary]="metricExecutiveSummary()"
74073
- [metricName]="metricName()"
74074
- [allGoals]="allGoals()"
74075
- [allMetrics]="allMetrics()"
74076
- [allCharts]="allCharts()"
74077
- [allInsights]="allInsights()"
74078
- />
74079
- </div>
74080
- }
74081
- }
74082
-
74083
- <!-- Compact & Expanded View Content -->
74084
- @if (!isSimplifiedView()) {
74085
- <!-- SHOP Executive Summary -->
74086
- @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
74087
- <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
74088
- <!-- Summary Banner -->
74089
- <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
74090
- <div class="space-y-6">
74091
- <div class="flex items-start justify-between gap-4">
74092
- <div class="flex-1">
74093
- <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
74094
- Executive Summary
74095
- </h2>
74096
- <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
74097
- {{ summary.gradeRationale }}
74098
- </p>
74099
- </div>
74100
- @if (summary.overallGrade) {
74101
- <symphiq-grade-badge
74102
- [grade]="summary.overallGrade"
74103
- [gradeRationale]="summary.gradeRationale || ''"
74104
- [viewMode]="viewMode"
74105
- />
74106
- }
74107
- </div>
74108
-
74109
- @if (summary.narrative) {
74110
- <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
74111
- <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
74112
- Analysis Narrative
74113
- </h3>
74114
- <div class="relative">
74115
- @if (summary.napkinVisual && summary.napkinVisual.enabled) {
74116
- <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
74117
- <symphiq-napkin-visual-placeholder
74118
- [visual]="summary.napkinVisual"
74119
- [viewMode]="viewMode"
74120
- />
74121
- </div>
74122
- }
74123
- <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
74124
- {{ summary.narrative }}
74125
- </p>
74126
- <div class="clear-both"></div>
74127
- </div>
74128
- </div>
74129
- }
74130
-
74131
- <!-- Stats -->
74132
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
74133
- <button
74134
- type="button"
74135
- (click)="onKeyStrengthsClick(summary)"
74136
- [ngClass]="getKeyStrengthsStatCardClasses()"
74137
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
74138
- <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
74139
- Key Strengths
74140
- </div>
74141
- <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
74142
- {{ summary.keyStrengths?.length || 0 }}
74143
- </div>
74144
- <div class="flex items-center gap-1.5 text-xs font-medium">
74145
- <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
74146
- <symphiq-icon
74147
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
74148
- size="w-4 h-4"
74149
- [ngClass]="getKeyStrengthsButtonTextClasses()"
74150
- class="transition-transform group-hover:translate-x-1"
74151
- />
74152
- </div>
74153
- </button>
74154
- <button
74155
- type="button"
74156
- (click)="onCriticalGapsClick(summary)"
74157
- [ngClass]="getCriticalGapsStatCardClasses()"
74158
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
74159
- <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
74160
- Critical Gaps
74161
- </div>
74162
- <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
74163
- {{ summary.criticalGaps?.length || 0 }}
74164
- </div>
74165
- <div class="flex items-center gap-1.5 text-xs font-medium">
74166
- <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
74167
- <symphiq-icon
74168
- [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
74169
- size="w-4 h-4"
74170
- [ngClass]="getCriticalGapsButtonTextClasses()"
74171
- class="transition-transform group-hover:translate-x-1"
74172
- />
74173
- </div>
74174
- </button>
74175
- <button
74176
- type="button"
74177
- (click)="scrollToQuickWins()"
74178
- [ngClass]="getQuickWinsStatCardClasses()"
74179
- class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
74180
- <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
74181
- Quick Wins
74182
- </div>
74183
- <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
74184
- {{ summary.quickWins?.length || 0 }}
74185
- </div>
74186
- <div class="flex items-center gap-1.5 text-xs font-medium">
74187
- <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
74188
- <symphiq-icon
74189
- [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
74190
- size="w-4 h-4"
74191
- [ngClass]="getQuickWinsButtonTextClasses()"
74192
- class="transition-transform group-hover:translate-y-1 animate-bounce"
74193
- />
74194
- </div>
74195
- </button>
74196
- </div>
74197
- </div>
74198
- </div>
74199
-
74200
- <!-- Quick Wins -->
74201
- @if (summary.quickWins && summary.quickWins.length > 0) {
74202
- <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
74203
- <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
74204
- Quick Wins
74205
- </h3>
74206
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
74207
- @for (win of summary.quickWins; track $index) {
74208
- <div [ngClass]="getQuickWinCardClasses()"
74209
- class="rounded-xl p-6 transition-all duration-300">
74210
- <div class="space-y-4">
74211
- <div class="flex items-start gap-3">
74212
- <span [ngClass]="getNumberBadgeClasses()"
74213
- class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
74214
- {{ $index + 1 }}
74215
- </span>
74216
- <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
74217
- {{ win.action }}
74218
- </p>
74219
- </div>
74220
-
74221
- <div class="flex flex-wrap gap-2">
74222
- <span [ngClass]="getEffortBadgeClasses(win.effort)"
74223
- class="px-3 py-1 rounded-full text-xs font-semibold">
74224
- {{ formatLabel(win.effort) }} Effort
74225
- </span>
74226
- <span [ngClass]="getImpactBadgeClasses(win.impact)"
74227
- class="px-3 py-1 rounded-full text-xs font-semibold">
74228
- {{ formatLabel(win.impact) }} Impact
74229
- </span>
74230
- </div>
74231
-
74232
- @if (win.estimatedTimeframe) {
74233
- <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
74234
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
74235
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
74236
- d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
74237
- </svg>
74238
- <span>{{ win.estimatedTimeframe }}</span>
74239
- </div>
74240
- }
74241
-
74242
- @if (win.relatedGoalId) {
74243
- <div class="space-y-2">
74244
- <h4 [ngClass]="getMetaTextClasses()" class="text-xs font-semibold uppercase tracking-wider">
74245
- Related Goal
74246
- </h4>
74247
- <symphiq-related-goal-chips
74248
- [relatedGoalIds]="[win.relatedGoalId]"
74249
- [allGoals]="allGoals()"
74250
- [viewMode]="viewMode"
74251
- />
74252
- </div>
74253
- }
74254
- </div>
74255
- </div>
74256
- }
74257
- </div>
74258
- </div>
74259
- }
74260
- </section>
74261
- }
74262
-
74263
- <!-- FOCUS_AREA Executive Summary -->
74264
- @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
74265
- <symphiq-focus-area-executive-summary
74266
- [viewMode]="viewMode"
74267
- [summary]="summary"
74268
- [allGoals]="allGoals()"
74269
- (topPrioritiesClick)="handleTopPrioritiesClick()"
74270
- (priorityDetailClick)="handlePriorityDetailClick($event)"
74271
- />
74272
- }
74273
-
74274
- <!-- METRIC Executive Summary -->
74275
- @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
74276
- <symphiq-metric-executive-summary
74277
- [viewMode]="viewMode"
74278
- [summary]="summary"
74279
- [metricName]="metricName()"
74280
- [allGoals]="allGoals()"
74281
- (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
74282
- (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
74283
- />
74284
- }
74285
-
74286
- <!-- Divider Before First Section -->
74287
- @if (sections(); as sectionList) {
74288
- @if (sectionList.length > 0 && sectionList[0].icon) {
74289
- <symphiq-section-divider
74290
- [viewMode]="viewMode"
74291
- [sectionIcon]="sectionList[0].icon"
74292
- />
74293
- }
74294
- }
74295
-
74296
- <!-- Profile Analysis Sections -->
74297
- @if (sections(); as sectionList) {
74298
- <section class="space-y-8">
74299
- @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
74300
- <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()" class="rounded-xl p-8 scroll-mt-24">
74301
- <!-- Icon and Title -->
74302
- <div class="flex items-start gap-3 mb-6">
74303
- @if (section.icon) {
74304
- <div [ngClass]="getSectionIconClasses()" class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
74305
- <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
74306
- </div>
74307
- }
74308
- <div class="flex-1">
74309
- <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
74310
- {{ section.title }}
74311
- </h3>
74312
- </div>
74313
- </div>
74314
-
74315
- <!-- Description and Visual Side-by-Side -->
74316
- @if (section.description || (section.visual && section.visual.enabled)) {
74317
- <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start" [class.lg:flex-row-reverse]="idx % 2 === 0">
74318
- @if (section.visual && section.visual.enabled) {
74319
- <div class="w-full lg:w-2/3">
74320
- <symphiq-napkin-visual-placeholder
74321
- [visual]="section.visual"
74322
- [viewMode]="viewMode"
74323
- />
74324
- </div>
74325
- }
74326
- @if (section.description) {
74327
- <div class="w-full" [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
74328
- <p [ngClass]="getSectionDescriptionClasses()" class="text-sm leading-relaxed whitespace-pre-line">
74329
- {{ section.description }}
74330
- </p>
74331
- </div>
74332
- }
74333
- </div>
74334
- }
74335
-
74336
- <!-- Section Content -->
74337
- <symphiq-profile-section-content
74338
- [section]="section"
74339
- [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
74340
- [viewMode]="viewMode"
74341
- [sectionIndex]="idx"
74342
- [allGoals]="allGoals()"
74343
- [allMetrics]="allMetrics()"
74344
- [allCharts]="allCharts()"
74345
- [allInsights]="allInsights()"
74346
- />
74347
- </div>
74348
-
74349
- <!-- Section Divider (between sections) -->
74350
- @if (!last) {
74351
- <symphiq-section-divider
74352
- [viewMode]="viewMode"
74353
- [sectionIcon]="sectionList[idx + 1].icon"
74354
- />
74355
- }
74356
- }
74357
- </section>
74358
- }
74359
- }
74360
-
74361
- </main>
74362
-
74363
- <!-- Table of Contents (Compact & Expanded Views) -->
74364
- @if (!isSimplifiedView() && sections()) {
74365
- <symphiq-floating-toc
74366
- [sections]="tocSections()"
74367
- [viewMode]="viewMode"
74368
- [embedded]="embedded"
74369
- />
74370
- }
74371
-
74372
- <!-- Section Navigation Dots (Compact & Expanded Views) -->
74373
- @if (!isSimplifiedView() && sections()) {
74374
- <symphiq-section-navigation
74375
- [sections]="tocSections()"
74376
- [viewMode]="viewMode"
74377
- [embedded]="embedded"
74378
- />
74379
- }
74380
-
74381
- <!-- Search Modal -->
74382
- <symphiq-search-modal
74383
- [isOpen]="isSearchOpen()"
74384
- [isLightMode]="isLightMode()"
74385
- (close)="closeSearch()"
74386
- />
74387
-
74388
- <!-- View Mode Switcher Modal -->
74389
- <symphiq-view-mode-switcher-modal
74390
- [isOpen]="isViewModeSwitcherOpen()"
74391
- [currentMode]="currentDisplayMode()"
74392
- [viewMode]="viewMode"
74393
- (close)="closeViewModeSwitcher()"
74394
- (modeSelected)="handleDisplayModeChange($event)"
74395
- />
74396
-
74397
- <!-- Profile Analysis Modal -->
74398
- <symphiq-profile-analysis-modal
74399
- [isLightMode]="isLightMode()"
74400
- [allMetrics]="allMetrics()"
74401
- [allInsights]="allInsights()"
74402
- [allBusinessInsights]="allBusinessInsights()"
74403
- [allCharts]="allCharts()"
74404
- >
74405
- @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
74406
- <symphiq-goal-card
74407
- [goal]="data.goal"
74408
- [viewMode]="data.viewMode"
74409
- [isInModal]="true"
74410
- [allMetrics]="allMetrics()"
74411
- [allCharts]="allCharts()"
74412
- [allInsights]="allInsights()"
74413
- [currentModalState]="getCurrentModalState()"
74414
- />
74415
- }
74416
- @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
74417
- <symphiq-goal-objectives-modal-content
74418
- [goal]="data.goal"
74419
- [viewMode]="data.viewMode"
74420
- />
74421
- }
74422
- @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
74423
- <symphiq-objective-strategies-modal-content
74424
- [objective]="data.objective"
74425
- [goalTitle]="data.goalTitle"
74426
- [viewMode]="data.viewMode"
74427
- />
74428
- }
74429
- @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
74430
- <symphiq-strategy-recommendations-modal-content
74431
- [strategy]="data.strategy"
74432
- [objectiveTitle]="data.objectiveTitle"
74433
- [goalTitle]="data.goalTitle"
74434
- [viewMode]="data.viewMode"
74435
- [allMetrics]="allMetrics()"
74436
- [allCharts]="allCharts()"
74437
- [allInsights]="allInsights()"
74438
- [allBusinessInsights]="allBusinessInsights()"
74439
- [currentModalState]="getCurrentModalState()"
74440
- />
74441
- }
74442
- @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
74443
- <symphiq-category-detail-modal-content
74444
- [category]="data.category"
74445
- [viewMode]="data.viewMode"
74446
- [scrollToSection]="data.scrollToSection"
74447
- />
74448
- }
74449
- @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
74450
- <symphiq-strength-detail-modal-content
74451
- [strength]="data.strength"
74452
- [viewMode]="data.viewMode"
74453
- [allFunnelStrengths]="funnelStrengths()"
74454
- [currentModalState]="getCurrentModalState()"
74455
- />
74456
- }
74457
- @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
74458
- <symphiq-gap-detail-modal-content
74459
- [gap]="data.gap"
74460
- [viewMode]="data.viewMode"
74461
- [allGoals]="allGoals()"
74462
- [allWeaknesses]="funnelWeaknesses()"
74463
- [currentModalState]="getCurrentModalState()"
74464
- />
74465
- }
74466
- @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
74467
- <symphiq-opportunity-detail-modal-content
74468
- [opportunity]="data.opportunity"
74469
- [viewMode]="data.viewMode"
74470
- [allStrengths]="funnelStrengths()"
74471
- [currentModalState]="getCurrentModalState()"
74472
- />
74473
- }
74474
- </symphiq-profile-analysis-modal>
74475
-
74476
- <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
74477
- <symphiq-funnel-analysis-modal
74478
- [isLightMode]="isLightMode()"
74479
- [viewMode]="viewMode"
74480
- [allMetrics]="allMetrics()"
74481
- [allInsights]="allInsights()"
74482
- [allCharts]="allCharts()"
74483
- />
74484
-
74485
- <!-- Business Analysis Modal (for napkin visuals and other content) -->
74486
- <symphiq-business-analysis-modal [isLightMode]="isLightMode()" />
74487
-
74488
- <!-- Tooltip Container -->
74489
- <symphiq-tooltip-container />
74490
- </div>
74127
+ template: `
74128
+ <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
74129
+ <!-- Scroll Progress Bar -->
74130
+ <div
74131
+ [class]="embedded ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
74132
+ <div
74133
+ [style.width.%]="scrollProgress()"
74134
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
74135
+ class="h-full transition-all duration-200 ease-out">
74136
+ </div>
74137
+ </div>
74138
+
74139
+ <!-- Background -->
74140
+ @if (!isLightMode()) {
74141
+ <div class="fixed inset-0 bg-slate-900">
74142
+ <div
74143
+ class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-slate-800 via-slate-900 to-slate-900"></div>
74144
+ </div>
74145
+ }
74146
+
74147
+ <div class="relative z-[51]">
74148
+ <!-- Dashboard Header -->
74149
+ <symphiq-dashboard-header
74150
+ [title]="currentAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
74151
+ [subtitle]="getAnalysisSubtitle()"
74152
+ [currentSection]="getAnalysisSubtitle()"
74153
+ [viewMode]="viewMode"
74154
+ [viewModeLabel]="displayModeLabel()"
74155
+ [isLoading]="isLoading"
74156
+ [requestedByUser]="requestedByUser()"
74157
+ [createdDate]="currentAnalysis()?.selfContentCompletedDate"
74158
+ (searchClick)="openSearch()"
74159
+ (viewModeClick)="openViewModeSwitcher()"
74160
+ />
74161
+
74162
+ <!-- Journey Progress Banner -->
74163
+ @if (isSimplifiedView() && !isOnboarded) {
74164
+ <symphiq-journey-progress-indicator
74165
+ [viewMode]="viewMode"
74166
+ [currentStepId]="isMetricAnalysis() ? 'metric-analysis' : (isFocusAreaAnalysis() ? 'focus-area-analysis' : 'shop-analysis')"
74167
+ [showNextStepAction]="false"
74168
+ />
74169
+ }
74170
+
74171
+ <!-- Main Content -->
74172
+ <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
74173
+
74174
+ <!-- Welcome Banner (Simplified View Only) -->
74175
+ @if (isSimplifiedView()) {
74176
+ <div class="mb-12">
74177
+ @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
74178
+ <symphiq-shop-welcome-banner
74179
+ [viewMode]="viewMode"
74180
+ [businessName]="currentAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
74181
+ [isOnboarded]="isOnboarded"
74182
+ />
74183
+ }
74184
+ @if (isFocusAreaAnalysis()) {
74185
+ <symphiq-focus-area-welcome-banner
74186
+ [viewMode]="viewMode"
74187
+ [focusAreaDomain]="focusAreaDomain()"
74188
+ [focusAreaName]="focusAreaName()"
74189
+ [focusAreaDetails]="focusAreaDetails"
74190
+ />
74191
+ }
74192
+ @if (isMetricAnalysis()) {
74193
+ <symphiq-metric-welcome-banner
74194
+ [viewMode]="viewMode"
74195
+ [metricName]="currentAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
74196
+ [isOnboarded]="isOnboarded"
74197
+ />
74198
+ }
74199
+ </div>
74200
+ }
74201
+
74202
+ <!-- Simplified View Content -->
74203
+ @if (isSimplifiedView()) {
74204
+ <!-- Strategic Insights & Goals -->
74205
+ <div class="mb-8">
74206
+ <symphiq-strategic-goals-tiled-grid
74207
+ [goals]="strategicRoadmapGoals()"
74208
+ [viewMode]="viewMode"
74209
+ (viewMoreClick)="openGoalModal($event)"
74210
+ />
74211
+ </div>
74212
+
74213
+ <!-- Supporting Business Context -->
74214
+ @if (nonStrategicSections().length > 0) {
74215
+ <div>
74216
+ <symphiq-collapsible-analysis-section-group
74217
+ [sections]="nonStrategicSections()"
74218
+ [viewMode]="viewMode"
74219
+ [executiveSummary]="executiveSummary()"
74220
+ [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
74221
+ [metricExecutiveSummary]="metricExecutiveSummary()"
74222
+ [metricName]="metricName()"
74223
+ [allGoals]="allGoals()"
74224
+ [allMetrics]="allMetrics()"
74225
+ [allCharts]="allCharts()"
74226
+ [allInsights]="allInsights()"
74227
+ />
74228
+ </div>
74229
+ }
74230
+ }
74231
+
74232
+ <!-- Compact & Expanded View Content -->
74233
+ @if (!isSimplifiedView()) {
74234
+ <!-- SHOP Executive Summary -->
74235
+ @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
74236
+ <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
74237
+ <!-- Summary Banner -->
74238
+ <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
74239
+ <div class="space-y-6">
74240
+ <div class="flex items-start justify-between gap-4">
74241
+ <div class="flex-1">
74242
+ <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
74243
+ Executive Summary
74244
+ </h2>
74245
+ <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
74246
+ {{ summary.gradeRationale }}
74247
+ </p>
74248
+ </div>
74249
+ @if (summary.overallGrade) {
74250
+ <symphiq-grade-badge
74251
+ [grade]="summary.overallGrade"
74252
+ [gradeRationale]="summary.gradeRationale || ''"
74253
+ [viewMode]="viewMode"
74254
+ />
74255
+ }
74256
+ </div>
74257
+
74258
+ @if (summary.narrative) {
74259
+ <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
74260
+ <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
74261
+ Analysis Narrative
74262
+ </h3>
74263
+ <div class="relative">
74264
+ @if (summary.napkinVisual && summary.napkinVisual.enabled) {
74265
+ <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
74266
+ <symphiq-napkin-visual-placeholder
74267
+ [visual]="summary.napkinVisual"
74268
+ [viewMode]="viewMode"
74269
+ />
74270
+ </div>
74271
+ }
74272
+ <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
74273
+ {{ summary.narrative }}
74274
+ </p>
74275
+ <div class="clear-both"></div>
74276
+ </div>
74277
+ </div>
74278
+ }
74279
+
74280
+ <!-- Stats -->
74281
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
74282
+ <button
74283
+ type="button"
74284
+ (click)="onKeyStrengthsClick(summary)"
74285
+ [ngClass]="getKeyStrengthsStatCardClasses()"
74286
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
74287
+ <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
74288
+ Key Strengths
74289
+ </div>
74290
+ <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
74291
+ {{ summary.keyStrengths?.length || 0 }}
74292
+ </div>
74293
+ <div class="flex items-center gap-1.5 text-xs font-medium">
74294
+ <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
74295
+ <symphiq-icon
74296
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
74297
+ size="w-4 h-4"
74298
+ [ngClass]="getKeyStrengthsButtonTextClasses()"
74299
+ class="transition-transform group-hover:translate-x-1"
74300
+ />
74301
+ </div>
74302
+ </button>
74303
+ <button
74304
+ type="button"
74305
+ (click)="onCriticalGapsClick(summary)"
74306
+ [ngClass]="getCriticalGapsStatCardClasses()"
74307
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
74308
+ <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
74309
+ Critical Gaps
74310
+ </div>
74311
+ <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
74312
+ {{ summary.criticalGaps?.length || 0 }}
74313
+ </div>
74314
+ <div class="flex items-center gap-1.5 text-xs font-medium">
74315
+ <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
74316
+ <symphiq-icon
74317
+ [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
74318
+ size="w-4 h-4"
74319
+ [ngClass]="getCriticalGapsButtonTextClasses()"
74320
+ class="transition-transform group-hover:translate-x-1"
74321
+ />
74322
+ </div>
74323
+ </button>
74324
+ <button
74325
+ type="button"
74326
+ (click)="scrollToQuickWins()"
74327
+ [ngClass]="getQuickWinsStatCardClasses()"
74328
+ class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
74329
+ <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
74330
+ Quick Wins
74331
+ </div>
74332
+ <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
74333
+ {{ summary.quickWins?.length || 0 }}
74334
+ </div>
74335
+ <div class="flex items-center gap-1.5 text-xs font-medium">
74336
+ <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
74337
+ <symphiq-icon
74338
+ [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
74339
+ size="w-4 h-4"
74340
+ [ngClass]="getQuickWinsButtonTextClasses()"
74341
+ class="transition-transform group-hover:translate-y-1 animate-bounce"
74342
+ />
74343
+ </div>
74344
+ </button>
74345
+ </div>
74346
+ </div>
74347
+ </div>
74348
+
74349
+ <!-- Quick Wins -->
74350
+ @if (summary.quickWins && summary.quickWins.length > 0) {
74351
+ <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
74352
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
74353
+ Quick Wins
74354
+ </h3>
74355
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
74356
+ @for (win of summary.quickWins; track $index) {
74357
+ <div [ngClass]="getQuickWinCardClasses()"
74358
+ class="rounded-xl p-6 transition-all duration-300">
74359
+ <div class="space-y-4">
74360
+ <div class="flex items-start gap-3">
74361
+ <span [ngClass]="getNumberBadgeClasses()"
74362
+ class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
74363
+ {{ $index + 1 }}
74364
+ </span>
74365
+ <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
74366
+ {{ win.action }}
74367
+ </p>
74368
+ </div>
74369
+
74370
+ <div class="flex flex-wrap gap-2">
74371
+ <span [ngClass]="getEffortBadgeClasses(win.effort)"
74372
+ class="px-3 py-1 rounded-full text-xs font-semibold">
74373
+ {{ formatLabel(win.effort) }} Effort
74374
+ </span>
74375
+ <span [ngClass]="getImpactBadgeClasses(win.impact)"
74376
+ class="px-3 py-1 rounded-full text-xs font-semibold">
74377
+ {{ formatLabel(win.impact) }} Impact
74378
+ </span>
74379
+ </div>
74380
+
74381
+ @if (win.estimatedTimeframe) {
74382
+ <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
74383
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
74384
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
74385
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
74386
+ </svg>
74387
+ <span>{{ win.estimatedTimeframe }}</span>
74388
+ </div>
74389
+ }
74390
+
74391
+ @if (win.relatedGoalId) {
74392
+ <div class="space-y-2">
74393
+ <h4 [ngClass]="getMetaTextClasses()"
74394
+ class="text-xs font-semibold uppercase tracking-wider">
74395
+ Related Goal
74396
+ </h4>
74397
+ <symphiq-related-goal-chips
74398
+ [relatedGoalIds]="[win.relatedGoalId]"
74399
+ [allGoals]="allGoals()"
74400
+ [viewMode]="viewMode"
74401
+ />
74402
+ </div>
74403
+ }
74404
+ </div>
74405
+ </div>
74406
+ }
74407
+ </div>
74408
+ </div>
74409
+ }
74410
+ </section>
74411
+ }
74412
+
74413
+ <!-- FOCUS_AREA Executive Summary -->
74414
+ @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
74415
+ <symphiq-focus-area-executive-summary
74416
+ [viewMode]="viewMode"
74417
+ [summary]="summary"
74418
+ [allGoals]="allGoals()"
74419
+ (topPrioritiesClick)="handleTopPrioritiesClick()"
74420
+ (priorityDetailClick)="handlePriorityDetailClick($event)"
74421
+ />
74422
+ }
74423
+
74424
+ <!-- METRIC Executive Summary -->
74425
+ @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
74426
+ <symphiq-metric-executive-summary
74427
+ [viewMode]="viewMode"
74428
+ [summary]="summary"
74429
+ [metricName]="metricName()"
74430
+ [allGoals]="allGoals()"
74431
+ (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
74432
+ (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
74433
+ />
74434
+ }
74435
+
74436
+ <!-- Divider Before First Section -->
74437
+ @if (sections(); as sectionList) {
74438
+ @if (sectionList.length > 0 && sectionList[0].icon) {
74439
+ <symphiq-section-divider
74440
+ [viewMode]="viewMode"
74441
+ [sectionIcon]="sectionList[0].icon"
74442
+ />
74443
+ }
74444
+ }
74445
+
74446
+ <!-- Profile Analysis Sections -->
74447
+ @if (sections(); as sectionList) {
74448
+ <section class="space-y-8">
74449
+ @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
74450
+ <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
74451
+ class="rounded-xl p-8 scroll-mt-24">
74452
+ <!-- Icon and Title -->
74453
+ <div class="flex items-start gap-3 mb-6">
74454
+ @if (section.icon) {
74455
+ <div [ngClass]="getSectionIconClasses()"
74456
+ class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
74457
+ <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
74458
+ </div>
74459
+ }
74460
+ <div class="flex-1">
74461
+ <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
74462
+ {{ section.title }}
74463
+ </h3>
74464
+ </div>
74465
+ </div>
74466
+
74467
+ <!-- Description and Visual Side-by-Side -->
74468
+ @if (section.description || (section.visual && section.visual.enabled)) {
74469
+ <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
74470
+ [class.lg:flex-row-reverse]="idx % 2 === 0">
74471
+ @if (section.visual && section.visual.enabled) {
74472
+ <div class="w-full lg:w-2/3">
74473
+ <symphiq-napkin-visual-placeholder
74474
+ [visual]="section.visual"
74475
+ [viewMode]="viewMode"
74476
+ />
74477
+ </div>
74478
+ }
74479
+ @if (section.description) {
74480
+ <div class="w-full"
74481
+ [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
74482
+ <p [ngClass]="getSectionDescriptionClasses()"
74483
+ class="text-sm leading-relaxed whitespace-pre-line">
74484
+ {{ section.description }}
74485
+ </p>
74486
+ </div>
74487
+ }
74488
+ </div>
74489
+ }
74490
+
74491
+ <!-- Section Content -->
74492
+ <symphiq-profile-section-content
74493
+ [section]="section"
74494
+ [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
74495
+ [viewMode]="viewMode"
74496
+ [sectionIndex]="idx"
74497
+ [allGoals]="allGoals()"
74498
+ [allMetrics]="allMetrics()"
74499
+ [allCharts]="allCharts()"
74500
+ [allInsights]="allInsights()"
74501
+ />
74502
+ </div>
74503
+
74504
+ <!-- Section Divider (between sections) -->
74505
+ @if (!last) {
74506
+ <symphiq-section-divider
74507
+ [viewMode]="viewMode"
74508
+ [sectionIcon]="sectionList[idx + 1].icon"
74509
+ />
74510
+ }
74511
+ }
74512
+ </section>
74513
+ }
74514
+ }
74515
+
74516
+ </main>
74517
+
74518
+ <!-- Table of Contents (Compact & Expanded Views) -->
74519
+ @if (!isSimplifiedView() && sections()) {
74520
+ <symphiq-floating-toc
74521
+ [sections]="tocSections()"
74522
+ [viewMode]="viewMode"
74523
+ [embedded]="embedded"
74524
+ [scrollElement]="scrollElement ?? undefined"
74525
+ />
74526
+ }
74527
+
74528
+ <!-- Section Navigation Dots (Compact & Expanded Views) -->
74529
+ @if (!isSimplifiedView() && sections()) {
74530
+ <symphiq-section-navigation
74531
+ [sections]="tocSections()"
74532
+ [viewMode]="viewMode"
74533
+ [embedded]="embedded"
74534
+ [scrollElement]="scrollElement ?? undefined"
74535
+ />
74536
+ }
74537
+
74538
+ <!-- Search Modal -->
74539
+ <symphiq-search-modal
74540
+ [isOpen]="isSearchOpen()"
74541
+ [isLightMode]="isLightMode()"
74542
+ (close)="closeSearch()"
74543
+ />
74544
+
74545
+ <!-- View Mode Switcher Modal -->
74546
+ <symphiq-view-mode-switcher-modal
74547
+ [isOpen]="isViewModeSwitcherOpen()"
74548
+ [currentMode]="currentDisplayMode()"
74549
+ [viewMode]="viewMode"
74550
+ (close)="closeViewModeSwitcher()"
74551
+ (modeSelected)="handleDisplayModeChange($event)"
74552
+ />
74553
+
74554
+ <!-- Profile Analysis Modal -->
74555
+ <symphiq-profile-analysis-modal
74556
+ [isLightMode]="isLightMode()"
74557
+ [allMetrics]="allMetrics()"
74558
+ [allInsights]="allInsights()"
74559
+ [allBusinessInsights]="allBusinessInsights()"
74560
+ [allCharts]="allCharts()"
74561
+ >
74562
+ @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
74563
+ <symphiq-goal-card
74564
+ [goal]="data.goal"
74565
+ [viewMode]="data.viewMode"
74566
+ [isInModal]="true"
74567
+ [allMetrics]="allMetrics()"
74568
+ [allCharts]="allCharts()"
74569
+ [allInsights]="allInsights()"
74570
+ [currentModalState]="getCurrentModalState()"
74571
+ />
74572
+ }
74573
+ @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
74574
+ <symphiq-goal-objectives-modal-content
74575
+ [goal]="data.goal"
74576
+ [viewMode]="data.viewMode"
74577
+ />
74578
+ }
74579
+ @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
74580
+ <symphiq-objective-strategies-modal-content
74581
+ [objective]="data.objective"
74582
+ [goalTitle]="data.goalTitle"
74583
+ [viewMode]="data.viewMode"
74584
+ />
74585
+ }
74586
+ @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
74587
+ <symphiq-strategy-recommendations-modal-content
74588
+ [strategy]="data.strategy"
74589
+ [objectiveTitle]="data.objectiveTitle"
74590
+ [goalTitle]="data.goalTitle"
74591
+ [viewMode]="data.viewMode"
74592
+ [allMetrics]="allMetrics()"
74593
+ [allCharts]="allCharts()"
74594
+ [allInsights]="allInsights()"
74595
+ [allBusinessInsights]="allBusinessInsights()"
74596
+ [currentModalState]="getCurrentModalState()"
74597
+ />
74598
+ }
74599
+ @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
74600
+ <symphiq-category-detail-modal-content
74601
+ [category]="data.category"
74602
+ [viewMode]="data.viewMode"
74603
+ [scrollToSection]="data.scrollToSection"
74604
+ />
74605
+ }
74606
+ @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
74607
+ <symphiq-strength-detail-modal-content
74608
+ [strength]="data.strength"
74609
+ [viewMode]="data.viewMode"
74610
+ [allFunnelStrengths]="funnelStrengths()"
74611
+ [currentModalState]="getCurrentModalState()"
74612
+ />
74613
+ }
74614
+ @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
74615
+ <symphiq-gap-detail-modal-content
74616
+ [gap]="data.gap"
74617
+ [viewMode]="data.viewMode"
74618
+ [allGoals]="allGoals()"
74619
+ [allWeaknesses]="funnelWeaknesses()"
74620
+ [currentModalState]="getCurrentModalState()"
74621
+ />
74622
+ }
74623
+ @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
74624
+ <symphiq-opportunity-detail-modal-content
74625
+ [opportunity]="data.opportunity"
74626
+ [viewMode]="data.viewMode"
74627
+ [allStrengths]="funnelStrengths()"
74628
+ [currentModalState]="getCurrentModalState()"
74629
+ />
74630
+ }
74631
+ </symphiq-profile-analysis-modal>
74632
+
74633
+ <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
74634
+ <symphiq-funnel-analysis-modal
74635
+ [isLightMode]="isLightMode()"
74636
+ [viewMode]="viewMode"
74637
+ [allMetrics]="allMetrics()"
74638
+ [allInsights]="allInsights()"
74639
+ [allCharts]="allCharts()"
74640
+ />
74641
+
74642
+ <!-- Business Analysis Modal (for napkin visuals and other content) -->
74643
+ <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
74644
+
74645
+ <!-- Tooltip Container -->
74646
+ <symphiq-tooltip-container/>
74647
+ </div>
74491
74648
  `
74492
74649
  }]
74493
74650
  }], () => [], { funnelModalComponent: [{
@@ -74495,7 +74652,7 @@ class SymphiqProfileAnalysisDashboardComponent {
74495
74652
  args: [ModalComponent]
74496
74653
  }], viewMode: [{
74497
74654
  type: Input
74498
- }], embedded: [{
74655
+ }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{
74499
74656
  type: Input
74500
74657
  }], profileAnalysis: [{
74501
74658
  type: Input
@@ -74509,11 +74666,17 @@ class SymphiqProfileAnalysisDashboardComponent {
74509
74666
  type: Input
74510
74667
  }], isOnboarded: [{
74511
74668
  type: Input
74669
+ }], scrollEvent: [{
74670
+ type: Input
74671
+ }], scrollElement: [{
74672
+ type: Input
74673
+ }], isLoading: [{
74674
+ type: Input
74512
74675
  }], onWindowScroll: [{
74513
74676
  type: HostListener,
74514
74677
  args: ['window:scroll', ['$event']]
74515
74678
  }] }); })();
74516
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 581 }); })();
74679
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 613 }); })();
74517
74680
 
74518
74681
  class ScrollProgressBarComponent {
74519
74682
  constructor() {