carriera-intern-components 1.1.51 → 1.1.52

package/app/components/sticky-scrollbar/sticky-scrollbar.component.d.ts

@@ -12,6 +12,11 @@ export declare class StickyScrollbarComponent implements AfterViewInit, OnChange
      * Hide the scrollbar track completely
      */
     hideTrack: boolean;
+    /**
+     * Keep scrollbar fixed at bottom of viewport even when table scrolls out of view
+     * @default false
+     */
+    alwaysVisible: boolean;
     /**
      * Offset for the sticky position from the bottom (in pixels)
      * @default 0
@@ -28,65 +33,31 @@ export declare class StickyScrollbarComponent implements AfterViewInit, OnChange
     private readonly renderer;
     private readonly destroyRef;
     isDragging: boolean;
+    isContainerInView: import("@angular/core").WritableSignal<boolean>;
     private dragStartX;
     private scrollStartLeft;
     private isSettingScrollPosition;
     private currentScrollState?;
     private setPositionTimeout?;
-    private dragStart$;
-    private dragEnd$;
+    private intersectionObserver?;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    /**
-     * Applies the scroll position from input (programmatically)
-     */
     private applyScrollPosition;
-    /**
-     * Updates scrollbar thumb size and position based on content
-     */
     private updateScrollbar;
-    /**
-     * Observes container resize to update scrollbar
-     */
     private setupResizeObserver;
-    /**
-     * Updates scroll state and emits the state change event
-     */
+    private setupAlwaysVisibleTracking;
+    private updateFixedTrackPosition;
     private updateScrollState;
-    /**
-     * Calculates the scroll state based on current scroll position
-     */
     private calculateScrollState;
-    /**
-     * Handles scroll event on the container
-     */
     onScroll(): void;
-    /**
-     * Handles mouse down on scrollbar thumb
-     */
     onThumbMouseDown(event: MouseEvent): void;
-    /**
-     * Sets up drag event listeners (called once during initialization)
-     */
-    private setupDragListeners;
-    /**
-     * Handles thumb dragging
-     */
+    onWindowMouseMove(event: MouseEvent): void;
+    onWindowMouseUp(): void;
+    onWindowMouseLeave(): void;
     private onThumbDrag;
-    /**
-     * Handles mouse up to end dragging
-     */
     onThumbMouseUp(): void;
-    /**
-     * Public method to manually refresh the scrollbar
-     * Useful when content or container dimensions change programmatically
-     */
     refresh(): void;
-    /**
-     * Public method to scroll to the end of the container
-     * Useful when resizing the last element or when you want to ensure the end is visible
-     */
     scrollToEnd(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StickyScrollbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StickyScrollbarComponent, "ca-sticky-scrollbar", never, { "scrollPosition": { "alias": "scrollPosition"; "required": false; }; "hideTrack": { "alias": "hideTrack"; "required": false; }; "stickyOffset": { "alias": "stickyOffset"; "required": false; }; }, { "scrollPositionChange": "scrollPositionChange"; "scrollStateChange": "scrollStateChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StickyScrollbarComponent, "ca-sticky-scrollbar", never, { "scrollPosition": { "alias": "scrollPosition"; "required": false; }; "hideTrack": { "alias": "hideTrack"; "required": false; }; "alwaysVisible": { "alias": "alwaysVisible"; "required": false; }; "stickyOffset": { "alias": "stickyOffset"; "required": false; }; }, { "scrollPositionChange": "scrollPositionChange"; "scrollStateChange": "scrollStateChange"; }, never, ["*"], true, never>;
 }

package/fesm2022/carriera-intern-components.mjs

@@ -12,12 +12,11 @@ import { ImageCropperComponent } from 'ngx-image-cropper';
 import * as pdfjsLib from 'pdfjs-dist';
 import * as i1$1 from '@angular/platform-browser';
 import moment from 'moment';
-import { Subject, takeUntil, distinctUntilChanged as distinctUntilChanged$1, tap, filter, debounceTime, switchMap, of, catchError, fromEvent } from 'rxjs';
+import { Subject, takeUntil, distinctUntilChanged as distinctUntilChanged$1, tap, filter, debounceTime, switchMap, of, catchError } from 'rxjs';
 import { distinctUntilChanged, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
 import * as i1$3 from '@angular/cdk/clipboard';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * Creates a validator that ignores validation rules when the control is autofilled.
@@ -8832,7 +8831,6 @@ var eScrollState;
     eScrollState["NOT_NEEDED"] = "not_needed";
 })(eScrollState || (eScrollState = {}));
 
-// Angular Core
 class StickyScrollbarComponent {
     scrollContainer;
     scrollThumb;
@@ -8844,6 +8842,11 @@ class StickyScrollbarComponent {
      * Hide the scrollbar track completely
      */
     hideTrack = false;
+    /**
+     * Keep scrollbar fixed at bottom of viewport even when table scrolls out of view
+     * @default false
+     */
+    alwaysVisible = false;
     /**
      * Offset for the sticky position from the bottom (in pixels)
      * @default 0
@@ -8860,40 +8863,47 @@ class StickyScrollbarComponent {
     renderer = inject(Renderer2);
     destroyRef = inject(DestroyRef);
     isDragging = false;
+    isContainerInView = signal(true);
     dragStartX = 0;
     scrollStartLeft = 0;
     isSettingScrollPosition = false;
     currentScrollState;
     setPositionTimeout;
-    dragStart$ = new Subject();
-    dragEnd$ = new Subject();
+    intersectionObserver;
     ngOnChanges(changes) {
         if (changes['scrollPosition'] && !changes['scrollPosition'].firstChange) {
             this.applyScrollPosition();
         }
+        if (changes['alwaysVisible']?.currentValue &&
+            !changes['alwaysVisible'].firstChange) {
+            this.setupAlwaysVisibleTracking();
+        }
+        if (changes['stickyOffset'] &&
+            !changes['stickyOffset'].firstChange &&
+            this.alwaysVisible) {
+            // IntersectionObserver will handle visibility updates automatically
+            this.updateFixedTrackPosition();
+        }
     }
     ngAfterViewInit() {
         this.updateScrollbar();
         this.setupResizeObserver();
-        this.setupDragListeners();
-        // Apply initial scroll position if provided
         if (this.scrollPosition !== undefined) {
             this.applyScrollPosition();
         }
-        // Set initial scroll state to Start
         this.updateScrollState(eScrollState.START);
-        // Cleanup on destroy
+        if (this.alwaysVisible && !this.hideTrack) {
+            this.setupAlwaysVisibleTracking();
+        }
         this.destroyRef.onDestroy(() => {
             if (this.setPositionTimeout) {
                 clearTimeout(this.setPositionTimeout);
             }
-            this.dragStart$.complete();
-            this.dragEnd$.complete();
+            if (this.intersectionObserver) {
+                this.intersectionObserver.disconnect();
+            }
         });
     }
-    /**
-     * Applies the scroll position from input (programmatically)
-     */
     applyScrollPosition() {
         if (this.scrollPosition === undefined || !this.scrollContainer) {
             return;
@@ -8901,45 +8911,38 @@ class StickyScrollbarComponent {
         this.isSettingScrollPosition = true;
         this.scrollContainer.nativeElement.scrollLeft = this.scrollPosition;
         this.updateScrollbar();
-        // Calculate and emit scroll state based on new position
         const newState = this.calculateScrollState();
         this.updateScrollState(newState);
-        // Clear any existing timeout
         if (this.setPositionTimeout) {
             clearTimeout(this.setPositionTimeout);
         }
-        // Reset flag after a short delay to ensure scroll event is processed
         this.setPositionTimeout = setTimeout(() => {
             this.isSettingScrollPosition = false;
             this.setPositionTimeout = undefined;
         }, 0);
     }
-    /**
-     * Updates scrollbar thumb size and position based on content
-     */
     updateScrollbar() {
         const container = this.scrollContainer.nativeElement;
+        if (this.hideTrack) {
+            const newState = this.calculateScrollState();
+            this.updateScrollState(newState);
+            return;
+        }
         const thumb = this.scrollThumb.nativeElement;
+        const track = thumb.parentElement;
         const containerWidth = container.clientWidth;
         const contentWidth = container.scrollWidth;
         const scrollLeft = container.scrollLeft;
-        // Calculate thumb width as a ratio of visible content
         const thumbWidth = (containerWidth / contentWidth) * containerWidth;
         const thumbPosition = (scrollLeft / contentWidth) * containerWidth;
-        // Hide scrollbar if content fits within container
         const shouldShow = contentWidth > containerWidth;
-        this.renderer.setStyle(thumb.parentElement, 'opacity', shouldShow ? '1' : '0');
-        this.renderer.setStyle(thumb.parentElement, 'pointer-events', shouldShow ? 'auto' : 'none');
-        // Update thumb dimensions and position
+        this.renderer.setStyle(track, 'opacity', shouldShow ? '1' : '0');
+        this.renderer.setStyle(track, 'pointer-events', shouldShow ? 'auto' : 'none');
         this.renderer.setStyle(thumb, 'width', `${thumbWidth}px`);
         this.renderer.setStyle(thumb, 'transform', `translateX(${thumbPosition}px)`);
-        // Update scroll state after scrollbar update
         const newState = this.calculateScrollState();
         this.updateScrollState(newState);
     }
-    /**
-     * Observes container resize to update scrollbar
-     */
     setupResizeObserver() {
         const resizeObserver = new ResizeObserver(() => {
             this.updateScrollbar();
@@ -8950,129 +8953,132 @@ class StickyScrollbarComponent {
             resizeObserver.disconnect();
         });
     }
-    /**
-     * Updates scroll state and emits the state change event
-     */
+    setupAlwaysVisibleTracking() {
+        // Use IntersectionObserver for optimal performance - no layout thrashing
+        const scrollbarTotalHeight = 10;
+        const threshold = 10;
+        // Shrink viewport to detect when scrollbar area is in the "safe zone"
+        // The scrollbar appears at the bottom of the container, so we need to account for:
+        // - threshold from top and bottom edges
+        // - scrollbar height
+        // - sticky offset
+        const rootMarginTop = `-${threshold}px`;
+        const rootMarginBottom = `-${scrollbarTotalHeight + threshold + this.stickyOffset}px`;
+        const rootMargin = `${rootMarginTop} 0px ${rootMarginBottom} 0px`;
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                // When the container's bottom edge is in the "safe zone" (accounting for rootMargin),
+                // isIntersecting will be true
+                const newInViewValue = entry.isIntersecting;
+                const rect = entry.boundingClientRect;
+                this.isContainerInView.set(newInViewValue);
+                this.updateFixedTrackPosition(rect);
+            });
+        }, {
+            rootMargin: rootMargin,
+            threshold: [0.25, 0.5, 0.75, 0.9, 0.99, 1],
+        });
+        this.intersectionObserver.observe(this.scrollContainer.nativeElement);
+    }
+    updateFixedTrackPosition(rect) {
+        if (!this.alwaysVisible || this.hideTrack) {
+            return;
+        }
+        const container = this.scrollContainer.nativeElement;
+        const track = this.scrollThumb.nativeElement.parentElement;
+        if (!track) {
+            return;
+        }
+        // Only get rect if not provided (avoid duplicate getBoundingClientRect)
+        const boundingRect = rect || container.getBoundingClientRect();
+        if (this.isContainerInView()) {
+            this.renderer.removeClass(track, 'fixed-mode');
+            this.renderer.setStyle(track, 'position', 'sticky');
+            this.renderer.removeStyle(track, 'left');
+            this.renderer.removeStyle(track, 'width');
+        }
+        else {
+            this.renderer.addClass(track, 'fixed-mode');
+            this.renderer.setStyle(track, 'position', 'fixed');
+            this.renderer.setStyle(track, 'left', `${boundingRect.left}px`);
+            this.renderer.setStyle(track, 'width', `${boundingRect.width}px`);
+        }
+    }
     updateScrollState(newState) {
         if (this.currentScrollState !== newState) {
             this.currentScrollState = newState;
             this.scrollStateChange.emit(newState);
         }
     }
-    /**
-     * Calculates the scroll state based on current scroll position
-     */
     calculateScrollState() {
         const container = this.scrollContainer.nativeElement;
         const containerWidth = container.clientWidth;
         const contentWidth = container.scrollWidth;
         const scrollLeft = container.scrollLeft;
         const maxScroll = contentWidth - containerWidth;
-        // Check if scrollbar is not needed
         if (contentWidth <= containerWidth) {
             return eScrollState.NOT_NEEDED;
         }
-        // Determine scroll state based on position
         if (scrollLeft <= 1) {
-            // At the start (with small tolerance for rounding)
             return eScrollState.START;
         }
-        else if (scrollLeft >= maxScroll - 1) {
-            // At the end (with small tolerance for rounding)
+        if (scrollLeft >= maxScroll - 1) {
             return eScrollState.END;
         }
-        else {
-            // In the middle
-            return eScrollState.SCROLLING;
-        }
+        return eScrollState.SCROLLING;
     }
-    /**
-     * Handles scroll event on the container
-     */
     onScroll() {
         if (!this.isDragging) {
             this.updateScrollbar();
         }
-        // Emit scroll position only if it's user-initiated (not programmatically set)
         if (!this.isSettingScrollPosition) {
-            const container = this.scrollContainer.nativeElement;
-            const scrollLeft = container.scrollLeft;
+            const scrollLeft = this.scrollContainer.nativeElement.scrollLeft;
             this.scrollPositionChange.emit(scrollLeft);
-            // Calculate and emit scroll state based on position
             const newState = this.calculateScrollState();
             this.updateScrollState(newState);
         }
     }
-    /**
-     * Handles mouse down on scrollbar thumb
-     */
     onThumbMouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
         this.isDragging = true;
         this.dragStartX = event.clientX;
         this.scrollStartLeft = this.scrollContainer.nativeElement.scrollLeft;
-        // Emit drag start event
-        this.dragStart$.next(event);
     }
-    /**
-     * Sets up drag event listeners (called once during initialization)
-     */
-    setupDragListeners() {
-        const mouseMove$ = fromEvent(document, 'mousemove');
-        const mouseUp$ = fromEvent(document, 'mouseup');
-        // Handle mouse move - only active when dragging
-        mouseMove$
-            .pipe(filter(() => this.isDragging), takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
+    onWindowMouseMove(event) {
+        if (this.isDragging) {
             this.onThumbDrag(event);
-        });
-        // Handle mouse up - only active when dragging
-        mouseUp$
-            .pipe(filter(() => this.isDragging), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
+        }
+    }
+    onWindowMouseUp() {
+        if (this.isDragging) {
             this.onThumbMouseUp();
-            this.dragEnd$.next();
-        });
+        }
+    }
+    onWindowMouseLeave() {
+        if (this.isDragging) {
+            this.onThumbMouseUp();
+        }
     }
-    /**
-     * Handles thumb dragging
-     */
     onThumbDrag(event) {
+        event.preventDefault();
+        event.stopPropagation();
         const container = this.scrollContainer.nativeElement;
         const deltaX = event.clientX - this.dragStartX;
-        // Calculate scroll delta based on content/container ratio
         const containerWidth = container.clientWidth;
         const contentWidth = container.scrollWidth;
         const scrollDelta = (deltaX / containerWidth) * contentWidth;
-        // Update scroll position
         container.scrollLeft = this.scrollStartLeft + scrollDelta;
-        // Update scrollbar position during drag
         this.updateScrollbar();
-        // Emit the new scroll position
-        const scrollLeft = container.scrollLeft;
-        this.scrollPositionChange.emit(scrollLeft);
-        // Calculate and emit scroll state based on position
-        const newState = this.calculateScrollState();
-        this.updateScrollState(newState);
+        this.scrollPositionChange.emit(container.scrollLeft);
+        this.updateScrollState(this.calculateScrollState());
     }
-    /**
-     * Handles mouse up to end dragging
-     */
     onThumbMouseUp() {
         this.isDragging = false;
     }
-    /**
-     * Public method to manually refresh the scrollbar
-     * Useful when content or container dimensions change programmatically
-     */
     refresh() {
         this.updateScrollbar();
     }
-    /**
-     * Public method to scroll to the end of the container
-     * Useful when resizing the last element or when you want to ensure the end is visible
-     */
     scrollToEnd() {
         if (!this.scrollContainer) {
             return;
@@ -9082,27 +9088,22 @@ class StickyScrollbarComponent {
         this.isSettingScrollPosition = true;
         container.scrollLeft = maxScroll;
         this.updateScrollbar();
-        // Calculate and emit scroll state (should be END)
-        const newState = this.calculateScrollState();
-        this.updateScrollState(newState);
-        // Emit the new scroll position
+        this.updateScrollState(this.calculateScrollState());
         this.scrollPositionChange.emit(maxScroll);
-        // Clear any existing timeout
         if (this.setPositionTimeout) {
             clearTimeout(this.setPositionTimeout);
         }
-        // Reset flag after a short delay to ensure scroll event is processed
         this.setPositionTimeout = setTimeout(() => {
             this.isSettingScrollPosition = false;
             this.setPositionTimeout = undefined;
         }, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StickyScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StickyScrollbarComponent, isStandalone: true, selector: "ca-sticky-scrollbar", inputs: { scrollPosition: "scrollPosition", hideTrack: "hideTrack", stickyOffset: "stickyOffset" }, outputs: { scrollPositionChange: "scrollPositionChange", scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "scrollThumb", first: true, predicate: ["scrollThumb"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;overflow-x:hidden;height:6px;border-radius:2px;margin-top:1px;cursor:pointer;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-thumb{height:100%;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,width .1s ease-in-out;cursor:grab;min-width:30px}.sticky-scrollbar-thumb:hover{background-color:#424242b2}.sticky-scrollbar-thumb.dragging{background-color:#424242b2;cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StickyScrollbarComponent, isStandalone: true, selector: "ca-sticky-scrollbar", inputs: { scrollPosition: "scrollPosition", hideTrack: "hideTrack", alwaysVisible: "alwaysVisible", stickyOffset: "stickyOffset" }, outputs: { scrollPositionChange: "scrollPositionChange", scrollStateChange: "scrollStateChange" }, host: { listeners: { "window:mousemove": "onWindowMouseMove($event)", "window:mouseup": "onWindowMouseUp()", "window:mouseleave": "onWindowMouseLeave()" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "scrollThumb", first: true, predicate: ["scrollThumb"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (alwaysVisible && !isContainerInView()) {\n    <div class=\"sticky-scrollbar-placeholder\"></div>\n  }\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [class.always-visible]=\"alwaysVisible\"\n    [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;contain:layout style paint;will-change:scroll-position;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-placeholder{height:10px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;overflow-x:hidden;overflow-y:visible;height:10px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-thumb{position:relative;height:6px;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,width .1s ease-in-out;cursor:grab;min-width:30px;will-change:transform,width;transform:translateZ(0)}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;cursor:grab;pointer-events:auto}.sticky-scrollbar-thumb:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;cursor:grab;pointer-events:auto}.sticky-scrollbar-thumb:hover{background-color:#424242b2}.sticky-scrollbar-thumb.dragging{background-color:#424242b2;cursor:grabbing}.sticky-scrollbar-thumb.dragging:before,.sticky-scrollbar-thumb.dragging:after{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StickyScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ca-sticky-scrollbar', imports: [CommonModule], template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;overflow-x:hidden;height:6px;border-radius:2px;margin-top:1px;cursor:pointer;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-thumb{height:100%;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,width .1s ease-in-out;cursor:grab;min-width:30px}.sticky-scrollbar-thumb:hover{background-color:#424242b2}.sticky-scrollbar-thumb.dragging{background-color:#424242b2;cursor:grabbing}\n"] }]
+            args: [{ selector: 'ca-sticky-scrollbar', imports: [CommonModule], template: "<div class=\"sticky-scrollbar-wrapper\">\n  <div\n    #scrollContainer\n    class=\"sticky-scrollbar-container\"\n    (scroll)=\"onScroll()\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (alwaysVisible && !isContainerInView()) {\n    <div class=\"sticky-scrollbar-placeholder\"></div>\n  }\n  <div\n    class=\"sticky-scrollbar-track\"\n    [class.hidden]=\"hideTrack\"\n    [class.always-visible]=\"alwaysVisible\"\n    [class.fixed-mode]=\"alwaysVisible && !isContainerInView()\"\n    [style.bottom.px]=\"stickyOffset\"\n  >\n    <div\n      #scrollThumb\n      class=\"sticky-scrollbar-thumb\"\n      [class.dragging]=\"isDragging\"\n      (mousedown)=\"onThumbMouseDown($event)\"\n      (mouseup)=\"onThumbMouseUp()\"\n    ></div>\n  </div>\n</div>\n", styles: [".sticky-scrollbar-wrapper{position:relative;height:100%;width:100%;display:flex;flex-direction:column}.sticky-scrollbar-container{flex:1;width:fit-content;max-width:100%;overflow-x:auto;overflow-y:hidden;contain:layout style paint;will-change:scroll-position;-ms-overflow-style:none;scrollbar-width:none}.sticky-scrollbar-container::-webkit-scrollbar{display:none}.sticky-scrollbar-placeholder{height:10px;visibility:hidden;pointer-events:none}.sticky-scrollbar-track{position:sticky;bottom:0;width:100%;overflow-x:hidden;overflow-y:visible;height:10px;display:flex;align-items:center;border-radius:2px;margin-top:0;margin-bottom:0;transition:opacity .1s ease-in-out;z-index:10}.sticky-scrollbar-track.hidden{display:none}.sticky-scrollbar-track.always-visible{z-index:1000}.sticky-scrollbar-track.always-visible.fixed-mode{margin:0}.sticky-scrollbar-thumb{position:relative;height:6px;background-color:#aaa;border-radius:2px;transition:background-color .1s ease-in-out,width .1s ease-in-out;cursor:grab;min-width:30px;will-change:transform,width;transform:translateZ(0)}.sticky-scrollbar-thumb:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;cursor:grab;pointer-events:auto}.sticky-scrollbar-thumb:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;cursor:grab;pointer-events:auto}.sticky-scrollbar-thumb:hover{background-color:#424242b2}.sticky-scrollbar-thumb.dragging{background-color:#424242b2;cursor:grabbing}.sticky-scrollbar-thumb.dragging:before,.sticky-scrollbar-thumb.dragging:after{cursor:grabbing}\n"] }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: false }]
@@ -9113,12 +9114,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], hideTrack: [{
                 type: Input
+            }], alwaysVisible: [{
+                type: Input
             }], stickyOffset: [{
                 type: Input
             }], scrollPositionChange: [{
                 type: Output
             }], scrollStateChange: [{
                 type: Output
+            }], onWindowMouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], onWindowMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup']
+            }], onWindowMouseLeave: [{
+                type: HostListener,
+                args: ['window:mouseleave']
             }] } });
 
 class DispatchSearchFilterPipe {