{"_id":"@commudle/ng-image-container","_rev":"5-4325a3996c8ed79506f3b2209231cb7c","name":"@commudle/ng-image-container","dist-tags":{"latest":"2.0.1"},"versions":{"1.0.0":{"name":"@commudle/ng-image-container","version":"1.0.0","license":"MIT","author":{"name":"Commudle","email":"more@commudle.com"},"bugs":{"url":"https://github.com/commudle/ng-image-container/issues"},"homepage":"https://github.com/commudle/ng-image-container#readme","repository":{"type":"git","url":"git+https://github.com/commudle/ng-image-container.git"},"peerDependencies":{"@angular/common":"^14.2.0","@angular/core":"^14.2.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/commudle-ng-image-container.mjs","es2020":"fesm2020/commudle-ng-image-container.mjs","esm2020":"esm2020/commudle-ng-image-container.mjs","fesm2020":"fesm2020/commudle-ng-image-container.mjs","fesm2015":"fesm2015/commudle-ng-image-container.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/commudle-ng-image-container.mjs","es2020":"./fesm2020/commudle-ng-image-container.mjs","es2015":"./fesm2015/commudle-ng-image-container.mjs","node":"./fesm2015/commudle-ng-image-container.mjs","default":"./fesm2020/commudle-ng-image-container.mjs"}},"sideEffects":false,"gitHead":"26f546cb6f55debc08f480c0c7d8513471e1e7a9","description":"This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.","_id":"@commudle/ng-image-container@1.0.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-3hMaN924FIeLIpGjDvaAUm+DhznKGCJCP2ASHX6gBQcbDtUEUESssL4jaJhrWn6Cd8/5hSsChYt90cmwgVaMsg==","shasum":"3723b370afb805e0b65ac43081b99744339aeba7","tarball":"https://registry.npmjs.org/@commudle/ng-image-container/-/ng-image-container-1.0.0.tgz","fileCount":14,"unpackedSize":29306,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCz6inO+2yQOmc/9rypIoFUs6a9Y9NAJVVOd9/UzHGJAiBWmF5M4NUIyULjM2nlNsQ+wBhxxwo2lPETpT1q2Jd/NA=="}]},"_npmUser":{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},"directories":{},"maintainers":[{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},{"name":"arpansac","email":"arpansac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-image-container_1.0.0_1696430006835_0.9413187776788072"},"_hasShrinkwrap":false},"1.0.1":{"name":"@commudle/ng-image-container","version":"1.0.1","license":"MIT","author":{"name":"Commudle","email":"more@commudle.com"},"bugs":{"url":"https://github.com/commudle/ng-image-container/issues"},"homepage":"https://github.com/commudle/ng-image-container#readme","repository":{"type":"git","url":"git+https://github.com/commudle/ng-image-container.git"},"peerDependencies":{"@angular/common":"^14.2.0","@angular/core":"^14.2.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/commudle-ng-image-container.mjs","es2020":"fesm2020/commudle-ng-image-container.mjs","esm2020":"esm2020/commudle-ng-image-container.mjs","fesm2020":"fesm2020/commudle-ng-image-container.mjs","fesm2015":"fesm2015/commudle-ng-image-container.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/commudle-ng-image-container.mjs","es2020":"./fesm2020/commudle-ng-image-container.mjs","es2015":"./fesm2015/commudle-ng-image-container.mjs","node":"./fesm2015/commudle-ng-image-container.mjs","default":"./fesm2020/commudle-ng-image-container.mjs"}},"sideEffects":false,"gitHead":"d6f018f9124cc3d8d9694e581e3d4f47e23239cd","description":"This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.","_id":"@commudle/ng-image-container@1.0.1","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-o4Pc72jY3CAotaefZ0eh5+TV/mtCX8FjaKUL93ElB7WnFP/dG7IY+xzPMlsO002yMddErxpd33tbq31foH4U4w==","shasum":"78a423507ece2049d267c31f8aa15599ab017238","tarball":"https://registry.npmjs.org/@commudle/ng-image-container/-/ng-image-container-1.0.1.tgz","fileCount":14,"unpackedSize":29238,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq70F7yqRO+qKQbVrVrTwvtIC2TsOsXVmIrb3HPrOk4gIgToI8pHFSldp+hHRGMp6gecM4XwtdTpnjSZyVDpLcTso="}]},"_npmUser":{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},"directories":{},"maintainers":[{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},{"name":"arpansac","email":"arpansac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-image-container_1.0.1_1696506354048_0.4479424820323967"},"_hasShrinkwrap":false},"1.0.2":{"name":"@commudle/ng-image-container","version":"1.0.2","license":"MIT","author":{"name":"Commudle","email":"more@commudle.com"},"bugs":{"url":"https://github.com/commudle/ng-image-container/issues"},"homepage":"https://github.com/commudle/ng-image-container#readme","repository":{"type":"git","url":"git+https://github.com/commudle/ng-image-container.git"},"peerDependencies":{"@angular/common":"^14.2.0","@angular/core":"^14.2.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/commudle-ng-image-container.mjs","es2020":"fesm2020/commudle-ng-image-container.mjs","esm2020":"esm2020/commudle-ng-image-container.mjs","fesm2020":"fesm2020/commudle-ng-image-container.mjs","fesm2015":"fesm2015/commudle-ng-image-container.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/commudle-ng-image-container.mjs","es2020":"./fesm2020/commudle-ng-image-container.mjs","es2015":"./fesm2015/commudle-ng-image-container.mjs","node":"./fesm2015/commudle-ng-image-container.mjs","default":"./fesm2020/commudle-ng-image-container.mjs"}},"sideEffects":false,"gitHead":"d2258ea0123a36be542c9cd3804e251635087bd2","description":"![npm](https://img.shields.io/npm/v/%40commudle%2Fng-image-container?logo=npm&link=https%3A%2F%2Fgithub.com%2Fcommudle%2Fng-image-container) ![NPM](https://img.shields.io/npm/l/%40commudle%2Fng-image-container)","_id":"@commudle/ng-image-container@1.0.2","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-7lN4rGl9Ytwy+I4QflQwNz0hCcBEPi9OEc12YG8VBGt4cKkUXYobBaSfdeiRk9hd36Krt7+AAVP79CRcJB3RZw==","shasum":"57dbf501553acd75cec62a85ec0f29426107b37f","tarball":"https://registry.npmjs.org/@commudle/ng-image-container/-/ng-image-container-1.0.2.tgz","fileCount":14,"unpackedSize":30820,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvamyaW1QPnU3sY9nsBe8fLVsyaE6Iw2Pn8oFA/g5E8AiEApZoHrao2n7Qd8xxgtiyMEI7W5GFSuxcDgl/21QMfMtc="}]},"_npmUser":{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},"directories":{},"maintainers":[{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},{"name":"arpansac","email":"arpansac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-image-container_1.0.2_1696515527036_0.7157755575332481"},"_hasShrinkwrap":false},"2.0.0":{"name":"@commudle/ng-image-container","description":"ng-image-container: Angular component for enhanced, accessible image presentation.","version":"2.0.0","license":"MIT","author":{"name":"Commudle","email":"more@commudle.com"},"keywords":["angular","ng","image","container","component","commudle"],"bugs":{"url":"https://github.com/commudle/ng-image-container/issues"},"homepage":"https://github.com/commudle/ng-image-container#readme","repository":{"type":"git","url":"git+https://github.com/commudle/ng-image-container.git"},"peerDependencies":{"@angular/common":"^14.2.0","@angular/core":"^14.2.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/commudle-ng-image-container.mjs","es2020":"fesm2020/commudle-ng-image-container.mjs","esm2020":"esm2020/commudle-ng-image-container.mjs","fesm2020":"fesm2020/commudle-ng-image-container.mjs","fesm2015":"fesm2015/commudle-ng-image-container.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/commudle-ng-image-container.mjs","es2020":"./fesm2020/commudle-ng-image-container.mjs","es2015":"./fesm2015/commudle-ng-image-container.mjs","node":"./fesm2015/commudle-ng-image-container.mjs","default":"./fesm2020/commudle-ng-image-container.mjs"}},"sideEffects":false,"gitHead":"3752d84aa1f2b6ad8555716f45906d919fde7fb2","_id":"@commudle/ng-image-container@2.0.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-bmkB1/dQM9hc0306gEnSbIU6oZ1zGnq1V10ifR4tsoLqjLq632dFJbmgIOSxCwbwlg1MuUETL3OzFScqbK0QLw==","shasum":"fffcc5408d9904eba14c1895dd10589d125835fa","tarball":"https://registry.npmjs.org/@commudle/ng-image-container/-/ng-image-container-2.0.0.tgz","fileCount":14,"unpackedSize":31184,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXsxICq5jMHwxsyHlbGXCOUGKqFAQ4Oz0LCmZyNL7s6AiEA6IRBwebrSLTih66l5lAedBWiUHfMetc66VtjAYRt1Ds="}]},"_npmUser":{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},"directories":{},"maintainers":[{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},{"name":"arpansac","email":"arpansac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-image-container_2.0.0_1696947311565_0.7521772392506494"},"_hasShrinkwrap":false},"2.0.1":{"name":"@commudle/ng-image-container","version":"2.0.1","license":"MIT","description":"Angular component to display image of any dimension in a container of any aspect ratio to have standard looking images across your web page. Completely flexible.","author":{"name":"Commudle","email":"more@commudle.com"},"keywords":["angular","ng","image-container","component","commudle"],"bugs":{"url":"https://github.com/commudle/ng-image-container/issues"},"homepage":"https://github.com/commudle/ng-image-container#readme","repository":{"type":"git","url":"git+https://github.com/commudle/ng-image-container.git"},"peerDependencies":{"@angular/common":"^14.2.0","@angular/core":"^14.2.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/commudle-ng-image-container.mjs","es2020":"fesm2020/commudle-ng-image-container.mjs","esm2020":"esm2020/commudle-ng-image-container.mjs","fesm2020":"fesm2020/commudle-ng-image-container.mjs","fesm2015":"fesm2015/commudle-ng-image-container.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/commudle-ng-image-container.mjs","es2020":"./fesm2020/commudle-ng-image-container.mjs","es2015":"./fesm2015/commudle-ng-image-container.mjs","node":"./fesm2015/commudle-ng-image-container.mjs","default":"./fesm2020/commudle-ng-image-container.mjs"}},"sideEffects":false,"gitHead":"96e0c517a691ae97101a6de07f71e5541774eaf3","_id":"@commudle/ng-image-container@2.0.1","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-Nu1v7rz2gg9QZVh+xKUCIv4xXE8JoIn02evTJ2Ry2u7qw8kp4CyAGBBGmhFF6WCV2l87axby3CjfjwF/MzmWiw==","shasum":"29596be67046480ddd38d3e965030fd636726f96","tarball":"https://registry.npmjs.org/@commudle/ng-image-container/-/ng-image-container-2.0.1.tgz","fileCount":14,"unpackedSize":31335,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7gT1S67qbhc28SzGu4B/8nKFiKHOXpkd0188N8EJ/lAIgce7b1FAsU2oCNHwK3Iegj29Rr2KYrxpcFmOLiEZaPig="}]},"_npmUser":{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},"directories":{},"maintainers":[{"name":"prerna290","email":"prernaa290@gmail.com"},{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},{"name":"arpansac","email":"arpansac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-image-container_2.0.1_1697094288234_0.28835747986629867"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-04T14:33:26.754Z","1.0.0":"2023-10-04T14:33:26.984Z","modified":"2023-10-12T07:04:48.723Z","1.0.1":"2023-10-05T11:45:54.254Z","1.0.2":"2023-10-05T14:18:47.234Z","2.0.0":"2023-10-10T14:15:11.816Z","2.0.1":"2023-10-12T07:04:48.482Z"},"maintainers":[{"name":"prerna290","email":"prernaa290@gmail.com"},{"name":"arshdeepgrover","email":"arsh199820@gmail.com"},{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},{"name":"arpansac","email":"arpansac@gmail.com"}],"description":"Angular component to display image of any dimension in a container of any aspect ratio to have standard looking images across your web page. Completely flexible.","homepage":"https://github.com/commudle/ng-image-container#readme","repository":{"type":"git","url":"git+https://github.com/commudle/ng-image-container.git"},"author":{"name":"Commudle","email":"more@commudle.com"},"bugs":{"url":"https://github.com/commudle/ng-image-container/issues"},"license":"MIT","readme":"# ng-image-container\n\nAngular component to display image of any dimension in a container of any aspect ratio to have standard looking images across your web page. Completely flexible.\n\n![npm](https://img.shields.io/npm/v/%40commudle%2Fng-image-container?logo=npm&link=https%3A%2F%2Fgithub.com%2Fcommudle%2Fng-image-container)\n![NPM](https://img.shields.io/npm/l/%40commudle%2Fng-image-container)\n\nThe ng-image-container is an Angular component that enhances image presentation in web applications. It allows users to specify image sources, set custom aspect ratios for containers, and provide accessibility with alternative text. It automatically handles background blur when the aspect ratio doesn't match the image's aspect ratio, ensuring a visually pleasing and accessible image display. This component is easy to install and use in Angular projects, contributing to a more engaging user experience.\n\n**Demo:**\n[Preview](https://www.commudle.com/communities/cdn-commudle-developer-network/events/connectivity-and-storage-in-docker-containers)\n\n## Table of Contents\n\n- [Usage](#usage)\n- [Installation](#installation)\n- [License](#license)\n- [Issues and Feedback](#issues-and-feedback)\n\n## Usage\n\nHere's a brief overview of the available options and features of ng-image-container:\n\n1. [src]: Specifies the source URL of the image to be displayed.\n2. [aspectRatio]: Allows you to set the aspect ratio of the image container, e.g., 16/9 for a widescreen aspect ratio.\n3. [alt]: Provides alternative text for the image for accessibility purposes.\n\n## Installation\n\nTo use `ng-image-container` in your Angular project, follow these steps:\n\n1. Install the library using npm or yarn:\n\n```bash\nnpm install @commudle/ng-image-container\n# or\nyarn add @commudle/ng-image-container\n```\n\n2. Import the NgImageContainerModule into your Angular module (e.g., app.module.ts):\n\n```typescript\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgImageContainerModule } from \"@commudle/ng-image-container\";\n\n@NgModule({\n  declarations: [\n    // ...\n  ],\n  imports: [\n    BrowserModule,\n    NgImageContainerModule, // Import the NgImageContainerModule here\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n3. Start using the ng-image-container component in your templates:\n\n```html\n<ng-image-container [src]=\"'your-image-url.jpg'\" [aspectRatio]=\"16/9\" [alt]=\"'Image Alt Text'\"></ng-image-container>\n```\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Issues and Feedback\n\nIf you encounter any issues or have suggestions for improvements, please feel free to open an issue on the GitHub repository.\n<https://github.com/commudle/ng-image-container/issues>\n\nWe welcome contributions from the community, so if you'd like to contribute, please read our contribution guidelines.\n","readmeFilename":"README.md","keywords":["angular","ng","image-container","component","commudle"]}