@omnedia/ngx-scrollbar/fesm2022/omnedia-ngx-scrollbar.mjs.map

A simple component library to create a custom scrollbar for the Y-Direction.

{"version":3,"file":"omnedia-ngx-scrollbar.mjs","sources":["../../../projects/ngx-scrollbar/src/lib/ngx-scrollbar.component.ts","../../../projects/ngx-scrollbar/src/lib/ngx-scrollbar.component.html","../../../projects/ngx-scrollbar/src/public-api.ts","../../../projects/ngx-scrollbar/src/omnedia-ngx-scrollbar.ts"],"sourcesContent":["import {CommonModule} from '@angular/common';\r\nimport {\r\n  AfterViewInit,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  HostListener,\r\n  Input,\r\n  signal,\r\n  ViewChild\r\n} from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'om-scrollbar',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: \"./ngx-scrollbar.component.html\",\r\n  styleUrl: \"./ngx-scrollbar.component.scss\",\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgxScrollbarComponent implements AfterViewInit {\r\n  @ViewChild('OmScrollbarContainer') sidebarRef!: ElementRef<HTMLElement>;\r\n  @ViewChild('OmScrollbarWrapper') wrapperRef!: ElementRef<HTMLElement>;\r\n  @ViewChild('OmScrollbarContent') contentRef!: ElementRef<HTMLElement>;\r\n  @ViewChild('OmScrollbar') scrollbarRef!: ElementRef<HTMLElement>;\r\n\r\n  @Input('styleClass')\r\n  styleClass?: string;\r\n\r\n  @Input('onlyShowOnHover')\r\n  set onlyShowOnHover(onlyShowOnHover: boolean) {\r\n    this.style['--om-scrollbar-hover-display'] = onlyShowOnHover ? 'none' : 'block';\r\n  }\r\n\r\n  style: any = {};\r\n\r\n  private scrollPercent = 0;\r\n  mouseDown = signal(false);\r\n  private lastY?: number;\r\n\r\n  @HostListener('mousedown', ['$event'])\r\n  onMouseDown(event: MouseEvent) {\r\n    const target = event.target as HTMLElement;\r\n\r\n    if (target.classList.contains('om-scrollbar-bar')) {\r\n      event.preventDefault();\r\n      this.mouseDown.set(true);\r\n    }\r\n  }\r\n\r\n  @HostListener('mouseup')\r\n  onMouseUp() {\r\n    this.lastY = undefined;\r\n    this.mouseDown.set(false);\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    window.addEventListener('mouseup', () => {\r\n      this.lastY = undefined;\r\n      this.mouseDown.set(false);\r\n    });\r\n    window.addEventListener('mousemove', (event) => this.onDrag(event));\r\n\r\n    this.calcScrollbar();\r\n  }\r\n\r\n  calcScrollbar(): void {\r\n    const sideBarHeight = this.sidebarRef.nativeElement.clientHeight;\r\n    const contentHeight = this.contentRef.nativeElement.clientHeight;\r\n    const scrollBarHeight = Math.floor(sideBarHeight / contentHeight * 100);\r\n\r\n    this.style['--om-scrollbar-height'] = `${scrollBarHeight}%`;\r\n  }\r\n\r\n  onScroll(event: Event): void {\r\n    const target = event.target as HTMLElement;\r\n    const contentHeight = this.contentRef.nativeElement.clientHeight;\r\n    const scrollTop = target.scrollTop;\r\n\r\n    this.scrollPercent = Math.floor(scrollTop / contentHeight * 100);\r\n\r\n    this.style['--om-scrollbar-top'] = `${this.scrollPercent}%`;\r\n  }\r\n\r\n  onDrag(event: MouseEvent): void {\r\n    if (!this.mouseDown()) {\r\n      return;\r\n    }\r\n\r\n    event.preventDefault();\r\n\r\n    const offsetY = event.clientY;\r\n\r\n    const scrollPx = offsetY - (this.lastY ?? offsetY);\r\n    this.lastY = offsetY;\r\n\r\n    const contentHeight = this.sidebarRef.nativeElement.clientHeight;\r\n    const scrollPercent = (scrollPx) / (contentHeight);\r\n\r\n    const scrollContentPx = this.contentRef.nativeElement.clientHeight * scrollPercent;\r\n\r\n    this.wrapperRef.nativeElement.scrollBy(0, scrollContentPx);\r\n  }\r\n}\r\n","<div class=\"om-scrollbar\" [ngStyle]=\"style\" #OmScrollbarContainer>\r\n  <div class=\"om-scrollbar-wrapper\" (scroll)=\"onScroll($event)\" #OmScrollbarWrapper>\r\n    <div class=\"om-scrollbar-content\" #OmScrollbarContent>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"om-scrollbar-bar\" [class.om-scrollbar-bar-active]=\"mouseDown()\" [ngClass]=\"styleClass\" #OmScrollbar>\r\n  </div>\r\n</div>\r\n","/*\r\n * Public API Surface of ngx-scrollbar\r\n */\r\n\r\nexport * from './lib/ngx-scrollbar.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}