@eric-emg/symphiq-components 1.2.162 → 1.2.163
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 +113 -104
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +22 -19
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/styles.css +20 -0
|
@@ -2454,11 +2454,11 @@ class ConfettiService {
|
|
|
2454
2454
|
'#67e8f9'
|
|
2455
2455
|
];
|
|
2456
2456
|
}
|
|
2457
|
-
getColors(customColors) {
|
|
2457
|
+
getColors(customColors, viewMode) {
|
|
2458
2458
|
if (customColors && customColors.length > 0) {
|
|
2459
2459
|
return customColors;
|
|
2460
2460
|
}
|
|
2461
|
-
const isDarkMode =
|
|
2461
|
+
const isDarkMode = viewMode === ViewModeEnum.DARK;
|
|
2462
2462
|
return isDarkMode ? this.darkModeColors : this.lightModeColors;
|
|
2463
2463
|
}
|
|
2464
2464
|
getIntensityConfig(intensity) {
|
|
@@ -2491,9 +2491,9 @@ class ConfettiService {
|
|
|
2491
2491
|
}
|
|
2492
2492
|
}
|
|
2493
2493
|
trigger(config = {}) {
|
|
2494
|
-
const { intensity = 'normal', colors: customColors, delay = 200 } = config;
|
|
2494
|
+
const { intensity = 'normal', colors: customColors, delay = 200, viewMode } = config;
|
|
2495
2495
|
const intensityConfig = this.getIntensityConfig(intensity);
|
|
2496
|
-
const colors = this.getColors(customColors);
|
|
2496
|
+
const colors = this.getColors(customColors, viewMode);
|
|
2497
2497
|
setTimeout(() => {
|
|
2498
2498
|
this.fireConfetti(intensityConfig, colors);
|
|
2499
2499
|
}, delay);
|
|
@@ -54197,6 +54197,7 @@ class SymphiqConnectGaDashboardComponent {
|
|
|
54197
54197
|
this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
|
|
54198
54198
|
this.stepClick = output();
|
|
54199
54199
|
this.nextStepClick = output();
|
|
54200
|
+
this.googleButtonClick = output();
|
|
54200
54201
|
this.headerScrollService = inject(HeaderScrollService);
|
|
54201
54202
|
this.JourneyStepIdEnum = JourneyStepIdEnum;
|
|
54202
54203
|
this.COLLAPSE_THRESHOLD = 20;
|
|
@@ -54344,7 +54345,7 @@ class SymphiqConnectGaDashboardComponent {
|
|
|
54344
54345
|
i0.ɵɵlistener("scroll", function SymphiqConnectGaDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
|
|
54345
54346
|
} if (rf & 2) {
|
|
54346
54347
|
i0.ɵɵclassProp("light", ctx.isLightMode())("dark", !ctx.isLightMode());
|
|
54347
|
-
} }, 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: 70, vars: 66, 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]"], [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, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "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", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
|
|
54348
|
+
} }, 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", googleButtonClick: "googleButtonClick" }, decls: 70, vars: 66, 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]"], [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, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "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", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
|
|
54348
54349
|
i0.ɵɵelementStart(0, "div", 0)(1, "div");
|
|
54349
54350
|
i0.ɵɵelement(2, "div", 1);
|
|
54350
54351
|
i0.ɵɵelementEnd();
|
|
@@ -54374,6 +54375,7 @@ class SymphiqConnectGaDashboardComponent {
|
|
|
54374
54375
|
i0.ɵɵtext(33, " Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration. ");
|
|
54375
54376
|
i0.ɵɵelementEnd();
|
|
54376
54377
|
i0.ɵɵelementStart(34, "div", 22)(35, "button", 23);
|
|
54378
|
+
i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_button_click_35_listener() { return ctx.googleButtonClick.emit(); });
|
|
54377
54379
|
i0.ɵɵelement(36, "div", 24);
|
|
54378
54380
|
i0.ɵɵelementStart(37, "div", 25)(38, "div", 26);
|
|
54379
54381
|
i0.ɵɵnamespaceSVG();
|
|
@@ -54579,7 +54581,7 @@ class SymphiqConnectGaDashboardComponent {
|
|
|
54579
54581
|
|
|
54580
54582
|
<!-- Continue with Google Button -->
|
|
54581
54583
|
<div class="mb-6">
|
|
54582
|
-
<button type="button" class="gsi-material-button">
|
|
54584
|
+
<button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
|
|
54583
54585
|
<div class="gsi-material-button-state"></div>
|
|
54584
54586
|
<div class="gsi-material-button-content-wrapper">
|
|
54585
54587
|
<div class="gsi-material-button-icon">
|
|
@@ -54655,7 +54657,7 @@ class SymphiqConnectGaDashboardComponent {
|
|
|
54655
54657
|
</div>
|
|
54656
54658
|
</div>
|
|
54657
54659
|
`, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}:host.light .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}:host.light .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.light .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.light .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.light .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.light .gsi-material-button:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}:host.light .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.light .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.light .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.light .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#303030;opacity:12%}:host.light .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.light .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#303030;opacity:8%}:host.dark .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#131314;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#e3e3e3;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content;border-color:#8e918f}:host.dark .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.dark .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.dark .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.dark .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.dark .gsi-material-button:disabled{cursor:default;background-color:#13131461;border-color:#8e918f1f}:host.dark .gsi-material-button:disabled .gsi-material-button-state{background-color:#e3e3e31f}:host.dark .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.dark .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.dark .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.dark .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#fff;opacity:12%}:host.dark .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.dark .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#fff;opacity:8%}\n"] }]
|
|
54658
|
-
}], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
|
|
54660
|
+
}], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], googleButtonClick: [{ type: i0.Output, args: ["googleButtonClick"] }], onScroll: [{
|
|
54659
54661
|
type: HostListener,
|
|
54660
54662
|
args: ['window:scroll', ['$event']]
|
|
54661
54663
|
}] }); })();
|
|
@@ -57934,29 +57936,27 @@ class CollapsibleSectionGroupComponent {
|
|
|
57934
57936
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleSectionGroupComponent, { className: "CollapsibleSectionGroupComponent", filePath: "lib/components/business-analysis-dashboard/collapsible-section-group.component.ts", lineNumber: 100 }); })();
|
|
57935
57937
|
|
|
57936
57938
|
function ContentGenerationProgressComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
57937
|
-
i0.ɵɵelementStart(0, "div",
|
|
57938
|
-
i0.ɵɵelement(1, "div",
|
|
57939
|
+
i0.ɵɵelementStart(0, "div", 20);
|
|
57940
|
+
i0.ɵɵelement(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "div", 24)(5, "div", 25)(6, "div", 26);
|
|
57939
57941
|
i0.ɵɵelementEnd();
|
|
57940
57942
|
} if (rf & 2) {
|
|
57941
57943
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
57942
|
-
i0.ɵɵadvance();
|
|
57943
57944
|
i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
|
|
57944
|
-
i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
|
|
57945
57945
|
i0.ɵɵadvance();
|
|
57946
|
-
i0.ɵɵstyleProp("
|
|
57947
|
-
i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
|
|
57946
|
+
i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
|
|
57948
57947
|
i0.ɵɵadvance();
|
|
57949
|
-
i0.ɵɵstyleProp("
|
|
57950
|
-
i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
|
|
57948
|
+
i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
|
|
57951
57949
|
i0.ɵɵadvance();
|
|
57952
|
-
i0.ɵɵstyleProp("
|
|
57953
|
-
i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
|
|
57950
|
+
i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
|
|
57954
57951
|
i0.ɵɵadvance();
|
|
57955
|
-
i0.ɵɵstyleProp("
|
|
57956
|
-
i0.ɵɵ
|
|
57952
|
+
i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
|
|
57953
|
+
i0.ɵɵadvance();
|
|
57954
|
+
i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
|
|
57955
|
+
i0.ɵɵadvance();
|
|
57956
|
+
i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
|
|
57957
57957
|
} }
|
|
57958
57958
|
function ContentGenerationProgressComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
|
|
57959
|
-
i0.ɵɵelement(0, "div",
|
|
57959
|
+
i0.ɵɵelement(0, "div", 27);
|
|
57960
57960
|
} if (rf & 2) {
|
|
57961
57961
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
57962
57962
|
i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
|
|
@@ -57971,8 +57971,9 @@ class ContentGenerationProgressComponent {
|
|
|
57971
57971
|
this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
|
|
57972
57972
|
this.progressPercentage = computed(() => {
|
|
57973
57973
|
const status = this.itemStatus();
|
|
57974
|
-
if (!status?.percentageComplete)
|
|
57974
|
+
if (!status?.percentageComplete) {
|
|
57975
57975
|
return 0;
|
|
57976
|
+
}
|
|
57976
57977
|
return Math.round(Math.min(100, Math.max(0, status.percentageComplete)));
|
|
57977
57978
|
}, ...(ngDevMode ? [{ debugName: "progressPercentage" }] : []));
|
|
57978
57979
|
this.progressMessage = computed(() => {
|
|
@@ -58026,6 +58027,9 @@ class ContentGenerationProgressComponent {
|
|
|
58026
58027
|
? 'bg-blue-400 shadow-lg shadow-blue-400/60'
|
|
58027
58028
|
: 'bg-cyan-300 shadow-lg shadow-cyan-300/60';
|
|
58028
58029
|
}, ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
|
|
58030
|
+
this.dotColor = computed(() => {
|
|
58031
|
+
return this.isLightMode() ? '#60a5fa' : '#67e8f9';
|
|
58032
|
+
}, ...(ngDevMode ? [{ debugName: "dotColor" }] : []));
|
|
58029
58033
|
this.progressGlowClasses = computed(() => {
|
|
58030
58034
|
return this.isLightMode()
|
|
58031
58035
|
? 'bg-blue-400 shadow-xl'
|
|
@@ -58038,7 +58042,7 @@ class ContentGenerationProgressComponent {
|
|
|
58038
58042
|
}, ...(ngDevMode ? [{ debugName: "percentageClasses" }] : []));
|
|
58039
58043
|
}
|
|
58040
58044
|
static { this.ɵfac = function ContentGenerationProgressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressComponent)(); }; }
|
|
58041
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressComponent, selectors: [["symphiq-content-generation-progress"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"] }, decls: 25, vars: 17, consts: [[1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "max-w-3xl", "w-full", "space-y-8"], [1, "text-center", "space-y-3"], [1, "flex", "items-center", "justify-center", "mb-4"], [1, "relative", "w-20", "h-20", "rounded-2xl", "flex", "items-center", "justify-center", "icon-pulse", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "absolute", "inset-0", "rounded-2xl", "icon-glow"], [1, "text-3xl", "sm:text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", "sm:text-lg", "max-w-2xl", "mx-auto", 3, "ngClass"], [1, "space-y-4"], [1, "text-center"], [1, "text-lg", "sm:text-xl", "font-medium", "message-fade", 3, "ngClass"], [1, "relative", "h-3", "rounded-full", "overflow
|
|
58045
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressComponent, selectors: [["symphiq-content-generation-progress"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"] }, decls: 25, vars: 17, consts: [[1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "max-w-3xl", "w-full", "space-y-8"], [1, "text-center", "space-y-3"], [1, "flex", "items-center", "justify-center", "mb-4"], [1, "relative", "w-20", "h-20", "rounded-2xl", "flex", "items-center", "justify-center", "icon-pulse", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "absolute", "inset-0", "rounded-2xl", "icon-glow"], [1, "text-3xl", "sm:text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", "sm:text-lg", "max-w-2xl", "mx-auto", 3, "ngClass"], [1, "space-y-4"], [1, "text-center"], [1, "text-lg", "sm:text-xl", "font-medium", "message-fade", 3, "ngClass"], [1, "relative", "h-3", "rounded-full", 2, "overflow", "visible", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-full", 3, "ngClass"], [1, "absolute", "inset-y-0", "left-0", "rounded-full", "transition-all", "duration-700", "ease-out", "overflow-hidden", 3, "ngClass"], [1, "absolute", "inset-0", "shimmer-effect"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible", 3, "left"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass", "left"], [1, "text-sm", "font-medium", "tabular-nums", 3, "ngClass"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible"], [1, "animated-dot", "animated-dot-1"], [1, "animated-dot", "animated-dot-2"], [1, "animated-dot", "animated-dot-3"], [1, "animated-dot", "animated-dot-4"], [1, "animated-dot", "animated-dot-5"], [1, "animated-dot", "animated-dot-6"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass"]], template: function ContentGenerationProgressComponent_Template(rf, ctx) { if (rf & 1) {
|
|
58042
58046
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
|
|
58043
58047
|
i0.ɵɵnamespaceSVG();
|
|
58044
58048
|
i0.ɵɵelementStart(5, "svg", 5);
|
|
@@ -58061,7 +58065,7 @@ class ContentGenerationProgressComponent {
|
|
|
58061
58065
|
i0.ɵɵelementStart(18, "div", 15);
|
|
58062
58066
|
i0.ɵɵelement(19, "div", 16);
|
|
58063
58067
|
i0.ɵɵelementEnd();
|
|
58064
|
-
i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_20_Template,
|
|
58068
|
+
i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_20_Template, 7, 14, "div", 17);
|
|
58065
58069
|
i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_21_Template, 1, 3, "div", 18);
|
|
58066
58070
|
i0.ɵɵelementEnd();
|
|
58067
58071
|
i0.ɵɵelementStart(22, "div", 11)(23, "span", 19);
|
|
@@ -58098,90 +58102,94 @@ class ContentGenerationProgressComponent {
|
|
|
58098
58102
|
i0.ɵɵproperty("ngClass", ctx.percentageClasses());
|
|
58099
58103
|
i0.ɵɵadvance();
|
|
58100
58104
|
i0.ɵɵtextInterpolate1(" ", ctx.progressPercentage(), "% complete ");
|
|
58101
|
-
} }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes _ngcontent-%COMP%_icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes _ngcontent-%COMP%_dots-move{0%{
|
|
58105
|
+
} }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes _ngcontent-%COMP%_icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes _ngcontent-%COMP%_dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes _ngcontent-%COMP%_dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes _ngcontent-%COMP%_message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-pulse 2s ease-in-out infinite}.icon-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect[_ngcontent-%COMP%]{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:_ngcontent-%COMP%_shimmer 2s ease-in-out infinite}.message-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_message-fade 3s ease-in-out infinite}.animated-dot[_ngcontent-%COMP%]{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:_ngcontent-%COMP%_dots-move 6s linear infinite,_ngcontent-%COMP%_dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1[_ngcontent-%COMP%]{animation-delay:0s,0s}.animated-dot-2[_ngcontent-%COMP%]{animation-delay:1s,0s}.animated-dot-3[_ngcontent-%COMP%]{animation-delay:2s,0s}.animated-dot-4[_ngcontent-%COMP%]{animation-delay:3s,0s}.animated-dot-5[_ngcontent-%COMP%]{animation-delay:4s,0s}.animated-dot-6[_ngcontent-%COMP%]{animation-delay:5s,0s}"], changeDetection: 0 }); }
|
|
58102
58106
|
}
|
|
58103
58107
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
|
|
58104
58108
|
type: Component,
|
|
58105
|
-
args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
58106
|
-
<div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
|
|
58107
|
-
<div class="max-w-3xl w-full space-y-8">
|
|
58108
|
-
<!-- Title Section -->
|
|
58109
|
-
<div class="text-center space-y-3">
|
|
58110
|
-
<div class="flex items-center justify-center mb-4">
|
|
58111
|
-
<div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
|
|
58112
|
-
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
58113
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
58114
|
-
</svg>
|
|
58115
|
-
<div class="absolute inset-0 rounded-2xl icon-glow"></div>
|
|
58116
|
-
</div>
|
|
58117
|
-
</div>
|
|
58118
|
-
|
|
58119
|
-
<h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
|
|
58120
|
-
{{ title() }}
|
|
58121
|
-
</h2>
|
|
58122
|
-
|
|
58123
|
-
<p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
|
|
58124
|
-
{{ subtitle() }}
|
|
58125
|
-
</p>
|
|
58126
|
-
</div>
|
|
58127
|
-
|
|
58128
|
-
<!-- Progress Section -->
|
|
58129
|
-
<div class="space-y-4">
|
|
58130
|
-
<!-- Progress Message -->
|
|
58131
|
-
<div class="text-center">
|
|
58132
|
-
<p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
|
|
58133
|
-
{{ progressMessage() }}
|
|
58134
|
-
</p>
|
|
58135
|
-
</div>
|
|
58136
|
-
|
|
58137
|
-
<!-- Progress Bar Container -->
|
|
58138
|
-
<div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full overflow
|
|
58139
|
-
<!-- Background Track -->
|
|
58140
|
-
<div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
|
|
58141
|
-
|
|
58142
|
-
<!-- Solid Fill with Gradient -->
|
|
58143
|
-
<div
|
|
58144
|
-
[ngClass]="progressBarFillClasses()"
|
|
58145
|
-
[style.width.%]="progressPercentage()"
|
|
58146
|
-
class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
|
|
58147
|
-
<!-- Inner shimmer effect -->
|
|
58148
|
-
<div class="absolute inset-0 shimmer-effect"></div>
|
|
58149
|
-
</div>
|
|
58150
|
-
|
|
58151
|
-
<!-- Animated Dots Overlay (
|
|
58152
|
-
@if (progressPercentage() > 0 && progressPercentage() < 100) {
|
|
58153
|
-
<div
|
|
58154
|
-
|
|
58155
|
-
|
|
58156
|
-
|
|
58157
|
-
<div
|
|
58158
|
-
<div
|
|
58159
|
-
|
|
58160
|
-
|
|
58161
|
-
|
|
58162
|
-
|
|
58163
|
-
|
|
58164
|
-
|
|
58165
|
-
|
|
58166
|
-
|
|
58167
|
-
|
|
58168
|
-
|
|
58169
|
-
|
|
58170
|
-
|
|
58171
|
-
|
|
58172
|
-
|
|
58173
|
-
|
|
58174
|
-
|
|
58175
|
-
|
|
58176
|
-
|
|
58177
|
-
|
|
58178
|
-
|
|
58179
|
-
|
|
58180
|
-
|
|
58181
|
-
|
|
58182
|
-
|
|
58109
|
+
args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
58110
|
+
<div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
|
|
58111
|
+
<div class="max-w-3xl w-full space-y-8">
|
|
58112
|
+
<!-- Title Section -->
|
|
58113
|
+
<div class="text-center space-y-3">
|
|
58114
|
+
<div class="flex items-center justify-center mb-4">
|
|
58115
|
+
<div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
|
|
58116
|
+
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
58117
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
58118
|
+
</svg>
|
|
58119
|
+
<div class="absolute inset-0 rounded-2xl icon-glow"></div>
|
|
58120
|
+
</div>
|
|
58121
|
+
</div>
|
|
58122
|
+
|
|
58123
|
+
<h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
|
|
58124
|
+
{{ title() }}
|
|
58125
|
+
</h2>
|
|
58126
|
+
|
|
58127
|
+
<p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
|
|
58128
|
+
{{ subtitle() }}
|
|
58129
|
+
</p>
|
|
58130
|
+
</div>
|
|
58131
|
+
|
|
58132
|
+
<!-- Progress Section -->
|
|
58133
|
+
<div class="space-y-4">
|
|
58134
|
+
<!-- Progress Message -->
|
|
58135
|
+
<div class="text-center">
|
|
58136
|
+
<p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
|
|
58137
|
+
{{ progressMessage() }}
|
|
58138
|
+
</p>
|
|
58139
|
+
</div>
|
|
58140
|
+
|
|
58141
|
+
<!-- Progress Bar Container -->
|
|
58142
|
+
<div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
|
|
58143
|
+
<!-- Background Track -->
|
|
58144
|
+
<div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
|
|
58145
|
+
|
|
58146
|
+
<!-- Solid Fill with Gradient -->
|
|
58147
|
+
<div
|
|
58148
|
+
[ngClass]="progressBarFillClasses()"
|
|
58149
|
+
[style.width.%]="progressPercentage()"
|
|
58150
|
+
class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
|
|
58151
|
+
<!-- Inner shimmer effect -->
|
|
58152
|
+
<div class="absolute inset-0 shimmer-effect"></div>
|
|
58153
|
+
</div>
|
|
58154
|
+
|
|
58155
|
+
<!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
|
|
58156
|
+
@if (progressPercentage() > 0 && progressPercentage() < 100) {
|
|
58157
|
+
<div
|
|
58158
|
+
class="absolute pointer-events-none"
|
|
58159
|
+
[style.left.%]="progressPercentage()"
|
|
58160
|
+
style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
|
|
58161
|
+
<div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
|
|
58162
|
+
<div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
|
|
58163
|
+
<div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
|
|
58164
|
+
<div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
|
|
58165
|
+
<div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
|
|
58166
|
+
<div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
|
|
58167
|
+
</div>
|
|
58168
|
+
}
|
|
58169
|
+
|
|
58170
|
+
<!-- Glow effect at the progress edge -->
|
|
58171
|
+
@if (progressPercentage() > 0 && progressPercentage() < 100) {
|
|
58172
|
+
<div
|
|
58173
|
+
[ngClass]="progressGlowClasses()"
|
|
58174
|
+
[style.left.%]="progressPercentage()"
|
|
58175
|
+
class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
|
|
58176
|
+
style="margin-left: -8px;">
|
|
58177
|
+
</div>
|
|
58178
|
+
}
|
|
58179
|
+
</div>
|
|
58180
|
+
|
|
58181
|
+
<!-- Progress Percentage -->
|
|
58182
|
+
<div class="text-center">
|
|
58183
|
+
<span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
|
|
58184
|
+
{{ progressPercentage() }}% complete
|
|
58185
|
+
</span>
|
|
58186
|
+
</div>
|
|
58187
|
+
</div>
|
|
58188
|
+
</div>
|
|
58189
|
+
</div>
|
|
58190
|
+
`, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.animated-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:dots-move 6s linear infinite,dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1{animation-delay:0s,0s}.animated-dot-2{animation-delay:1s,0s}.animated-dot-3{animation-delay:2s,0s}.animated-dot-4{animation-delay:3s,0s}.animated-dot-5{animation-delay:4s,0s}.animated-dot-6{animation-delay:5s,0s}\n"] }]
|
|
58183
58191
|
}], null, { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", 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 }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
|
|
58184
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber:
|
|
58192
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 222 }); })();
|
|
58185
58193
|
|
|
58186
58194
|
class ContentGenerationProgressWithConfettiComponent {
|
|
58187
58195
|
constructor() {
|
|
@@ -58206,7 +58214,8 @@ class ContentGenerationProgressWithConfettiComponent {
|
|
|
58206
58214
|
untracked(() => {
|
|
58207
58215
|
this.confettiService.trigger({
|
|
58208
58216
|
intensity: this.confettiIntensity(),
|
|
58209
|
-
delay: this.confettiDelay()
|
|
58217
|
+
delay: this.confettiDelay(),
|
|
58218
|
+
viewMode: this.viewMode(),
|
|
58210
58219
|
});
|
|
58211
58220
|
this.hasCelebrated.set(true);
|
|
58212
58221
|
});
|