@eric-emg/symphiq-components 1.3.24 → 1.3.26

package/fesm2022/symphiq-components.mjs

@@ -46371,8 +46371,8 @@ class BusinessAnalysisModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BusinessAnalysisModalComponent, { className: "BusinessAnalysisModalComponent", filePath: "lib/components/business-analysis-dashboard/business-analysis-modal.component.ts", lineNumber: 167 }); })();
 
-function ContentGenerationProgressComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
+function ContentGenerationProgressComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -46391,9 +46391,9 @@ function ContentGenerationProgressComponent_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(8, "div", 7);
-    i0.ɵɵelement(9, "div", 8);
+    i0.ɵɵelement(9, "div", 8)(10, "div", 9);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, ContentGenerationProgressComponent_Conditional_0_Conditional_10_Template, 2, 2, "div", 9);
+    i0.ɵɵconditionalCreate(11, ContentGenerationProgressComponent_Conditional_0_Conditional_11_Template, 2, 2, "div", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -46409,13 +46409,16 @@ function ContentGenerationProgressComponent_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "bg-slate-200" : "bg-slate-700");
     i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r0.progressPercentage(), "%")("--sweep-end", (ctx_r0.progressPercentage() > 0 ? 100 / ctx_r0.progressPercentage() * 100 : 100) + "%");
+    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "bg-blue-400/30" : "bg-blue-400/25");
+    i0.ɵɵadvance();
     i0.ɵɵstyleProp("width", ctx_r0.progressPercentage(), "%");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.compactTitle() ? 10 : -1);
+    i0.ɵɵconditional(ctx_r0.compactTitle() ? 11 : -1);
 } }
 function ContentGenerationProgressComponent_Conditional_1_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "div", 30)(2, "div", 31)(3, "div", 32)(4, "div", 33)(5, "div", 34)(6, "div", 35);
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵelement(1, "div", 31)(2, "div", 32)(3, "div", 33)(4, "div", 34)(5, "div", 35)(6, "div", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -46434,39 +46437,39 @@ function ContentGenerationProgressComponent_Conditional_1_Conditional_20_Templat
     i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
 } }
 function ContentGenerationProgressComponent_Conditional_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 36);
+    i0.ɵɵelement(0, "div", 37);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
     i0.ɵɵproperty("ngClass", ctx_r0.progressGlowClasses());
 } }
 function ContentGenerationProgressComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 10)(2, "div", 11)(3, "div", 12)(4, "div", 13);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 11)(2, "div", 12)(3, "div", 13)(4, "div", 14);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 14);
-    i0.ɵɵelement(6, "path", 15);
+    i0.ɵɵelementStart(5, "svg", 15);
+    i0.ɵɵelement(6, "path", 16);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(7, "div", 16);
+    i0.ɵɵelement(7, "div", 17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "h2", 17);
+    i0.ɵɵelementStart(8, "h2", 18);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 18);
+    i0.ɵɵelementStart(10, "p", 19);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 19)(13, "div", 20)(14, "p", 21);
+    i0.ɵɵelementStart(12, "div", 20)(13, "div", 21)(14, "p", 22);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 22);
-    i0.ɵɵelement(17, "div", 23);
-    i0.ɵɵelementStart(18, "div", 24);
-    i0.ɵɵelement(19, "div", 25);
+    i0.ɵɵelementStart(16, "div", 23);
+    i0.ɵɵelement(17, "div", 24);
+    i0.ɵɵelementStart(18, "div", 25);
+    i0.ɵɵelement(19, "div", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_1_Conditional_20_Template, 7, 14, "div", 26);
-    i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_1_Conditional_21_Template, 1, 3, "div", 27);
+    i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_1_Conditional_20_Template, 7, 14, "div", 27);
+    i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_1_Conditional_21_Template, 1, 3, "div", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 20)(23, "span", 28);
+    i0.ɵɵelementStart(22, "div", 21)(23, "span", 29);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -46582,115 +46585,121 @@ class ContentGenerationProgressComponent {
         }, ...(ngDevMode ? [{ debugName: "percentageClasses" }] : []));
     }
     static { this.ɵfac = function ContentGenerationProgressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressComponent)(); }; }
-    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"], compact: [1, "compact"], compactTitle: [1, "compactTitle"] }, decls: 2, vars: 1, consts: [[1, "w-full", "rounded-lg", "p-3", 3, "ngClass"], [1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "gap-3", "mb-2"], [1, "flex", "items-center", "gap-2", "min-w-0"], [1, "animate-spin", "w-3.5", "h-3.5", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "flex-shrink-0"], [1, "text-xs", "font-semibold", "truncate", 3, "ngClass"], [1, "text-xs", "font-medium", "tabular-nums", "flex-shrink-0", 3, "ngClass"], [1, "w-full", "h-1.5", "rounded-full", "relative", 3, "ngClass"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "mt-1.5", "text-xs", "truncate", 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) {
-            i0.ɵɵconditionalCreate(0, ContentGenerationProgressComponent_Conditional_0_Template, 11, 9, "div", 0)(1, ContentGenerationProgressComponent_Conditional_1_Template, 25, 17, "div", 1);
+    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"], compact: [1, "compact"], compactTitle: [1, "compactTitle"] }, decls: 2, vars: 1, consts: [[1, "w-full", "rounded-lg", "p-3", 3, "ngClass"], [1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "gap-3", "mb-2"], [1, "flex", "items-center", "gap-2", "min-w-0"], [1, "animate-spin", "w-3.5", "h-3.5", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "flex-shrink-0"], [1, "text-xs", "font-semibold", "truncate", 3, "ngClass"], [1, "text-xs", "font-medium", "tabular-nums", "flex-shrink-0", 3, "ngClass"], [1, "w-full", "h-1.5", "rounded-full", "relative", "overflow-hidden", 3, "ngClass"], [1, "absolute", "inset-y-0", "rounded-full", "animate-sweep-across", 3, "ngClass"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "mt-1.5", "text-xs", "truncate", 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) {
+            i0.ɵɵconditionalCreate(0, ContentGenerationProgressComponent_Conditional_0_Template, 12, 14, "div", 0)(1, ContentGenerationProgressComponent_Conditional_1_Template, 25, 17, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.compact() ? 0 : 1);
-        } }, 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 }); }
+        } }, 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}@keyframes _ngcontent-%COMP%_sweep-across{0%{transform:translate(-100%)}to{transform:translate(var(--sweep-end))}}.animate-sweep-across[_ngcontent-%COMP%]{left:0;animation:_ngcontent-%COMP%_sweep-across 2s ease-in-out infinite}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (compact()) {
-      <div class="w-full rounded-lg p-3" [ngClass]="isLightMode() ? 'bg-slate-100/80' : 'bg-slate-800/50'">
-        <div class="flex items-center justify-between gap-3 mb-2">
-          <div class="flex items-center gap-2 min-w-0">
-            <div class="animate-spin w-3.5 h-3.5 border-2 border-blue-500/30 border-t-blue-500 rounded-full flex-shrink-0"></div>
-            <span class="text-xs font-semibold truncate" [ngClass]="isLightMode() ? 'text-slate-700' : 'text-slate-300'">
-              {{ compactTitle() || progressMessage() }}
-            </span>
-          </div>
-          <span class="text-xs font-medium tabular-nums flex-shrink-0" [ngClass]="isLightMode() ? 'text-blue-600' : 'text-blue-400'">
-            {{ progressPercentage() }}%
-          </span>
-        </div>
-        <div class="w-full h-1.5 rounded-full relative" [ngClass]="isLightMode() ? 'bg-slate-200' : 'bg-slate-700'">
-          <div
-            class="h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all duration-500"
-            [style.width.%]="progressPercentage()">
-          </div>
-        </div>
-        @if (compactTitle()) {
-          <div class="mt-1.5 text-xs truncate" [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-400'">
-            {{ progressMessage() }}
-          </div>
-        }
-      </div>
-    } @else {
-      <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
-        <div class="max-w-3xl w-full space-y-8">
-          <div class="text-center space-y-3">
-            <div class="flex items-center justify-center mb-4">
-              <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
-                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                </svg>
-                <div class="absolute inset-0 rounded-2xl icon-glow"></div>
-              </div>
-            </div>
-
-            <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
-              {{ title() }}
-            </h2>
-
-            <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
-              {{ subtitle() }}
-            </p>
-          </div>
-
-          <div class="space-y-4">
-            <div class="text-center">
-              <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
-                {{ progressMessage() }}
-              </p>
-            </div>
-
-            <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
-              <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
-
-              <div
-                [ngClass]="progressBarFillClasses()"
-                [style.width.%]="progressPercentage()"
-                class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
-                <div class="absolute inset-0 shimmer-effect"></div>
-              </div>
-
-              @if (progressPercentage() > 0 && progressPercentage() < 100) {
-                <div
-                  class="absolute pointer-events-none"
-                  [style.left.%]="progressPercentage()"
-                  style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
-                  <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
-                  <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
-                  <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
-                  <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
-                  <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
-                  <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
-                </div>
-              }
-
-              @if (progressPercentage() > 0 && progressPercentage() < 100) {
-                <div
-                  [ngClass]="progressGlowClasses()"
-                  [style.left.%]="progressPercentage()"
-                  class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
-                  style="margin-left: -8px;">
-                </div>
-              }
-            </div>
-
-            <div class="text-center">
-              <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
-                {{ progressPercentage() }}% complete
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    }
-  `, 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"] }]
+        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (compact()) {
+      <div class="w-full rounded-lg p-3" [ngClass]="isLightMode() ? 'bg-slate-100/80' : 'bg-slate-800/50'">
+        <div class="flex items-center justify-between gap-3 mb-2">
+          <div class="flex items-center gap-2 min-w-0">
+            <div class="animate-spin w-3.5 h-3.5 border-2 border-blue-500/30 border-t-blue-500 rounded-full flex-shrink-0"></div>
+            <span class="text-xs font-semibold truncate" [ngClass]="isLightMode() ? 'text-slate-700' : 'text-slate-300'">
+              {{ compactTitle() || progressMessage() }}
+            </span>
+          </div>
+          <span class="text-xs font-medium tabular-nums flex-shrink-0" [ngClass]="isLightMode() ? 'text-blue-600' : 'text-blue-400'">
+            {{ progressPercentage() }}%
+          </span>
+        </div>
+        <div class="w-full h-1.5 rounded-full relative overflow-hidden" [ngClass]="isLightMode() ? 'bg-slate-200' : 'bg-slate-700'">
+          <div
+            class="absolute inset-y-0 rounded-full animate-sweep-across"
+            [ngClass]="isLightMode() ? 'bg-blue-400/30' : 'bg-blue-400/25'"
+            [style.width.%]="progressPercentage()"
+            [style.--sweep-end]="(progressPercentage() > 0 ? (100 / progressPercentage() * 100) : 100) + '%'">
+          </div>
+          <div
+            class="h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all duration-500"
+            [style.width.%]="progressPercentage()">
+          </div>
+        </div>
+        @if (compactTitle()) {
+          <div class="mt-1.5 text-xs truncate" [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-400'">
+            {{ progressMessage() }}
+          </div>
+        }
+      </div>
+    } @else {
+      <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
+        <div class="max-w-3xl w-full space-y-8">
+          <div class="text-center space-y-3">
+            <div class="flex items-center justify-center mb-4">
+              <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
+                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                </svg>
+                <div class="absolute inset-0 rounded-2xl icon-glow"></div>
+              </div>
+            </div>
+
+            <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
+              {{ title() }}
+            </h2>
+
+            <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
+              {{ subtitle() }}
+            </p>
+          </div>
+
+          <div class="space-y-4">
+            <div class="text-center">
+              <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
+                {{ progressMessage() }}
+              </p>
+            </div>
+
+            <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
+              <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
+
+              <div
+                [ngClass]="progressBarFillClasses()"
+                [style.width.%]="progressPercentage()"
+                class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
+                <div class="absolute inset-0 shimmer-effect"></div>
+              </div>
+
+              @if (progressPercentage() > 0 && progressPercentage() < 100) {
+                <div
+                  class="absolute pointer-events-none"
+                  [style.left.%]="progressPercentage()"
+                  style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
+                  <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
+                  <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
+                  <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
+                  <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
+                  <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
+                  <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
+                </div>
+              }
+
+              @if (progressPercentage() > 0 && progressPercentage() < 100) {
+                <div
+                  [ngClass]="progressGlowClasses()"
+                  [style.left.%]="progressPercentage()"
+                  class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
+                  style="margin-left: -8px;">
+                </div>
+              }
+            </div>
+
+            <div class="text-center">
+              <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
+                {{ progressPercentage() }}% complete
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `, 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}@keyframes sweep-across{0%{transform:translate(-100%)}to{transform:translate(var(--sweep-end))}}.animate-sweep-across{left:0;animation:sweep-across 2s ease-in-out infinite}\n"] }]
     }], 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 }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], compactTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactTitle", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 239 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 255 }); })();
 
 class ContentGenerationProgressWithConfettiComponent {
     constructor() {