{"_id":"@ciag/ngx-pinch-zoom","_rev":"2-9a7282f32d5f97091dee4a49ab606cdb","name":"@ciag/ngx-pinch-zoom","dist-tags":{"latest":"13.3.0"},"versions":{"13.3.0":{"name":"@ciag/ngx-pinch-zoom","version":"13.3.0","keywords":["Angular 13","ngx","ng2","Pinch zoom","Image zoom","Touch image zoom"],"author":{"name":"Carlos Eduardo Benedetti","email":"carlosbenedettidev@gmail.com"},"license":"MIT","_id":"@ciag/ngx-pinch-zoom@13.3.0","maintainers":[{"name":"ettoreleandrotognoli","email":"ettore.leandro.tognoli@gmail.com"},{"name":"rafael.lima","email":"rafael.lima138@gmail.com"},{"name":"tiecoo","email":"diego.silva@ciag.org.br"},{"name":"carlosbenedetti","email":"cbjrcadu@gmail.com"},{"name":"leonardortlima","email":"leonardortlima@gmail.com"},{"name":"raacavalieri","email":"rafael.cvlr@gmail.com"},{"name":"ciag.dev","email":"desenv@ciag.org.br"},{"name":"borba.victor","email":"borba.victor.borba@gmail.com"}],"homepage":"https://github.com/Carlos-Benedetti/ngx-pinch-zoom#readme","bugs":{"url":"https://github.com/drozhzhin-n-e/ngx-pinch-zoom/issues"},"dist":{"shasum":"b0be9a13b4e78d2d0be140c815204e3b773df8fa","tarball":"https://registry.npmjs.org/@ciag/ngx-pinch-zoom/-/ngx-pinch-zoom-13.3.0.tgz","fileCount":22,"integrity":"sha512-Hdtxx9OUwwjCtMj/lAsAb632LuJDY6jo7Val7gIdX45tGRH30qhQ4y65X2j4JOyy5wWoZeNqOPCgNN6LEibF/g==","signatures":[{"sig":"MEQCIBCHhL19vUU0AWv5/i+FgEoTjPYal9vFcGq63qu4vpZUAiBP05KYLV5u9OFHUytGUI3e+t20qndanb+dQaaE6sjiMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSAmxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRRxAAnou5AOK9A70ZJq3O5g047uopSFfMvyRij5ni+Y5LMATlxm42\r\niiHyiIqpRyJoOcNLd7u4f0VmyjEvDORiVVpUlrWJ5Cdv2lfPXUW5OY9OoLHW\r\nO8G1lI0rVtY3Z6IUNYDcn+DrIJM68Yc33lx+ngWnvxd7JuYUeaLU6y99D0wl\r\nEv9v2qPbhkYrtSTp6HXgz58SYEMAcFBGC0xXkKZwqHsO4G/S30sQ0a7Ril5y\r\nJZXa8KUVvVb2LfdT+1m1xXFvMk0zN0Fp2bwH6CBiJ/WX17pnRQeY3ka05VU4\r\nhl6yy+6JqGpyCWWLiDEtvKzuVqE/30Bt9QTmLNns13NP3PrIDzGWNxbgAtud\r\ndxPDSRdCj2urzJigeeGqzRJqJ+IYAAUph47op9N+B6lB3XWTJKNHAJgFXBM4\r\ns4P2ENw4MJ30jcbqB/p0Y5X53UPBf47VPHyTrMSj22cx28pMgbBc5npBtrni\r\nvisD5Xh1km+2KCyCTBgImeEQ9vP1Jpir1ZdMzma5llIruGj2180XooyUCwGk\r\nuEgW8CZ93WGJ13KAzZW3xujvdYL2M9fmqqtSN8kMBjb3W6CTlCxcGCWC+/ZM\r\n4aAur3TO1rG3lOlatA2iIY0v1C8S9wYfR8xTBnCOizdvbC/+Qnhdo2rVFT5G\r\nuD5JgVuuhY7wNm4DyQYKBi0Ao4AOYP/CZ0E=\r\n=4A1h\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ciag-ngx-pinch-zoom.mjs","module":"fesm2015/ciag-ngx-pinch-zoom.mjs","esm2020":"esm2020/ciag-ngx-pinch-zoom.mjs","exports":{".":{"node":"./fesm2015/ciag-ngx-pinch-zoom.mjs","types":"./ciag-ngx-pinch-zoom.d.ts","es2015":"./fesm2015/ciag-ngx-pinch-zoom.mjs","es2020":"./fesm2020/ciag-ngx-pinch-zoom.mjs","default":"./fesm2020/ciag-ngx-pinch-zoom.mjs","esm2020":"./esm2020/ciag-ngx-pinch-zoom.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"4479ebddd45092d8e44abc4d78a082168ac5fbef","typings":"ciag-ngx-pinch-zoom.d.ts","_npmUser":{"name":"carlosbenedetti","email":"cbjrcadu@gmail.com"},"fesm2015":"fesm2015/ciag-ngx-pinch-zoom.mjs","fesm2020":"fesm2020/ciag-ngx-pinch-zoom.mjs","repository":{"url":"git+https://github.com/Carlos-Benedetti/ngx-pinch-zoom.git","type":"git"},"_npmVersion":"8.1.0","description":"Pinch zoom component for Angular.","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"tslib":"^2.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.x","@angular/common":">=13.x"},"_npmOperationalInternal":{"tmp":"tmp/ngx-pinch-zoom_13.3.0_1665665457805_0.6996947730898313","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-10-13T12:50:57.730Z","modified":"2026-08-05T19:01:42.939Z","13.3.0":"2022-10-13T12:50:57.960Z"},"bugs":{"url":"https://github.com/drozhzhin-n-e/ngx-pinch-zoom/issues"},"author":{"name":"Carlos Eduardo Benedetti","email":"carlosbenedettidev@gmail.com"},"license":"MIT","homepage":"https://github.com/Carlos-Benedetti/ngx-pinch-zoom#readme","keywords":["Angular 13","ngx","ng2","Pinch zoom","Image zoom","Touch image zoom"],"repository":{"url":"git+https://github.com/Carlos-Benedetti/ngx-pinch-zoom.git","type":"git"},"description":"Pinch zoom component for Angular.","maintainers":[{"email":"ettore.leandro.tognoli@gmail.com","name":"ettoreleandrotognoli"},{"email":"rafael.lima138@gmail.com","name":"rafael.lima"},{"email":"diego.silva@ciag.org.br","name":"tiecoo"},{"email":"cbjrcadu@gmail.com","name":"carlosbenedetti"},{"email":"leonardortlima@gmail.com","name":"leonardortlima"},{"email":"rafael.cvlr@gmail.com","name":"raacavalieri"},{"email":"desenv@ciag.org.br","name":"ciag.dev"},{"email":"borba.victor.borba@gmail.com","name":"borba.victor"},{"email":"matheusbjorn@gmail.com","name":"castrom13"}],"readme":"# Pinch zoom for Angular\n\n![](\"https://badgen.net/bundlephobia/min/ngx-pinch-zoom\")
\n\nThe module provides opportunities for image zooming in, zooming out and positioning with use of gestures on a touch screen. \n\nLive demos and source code samples can be found on [home page](http://ivylab.space/pinch-zoom).\n\n🔬️ Help make Pinch zoom better by [answering a few questions](https://docs.google.com/forms/d/e/1FAIpQLSfDW_yLcKTlRzhUy3PMAFMgmsmy9cNyeML8hQ8rOgM3PEIKGA/viewform?usp=sf_link).\n\n## Installation\n\nInstall the npm package.\n```\nnpm i ngx-pinch-zoom\n```\n\nImport module:\n```ts\nimport { PinchZoomModule } from 'ngx-pinch-zoom';\n\n@NgModule({\n imports: [ PinchZoomModule ]\n})\n```\n\n## Usage\nFor use, put your image inside the <pinch-zoom> container. Please, pay attention to the parameters of your viewport metatag. If you use Pinch Zoom, it is required to limit zooming of a web-page, by entering the following parameters: <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no\">.\n\n```html\n\n ![](\"path_to_image\")
\n\n```\n\n## Properties\n\n| name | type | default | description |\n|------------------|-----------------|---------|---------------------------------------------|\n| transition-duration | number | 200 | Defines the speed of the animation of positioning and transforming.|\n| limit-zoom | number, \"original image size\" | \"original image size\" | Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size. |\n| minScale | number | 0 | Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with `limitPan` |\n| auto-zoom-out | boolean | false | Automatic restoration of the original size of an image after its zooming in by two fingers.|\n| double-tap | boolean | true | Zooming in and zooming out of an image, depending on its current condition, with double tap.|\n| disabled | boolean | false | Disable zoom. |\n| disablePan | boolean | false | Turn off panning with one finger. |\n| overflow | \"hidden\", \"visible\" | \"hidden\" | `hidden` - the overflow is clipped, and the rest of the content will be invisible. `visible` - the overflow is not clipped. The content renders outside the element's box. |\n| disableZoomControl | \"disable\", \"never\", \"auto\" | \"auto\" | Disable zoom controls. `auto` - Disable zoom controls on touch screen devices. `never` - show zoom controls on all devices. `disable` - disable zoom controls on all devices. |\n| zoomControlScale | number | 1 | Zoom factor when using zoom controls. |\n| backgroundColor | string | \"rgba(0,0,0,0.85)\" | The background color of the container. |\n| limitPan | boolean | false | Stop panning when the edge of the image reaches the edge of the screen. |\n| minPanScale | number | 1.0001 | Minimum zoom at which panning is enabled. |\n| listeners | \"auto\", \"mouse and touch\" | \"mouse and touch\" | By default, subscriptions are made for mouse and touch screen events. The value `auto` means that the subscription will be only for touch events or only for mouse events, depending on the type of screen. |\n| wheel | boolean | true | Scale with the mouse wheel. |\n| wheelZoomFactor | number | 0.2 | Zoom factor when zoomed in with the mouse wheel. |\n| autoHeight | boolean | false | Calculate the height of the container based on the `width` and `height` attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes `width` and `height` for the `![]()
` tag. When setting the property value to `true`, a subscription to the window resize listener will be created. |\n| draggableImage | boolean | false | Sets the attribute `draggable` to the `![]()
` tag. |\n\n## Methods\n\n| name | description |\n|-------------------------|---------------------------------------------|\n| toggleZoom() | Image zooming in and out, depending on its current state. |\n| destroy() | Unsubscribe from mouse events and touches, as well as remove added styles from the DOM tree. |\n\nSee the full documentation and examples on the [home page](http://ivylab.space/pinch-zoom).\n\n## Author services\n\nAre you interested in this library but lacks features? [Write to the author](https://github.com/drozhzhin-n-e), he can do it for you.\n\n## Sponsors\n\nTested using Browserstack\n\n[](http://browserstack.com/)\n","readmeFilename":"README.md"}