@eric-emg/symphiq-components 1.2.504 → 1.2.505
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 +22 -12
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +43 -40
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/styles.css +2 -2
|
@@ -1906,15 +1906,18 @@ class MetricFormatterService {
|
|
|
1906
1906
|
|
|
1907
1907
|
class HeaderScrollService {
|
|
1908
1908
|
constructor() {
|
|
1909
|
-
this.DEFAULT_COLLAPSE_THRESHOLD =
|
|
1910
|
-
this.DEFAULT_EXPAND_THRESHOLD =
|
|
1911
|
-
this.DEFAULT_STATE_CHANGE_COOLDOWN =
|
|
1912
|
-
this.DEFAULT_DEBOUNCE_DELAY =
|
|
1909
|
+
this.DEFAULT_COLLAPSE_THRESHOLD = 150;
|
|
1910
|
+
this.DEFAULT_EXPAND_THRESHOLD = 10;
|
|
1911
|
+
this.DEFAULT_STATE_CHANGE_COOLDOWN = 300;
|
|
1912
|
+
this.DEFAULT_DEBOUNCE_DELAY = 150;
|
|
1913
1913
|
this.isScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isScrolled" }] : []));
|
|
1914
1914
|
this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
|
|
1915
1915
|
this.scrollTimeout = null;
|
|
1916
1916
|
this.lastStateChangeTime = 0;
|
|
1917
1917
|
this.isProgrammaticScroll = false;
|
|
1918
|
+
this.lastScrollPosition = 0;
|
|
1919
|
+
this.scrollStabilityCount = 0;
|
|
1920
|
+
this.STABILITY_THRESHOLD = 3;
|
|
1918
1921
|
this.config = {
|
|
1919
1922
|
collapseThreshold: this.DEFAULT_COLLAPSE_THRESHOLD,
|
|
1920
1923
|
expandThreshold: this.DEFAULT_EXPAND_THRESHOLD,
|
|
@@ -1957,7 +1960,15 @@ class HeaderScrollService {
|
|
|
1957
1960
|
else if (currentState && scrollPosition < this.config.expandThreshold) {
|
|
1958
1961
|
newState = false;
|
|
1959
1962
|
}
|
|
1960
|
-
|
|
1963
|
+
const scrollDelta = Math.abs(scrollPosition - this.lastScrollPosition);
|
|
1964
|
+
this.lastScrollPosition = scrollPosition;
|
|
1965
|
+
if (scrollDelta < 5) {
|
|
1966
|
+
this.scrollStabilityCount++;
|
|
1967
|
+
}
|
|
1968
|
+
else {
|
|
1969
|
+
this.scrollStabilityCount = 0;
|
|
1970
|
+
}
|
|
1971
|
+
if (currentState !== newState && this.scrollStabilityCount >= this.STABILITY_THRESHOLD) {
|
|
1961
1972
|
this.scrollTimeout = setTimeout(() => {
|
|
1962
1973
|
const finalPosition = window.scrollY;
|
|
1963
1974
|
const finalCurrentState = this.isScrolled();
|
|
@@ -1971,6 +1982,7 @@ class HeaderScrollService {
|
|
|
1971
1982
|
if (this.isScrolled() !== finalState) {
|
|
1972
1983
|
this.isScrolled.set(finalState);
|
|
1973
1984
|
this.lastStateChangeTime = Date.now();
|
|
1985
|
+
this.scrollStabilityCount = 0;
|
|
1974
1986
|
}
|
|
1975
1987
|
}, this.config.debounceDelay);
|
|
1976
1988
|
}
|
|
@@ -24633,7 +24645,7 @@ class JourneyProgressIndicatorComponent {
|
|
|
24633
24645
|
return idx >= Math.floor(this.steps().length / 2);
|
|
24634
24646
|
}
|
|
24635
24647
|
static { this.ɵfac = function JourneyProgressIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JourneyProgressIndicatorComponent)(); }; }
|
|
24636
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[
|
|
24648
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[52px]", "z-40", "border-b", "pt-8", "pb-6", "px-6", "transition-all", "duration-200", "overflow-visible", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "overflow-visible"], [1, "hidden", "lg:flex", "items-start", "justify-between", "overflow-visible"], [1, "flex-1", "flex", "items-start", "justify-start", "overflow-visible"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "lg:hidden"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1", "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "min-w-[2.5rem]", "min-h-[2.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "w-3", "h-3", "min-w-[0.75rem]", "min-h-[0.75rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "flex-1", "text-left"], [1, "flex", "items-center", "gap-1.5", "relative", 3, "mouseenter", "mouseleave", "click"], [1, "text-xs", "cursor-pointer", 3, "ngClass"], [1, "p-0.5", "rounded-full", "cursor-pointer", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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, "absolute", "top-full", "left-0", "mt-2", "w-80", "max-w-[calc(100vw-2rem)]", "p-4", "rounded-lg", "shadow-xl", "z-50", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "flex", "flex-col", "items-center", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave", "click"], [1, "w-8", "h-8", "min-w-[2rem]", "min-h-[2rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", "step-circle", "relative", "z-10", "mb-1.5", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "w-2.5", "h-2.5", "min-w-[0.625rem]", "min-h-[0.625rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "text-[10px]", "text-center", "leading-tight", "whitespace-nowrap", "max-w-[64px]", "overflow-hidden", "text-ellipsis", 3, "ngClass"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass", "expanded-card-right", "expanded-card-left", "top", "left", "right"], [1, "flex-1", "h-0.5", "transition-all", "duration-200", "mt-[16px]", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass"], [1, "flex", "items-start", "px-4", "py-3", "expanded-content"], [1, "flex", "items-start", "gap-2", "w-full"], [1, "text-xs", "font-bold", "flex-shrink-0", "mt-0.5", 3, "ngClass"], [1, "flex", "flex-col", "gap-1", "flex-1"], [1, "text-sm", "font-bold", "leading-tight", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "description-fade", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-6", "h-6", "min-w-[1.5rem]", "min-h-[1.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-1.5", "h-1.5", "min-w-[0.375rem]", "min-h-[0.375rem]", "rounded-full", 3, "ngClass"], [1, "text-[10px]", "font-bold", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "text-[10px]", "mt-0.5", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "animate-spin"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function JourneyProgressIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
|
|
24637
24649
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
|
|
24638
24650
|
i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 10, null, null, _forTrack0$R);
|
|
24639
24651
|
i0.ɵɵelementEnd();
|
|
@@ -24689,7 +24701,7 @@ class JourneyProgressIndicatorComponent {
|
|
|
24689
24701
|
type: Component,
|
|
24690
24702
|
args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
24691
24703
|
<!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
|
|
24692
|
-
<div [ngClass]="containerClasses()" class="sticky top-[
|
|
24704
|
+
<div [ngClass]="containerClasses()" class="sticky top-[52px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
|
|
24693
24705
|
<div class="max-w-7xl mx-auto overflow-visible">
|
|
24694
24706
|
<!-- Desktop/Tablet Horizontal Layout (lg and up) -->
|
|
24695
24707
|
<div class="hidden lg:flex items-start justify-between overflow-visible">
|
|
@@ -68852,7 +68864,7 @@ class DashboardHeaderComponent {
|
|
|
68852
68864
|
: 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
|
|
68853
68865
|
}
|
|
68854
68866
|
static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
|
|
68855
|
-
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"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 23, vars:
|
|
68867
|
+
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"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 23, vars: 24, consts: [[1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "relative", 2, "height", "52px"], [1, "absolute", "inset-x-0", "top-0", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode"], ["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", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [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) {
|
|
68856
68868
|
i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "div")(6, "div", 5)(7, "h1", 6);
|
|
68857
68869
|
i0.ɵɵtext(8);
|
|
68858
68870
|
i0.ɵɵelementEnd();
|
|
@@ -68873,9 +68885,7 @@ class DashboardHeaderComponent {
|
|
|
68873
68885
|
i0.ɵɵelementEnd()()()()()();
|
|
68874
68886
|
} if (rf & 2) {
|
|
68875
68887
|
i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
|
|
68876
|
-
i0.ɵɵadvance();
|
|
68877
|
-
i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : "116px");
|
|
68878
|
-
i0.ɵɵadvance();
|
|
68888
|
+
i0.ɵɵadvance(2);
|
|
68879
68889
|
i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
|
|
68880
68890
|
i0.ɵɵadvance(5);
|
|
68881
68891
|
i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
|
|
@@ -68912,7 +68922,7 @@ class DashboardHeaderComponent {
|
|
|
68912
68922
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
68913
68923
|
template: `
|
|
68914
68924
|
<header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
|
|
68915
|
-
<div class="relative"
|
|
68925
|
+
<div class="relative" style="height: 52px;">
|
|
68916
68926
|
<!-- Expanded Header (default state) -->
|
|
68917
68927
|
<div
|
|
68918
68928
|
class="absolute inset-x-0 top-0 transition-opacity duration-300 ease-in-out"
|