@eric-emg/symphiq-components 1.2.148 → 1.2.150
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 +78 -78
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/styles.css +3 -3
|
@@ -56445,7 +56445,7 @@ class ContentGenerationProgressComponent {
|
|
|
56445
56445
|
}, ...(ngDevMode ? [{ debugName: "percentageClasses" }] : []));
|
|
56446
56446
|
}
|
|
56447
56447
|
static { this.ɵfac = function ContentGenerationProgressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressComponent)(); }; }
|
|
56448
|
-
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: 31, vars: 21, consts: [[1, "min-h-[
|
|
56448
|
+
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: 31, vars: 21, 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-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", "inset-0", "overflow-hidden", "rounded-full"], [1, "dots-container", "h-full"], [1, "dot", "dot-1", 3, "ngClass"], [1, "dot", "dot-2", 3, "ngClass"], [1, "dot", "dot-3", 3, "ngClass"], [1, "dot", "dot-4", 3, "ngClass"], [1, "dot", "dot-5", 3, "ngClass"], [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", "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) {
|
|
56449
56449
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
|
|
56450
56450
|
i0.ɵɵnamespaceSVG();
|
|
56451
56451
|
i0.ɵɵelementStart(5, "svg", 5);
|
|
@@ -56519,83 +56519,83 @@ class ContentGenerationProgressComponent {
|
|
|
56519
56519
|
}
|
|
56520
56520
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
|
|
56521
56521
|
type: Component,
|
|
56522
|
-
args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
56523
|
-
<div [ngClass]="containerClasses()" class="min-h-[
|
|
56524
|
-
<div class="max-w-3xl w-full space-y-8">
|
|
56525
|
-
<!-- Title Section -->
|
|
56526
|
-
<div class="text-center space-y-3">
|
|
56527
|
-
<div class="flex items-center justify-center mb-4">
|
|
56528
|
-
<div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
|
|
56529
|
-
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
56530
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
56531
|
-
</svg>
|
|
56532
|
-
<div class="absolute inset-0 rounded-2xl icon-glow"></div>
|
|
56533
|
-
</div>
|
|
56534
|
-
</div>
|
|
56535
|
-
|
|
56536
|
-
<h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
|
|
56537
|
-
{{ title() }}
|
|
56538
|
-
</h2>
|
|
56539
|
-
|
|
56540
|
-
<p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
|
|
56541
|
-
{{ subtitle() }}
|
|
56542
|
-
</p>
|
|
56543
|
-
</div>
|
|
56544
|
-
|
|
56545
|
-
<!-- Progress Section -->
|
|
56546
|
-
<div class="space-y-4">
|
|
56547
|
-
<!-- Progress Message -->
|
|
56548
|
-
<div class="text-center">
|
|
56549
|
-
<p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
|
|
56550
|
-
{{ progressMessage() }}
|
|
56551
|
-
</p>
|
|
56552
|
-
</div>
|
|
56553
|
-
|
|
56554
|
-
<!-- Progress Bar Container -->
|
|
56555
|
-
<div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full overflow-visible">
|
|
56556
|
-
<!-- Background Track -->
|
|
56557
|
-
<div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
|
|
56558
|
-
|
|
56559
|
-
<!-- Solid Fill with Gradient -->
|
|
56560
|
-
<div
|
|
56561
|
-
[ngClass]="progressBarFillClasses()"
|
|
56562
|
-
[style.width.%]="progressPercentage()"
|
|
56563
|
-
class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
|
|
56564
|
-
<!-- Inner shimmer effect -->
|
|
56565
|
-
<div class="absolute inset-0 shimmer-effect"></div>
|
|
56566
|
-
</div>
|
|
56567
|
-
|
|
56568
|
-
<!-- Animated Dots Overlay (shows beyond the solid bar) -->
|
|
56569
|
-
<div class="absolute inset-0 overflow-hidden rounded-full">
|
|
56570
|
-
<div class="dots-container h-full">
|
|
56571
|
-
<div [ngClass]="dotClasses()" class="dot dot-1"></div>
|
|
56572
|
-
<div [ngClass]="dotClasses()" class="dot dot-2"></div>
|
|
56573
|
-
<div [ngClass]="dotClasses()" class="dot dot-3"></div>
|
|
56574
|
-
<div [ngClass]="dotClasses()" class="dot dot-4"></div>
|
|
56575
|
-
<div [ngClass]="dotClasses()" class="dot dot-5"></div>
|
|
56576
|
-
</div>
|
|
56577
|
-
</div>
|
|
56578
|
-
|
|
56579
|
-
<!-- Glow effect at the progress edge -->
|
|
56580
|
-
@if (progressPercentage() > 0 && progressPercentage() < 100) {
|
|
56581
|
-
<div
|
|
56582
|
-
[ngClass]="progressGlowClasses()"
|
|
56583
|
-
[style.left.%]="progressPercentage()"
|
|
56584
|
-
class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
|
|
56585
|
-
style="margin-left: -8px;">
|
|
56586
|
-
</div>
|
|
56587
|
-
}
|
|
56588
|
-
</div>
|
|
56589
|
-
|
|
56590
|
-
<!-- Progress Percentage -->
|
|
56591
|
-
<div class="text-center">
|
|
56592
|
-
<span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
|
|
56593
|
-
{{ progressPercentage() }}% complete
|
|
56594
|
-
</span>
|
|
56595
|
-
</div>
|
|
56596
|
-
</div>
|
|
56597
|
-
</div>
|
|
56598
|
-
</div>
|
|
56522
|
+
args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
56523
|
+
<div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
|
|
56524
|
+
<div class="max-w-3xl w-full space-y-8">
|
|
56525
|
+
<!-- Title Section -->
|
|
56526
|
+
<div class="text-center space-y-3">
|
|
56527
|
+
<div class="flex items-center justify-center mb-4">
|
|
56528
|
+
<div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
|
|
56529
|
+
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
56530
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
56531
|
+
</svg>
|
|
56532
|
+
<div class="absolute inset-0 rounded-2xl icon-glow"></div>
|
|
56533
|
+
</div>
|
|
56534
|
+
</div>
|
|
56535
|
+
|
|
56536
|
+
<h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
|
|
56537
|
+
{{ title() }}
|
|
56538
|
+
</h2>
|
|
56539
|
+
|
|
56540
|
+
<p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
|
|
56541
|
+
{{ subtitle() }}
|
|
56542
|
+
</p>
|
|
56543
|
+
</div>
|
|
56544
|
+
|
|
56545
|
+
<!-- Progress Section -->
|
|
56546
|
+
<div class="space-y-4">
|
|
56547
|
+
<!-- Progress Message -->
|
|
56548
|
+
<div class="text-center">
|
|
56549
|
+
<p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
|
|
56550
|
+
{{ progressMessage() }}
|
|
56551
|
+
</p>
|
|
56552
|
+
</div>
|
|
56553
|
+
|
|
56554
|
+
<!-- Progress Bar Container -->
|
|
56555
|
+
<div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full overflow-visible">
|
|
56556
|
+
<!-- Background Track -->
|
|
56557
|
+
<div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
|
|
56558
|
+
|
|
56559
|
+
<!-- Solid Fill with Gradient -->
|
|
56560
|
+
<div
|
|
56561
|
+
[ngClass]="progressBarFillClasses()"
|
|
56562
|
+
[style.width.%]="progressPercentage()"
|
|
56563
|
+
class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
|
|
56564
|
+
<!-- Inner shimmer effect -->
|
|
56565
|
+
<div class="absolute inset-0 shimmer-effect"></div>
|
|
56566
|
+
</div>
|
|
56567
|
+
|
|
56568
|
+
<!-- Animated Dots Overlay (shows beyond the solid bar) -->
|
|
56569
|
+
<div class="absolute inset-0 overflow-hidden rounded-full">
|
|
56570
|
+
<div class="dots-container h-full">
|
|
56571
|
+
<div [ngClass]="dotClasses()" class="dot dot-1"></div>
|
|
56572
|
+
<div [ngClass]="dotClasses()" class="dot dot-2"></div>
|
|
56573
|
+
<div [ngClass]="dotClasses()" class="dot dot-3"></div>
|
|
56574
|
+
<div [ngClass]="dotClasses()" class="dot dot-4"></div>
|
|
56575
|
+
<div [ngClass]="dotClasses()" class="dot dot-5"></div>
|
|
56576
|
+
</div>
|
|
56577
|
+
</div>
|
|
56578
|
+
|
|
56579
|
+
<!-- Glow effect at the progress edge -->
|
|
56580
|
+
@if (progressPercentage() > 0 && progressPercentage() < 100) {
|
|
56581
|
+
<div
|
|
56582
|
+
[ngClass]="progressGlowClasses()"
|
|
56583
|
+
[style.left.%]="progressPercentage()"
|
|
56584
|
+
class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
|
|
56585
|
+
style="margin-left: -8px;">
|
|
56586
|
+
</div>
|
|
56587
|
+
}
|
|
56588
|
+
</div>
|
|
56589
|
+
|
|
56590
|
+
<!-- Progress Percentage -->
|
|
56591
|
+
<div class="text-center">
|
|
56592
|
+
<span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
|
|
56593
|
+
{{ progressPercentage() }}% complete
|
|
56594
|
+
</span>
|
|
56595
|
+
</div>
|
|
56596
|
+
</div>
|
|
56597
|
+
</div>
|
|
56598
|
+
</div>
|
|
56599
56599
|
`, 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%{transform:translate(-20px);opacity:0}20%{opacity:1}80%{opacity:1}to{transform:translate(calc(100vw + 20px));opacity:0}}@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}.dots-container{position:relative;width:100%}.dot{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);animation:dots-move 3s linear infinite}.dot-1{animation-delay:0s}.dot-2{animation-delay:.6s}.dot-3{animation-delay:1.2s}.dot-4{animation-delay:1.8s}.dot-5{animation-delay:2.4s}@media (prefers-reduced-motion: reduce){.icon-pulse,.icon-glow,.shimmer-effect,.message-fade,.dot{animation:none}}\n"] }]
|
|
56600
56600
|
}], 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 }] }] }); })();
|
|
56601
56601
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 214 }); })();
|