@proangular/ngx-scroll-top/fesm2022/proangular-ngx-scroll-top.mjs.map

Configurable, lightweight back to top button for Angular projects.

{"version":3,"file":"proangular-ngx-scroll-top.mjs","sources":["../../../src/app/public/ngx-scroll-top.component.ts","../../../src/app/public/ngx-scroll-top.component.html","../../../src/app/public/public.ts","../../../src/app/public/proangular-ngx-scroll-top.ts"],"sourcesContent":["import { animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n  Component,\n  HostBinding,\n  HostListener,\n  Input,\n  OnInit,\n} from '@angular/core';\n\n@Component({\n  selector: 'ngx-scroll-top',\n  templateUrl: './ngx-scroll-top.component.html',\n  styleUrl: './ngx-scroll-top.component.scss',\n  animations: [\n    trigger('easeInOutAnimation', [\n      transition(':enter', [\n        style({ opacity: 0 }),\n        animate('200ms', style({ opacity: 1 })),\n      ]),\n      transition(':leave', [\n        style({ opacity: 1 }),\n        animate('200ms', style({ opacity: 0 })),\n      ]),\n    ]),\n  ],\n  imports: [CommonModule],\n  standalone: true,\n})\nexport class NgxScrollTopComponent implements OnInit {\n  /**\n   * Background color of the back to top button (hex string).\n   *\n   * Default: `'#0D58C0'` (dark-blue)\n   *\n   * Example: `'#000'` or `'black'`\n   *\n   * Tip: Define any `'x'` css property available for `'background-color: x'`\n   */\n  @Input() public backgroundColor = '#0D58C0';\n  /**\n   * Offset `px` from bottom of page when scrolled to bottom. For example this\n   * can be used to make sure the back to top button never overlaps a footer.\n   *\n   * Default: `'0px'`\n   *\n   * Example: `'250px'` or `250` because my footer is 250px in height\n   */\n  @Input() public bottomOffset: string | number = '0px';\n  /**\n   * The back to top button will not be displayed until the user scrolls to the\n   * provided Y (vertical `px`) coordinate on the page.\n   *\n   * Default: `'420px'`\n   *\n   * Example: `'100px'` or `100`\n   */\n  @Input() public displayAtYPosition: string | number = '420px';\n  /**\n   * The font color for the nested content within the back to top button.\n   *\n   * Default: `'#FFFFFF'` (white)\n   *\n   * Example: `'#000'` or `'black'`\n   *\n   * Tip: Define any `'x'` css property available for `'color: x'`\n   */\n  @Input() @HostBinding('style.color') public fontColor = '#FFFFFF';\n  /**\n   * The font size for the nested content within the back to top button.\n   *\n   * Default: `'16px'`\n   *\n   * Example: `'2rem'` or `'32px'`\n   *\n   * Tip: Define any `'x'` css property available for `'font-size: x'`\n   */\n  @Input() @HostBinding('style.font-size') public fontSize = '16px';\n  /**\n   * Height of back to top button in string px format.\n   *\n   * Default: `'25px'`\n   */\n  @Input() @HostBinding('style.height') public height = '40px';\n  /**\n   * Position on-screen where the back to top button is displayed.\n   *\n   * Default: `'right'`\n   */\n  @Input() public position: 'left' | 'right' = 'right';\n  /**\n   * Width of back to top button in string px format.\n   *\n   * Default: `'25px'`\n   */\n  @Input() @HostBinding('style.width') public width = '40px';\n  /**\n   * Style the `z-index` for the back to top button as needed for correct layer\n   * height adjustment. This can be useful when working with sticky headers.\n   *\n   * Default: `999`\n   */\n  @Input() @HostBinding('style.z-index') public zIndex = 999;\n\n  public isHidden = true;\n  private readonly defaultPadding = '16px';\n\n  @HostBinding('style.bottom') public styleBottom = this.defaultPadding;\n  @HostBinding('style.left') public styleLeft = 'unset';\n  @HostBinding('style.right') public styleRight = this.defaultPadding;\n  @HostListener('window:scroll', []) public onWindowScroll(): void {\n    this.updateIsHidden();\n    this.updatePosition();\n  }\n\n  public ngOnInit(): void {\n    switch (this.position) {\n      case 'left':\n        this.styleRight = 'unset';\n        this.styleLeft = this.defaultPadding;\n        break;\n      case 'right':\n      default:\n        this.styleRight = this.defaultPadding;\n        this.styleLeft = 'unset';\n        break;\n    }\n  }\n\n  public scrollTop(): void {\n    w.scroll({\n      top: 0,\n      left: 0,\n      behavior: 'smooth',\n    });\n  }\n\n  private updatePosition(): void {\n    const useDefaultPosition = (): void => {\n      this.styleBottom = this.defaultPadding;\n    };\n\n    if (this.isHidden) {\n      useDefaultPosition();\n      return;\n    }\n\n    try {\n      const { document, scrollY } = w;\n      const { documentElement: docEl } = document;\n      const bottomY = docEl.scrollHeight - docEl.clientHeight;\n      const bottomOffset = parsePxStringToInt(this.bottomOffset);\n      const distanceFromBottom = bottomY - scrollY;\n      const halfHeight = parsePxStringToInt(this.height) / 2;\n      const defaultPadding = parsePxStringToInt(this.defaultPadding);\n\n      if (distanceFromBottom + (halfHeight - defaultPadding) < bottomOffset) {\n        // Scroll up button exceeded bottom offset, update position.\n        this.styleBottom = `${\n          bottomOffset - distanceFromBottom + defaultPadding\n        }px`;\n      } else {\n        useDefaultPosition();\n      }\n    } catch (error: unknown) {\n      console.warn(\n        'Failed to update back to top button position dynamically.',\n        error,\n      );\n      useDefaultPosition();\n    }\n  }\n\n  private updateIsHidden(): void {\n    const { scrollY } = w;\n    const displayAtYPosition = parsePxStringToInt(this.displayAtYPosition);\n\n    if (this.isHidden && scrollY > displayAtYPosition) {\n      this.isHidden = false;\n    } else if (!this.isHidden && scrollY <= displayAtYPosition) {\n      this.isHidden = true;\n    }\n  }\n}\n\nconst w = window;\n\nfunction parsePxStringToInt(value: string | number): number {\n  try {\n    return parseInt(value.toString(), 10);\n  } catch (error: unknown) {\n    throw new Error(\n      `Failed to parse value \"${value}\" with error: ${String(error)}`,\n    );\n  }\n}\n","<button\n  *ngIf=\"!isHidden\"\n  (click)=\"scrollTop()\"\n  [style.background-color]=\"backgroundColor\"\n  [@easeInOutAnimation]\n>\n  <div class=\"content\" #content>\n    <ng-content></ng-content>\n  </div>\n  <svg\n    *ngIf=\"!content?.innerHTML?.length\"\n    class=\"default-content\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <desc>\n      https://fonts.gstatic.com/s/i/materialicons/expand_less/v12/24px.svg\n    </desc>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z\" />\n  </svg>\n</button>\n","// Components\nexport { NgxScrollTopComponent } from './ngx-scroll-top.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public';\n"],"names":[],"mappings":"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"}