@eric-emg/symphiq-components 1.2.522 → 1.2.523
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.
- package/fesm2022/symphiq-components.mjs +104 -161
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +29 -29
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/styles.css +0 -3
|
@@ -46677,10 +46677,13 @@ class DashboardHeaderComponent {
|
|
|
46677
46677
|
this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
|
|
46678
46678
|
this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
|
|
46679
46679
|
this.hasCondensedLeftContent = input(false, ...(ngDevMode ? [{ debugName: "hasCondensedLeftContent" }] : []));
|
|
46680
|
+
this.size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
46680
46681
|
this.searchClick = output();
|
|
46681
46682
|
this.viewModeClick = output();
|
|
46682
46683
|
this.headerScrollService = inject(HeaderScrollService);
|
|
46683
46684
|
this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
|
|
46685
|
+
this.isLargeSize = computed(() => this.size() === 'large', ...(ngDevMode ? [{ debugName: "isLargeSize" }] : []));
|
|
46686
|
+
this.expandedHeight = computed(() => this.isLargeSize() ? '140px' : '100px', ...(ngDevMode ? [{ debugName: "expandedHeight" }] : []));
|
|
46684
46687
|
this.dateFormatCache = new StringMemoizeCache();
|
|
46685
46688
|
this.formattedGeneratedDate = computed(() => {
|
|
46686
46689
|
let formatted = '';
|
|
@@ -46708,16 +46711,31 @@ class DashboardHeaderComponent {
|
|
|
46708
46711
|
}));
|
|
46709
46712
|
}
|
|
46710
46713
|
getHeaderClasses() {
|
|
46714
|
+
if (this.isLargeSize()) {
|
|
46715
|
+
return this.isLightMode()
|
|
46716
|
+
? 'backdrop-blur-sm bg-white/50'
|
|
46717
|
+
: 'backdrop-blur-sm bg-slate-900/50';
|
|
46718
|
+
}
|
|
46711
46719
|
return this.isLightMode()
|
|
46712
46720
|
? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
|
|
46713
46721
|
: 'bg-slate-900/95 backdrop-blur-md shadow-sm border-b border-slate-800';
|
|
46714
46722
|
}
|
|
46715
46723
|
getMainTitleClasses() {
|
|
46724
|
+
if (this.isLargeSize()) {
|
|
46725
|
+
return this.isLightMode()
|
|
46726
|
+
? 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
|
|
46727
|
+
: 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
|
|
46728
|
+
}
|
|
46716
46729
|
return this.isLightMode()
|
|
46717
46730
|
? 'text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
|
|
46718
46731
|
: 'text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
|
|
46719
46732
|
}
|
|
46720
46733
|
getSubtitleClasses() {
|
|
46734
|
+
if (this.isLargeSize()) {
|
|
46735
|
+
return this.isLightMode()
|
|
46736
|
+
? 'text-slate-600 mt-2 text-lg'
|
|
46737
|
+
: 'text-slate-400 mt-2 text-lg';
|
|
46738
|
+
}
|
|
46721
46739
|
return this.isLightMode()
|
|
46722
46740
|
? 'text-slate-600 mt-1 text-sm'
|
|
46723
46741
|
: 'text-slate-400 mt-1 text-sm';
|
|
@@ -46738,7 +46756,7 @@ class DashboardHeaderComponent {
|
|
|
46738
46756
|
: 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
|
|
46739
46757
|
}
|
|
46740
46758
|
static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
|
|
46741
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"], hasCondensedLeftContent: [1, "hasCondensedLeftContent"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, ngContentSelectors: _c1$i, decls: 28, vars: 27, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex-1"], [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", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "flex-col", "gap-
|
|
46759
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"], hasCondensedLeftContent: [1, "hasCondensedLeftContent"], size: [1, "size"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, ngContentSelectors: _c1$i, decls: 28, vars: 27, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex-1"], [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", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "flex-col", "gap-1", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "h-full", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "h-full", "flex", "items-center"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0", "mr-4"], [1, "flex-shrink-0", "!mb-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [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, "text-left", "sm:text-right"], [1, "text-xs"], [1, "text-sm", "font-medium"], [1, "hidden", "sm:inline", 3, "ngClass"], [1, "hidden", "sm:block", "truncate", "min-w-0", 3, "ngClass"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [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) {
|
|
46742
46760
|
i0.ɵɵprojectionDef(_c0$G);
|
|
46743
46761
|
i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "div", 5)(6, "h1", 6);
|
|
46744
46762
|
i0.ɵɵtext(7);
|
|
@@ -46766,7 +46784,7 @@ class DashboardHeaderComponent {
|
|
|
46766
46784
|
i0.ɵɵprojection(27, 2);
|
|
46767
46785
|
i0.ɵɵelementEnd()()()()();
|
|
46768
46786
|
} if (rf & 2) {
|
|
46769
|
-
i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" :
|
|
46787
|
+
i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : ctx.expandedHeight());
|
|
46770
46788
|
i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
|
|
46771
46789
|
i0.ɵɵadvance();
|
|
46772
46790
|
i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
|
|
@@ -46806,7 +46824,7 @@ class DashboardHeaderComponent {
|
|
|
46806
46824
|
imports: [CommonModule, SearchButtonComponent],
|
|
46807
46825
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
46808
46826
|
template: `
|
|
46809
|
-
<header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' :
|
|
46827
|
+
<header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : expandedHeight()" style="transition: height 300ms ease-in-out;">
|
|
46810
46828
|
<!-- Expanded Header (default state) -->
|
|
46811
46829
|
<div
|
|
46812
46830
|
class="transition-opacity duration-300 ease-in-out h-full"
|
|
@@ -46852,17 +46870,17 @@ class DashboardHeaderComponent {
|
|
|
46852
46870
|
</div>
|
|
46853
46871
|
</div>
|
|
46854
46872
|
@if (formattedGeneratedDate() || requestedByUser()) {
|
|
46855
|
-
<div class="flex flex-col gap-
|
|
46873
|
+
<div class="flex flex-col gap-1 min-w-[180px]">
|
|
46856
46874
|
@if (formattedGeneratedDate()) {
|
|
46857
46875
|
<div class="text-left sm:text-right">
|
|
46858
|
-
<div [class]="metaLabelClass()" class="text-xs
|
|
46859
|
-
<div [class]="headerTitleClass()" class="text-sm
|
|
46876
|
+
<div [class]="metaLabelClass()" class="text-xs">Generated At</div>
|
|
46877
|
+
<div [class]="headerTitleClass()" class="text-sm font-medium">{{ formattedGeneratedDate() }}</div>
|
|
46860
46878
|
</div>
|
|
46861
46879
|
}
|
|
46862
46880
|
@if (requestedByUser()) {
|
|
46863
46881
|
<div class="text-left sm:text-right">
|
|
46864
|
-
<div [class]="metaLabelClass()" class="text-xs
|
|
46865
|
-
<div [class]="headerTitleClass()" class="text-sm
|
|
46882
|
+
<div [class]="metaLabelClass()" class="text-xs">Requested by</div>
|
|
46883
|
+
<div [class]="headerTitleClass()" class="text-sm font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
|
|
46866
46884
|
</div>
|
|
46867
46885
|
}
|
|
46868
46886
|
</div>
|
|
@@ -46931,7 +46949,7 @@ class DashboardHeaderComponent {
|
|
|
46931
46949
|
</header>
|
|
46932
46950
|
`
|
|
46933
46951
|
}]
|
|
46934
|
-
}], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], hasCondensedLeftContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCondensedLeftContent", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
|
|
46952
|
+
}], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], hasCondensedLeftContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCondensedLeftContent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
|
|
46935
46953
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 139 }); })();
|
|
46936
46954
|
|
|
46937
46955
|
const _c0$F = ["dashboardContainer"];
|
|
@@ -48139,13 +48157,14 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Template(rf, ctx
|
|
|
48139
48157
|
i0.ɵɵconditional(ctx_r2.showCompetitiveIntelligence() ? 6 : -1);
|
|
48140
48158
|
} }
|
|
48141
48159
|
class SymphiqFunnelAnalysisDashboardComponent {
|
|
48142
|
-
constructor(funnelOrderService, viewModeService, searchService, tooltipService, profileContextService, profileItemLookupService) {
|
|
48160
|
+
constructor(funnelOrderService, viewModeService, searchService, tooltipService, profileContextService, profileItemLookupService, headerScrollService) {
|
|
48143
48161
|
this.funnelOrderService = funnelOrderService;
|
|
48144
48162
|
this.viewModeService = viewModeService;
|
|
48145
48163
|
this.searchService = searchService;
|
|
48146
48164
|
this.tooltipService = tooltipService;
|
|
48147
48165
|
this.profileContextService = profileContextService;
|
|
48148
48166
|
this.profileItemLookupService = profileItemLookupService;
|
|
48167
|
+
this.headerScrollService = headerScrollService;
|
|
48149
48168
|
this.ViewModeEnum = ViewModeEnum;
|
|
48150
48169
|
// Input signals (Angular 20 signal-based inputs)
|
|
48151
48170
|
this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
|
|
@@ -48191,7 +48210,6 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
48191
48210
|
this.selectedSectionFilter = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedSectionFilter" }] : []));
|
|
48192
48211
|
this.selectedBreakdownFilter = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedBreakdownFilter" }] : []));
|
|
48193
48212
|
this.selectedCompetitiveFilter = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedCompetitiveFilter" }] : []));
|
|
48194
|
-
this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
|
|
48195
48213
|
this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
|
|
48196
48214
|
this.fabExpanded = signal(false, ...(ngDevMode ? [{ debugName: "fabExpanded" }] : []));
|
|
48197
48215
|
this.activeNavSection = signal('overview', ...(ngDevMode ? [{ debugName: "activeNavSection" }] : []));
|
|
@@ -48713,12 +48731,12 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
48713
48731
|
if (!this.isProgrammaticScroll) {
|
|
48714
48732
|
const COLLAPSE_THRESHOLD = 20;
|
|
48715
48733
|
const EXPAND_THRESHOLD = 10;
|
|
48716
|
-
const currentState = this.isScrolled();
|
|
48734
|
+
const currentState = this.headerScrollService.isScrolled();
|
|
48717
48735
|
if (!currentState && scrollTop > COLLAPSE_THRESHOLD) {
|
|
48718
|
-
this.isScrolled.set(true);
|
|
48736
|
+
this.headerScrollService.isScrolled.set(true);
|
|
48719
48737
|
}
|
|
48720
48738
|
else if (currentState && scrollTop < EXPAND_THRESHOLD) {
|
|
48721
|
-
this.isScrolled.set(false);
|
|
48739
|
+
this.headerScrollService.isScrolled.set(false);
|
|
48722
48740
|
}
|
|
48723
48741
|
}
|
|
48724
48742
|
// ========================================
|
|
@@ -49075,7 +49093,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49075
49093
|
// This 20px gap prevents rapid toggling when hovering near a single threshold
|
|
49076
49094
|
const COLLAPSE_THRESHOLD = 50;
|
|
49077
49095
|
const EXPAND_THRESHOLD = 30;
|
|
49078
|
-
const currentState = this.isScrolled();
|
|
49096
|
+
const currentState = this.headerScrollService.isScrolled();
|
|
49079
49097
|
// Determine new state based on current position and hysteresis logic
|
|
49080
49098
|
let newState = currentState;
|
|
49081
49099
|
// If currently expanded and we scroll past collapse threshold, collapse
|
|
@@ -49092,7 +49110,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49092
49110
|
this.scrollTimeout = setTimeout(() => {
|
|
49093
49111
|
// Double-check position and state during debounce
|
|
49094
49112
|
const finalPosition = window.scrollY;
|
|
49095
|
-
const finalCurrentState = this.isScrolled();
|
|
49113
|
+
const finalCurrentState = this.headerScrollService.isScrolled();
|
|
49096
49114
|
let finalState = finalCurrentState;
|
|
49097
49115
|
if (!finalCurrentState && finalPosition > COLLAPSE_THRESHOLD) {
|
|
49098
49116
|
finalState = true;
|
|
@@ -49100,8 +49118,8 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49100
49118
|
else if (finalCurrentState && finalPosition < EXPAND_THRESHOLD) {
|
|
49101
49119
|
finalState = false;
|
|
49102
49120
|
}
|
|
49103
|
-
if (this.isScrolled() !== finalState) {
|
|
49104
|
-
this.isScrolled.set(finalState);
|
|
49121
|
+
if (this.headerScrollService.isScrolled() !== finalState) {
|
|
49122
|
+
this.headerScrollService.isScrolled.set(finalState);
|
|
49105
49123
|
this.lastStateChangeTime = Date.now();
|
|
49106
49124
|
}
|
|
49107
49125
|
}, 100);
|
|
@@ -49124,7 +49142,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49124
49142
|
}
|
|
49125
49143
|
setTimeout(() => {
|
|
49126
49144
|
this.isProgrammaticScroll = false;
|
|
49127
|
-
this.isScrolled.set(false);
|
|
49145
|
+
this.headerScrollService.isScrolled.set(false);
|
|
49128
49146
|
}, 800);
|
|
49129
49147
|
}
|
|
49130
49148
|
scrollToSection(sectionId) {
|
|
@@ -49157,10 +49175,10 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49157
49175
|
? this.embeddedScrollContainer.scrollTop
|
|
49158
49176
|
: window.scrollY;
|
|
49159
49177
|
if (finalPosition > 50) {
|
|
49160
|
-
this.isScrolled.set(true);
|
|
49178
|
+
this.headerScrollService.isScrolled.set(true);
|
|
49161
49179
|
}
|
|
49162
49180
|
else if (finalPosition < 30) {
|
|
49163
|
-
this.isScrolled.set(false);
|
|
49181
|
+
this.headerScrollService.isScrolled.set(false);
|
|
49164
49182
|
}
|
|
49165
49183
|
}, 800);
|
|
49166
49184
|
}
|
|
@@ -49206,7 +49224,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49206
49224
|
}
|
|
49207
49225
|
return value.toLocaleString('en-US', { maximumFractionDigits: 0 });
|
|
49208
49226
|
}
|
|
49209
|
-
static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService)); }; }
|
|
49227
|
+
static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService), i0.ɵɵdirectiveInject(HeaderScrollService)); }; }
|
|
49210
49228
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
|
|
49211
49229
|
i0.ɵɵviewQuery(ModalComponent, 5);
|
|
49212
49230
|
i0.ɵɵviewQuery(_c0$F, 5);
|
|
@@ -49268,7 +49286,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49268
49286
|
i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
|
|
49269
49287
|
i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-400 to-purple-400");
|
|
49270
49288
|
i0.ɵɵadvance();
|
|
49271
|
-
i0.ɵɵproperty("title", ((tmp_9_0 = ctx.analysisData()) == null ? null : tmp_9_0.title) || "")("subtitle", "Revenue Orchestration & Funnel Analysis")("viewMode", ctx.isLightMode() ? ctx.ViewModeEnum.LIGHT : ctx.ViewModeEnum.DARK)("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading() && !ctx.isShowingLoader())("requestedByUser", ctx.requestedByUser())("createdDate", ctx.analysisCreatedDate())("showControls",
|
|
49289
|
+
i0.ɵɵproperty("title", ((tmp_9_0 = ctx.analysisData()) == null ? null : tmp_9_0.title) || "")("subtitle", "Revenue Orchestration & Funnel Analysis")("viewMode", ctx.isLightMode() ? ctx.ViewModeEnum.LIGHT : ctx.ViewModeEnum.DARK)("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading() && !ctx.isShowingLoader())("requestedByUser", ctx.requestedByUser())("createdDate", ctx.analysisCreatedDate())("showControls", true)("hasCondensedLeftContent", !!ctx.revenueMetric());
|
|
49272
49290
|
i0.ɵɵadvance(2);
|
|
49273
49291
|
i0.ɵɵconditional(!ctx.isSimplifiedView() ? 7 : -1);
|
|
49274
49292
|
i0.ɵɵadvance(2);
|
|
@@ -49383,7 +49401,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
49383
49401
|
[isLoading]="isLoading() && !isShowingLoader()"
|
|
49384
49402
|
[requestedByUser]="requestedByUser()"
|
|
49385
49403
|
[createdDate]="analysisCreatedDate()"
|
|
49386
|
-
[showControls]="
|
|
49404
|
+
[showControls]="true"
|
|
49387
49405
|
[hasCondensedLeftContent]="!!revenueMetric()"
|
|
49388
49406
|
(searchClick)="searchService.openSearch()"
|
|
49389
49407
|
(viewModeClick)="openViewModeSwitcher()"
|
|
@@ -50301,7 +50319,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
50301
50319
|
|
|
50302
50320
|
</div>
|
|
50303
50321
|
`, styles: [":host{display:block;min-height:100%}.bg-gradient-radial{background:radial-gradient(circle,var(--tw-gradient-stops))}.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;grid-auto-flow:dense}@media (min-width: 768px){.bento-grid{grid-template-columns:repeat(6,1fr)}}.bento-small{grid-column:span 2;grid-row:span 1}.bento-medium{grid-column:span 3;grid-row:span 1}.bento-large{grid-column:span 4;grid-row:span 1}.bento-featured{grid-column:span 6;grid-row:span 1}@media (max-width: 767px){.bento-small,.bento-medium,.bento-large,.bento-featured{grid-column:span 1}}.masonry-grid{column-count:1;column-gap:1.5rem}@media (min-width: 768px){.masonry-grid{column-count:2}}@media (min-width: 1280px){.masonry-grid{column-count:3}}.masonry-grid>div{break-inside:avoid;margin-bottom:1.5rem}.masonry-featured{column-span:all}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}@media (max-width: 640px){.animate-fade-in-up{animation-duration:.4s}}\n"] }]
|
|
50304
|
-
}], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }, { type: ProfileContextService }, { type: ProfileItemLookupService }], { modalComponent: [{
|
|
50322
|
+
}], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }, { type: ProfileContextService }, { type: ProfileItemLookupService }, { type: HeaderScrollService }], { modalComponent: [{
|
|
50305
50323
|
type: ViewChild,
|
|
50306
50324
|
args: [ModalComponent]
|
|
50307
50325
|
}], dashboardContainer: [{
|
|
@@ -51444,14 +51462,14 @@ class SymphiqFunnelAnalysisPreviewComponent {
|
|
|
51444
51462
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 228 }); })();
|
|
51445
51463
|
|
|
51446
51464
|
const _forTrack0$C = ($index, $item) => $item.id;
|
|
51447
|
-
function
|
|
51448
|
-
i0.ɵɵelementStart(0, "div",
|
|
51465
|
+
function SymphiqWelcomeDashboardComponent_For_51_Template(rf, ctx) { if (rf & 1) {
|
|
51466
|
+
i0.ɵɵelementStart(0, "div", 27)(1, "div", 32)(2, "div", 33)(3, "span", 34);
|
|
51449
51467
|
i0.ɵɵtext(4);
|
|
51450
51468
|
i0.ɵɵelementEnd()();
|
|
51451
|
-
i0.ɵɵelementStart(5, "div",
|
|
51469
|
+
i0.ɵɵelementStart(5, "div", 19);
|
|
51452
51470
|
i0.ɵɵtext(6);
|
|
51453
51471
|
i0.ɵɵelementEnd()();
|
|
51454
|
-
i0.ɵɵelementStart(7, "div",
|
|
51472
|
+
i0.ɵɵelementStart(7, "div", 35);
|
|
51455
51473
|
i0.ɵɵtext(8);
|
|
51456
51474
|
i0.ɵɵelementEnd()();
|
|
51457
51475
|
} if (rf & 2) {
|
|
@@ -51590,21 +51608,6 @@ class SymphiqWelcomeDashboardComponent {
|
|
|
51590
51608
|
}
|
|
51591
51609
|
return 'relative min-h-screen';
|
|
51592
51610
|
}
|
|
51593
|
-
getHeaderClasses() {
|
|
51594
|
-
const isDark = this.viewMode() === ViewModeEnum.DARK;
|
|
51595
|
-
return isDark ? 'relative backdrop-blur-sm bg-slate-900/50' : 'relative backdrop-blur-sm bg-white/50';
|
|
51596
|
-
}
|
|
51597
|
-
getMainTitleClasses() {
|
|
51598
|
-
const isDark = this.viewMode() === ViewModeEnum.DARK;
|
|
51599
|
-
if (isDark) {
|
|
51600
|
-
return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
|
|
51601
|
-
}
|
|
51602
|
-
return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent';
|
|
51603
|
-
}
|
|
51604
|
-
getSubtitleClasses() {
|
|
51605
|
-
const isDark = this.viewMode() === ViewModeEnum.DARK;
|
|
51606
|
-
return isDark ? 'text-lg mt-2 text-slate-400' : 'text-lg mt-2 text-slate-600';
|
|
51607
|
-
}
|
|
51608
51611
|
containerClasses() {
|
|
51609
51612
|
return this.viewMode() === ViewModeEnum.DARK
|
|
51610
51613
|
? 'bg-slate-800/40 border-slate-700/50'
|
|
@@ -51673,86 +51676,79 @@ class SymphiqWelcomeDashboardComponent {
|
|
|
51673
51676
|
static { this.ɵfac = function SymphiqWelcomeDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqWelcomeDashboardComponent)(); }; }
|
|
51674
51677
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqWelcomeDashboardComponent, selectors: [["symphiq-welcome-dashboard"]], hostBindings: function SymphiqWelcomeDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
51675
51678
|
i0.ɵɵlistener("scroll", function SymphiqWelcomeDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
|
|
51676
|
-
} }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls:
|
|
51679
|
+
} }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 60, vars: 34, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls", "size"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], [3, "viewMode", "currentStepId"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-3", 3, "ngClass"], [1, "space-y-3", "text-sm", 3, "ngClass"], [1, "flex", "flex-col"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "bg-blue-100", "dark:bg-blue-900/30", "flex", "items-center", "justify-center"], [1, "text-xs", "font-bold", "text-blue-600", "dark:text-blue-400"], [1, "text-xs", "opacity-90", "ml-9"]], template: function SymphiqWelcomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
|
|
51677
51680
|
i0.ɵɵelementStart(0, "div", 0)(1, "div");
|
|
51678
51681
|
i0.ɵɵelement(2, "div", 1);
|
|
51679
51682
|
i0.ɵɵelementEnd();
|
|
51680
51683
|
i0.ɵɵelement(3, "div", 2);
|
|
51681
|
-
i0.ɵɵelementStart(4, "div", 3)
|
|
51682
|
-
i0.ɵɵ
|
|
51683
|
-
i0.ɵɵ
|
|
51684
|
-
i0.ɵɵ
|
|
51685
|
-
i0.ɵɵtext(13, " Your Revenue Orchestration Journey Starts Here ");
|
|
51686
|
-
i0.ɵɵelementEnd()()()()();
|
|
51687
|
-
i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
|
|
51688
|
-
i0.ɵɵtext(19, " Welcome to Symphiq ");
|
|
51689
|
-
i0.ɵɵelementEnd()()()()()();
|
|
51690
|
-
i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 10);
|
|
51691
|
-
i0.ɵɵlistener("stepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
|
|
51684
|
+
i0.ɵɵelementStart(4, "div", 3);
|
|
51685
|
+
i0.ɵɵelement(5, "symphiq-dashboard-header", 4);
|
|
51686
|
+
i0.ɵɵelementStart(6, "symphiq-journey-progress-indicator", 5);
|
|
51687
|
+
i0.ɵɵlistener("stepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_6_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqWelcomeDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_6_listener() { return ctx.nextStepClick.emit(); });
|
|
51692
51688
|
i0.ɵɵelementEnd();
|
|
51693
|
-
i0.ɵɵelementStart(
|
|
51689
|
+
i0.ɵɵelementStart(7, "main", 6)(8, "div", 7)(9, "div", 8)(10, "div", 9)(11, "div", 10)(12, "div", 11);
|
|
51694
51690
|
i0.ɵɵnamespaceSVG();
|
|
51695
|
-
i0.ɵɵelementStart(
|
|
51696
|
-
i0.ɵɵelement(
|
|
51691
|
+
i0.ɵɵelementStart(13, "svg", 12);
|
|
51692
|
+
i0.ɵɵelement(14, "path", 13);
|
|
51697
51693
|
i0.ɵɵelementEnd()();
|
|
51698
51694
|
i0.ɵɵnamespaceHTML();
|
|
51699
|
-
i0.ɵɵelementStart(
|
|
51700
|
-
i0.ɵɵtext(
|
|
51695
|
+
i0.ɵɵelementStart(15, "div", 14)(16, "h2", 15);
|
|
51696
|
+
i0.ɵɵtext(17, " Welcome to Symphiq ");
|
|
51701
51697
|
i0.ɵɵelementEnd();
|
|
51702
|
-
i0.ɵɵelementStart(
|
|
51703
|
-
i0.ɵɵtext(
|
|
51698
|
+
i0.ɵɵelementStart(18, "div", 16)(19, "div", 17)(20, "p", 18);
|
|
51699
|
+
i0.ɵɵtext(21, " Symphiq is your Revenue Orchestration Workspace for eCommerce. We help you turn goals into coordinated actions by connecting every revenue touchpoint\u2014so your team plans with confidence, executes together, and measures what truly drives growth. ");
|
|
51704
51700
|
i0.ɵɵelementEnd();
|
|
51705
|
-
i0.ɵɵelementStart(
|
|
51706
|
-
i0.ɵɵtext(
|
|
51701
|
+
i0.ɵɵelementStart(22, "p", 18)(23, "strong", 19);
|
|
51702
|
+
i0.ɵɵtext(24, "How it works:");
|
|
51707
51703
|
i0.ɵɵelementEnd();
|
|
51708
|
-
i0.ɵɵtext(
|
|
51709
|
-
i0.ɵɵelementStart(
|
|
51710
|
-
i0.ɵɵtext(
|
|
51704
|
+
i0.ɵɵtext(25, " Symphiq guides you through a continuous journey loop. You'll ");
|
|
51705
|
+
i0.ɵɵelementStart(26, "strong");
|
|
51706
|
+
i0.ɵɵtext(27, "Build Revenue Targets");
|
|
51711
51707
|
i0.ɵɵelementEnd();
|
|
51712
|
-
i0.ɵɵtext(
|
|
51713
|
-
i0.ɵɵelementStart(
|
|
51714
|
-
i0.ɵɵtext(
|
|
51708
|
+
i0.ɵɵtext(28, " with bottom-up metric goals, ");
|
|
51709
|
+
i0.ɵɵelementStart(29, "strong");
|
|
51710
|
+
i0.ɵɵtext(30, "Strategize Proactively");
|
|
51715
51711
|
i0.ɵɵelementEnd();
|
|
51716
|
-
i0.ɵɵtext(
|
|
51717
|
-
i0.ɵɵelementStart(
|
|
51718
|
-
i0.ɵɵtext(
|
|
51712
|
+
i0.ɵɵtext(31, " with AI-generated business goals and objectives, ");
|
|
51713
|
+
i0.ɵɵelementStart(32, "strong");
|
|
51714
|
+
i0.ɵɵtext(33, "Execute Together");
|
|
51719
51715
|
i0.ɵɵelementEnd();
|
|
51720
|
-
i0.ɵɵtext(
|
|
51721
|
-
i0.ɵɵelementStart(
|
|
51722
|
-
i0.ɵɵtext(
|
|
51716
|
+
i0.ɵɵtext(34, " with your team on recommendations and tasks, ");
|
|
51717
|
+
i0.ɵɵelementStart(35, "strong");
|
|
51718
|
+
i0.ɵɵtext(36, "Measure What Matters");
|
|
51723
51719
|
i0.ɵɵelementEnd();
|
|
51724
|
-
i0.ɵɵtext(
|
|
51725
|
-
i0.ɵɵelementStart(
|
|
51726
|
-
i0.ɵɵtext(
|
|
51720
|
+
i0.ɵɵtext(37, " with pacing and impact tracking, and ");
|
|
51721
|
+
i0.ɵɵelementStart(38, "strong");
|
|
51722
|
+
i0.ɵɵtext(39, "Retain Knowledge");
|
|
51727
51723
|
i0.ɵɵelementEnd();
|
|
51728
|
-
i0.ɵɵtext(
|
|
51724
|
+
i0.ɵɵtext(40, " through detailed profiles that preserve institutional wisdom. This loop repeats as your business grows, learning from each cycle to refine strategies. ");
|
|
51729
51725
|
i0.ɵɵelementEnd()();
|
|
51730
|
-
i0.ɵɵelementStart(
|
|
51731
|
-
i0.ɵɵelement(
|
|
51726
|
+
i0.ɵɵelementStart(41, "div", 20);
|
|
51727
|
+
i0.ɵɵelement(42, "symphiq-confidence-level-card", 21);
|
|
51732
51728
|
i0.ɵɵelementEnd()();
|
|
51733
|
-
i0.ɵɵelementStart(
|
|
51729
|
+
i0.ɵɵelementStart(43, "div", 22);
|
|
51734
51730
|
i0.ɵɵnamespaceSVG();
|
|
51735
|
-
i0.ɵɵelementStart(
|
|
51736
|
-
i0.ɵɵelement(
|
|
51731
|
+
i0.ɵɵelementStart(44, "svg", 23);
|
|
51732
|
+
i0.ɵɵelement(45, "path", 24);
|
|
51737
51733
|
i0.ɵɵelementEnd();
|
|
51738
51734
|
i0.ɵɵnamespaceHTML();
|
|
51739
|
-
i0.ɵɵelementStart(
|
|
51740
|
-
i0.ɵɵtext(
|
|
51735
|
+
i0.ɵɵelementStart(46, "div", 14)(47, "h3", 25);
|
|
51736
|
+
i0.ɵɵtext(48, " Your Onboarding Journey ");
|
|
51741
51737
|
i0.ɵɵelementEnd();
|
|
51742
|
-
i0.ɵɵelementStart(
|
|
51743
|
-
i0.ɵɵrepeaterCreate(
|
|
51738
|
+
i0.ɵɵelementStart(49, "div", 26);
|
|
51739
|
+
i0.ɵɵrepeaterCreate(50, SymphiqWelcomeDashboardComponent_For_51_Template, 9, 3, "div", 27, _forTrack0$C);
|
|
51744
51740
|
i0.ɵɵelementEnd()()();
|
|
51745
|
-
i0.ɵɵelementStart(
|
|
51741
|
+
i0.ɵɵelementStart(52, "div", 28);
|
|
51746
51742
|
i0.ɵɵnamespaceSVG();
|
|
51747
|
-
i0.ɵɵelementStart(
|
|
51748
|
-
i0.ɵɵelement(
|
|
51743
|
+
i0.ɵɵelementStart(53, "svg", 23);
|
|
51744
|
+
i0.ɵɵelement(54, "path", 29);
|
|
51749
51745
|
i0.ɵɵelementEnd();
|
|
51750
51746
|
i0.ɵɵnamespaceHTML();
|
|
51751
|
-
i0.ɵɵelementStart(
|
|
51752
|
-
i0.ɵɵtext(
|
|
51747
|
+
i0.ɵɵelementStart(55, "div", 14)(56, "h3", 30);
|
|
51748
|
+
i0.ɵɵtext(57, " Ready to Begin Your Journey? ");
|
|
51753
51749
|
i0.ɵɵelementEnd();
|
|
51754
|
-
i0.ɵɵelementStart(
|
|
51755
|
-
i0.ɵɵtext(
|
|
51750
|
+
i0.ɵɵelementStart(58, "p", 31);
|
|
51751
|
+
i0.ɵɵtext(59, " The next step will guide you through creating your account and entering your shop details\u2014including your business name, website URL, and ecommerce platform. Each step builds on the previous one to create comprehensive business context, enabling Symphiq to deliver increasingly accurate and personalized recommendations as you progress. ");
|
|
51756
51752
|
i0.ɵɵelementEnd()()()()()()()()()()();
|
|
51757
51753
|
} if (rf & 2) {
|
|
51758
51754
|
i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
|
|
@@ -51764,22 +51760,8 @@ class SymphiqWelcomeDashboardComponent {
|
|
|
51764
51760
|
i0.ɵɵadvance();
|
|
51765
51761
|
i0.ɵɵclassProp("light-mode", ctx.isLightMode());
|
|
51766
51762
|
i0.ɵɵadvance(2);
|
|
51767
|
-
i0.ɵɵproperty("
|
|
51768
|
-
i0.ɵɵadvance();
|
|
51769
|
-
i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
|
|
51770
|
-
i0.ɵɵadvance();
|
|
51771
|
-
i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
|
|
51772
|
-
i0.ɵɵadvance(3);
|
|
51773
|
-
i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
|
|
51774
|
-
i0.ɵɵadvance(2);
|
|
51775
|
-
i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
|
|
51776
|
-
i0.ɵɵadvance(2);
|
|
51777
|
-
i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
|
|
51763
|
+
i0.ɵɵproperty("title", "Welcome to Symphiq")("subtitle", "Your Revenue Orchestration Journey Starts Here")("viewMode", ctx.viewMode())("showControls", false)("size", "large");
|
|
51778
51764
|
i0.ɵɵadvance();
|
|
51779
|
-
i0.ɵɵclassProp("pointer-events-none", !ctx.headerScrollService.isScrolled())("pointer-events-auto", ctx.headerScrollService.isScrolled());
|
|
51780
|
-
i0.ɵɵadvance(3);
|
|
51781
|
-
i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate" : "text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate");
|
|
51782
|
-
i0.ɵɵadvance(2);
|
|
51783
51765
|
i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.WELCOME)("showNextStepAction", true)("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
|
|
51784
51766
|
i0.ɵɵadvance(3);
|
|
51785
51767
|
i0.ɵɵproperty("ngClass", ctx.containerClasses());
|
|
@@ -51813,11 +51795,11 @@ class SymphiqWelcomeDashboardComponent {
|
|
|
51813
51795
|
i0.ɵɵproperty("ngClass", ctx.nextStepsTitleClasses());
|
|
51814
51796
|
i0.ɵɵadvance(2);
|
|
51815
51797
|
i0.ɵɵproperty("ngClass", ctx.nextStepsTextClasses());
|
|
51816
|
-
} }, dependencies: [CommonModule, i1$1.NgClass, ConfidenceLevelCardComponent, JourneyProgressIndicatorComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}"], changeDetection: 0 }); }
|
|
51798
|
+
} }, dependencies: [CommonModule, i1$1.NgClass, ConfidenceLevelCardComponent, DashboardHeaderComponent, JourneyProgressIndicatorComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}"], changeDetection: 0 }); }
|
|
51817
51799
|
}
|
|
51818
51800
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqWelcomeDashboardComponent, [{
|
|
51819
51801
|
type: Component,
|
|
51820
|
-
args: [{ selector: 'symphiq-welcome-dashboard', standalone: true, imports: [CommonModule, ConfidenceLevelCardComponent, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
51802
|
+
args: [{ selector: 'symphiq-welcome-dashboard', standalone: true, imports: [CommonModule, ConfidenceLevelCardComponent, DashboardHeaderComponent, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
51821
51803
|
<div [ngClass]="getContainerClasses()">
|
|
51822
51804
|
<!-- Scroll Progress Bar -->
|
|
51823
51805
|
<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'">
|
|
@@ -51831,52 +51813,13 @@ class SymphiqWelcomeDashboardComponent {
|
|
|
51831
51813
|
<div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
|
|
51832
51814
|
|
|
51833
51815
|
<div class="relative z-[51]">
|
|
51834
|
-
<
|
|
51835
|
-
|
|
51836
|
-
|
|
51837
|
-
|
|
51838
|
-
|
|
51839
|
-
|
|
51840
|
-
|
|
51841
|
-
[class.opacity-100]="!headerScrollService.isScrolled()">
|
|
51842
|
-
<div
|
|
51843
|
-
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
|
|
51844
|
-
[class.pointer-events-none]="headerScrollService.isScrolled()"
|
|
51845
|
-
[class.pointer-events-auto]="!headerScrollService.isScrolled()">
|
|
51846
|
-
<div class="flex items-center justify-between">
|
|
51847
|
-
<div>
|
|
51848
|
-
<h1 [ngClass]="getMainTitleClasses()">
|
|
51849
|
-
Welcome to Symphiq
|
|
51850
|
-
</h1>
|
|
51851
|
-
<p [ngClass]="getSubtitleClasses()">
|
|
51852
|
-
Your Revenue Orchestration Journey Starts Here
|
|
51853
|
-
</p>
|
|
51854
|
-
</div>
|
|
51855
|
-
</div>
|
|
51856
|
-
</div>
|
|
51857
|
-
</div>
|
|
51858
|
-
|
|
51859
|
-
<!-- Condensed Header -->
|
|
51860
|
-
<div
|
|
51861
|
-
class="transition-all duration-300 ease-in-out overflow-hidden"
|
|
51862
|
-
[class.max-h-0]="!headerScrollService.isScrolled()"
|
|
51863
|
-
[class.opacity-0]="!headerScrollService.isScrolled()"
|
|
51864
|
-
[class.max-h-20]="headerScrollService.isScrolled()"
|
|
51865
|
-
[class.opacity-100]="headerScrollService.isScrolled()">
|
|
51866
|
-
<div
|
|
51867
|
-
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
|
|
51868
|
-
[class.pointer-events-none]="!headerScrollService.isScrolled()"
|
|
51869
|
-
[class.pointer-events-auto]="headerScrollService.isScrolled()">
|
|
51870
|
-
<div class="flex items-center justify-between">
|
|
51871
|
-
<div class="flex-1 min-w-0 mr-4">
|
|
51872
|
-
<h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
|
|
51873
|
-
Welcome to Symphiq
|
|
51874
|
-
</h1>
|
|
51875
|
-
</div>
|
|
51876
|
-
</div>
|
|
51877
|
-
</div>
|
|
51878
|
-
</div>
|
|
51879
|
-
</header>
|
|
51816
|
+
<symphiq-dashboard-header
|
|
51817
|
+
[title]="'Welcome to Symphiq'"
|
|
51818
|
+
[subtitle]="'Your Revenue Orchestration Journey Starts Here'"
|
|
51819
|
+
[viewMode]="viewMode()"
|
|
51820
|
+
[showControls]="false"
|
|
51821
|
+
[size]="'large'"
|
|
51822
|
+
/>
|
|
51880
51823
|
|
|
51881
51824
|
<!-- Journey Progress Indicator -->
|
|
51882
51825
|
<symphiq-journey-progress-indicator
|
|
@@ -51979,7 +51922,7 @@ class SymphiqWelcomeDashboardComponent {
|
|
|
51979
51922
|
type: HostListener,
|
|
51980
51923
|
args: ['window:scroll', ['$event']]
|
|
51981
51924
|
}] }); })();
|
|
51982
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber:
|
|
51925
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber: 163 }); })();
|
|
51983
51926
|
|
|
51984
51927
|
function FocusAreaQuestionComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
51985
51928
|
i0.ɵɵelementStart(0, "span", 5);
|