{"_id":"@a11y-ngx/responsive-image-maps","_rev":"16-94b91109b0640c83b72de3ee26eb0aa7","name":"@a11y-ngx/responsive-image-maps","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.1":{"name":"@a11y-ngx/responsive-image-maps","version":"1.0.1","keywords":["responsive","image","map","areas","size","directive"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/responsive-image-maps@1.0.1","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/responsive-image-maps#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"70c38b6355d6945fb2a700e84b9c8dc4f07fcfba","tarball":"https://registry.npmjs.org/@a11y-ngx/responsive-image-maps/-/responsive-image-maps-1.0.1.tgz","fileCount":29,"integrity":"sha512-2IxAhOw/lek32wYOwKQdXQjolLzdNurODTmO9Moi+89heRrpGrA8r+q1g0cDb/kycF17pwd7eKFUvcTRNKHlWA==","signatures":[{"sig":"MEUCIQCYanU/mJ9l+YnZECvU2gAwBRI2tTkF+p3KvKMFaJatFwIgIXGZWwQ9uwrBSPRJllb+ucwGVKa+/H8hxoi1YoDnpwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQIOFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4gA/8DKUrKz9IqvUddg+1xgiJRu9BFn7/vs/hYN1y86CXLPG7ghTp\r\nXi0yMnVV0INcN9TWBWUKnh2L0zzMtJ3xiqJHpzP7oc3nX7v6UfcV4CB006XO\r\nd+hBxUNZBxj+nFOf4c4/kWH88OuEacWlA0PWSHhemWLAZBRJ0skUx0i0iwJe\r\nV8NkyjqcAsx1ASK5NLmG+84bOeRky8MWlqDk7uYrh5b3Hlscr36IXNRBZ6Qx\r\nKnfLB5EmbqMwcg8YDIXBNME5EhmQSnEOQGwPea8Xg0Peq2w4lx5qJS5D3WrP\r\nwpu613w/Mo92Px30bwJEc+pFx28dsz9pKA+RppyMQbg2QmDDgWJCAupnois5\r\n2Jc2tN0KvulLKtqt80VN3ufBlzLkzFtGczMqvgK7wbCPb6fGkvXWRBwr8X3V\r\nBnMxX4VSoJqjD/G+jomTH4SQurgCUyRo3MhT+jJsthffum4zTbJRIQE3QhFT\r\nekAFqbKe/n+xKKiGZIMsKNqdcscwbU3zOh9szWkYE7evRXClJ5Iu5s1DnmgT\r\nntdO0TpzsE0xSAbNccNBZfnhfOljlG6E4cDXU4hy5WX0T+m8YXNI885LX0fg\r\nRVFOhbEXk/psXhNtL7as1DbkdhaW5CyOgeEzhDCUpKV16W/kvzLqRB5oNptq\r\nrDAZrNRLiRxbKgd6YRzEpjQ+Jn9ZQBBv87k=\r\n=gByA\r\n-----END PGP SIGNATURE-----\r\n"},"esm5":"esm5/a11y-ngx-responsive-image-maps.js","main":"bundles/a11y-ngx-responsive-image-maps.umd.js","fesm5":"fesm5/a11y-ngx-responsive-image-maps.js","es2015":"fesm2015/a11y-ngx-responsive-image-maps.js","module":"fesm5/a11y-ngx-responsive-image-maps.js","esm2015":"esm2015/a11y-ngx-responsive-image-maps.js","typings":"a11y-ngx-responsive-image-maps.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-responsive-image-maps.js","metadata":"a11y-ngx-responsive-image-maps.metadata.json","_npmVersion":"6.14.14","description":"A responsive image map directive that updates the areas' coordinates according to the image size","directories":{},"sideEffects":false,"_nodeVersion":"14.17.4","dependencies":{"tslib":"^1.10.0","@a11y-ngx/window-resize":">=1.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^9.1.13","@angular/common":"^9.1.13"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-maps_1.0.1_1665172357596_0.11806935139581465","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@a11y-ngx/responsive-image-maps","version":"1.0.5","keywords":["responsive","image","map","areas","size","directive"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/responsive-image-maps@1.0.5","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/responsive-image-maps#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"ac7ab9f377bf945f4f597b33fa45f08ef7959f2e","tarball":"https://registry.npmjs.org/@a11y-ngx/responsive-image-maps/-/responsive-image-maps-1.0.5.tgz","fileCount":18,"integrity":"sha512-k8G2YLbsuXVH6AjLmjUtLHG2E7hoZcQ4X9f9jvtPUFIpjPyl2mgzcBxmi1PGfkX/WWk1PE5/y2VYm1TZW2NRvw==","signatures":[{"sig":"MEQCIA9xyMpgtMjPviDTpVgm91Dxkc3Q6u/8wRL2rtI0fhWoAiBAqrUd+nte9J8w04wr26p11478EB+Q7DvwErelBAfTmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110718},"main":"bundles/a11y-ngx-responsive-image-maps.umd.js","es2015":"fesm2015/a11y-ngx-responsive-image-maps.js","module":"fesm2015/a11y-ngx-responsive-image-maps.js","esm2015":"esm2015/a11y-ngx-responsive-image-maps.js","gitHead":"d42419623ea950a87a92b65a231aa325bfba8ee3","typings":"a11y-ngx-responsive-image-maps.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-responsive-image-maps.js","_npmVersion":"8.19.3","description":"A responsive image map directive that updates the areas' coordinates according to the image size","directories":{},"sideEffects":false,"_nodeVersion":"18.13.0","dependencies":{"tslib":"^1.10.0","@a11y-ngx/window-resize":">=1.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-maps_1.0.5_1712616845118_0.9229449724943195","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@a11y-ngx/responsive-image-maps","version":"1.1.0","keywords":["responsive","image","map","areas","size","rect","circle","poly","polygon","directive","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/responsive-image-maps@1.1.0","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/responsive-image-maps#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"11f04fd71d37f6194fb56b53d412f5f02e8c28ef","tarball":"https://registry.npmjs.org/@a11y-ngx/responsive-image-maps/-/responsive-image-maps-1.1.0.tgz","fileCount":18,"integrity":"sha512-FL/PpWPDKbd6enKSQVDg2iYREzd6XGZlN9jgvTnda/tuKx6Xnq/gKFuCBIEmmLqhYraeP3vqNJop+jCRioYtNQ==","signatures":[{"sig":"MEYCIQCLbCq3J/wVXDvObii2Q7Sbjs9MaBGhGPCSX5eTHtApEwIhANJDxWHCnpqkW6qmeCrjBznz45DxTDGChozSsmGJ8Eiq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":180995},"main":"bundles/a11y-ngx-responsive-image-maps.umd.js","es2015":"fesm2015/a11y-ngx-responsive-image-maps.js","module":"fesm2015/a11y-ngx-responsive-image-maps.js","esm2015":"esm2015/a11y-ngx-responsive-image-maps.js","gitHead":"5edf561294afd007793a6daf10ec946d4a4568ba","typings":"a11y-ngx-responsive-image-maps.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-responsive-image-maps.js","_npmVersion":"8.19.4","description":"A responsive image map directive that updates the areas' coordinates according to the image size","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0","@a11y-ngx/window-resize":">=1.0.3"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-maps_1.1.0_1726844568238_0.1973450386181992","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@a11y-ngx/responsive-image-maps","version":"1.1.1","keywords":["responsive","image","map","areas","size","rect","circle","poly","polygon","directive","a11y","accessibility","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/responsive-image-maps@1.1.1","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/responsive-image-maps#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"d22fd32ae18066386d13a4c17af508b470d1086e","tarball":"https://registry.npmjs.org/@a11y-ngx/responsive-image-maps/-/responsive-image-maps-1.1.1.tgz","fileCount":18,"integrity":"sha512-a2n9ZgWhgfnkv4UxUGViWojJWsvJuiLtrp2ClCiKCdoP5w64OZpFoP6TJiKl0aO60f1OyGPtIRwJK4CPEvsSDQ==","signatures":[{"sig":"MEYCIQCpw2LsTDInPza7h5mTwik/01+oiYCEJHxqkUXCpqMBGwIhANuhKR8H/JeEwIwIbFTX/r7c7FYUfH0NMDjQEMssqxDa","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":181048},"main":"bundles/a11y-ngx-responsive-image-maps.umd.js","es2015":"fesm2015/a11y-ngx-responsive-image-maps.js","module":"fesm2015/a11y-ngx-responsive-image-maps.js","esm2015":"esm2015/a11y-ngx-responsive-image-maps.js","gitHead":"0943b42a1333a74cbda740380ef033e73c182dd5","typings":"a11y-ngx-responsive-image-maps.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-responsive-image-maps.js","_npmVersion":"8.19.4","description":"A responsive image map directive that updates the areas' coordinates according to the image size","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0","@a11y-ngx/window-resize":">=1.0.4"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0 <21.0.0","@angular/common":">=12.2.0 <21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/responsive-image-maps_1.1.1_1761916658187_0.5874495978086378","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@a11y-ngx/responsive-image-maps","version":"1.1.2","description":"A responsive image map directive that updates the areas' coordinates according to the image size","keywords":["responsive","image","map","areas","size","rect","circle","poly","polygon","directive","a11y","accessibility","angular"],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/responsive-image-maps#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"license":"MPL-2.0","author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"peerDependencies":{"@angular/common":">=12.2.0 <21.0.0","@angular/core":">=12.2.0 <21.0.0"},"dependencies":{"tslib":"^1.10.0","@a11y-ngx/window-resize":">=1.0.5"},"main":"bundles/a11y-ngx-responsive-image-maps.umd.js","module":"fesm2015/a11y-ngx-responsive-image-maps.js","es2015":"fesm2015/a11y-ngx-responsive-image-maps.js","esm2015":"esm2015/a11y-ngx-responsive-image-maps.js","fesm2015":"fesm2015/a11y-ngx-responsive-image-maps.js","typings":"a11y-ngx-responsive-image-maps.d.ts","sideEffects":false,"gitHead":"5d5f4aaa3725c0991d0de1c8ec9852633fe96e4d","_id":"@a11y-ngx/responsive-image-maps@1.1.2","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-KEvQxnb2No2a/0bTF7s0La3dNaw8Dgwplggs9G5BIH/tsyX/fGfnLtTd4DifqylCNGJd3q24uKL/7Xztl2A9iA==","shasum":"a856d65e6c8694942c8ed3fd5c4ff0573acdd38d","tarball":"https://registry.npmjs.org/@a11y-ngx/responsive-image-maps/-/responsive-image-maps-1.1.2.tgz","fileCount":18,"unpackedSize":182903,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCYPsagHn4VNyjLKmE20EVIG+cgE9M9fpMV6TNOeISyAwIgCSVoSeaL6nxMITpvWKeiQO4ja2i9FhwHRbllCxYRPg4="}]},"_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"directories":{},"maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/responsive-image-maps_1.1.2_1764075948923_0.015295001219320037"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-07T19:52:37.536Z","modified":"2025-11-25T13:05:49.336Z","1.0.0":"2022-10-07T19:39:25.318Z","1.0.1":"2022-10-07T19:52:37.768Z","1.0.2":"2024-04-08T19:05:49.198Z","1.0.3":"2024-04-08T19:10:34.279Z","1.0.4":"2024-04-08T19:23:55.439Z","1.0.5":"2024-04-08T22:54:05.276Z","1.0.6":"2024-09-20T15:01:33.868Z","1.1.0":"2024-09-20T15:02:48.495Z","1.1.1":"2025-10-31T13:17:38.402Z","1.1.2":"2025-11-25T13:05:49.122Z"},"bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"license":"MPL-2.0","homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/responsive-image-maps#readme","keywords":["responsive","image","map","areas","size","rect","circle","poly","polygon","directive","a11y","accessibility","angular"],"description":"A responsive image map directive that updates the areas' coordinates according to the image size","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"readme":"# Responsive Image Maps\n\nA responsive image map Angular directive that updates the areas' coordinates according to the image size.\n\nIt will manage all shapes (`rect`, `circle` and `poly`).\n\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.\n\n## Index\n\n- [Installation](#installation)\n- [Use](#use)\n  - [The Map Directive](#the-map-directive)\n    - [The Map public Properties, Getters and Methods](#map-directive-public-properties-getters-and-methods)\n    - [The MapSize Type](#the-mapsize-type)\n  - [The Area Directive](#the-area-directive)\n    - [The Area public Properties, Getters and Methods](#area-directive-public-properties-getters-and-methods)\n    - [The AreaSize Type](#the-areasize-type)\n- [Working Example](#working-example)\n\n## Installation\n\n1. Install npm package:\n\n    `npm install @a11y-ngx/responsive-image-maps --save`\n\n2. Import `A11yResponsiveImageMapsModule` into your module or standalone component:\n\n    ```typescript\n    import { A11yResponsiveImageMapsModule } from '@a11y-ngx/responsive-image-maps';\n\n    @NgModule({\n        declarations: [...],\n        imports: [\n            ...\n            A11yResponsiveImageMapsModule,\n        ],\n    })\n    export class AppModule { }\n    ```\n\n## Use\n\nAdd an image with a map in your template.\n\n### The Map Directive\n\n- The Map directive will pick any `<map>` tag with `[name]` attribute in it and search for the `<img>` with `[usemap]` matching that name.\n- When the image has been loaded for the first time, it will:\n  - Update `loaded` with `true`.\n  - Emit `sizeChanged`.\n- When the main `<img>` resizes, all `<area>` elements will update their coordinates based on the new image size.\n- The directive can be accessed using a template variable through the exported name of `responsiveImageMap`.\n- The directive will auto update sizes when the page resizes (using [Window Resize Service](https://www.npmjs.com/package/@a11y-ngx/window-resize)).\n- If the image changes its size:\n  - Through window resize, `(sizeChanged)` output will emit the new `MapSize`.\n  - Pogrammatically, the sizes (image and areas) can be manually updated using the `update()` method from the exported directive.\n- The HTML `<map>` element can be reached through the `nativeElement` property.\n- The HTML `<img>` element can be reached through the `imageElement` property.\n\n#### Map Directive public Properties, Getters and Methods\n\n| Property | Type | Returns | Description |\n|:---------|:-----|:--------|:------------|\n| `loaded` | `BehaviorSubject` | `boolean` | Will return `true` when the image has been loaded |\n| `sizeChanged` | `EventEmitter` | [`MapSize`](#the-mapsize-type) | Will emit the new image's size & position when page resize and it changes the width and height values |\n| `areas` | `QueryList` | `ResponsiveImageAreaDirective` | To access all `<area>` children directives |\n| `scaleFactor` | `get` | `{ width: number, height: number }` | The scale factor from the image's original full size and the resized size |\n| `imageSize` | [`MapSize`](#the-mapsize-type) | `object` | To access all the values (size & position) from the main image |\n| `nativeElement` | `get` | `HTMLMapElement` | To access the HTML `<map>` element |\n| `imageElement` | `get` | `HTMLImageElement` | To access the HTML `<img>` element that the `<map>` is attached to |\n| `update()` | `method` | `void` | Will update the image new values and all the `<area>`'s new coordinates accordingly |\n\n#### The MapSize Type\n\n| Property | Type | Description |\n|:---------|:----:|:------------|\n| `top` | `number` | The image `DOMRect`'s top value |\n| `left` | `number` | The image `DOMRect`'s left value |\n| `width` | `number` | The image `DOMRect`'s width value |\n| `height` | `number` | The image `DOMRect`'s height value |\n| `fullWidth` | `number` | The image's original full width size (resized or not) |\n| `fullHeight` | `number` | The image's original full height size (resized or not) |\n\n### The Area Directive\n\n- The Area directive will pick any `<area>` tag with `[shape]` and `[coords]` attributes.\n- This directive will manage the area size (either relative to the image or to the viewport).\n- Each directive can be accessed:\n  - Using a template variable through the exported name of `responsiveImageArea`.\n  - From the [Map directive](#the-map-directive) through the `areas` property, which will return a `QueryList<ResponsiveImageAreaDirective>`.\n- The HTML `<area>` element can be reached through the `nativeElement` property.\n\n#### Area Directive public Properties, Getters and Methods\n\n| Property | Type | Returns | Description |\n|:---------|:-----|:--------|:------------|\n| `areaSize` | [`AreaSize`](#the-areasize-type) | `object` | To access all the values (size & position) from the area (relative to the image) |\n| `nativeElement` | `get` | `HTMLAreaElement` | To access the HTML `<area>` element |\n| `getBoundingClientRect()` | `method` | `DOMRect` | To get the calculated position of the `<area>` element (relative to the viewport) |\n| `updateCoords()` | `method` | `void` | Will update the `[coords]` attribute based on the image size. _(**NOTE:** there's no need to trigger this manually, the map directive will update when needed)_ |\n\n#### The AreaSize Type\n\n| Property | Type | Description |\n|:---------|:----:|:------------|\n| `top` | `number` | The area's (relative to image) top value |\n| `left` | `number` | The area's (relative to image) left value |\n| `width` | `number` | The area's width value |\n| `height` | `number` | The area's height value |\n\n## Working Example\n\nTypeScript\n\n```typescript\nimport { ResponsiveImageMapDirective, MapSize, AreaSize } from '@a11y-ngx/responsive-image-maps';\n\n@Component({ ... })\nexport class MyComponent {\n    @ViewChild('imageMap') imageMap: ResponsiveImageMapDirective;\n\n    updateOtherElements(newSize: MapSize): void {\n        const width = newSize.width;\n        const height = newSize.height;\n        ...\n\n        this.imageMap.areas.forEach(area => {\n            const areaElement = area.nativeElement;\n            const areaSize: AreaSize = area.areaSize;\n            ...\n        });\n    }\n\n    updateMapSizes(): void {\n        this.imageMap.update();\n    }\n}\n```\n\nHTML\n\n```html\n<img src=\"https://www.w3schools.com/html/workplace.jpg\" alt=\"Workplace\" usemap=\"#workmap\">\n\n<map name=\"workmap\" #imageMap=\"responsiveImageMap\" (sizeChanged)=\"updateOtherElements($event)\">\n    <area shape=\"rect\" coords=\"34,44,270,350\" alt=\"Computer\" href=\"...\">\n    <area shape=\"rect\" coords=\"290,172,333,250\" alt=\"Phone\" href=\"...\">\n    <area shape=\"circle\" coords=\"337,300,44\" alt=\"Coffee\" href=\"...\">\n</map>\n```\n","readmeFilename":"README.md"}