@eric-emg/symphiq-components 1.2.118 → 1.2.119

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