@eric-emg/symphiq-components 1.2.514 → 1.2.517

package/fesm2022/symphiq-components.mjs

@@ -1973,10 +1973,10 @@ class HeaderScrollService {
             return;
         }
         const isFastScroll = absScrollDelta > 30;
-        const isWellPastThreshold = !currentState && scrollPosition > this.config.collapseThreshold * 2;
-        const fastScrollBypass = isFastScroll && isWellPastThreshold && desiredState;
-        if (fastScrollBypass) {
-            this.log('Fast scroll bypass triggered', { scrollPosition, absScrollDelta });
+        const fastCollapseBypass = isFastScroll && !currentState && scrollPosition > this.config.collapseThreshold * 2 && desiredState;
+        const fastExpandBypass = isFastScroll && currentState && scrollDelta < -30 && scrollPosition < 50 && !desiredState;
+        if (fastCollapseBypass || fastExpandBypass) {
+            this.log('Fast scroll bypass triggered', { scrollPosition, absScrollDelta, type: fastCollapseBypass ? 'collapse' : 'expand' });
             if (this.scrollTimeout) {
                 clearTimeout(this.scrollTimeout);
                 this.scrollTimeout = null;
@@ -2147,10 +2147,10 @@ class HeaderScrollService {
             return;
         }
         const isFastScroll = absScrollDelta > 30;
-        const isWellPastThreshold = !currentState && scrollTop > collapseThreshold * 2;
-        const fastScrollBypass = isFastScroll && isWellPastThreshold && desiredState;
-        if (fastScrollBypass) {
-            this.log('Fast scroll bypass triggered', { scrollTop, absScrollDelta, collapseThreshold });
+        const fastCollapseBypass = isFastScroll && !currentState && scrollTop > collapseThreshold * 2 && desiredState;
+        const fastExpandBypass = isFastScroll && currentState && scrollDelta < -30 && scrollTop < 50 && !desiredState;
+        if (fastCollapseBypass || fastExpandBypass) {
+            this.log('Fast scroll bypass triggered', { scrollTop, absScrollDelta, type: fastCollapseBypass ? 'collapse' : 'expand' });
             if (this.scrollTimeout) {
                 clearTimeout(this.scrollTimeout);
                 this.scrollTimeout = null;
@@ -68917,14 +68917,14 @@ function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1)
 } }
 function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 14);
+    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 15);
     i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 15);
+    i0.ɵɵelementStart(2, "button", 16);
     i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 16);
-    i0.ɵɵelement(4, "path", 17)(5, "path", 18);
+    i0.ɵɵelementStart(3, "svg", 17);
+    i0.ɵɵelement(4, "path", 18)(5, "path", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(6, "span");
@@ -68940,10 +68940,10 @@ function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
 } }
 function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 20);
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
     i0.ɵɵtext(2, "Generated At");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 21);
+    i0.ɵɵelementStart(3, "div", 22);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -68956,10 +68956,10 @@ function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx)
     i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
 } }
 function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 20);
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
     i0.ɵɵtext(2, "Requested by");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 21);
+    i0.ɵɵelementStart(3, "div", 22);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -68974,8 +68974,8 @@ function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx)
 } }
 function DashboardHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 19);
-    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 19);
+    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 20);
+    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -69000,7 +69000,7 @@ function DashboardHeaderComponent_Conditional_20_Conditional_3_Template(rf, ctx)
     i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
 } }
 function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "span", 5);
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 5);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_20_Conditional_3_Template, 4, 3);
@@ -69016,14 +69016,14 @@ function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1)
 } }
 function DashboardHeaderComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-button", 22);
+    i0.ɵɵelementStart(0, "symphiq-search-button", 23);
     i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_21_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "button", 23);
+    i0.ɵɵelementStart(1, "button", 24);
     i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_21_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 16);
-    i0.ɵɵelement(3, "path", 17)(4, "path", 18);
+    i0.ɵɵelementStart(2, "svg", 17);
+    i0.ɵɵelement(3, "path", 18)(4, "path", 19);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -69099,7 +69099,7 @@ class DashboardHeaderComponent {
             : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
     }
     static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
-    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: 22, vars: 26, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-6"], [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, "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-3.5"], [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) {
+    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: 22, vars: 26, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex", "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, "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-3.5"], [1, "flex", "items-center", "justify-between"], [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) {
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd();
@@ -69111,11 +69111,11 @@ class DashboardHeaderComponent {
             i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
             i0.ɵɵconditionalCreate(12, DashboardHeaderComponent_Conditional_12_Template, 3, 2, "div", 8);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 3)(16, "div", 11)(17, "h1", 5);
+            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11)(16, "div", 12)(17, "h1", 5);
             i0.ɵɵtext(18);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(19, "div", 12);
-            i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 4, 3, "div", 13);
+            i0.ɵɵelementStart(19, "div", 13);
+            i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 4, 3, "div", 14);
             i0.ɵɵconditionalCreate(21, DashboardHeaderComponent_Conditional_21_Template, 5, 3);
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
@@ -69160,13 +69160,13 @@ class DashboardHeaderComponent {
     <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : '100px'" style="transition: height 300ms ease-in-out;">
         <!-- Expanded Header (default state) -->
         <div
-          class="transition-opacity duration-300 ease-in-out"
+          class="transition-opacity duration-300 ease-in-out h-full"
           [class.opacity-0]="headerScrollService.isScrolled()"
           [class.pointer-events-none]="headerScrollService.isScrolled()"
           [class.opacity-100]="!headerScrollService.isScrolled()">
           <div
-            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div class="flex items-center justify-between">
+            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 h-full flex items-center">
+          <div class="flex items-center justify-between w-full">
             <div>
               <div class="flex items-center gap-3">
                 <h1 [ngClass]="getMainTitleClasses()">