{"_id":"@akaustav/ngx-scroll-to","_rev":"5-cde9f646b0623c0a298de19c04e5e5c7","name":"@akaustav/ngx-scroll-to","dist-tags":{"12":"12.0.1","latest":"12.0.1"},"versions":{"12.0.0":{"name":"@akaustav/ngx-scroll-to","description":"A simple Angular 12 plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. This is a fork from @nicky-lenaers/ngx-scroll-to that adds support for Angular 12.","version":"12.0.0","license":"MIT","private":false,"keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","angular7","angular 7","angular8","angular 8","angular9","angular 9","angular10","angular 10","angular11","angular 11","angular12","angular 12"],"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"contributors":[{"name":"Robbert van Caem"},{"name":"Ameet Kaustav"}],"repository":{"type":"git","url":"git+https://github.com/akaustav/ngx-scroll-to.git"},"homepage":"https://github.com/akaustav/ngx-scroll-to#readme","bugs":{"url":"https://github.com/akaustav/ngx-scroll-to/issues"},"engines":{"node":"^16.18.0","yarn":">=1.22.18"},"dependencies":{"tslib":"^2.3.0"},"peerDependencies":{"@angular/common":"^12.0.0","@angular/core":"^12.0.0"},"main":"bundles/akaustav-ngx-scroll-to.umd.js","module":"fesm2015/akaustav-ngx-scroll-to.js","es2015":"fesm2015/akaustav-ngx-scroll-to.js","esm2015":"esm2015/akaustav-ngx-scroll-to.js","fesm2015":"fesm2015/akaustav-ngx-scroll-to.js","typings":"akaustav-ngx-scroll-to.d.ts","sideEffects":false,"_id":"@akaustav/ngx-scroll-to@12.0.0","dist":{"shasum":"b41f754db8b3017e4d8cd29d3c3f994f866b7777","integrity":"sha512-4Y5gwZFN2+r+Ukinmmruoinj6+gSU4W6cWWlgMp9s/L4/qO30GjGqzq74ivkGlaeLWMADaNhHiKY+vpKb4Dj4A==","tarball":"https://registry.npmjs.org/@akaustav/ngx-scroll-to/-/ngx-scroll-to-12.0.0.tgz","fileCount":33,"unpackedSize":286731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQIKn5EMRdVzwJdLa13fpFRAubNZrpqskVF07XU/pqOAiEAxc+RoLqGEXMVUZXYveyXLiXbpyLm+zfZetVzgJlbQxg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjy+33ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro6g//aSv/YWBgCunI2KUdpmgxgTxSMB+5JLMQ9PrKtDIL5+I+YP5+\r\nakhbyo2h5LQ2ZWRNzca/0iF8Gl6J8IO7U7PA9RCzWQsrqTt3urxwso1GRqWY\r\nZvtIai20sZrvwVezHLQsZzqXt3PKX7WsLdNXdd24PcxkVGcviCeqcDVgBwzm\r\nI5kwcA8ny/ac8idE4FQ5Nx8lGw1kdu1i3t/k7jM3Tlqe+nPOGlmF8iyo/nb4\r\n3OjMQaW3HLtogqzz9F2etbf+jQ/72XGchkzdgTpEob2G0EPgcODxU183at64\r\nnUEpmphHob8ZAFHxdKcHFe3V7hNfoIhz3dbFNCEmNrkQQCmWTsRJYcNlABFo\r\nkFL3ByVzr3CgnipvWuclqK7huwdi3buiXxtUJdLMT8aqF7wN3PfUZH/7pbgx\r\ns9gLgW/Br7VK9VeQI1AxTvN1TueqQwi5Wi1L7kpXsV02MR8O2+VEfDWw6hIj\r\nEEBPWxoneHR8e2pNq3Rue1GSNn5oqHLrh5h+gyeuzYeVXJmuZ3BehId9E75N\r\n55XtUNNQjYlSX+OLDWaNvqe7oB6Ce1h5PAGbf+QpigA2bybtrJXYHLfgok7r\r\nLiv48cCzfw5oNMgFjcI6aUvH0jMVObLMjdbpJTVdKjsnLop4IIo6aQCqx3E2\r\nWkZQHAYO5ENhlOB7HZfnowLmAj58QwyeS8k=\r\n=kk3V\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"akaustav","email":"akaustav@gmail.com"},"directories":{},"maintainers":[{"name":"akaustav","email":"akaustav@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-scroll-to_12.0.0_1674309110916_0.23510573526289624"},"_hasShrinkwrap":false},"12.0.1":{"name":"@akaustav/ngx-scroll-to","description":"A simple Angular 12 plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. This is a fork from @nicky-lenaers/ngx-scroll-to that adds support for Angular 12.","version":"12.0.1","license":"MIT","private":false,"keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular12","angular 12"],"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"contributors":[{"name":"Robbert van Caem"},{"name":"Ameet Kaustav"}],"repository":{"type":"git","url":"git+https://github.com/akaustav/ngx-scroll-to.git"},"homepage":"https://github.com/akaustav/ngx-scroll-to#readme","bugs":{"url":"https://github.com/akaustav/ngx-scroll-to/issues"},"engines":{"node":">=16.0.0","yarn":">=1.22.18"},"dependencies":{"tslib":"^2.3.0"},"peerDependencies":{"@angular/common":"^12.0.0","@angular/core":"^12.0.0"},"main":"bundles/akaustav-ngx-scroll-to.umd.js","module":"fesm2015/akaustav-ngx-scroll-to.js","es2015":"fesm2015/akaustav-ngx-scroll-to.js","esm2015":"esm2015/akaustav-ngx-scroll-to.js","fesm2015":"fesm2015/akaustav-ngx-scroll-to.js","typings":"akaustav-ngx-scroll-to.d.ts","sideEffects":false,"_id":"@akaustav/ngx-scroll-to@12.0.1","dist":{"shasum":"0543b3ebe187842e1ba58e5293acfe14429bde41","integrity":"sha512-D/jzlsuvrpZErR1vXe6pMg58CZMniymXSt71F76JE4z5y64IFG1UnkFtKFguvg7SYExA/zFc0IJ+s1d7oe2osw==","tarball":"https://registry.npmjs.org/@akaustav/ngx-scroll-to/-/ngx-scroll-to-12.0.1.tgz","fileCount":33,"unpackedSize":291751,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbLBHDy41irZjIMYj5ByY5AlPqYSmrAKg/yhm1Gc0wKAIhAJ/onxwOY5BU2UZksF4S1r9pdgBPhiWEcNfYLbsSg0N0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjzDV1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos9BAAh15Y3byB3vcxdyv1eKxRGLg57/wJbq/aWv0fevB5U5GIL2W7\r\n7V9G5DU0DP8dYhXlTB9qgqZuLQ73QMq9A6DJaLIIyWxUwX6BF+UfDt3ZEmjQ\r\n5XNz782unCrp2hl+IrdmMPuM3s/mmW5gYBKQZPgTGPUVfeYjKCsP7y2UU+KM\r\nitegp99Rx3+LaAGWaW5a0QQBKcVSQ6oAvbJXhwVZy5hFjdmsfkaG4Rl88CwA\r\nwLxN1gQEJLlyi/pklI3Xj4/zIhiTKjtmXGHe0unFf18/THZg/h6/HfF962pb\r\n9fEsvnjnPVIbaa4jCWeWaWDIp5pC3V9qWM5bZ3vi6ekvK3BioBA71uodBERl\r\n7Cp6bK2aAMZiswiLHqFvRL6+zh1QgLetFO+HQWyIGX9q+gTrbv2Tmaqjqici\r\nCfBixL/FbBB6mL8zCpvSP+Qlu9GprEIO9W9RNs6+5OR+hb7A8ZuzTJjH00q6\r\nhrLz4dj5lWj7edJFQG8Skq2EWmrgyqanF8OVUfifBvtdX5Sy/D2jMbYp0mKY\r\n+HyiYUuRG+Q6oJsEzO9oBGiOQCJZh4XNGVN2BUKWTJtFPMPSNZnMk7eHsuUH\r\nP92zwfgix9G9vTCYhw0iEA0LWyAjmYMuZge0A4HKs6xbSmZ9/0LLrPfk+uBG\r\n5a/O0DPJVedz6++d42SjXjZ/wf5Zrlh7wn4=\r\n=FxjR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"akaustav","email":"akaustav@gmail.com"},"directories":{},"maintainers":[{"name":"akaustav","email":"akaustav@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-scroll-to_12.0.1_1674327412835_0.38634935447183727"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-21T13:51:50.858Z","12.0.0":"2023-01-21T13:51:51.068Z","modified":"2023-01-21T19:00:31.935Z","12.0.1":"2023-01-21T18:56:53.031Z"},"maintainers":[{"name":"akaustav","email":"akaustav@gmail.com"}],"description":"A simple Angular 12 plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. This is a fork from @nicky-lenaers/ngx-scroll-to that adds support for Angular 12.","homepage":"https://github.com/akaustav/ngx-scroll-to#readme","keywords":["ng","ngx","ngx-scroll-to","scroll","scrolling","scroll-to","smooth scroll","smooth-scroll","smooth scrolling","smooth-scrolling","smooth","angular","angular12","angular 12"],"repository":{"type":"git","url":"git+https://github.com/akaustav/ngx-scroll-to.git"},"contributors":[{"name":"Robbert van Caem"},{"name":"Ameet Kaustav"}],"author":{"name":"Nicky Lenaers","email":"nicky@newgameplus.online"},"bugs":{"url":"https://github.com/akaustav/ngx-scroll-to/issues"},"license":"MIT","readme":"# This is a fork from [@nicky-lenaers/ngx-scroll-to](https://github.com/nicky-lenaers/ngx-scroll-to) that adds support for Angular 12 ONLY. For other versions see the [Compatibility Table](#compatibility-table) below.\n\n
\n \n
\n
\n
ngx-scroll-to
\n \n
\n A simple Angular 12 plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. Works for Angular 12 ONLY, both AoT and SSR. Only 1 dependency - tslib.\n
\n```\n\n## Basic Usage - Directive to Offset Only\nBesides scrolling to a specific element, it is also possible to scroll a given offset only. This can be achieved by an empty target and an offset:\n\n**my.component.html**\n\n```html\n\n```\n\n## Basic Usage - Service to Target\n**my.component.html**\n```html\n\n\n
\n You've reached your destination.\n
\n```\n\n**my.service.ts**\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService, ScrollToConfigOptions } from '@akaustav/ngx-scroll-to';\n\n@Injectable()\nexport class MyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollTo() {\n \n const config: ScrollToConfigOptions = {\n target: 'destination'\n };\n\n this.scrollToService.scrollTo(config);\n }\n}\n```\n\n## Basic Usage - Service to Offset Only\nJust like with the Directive, the Service can be used to scroll to an offset only instead of a given target element:\n\n**my.component.html**\n```html\n\n```\n\n**my.service.ts**\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService, ScrollToConfigOptions } from '@akaustav/ngx-scroll-to';\n\n@Injectable()\nexport class MyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollToOffsetOnly(offset: number = 0) {\n \n const config: ScrollToConfigOptions = {\n offset\n };\n\n this.scrollToService.scrollTo(config);\n }\n}\n```\n\n## Advanced Usage - Directive\n**my.component.ts**\n```typescript\nimport { ScrollToAnimationEasing, ScrollToEvent, ScrollToOffsetMap } from '@akaustav/ngx-scroll-to';\n\n@Component({\n selector: 'my-component',\n templateUrl: './my.component.html'\n})\nexport class MyComponent {\n\n ngxScrollToDestination: string;\n ngxScrollToEvent: ScrollToEvent;\n ngxScrollToDuration: number;\n ngxScrollToEasing: ScrollToAnimationEasing;\n ngxScrollToOffset: number;\n ngxScrollToOffsetMap: ScrollToOffsetMap;\n\n constructor() {\n\n this.ngxScrollToDestination = 'destination-1';\n this.ngxScrollToEvent = 'mouseenter';\n this.ngxScrollToDuration = 1500;\n this.ngxScrollToEasing = 'easeOutElastic';\n this.ngxScrollToOffset = 300;\n this.ngxScrollToOffsetMap = new Map();\n this.ngxScrollToOffsetMap\n .set(480, 100)\n .set(768, 200)\n .set(1240, 300)\n .set(1920, 400)\n\n }\n\n toggleDestination() {\n this.ngxScrollToDestination = this.ngxScrollToDestination === 'destination-1' ? 'destination-2' : 'destination-1';\n }\n}\n```\n\n\n**my.component.html**\n```html\n\n\n\n\n
\n```\n\n**my.service.ts**\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService, ScrollToConfigOptions } from '@akaustav/ngx-scroll-to';\n\n@Injectable()\nexport class MyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollTo() {\n \n /**\n * @see NOTE:1\n */\n const config: ScrollToConfigOptions = {\n container: 'custom-container',\n target: 'destination',\n duration: 650,\n easing: 'easeOutElastic',\n offset: 20\n };\n\n this.scrollToService.scrollTo(config);\n }\n}\n```\n**NOTE:1**\n\n*The `container` property is an optional property. By default, `ngxScrollTo` searches for the first scrollable parent `HTMLElement` with respect to the specified `target`. This should suffice in most cases. However, if multiple scrollable parents reside in the DOM tree, you have the degree of freedom the specify a specific container by using the `container` property, as used in the above example.*\n\n## Directive Attributes Map\n
\n\n## Error Handling\nIn some occasions, one might misspell a target or container selector string. Even though `ngx-scoll-to` will not be able to initiate the scrolling animation, you can catch the internally generated error and handle it as you please on the `Observable` chain returned from the `scrollTo` method.\n\n**faulty.service.ts**\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ScrollToService } from '@akaustav/ngx-scroll-to';\n\n@Injectable()\nexport class FaultyService {\n\n constructor(private scrollToService: ScrollToService) { }\n\n triggerScrollTo() {\n \n this.scrollToService\n .scrollTo({\n target: 'faulty-id'\n })\n .subscribe(\n value => { console.log(value) },\n err => console.error(err) // Error is caught and logged instead of thrown\n );\n }\n}\n```\n\n## Directive Attribute Map Details\n#### `[ngxScrollTo]`\nThis value specifies the ID of the HTML Element to scroll to. Note the outer double quotes `\"\"` and the inner single quotes `''` in the above example(s). This enables you to dynamically set the string value based on a class property of your Component.\n\n#### `[ngxScrollToEvent]`\nThis value controls to event on which to trigger the scroll animation. Allowed values are:\n- `click`\n- `mouseenter`\n- `mouseover`\n- `mousedown`\n- `mouseup`\n- `dblclick`\n- `contextmenu`\n- `wheel`\n- `mouseleave`\n- `mouseout`\n\n#### `[ngxScrollToDuration]`\nThis value controls to duration of your scroll animation. Note that this value is in milliseconds.\n\n#### `[ngxScrollToEasing]`\nThis value controls a named easing logic function to control your animation easing. Allowed values are:\n- `easeInQuad`\n- `easeOutQuad`\n- `easeInOutQuad`\n- `easeInCubic`\n- `easeOutCubic`\n- `easeInOutCubic`\n- `easeInQuart`\n- `easeOutQuart`\n- `easeInOutQuart`\n- `easeInQuint`\n- `easeOutQuint`\n- `easeInOutQuint`\n- `easeOutElastic`\n\n#### `[ngxScrollToOffset]`\nThis value controls the offset with respect to the top of the destination HTML element. Note that this value is in pixels.\n\n#### `[ngxScrollToOffsetMap]`\nThis value allows you to control dynamic offsets based on the width of the device screen. The Map get's iterated over internally in a sequential fashion, meaning you need to supply key values in the order from low to high. The `key` of the `Map` defines the width treshold. The `value` of the `Map` defines the offset. Note that this value is in pixels.\n\n# Contributing\nPlease see [Contributing Guidelines](.github/CONTRIBUTING.md).\n\n# Code of Conduct\nPlease see [Code of Conduct](.github/CODE_OF_CONDUCT.md).\n\n# License\n [MIT](/LICENSE)\n","readmeFilename":"README.md"}
![](\"https://user-images.githubusercontent.com/2785350/28428760-ae908006-6d7a-11e7-92ec-174bec80740e.png\")
\n![\"Circle](\"https://img.shields.io/circleci/project/github/akaustav/ngx-scroll-to/master.svg?style=flat-square\")
\n \n ![\"GitHub](\"https://img.shields.io/github/release/akaustav/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"NPM](\"https://img.shields.io/npm/v/@akaustav/ngx-scroll-to.svg?style=flat-square\")
\n \n ![\"NPM](\"https://img.shields.io/npm/dm/%40akaustav%2Fngx-scroll-to.svg?style=flat-square\")
\n \n ![\"License\"](\"https://img.shields.io/npm/l/@akaustav/ngx-scroll-to.svg?style=flat-square\")
\n \n