carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/sticky-scrollbar.component.ts

@@ -1,458 +0,0 @@
-// Angular
-import { CommonModule } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  NgZone,
-  Output,
-  Renderer2,
-  signal,
-  ViewChild,
-} from '@angular/core';
-
-// Enums
-import { eScrollState } from './enums';
-import { CdkScrollable } from '@angular/cdk/scrolling';
-
-@Component({
-  selector: 'ca-sticky-scrollbar',
-  templateUrl: './sticky-scrollbar.component.html',
-  styleUrl: './sticky-scrollbar.component.scss',
-  imports: [CommonModule, CdkScrollable],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class StickyScrollbarComponent implements AfterViewInit {
-  @ViewChild('scrollContainer', { static: false })
-  scrollContainer!: ElementRef<HTMLDivElement>;
-  @ViewChild('scrollThumb', { static: false })
-  scrollThumb!: ElementRef<HTMLDivElement>;
-
-  /**
-   * Input to hide the scrollbar thumb with opacity
-   * @default false
-   */
-  @Input() hideThumb = false;
-
-  /**
-   * Hide the scrollbar track completely
-   */
-  @Input()
-  set hideTrack(value: boolean) {
-    const previousValue = this._hideTrack;
-    this._hideTrack = value;
-    if (this.isInitialized && previousValue !== value) {
-      this.reconcileAlwaysVisibleTracking();
-    }
-  }
-  get hideTrack(): boolean {
-    return this._hideTrack;
-  }
-  private _hideTrack = false;
-
-  /**
-   * Keep scrollbar fixed at bottom of viewport even when table scrolls out of view
-   * @default false
-   */
-  @Input()
-  set alwaysVisible(value: boolean) {
-    const previousValue = this._alwaysVisible;
-    this._alwaysVisible = value;
-    if (this.isInitialized && previousValue !== value) {
-      this.reconcileAlwaysVisibleTracking();
-    }
-  }
-  get alwaysVisible(): boolean {
-    return this._alwaysVisible;
-  }
-  private _alwaysVisible = false;
-
-  /**
-   * Offset for the sticky position from the bottom (in pixels)
-   * @default 0
-   */
-  @Input()
-  set stickyOffset(value: number) {
-    const previousValue = this._stickyOffset;
-    this._stickyOffset = value;
-    if (this.isInitialized && previousValue !== value && this.alwaysVisible) {
-      this.reconcileAlwaysVisibleTracking(true);
-    }
-  }
-  get stickyOffset(): number {
-    return this._stickyOffset;
-  }
-  private _stickyOffset = 0;
-
-  /**
-   * Output to emit scroll state changes (start, scrolling, end)
-   */
-  @Output() scrollStateChange = new EventEmitter<eScrollState>();
-
-  private readonly renderer = inject(Renderer2);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly ngZone = inject(NgZone);
-  private readonly cdr = inject(ChangeDetectorRef);
-
-  isDragging = false;
-  isContainerInView = signal(true);
-
-  private dragStartX = 0;
-  private scrollStartLeft = 0;
-  private currentScrollState?: eScrollState;
-  private intersectionObserver?: IntersectionObserver;
-  private removeMouseMoveListener?: () => void;
-  private removeMouseUpListener?: () => void;
-  private removeMouseLeaveListener?: () => void;
-  private removeScrollListener?: () => void;
-  private isInitialized = false;
-  private lastTrackVisible?: boolean;
-  private lastThumbWidth = -1;
-  private lastThumbPosition = -1;
-
-  ngAfterViewInit(): void {
-    this.updateScrollbar();
-    this.setupResizeObserver();
-    this.setupGlobalMouseListeners();
-    this.setupScrollListener();
-
-    this.updateScrollState(eScrollState.START);
-
-    this.isInitialized = true;
-    this.reconcileAlwaysVisibleTracking(true);
-
-    this.destroyRef.onDestroy(() => {
-      if (this.intersectionObserver) {
-        this.intersectionObserver.disconnect();
-      }
-      this.removeMouseMoveListener?.();
-      this.removeMouseUpListener?.();
-      this.removeMouseLeaveListener?.();
-      this.removeScrollListener?.();
-    });
-  }
-
-  private setupScrollListener(): void {
-    // Run scroll handler outside Angular zone to prevent change detection
-    this.ngZone.runOutsideAngular(() => {
-      const container = this.scrollContainer.nativeElement;
-
-      const onScroll = () => this.handleScroll();
-
-      container.addEventListener('scroll', onScroll, { passive: true });
-      this.removeScrollListener = () =>
-        container.removeEventListener('scroll', onScroll);
-    });
-  }
-
-  private handleScroll(): void {
-    if (!this.isDragging) {
-      this.updateScrollbar();
-    }
-  }
-
-  private setupGlobalMouseListeners(): void {
-    // Run outside Angular zone to prevent change detection on every mousemove
-    this.ngZone.runOutsideAngular(() => {
-      const onMouseMove = (event: MouseEvent) => {
-        if (this.isDragging) {
-          this.onThumbDrag(event);
-        }
-      };
-
-      const onMouseUp = () => {
-        if (this.isDragging) {
-          this.onThumbMouseUp();
-        }
-      };
-
-      const onMouseLeave = () => {
-        if (this.isDragging) {
-          this.onThumbMouseUp();
-        }
-      };
-
-      window.addEventListener('mousemove', onMouseMove, { passive: true });
-      window.addEventListener('mouseup', onMouseUp);
-      window.addEventListener('mouseleave', onMouseLeave);
-
-      this.removeMouseMoveListener = () =>
-        window.removeEventListener('mousemove', onMouseMove);
-      this.removeMouseUpListener = () =>
-        window.removeEventListener('mouseup', onMouseUp);
-      this.removeMouseLeaveListener = () =>
-        window.removeEventListener('mouseleave', onMouseLeave);
-    });
-  }
-
-  private teardownAlwaysVisibleTracking(): void {
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = undefined;
-    }
-    this.isContainerInView.set(true);
-
-    if (!this.scrollContainer?.nativeElement) {
-      return;
-    }
-    const track = this.scrollThumb?.nativeElement?.parentElement;
-    if (track) {
-      this.renderer.removeClass(track, 'fixed-mode');
-      this.renderer.setStyle(track, 'position', 'sticky');
-      this.renderer.removeStyle(track, 'left');
-      this.renderer.removeStyle(track, 'width');
-    }
-  }
-
-  private reconcileAlwaysVisibleTracking(forceRecreateObserver = false): void {
-    if (!this.scrollContainer?.nativeElement) {
-      return;
-    }
-
-    const shouldTrack = this.alwaysVisible && !this.hideTrack;
-    const hasObserver = !!this.intersectionObserver;
-
-    if (!shouldTrack) {
-      this.teardownAlwaysVisibleTracking();
-      this.updateScrollbar();
-      this.cdr.markForCheck();
-      return;
-    }
-
-    if (hasObserver && forceRecreateObserver) {
-      this.teardownAlwaysVisibleTracking();
-    }
-
-    if (!this.intersectionObserver) {
-      this.setupAlwaysVisibleTracking();
-    }
-
-    this.updateFixedTrackPosition();
-    this.updateScrollbar();
-    this.cdr.markForCheck();
-  }
-
-  private updateScrollbar(): void {
-    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;
-
-    if (!track) {
-      return;
-    }
-
-    const containerWidth = container.clientWidth;
-    const contentWidth = container.scrollWidth;
-    const scrollLeft = container.scrollLeft;
-
-    const thumbWidth = (containerWidth / contentWidth) * containerWidth;
-    const maxScroll = Math.max(contentWidth - containerWidth, 1);
-    const maxThumbTravel = containerWidth - thumbWidth;
-    const thumbPosition = (scrollLeft / maxScroll) * maxThumbTravel;
-
-    const shouldShow = contentWidth > containerWidth;
-    if (this.lastTrackVisible !== shouldShow) {
-      this.lastTrackVisible = shouldShow;
-      this.renderer.setStyle(track, 'opacity', shouldShow ? '1' : '0');
-      this.renderer.setStyle(
-        track,
-        'pointer-events',
-        shouldShow ? 'auto' : 'none',
-      );
-    }
-
-    if (Math.abs(this.lastThumbWidth - thumbWidth) > 0.5) {
-      this.lastThumbWidth = thumbWidth;
-      this.renderer.setStyle(thumb, 'width', `${thumbWidth}px`);
-    }
-
-    if (Math.abs(this.lastThumbPosition - thumbPosition) > 0.5) {
-      this.lastThumbPosition = thumbPosition;
-      this.renderer.setStyle(
-        thumb,
-        'transform',
-        `translateX(${thumbPosition}px)`,
-      );
-    }
-
-    const newState = this.calculateScrollState();
-    this.updateScrollState(newState);
-  }
-
-  private setupResizeObserver(): void {
-    // Run ResizeObserver outside Angular zone
-    this.ngZone.runOutsideAngular(() => {
-      const resizeObserver = new ResizeObserver(() => {
-        this.updateScrollbar();
-      });
-
-      resizeObserver.observe(this.scrollContainer.nativeElement);
-      resizeObserver.observe(
-        this.scrollContainer.nativeElement.firstElementChild as Element,
-      );
-
-      this.destroyRef.onDestroy(() => {
-        resizeObserver.disconnect();
-      });
-    });
-  }
-
-  private setupAlwaysVisibleTracking(): void {
-    // 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);
-  }
-
-  private updateFixedTrackPosition(rect?: DOMRect): void {
-    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`);
-    }
-  }
-
-  private updateScrollState(newState: eScrollState): void {
-    if (this.currentScrollState !== newState) {
-      this.currentScrollState = newState;
-      this.scrollStateChange.emit(newState);
-    }
-  }
-
-  private calculateScrollState(): eScrollState {
-    const container = this.scrollContainer.nativeElement;
-    const containerWidth = container.clientWidth;
-    const contentWidth = container.scrollWidth;
-    const scrollLeft = container.scrollLeft;
-    const maxScroll = contentWidth - containerWidth;
-
-    if (contentWidth <= containerWidth) {
-      return eScrollState.NOT_NEEDED;
-    }
-
-    if (scrollLeft <= 1) {
-      return eScrollState.START;
-    }
-
-    if (scrollLeft >= maxScroll - 1) {
-      return eScrollState.END;
-    }
-
-    return eScrollState.SCROLLING;
-  }
-
-  onThumbMouseDown(event: MouseEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.isDragging = true;
-    this.dragStartX = event.clientX;
-    this.scrollStartLeft = this.scrollContainer.nativeElement.scrollLeft;
-  }
-
-  private onThumbDrag(event: MouseEvent): void {
-    const container = this.scrollContainer.nativeElement;
-    const deltaX = event.clientX - this.dragStartX;
-
-    const containerWidth = container.clientWidth;
-    const contentWidth = container.scrollWidth;
-    const scrollDelta = (deltaX / containerWidth) * contentWidth;
-
-    container.scrollLeft = this.scrollStartLeft + scrollDelta;
-    this.updateScrollbar();
-
-    this.updateScrollState(this.calculateScrollState());
-  }
-
-  public onThumbMouseUp(): void {
-    this.isDragging = false;
-    // Re-enter zone and trigger change detection for template binding [class.dragging]
-    this.ngZone.run(() => this.cdr.markForCheck());
-  }
-
-  refresh(): void {
-    // Use requestAnimationFrame to ensure browser has completed layout
-    // before reading dimensions and updating thumb position
-    requestAnimationFrame(() => {
-      this.updateScrollbar();
-      if (this.alwaysVisible) {
-        this.updateFixedTrackPosition();
-      }
-    });
-  }
-
-  scrollToEnd(): void {
-    if (!this.scrollContainer) {
-      return;
-    }
-
-    const container = this.scrollContainer.nativeElement;
-    const maxScroll = container.scrollWidth - container.clientWidth;
-
-    container.scrollLeft = maxScroll;
-    this.updateScrollbar();
-
-    this.updateScrollState(this.calculateScrollState());
-  }
-}